:root {
    --font-body: "helvetica-neue-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-cond: "helvetica-neue-lt-pro-cond", "helvetica-neue-lt-pro", "Arial Narrow", Arial, sans-serif;
    /* Report palette
       #f47d20  headings
       #000000  body text
       #0b3554  intro headings / brand navy */
    --color-heading: #f47d20;
    --color-text: #000000;
    --color-intro: #0b3554;

    /* the banner tagline's third word — taken from the green in the
       banner artwork, since the three-colour report palette has no green */
    --color-green: #2fa84f;

    /* aliases so the component rules below read by role; every one of them
       resolves to one of the three report colours above — nothing invented */
    --color-primary: var(--color-intro);
    --color-deep: var(--color-intro);
    --color-accent: var(--color-heading);
    --color-accent-2: var(--color-heading);
    --grad-accent: var(--color-heading);
    --color-primary: #003974;
    --color-deep: #001B38;
    --color-accent: #00B5CC;
    --color-accent-2: #6FE3B4;
    --color-text: #1a1a1a;
    --color-white: #ffffff;
    --color-orange: #f47d20;
    --color-body-text: #000000;
    --color-intro-heading: #0b3554;
    --color-qa-heading: #767e84;
    --color-green: #00a651;
    --color-blue: #29abe2;
    --color-cream: #fdf7ec;
    --grad-accent: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-2) 100%);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    /*--- Fluid scale -------------------------------------------------
       Type and spacing interpolate between breakpoints instead of
       stepping at them, so sections built later are responsive by
       default and responsive.css only has to handle LAYOUT changes
       (what stacks, what hides), not a font-size for every tier.
       Each clamp is calibrated across 320px -> 1920px. */
    --fs-h1: clamp(30px, 1.30rem + 2.60vw, 68px);
    --fs-h2: clamp(25px, 1.16rem + 1.85vw, 52px);
    --fs-h3: clamp(21px, 1.05rem + 1.20vw, 38px);
    --fs-h4: clamp(19px, 1.02rem + 0.70vw, 28px);
    --fs-h5: clamp(17px, 0.99rem + 0.40vw, 22px);
    --fs-h6: clamp(15px, 0.88rem + 0.25vw, 19px);
    --fs-body: clamp(15px, 0.90rem + 0.16vw, 18px);
    --fs-small: clamp(13px, 0.78rem + 0.10vw, 15px);
    --fs-eyebrow: clamp(11px, 0.65rem + 0.12vw, 13px);

    --section-pad: clamp(48px, 3.2rem + 3.4vw, 130px);
    --gutter: clamp(16px, 0.6rem + 1.6vw, 40px);
    --stack-gap: clamp(18px, 1rem + 1.2vw, 40px);

    /* one source of truth for the drawer switch — the same 1023px the JS
       reads, so CSS and JS can never disagree about which nav is showing */
    --nav-breakpoint: 1023px;
}

/*--- Overflow guards ---
   A horizontal scrollbar on a report page is always a bug. These stop the
   usual culprits (oversized media, long unbroken strings) before a section
   is even written. */
/* `clip`, not `hidden`: overflow-x:hidden makes the element a scroll
   container, which silently breaks every position:sticky descendant (the
   pinned image in the Landscape section). `clip` cuts the overflow without
   creating that container, so sticky keeps working. The hidden line stays
   first as the fallback for engines without `clip`. */
html,
body {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* wide content scrolls inside its own box rather than pushing the page */
.table-responsive,
.scrollX {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}
body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0px;
    padding: 0px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-heading);
    /* long words in headings break rather than overflow on narrow screens */
    overflow-wrap: break-word;
}

h1 { font-size: var(--fs-h1); line-height: 1.08; }
h2 { font-size: var(--fs-h2); line-height: 1.14; }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-size: var(--fs-h4); line-height: 1.28; }
h5 { font-size: var(--fs-h5); line-height: 1.34; }
h6 { font-size: var(--fs-h6); line-height: 1.4; }

/* generic section shell — use on every <section> so vertical rhythm scales
   with the viewport without a per-breakpoint override */
.section {
    padding-top: var(--section-pad);
    padding-bottom: var(--section-pad);
}

/* intro / section-opening headings sit in the brand navy instead of orange */
.introHeading,
h1.introHeading,
h2.introHeading,
h3.introHeading {
    color: var(--color-intro);
}

/* headings on a dark ground keep their own colour */
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
#header h1, #header h2, #header h3, #header h4, #header h5, #header h6 {
    color: inherit;
}

a {
    text-decoration: none !important;
    font-size: inherit;
}

a:hover {
    text-decoration: none !important;
}

p {
    font-size: var(--fs-body);
    line-height: 1.62;
    overflow-wrap: break-word;
}


/*=========== Layout ===========*/
#main {
    padding-top: 104px;
    min-height: 40vh;
}

body.homePage #main {
    padding-top: 0;
}

/*=========== Header ===========*/
/* The bar itself paints nothing: the logo, the pills and the CTA are each
   their own floating object, so the header reads as chrome sitting on the
   page rather than a band across the top. */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    padding: 18px 0;
    /* dark blue at the top fading to clear at the bottom, so the white logo
       reads against the wash without the bar cutting a hard edge */
    background: linear-gradient(to bottom, #001B38 0%, rgba(0, 27, 56, 0.72) 40%, rgba(0, 27, 56, 0.32) 72%, rgba(0, 27, 56, 0) 100%);
    transition: transform 0.45s var(--ease-out), padding 0.45s var(--ease-out);
}

/* auto-hide on scroll down, return on scroll up — suppressed by the JS
   while a card is open so it cannot slide out from under one */
#header.isHidden {
    transform: translateY(-130%);
}

#header.sticky {
    padding: 10px 0;
}

.navBar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.mainLogo {
    flex: 0 0 auto;
    line-height: 0;
    transition: padding 0.45s var(--ease-out);
}

.mainLogo img {
    max-width: 150px;
    height: auto;
    display: block;
    transition: max-width 0.45s var(--ease-out);
}

#header.sticky .mainLogo img {
    max-width: 130px;
}

.navRight {
    display: flex;
    align-items: center;
    gap: 12px;
}

/*--- Pills ---*/
.navPills {
    display: flex;
    align-items: center;
    gap: 8px;
}

.navPill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1.5px solid rgba(11, 53, 84, 0.2);
    background: #ffffff;
    color: var(--color-deep);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(11, 53, 84, 0.07);
    transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.navPill svg {
    flex: 0 0 auto;
    color: var(--color-accent);
    transition: color 0.25s var(--ease-out);
}

.navPill:hover,
.navPill:focus-visible {
    color: var(--color-primary);
    border-color: var(--color-accent);
    transform: translateY(-1px);
}

/* filled solid while its own card is open */
.navPill[aria-expanded="true"] {
    background: var(--color-deep);
    border-color: var(--color-deep);
    color: #ffffff;
}

.navPill[aria-expanded="true"] svg {
    color: var(--color-accent-2);
}

/*--- Download CTA ---*/
.navCta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    overflow: hidden;
    border: 1.5px solid var(--color-deep);
    background: var(--color-deep);
    color: #ffffff;
    font-family: var(--font-cond);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.4s var(--ease-out), transform 0.25s var(--ease-out);
}

.navCta svg,
.navCta span {
    position: relative;
    z-index: 2;
}

.navCta svg {
    color: #ffffff;
}

/* on hover the sweep fills the button, so the arrow turns with the text */
.navCta:hover svg {
    color: var(--color-deep);
}

.navCta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-accent);
    transform: translateY(101%);
    transition: transform 0.45s var(--ease-out);
}

.navCta:hover {
    color: var(--color-deep);
    transform: translateY(-1px);
}

.navCta:hover::before {
    transform: translateY(0);
}

/*--- Hamburger ---*/
.navToggle {
    display: none;
    position: relative;
    flex: 0 0 auto;
    width: 24px;
    height: 18px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.navToggle::before {
    content: "";
    position: absolute;
    inset: -12px -14px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(11, 53, 84, 0.14);
    z-index: -1;
}

.navToggle span,
.navToggle span::before,
.navToggle span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--color-deep);
    transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}

.navToggle span { top: 8px; }
.navToggle span::before { top: -6px; }
.navToggle span::after { top: 6px; }

/* hamburger becomes an X */
#header.isOpen .navToggle span { transform: rotate(45deg); }
#header.isOpen .navToggle span::before { transform: translateY(6px) rotate(-90deg); opacity: 0; }
#header.isOpen .navToggle span::after { transform: translateY(-6px) rotate(-90deg); }

/*=========== Dropdown card ===========*/
/* `top` reads a JS-measured var rather than a hardcoded guess — the real
   header height shifts with the sticky state and font loading, and a fixed
   value would either overlap the bar or leave a gap under it. `left` is set
   inline by the JS so the card tracks the pill that opened it. */
.megaCard {
    position: fixed;
    top: calc(var(--nav-height, 96px) + 12px);
    left: 0;
    z-index: 890;
    width: min(920px, 94vw);
    max-height: min(80vh, 620px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(11, 53, 84, 0.12);
    background: #ffffff;
    box-shadow: 0 22px 50px rgba(11, 53, 84, 0.22);
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    transform-origin: top left;
    pointer-events: none;
    transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.megaCard.isOpen {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.megaCard__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    border-bottom: 1px solid rgba(11, 53, 84, 0.12);
    color: var(--color-intro);
    font-family: var(--font-cond);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.megaCard__head svg {
    color: var(--color-accent);
}

.megaCard__links {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 14px 18px 20px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 10px;
    align-content: start;
}

.megaCard__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.megaCard__links a {
    position: relative;
    display: block;
    padding: 11px 12px 11px 18px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.4;
    color: rgba(11, 53, 84, 0.85);
    transition: color 0.25s var(--ease-out), background 0.25s var(--ease-out), padding-left 0.25s var(--ease-out);
}

/* accent bar grows in from the left on hover */
.megaCard__links a::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: var(--grad-accent);
    transform: scaleY(0);
    transition: transform 0.25s var(--ease-out);
}

.megaCard__links a:hover {
    color: var(--color-intro);
    background: rgba(11, 53, 84, 0.05);
    padding-left: 24px;
}

.megaCard__links a:hover::before {
    transform: scaleY(1);
}

.megaCard__links::-webkit-scrollbar {
    width: 5px;
}

.megaCard__links::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.22);
}

.navScrim {
    position: fixed;
    inset: 0;
    z-index: 880;
    background: rgba(11, 53, 84, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out);
}

.navScrim.isOpen {
    opacity: 1;
    pointer-events: auto;
}

/*=========== Hero ===========*/
/* 100vh with a dvh override: on mobile browsers 100vh is measured against
   the viewport WITHOUT the collapsible address bar, so a plain 100vh hero
   sits ~60-100px taller than the screen and the scroll cue is never
   visible on first paint. dvh tracks the real height; the vh line stays
   as the fallback for anything that does not support it. */


/*--- Buttons (shared component, used by later sections) ---*/
.btnPrimary,
.btnGhost {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    overflow: hidden;
    font-family: var(--font-cond);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), transform 0.3s var(--ease-out);
}

.btnPrimary span,
.btnPrimary svg,
.btnGhost span,
.btnGhost svg {
    position: relative;
    z-index: 2;
}

.btnPrimary {
    background: var(--color-heading);
    color: #ffffff;
    border: 1.5px solid var(--color-heading);
}

/* white wipes up from the bottom; the label flips to the brand orange */
.btnPrimary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffffff;
    transform: translateY(101%);
    transition: transform 0.45s var(--ease-out);
}

.btnPrimary:hover {
    color: var(--color-heading);
    transform: translateY(-2px);
}

.btnPrimary:hover::before {
    transform: translateY(0);
}

.btnPrimary svg {
    transition: transform 0.4s var(--ease-out);
}

.btnPrimary:hover svg {
    transform: translateX(4px);
}

.btnGhost {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.42);
    color: #ffffff;
}

.btnGhost::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffffff;
    transform: translateY(101%);
    transition: transform 0.45s var(--ease-out);
}

.btnGhost:hover {
    color: var(--color-intro);
    border-color: #ffffff;
    transform: translateY(-2px);
}

.btnGhost:hover::before {
    transform: translateY(0);
}

.btnGhost svg {
    transition: transform 0.4s var(--ease-out);
}

.btnGhost:hover svg {
    transform: translateY(3px);
}

.hero__scroll:hover {
    color: #ffffff;
}

/* a short bright segment travelling down the rail, rather than a bouncing
   chevron — quieter, and it does not fight the artwork */

@keyframes heroScrollRun {
    0% { transform: translateY(-100%); }
    60%, 100% { transform: translateY(260%); }
}

/*=========== Landscape of Our Transformation Journey ===========*/
/* Two full screens that behave as one: the image holds at 100vh while the
   content panel scrolls UP OVER it. Done with position:sticky rather than
   a scroll library — the browser pins the image natively, so there is no
   JS to run on every scroll frame, nothing to re-measure on resize, and
   it degrades to a plain stacked band wherever sticky is unsupported.

   The section's own height is image (100vh) + panel (100vh); what the
   viewer sees is always one 100vh frame at a time.  */
.landscape {
    position: relative;
    background: #ffffff;
}

/*--- Image: pinned first screen ---*/
.landscape__banner {
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #05121f;
}

/* Oversized on purpose: the parallax shifts this vertically, and the extra
   30% of height is the slack that keeps its edges out of frame at both
   ends of the travel. Without it the top/bottom would tear away from the
   container mid-scroll. */
.landscape__banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* the facility photo is 16:9 but the pinned frame is portrait-tall on
       desktop, so it is centred rather than offset — the entrance and the
       signage both sit mid-frame and an offset crop loses one of them */
    object-position: 50% center;
    display: block;
}

/*--- Content: second screen, glass panel riding over the image ---*/
.landscape__body {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    /* the band itself is only a frame now: it holds the screen and
       centres the pane on it, and carries no ground of its own */
    padding-top: clamp(40px, 2.4rem + 2.6vw, 90px);
    padding-bottom: clamp(40px, 2.4rem + 2.6vw, 90px);
}

/* --- the pane ---
   Solid white first as the fallback: if backdrop-filter is unsupported
   the pane must still be opaque, or the copy sits unreadable directly
   on the artwork. Browsers that do support it take the @supports block
   below and go translucent. */
.landscape__body > .container {
    position: relative;
    background: #ffffff;
    border-radius: clamp(18px, 2vw, 32px);
    box-shadow: 0 30px 60px rgba(11, 53, 84, 0.28);
    padding: clamp(32px, 2rem + 2vw, 64px) 60px;
    overflow: hidden;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .landscape__body > .container {
        /* Thinner fill so more of the artwork reads through. The legibility
           that the fill used to provide comes from the filter instead:
           a heavier blur flattens the busy areas of the image, and
           brightness() lifts the dark half of it so navy copy still has
           something light to sit on. Trading opacity for filter strength
           is what keeps this readable at 0.5. */
        background: rgba(255, 255, 255, 0.5);
        -webkit-backdrop-filter: blur(42px) saturate(150%) brightness(1.28);
        backdrop-filter: blur(42px) saturate(150%) brightness(1.28);
        border: 1px solid rgba(255, 255, 255, 0.5);
    }

    /* a bright hairline along the top edge, the way a real glass sheet
       catches light where it meets what is behind it */
    .landscape__body > .container::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 1px;
        border-radius: inherit;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.9) 22%, rgba(255, 255, 255, 0.9) 78%, transparent 100%);
    }

    /* the input blocks become glass too — solid grey panels on a glass
       sheet read as holes punched in it */
    .equation__item:not(.equation__item--result) {
        background: rgba(255, 255, 255, 0.34);
        border: 1px solid rgba(255, 255, 255, 0.5);
    }
}

.landscape__body > .container {
    width: 100%;
}

/*--- Section headings ---
   Orange caps with a navy rule set BESIDE the text, matching the report's
   own heading treatment rather than a rule underneath. */
.sectionTitle {
    display: block;
    font-size: clamp(20px, 0.9rem + 1.15vw, 32px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--color-heading);
    margin-bottom: clamp(28px, 1.6rem + 1.6vw, 52px);
}

.sectionTitle--sub {
    margin-top: clamp(40px, 2.2rem + 2.4vw, 76px);
    font-size: clamp(18px, 0.85rem + 0.85vw, 26px);
}

/*=========== The equation ===========*/
/* Grid, not flex: the three input blocks share one equal track each while
   the result block takes a wider one, and the operators sit in their own
   auto tracks. A flex row would need magic basis values to hold that. */
.equation {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1.55fr;
    align-items: stretch;
    gap: clamp(8px, 0.8vw, 16px);
}

.equation__item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: clamp(26px, 1.6rem + 1.6vw, 44px) clamp(14px, 1.2vw, 24px);
    background: #eaeef2;
    text-align: center;
    font-size: clamp(14px, 0.82rem + 0.34vw, 18px);
    line-height: 1.4;
    color: var(--color-intro);
}

/* short navy cap rule on the top-left corner of each block */
.equation__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(44px, 4.5vw, 78px);
    height: 4px;
    background: var(--color-intro);
}

.equation__item--result {
    background: var(--color-heading);
    color: #ffffff;
    font-weight: 700;
    text-align: left;
}

/* .equation__item--result::before {
    background: #ffffff;
} */

.equation__op {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(20px, 0.9rem + 1vw, 32px);
    font-weight: 300;
    line-height: 1;
    color: var(--color-intro);
    padding: 0 clamp(2px, 0.4vw, 8px);
}
.ewclrorgn{
    color: var(--color-orange);
}

/*=========== Track record ===========*/
.trackRecord {
    --track-gap: clamp(24px, 1.4rem + 1.8vw, 48px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.trackRecord__item {
    position: relative;
    padding-top: clamp(16px, 1rem + 0.7vw, 26px);
    padding-left: calc(var(--track-gap) / 2);
    padding-right: calc(var(--track-gap) / 2);
    border-left: 1px solid rgba(11, 53, 84, 0.22);
}

.trackRecord__item:first-child {
    padding-left: 0;
    border-left: none;
}

.trackRecord__item:first-child::before {
    left: 0;
}

.trackRecord__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(var(--track-gap) / 2);
    width: clamp(40px, 4vw, 62px);
    height: 4px;
    background: var(--color-intro);
}

.trackRecord__value {
    display: block;
    font-size: clamp(30px, 1.1rem + 2.5vw, 58px);
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--color-heading);
    margin-bottom: clamp(8px, 0.5rem + 0.4vw, 16px);
    white-space: nowrap;
}

/* the rupee mark and the unit ride smaller than the figure itself, the way
   the printed page sets them */
.trackRecord__cur {
    font-style: normal;
    font-size: 0.6em;
}

.trackRecord__unit {
    font-style: normal;
    font-size: 0.52em;
}

.trackRecord__label {
    font-size: clamp(13px, 0.78rem + 0.22vw, 16px);
    line-height: 1.45;
    color: var(--color-intro);
    max-width: 15em;
}

/*=========== Scroll reveal (shared utility) ===========*/
/* Hidden only when JS is present — the .js class is set by an inline
   script in <head>, so a visitor without JS gets the content plainly
   visible rather than a blank page. app.js adds .reveal-off if GSAP is
   missing or reduced motion is on, which restores them the same way. */
.js [data-reveal-item] {
    opacity: 0;
    will-change: transform, opacity;
}

.reveal-off [data-reveal-item] {
    opacity: 1 !important;
    transform: none !important;
}

/*=========== Corporate Overview : Core Capabilities ===========*/
.coreCap {
    position: relative;
    background: #f3f6f8;
    overflow: hidden;
}

.coreCap > .container {
    position: relative;
    z-index: 2;
}

/*--- Heading block ---*/
.coreCap__head {
    margin-bottom: clamp(34px, 2rem + 2.2vw, 68px);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-cond);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-heading);
    margin-bottom: clamp(12px, 0.8rem + 0.5vw, 20px);
}

.eyebrow::before {
    content: "";
    width: clamp(24px, 2vw, 44px);
    height: 2px;
    margin-right: 14px;
    background: var(--color-heading);
}

.coreCap__title {
    font-size: clamp(28px, 1.1rem + 2.5vw, 60px);
    line-height: 1.05;
    font-weight: 300;
    letter-spacing: -0.01em;
    color: var(--color-intro);
    text-transform: uppercase;
    max-width: 15em;
}

.coreCap__title em {
    display: block;
    font-style: normal;
    font-weight: 700;
    color: var(--color-heading);
}

/*--- Two-column shell ---*/
.coreCap__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(30px, 2rem + 2.6vw, 76px);
    align-items: start;
}

/*--- Sticky media column ---
   Holds in place while the eight points scroll past it, so the image is
   on screen for the whole list instead of scrolling away after point 2. */
.coreCap__media {
    position: sticky;
    top: calc(var(--nav-height, 96px) + 30px);
}

.coreCap__mediaFrame {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    aspect-ratio: 4 / 5;
    background: #05121f;
    box-shadow: 0 26px 60px rgba(11, 53, 84, 0.22);
}

/* oversized for the same reason as the Landscape image: the parallax
   needs slack at both ends of its travel */
.coreCap__mediaFrame img {
    position: absolute;
    top: -12%;
    left: 0;
    width: 100%;
    height: 124%;
    object-fit: cover;
    object-position: 50% center;
    will-change: transform;
}

/*--- Sub heading ---*/
.coreCap__sub {
    display: block;
    font-size: clamp(17px, 0.8rem + 0.8vw, 24px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-heading);
    margin-bottom: clamp(20px, 1.2rem + 1vw, 34px);
}

/*=========== The eight points ===========*/



/* orange bar that grows down the left edge on hover */




/*=========== Our Offerings ===========*/
.offerings {
    position: relative;
    background: #ffffff;
}

.offerings__intro {
    max-width: 900px;
    /* auto side margins do the centring of the BLOCK; text-align centres
       the lines inside it — both are needed, the max-width alone would
       leave it pinned left */
    margin-left: auto;
    margin-right: auto;
    /* reserves the height the sticky heading band pulls back over itself
       (see .offerStage__head) plus the gap you actually see */
    margin-bottom: 40px;
    text-align: center;
}

/* the eyebrow is inline-flex, so it needs no rule of its own to centre —
   but its leading dash should sit on both sides once centred */
.offerings__intro .eyebrow::after {
    content: "";
    width: clamp(24px, 2vw, 44px);
    height: 2px;
    margin-left: 14px;
    background: var(--color-heading);
}

.offerings__title {
    font-size: clamp(28px, 1.1rem + 2.5vw, 58px);
    line-height: 1.06;
    font-weight: 300;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-intro);
    margin-bottom: clamp(16px, 1rem + 0.8vw, 26px);
}

.offerings__title em {
    display: block;
    font-style: normal;
    font-weight: 700;
    color: var(--color-heading);
}

.offerings__sub {
    width: 100%;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.2vw, 24px);
    font-size: clamp(17px, 0.8rem + 0.85vw, 26px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-heading);
    margin-bottom: clamp(14px, 0.8rem + 0.7vw, 24px);
}

.offerings__sub::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(11, 53, 84, 0.24);
}

/*=========== The scroll-driven deck ===========*/
/* Full-viewport panels, the Laurus pattern.

   Every panel is exactly 100vh and every panel sticks at the SAME top
   offset. That is the whole trick: each one gets a full screen of scroll
   to itself, and the next rises to cover it completely. The earlier
   "stagger the top offsets" version could not do this — the last card
   had only the container's leftover height to travel through, so it
   never reached the top at all.

   The panel is just the scroll frame. The visible white card lives in
   .offerCard__scale, which is what gets scaled, blurred and faded as the
   next panel slides over it. */
/*--- Sticky section heading ---
   "OUR OFFERINGS AND THEIR APPLICATIONS" holds under the site header for
   the whole of the deck, so you always know which section the cards
   belong to. --offer-head-h is the height it reserves; the panels below
   subtract exactly that, which is why it is a variable and not a number
   typed in two places. */

/* Sticks at 0, not at --nav-height, and pads itself down instead. Two
   reasons: the band then paints the WHOLE strip from the top of the
   viewport, so a card rising underneath can never show through the gap
   between the site header and the heading; and because the site header
   auto-hides on scroll down, sticking at --nav-height would leave that
   strip empty and the card visible inside it. */


/* no ground of its own — the section behind stays white, so the cards
   read as floating on the page rather than on a grey band */
/* the layer the scroll effect transforms */

/* the white card itself */
/* Width is matched to the section heading above it, not to a round
   number. .container is capped at 1320px with 12px of padding a side, so
   its CONTENT edge — where "OUR OFFERINGS AND THEIR APPLICATIONS" starts
   and ends — sits at 1296px. The card takes that same measure, and every
   tier below mirrors its own container width the same way. */

/* vertical padding kept tighter than horizontal — the card has width to
   spare but is fighting for height */


/*--- Card header ---*/


/* the report icons are two-tone artwork with their own navy/orange fills,
   so they come in as <img> and are not tinted by currentColor */




/*--- Card body ---*/


/* the printed page separates variants with a thin orange pipe */

/*--- Lists ---*/
/* small square marker, matching the report's own bullet */


/*--- Footnote ---*/

/*=========== Footer ===========*/
footer {
    position: relative;
    overflow: hidden;
    padding: 90px 0 34px;
    color: #ffffff;
    background: var(--color-primary);
}


footer .container {
    position: relative;
    z-index: 2;
}

.footTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footLogo img {
    width: 136px;
    height: auto;
    display: block;
}

/*--- Big download CTA ---*/
.footDownload a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 14px 14px 14px 34px;
    border-radius: 60px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-family: var(--font-cond);
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: color 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
}

.footDownload a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-accent);
    transform: translateX(-101%);
    transition: transform 0.5s var(--ease-out);
}

.footDownload a span,
.footDownload a .footArrow {
    position: relative;
    z-index: 2;
}

.footDownload a b {
    font-weight: 700;
    font-size: 17px;
}

.footArrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    transition: background 0.45s var(--ease-out);
}

/* the arrow is drawn rather than loaded, so the disc cannot end up
   empty if an icon file goes missing */
.footArrow svg {
    display: block;
    width: 18px;
    height: 18px;
    transition: transform 0.45s var(--ease-out);
}

.footDownload a:hover {
    color: var(--color-deep);
    border-color: transparent;
}

.footDownload a:hover::before {
    transform: translateX(0);
}

.footDownload a:hover .footArrow {
    background: rgba(11, 53, 84, 0.16);
}

.footDownload a:hover .footArrow svg {
    transform: translateY(4px);
}

/*--- Footer bottom bar ---*/
.footBottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 26px;
}

.investorRel {
    display: flex;
    align-items: center;
    gap: 26px;
    font-size: 15px;
}

.investorRel a {
    position: relative;
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    transition: color 0.35s var(--ease-out);
}

.investorRel a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: var(--grad-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s var(--ease-out);
}

.investorRel a:hover {
    color: #ffffff;
}

.investorRel a:hover::after {
    transform: scaleX(1);
}

.copyRights p {
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.55);
}


/*=========== Anchor scrolling ===========*/
/* the header is fixed, so an in-page jump must offset by its height or the
   target lands underneath the bar. --nav-height is measured in custom.js. */
html {
    scroll-behavior: smooth;
}

[id] {
    scroll-margin-top: calc(var(--nav-height, 96px) + 16px);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}


/*--- Swapping section title ---
   Both titles occupy the same grid cell so the band never changes height
   or reflows the rule beside it; only their opacity crossfades. */
/*--- Card 04: field projects ---*/
/* a column, not a block: the button below the list is pushed to the
   foot of the card with an auto margin, and an auto margin needs a flex
   parent to push against */



/* the last row holds a single item, so it runs the full width rather than
   leaving an odd empty cell beside it */
.offerProject:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.offerProject {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(12px, 1.1vw, 18px);
    padding: clamp(10px, 0.9vw, 14px) 0;
    border: 0;
    background: none;
    transition: transform 0.35s var(--ease-out);
}

.offerProject:hover {
    transform: translateX(3px);
}

/* the chevron disc the report sets at the head of each bar */
.offerProject__mark {
    display: block;
    /* flex-basis as well as width: the disc is a grid item beside text
       that wraps, and without a floor it is the first thing squeezed */
    flex: 0 0 auto;
    width: clamp(34px, 2.8vw, 44px);
    height: clamp(34px, 2.8vw, 44px);
}

.offerProject__mark img {
    display: block;
    width: 100%;
    height: 100%;
}

.offerProject__name {
    font-family: var(--font-cond);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-heading);
}

/* the sub in "CO2" would otherwise drop out of the cap line */
.offerProject__name sub {
    font-size: 0.72em;
    line-height: 0;
}


/*=====================================================================
   Research & Development
   One screen held while scrolled through. The photograph is bright and
   busy, so the copy sits on a navy scrim that is heaviest at the left
   where the heading runs and along the foot under the figures.
=====================================================================*/
.rnd {
    position: relative;
    /* two screens of scroll for one screen of section: the copy is all in
       by just past the first, and the rest is spent with it readable */
    height: 220vh;
    background: var(--color-intro);
}

.rnd__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.rnd__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    will-change: transform;
}

/* the art-directed sections wrap the image in <picture>, which is inline
   by default and so gives the img no height to resolve its 100% against —
   it has to fill the media box itself */
.rnd__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.rnd__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% center;
}

.rnd__scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* while the picture is on its own it only gets enough of a wash to sit it
   into the section — the photograph is meant to be read at this point */
.rnd__scrim--base {
    background: linear-gradient(to top, rgba(11, 53, 84, 0.55) 0%, rgba(11, 53, 84, 0.08) 60%);
}

/* the deep one carries the contrast the copy needs, so it is faded in with
   the copy rather than sitting on the picture from the start */
.rnd__scrim--deep {
    opacity: 0;
    background:
        linear-gradient(to right, rgba(11, 53, 84, 0.95) 0%, rgba(11, 53, 84, 0.9) 55%, rgba(11, 53, 84, 0.6) 100%),
        linear-gradient(to top, rgba(11, 53, 84, 0.9) 0%, rgba(11, 53, 84, 0.25) 55%);
}

/* Hidden here rather than from script so there is no flash of the finished
   state before the timeline takes over. .reveal-off is the same escape hatch
   the rest of the page uses: if GSAP never loads, or reduced motion is asked
   for, the copy is simply on the picture from the start. */
.js .rnd__stage {
    opacity: 0;
    visibility: hidden;
}

.reveal-off .rnd__stage {
    opacity: 1;
    visibility: visible;
}

.reveal-off .rnd__scrim--deep {
    opacity: 1;
}

.rnd__inner {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
    padding: calc(var(--nav-height, 96px) + 24px) 0 clamp(28px, 4vh, 56px);
}

.rnd__inner .container {
    width: 100%;
}

.rnd__head {
    max-width: 760px;
    margin-bottom: clamp(22px, 3vh, 44px);
}

/* on the photograph the rule and the label both have to hold their own
   against a light background, so the label goes white and only the rule
   keeps the orange */
.eyebrow--light {
    color: #ffffff;
}

.rnd__title {
    font-size: clamp(28px, 1.1rem + 2.5vw, 60px);
    font-weight: 300;
    line-height: 1.08;
    color: #ffffff;
    margin-bottom: 0;
}

.rnd__title em {
    display: block;
    font-style: normal;
    font-weight: 700;
    color: var(--color-heading);
}

/* --- the figures --- */
.rnd__panel {
    max-width: 1100px;
}

.rnd__panelHead {
    font-family: var(--font-cond);
    font-size: clamp(14px, 0.7rem + 0.5vw, 20px);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-heading);
    margin-bottom: clamp(16px, 2.2vh, 30px);
}

.rnd__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

/* the rules divide the figures without boxing each one in: the first goes
   without so no rule hangs off the left edge of the row */
.rnd .rndStat {
    padding: 0 clamp(14px, 1.4vw, 28px);
    border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.rnd .rndStat:first-child {
    padding-left: 0;
    border-left: none;
}

.rnd .rndStat__value {
    display: flex;
    align-items: baseline;
    font-family: var(--font-cond);
    font-size: clamp(30px, 1.2rem + 2.1vw, 54px);
    font-weight: 300;
    line-height: 1.05;
    color: var(--color-heading);
    margin-bottom: clamp(6px, 1vh, 12px);
    /* the digits are held to one width so the row does not jitter sideways
       while the figures count up */
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.rnd .rndStat__unit {
    font-size: 0.68em;
    font-weight: 400;
}

.rnd .rndStat__label {
    font-size: clamp(12.5px, 0.68rem + 0.28vw, 16px);
    line-height: 1.45;
    /* white, not near-white: over a photograph the last tenth of opacity
       is the difference between reading a label and guessing at it */
    color: #ffffff;
    margin-bottom: 0;
}

.rnd .rndStat__label sub,
.rnd .rnd__noteCopy sub {
    font-size: 0.72em;
    line-height: 0;
}

/* --- how the R&D model works --- */
/* Full measure rather than the 780px the paragraph used to run to: what
   sits here now is a four-across row, and holding it to a column width
   would stack the four headings into a list nobody reads across. The
   panel's own cap still applies, so the rule under the figures and the
   row beneath it end on the same edge. */
.rnd__note {
    max-width: none;
    margin-top: clamp(22px, 3.4vh, 46px);
    padding-top: clamp(18px, 2.6vh, 32px);
    border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.rnd__noteHead {
    font-family: var(--font-cond);
    font-size: clamp(14px, 0.7rem + 0.5vw, 20px);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--color-heading);
    margin-bottom: clamp(14px, 2vh, 26px);
}

.rnd__noteCopy {
    font-size: clamp(13.5px, 0.72rem + 0.32vw, 17px);
    line-height: 1.6;
    color: #ffffff;
    margin-bottom: 0;
}

/* The four pillars. The R&D page draws each one as a numbered disc in a
   part-drawn ring; that motif is kept here so the two pages read as the
   same model, but flattened to a single row of headings — the detail
   under each of them is what the page is for. */
.rndModel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.6vw, 30px);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.rndModel__item {
    display: flex;
    align-items: center;
    gap: clamp(10px, 0.9vw, 16px);
    min-height: 62px;
    padding-left: clamp(14px, 1.4vw, 28px);
    border-left: 1px solid rgba(255, 255, 255, 0.28);
}

/* first goes without, so no rule hangs off the left edge — the same way
   the figures above it are divided */
.rndModel__item:first-child {
    padding-left: 0;
    border-left: none;
}

.rndModel__num {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(38px, 2.9vw, 52px);
    aspect-ratio: 1;
    border-radius: 50%;
    font-family: var(--font-cond);
    font-size: clamp(16px, 0.8rem + 0.6vw, 24px);
    font-weight: 400;
    line-height: 1;
    color: var(--color-white);
    background: var(--color-orange);
    /* the digits hold one width so the four discs match */
    font-variant-numeric: lining-nums tabular-nums;
}

/* the part-drawn ring from the R&D page, in white here because it sits
   on the photograph rather than on paper */
.rndModel__num::before {
    content: "";
    position: absolute;
    inset: -6px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-right-color: transparent;
    border-radius: 50%;
}

.rndModel__name {
    padding-right: clamp(4px, 0.6vw, 12px);
    font-size: clamp(13px, 0.7rem + 0.3vw, 17px);
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
}


/*=====================================================================
   Digital Capabilities
   The navy band. Every other section on the page is dark-on-white; this
   one inverts, so Digital reads as its own chapter without introducing
   a colour the report does not already use.

   The statement frames the chapter and holds the left; the five areas
   ride a slider on the right, so the whole of FY 26 sits on one screen
   instead of five blocks stacked down the page.
=====================================================================*/
.dgx {
    position: relative;
    overflow: hidden;
    background: var(--color-intro);
    color: #ffffff;
}

/* A faint engineering grid — the only decoration on the band, drawn in
   CSS rather than shipped as an image. Fades out to the right so it
   never competes with the slider sitting there. */
.dgx__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(105deg, #000 0%, rgba(0, 0, 0, 0.4) 55%, transparent 90%);
    mask-image: linear-gradient(105deg, #000 0%, rgba(0, 0, 0, 0.4) 55%, transparent 90%);
    pointer-events: none;
}

.dgx .container {
    position: relative;
    z-index: 2;
}

.dgx__inner {
    display: grid;
    /* the slider carries five areas and the statement carries one idea,
       so the slider takes the larger share; minmax(0,…) on both keeps a
       long bullet from setting either column's width */
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(30px, 1.6rem + 2.4vw, 72px);
    align-items: center;
}

.dgx__title {
    margin-bottom: clamp(16px, 2vw, 28px);
}

/* one statement, not two: it was set as a lead and a body at two
   different sizes and two different weights of white, which read as two
   separate thoughts. Set as a single run, a shade back from the old
   lead because there is now more of it, and carrying the space down to
   the Read More that the second paragraph used to hold. */
.dgx__lead {
    font-size: clamp(15px, 0.74rem + 0.36vw, 19px);
    line-height: 1.68;
    color: rgba(255, 255, 255, 0.86);
    margin: 0 0 clamp(24px, 3vw, 40px);
}

/*--- The slider ------------------------------------------------------
   One area on screen at a time. The track moves in whole viewport
   widths, so the transform is a percentage and nothing has to be
   measured on resize.

   It walks itself so the band has something to show, and hands over the
   moment the reader touches it — for good, not on a timer, because a
   slider that resumes under someone mid-sentence is worse than one that
   never moved. Without JS every slide is simply stacked and readable,
   so the content never depends on the script. */
.dgxSlider {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/*--- the deck -------------------------------------------------------
   The five areas are stacked rather than run on a track: the open card
   is in front and the rest are behind it, offset down and to the right
   and scaled back, so the section says at a glance how much there is to
   read. Every card is in the same grid cell, so the deck is one card
   tall and does not resize as it is dealt.

   The offsets are driven by --i, the card's distance from the front,
   set from script. One custom property means the depth rules cannot
   fall out of step with each other the way four separate transforms
   would. */
.dgxSlider__stack {
    position: relative;
    display: grid;
    /* one cell: every card sits in it, layered by z-index */
    grid-template-columns: minmax(0, 1fr);
    /* room below for the run of edges the deck leaves under the front
       card; the scale does the insetting on the sides, so no side
       padding is needed */
    padding-bottom: clamp(26px, 2.6vw, 46px);
}

.dgxSlide {
    grid-area: 1 / 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* a plain white sheet on the navy ground — the areas read as pages
       lifted off the band, not as panels cut into it */
    position: relative;
    overflow: hidden;
    padding: clamp(26px, 1.6rem + 1.3vw, 46px) clamp(24px, 1.4rem + 1.2vw, 44px);
    background: #f4f7fa;
    border: 1px solid rgba(11, 53, 84, 0.08);

    /* --i is the depth: 0 is the open card, 1 the one behind it, and so
       on. Each step back drops and insets, so the deck shows as a run of
       edges under the front card rather than one card with a shadow. The
       horizontal inset is what makes those edges read as cards; the
       vertical drop is what stops them hiding behind the front one. */
    --i: 0;
    transform:
        translate(0, calc(var(--i) * clamp(9px, 0.9vw, 15px)))
        scale(calc(1 - var(--i) * 0.035));
    transform-origin: 50% 0;
    opacity: 1;
    transition:
        transform 0.62s cubic-bezier(0.4, 0.02, 0.2, 1),
        opacity 0.5s var(--ease-out),
        visibility 0s linear 0.62s;
    will-change: transform;
}

/* only the front card is readable; the ones behind are backdrop, so
   their copy must not be picked up by a screen reader or the pointer.
   They are also dropped a shade off the front card's white, which is
   what separates one edge from the next in the run below it. */
.dgxSlide:not(.is-front) {
    pointer-events: none;
    background: #dde5ec;
    border-color: rgba(11, 53, 84, 0.12);
}

/* past the third card there is nothing left to show, so the rest are
   dropped rather than piling up as an ever-thicker edge */
.dgxSlide.is-deep {
    opacity: 0;
    visibility: hidden;
}

.dgxSlide.is-front {
    z-index: 5;
    transition:
        transform 0.62s cubic-bezier(0.4, 0.02, 0.2, 1),
        opacity 0.5s var(--ease-out),
        visibility 0s linear 0s;
}

/* the card being dealt away lifts and fades rather than sliding under
   the deck, which would read as it going to the back of the queue when
   it is in fact the one just finished */
.dgxSlide.is-leaving {
    z-index: 6;
    transform: translate(0, -8%) scale(1.02);
    opacity: 0;
}

/* The arriving state. Every card starts under the front one and rises
   into its depth when the class comes off — the transition on .dgxSlide
   above is what animates it, so the deal and every later change move
   the same way. Each card back is held a beat longer, so the deck
   assembles front to back rather than all at once. */
.dgxSlider__stack.is-dealing .dgxSlide {
    transform: translate(0, 26px) scale(0.97);
    opacity: 0;
    transition-delay: calc(var(--i) * 0.07s);
}

/*--- the head ---
   The area's own title is what stands at the top of the card, set in
   the brand navy against the white. The figure is kept for the screen
   reader's count but not drawn — the dots below already say which of
   the five is open. */
.dgxSlide__head {
    position: relative;
    z-index: 1;
    margin-bottom: clamp(18px, 1.1rem + 0.6vw, 28px);
}

.dgxSlide__num {
    display: none;
}

.dgxSlide__title {
    margin: 0;
    font-size: clamp(19px, 0.95rem + 0.7vw, 27px);
    line-height: 1.25;
    font-weight: 700;
    color: var(--color-intro-heading);
}

/* The five cards are all stretched to the tallest, so a shorter one
   would trail empty card. The bullets follow their title directly and
   the slack is left at the foot, which reads as the card being roomy
   rather than as the list having come adrift from its heading. */
.dgxSlide__list {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dgxSlide__list > li {
    position: relative;
    padding-left: 30px;
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--color-body-text);
}

.dgxSlide__list > li + li {
    margin-top: clamp(14px, 0.8rem + 0.7vw, 24px);
}

/* a small orange square — the report's own bullet mark */
.dgxSlide__list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 9px;
    height: 9px;
    background: var(--color-orange);
}

/*--- the controls ---*/
.dgxSlider__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.2vw, 20px);
    margin-top: clamp(14px, 1.3vw, 22px);
}

.dgxSlider__arrow {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: clamp(34px, 2.6vw, 42px);
    height: clamp(34px, 2.6vw, 42px);
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: none;
    color: #ffffff;
    cursor: pointer;
    transition:
        background 0.3s var(--ease-out),
        border-color 0.3s var(--ease-out),
        color 0.3s var(--ease-out);
}

.dgxSlider__arrow svg {
    width: 45%;
    height: 45%;
}

.dgxSlider__arrow:hover,
.dgxSlider__arrow:focus-visible {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: #ffffff;
}

.dgxSlider__dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Each dot is the track for its own progress bar: the open one fills
   over the dwell, so the walk shows how long is left rather than
   arriving unannounced. */
.dgxSlider__dot {
    position: relative;
    width: 26px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
    cursor: pointer;
    overflow: hidden;
    transition: background 0.3s var(--ease-out);
}

.dgxSlider__dot:hover {
    background: rgba(255, 255, 255, 0.42);
}

.dgxSlider__prog {
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left center;
    background: var(--color-orange);
}

/* the bar only runs while the slider is walking itself; once the reader
   takes over, the open dot is simply filled */
.dgxSlider__dot.is-active .dgxSlider__prog {
    transform: scaleX(1);
}

.dgxSlider.is-playing .dgxSlider__dot.is-active .dgxSlider__prog {
    transition: transform 6s linear;
}

.dgxSlider.is-playing .dgxSlider__dot.is-active.is-restarting .dgxSlider__prog {
    transition: none;
    transform: scaleX(0);
}

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

    .dgxSlider.is-playing .dgxSlider__dot.is-active .dgxSlider__prog {
        transition: none;
    }
}


/*=====================================================================
   Leadership Messages
   Two sections, one per message: portrait on the left half, the title
   and the quoted passage on the right, over the photograph the report
   sets behind each of them.
=====================================================================*/
/* Each message is a section of its own now rather than one of two
   panels sharing a cell, so the panel is simply on the page: no
   crossfade, nothing hidden, no stage holding one height for both. */
.leadPanel {
    position: relative;
    border-radius: clamp(12px, 1.1vw, 20px);
    overflow: hidden;
    background: var(--color-intro);
    /* no height of its own: the content sits at the foot of the panel, so
       any height beyond what the content needs is blank ground above the
       heading. A floor keeps a short message from looking like a strip. */
    min-height: 460px;
}

.leadPanel__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.leadPanel__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% center;
}

/* the portrait is cut out and stands at the left, so the ground is darkest
   there and eases off across the copy */
.leadPanel__scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.12) 34%,
        rgba(0, 0, 0, 0.46) 58%,
        rgba(0, 0, 0, 0.62) 100%
    );
}

/* an even split: the portrait holds the left half, the heading and the
   quote stack down the right. The portrait spans both rows so it can stand
   on the floor of the panel while the copy beside it is laid out in two. */
.leadPanel__grid {
    position: relative;
    z-index: 3;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    align-content: end;
    gap: 0 clamp(20px, 2.4vw, 56px);
    padding: clamp(24px, 2.6vw, 52px) clamp(22px, 2.4vw, 48px) 0;
}

/* the cut-out stands on the floor of the panel rather than sitting in a
   box: it is bottom-aligned and runs off the foot with no padding under it */
.leadPanel__figure {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: end;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.leadPanel__figure img {
    width: 100%;
    max-height: clamp(440px, 46vw, 600px);
    object-fit: contain;
    /* anchored bottom-left so the figure keeps the inner edge of its half
       clear of the copy as the column widens */
    object-position: bottom left;
}

/* the heading sits straight on top of the quote: the only thing between
   them is the leading the box's own rule needs to clear */
.leadPanel__body {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    padding-bottom: clamp(8px, 0.7vw, 14px);
}

.leadPanel__title {
    /* held at 30px rather than scaled: at the top end the fluid size was
       running away from the quote it heads */
    font-size: 30px;
    font-weight: 300;
    line-height: 1.2;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0;
}

/* --- the pull quote --- */
.leadPanel__aside {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-bottom: clamp(24px, 2.6vw, 52px);
    margin-top: 20px;
}

/* An outlined box, drawn the way the inside pages draw it: the report
   rules this quote off rather than laying a panel over the photograph.

   The difference here is which side opens. On the inside page the
   portrait stands to the RIGHT of the quote, so the line steps out of
   the right edge; on this page it stands to the LEFT, so the whole
   figure is mirrored and the line reaches back towards it. */
.leadPanel__card {
    position: relative;
    margin: 0 0 clamp(16px, 1.4vw, 26px);
    padding: 30px 30px 30px 34px;
    border: 1px solid #ffffff;
    border-left: 0;
}

/* the open edge is drawn in two segments so the line can break out
   between them, leaving an edge that steps out and back in */
.leadPanel__card::before,
.leadPanel__card::after {
    content: "";
    position: absolute;
    left: 0;
    width: 1px;
    background: #ffffff;
}

.leadPanel__card::before {
    top: 0;
    height: 30%;
}

/* the lower segment stops short by the height of the line and its gap,
   so the two never meet across the break */
.leadPanel__card::after {
    bottom: -1px;
    height: calc(70% - 84px);
}

.leadPanel__notch {
    position: absolute;
    right: 100%;
    top: calc(30% - 1px);
    width: 32px;
    margin-right: -1px;
    /* the artwork is drawn stepping out to the right; flipping it is what
       turns the one file into the left-hand version */
    transform: scaleX(-1);
}

.leadPanel__notch img {
    display: block;
    width: 100%;
    height: 100%;
}

/* the two short rules above the quote: one element with a rule of its
   own and a hard shadow standing in for the second, as the inside
   pages set it */
.leadPanel__cardRule {
    display: block;
    width: 34px;
    height: 2px;
    margin-bottom: 24px;
    background: #ffffff;
    box-shadow: 0 7px 0 #ffffff;
}

.leadPanel__by {
    margin-bottom: 0;
    line-height: 1.35;
}

.leadPanel__by b {
    display: block;
    font-family: var(--font-cond);
    font-size: clamp(15px, 0.72rem + 0.5vw, 21px);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
}

.leadPanel__by em {
    display: block;
    font-style: normal;
    font-size: clamp(12.5px, 0.66rem + 0.28vw, 16px);
    color: rgba(255, 255, 255, 0.85);
}

.leadPanel__quote {
    font-family: var(--font-body);
    font-size: clamp(13px, 0.66rem + 0.38vw, 18px);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0;
}


/*=====================================================================
   Performance Highlights
   The report sets this spread as two grounds side by side: the
   financial figures on dark, the operational ones on orange. Here they
   are two boards on one stage, and the open tab is drawn as the front
   edge of its board so the strip and the panel read as one sheet.
=====================================================================*/
.perf {
        background: #f3f6f8;
}

.perf__head {
    margin-bottom: clamp(22px, 2.4vw, 44px);
}

.perf__title {
    font-size: clamp(28px, 1.1rem + 2.5vw, 60px);
    font-weight: 300;
    line-height: 1.08;
    color: var(--color-intro);
    margin-bottom: 0;
}

.perf__title em {
    display: block;
    font-style: normal;
    font-weight: 700;
    color: var(--color-heading);
}

/* --- the tabs ---
   The open tab is not styled as a tab. One block slides between them,
   painted in the board's colour, and it is the block that reads as the
   tab — which is why the colour can change as it travels and why the
   strip and the board below are visibly one sheet. */
.perf__tabs {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    /* the tabs sit together at the left rather than spread across the
       strip: spread, the block had to travel the whole width and the two
       labels read as two separate controls instead of one set */
    justify-content: flex-start;
    gap: clamp(28px, 3.4vw, 66px);
    /* pulls the strip onto the board so no seam shows at the join */
    margin-bottom: -2px;
}

.perf__ind {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    height: 100%;
    background: var(--perf-bg, #3e3e3e);
    transition:
        transform 0.55s cubic-bezier(0.77, 0, 0.18, 1),
        width 0.55s cubic-bezier(0.77, 0, 0.18, 1),
        background 0.3s var(--ease-out);
}

/* the wings hang outside the block and are what curve it into a tab.
   They sit at 98% rather than 100% so no hairline of the page shows
   through the join at fractional widths. */
.perf__indWing {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: auto;
}

.perf__indWing path {
    fill: var(--perf-bg, #3e3e3e);
    transition: fill 0.3s var(--ease-out);
}

.perf__indWing--l {
    right: 98%;
}

.perf__indWing--r {
    left: 98%;
}

/* at either end of the strip the outer wing has nothing to curve into,
   so it is dropped and the block turns its own corner instead */
.perf__ind.is-first {
    border-top-left-radius: clamp(10px, 0.9vw, 16px);
}

.perf__ind.is-first .perf__indWing--l {
    display: none;
}

.perf__ind.is-last {
    border-top-right-radius: clamp(10px, 0.9vw, 16px);
}

.perf__ind.is-last .perf__indWing--r {
    display: none;
}

.perfTab {
    position: relative;
    z-index: 1;
    /* barely any padding of its own: the gap between the labels is what
       separates them, and the block is sized to the label */
    padding: clamp(13px, 1.05vw, 18px) 4px;
    border: 0;
    background: none;
    font-family: var(--font-cond);
    font-size: clamp(12px, 0.62rem + 0.38vw, 17px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.25;
    white-space: nowrap;
    color: var(--color-intro);
    cursor: pointer;
    transition: color 0.25s var(--ease-out);
}

/* the ends of the strip get a little inset so the block's squared-off
   corner does not sit hard against the first and last letters */
.perfTab:first-of-type {
    padding-left: 14px;
}

.perfTab:last-of-type {
    padding-right: 14px;
}

.perfTab:not(.is-active):hover,
.perfTab:not(.is-active):focus-visible {
    color: var(--color-heading);
}

.perfTab.is-active {
    color: #ffffff;
}

/* --- the boards --- */
/* the phone's board picker; hidden here so the strip stays the default
   and this is the exception, which is how the two are used */
.perf__pick {
    display: none;
}

.perf__select {
    width: 100%;
    padding: 13px 42px 13px 16px;
    border: 1px solid rgba(11, 53, 84, 0.28);
    border-radius: 10px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b3554' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px 18px;
    font-family: var(--font-cond);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-intro);
    -webkit-appearance: none;
    appearance: none;
}

.perf__select:focus-visible {
    outline: 2px solid var(--color-heading);
    outline-offset: 2px;
}

.perf__stage {
    position: relative;
    z-index: 1;
    display: grid;
    border-radius: clamp(12px, 1.1vw, 20px);
    /* squared off while the block is at the left end: the block turns
       that corner itself there, and a second radius under it reads as a
       step in the edge. Set from script, cleared when the block moves. */
    border-top-left-radius: var(--perf-tl, clamp(12px, 1.1vw, 20px));
    background: var(--perf-bg, #3e3e3e);
    transition: background 0.3s var(--ease-out);
}

.perfPanel {
    grid-area: 1 / 1;
    padding: clamp(26px, 2.6vw, 56px) clamp(20px, 2.2vw, 46px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition:
        opacity 0.45s var(--ease-out),
        transform 0.45s var(--ease-out),
        visibility 0s linear 0.45s;
}

.perfPanel.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
        opacity 0.45s var(--ease-out),
        transform 0.45s var(--ease-out),
        visibility 0s linear 0s;
}

/* the panels share one grid cell so the stage holds one height as the
   boards change; display:none would collapse it mid-change */
.perfPanel[hidden] {
    display: block;
}

/* --- the figures --- */
/* --gap is named because the dividers have to be drawn in the middle of
   it: each cell takes half the gap as padding and carries the rule on its
   own edge, which is the only way a grid gap can hold a line */
.perfGrid {
    --perf-gap: clamp(20px, 2.2vw, 44px);
    --perf-rule: rgba(255, 255, 255, 0.24);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

.perfStat {
    padding: calc(var(--perf-gap) / 2) calc(var(--perf-gap) / 2);
    border-left: 1px solid var(--perf-rule);
    border-top: 1px solid var(--perf-rule);
}

/* No rule may hang off an outside edge: the first of every row goes
   without its left one, the first row without its top one. The counts
   are written out rather than driven from a variable — a custom
   property cannot be read inside a selector, so each tier that changes
   the column count restates these two. */
.perfStat:nth-child(3n + 1) {
    padding-left: 0;
    border-left: none;
}

.perfStat:nth-child(-n + 3) {
    padding-top: 0;
    border-top: none;
}

.perfStat__value {
    font-family: var(--font-cond);
    font-size: clamp(26px, 1rem + 1.9vw, 46px);
    font-weight: 300;
    line-height: 1.05;
    margin-bottom: clamp(6px, 0.6vw, 12px);
    /* the figures are held to one width so a column of them lines up on
       the decimal rather than drifting */
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

/* on the dark board the figures carry the orange; on the orange board
   there is nothing for orange to sit on, so they go white */
.perfStat__value {
    color: var(--color-heading);
}

.perfPanel--ops .perfStat__value {
    color: #ffffff;
}

/* the rupee mark and the unit ride with the figure but at the size of
   the label, the way the report sets them */
.perfStat__value i,
.perfStat__value em {
    font-style: normal;
    font-weight: 400;
    font-size: 0.46em;
}

.perfStat__value em.is-inline {
    font-family: var(--font-cond);
    font-size: 0.62em;
}

.perfStat__label {
    font-size: clamp(13px, 0.7rem + 0.3vw, 17px);
    line-height: 1.4;
    color: #ffffff;
    margin-bottom: 0;
}
.perfstatblck{
    color: var(--color-body-text);
}

/* the date qualifiers run under their label rather than lengthening it */
.perfStat__label span {
    display: block;
}

/* --- the splits ---
   The drawings are the inside page's, legend included, so the two pages
   cannot end up showing one split two different ways. Only the frame
   around them is set here. */
.perfPanel .salesShareGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 60px);
    margin-top: 0;
    padding-top: clamp(26px, 2.8vw, 52px);
    border-top: 1px solid rgba(255, 255, 255, 0.32);
}

.perfPanel .salesShare h3 {
    margin-bottom: clamp(14px, 1.4vw, 24px);
    font-family: var(--font-cond);
    font-size: clamp(12px, 0.62rem + 0.3vw, 16px);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.4;
    text-transform: uppercase;
    color: #ffffff;
}
.perfPanel .salesShare.slaesh3grtitlesmal h3{
    text-transform: none;
}

.perfPanel .salesShareChart {
    display: block;
    /* stated, not a cap: the drawing carries its own legend, so leaving
       it to fill the column made the two splits different sizes */
    width: 210px;
    max-width: 100%;
    height: auto;
}


/*=====================================================================
   Key Performance Indicators
   A coverflow of charts: the centre one sharp, its neighbours scaled
   back and blurred, the rest off stage. The metric names below are
   both the controls and the progress of the walk.
=====================================================================*/
.kpi__head {
    text-align: center;
    margin-bottom: clamp(8px, 3vw, 8px);
}

.kpi__head .eyebrow::before {
    display: none;
}

.kpi__title {
    font-size: clamp(28px, 1.1rem + 2.5vw, 60px);
    font-weight: 300;
    line-height: 1.08;
    color: var(--color-intro);
    margin-bottom: 0;
}

.kpi__title em {
    display: block;
    font-style: normal;
    font-weight: 700;
    color: var(--color-heading);
}

/* --- the stage --- */
.kpi__stage {
    position: relative;
    /* the graph sets the card's height, so this only has to be tall
       enough to hold the tallest of them without clipping */
    height: clamp(330px, 29vw, 390px);
    max-width: 1100px;
    margin: 0 auto;
}

.kpi__track {
    position: absolute;
    inset: 0;
}

/* every card is laid on the same spot and moved from script; the deck
   only reads as a deck because of what is done to the ones either side */
.kpiCard {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(300px, 34vw, 430px);
    transform: translate(-50%, -50%);
    /* tighter under the graph than over it: the drawing carries its own
       margin below the year labels, so an even inset reads as too much */
    padding: clamp(16px, 1.3vw, 22px) clamp(16px, 1.3vw, 22px) clamp(10px, 0.8vw, 14px);
    border-radius: clamp(12px, 1.1vw, 18px);
    border: 1px solid rgba(11, 53, 84, 0.12);
    background: #ffffff;
    box-shadow: 0 24px 54px rgba(11, 53, 84, 0.16);
    cursor: pointer;
    transition:
        transform 0.6s var(--ease-out),
        opacity 0.6s var(--ease-out),
        filter 0.6s var(--ease-out);
    will-change: transform, opacity, filter;
}

/* --- the graph ---
   The drawing is the SVG the inside pages use, so the two never drift
   apart. It wipes up from its baseline as its card reaches the centre,
   which is the same reveal the inside pages give it. */
.kpiCard .kpiChartHead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 5px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--color-heading);
}

/* the inside pages set this head with an h2; in a deck sitting under the
   section heading it is an h3, so the same treatment is named for both */
.kpiCard .kpiChartHead h3 {
    margin: 0;
    font-size: clamp(14px, 0.7rem + 0.4vw, 18px);
    line-height: 1.35;
    font-weight: 700;
    color: var(--color-heading);
}

.kpiCard .kpiChartHead h3 sup {
    font-size: 11px;
}

.kpiCard .kpiChartHead span {
    flex: 0 0 auto;
    font-size: clamp(11px, 0.58rem + 0.2vw, 14px);
    line-height: 1.5;
    color: #202020;
}

/* The drawings are all 334 wide but run from 164 to 205 tall, the
   legend ones being the tallest. Every one is given the box of the
   tallest and drawn from its top, so the twelve cards are one height
   and the value labels start the same distance under every head. */
.kpiCard .kpiGraphImage {
    width: 100%;
    height: auto;
    aspect-ratio: 334 / 205;
    object-fit: contain;
    object-position: top center;
}

@keyframes kpiChartWipe {
    from {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: none;
    }
}

/* the chart draws itself each time its card reaches the centre; the
   cards either side keep theirs already drawn, so the blur has
   something to blur */
.kpiCard.is-active .kpiGraphImage {
    animation: kpiChartWipe 1s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

/* the wipe is set up in CSS and released from script; if the script
   never runs, the drawings would be left permanently wiped away */
.reveal-off .kpiCard .kpiGraphImage {
    opacity: 1;
    clip-path: none;
    transform: none;
}

/* --- the metric names --- */
.kpi__tabs {
    display: flex;
    gap: clamp(16px, 2.4vw, 40px);
    margin-top: clamp(24px, 3vw, 44px);
    padding-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.kpi__tabs::-webkit-scrollbar {
    display: none;
}

.kpiTab {
    position: relative;
    flex: 0 0 auto;
    padding: 8px 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: color 0.25s var(--ease-out);
}

.kpiTab__name {
    font-family: var(--font-cond);
    font-size: clamp(11px, 0.58rem + 0.25vw, 14px);
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    color: rgba(11, 53, 84, 0.55);
    transition: color 0.25s var(--ease-out);
}

.kpiTab:hover .kpiTab__name,
.kpiTab.is-active .kpiTab__name {
    color: var(--color-intro);
}

/* the underline is the timer: it fills over exactly the dwell the walk
   uses, so the strip shows how long the chart has left */
.kpiTab__prog {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--color-heading);
}

.kpiTab.is-active .kpiTab__prog {
    width: 100%;
    transition: width 4s linear;
}

/*=========== Inner Banner ===========*/
/* full-screen banner: 100vh minus the fixed header strip, so it fills the viewport */
.innerBanner {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 96px);
    margin-bottom: 40px;
    padding: 20px 0 0;
    overflow: hidden;
    background-image: url(../images/chairman-message/chairman-bg-img.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* black patch so the white type stays legible over any photograph */
.innerBanner .bannerPatch {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.2) 100%);
    pointer-events: none;
}


/* both containers must be positioned, otherwise the absolutely-positioned
   .bannerPatch paints on top of them and veils the text */
.innerBanner .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* crumb sits at the top of the banner, right under the header */
.innerBanner .bannerCrumbRow {
    flex: 0 0 auto;
}

/* title block is vertically centred in the remaining space */
.innerBanner .bannerBodyRow {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

/* this row is a flex child, so it would shrink-wrap to its text and break the
   heading early — force it to the full container width */
.innerBanner .bannerBodyRow > .row {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    align-items: center;
}

.innerBanner .bannerBodyRow > .row > [class*="col-"] {
    flex-shrink: 0;
}

.innerBanner .bannerContent {
    text-align: left;
}

.innerBanner .bannerEyebrow {
    display: block;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-white);
    opacity: 1;
    margin-bottom: 14px;
}

.innerBanner .bannerContent h1 {
    font-size: 36px;
    line-height: 48px;
    font-weight: 700;
    color: var(--color-white);
}

/*--- Breadcrumb ---*/
.breadCrumb ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

.breadCrumb ul li,
.breadCrumb ul li a,
.breadCrumb ul li span {
    font-size: 14px;
    line-height: 24px;
    color: var(--color-white);
}

.breadCrumb ul li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadCrumb ul li + li::before {
    content: "/";
    color: rgba(255, 255, 255, 0.55);
}

.breadCrumb ul li a {
    opacity: 0.8;
    transition: opacity 0.35s var(--ease-out);
}

.breadCrumb ul li a:hover {
    opacity: 1;
}

.breadCrumb ul li:last-child span {
    opacity: 1;
    font-weight: 700;
}

/*=========== Download Centre ===========*/
.innerBanner.downloadCentreBanner {
    min-height: auto;
    padding: 20px 0 0px;
    overflow: visible;
    background: var(--color-white);
}

.innerBanner.downloadCentreBanner .bannerBodyRow {
    flex: 0 0 auto;
    display: block;
    padding-top: 20px;
}

.innerBanner.downloadCentreBanner .bannerContent h1 {
    font-size: 36px;
    line-height: 48px;
    text-transform: uppercase;
    color: var(--color-orange);
}

.downloadCentreBanner .breadCrumb ul li,
.downloadCentreBanner .breadCrumb ul li a {
    color: var(--color-body-text);
    opacity: 1;
}

.downloadCentreBanner .breadCrumb ul li span,
.downloadCentreBanner .breadCrumb ul li a:hover {
    color: var(--color-orange);
}

.downloadCentreBanner .breadCrumb ul li + li::before {
    color: #8b8b8b;
}

.downloadCentreSec {
    padding: 0px 0 50px;
}

.downloadCentreForm {
    margin: 0;
}

.downloadGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 100px;
}

.downloadGridTop {
    margin-bottom: 18px;
}

.downloadGroup {
    min-width: 0;
}

.downloadGroup h2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--color-orange);
}

.downloadGroup h2 .fa {
    font-size: 20px;
    line-height: 1;
    font-weight: 400;
}

.downloadGroup ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.downloadGroup li {
    margin-bottom: 15px;
}

.downloadOption {
    display: inline-flex;
    align-items: flex-start;
    gap: 16px;
    width: auto;
    max-width: 100%;
    margin: 0;
    color: var(--color-body-text);
    cursor: default;
    pointer-events: none;
}

.downloadOption input {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    display: grid;
    place-content: center;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    border: 1px solid #a9b6c1;
    border-radius: 2px;
    background: #ffffff;
    cursor: pointer;
    pointer-events: auto;
    transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}

.downloadOption input::before {
    content: "";
    width: 7px;
    height: 12px;
    margin-top: -2px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s var(--ease-out);
}

.downloadOption input:checked {
    border-color: #0d6efd;
    background: #0d6efd;
}

.downloadOption input:checked::before {
    transform: rotate(45deg) scale(1);
}

.downloadOption input:focus-visible {
    outline: 2px solid rgba(244, 125, 32, 0.3);
    outline-offset: 3px;
}

.downloadOption span {
    font-size: 16px;
    line-height: 24px;
    color: currentColor;
    cursor: pointer;
    pointer-events: auto;
    transition: color 0.25s var(--ease-out);
}

.downloadOption span:hover,
.downloadOption:focus-within span,
.downloadOption input:checked + span {
    color: var(--color-orange);
}

.downloadGroupWide {
    margin-top: 8px;
}

.downloadAnnual {
    margin-top: 28px;
    margin-left: 0;
}

.downloadAnnual span {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
}

.downloadActions {
    margin-top: 28px;
    margin-left: 0;
}

.downloadSelectedBtn {
    display: inline-flex;
    align-items: center;
    padding: 15px 32px;
    border: 0;
    border-radius: 34px;
    background: var(--color-orange);
    color: var(--color-white);
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.downloadSelectedBtn:hover,
.downloadSelectedBtn:focus-visible {
    background: #d96511;
    color: var(--color-white);
    transform: translateY(-2px);
}

/*=========== BRSR ===========*/
.brsrSec {
    padding: 0 0 70px;
    background: var(--color-white);
}

.brsrTitle {
    margin: 0 0 36px;
    font-size: 36px;
    line-height: 42px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-orange);
}

.brsrSectionBand {
    display: flex;
    align-items: center;
    min-height: 72px;
    margin-bottom: 28px;
}

.brsrSectionBand,
.brsrSectionBand * {
    box-sizing: border-box;
}

.brsrSectionLabel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 164px;
    height: 40px;
    padding: 0 36px 0 24px;
    background: #7a7f84;
    color: #ffffff;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    white-space: nowrap;
    z-index: 3;
}

.brsrSectionLabel::after {
    content: "";
    position: absolute;
    top: 0;
    right: -21px;
    width: 21px;
    height: 40px;
    background: #7a7f84;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.brsrSectionLetter {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 52px;
    margin-left: -13px;
    background: #ffffff;
    color: var(--color-orange);
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    border: 1px solid var(--color-orange);
}

.brsrSectionLetter::before,
.brsrSectionLetter::after {
    content: "";
    position: absolute;
    top: 0;
    width: 28px;
    height: 72px;
    background: #ffffff;
    border-top: 1px solid var(--color-orange);
    border-bottom: 1px solid var(--color-orange);
}

.brsrSectionLetter::before {
    left: -27px;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.brsrSectionLetter::after {
    right: -27px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.brsrSectionName {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    margin-left: -13px;
    padding: 0 18px 0 31px;
    background: var(--color-orange);
    color: #ffffff;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    white-space: nowrap;
    z-index: 2;
}

.brsrSectionName::after {
    content: "";
    position: absolute;
    top: 0;
    left: -21px;
    right: auto;
    width: 21px;
    height: 40px;
    background: var(--color-orange);
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.brsrDetailBlock {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.brsrDetailIcon {
    flex: 0 0 42px;
    padding-top: 1px;
}

.brsrDetailIcon img {
    display: block;
    width: 42px;
    height: auto;
    filter: grayscale(1);
}

.brsrDetailContent {
    flex: 1 1 auto;
    min-width: 0;
}

.brsrDetailContent h2 {
    display: flex;
    align-items: baseline;
    gap: 24px;
    margin: 34px 0 14px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--color-orange);
}

.brsrDetailContent h2 span {
    flex: 0 0 auto;
}

.brsrTableWrap {
    width: calc(100% + 66px);
    margin-left: -66px;
    overflow-x: auto;
}

.brsrTable {
    width: 100%;
    min-width: 790px;
    border-collapse: collapse;
    table-layout: fixed;
    border-bottom: 2px solid var(--color-orange);
}

.brsrTable th,
.brsrTable td {
    padding: 8px 8px;
    border: 0;
    border-bottom: 1px solid #9fa7ad;
    color: #000000;
    font-size: 16px;
    line-height: 20px;
    vertical-align: top;
}

.brsrTable thead th {
    padding-top: 0;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--color-orange);
    font-weight: 700;
    text-align: left;
}

.brsrTable tbody tr:last-child td {
    border-bottom: 0;
}

.brsrTable th:nth-child(1),
.brsrTable td:nth-child(1) {
    width: 70px;
}

.brsrTable th:nth-child(2),
.brsrTable td:nth-child(2) {
    width: 322px;
}

.brsrTable a {
    color: #000000;
    font-size: 16px;
    line-height: 20px;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

.brsrDownloadWrap {
    margin-top: 28px;
    margin-left: -66px;
}

.brsrDownloadBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border: 1px solid #333333;
    background: #ffffff;
    color: #222222;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.brsrDownloadBtn:hover,
.brsrDownloadBtn:focus-visible {
    border-color: var(--color-orange);
    color: var(--color-orange);
}

.chairmanIntro .introTxt h2 {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-intro-heading);
    margin-bottom: 14px;
}

.chairmanIntro .introTxt p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-body-text);
    padding-bottom: 15px;
}


.chairmanIntro .introAuthor h3 {
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-intro-heading);;
}

.chairmanIntro .introAuthor span {
    display: block;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-orange);
    padding-bottom: 20px
}

.chairmanIntro .introImg {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.chairmanIntro .introImg img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 0;
    vertical-align: bottom;
}

/*=========== Chairman Message Content ===========*/
/* sits directly above the prev/next block, so no bottom gap here */
.chairmanContent {
    padding: 0;
    margin-bottom: 0;
}

.contentBlock h2 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: var(--color-orange);
    margin: 28px 0 12px;
}

.contentBlock h2:first-child {
    margin-top: 0;
}

.contentBlock p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-body-text);
    margin-bottom: 16px;
}

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

.contentBlock sub {
    font-size: 11px;
}

/*--- Pull quote ---*/
.contentBlock .pullQuote {
    margin: 25px 0;
    padding: 0px 0 0px 15px;
    border-left: 4px solid #767e84;
}

.contentBlock .pullQuote p {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    color: var(--color-orange);
    margin-bottom: 0;
}

/*--- Signature ---*/
.signBlock {
    margin-top: 34px;
}

.signBlock .regards {
    margin-bottom: 10px;
}

.signBlock .signImg img {
    display: block;
    max-width: 190px;
    height: auto;
}

.signBlock h3 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: var(--color-body-text);
    margin-top: 10px;
}

.signBlock span {
    display: block;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-body-text);
}

.contentImg {
    margin-top: 40px;
}

.contentImg img {
    display: block;
    width: 100%;
    height: auto;
}


/* page-specific banner artwork */
.qaBanner {
    background-image: url(../images/q-and-a/vice-chairman-bg.webp);
}

/*=========== Banner quote box (Q&A) ===========*/
.bannerQuote {
    position: relative;
    margin-top: 34px;
    padding: 30px 34px 30px 30px;
    border: 1px solid var(--color-white);
    border-right: 0;
    max-width: 550px;
}

/* right edge is drawn in two segments so the notch can break out of it */
.bannerQuote::before,
.bannerQuote::after {
    content: "";
    position: absolute;
    right: 0;
    width: 1px;
    background: var(--color-white);
}

/* the two segments stop exactly where the notch stubs begin, so the right
   edge reads as one unbroken line that steps out and back in */
.bannerQuote::before {
    top: 0px;
    height: 30%;
}

.bannerQuote::after {
    bottom: -1px;
    height: calc(70% - 84px);
}

/* the arrow-head notch that juts out of the right edge */
.bannerQuote .quoteNotch {
    position: absolute;
    left: 100%;
    top: calc(30% - 1px);
    width: 32px;
    margin-left: -1px;
    color: var(--color-white);
}

.bannerQuote .quoteNotch img {
    display: block;
    width: 100%;
    height: 100%;
}

/* the two short rules inside the top-left of the box */
.bannerQuote .quoteDash {
    display: block;
    width: 34px;
    height: 2px;
    margin-bottom: 24px;
    background: var(--color-white);
    box-shadow: 0 7px 0 var(--color-white);
}

.bannerQuote p {
    font-size: 16px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-white);
}

.bannerAuthor {
    margin-top: 22px;
    text-align: left;
}

.bannerAuthor h3 {
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-white);
}

.bannerAuthor span {
    display: block;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-white);
}

/*=========== Q&A ===========*/
.qaSec {
    padding: 0 0 30px;
}

.qaItem {
    padding-bottom: 34px;
}

.qaItem:last-child {
    padding-bottom: 0;
}

/* icon and question sit side by side, answer copy runs full width below */
.qaQuestion {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
}

.qaIcon {
    flex: 0 0 auto;
    width: 25px;
}

.qaIcon img {
    display: block;
    width: 100%;
    height: auto;
}

.qaQuestion h2 {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    color: var(--color-qa-heading);
}

/* answers stack one below the other — never split into columns */
.qaAnswer p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-body-text);
    margin-bottom: 16px;
}

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

.qaAnswer sub {
    font-size: 11px;
}

/*=========== Sustainable Development ===========*/
.sdBanner {
    background-image: url(../images/sustainable-development/sd-banner-img.webp);
}

.sdIntro {
    padding: 0 0 30px;
}

.sdIntro p {
    font-size: 18px;
    line-height: 30px;
    color: var(--color-intro-heading);
}

/* shared section rhythm + headings */
.frameworkSec,
.metricsSec,
.sdSec {
    padding: 0 0 30px;
}

.secHead {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-orange);
    margin-bottom: 22px;
}

.subHead {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    color: var(--color-intro-heading);
    margin: 26px 0 18px;
}

/*--- Sustainability framework pillars ---*/
.pillarItem {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(11, 53, 84, 0.1);
}

.pillarItem:last-child {
    border-bottom: 0;
}

.pillarHead {
    flex: 0 0 300px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.pillarIcon {
    flex: 0 0 auto;
    width: 66px;
}

.pillarHead h3 {
    position: relative;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--color-intro-heading);
    padding-bottom: 12px;
}

/* colour bar under each pillar title, per the report palette */
.pillarHead h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 90px;
    height: 3px;
}

.pillarEnv .pillarHead h3::after { background: var(--color-green); }
.pillarSocial .pillarHead h3::after { background: var(--color-orange); }
.pillarGov .pillarHead h3::after { background: var(--color-blue); }

/* two bullets per row */
.pillarList {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pillarList li {
    position: relative;
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 24px 10px 22px;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-body-text);
}

.pillarList li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
}

.pillarEnv .pillarList li::before { background: var(--color-green); }
.pillarSocial .pillarList li::before { background: var(--color-orange); }
.pillarGov .pillarList li::before { background: var(--color-blue); }

/*--- ESG performance metrics ---*/
.metricsBox {
    background: var(--color-cream);
    padding: 34px 30px 10px;
}

.metricItem {
    margin-bottom: 30px;
}

.metricItem h3 {
    font-size: 30px;
    line-height: 40px;
    font-weight: 400;
    color: var(--color-orange);
}

.metricUnit {
    display: block;
    font-size: 30px;
    line-height: 38px;
    color: var(--color-orange);
}

.metricItem p {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-intro-heading);
    margin-top: 6px;
}

/*--- Icon + heading block ---*/
.sdBlockHead {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 26px;
}

.blockIcon {
    flex: 0 0 auto;
    width: 66px;
}

.blockTxt h2 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-orange);
    margin-bottom: 12px;
}

.blockTxt p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-body-text);
}

/*--- Copy blocks with the orange rule above, as in the report ---*/
.ruleItem {
    position: relative;
    margin-bottom: 30px;
    padding-top: 18px;
}

.ruleItem::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 3px;
    background: var(--color-orange);
}

.ruleItem p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-body-text);
    margin-bottom: 12px;
}

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

/*--- Award callout ---*/
.awardBox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 34px 26px 30px;
    border: 1px solid var(--color-orange);
    text-align: center;
}

/* grey tab centred on the top border */
.awardBox .awardDash {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    display: block;
    width: 140px;
    max-width: 60%;
    height: 22px;
    background: #dfe3e6;
}

.awardBox p {
    font-size: 16px;
    line-height: 26px;
    text-align: center;
    color: var(--color-body-text);
}

/*--- Three-up cards ---*/
.sdCard {
    margin-bottom: 30px;
}

.sdCard h3 {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    color: var(--color-intro-heading);
    margin-bottom: 14px;
}

.sdCard > p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-body-text);
    margin-bottom: 14px;
}

.sdList {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sdList li {
    position: relative;
    padding: 0 0 12px 22px;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-body-text);
}

.sdList li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background: var(--color-orange);
}

/*--- Read more link ---*/
.readMore {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    line-height: 24px;
    font-style: italic;
    color: var(--color-body-text);
    transition: color 0.35s var(--ease-out);
}

.readMore img {
    flex: 0 0 auto;
    width: 32px;
    height: auto;
    transition: transform 0.35s var(--ease-out);
}

.readMore:hover {
    color: var(--color-orange);
}

.readMore:hover img {
    transform: translateX(4px);
}


/*--- Section colour themes, matching the report palette ---*/
.sdGreen .blockTxt h2 { color: var(--color-green); }
.sdGreen .ruleItem::before { background: var(--color-green); }
.sdGreen .sdList li::before { background: var(--color-green); }

.sdOrange .blockTxt h2 { color: var(--color-orange); }
.sdOrange .ruleItem::before { background: var(--color-orange); }
.sdOrange .sdList li::before { background: var(--color-orange); }

.sdBlue .blockTxt h2 { color: var(--color-blue); }
.sdBlue .ruleItem::before { background: var(--color-blue); }
.sdBlue .sdList li::before { background: var(--color-blue); }

/*--- Section imagery ---*/
.sdImg {
    margin: 10px 0 30px;
}

.sdImg img {
    display: block;
    width: 100%;
    height: auto;
}

/*=========== Board of Directors ===========*/
.bodBanner {
    background-image: url(../images/board-of-directors-banner.jpg);
}

.bodSec {
    padding: 0 0 30px;
}

/* cards stretch to the tallest in the row so the committee strip lines up */
.bodSec .row > [class*="col-"] {
    display: flex;
}

.bodCard {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 34px;
}

/* portrait sits on top, the copy runs underneath it */
.bodTop {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    flex: 1 1 auto;
    padding-bottom: 22px;
    background: var(--color-white);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
}

/* orange bar down the left of the portrait, as in the report */
.bodImg {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
}


.bodImg img {
    display: block;
    width: 100%;
}

.bodInfo {
    padding: 0 18px;
}

.bodInfo h3 {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--color-orange);
    margin-bottom: 4px;
}

.bodDesig {
    display: block;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-body-text);
    margin-bottom: 10px;
}

.bodInfo p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-body-text);
}

/*--- Committee memberships ---*/
/* orange bracket: line up the right of the badges, then along the bottom */
/* sits inside the shadowed box, aligned with the copy above it */
.bodCommittee {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-self: flex-start;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 0 18px;
    padding: 0px 10px 10px 0;
    /* border-right: 1px solid var(--color-orange);
    border-bottom: 1px solid var(--color-orange); */
}

.cmLabel {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 22px;
    color: var(--color-body-text);
}

.cmList {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 190px;
}

.cmBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--color-orange);
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    color: var(--color-orange);
    background: transparent;
}

/* filled badge = chairperson */
.cmBadge.chair {
    background: var(--color-orange);
    color: var(--color-white);
}

/*--- Board composition stats ---*/
.bodStats {
    display: flex;
    flex-wrap: wrap;
    gap: 70px;
    padding: 10px 0 30px;
}

.bodStat h3 {
    font-size: 30px;
    line-height: 40px;
    font-weight: 400;
    color: var(--color-orange);
}

.bodStat p {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-body-text);
}

/*--- Committee legend ---*/
.legendBox {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 30px 30px 20px;
    border: 1px solid rgba(0, 0, 0, 0.18);
}

.legendCol {
    flex: 1 1 260px;
}

.legendHead {
    display: block;
    font-size: 18px;
    line-height: 24px;
    color: var(--color-orange);
    margin-bottom: 14px;
}

.legendList {
    list-style: none;
    margin: 0;
    padding: 0;
}

.legendList li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 10px;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-body-text);
}

.legendList li .cmBadge {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    font-size: 11px;
}

.legendKey {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    padding-bottom: 10px;
}

.keyItem {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-body-text);
}

.keyDot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--color-orange);
}

.keyDot.chair {
    background: var(--color-orange);
}

/*=========== Download Centre ===========*/
/* banner with no artwork — height follows its content */
.innerBanner.plainBanner {
    min-height: auto;
    margin-bottom: 40px;
    background: none;
    overflow: visible;
}

.plainBanner .bannerBodyRow {
    flex: 0 0 auto;
    display: block;
}

.plainBanner .breadCrumb {
    margin-bottom: 30px;
}

.plainBanner .breadCrumb ul li,
.plainBanner .breadCrumb ul li a {
    color: var(--color-body-text);
}

.plainBanner .breadCrumb ul li + li::before {
    color: rgba(0, 0, 0, 0.4);
}

.plainBanner .breadCrumb ul li:last-child span {
    color: var(--color-orange);
    font-weight: 400;
}

.plainBanner .bannerEyebrow {
    color: var(--color-orange);
    opacity: 1;
    margin-bottom: 8px;
}

.plainBanner .bannerContent h1 {
    font-size: 36px;
    line-height: 46px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-body-text);
}

/* banner title in brand orange */
.plainBanner.titleOrange .bannerContent h1 {
    color: var(--color-orange);
}


.downloadSec {
    padding: 0 0 30px;
}

.dlHead {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--color-orange);
    margin-bottom: 20px;
}

.dlHead img {
    width: 14px;
    height: auto;
    cursor: pointer;
}

.dlGroup {
    margin-bottom: 26px;
}

.dlItem {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.dlItem input[type="checkbox"] {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    cursor: pointer;
    transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}

.dlItem input[type="checkbox"]:hover {
    border-color: var(--color-orange);
}

.dlItem input[type="checkbox"]:checked {
    border-color: var(--color-orange);
    background: var(--color-orange);
}

/* tick mark */
.dlItem input[type="checkbox"]:checked::after {
    content: "";
    display: block;
    width: 5px;
    height: 10px;
    margin: 2px auto 0;
    border: solid var(--color-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.dlItem label {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-body-text);
    cursor: pointer;
}

.dlFull label {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-orange);
}

.dlBtn {
    display: inline-block;
    margin-top: 14px;
    padding: 16px 34px;
    border: 0;
    border-radius: 40px;
    background: var(--color-orange);
    color: var(--color-white);
    font-size: 16px;
    line-height: 22px;
    cursor: pointer;
    transition: background 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.dlBtn:hover {
    background: var(--color-intro-heading);
    transform: translateY(-2px);
}

/*=========== Utility ===========*/
/* put on the last section above the prev/next block on any page */
.lastSec {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/*=========== Prev / Next ===========*/
.prevNextSec {
    padding: 50px 0;
}

.prevNextWrap {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
}

.pnBtn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 48%;
    padding: 10px 15px;
    border-radius: 60px;
    overflow: hidden;
    border: 1px solid rgba(0, 57, 116, 0.16);
    background: var(--color-white);
    transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.pnBtn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-intro-heading);
    transform: scaleX(0);
    transition: transform 0.5s var(--ease-out);
}

.pnPrev::before {
    transform-origin: right center;
}

.pnNext::before {
    transform-origin: left center;
}

.pnBtn:hover::before {
    transform: scaleX(1);
}

.pnBtn:hover {
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(11, 53, 84, 0.14);
}

.pnArrow {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-orange);
    color: var(--color-white);
    transition: transform 0.4s var(--ease-out), background 0.4s var(--ease-out), color 0.4s var(--ease-out);
}

.pnArrow svg {
    display: block;
    width: 24px;
    height: 15px;
}

.pnBtn:hover .pnArrow {
    background: var(--color-white);
    color: var(--color-intro-heading);
}

.pnPrev:hover .pnArrow {
    transform: translateX(-4px);
}

.pnNext:hover .pnArrow {
    transform: translateX(4px);
}

.pnTxt {
    position: relative;
    z-index: 2;
    display: block;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-body-text);
    transition: color 0.4s var(--ease-out);
}

.pnNext {
    margin-left: auto;
    text-align: right;
}

.pnBtn:hover .pnTxt {
    color: var(--color-white);
}

/*=========== Header state while a mega panel is open ===========*/
/* the panel sits behind the header, so the header must invert to stay legible */
body.navOpen #header::before {
    opacity: 0;
    transform: translateY(-100%);
}

body.navOpen .desktopView ul.dropdown > li > a {
    color: rgba(255, 255, 255, 0.72);
}

body.navOpen .desktopView ul.dropdown > li > a:hover,
body.navOpen .desktopView ul.dropdown > li > a.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

body.navOpen .downloadBtn a {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

body.navOpen .downloadBtn a:hover {
    border-color: transparent;
}


/*=========== Inner Banner : Corporate Overview skin ===========*/
/* only the artwork and the eyebrow colour differ from the base banner */
.innerBanner.coBanner {
    background-color: var(--color-deep);
    background-image: url(../images/corporate/corporate-overview-banner-img.webp);
}

.innerBanner.coBanner .bannerEyebrow {
    color: var(--color-orange);
    opacity: 1;
    font-weight: 700;
}

.innerBanner.coBanner .bannerContent h1 {
    text-transform: uppercase;
}

/*=========== Inner Banner : Our Core Principles skin ===========*/
/* no eyebrow on this one -- the title itself carries the orange */
.innerBanner.ocpBanner {
    background-color: var(--color-deep);
    background-image: url(../images/our-core/our-core-principles-banner-img.webp);
}

.innerBanner.ocpBanner .bannerContent h1 {
    text-transform: uppercase;
    color: var(--color-orange);
}

/*=========== Corporate Overview Content ===========*/
.coContent {
    padding: 0;
    margin-bottom: 0;
}

/*--- Bulleted list inside a content block ---*/
.contentBlock .contentList {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.contentBlock .contentList li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-body-text);
}

.contentBlock .contentList li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-orange);
}

.contentBlock .contentList li:last-child {
    margin-bottom: 0;
}

/*=========== Where We Stand Today ===========*/
.whereWeStand {
    padding: 0 0 30px;
}

.whereWeStand .secTitle {
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-orange);
    margin-bottom: 34px;
}

.standGrid {
    row-gap: 6px;
}

.standItem {
    padding-right: 40px;
    margin-bottom: 34px;
}

/* short orange rule that sits above every statement */
.standItem .itemRule {
    display: block;
    width: 54px;
    height: 3px;
    margin-bottom: 14px;
    background: var(--color-orange);
}

.standItem p {
    font-size: 16px;
    line-height: 26px;
}

/*=========== Our Values : intro ===========*/
.valuesIntro {
    padding: 0px 0 30px;
}

.valuesImg img {
    display: block;
    width: 100%;
    height: auto;
}

/* grey panel tucked under the photo, narrower than the image */
.valuesIntroTxt {
    max-width: 780px;
    margin: 0 auto;
    padding: 34px 40px 38px;
    text-align: center;
    background: #e9ecef;
}

.valuesIntroTxt h2 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-orange);
    margin-bottom: 16px;
}

.valuesIntroTxt p {
    font-size: 16px;
    line-height: 28px;
    color: var(--color-intro-heading);
}

/*=========== Our Values : cards ===========*/
/* the prev/next block below brings its own top padding, so no bottom gap here */
.valuesCards {
    padding: 0px 0 0;
}

/* the gap belongs on the row: .valueBox is height:100%, so a margin on the box
   would overflow its column instead of separating the two wrapped lines */
.valuesCards .row {
    row-gap: 46px;
}

/* bracket card: open at the top, orange rail down the left, across the base
   and back up the right -- a U. The grey tab then breaks that bottom line. */
.valueBox {
    position: relative;
    height: 100%;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 34px 26px 42px;
    text-align: center;
    border-left: 2px solid var(--color-orange);
    border-right: 2px solid var(--color-orange);
    border-bottom: 2px solid var(--color-orange);
}

/* sits centred on the bottom rail and masks the middle of it */
.valueBox::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 38%;
    min-width: 92px;
    height: 12px;
    background: #d7dade;
}

.valueIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 78px;
    margin-bottom: 20px;
}

/* fixed box: these icons ship with a viewBox but no intrinsic width/height,
   so never let the layout depend on their natural size */
.valueIcon img {
    display: block;
    width: 68px;
    height: 68px;
    max-width: 100%;
    object-fit: contain;
    flex: 0 0 auto;
}

.valueBox p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-intro-heading);
}

/*=========== Our Core Principles ===========*/
.principlesSec {
    padding: 0px 0 0;
}

.principlesSec .row {
    row-gap: 30px;
}

/* outlined card with an orange node sitting on the bottom-right corner */
.principleBox {
    position: relative;
    height: 100%;
    padding: 26px 28px 34px;
    border: 1px solid var(--color-orange);
}

.principleBox::after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--color-orange);
    /* ring plus the solid centre dot in a single element */
    background: radial-gradient(circle, var(--color-orange) 0 3.5px, var(--color-white) 4px 100%);
}

.principleBox h2 {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--color-intro-heading);
    margin-bottom: 10px;
}

.principleBox p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-intro-heading);
}

/*--- Closing statement strip ---*/
.principleNote {
    margin-top: 44px;
    padding: 4px 0 4px 20px;
    border-left: 4px solid var(--color-orange);
}

.principleNote p {
    font-size: 16px;
    line-height: 30px;
    color: var(--color-intro-heading);
}

.globalPresenceSec {
    padding: 20px 0 64px;
    background: #e9ecef;
}

.globalBreadcrumbRow {
    margin-bottom: 34px;
}

.globalPresencePage .breadCrumb ul li,
.globalPresencePage .breadCrumb ul li a,
.globalPresencePage .breadCrumb ul li span {
    color: var(--color-intro-heading);
}

.globalPresencePage .breadCrumb ul li + li::before {
    color: rgba(11, 53, 84, 0.5);
}

.globalPresencePage .breadCrumb ul li:last-child span {
    color: var(--color-orange);
}

.globalPresenceTitle {
    margin-bottom: 20px;
    font-size: 30px;
    line-height: 38px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-orange);
}



.globalPresenceCopy p {
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--color-body-text);
}

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

.globalMap {
    margin: 44px 0 0;
}

.globalMap img {
    display: block;
    width: 100%;
    height: auto;
}

.globalLegend {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
    column-gap: 76px;
    row-gap: 24px;
    padding: 42px 34px 0;
}

.legendItem {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
    font-size: 16px;
    line-height: 1.45;
    color: var(--color-body-text);
}

.legendManufacturing {
    grid-column: 1;
}

.legendOffice {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

.legendIcon {
    display: flex;
    flex: 0 0 30px;
    width: 30px;
    height: 38px;
    align-items: center;
    justify-content: center;
}

.legendIcon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.legendHeadquarters .legendIcon {
    color: #0b3554;
}

.legendManufacturing .legendIcon {
    color: #9ca3aa;
}

.legendOffice .legendIcon {
    color: #159b51;
}

.legendInstalled .legendIcon {
    color: var(--color-orange);
}

.legendDot {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    margin-left: 6px;
    border-radius: 50%;
    background: #a84d25;
}

.globalMapNote {
    margin: 84px 34px 0;
}

.globalMapNote .noteRule {
    display: block;
    width: 72px;
    height: 3px;
    margin-bottom: 10px;
    background: var(--color-body-text);
}

.globalMapNote p {
    font-size: 16px;
    line-height: 1.45;
    color: var(--color-body-text);
}

/*=========== Our Offerings ===========*/
.innerBanner.offeringsBanner {
    background-image: url(../images/our-offerings/our-offrings.webp);
}

/* .innerBanner.offeringsBanner .bannerPatch {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.54) 58%, rgba(0, 0, 0, 0.38) 100%);
} */

.innerBanner.offeringsBanner .breadCrumb ul li,
.innerBanner.offeringsBanner .breadCrumb ul li a,
.innerBanner.offeringsBanner .breadCrumb ul li span {
    color: var(--color-white);
}

.innerBanner.offeringsBanner .breadCrumb ul li + li::before {
    color: rgba(255, 255, 255, 0.65);
}

.innerBanner.offeringsBanner .breadCrumb ul li:last-child span {
    color: var(--color-orange);
}

.innerBanner.offeringsBanner .offeringsEyebrow {
    display: block;
    margin-bottom: 22px;
    font-size: 19px;
    line-height: 26px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-orange);
}

.innerBanner.offeringsBanner .bannerContent h1 {
    max-width: 1100px;
    margin-bottom: 32px;
    font-size: 36px;
    line-height: 48px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-white);
}

.innerBanner.offeringsBanner .bannerContent p {
    max-width: 1320px;
    font-size: 16px;
    line-height: 1.35;
    color: var(--color-white);
}

.offeringsIntroSec {
    padding: 0 0 30px;
    background: var(--color-white);
}

.offeringsIntroSec p {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-intro-heading);
}

.offeringsApplications {
    padding: 0 0 30px;
}

.offeringsSectionTitle,
.engineeringExcellence > .container > h2 {
    margin-bottom: 34px;
    font-size: 24px;
    line-height: 34px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-orange);
}

.offeringGroup + .offeringGroup {
    margin-top: 40px;
}

.offeringGroupHead {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 12px 20px;
}

.offeringGroupIcon {
    display: block;
    flex: 0 0 106px;
    width: 106px;
    height: 106px;
    color: var(--color-intro-heading);
}

.offeringGroupIcon svg,
.offeringGroupIcon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.offeringGroupHead h3 {
    font-size: 23px;
    line-height: 30px;
    color: var(--color-intro-heading);
}

.offeringPanel {
    border: 1px solid #222;
    background: var(--color-white);
}

.productPanel {
    position: relative;
    margin-left: 30px;
}

.capacityLabel {
    position: absolute;
    left: -54px;
    top: 178px;
    padding: 10px 0;
    font-size: 24px;
    line-height: 30px;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #050505;
    background: var(--color-white);
}

.capacityLabel::before,
.capacityLabel::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 48px;
    height: 2px;
    background: #222;
    transform: translateX(-50%);
}

.capacityLabel::before { top: -20px; }
.capacityLabel::after { bottom: -20px; }

.offeringRow {
    display: grid;
    grid-template-columns: 34% 66%;
    margin: 34px 24px 0 38px;
    padding-bottom: 30px;
}

.offeringRowBottom {
    margin-top: 0;
    padding-top: 28px;
    border-top: 1px solid #b8bdc2;
}

.offeringProduct,
.aftermarketSide,
.technologyColumn:first-child {
    padding-right: 38px;
}

.offeringUses,
.aftermarketMain,
.technologyApplications {
    padding-left: 40px;
    border-left: 1px solid var(--color-orange);
}

.offeringPanel h4 {
    margin-bottom: 12px;
    font-size: 19px;
    line-height: 25px;
    color: var(--color-orange);
}

.offeringProduct h4:not(:first-child) {
    margin-top: 25px;
}

.offeringPanel p,
.offeringPanel li {
    font-size: 16px;
    line-height: 1.38;
    color: #080808;
}

.offeringPanel i {
    font-style: normal;
    color: var(--color-orange);
}

.applicationItem + .applicationItem {
    margin-top: 22px;
}

.applicationItem h5 {
    position: relative;
    margin-bottom: 5px;
    padding-left: 21px;
    font-size: 16px;
    line-height: 23px;
    font-weight: 700;
    color: #080808;
}

.applicationItem h5::before,
.offeringPanel li::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-orange);
}

.applicationItem h5::before {
    left: 0;
    top: 8px;
}

.applicationItem p {
    padding-left: 21px;
}

.offeringFootnote {
    position: relative;
    margin: 20px 0 0 30px;
    padding-top: 8px;
    font-size: 13px;
    line-height: 20px;
    color: #080808;
}

.offeringFootnote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 2px;
    background: #222;
}

.aftermarketPanel,
.technologyPanel {
    display: grid;
    grid-template-columns: 30% 70%;
    margin-left: 18px;
    padding: 30px 26px 30px 24px;
}

.offeringPanel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.offeringPanel li {
    position: relative;
    padding-left: 22px;
}

.offeringPanel li::before {
    left: 0;
    top: 8px;
}

.aftermarketSide h4:not(:first-child) {
    margin-top: 22px;
}

.aftermarketMain li + li,
.technologyColumn li + li {
    margin-top: 14px;
}

.technologyPanel {
    grid-template-columns: 31% 69%;
}

.technologyColumn sub {
    font-size: 70%;
    line-height: 0;
}

.engineeringExcellence {
    padding: 48px 0 54px;
    background: #e9ecef;
}

.fieldCase + .fieldCase {
    margin-top: 48px;
}

.fieldCase h3 {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
    padding: 15px 34px;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-white);
    background: var(--color-orange);
}

.fieldArrow {
    position: relative;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-white);
}

.fieldArrow::before,
.fieldArrow::after {
    content: "";
    position: absolute;
    top: 14px;
    width: 14px;
    height: 20px;
    border-top: 1.5px solid var(--color-intro-heading);
    border-right: 1.5px solid var(--color-intro-heading);
    transform: rotate(45deg);
}

.fieldArrow::before { left: 10px; }
.fieldArrow::after { left: 18px; }

.fieldArrowImg {
    background: transparent;
}

.fieldArrowImg::before,
.fieldArrowImg::after {
    display: none;
}

.fieldArrowImg img {
    display: block;
    width: 100%;
    height: 100%;
}

.fieldCase p {
    font-size: 16px;
    line-height: 1.35;
    color: #080808;
}

.fieldCase p + p {
    margin-top: 12px;
}

.fieldCase h3 sub,
.fieldCase p sub {
    font-size: 65%;
    line-height: 0;
}

/*=========== Our Strengths ===========*/
.innerBanner.strengthsBanner {
    background-image: url(../images/strength/our-strength-banner.webp);
}

/* .innerBanner.strengthsBanner .bannerPatch {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.92) 68%, rgba(255, 255, 255, 0.72) 100%);
} */

.innerBanner.strengthsBanner .breadCrumb ul li,
.innerBanner.strengthsBanner .breadCrumb ul li a,
.innerBanner.strengthsBanner .breadCrumb ul li span {
    color: var(--color-intro-heading);
}

.innerBanner.strengthsBanner .breadCrumb ul li + li::before {
    color: rgba(11, 53, 84, 0.5);
}

.innerBanner.strengthsBanner .breadCrumb ul li:last-child span {
    color: var(--color-orange);
}

.strengthsEyebrow {
    display: block;
    margin-bottom: 20px;
    font-size: 19px;
    line-height: 26px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-orange);
}

.innerBanner.strengthsBanner .bannerContent h1 {
    margin-bottom: 26px;
    font-size: 36px;
    line-height: 48px;
    font-weight: 400;
    text-transform: uppercase;
    color: #050505;
}

.innerBanner.strengthsBanner .bannerContent p {
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-intro-heading);
}

.strengthsIntroSec {
    padding: 0 0 30px;
    background: var(--color-white);
}

.strengthsIntroSec p {
    margin: 0;
    font-size: 18px;
    line-height: 25px;
    color: var(--color-intro-heading);
}

.strengthsCertifications {
    padding: 0 0 30px;
}

.strengthsCertifications h2 {
    margin: 0 0 18px 0px;
    font-size: 20px;
    line-height: 30px;
    color: var(--color-orange);
}

.certificationPanel {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 54px;
    padding: 28px 38px 24px;
    background: #fff0e2;
}

.certificationItem {
    position: relative;
}

.certRule {
    position: absolute;
    left: 0;
    top: -31px;
    display: block;
    width: 90px;
    height: 4px;
    background: var(--color-intro-heading);
}

.certificationItem h3 {
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 27px;
    color: #050505;
}

.certificationItem p {
    font-size: 16px;
    line-height: 1.45;
    color: #090909;
}

.certificationItem .certNote {
    margin-top: 14px;
    font-size: 15px;
}

.certificationItem sup {
    font-size: 65%;
    line-height: 0;
}

.strengthsGridSec {
    padding: 64px 0 10px;
}

.strengthsGrid {
    row-gap: 52px;
}

.strengthCard {
    height: 100%;
    padding: 0 14px 38px;
    border-bottom: 2px solid #aeb6bd;
}

.strengthCardHead {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    min-height: 108px;
    margin-bottom: 26px;
    padding-left: 14px;
    border-left: 4px solid var(--color-orange);
}

.strengthIcon {
    display: block;
    width: 92px;
    height: 92px;
    color: var(--color-intro-heading);
}

.strengthIcon svg,
.strengthIcon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.strengthCardHead h2 {
    display: flex;
    align-items: center;
    min-height: 108px;
    margin: 0;
    padding: 16px 20px;
    font-size: 24px;
    line-height: 1.18;
    color: var(--color-intro-heading);
    background: #e9ecef;
}

.strengthCard ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.strengthCard li {
    position: relative;
    padding-left: 20px;
    font-size: 16px;
    line-height: 1.38;
    color: #090909;
}

.strengthCard li + li {
    margin-top: 10px;
}

.strengthCard li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 7px;
    height: 7px;
    background: var(--color-orange);
}

/*=========== Research & Development ===========*/
.innerBanner.rndBanner {
    background-image: url(../images/research/research-and-development-banner-img.webp);
}

/* .innerBanner.rndBanner .bannerPatch {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.92) 68%, rgba(255, 255, 255, 0.72) 100%);
} */

.innerBanner.rndBanner .breadCrumb ul li,
.innerBanner.rndBanner .breadCrumb ul li a,
.innerBanner.rndBanner .breadCrumb ul li span {
    color: var(--color-intro-heading);
}

.innerBanner.rndBanner .breadCrumb ul li + li::before {
    color: rgba(11, 53, 84, 0.5);
}

.innerBanner.rndBanner .breadCrumb ul li:last-child span {
    color: var(--color-orange);
}

.rndEyebrow {
    display: block;
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-orange);
}

.innerBanner.rndBanner .bannerContent h1 {
    margin-bottom: 26px;
    font-size: 36px;
    line-height: 48px;
    font-weight: 400;
    text-transform: uppercase;
    color: #050505;
}

.innerBanner.rndBanner .bannerContent p {
    max-width: 1040px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--color-intro-heading);
}

.rndIntroSec {
    padding: 0 0 30px;
    background: var(--color-white);
}

.rndIntroSec p {
    margin: 0;
    font-size: 18px;
    line-height: 25px;
    color: var(--color-intro-heading);
}

.rndIpSec,
.rndModelSec {
    padding: 0 0 30px;
}
.rndHighlights{
    padding: 30px 0px;
    margin-bottom: 30px;
}

.rndHighlights {
    background: #f5f6f7;
}

.rndSectionTitle {
    margin-bottom: 34px;
    font-size: 20px;
    line-height: 38px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-orange);
}

.ipModel {
    display: grid;
    grid-template-columns: 1.75fr 1fr;
    min-height: 330px;
    border: 2px solid var(--color-orange);
}

.ipApproach {
    position: relative;
    z-index: 1;
    margin: -2px 0 -2px -2px;
    padding: 34px 100px 30px 26px;
    background: #e9ecef;
    clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
}

.ipApproach h3,
.ipOutcomes h3 {
    margin-bottom: 26px;
    font-size: 25px;
    line-height: 32px;
    color: var(--color-intro-heading);
}

.ipApproach ul,
.ipOutcomes ul,
.rndModelItem ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ipApproach li,
.rndModelItem li {
    position: relative;
    padding-left: 28px;
    font-size: 16px;
    line-height: 1.45;
    color: #090909;
}

.ipApproach li + li,
.rndModelItem li + li {
    margin-top: 15px;
}

.ipApproach li::before,
.rndModelItem li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 9px;
    height: 9px;
    background: var(--color-orange);
}

.ipArrow {
    position: absolute;
    right: 42px;
    top: 50%;
    width: 74px;
    height: 74px;
    transform: translateY(-50%);
}

.ipArrow img {
    display: block;
    width: 100%;
    height: 100%;
}

.ipOutcomes {
    padding: 34px 42px 22px;
}

.ipOutcomes li {
    padding: 0 0 17px;
    font-size: 16px;
    line-height: 1.4;
    color: #090909;
    border-bottom: 2px solid var(--color-orange);
}

.ipOutcomes li + li {
    padding-top: 17px;
}

.ipOutcomes li:last-child {
    border-bottom: 0;
}

.ipModel sub,
.rndStatsGrid sub,
.rndModelItem sub {
    font-size: 65%;
    line-height: 0;
}

.rndStatsGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 70px;
    row-gap: 42px;
}

.rndStat strong {
    display: block;
    margin-bottom: 8px;
    font-size: 30px;
    line-height: 1;
    font-weight: 400;
    color: var(--color-orange);
}

.rndStat p {
    max-width: 350px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--color-intro-heading);
}

.rndTechnology {
    grid-column: span 2;
}

.rndTechnology h3 {
    margin-bottom: 10px;
    font-size: 30px;
    line-height: 40px;
    font-weight: 400;
    color: var(--color-orange);
}

.rndTechnology p {
    max-width: 650px;
}

.rndFilings {
    align-self: start;
}

.rndModelList {
    display: grid;
    gap: 72px;
}

.rndModelItem {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 46px;
}

.rndModelLabel {
    position: relative;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: start;
    min-height: 170px;
    padding: 0 0 20px;
    border-left: 2px solid var(--color-intro-heading);
    border-bottom: 2px solid var(--color-intro-heading);
}

.rndNumber {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin: 10px 0 0 13px;
    border-radius: 50%;
    font-size: 32px;
    line-height: 1;
    font-weight: 400;
    color: var(--color-white);
    background: var(--color-orange);
}

.rndNumber::before {
    content: "";
    position: absolute;
    inset: -10px;
    border: 2px solid var(--color-intro-heading);
    border-right-color: transparent;
    border-radius: 50%;
}

.rndModelLabel h3 {
    padding: 8px 8px 0 6px;
    font-size: 20px;
    line-height: 1.22;
    color: var(--color-intro-heading);
}

.rndModelItem li {
    line-height: 1.5;
}

/*--- R&D: New Product Development ---*/


.rndProductsIntro {
    margin: -18px 0 24px;
    font-size: 16px;
    line-height: 1.5;
    color: #090909;
}

.rndProductsTableWrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rndProductsTable {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    table-layout: fixed;
}

.rndProductsTable th,
.rndProductsTable td {
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1.35;
    text-align: left;
    vertical-align: top;
    color: #090909;
    border-bottom: 1px solid #aeb6bd;
}

.rndProductsTable th {
    padding-top: 0;
    padding-bottom: 7px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 2px solid var(--color-orange);
}

.rndProductsTable th:nth-child(1) { width: 25%; }
.rndProductsTable th:nth-child(2) { width: 35%; }
.rndProductsTable th:nth-child(3) { width: 25%; }
.rndProductsTable th:nth-child(4) { width: 15%; text-align: center; }

.rndProductsTable tbody tr:nth-child(odd) {
    background: #fff0e2;
}

.rndProductsTable tbody tr:last-child td {
    border-bottom-color: var(--color-orange);
}

.rndProductsTable i {
    font-style: normal;
    color: var(--color-orange);
}

.rndProductsTable sub {
    font-size: 65%;
    line-height: 0;
}

.rndProductsTable .ipCheck {
    font-size: 24px;
    line-height: 1;
    text-align: center;
}

.rndProductsTable .ipCheck img {
    display: inline-block;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.rndProductImage {
    margin: 52px 0 0;
}

.rndProductImage img {
    display: block;
    width: 100%;
    height: auto;
}

/*=========== Digital Capabilities ===========*/
/* Banner is the report's shared inner-page banner; only the photograph
   and the crumb colours are page-specific. Everything below it is this
   chapter's own language — see the deck and the rail. */
.innerBanner.digitalBanner {
    background-image: url(../images/digital/digital-capabilities-img.webp);
}

.innerBanner.digitalBanner .breadCrumb ul li,
.innerBanner.digitalBanner .breadCrumb ul li a,
.innerBanner.digitalBanner .breadCrumb ul li span {
    color: var(--color-intro-heading);
}

.innerBanner.digitalBanner .breadCrumb ul li + li::before {
    color: rgba(11, 53, 84, 0.5);
}

.innerBanner.digitalBanner .breadCrumb ul li:last-child span {
    color: var(--color-orange);
}

.digitalEyebrow {
    display: block;
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-orange);
}

.innerBanner.digitalBanner .bannerContent h1 {
    margin-bottom: 26px;
    font-size: 36px;
    line-height: 48px;
    font-weight: 400;
    text-transform: uppercase;
    color: #050505;
}

.innerBanner.digitalBanner .bannerContent p {
    max-width: 1120px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--color-intro-heading);
}

/*--- The deck -------------------------------------------------------
   The report is orange-on-paper everywhere else. Digital opens on the
   brand navy instead: same three report colours, inverted, so the
   chapter is recognisably its own without inventing a palette. The
   band is pulled up over the banner's own bottom margin so the two
   meet with no white seam between them. */
.dgDeck {
    position: relative;
    margin-top: -40px;
    margin-bottom: clamp(56px, 4rem + 3vw, 110px);
    padding: clamp(44px, 3rem + 3.2vw, 96px) 0 clamp(44px, 3rem + 3.2vw, 92px);
    overflow: hidden;
    background: var(--color-deep);
    color: var(--color-white);
}

/* A faint engineering grid — the only decoration on the band, drawn in
   CSS rather than shipped as an image. Fades out to the right so it
   never competes with the figures sitting there. */
.dgDeck__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(105deg, #000 0%, rgba(0, 0, 0, 0.45) 52%, transparent 88%);
    mask-image: linear-gradient(105deg, #000 0%, rgba(0, 0, 0, 0.45) 52%, transparent 88%);
    pointer-events: none;
}

.dgDeck .container {
    position: relative;
    z-index: 2;
}

.dgDeck__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(300px, 0.72fr);
    gap: clamp(34px, 2rem + 3vw, 88px);
    align-items: start;
}

.dgDeck__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(18px, 1rem + 1vw, 28px);
    font-family: var(--font-cond);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-orange);
}

/* the short rule that runs off the front of the eyebrow, echoing the
   spine that runs down the rail below */
.dgDeck__eyebrow::before {
    content: "";
    width: clamp(28px, 3vw, 52px);
    height: 2px;
    background: var(--color-orange);
}

.dgDeck__lead {
    margin: 0 0 clamp(16px, 1rem + 0.8vw, 26px);
    font-size: clamp(19px, 0.95rem + 0.95vw, 32px);
    line-height: 1.34;
    font-weight: 300;
    color: var(--color-white);
}

.dgDeck__body {
    max-width: 62ch;
    margin: 0;
    font-size: var(--fs-body);
    line-height: 1.68;
    color: rgba(255, 255, 255, 0.76);
}

/* The figures. Already stated inside the impact lists further down;
   lifted here they give the band something readable at a glance. */
.dgDeck__figures {
    display: grid;
    gap: clamp(20px, 1.2rem + 1.2vw, 34px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dgFigure {
    padding-left: clamp(16px, 1.4vw, 24px);
    border-left: 2px solid rgba(255, 255, 255, 0.18);
}

/* the teal from the palette, kept for the numbers only — it marks
   measured outcomes here and again on the impact blocks below, so the
   colour means one thing on the whole page */
.dgFigure__val {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-cond);
    font-size: clamp(32px, 1.2rem + 2.3vw, 58px);
    font-weight: 300;
    line-height: 1;
    color: var(--color-accent-2);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.dgFigure__val span {
    font-size: 0.6em;
    font-weight: 400;
}

.dgFigure__label {
    display: block;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}

/*--- The rail -------------------------------------------------------
   Five areas hung off one numbered spine, rather than five identical
   blocks stacked down the page. The line is a single element behind
   the whole set; .dgRail__fill is scaled by ScrollTrigger so the spine
   draws itself as the reader descends, and each node lights when its
   area is reached. Without JS the fill simply stays at full height and
   the numbers stay lit, so the layout never depends on the script. */
.dgRailSec {
    padding: 0 0 var(--section-pad);
    background: var(--color-white);
}

.dgRailSec__head {
    margin-bottom: clamp(38px, 2.4rem + 2.4vw, 76px);
}

.dgRailSec__kicker {
    display: block;
    margin-bottom: 12px;
    font-family: var(--font-cond);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-orange);
}

.dgRailSec__title {
    max-width: 22ch;
    margin: 0;
    font-size: var(--fs-h2);
    line-height: 1.12;
    font-weight: 300;
    color: var(--color-intro-heading);
}

.dgRailSec__title span {
    color: var(--color-orange);
}

.dgRail {
    position: relative;
    /* the spine's own column, then the content */
    padding-left: clamp(64px, 5vw, 104px);
}

.dgRail__line {
    position: absolute;
    left: clamp(23px, 1.85vw, 39px);
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: rgba(11, 53, 84, 0.12);
    overflow: hidden;
}

/* scaled from the top by the script; full height by default so the
   spine is drawn even with JS off */
.dgRail__fill {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--color-orange) 0%, var(--color-accent-2) 100%);
    transform-origin: 50% 0;
}

.js .dgRail__fill {
    transform: scaleY(0);
}

.dgArea {
    position: relative;
}

.dgArea + .dgArea {
    margin-top: clamp(44px, 2.6rem + 3vw, 88px);
    padding-top: clamp(44px, 2.6rem + 3vw, 88px);
    border-top: 1px solid rgba(11, 53, 84, 0.1);
}

/* the node on the spine. Sits in the padding the rail reserved, so it
   lands on the line without the content having to make room for it. */
.dgArea__marker {
    position: absolute;
    left: calc(clamp(64px, 5vw, 104px) * -1);
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(48px, 3.7vw, 80px);
    height: clamp(48px, 3.7vw, 80px);
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid rgba(11, 53, 84, 0.14);
    transition: border-color 0.5s var(--ease-out), background-color 0.5s var(--ease-out);
}

.dgArea + .dgArea .dgArea__marker {
    top: clamp(44px, 2.6rem + 3vw, 88px);
}

.dgArea__num {
    font-family: var(--font-cond);
    font-size: clamp(15px, 0.7rem + 0.55vw, 22px);
    font-weight: 700;
    line-height: 1;
    color: rgba(11, 53, 84, 0.4);
    font-variant-numeric: lining-nums tabular-nums;
    transition: color 0.5s var(--ease-out);
}

/* lit by the script as the area is reached */
.dgArea.is-live .dgArea__marker {
    border-color: var(--color-orange);
    background: var(--color-orange);
}

.dgArea.is-live .dgArea__num {
    color: var(--color-white);
}

.dgArea__title {
    margin: 0 0 clamp(20px, 1.2rem + 1.2vw, 34px);
    font-size: var(--fs-h3);
    line-height: 1.2;
    font-weight: 400;
    color: var(--color-intro-heading);
}

.dgArea__split {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
    gap: clamp(22px, 1.4rem + 1.6vw, 44px);
    align-items: start;
}

.dgArea__label {
    margin: 0 0 clamp(12px, 0.8rem + 0.4vw, 18px);
    font-family: var(--font-cond);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-orange);
}

/* An initiative is a thing being done: drawn as a plain card, opened
   by a short orange edge. Deliberately quiet — the impact block beside
   it is what the reader is meant to land on. */
.dgCard {
    position: relative;
    padding: clamp(16px, 1rem + 0.7vw, 24px) clamp(16px, 1rem + 0.8vw, 26px);
    background: #f4f6f8;
    border-left: 3px solid var(--color-orange);
    transition: background-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.dgCard + .dgCard {
    margin-top: clamp(10px, 0.6rem + 0.5vw, 16px);
}

.dgCard:hover {
    background: #eef1f4;
    transform: translateX(3px);
}

.dgCard h5 {
    margin: 0 0 8px;
    font-size: var(--fs-h6);
    line-height: 1.3;
    font-weight: 700;
    color: var(--color-intro-heading);
}

.dgCard p {
    margin: 0;
    font-size: var(--fs-body);
    line-height: 1.6;
    color: #3a4249;
}

/* An impact is a result: navy ground, teal marks. The two kinds of
   statement are drawn as two different objects, so the eye can tell
   them apart before it reads either. */
.dgImpact {
    position: relative;
    padding: clamp(22px, 1.3rem + 1.1vw, 34px) clamp(20px, 1.2rem + 1vw, 32px);
    background: var(--color-intro-heading);
    color: var(--color-white);
    overflow: hidden;
}

/* teal edge down the side, the same colour carrying the figures on the
   deck above */
.dgImpact::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-accent-2);
}

.dgImpact__label {
    margin: 0 0 clamp(14px, 0.9rem + 0.5vw, 20px);
    font-family: var(--font-cond);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent-2);
}

.dgImpact ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dgImpact li {
    position: relative;
    padding-left: 22px;
    font-size: var(--fs-body);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
}

.dgImpact li + li {
    margin-top: clamp(10px, 0.6rem + 0.5vw, 16px);
    padding-top: clamp(10px, 0.6rem + 0.5vw, 16px);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* a small chevron rather than a bullet — these are outcomes, and the
   mark should read as "leads to" */
.dgImpact li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.5em;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--color-accent-2);
    border-bottom: 2px solid var(--color-accent-2);
    transform: rotate(-45deg);
}

.dgImpact li + li::before {
    top: calc(0.5em + clamp(10px, 0.6rem + 0.5vw, 16px));
}


/*=========== Performance Highlights ===========*/
.performanceHero {
    padding: 32px 0 48px;
    background: var(--color-white);
}

.performanceBreadcrumb {
    margin-bottom: 34px;
}

.performanceBreadcrumb ul li,
.performanceBreadcrumb ul li a,
.performanceBreadcrumb ul li span {
    color: var(--color-intro-heading);
}

.performanceBreadcrumb ul li + li::before {
    color: rgba(11, 53, 84, 0.5);
}

.performanceBreadcrumb ul li:last-child span {
    color: var(--color-orange);
}

.performanceEyebrow {
    display: block;
    margin-bottom: 16px;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-orange);
}

.performanceHero h1 {
    max-width: 780px;
    margin-bottom: 22px;
    font-size: 36px;
    line-height: 48px;
    font-weight: 400;
    text-transform: uppercase;
    color: #050505;
}

.performanceHero p {
    font-size: 16px;
    line-height: 1.55;
    color: var(--color-intro-heading);
}

.financialHighlights {
    padding: 54px 0 60px;
    background: #3e3e3e;
}

.financialHighlights h2,
.operationalHighlights > .container > .row > div > h2 {
    margin-bottom: 36px;
    font-size: 26px;
    line-height: 34px;
    font-weight: 400;
    text-transform: uppercase;
}

.financialHighlights h2 {
    color: var(--color-orange);
}

.financialGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 90px;
    row-gap: 48px;
}

.financialStat strong {
    display: block;
    margin-bottom: 7px;
    font-size: 30px;
    line-height: 1.05;
    font-weight: 400;
    color: var(--color-orange);
}

.financialStat strong .currency {
    font-size: 27px;
}

.financialStat strong small {
    font-size: 28px;
    font-weight: 400;
}

.financialStat p {
    font-size: 16px;
    line-height: 1.38;
    color: var(--color-white);
}

.operationalHighlights {
    padding: 54px 0 60px;
    background: var(--color-orange);
}

.operationalHighlights > .container > .row > div > h2 {
    color: #050505;
}

.operationalGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 70px;
    row-gap: 54px;
}

.operationalStat strong {
    display: block;
    margin-bottom: 7px;
    font-size: 30px;
    line-height: 1;
    font-weight: 400;
    color: var(--color-white);
}

.operationalStat p {
    max-width: 260px;
    font-size: 16px;
    line-height: 1.4;
    color: #050505;
}

.salesShareGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px;
    margin-top: 82px;
}

.salesShare h3 {
    margin-bottom: 26px;
    font-size: 17px;
    line-height: 25px;
    color: var(--color-white);
}

.salesShareBody {
    display: flex;
    align-items: center;
    gap: 24px;
}

.salesShareChart {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
}

.shareDonut {
    position: relative;
    flex: 0 0 130px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
}

.shareDonut58 {
    background: conic-gradient(var(--color-white) 0 58%, #3e3e3e 58% 100%);
}

.shareDonut73 {
    background: conic-gradient(var(--color-white) 0 73%, #3e3e3e 73% 100%);
}

.shareDonut::after {
    content: "";
    position: absolute;
    inset: 38px;
    border-radius: 50%;
    background: var(--color-orange);
}

.salesShare ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.salesShare li {
    position: relative;
    padding-left: 25px;
    font-size: 16px;
    line-height: 1.5;
    color: #050505;
}

.salesShare li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.salesShare .shareLight::before { background: var(--color-white); }
.salesShare .shareDark::before { background: #3e3e3e; }

.salesShare li strong {
    margin-right: 5px;
    font-size: 22px;
    font-weight: 700;
}

.salesShare .shareLight strong { color: var(--color-white); }
.salesShare .shareDark strong { color: #3e3e3e; }

/* Consistent dark treatment for every photographic inner banner */
/* .innerBanner:not(.plainBanner):not(.downloadCentreBanner) .bannerPatch {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.58) 60%, rgba(0, 0, 0, 0.42) 100%);
} */



.innerBanner:not(.plainBanner):not(.downloadCentreBanner) .breadCrumb ul li,
.innerBanner:not(.plainBanner):not(.downloadCentreBanner) .breadCrumb ul li a,
.innerBanner:not(.plainBanner):not(.downloadCentreBanner) .breadCrumb ul li span {
    color: var(--color-white);
}
.innerBanner:not(.plainBanner):not(.downloadCentreBanner) .bannerContent h1, .innerBanner:not(.plainBanner):not(.downloadCentreBanner) .bannerContent p {
    color: var(--color-white);
}
.innerBanner:not(.plainBanner):not(.downloadCentreBanner) .breadCrumb ul li + li::before {
    color: rgba(255, 255, 255, 0.65);
}

.innerBanner:not(.plainBanner):not(.downloadCentreBanner) .breadCrumb ul li:last-child span {
    color: var(--color-orange);
}

/* Key performance indicators */
.kpiHero {
    position: relative;
    min-height: 500px;
    padding: 34px 0 50px;
    background: url(../images/key-performance/key-p-i-banner-img.webp) center center / cover no-repeat;
        margin-bottom: 40px;
}

.kpiHeroPatch {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.58) 60%, rgba(0, 0, 0, 0.42) 100%);
    pointer-events: none;
}

.kpiHero .container {
    position: relative;
    z-index: 1;
    min-height: 416px;
}

.kpiHero .container > .row,
.kpiHero .container > .row > [class*="col-"] {
    min-height: inherit;
}

.kpiHero .container > .row > [class*="col-"] {
    display: flex;
    align-items: center;
}

.kpiHeroContent {
    width: 100%;
}

.kpiBreadcrumb {
    position: absolute;
    top: 0;
    left: 12px;
    margin: 0;
}

.kpiBreadcrumb,
.kpiBreadcrumb ul li,
.kpiBreadcrumb a,
.kpiBreadcrumb span {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-white);
}

.kpiBreadcrumb ul li + li::before {
    color: rgba(255, 255, 255, 0.65);
}

.kpiBreadcrumb ul li:last-child span {
    color: var(--color-orange);
}

.kpiEyebrow {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--color-orange);
    text-transform: uppercase;
}

.kpiHero h1 {
    margin: 0;
    font-size: 36px;
    line-height: 48px;
    font-weight: 400;
    color: var(--color-white);
    text-transform: uppercase;
}

.kpiChartsSec {
    padding: 0 0 30px;
    background: var(--color-white);
}

.kpiPrimaryGrid,
.kpiAnalysisGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 40px;
}

.kpiChart {
    min-width: 0;
}

.kpiGraphImage {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(18px);
    transition: clip-path 1100ms cubic-bezier(.2,.75,.25,1), opacity 400ms ease, transform 900ms ease;
}

.kpiAssetChart.isVisible .kpiGraphImage {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
}

.kpiChartHead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 5px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--color-orange);
}

.kpiChartHead h2 {
    margin: 0;
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
    color: var(--color-orange);
}

.kpiChartHead h2 sup {
    font-size: 11px;
}

.kpiChartHead span {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 24px;
    color: #202020;
}

.kpiPlot {
    position: relative;
    min-height: 276px;
}

.kpiBars {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    height: 246px;
}

.kpiBarItem {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
}

.kpiValue {
    display: block;
    height: 28px;
    font-size: 16px;
    line-height: 22px;
    color: #151515;
    white-space: nowrap;
}

.kpiBarItem.isCurrent .kpiValue,
.kpiBarItem.isCurrent .kpiYear,
.kpiLineValue.isCurrent {
    font-weight: 700;
}

.kpiBarTrack {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 184px;
}

.kpiBarFill,
.kpiStack {
    display: block;
    width: 26px;
    height: var(--bar-height);
    background: #97999b;
    transform: scaleY(0);
    transform-origin: center bottom;
    transition: transform 950ms cubic-bezier(.2,.75,.25,1);
    transition-delay: 100ms;
}

.kpiBarItem:nth-child(2) .kpiBarFill,
.kpiBarItem:nth-child(2) .kpiStack { transition-delay: 180ms; }
.kpiBarItem:nth-child(3) .kpiBarFill,
.kpiBarItem:nth-child(3) .kpiStack { transition-delay: 260ms; }
.kpiBarItem:nth-child(4) .kpiBarFill,
.kpiBarItem:nth-child(4) .kpiStack { transition-delay: 340ms; }
.kpiBarItem:nth-child(5) .kpiBarFill,
.kpiBarItem:nth-child(5) .kpiStack { transition-delay: 420ms; }

.kpiChart.isVisible .kpiBarFill,
.kpiChart.isVisible .kpiStack {
    transform: scaleY(1);
}

.kpiBarItem.isCurrent .kpiBarFill {
    background: var(--color-orange);
}

.kpiYear {
    display: block;
    margin-top: 8px;
    font-size: 16px;
    line-height: 22px;
    color: #101010;
    white-space: nowrap;
}

.kpiLineOverlay {
    position: absolute;
    z-index: 3;
    top: 38px;
    left: 0;
    width: 100%;
    height: 180px;
    overflow: visible;
    pointer-events: none;
}

.kpiLinePath {
    fill: none;
    stroke: #079447;
    stroke-width: 2.25;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 1300ms ease 450ms;
}

.kpiLinePoint {
    fill: var(--color-white);
    stroke: #079447;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    transition: opacity 300ms ease 850ms;
}

.kpiChart.isVisible .kpiLinePath { stroke-dashoffset: 0; }
.kpiChart.isVisible .kpiLinePoint { opacity: 1; }

.kpiLineLabels {
    position: absolute;
    z-index: 4;
    top: 38px;
    left: 0;
    width: 100%;
    height: 180px;
    pointer-events: none;
}

.kpiLineValue {
    position: absolute;
    font-size: 16px;
    line-height: 20px;
    color: #151515;
    white-space: nowrap;
    opacity: 0;
    transform: translate(8px, -50%);
    transition: opacity 300ms ease 900ms;
}

.kpiChart.isVisible .kpiLineValue { opacity: 1; }

.kpiLegend {
    display: flex;
    position: relative;
    z-index: 5;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 18px;
}

.kpiLegend > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 16px;
    line-height: 22px;
    color: #202020;
}

.kpiLegendSquare {
    display: inline-block;
    width: 13px;
    height: 15px;
    background: #97999b;
}

.kpiLegendSquare.isOrange { background: var(--color-orange); }
.kpiLegendSquare.isGrey { background: #97999b; }

.kpiLegendSquare.isBars {
    border-left: 6px solid var(--color-orange);
    background: #97999b;
}

.kpiLegendLine {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 2px;
    background: #079447;
}

.kpiLegendLine::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border: 2px solid #079447;
    border-radius: 50%;
    background: var(--color-white);
    transform: translate(-50%, -50%);
}

.kpiNegativeChart .kpiBarTrack::before {
    content: "";
    position: absolute;
    top: 50px;
    left: 18%;
    right: 18%;
    height: 1px;
    background: #d8d8d8;
}

.kpiNegativeChart .kpiBarFill {
    position: absolute;
}

.kpiNegativeChart .kpiBarFill.isNegative {
    top: 50px;
    height: calc(var(--bar-height) * .72);
    transform-origin: center top;
}

.kpiNegativeChart .kpiBarFill.isPositive {
    bottom: 134px;
    height: calc(var(--bar-height) * .36);
}

.kpiStack {
    display: flex;
    flex-direction: column-reverse;
    background: transparent;
}

.kpiStackPart {
    position: relative;
    display: block;
    width: 100%;
}

.kpiStackFirst { background: var(--color-orange); }
.kpiStackSecond { background: #97999b; }

.kpiStackPart b {
    position: absolute;
    left: calc(100% + 7px);
    top: 50%;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: #171717;
    white-space: nowrap;
    transform: translateY(-50%);
}

.kpiBarItem.isCurrent .kpiStackPart b { font-weight: 700; }

.kpiAnalysisSec {
    padding: 0 0 30px;
    background: var(--color-white);
}

.kpiGroupTitle {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 38px;
    padding-bottom: 5px;
    border-bottom: 1px solid #a5a9ac;
    font-size: 25px;
    line-height: 32px;
    font-weight: 700;
    color: #0b3656;
}

.kpiGroupTitle span,
.kpiGroupTitle small {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #202020;
}

.kpiAnalysisGrid + .kpiGroupTitle {
    margin-top: 64px;
}

.kpiAnalysisGrid .kpiPlot {
    min-height: 292px;
}

.stakeholderValueSec {
    padding: 0 0 30px;
    background: var(--color-white);
}

.stakeholderTitle {
    margin: 0 0 30px;
    font-size: 24px;
    line-height: 34px;
    font-weight: 400;
    color: var(--color-orange);
    text-transform: uppercase;
}

.shareholderBlock {
    margin-bottom: 62px;
}

.stakeholderSubhead,
.stakeholderDetail h3 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 14px;
    font-size: 21px;
    line-height: 28px;
    font-weight: 700;
    color: #0b3656;
}

.stakeholderSubhead::after,
.stakeholderDetail h3::after {
    content: "";
    width: 100%;
    max-width: 800px;
    height: 1px;
    background: var(--color-orange);
}

.shareholderStats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 300px));
    gap: 28px 64px;
}

.stakeholderStat strong,
.stakeholderDetail strong {
    display: block;
    font-size: 30px;
    line-height: 40px;
    font-weight: 400;
    color: var(--color-orange);
}

.stakeholderStat strong small,
.stakeholderDetail strong small {
    font-size: 20px;
    font-weight: 400;
}

.stakeholderStat strong em,
.stakeholderDetail strong em {
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
}

.stakeholderStat p,
.stakeholderDetail p {
    margin: 0;
    font-size: 16px;
    line-height: 23px;
    color: #333333;
}

.stakeholderDetailGrid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr);
    gap: 36px;
    align-items: stretch;
}

.stakeholderDetailList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 42px;
    align-content: start;
}

.stakeholderDetail h3::after {
    max-width: none;
}

.stakeholderDetail strong {
    font-size: 30px;
    line-height: 40px;
}

.stakeholderImage {
    min-height: 430px;
    margin: 0;
    overflow: hidden;
}

.stakeholderImage img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
}

.kpiNotesSec {
    padding: 20px 0 0px;
    background: var(--color-white);
}

.kpiNotesSec p {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: #333333;
}

.kpiNotesSec p + p {
    margin-top: 2px;
}

.sr-only {
    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;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Unified photographic banner: page classes only supply artwork */
.innerBanner.kpiBanner {
    background-image: url(../images/key-performance/key-p-i-banner-img.webp);
}

.innerBanner:not(.plainBanner):not(.downloadCentreBanner) {
    min-height: calc(100vh - 96px);
    margin-bottom: 40px;
    padding: 20px 0 0;
}

.innerBanner:not(.plainBanner):not(.downloadCentreBanner) .bannerContent h1 {
    max-width: none;
    margin: 0;
    font-family: inherit;
    font-size: 36px;
    line-height: 48px;
    font-weight: 700;
    color: var(--color-white);
    text-transform: uppercase;
}

/*=========== Management Discussion & Analysis ===========*/
/* swap the banner artwork from this class */
.mdaBanner {
    background-image: url(../images/mda/img1.webp);
}

.mdaSec {
    padding: 0 0 30px;
}

.mdaHead {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--color-orange);
    margin: 0 0 16px;
}

.mdaSubHead {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    color: #333333;
    margin: 26px 0 12px;
}

.mdaSec p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-body-text);
    margin-bottom: 16px;
}

.mdaSec p b {
    color: #333333;
}

.mdaSec sub {
    font-size: 11px;
}

.mdaList {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.mdaList li {
    position: relative;
    padding: 0 0 12px 22px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-body-text);
}

.mdaList li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 20px;
    background: var(--color-body-text);
}

.mdaList li b {
    color: #333333;
}

/*--- Pull quote ---*/
.mdaQuote {
    margin: 26px 0;
    padding: 4px 0 4px 20px;
    border-left: 4px solid var(--color-orange);
}

.mdaQuote p {
    font-size: 18px;
    line-height: 28px;
    color: var(--color-orange);
    margin-bottom: 0;
}

/*--- Imagery ---*/
.mdaImg {
    margin: 10px 0 26px;
}

.mdaImg img {
    display: block;
    width: 100%;
    height: auto;
}

.mdaImgCap {
    position: relative;
}

.mdaImgCap .imgCap {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 10px 18px;
    background: rgba(0, 0, 0, 0.55);
    color: var(--color-white);
    font-size: 14px;
    line-height: 20px;
}

/*--- Sources ---*/
.mdaSource {
    margin: 22px 0 6px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.mdaSource .srcTitle {
    display: block;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 6px;
}

.mdaSource .srcSub {
    display: block;
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    color: #333333;
    margin: 8px 0 4px;
}

.mdaSource ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mdaSource li {
    font-size: 14px;
    line-height: 22px;
    color: #555555;
    word-break: break-word;
}

.mdaSource a {
    font-size: 14px;
    color: #555555;
    transition: color 0.35s var(--ease-out);
}

.mdaSource a:hover {
    color: var(--color-orange);
}

/*=========== Charts ===========*/
.chartCard {
    margin: 26px 0 30px;
    padding: 24px 24px 18px;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.chartTitle {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 16px;
}

.chartLegend {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-bottom: 20px;
}

.lgItem {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    color: #555555;
}

.lgKey {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

/* plot area : columns share one baseline */
.barChart {
    display: flex;
    align-items: flex-end;
    gap: 26px;
    height: 300px;
    padding-top: 26px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

.barCol {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    flex: 1 1 0;
    height: 100%;
}

.barTotal {
    display: block;
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 6px;
}

/* the stack itself : segments run bottom-up with a 2px surface gap */
.barStack {
    display: flex;
    flex-direction: column-reverse;
    gap: 0px;
    width: 100%;
    max-width: 92px;
}

.barSeg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    border-radius: 0;
}

.barSeg em {
    font-style: normal;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: #333333;
}

/* white reads better on the saturated orange band */
.segOrange em {
    color: var(--color-white);
}

/* report palette : dark orange for the lower band, light tint for the upper,
   grey for the historic single-series bars */
.segOrange {
    background: #f47d20;
}

.segLight {
    background: #f9c08a;
}

.segGrey {
    background: #a6a6a6;
}

.segBlue {
    background: #2f7fb5;
}

.barYear {
    display: block;
    padding-top: 10px;
    font-size: 14px;
    line-height: 20px;
    color: #555555;
}

.chartNote {
    font-size: 13px !important;
    line-height: 20px !important;
    color: #666666 !important;
    margin: 14px 0 0 !important;
}

/*=========== Financial table ===========*/
.mdaTableWrap {
    margin: 20px 0 22px;
    overflow-x: auto;
}

.tableUnit {
    display: block;
    text-align: right;
    font-size: 14px;
    line-height: 22px;
    color: #555555;
    margin-bottom: 6px;
}

.mdaTable {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    border-bottom: 2px solid var(--color-orange);
}

.mdaTable th,
.mdaTable td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-body-text);
    text-align: right;
}

.mdaTable th:first-child,
.mdaTable td:first-child {
    text-align: left;
}

.mdaTable thead th {
    border-bottom: 2px solid var(--color-orange);
    font-weight: 700;
}

.mdaTable tbody tr.rowBold td {
    font-weight: 700;
}

/* the reporting-year column is tinted top to bottom, header included */
.mdaTable th:nth-child(2),
.mdaTable td:nth-child(2) {
    background: #fdf1e6;
}

/*=========== Go to chapter button ===========*/
.chapterBtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 50%;
    margin-top: 10px;
    padding: 18px 26px;
    border: 1px solid var(--color-orange);
    color: var(--color-orange);
    font-size: 16px;
    line-height: 24px;
    transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out);
}

.chapterBtn .chapterArrow img {
    display: block;
    width: 26px;
    height: auto;
    transition: transform 0.4s var(--ease-out);
}

.chapterBtn:hover {
    background: var(--color-orange);
    color: var(--color-white);
}

/* the arrow is an svg file, so flip it to white on the orange fill */
.chapterBtn:hover .chapterArrow img {
    transform: translateX(6px);
    filter: brightness(0) invert(1);
}


/*=====================================================================
   Sustainable Development
   Three pillars walked by the scroll: the copy on the left, the icons
   down the middle, the photograph on the right. The stage is held at
   the top of a track one screen tall per pillar.
=====================================================================*/





/* --- the track --- */




/* --- the copy --- */
/* the three panels share one grid cell so the column holds one height as
   they change; without that, the icons and the photograph beside them
   would shift every time a longer pillar came up */





/* the rule under the title is the same orange mark the report uses to
   open a pillar, and it draws itself as the pillar arrives */



/* --- the icons --- */







/* the label is for the screen reader and for the keyboard ring; the rail
   reads as icons alone */

/* --- the photographs --- */

/* One path, three positions: waiting at the bottom right, held in the
   frame, gone at the top right. A photograph leaving and the one after
   it arriving are the same rule at different points, which is what keeps
   the two halves of the change in step. */





/*=====================================================================
   Section "Read More"
   Each section on this page has a chapter of its own behind it; this is
   the way through to it.

   Scoped to .secCta throughout: .readMore already belongs to the inside
   pages, where it is an italic text link with an icon file beside it.
   Restyling that class outright would restyle every one of them, so the
   pill treatment is only ever applied inside this wrapper.
=====================================================================*/
.secCta {
    margin-top: clamp(24px, 2.6vw, 44px);
}

.secCta .readMore {
    display: inline-flex;
    align-items: center;
    gap: clamp(10px, 1vw, 16px);
    padding: clamp(10px, 0.9vw, 15px) clamp(18px, 1.6vw, 28px);
    border: 1px solid var(--color-heading);
    border-radius: 999px;
    font-family: var(--font-cond);
    font-size: clamp(12px, 0.62rem + 0.28vw, 15px);
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--color-heading);
    background: none;
    transition:
        background 0.35s var(--ease-out),
        color 0.35s var(--ease-out),
        border-color 0.35s var(--ease-out);
}

.secCta .readMore__arrow {
    display: block;
    width: clamp(15px, 1.2vw, 19px);
    height: clamp(15px, 1.2vw, 19px);
    transition: transform 0.35s var(--ease-out);
}

.secCta .readMore__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

.secCta .readMore:hover,
.secCta .readMore:focus-visible {
    background: var(--color-heading);
    color: #ffffff;
}

.secCta .readMore:hover .readMore__arrow,
.secCta .readMore:focus-visible .readMore__arrow {
    transform: translateX(4px);
}

/* --- on the dark and photographic grounds ---
   Orange on navy is legible, but orange on a photograph is not reliably
   so; on those the button is drawn in white and takes the orange only
   on hover, where it has a solid fill behind it. */
.secCta--light .readMore,
.secCta--onDark .readMore {
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
}

.secCta--light .readMore:hover,
.secCta--light .readMore:focus-visible,
.secCta--onDark .readMore:hover,
.secCta--onDark .readMore:focus-visible {
    background: var(--color-heading);
    border-color: var(--color-heading);
    color: #ffffff;
}

/* the performance board and the chart deck are centred, so their
   button is centred under them rather than hanging off the left */
.perf .secCta,
.kpi .secCta {
    text-align: center;
}

/* out on the grey ground now rather than on the navy board, so the
   button goes back to the orange it takes everywhere else on a light
   ground — and it needs its own clearance from the foot of the board */
.perf .secCta {
    margin-top: clamp(20px, 2.2vw, 36px);
}

/* Inside a card the button has to earn its room: the card is a fixed
   height and its content already fills it, so this takes the space the
   list gives back rather than adding to the stack. */
.secCta--inCard {
    margin-top: auto;
    padding-top: clamp(14px, 1.4vw, 22px);
}

.secCta--inCard .readMore {
    padding: clamp(8px, 0.7vw, 12px) clamp(14px, 1.3vw, 22px);
    font-size: clamp(11px, 0.58rem + 0.22vw, 13px);
}

/* inside the leadership panel the button follows the attribution, which
   already sits hard against the foot of the board */
.leadPanel .secCta {
    margin-top: clamp(16px, 1.6vw, 26px);
}

/* the R&D button is the last thing on a held screen, so it is given its
   own clearance rather than relying on the padding at the foot of the
   frame — which the copy above it can eat into as the panel grows */
.rnd .secCta {
    margin-bottom: 40px;
}

/* .sr-only already exists further up this file, set by the inside
   pages; the label these buttons carry for the screen reader uses that
   one rather than a second copy of it. */


/*=====================================================================
   Section headings — one setting for all of them
   36px / 500 / black, with the second line no longer picked out in
   orange: the whole heading is one colour now.

   Written once, after the section blocks, so a heading cannot drift by
   being retuned in its own section and nowhere else.
=====================================================================*/
.coreCap__title,
.offerings__title,
.rnd__title,
.dgx__title,
.perf__title,
.kpi__title,
.sd__title,
.sectionTitle {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.2;
    color: #000000;
}

/* the em is the second line of the heading, not an accent: it keeps the
   line break it gives but takes the same weight and colour as the first */
.coreCap__title em,
.offerings__title em,
.rnd__title em,
.dgx__title em,
.perf__title em,
.kpi__title em,
.sd__title em {
    display: block;
    font-style: normal;
    font-weight: 500;
    color: inherit;
}

/* R&D and Sustainable Development are the exceptions, and only on the
   colour: both headings sit on a photograph or on navy, where black is
   not readable. They take the same 36px / 500 and the same single
   colour — white — rather than the orange second line. */
.rnd__title,
.dgx__title,
.sd__title {
    color: #ffffff;
}



/* R&D runs its heading on one line: the em goes inline and the head
   gives up the measure that was breaking it. Digital Capabilities takes
   the same setting, since the two headings are written the same way. */
.rnd__head {
    max-width: none;
}

.rnd__title em,
.dgx__title em {
    display: inline;
}

/* Corporate Overview runs its heading on one line too. The measure
   goes with it: 15em was set for a 60px heading, and at 36px it stops
   the line about one word short. */
.coreCap__title {
    max-width: none;
}

.coreCap__title em {
    display: inline;
}

/* Performance Highlights runs its heading on one line: the em marks
   where the second half begins, it does not start a new line. */
.perf__title em {
    display: inline;
}

/* The Landscape heading keeps its orange, where the rest of the page
   sets them black. Written after the blanket rule rather than as an
   exception inside it, so the one place that differs is visible as a
   difference. */
.sectionTitle {
    color: var(--color-heading);
}

/* The Landscape button sits inside the panel over the photograph, not
   on the photograph itself, so it is drawn in black like the copy
   around it rather than in the white a dark ground would need. */
.landscape .secCta .readMore {
    border-color: #000000;
    color: #000000;
}

.landscape .secCta .readMore:hover,
.landscape .secCta .readMore:focus-visible {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
}

/*--- MD&A : three charts on one line ---*/
.chartRow {
    margin-bottom: 10px;
}

.chartRow .chartCard {
    height: 100%;
    margin: 0 0 24px;
    padding: 20px 16px 14px;
}

.chartRow .chartTitle {
    font-size: 14px;
    line-height: 20px;
    min-height: 60px;
}

.chartRow .chartLegend {
    gap: 14px;
    margin-bottom: 14px;
}

.chartRow .lgItem {
    font-size: 13px;
}

.chartRow .barChart {
    gap: 8px;
    height: 265px;
    padding-top: 22px;
}

.chartRow .barStack {
    max-width: 46px;
}

.chartRow .barSeg em {
    font-size: 11px;
}

.chartRow .barTotal {
    font-size: 13px;
    line-height: 18px;
}

.chartRow .barYear {
    font-size: 12px;
}

/* the fuel-type graphic keeps to a readable width */
.chartImg img {
    width: 100%;
    max-width: 550px;
    height: auto;
}

/*--- chart legend sits under the plot, as printed in the report ---*/
.chartCard .barChart + .chartLegend {
    justify-content: center;
    margin: 16px 0 0;
}

.chartCard .lgKey {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.chartTitle {
    color: #4a5257;
}

.barTotal {
    color: #222222;
}
.mttop0out{
    margin-top: 0;
}
.mtbtm0chart{
    margin-bottom: 0;
}
.mttoppdtopbrd0{
    margin-top: 0;
    padding-top: 0;
    border: none;
}

/* the small cap the report prints on top of the first three columns */
.barCap {
    min-height: 0;
}


/*=====================================================================
   Leadership deck
   The two messages are stacked the way the offerings cards are: equal
   screen-tall frames stuck at the same offset, so each one rises to
   cover the one before it while that one scales back, blurs and dims.

   Equal frames matter — sized to their own content the two differed by
   a couple of hundred pixels, and the mismatch shows as one takes over
   from the other.
=====================================================================*/
.leadDeck {
    position: relative;
}

/* The spare screen the last message holds on.

   A sticky child travels inside its container's CONTENT box, so padding
   on the deck buys it nothing — the card is released at the end of its
   own 100vh and the padding is left below as blank page. An element in
   the flow does extend the content box, so the card stays stuck over
   this one and the space is never seen. */
.leadDeck__tail {
    height: 100vh;
    height: 100dvh;
}

.leadCard {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    /* clipped, not visible: the card is only as tall as the screen, and
       the next section sits under it in the stacking order — anything
       allowed to spill out of the frame paints over Performance
       Highlights instead of being cut off at the card's edge */
    overflow: hidden;
    /* the later message has to paint over the earlier one as it rises */
    z-index: calc(var(--i) + 1);
}

.leadCard__scale {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: stretch;
    /* 50px of the frame is kept clear at the top and the foot, so the
       card never runs edge to edge into the sections either side of the
       deck. The panel takes what is left, so this shortens the card
       rather than pushing it past the frame. */
    padding: 50px 0;
    transform-origin: center center;
    will-change: transform, filter, opacity;
}

.leadCard__scale > .container {
    width: 100%;
}

/* held on one screen, the panel takes the height it is given rather than
   the floor it needed as a section in normal flow */

/* auto over 1fr: the heading takes what it needs at the top, the slack
   collects in the middle, and the quote sits on the floor. With both
   rows auto and the content packed to the end, a tall portrait pushed
   the whole grid up out of the frame. */
/* The two rows of copy are centred against the portrait as one group:
   auto rows so each takes only what it needs, then align-content:center
   to place the pair in the middle of the frame. The portrait keeps
   spanning both rows and standing on the floor, so centring the copy
   does not lift it. */


.leadCard .leadPanel__title {
    font-size: clamp(22px, 1rem + 0.9vw, 30px);
    line-height: 1.15;
}


/* 70px kept clear at the foot of the copy column, always */

/* and the portrait takes it back, so the cut-out is still grounded */


/* the cut-out can never be taller than the frame it stands in, whatever
   the tier asks for */
.leadCard .leadPanel__grid > * {
    min-height: 0;
    min-width: 0;
}


.leadCard .leadPanel__figure img {
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: bottom left;
}

/* What the card asks for, trimmed to what a held screen can give.

   The frame is one screen and cannot grow — that is what buys each
   message its screen of scroll — so when the heading and the portrait
   were being cut at the top it was the content overflowing upward, not
   the frame being short. Everything below is spacing rather than
   content: the quote, the attribution and the button are all still
   whole, they simply sit closer together.

   Scoped to .leadCard so the same panel on any other layout keeps its
   roomier setting. */


.leadCard .leadPanel__card {
    margin-bottom: clamp(10px, 1vw, 16px);
    padding: clamp(16px, 1.6vw, 24px) clamp(18px, 1.8vw, 26px) clamp(16px, 1.6vw, 24px) clamp(20px, 2vw, 28px);
}

.leadCard .leadPanel__cardRule {
    margin-bottom: clamp(12px, 1.2vw, 18px);
}

/* The floor of this was 10px, which at tablet widths put the top of the
   pill within a few pixels of the designation's descenders — close
   enough that the two read as one block rather than as a line of type
   and a control under it. The pill has its own border, so it needs more
   clearance than plain copy would. */
.leadCard .leadPanel .secCta {
    margin-top: clamp(18px, 1.6vw, 26px);
}

/* the heading sits directly over the box it heads, so its own line is
   the only gap between them */



/*=====================================================================
   Our Offerings — tiles and field projects
   The three offerings are named and iconed only; the detail behind each
   is the inside page's job. The field projects are given in full.
=====================================================================*/

/* --- the three offerings --- */









/* --- the field projects --- */
.offerProjects {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 1.2vw, 20px);
}

/* the last row holds a single item, so it runs the full width rather
   than leaving an odd empty cell beside it */
.offerProject:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}


/*=====================================================================
   Corporate Overview — the rail
   The five statements hang off a rail that fills with the section's own
   scroll, and each marker lights as its statement is reached. The list
   then reads as progress through a claim rather than as five rows that
   happen to fade in one after another.
=====================================================================*/
.capTrack {
    position: relative;
    /* the rail sits in this gutter, and every row is indented past it */
    padding-left: clamp(26px, 2.4vw, 44px);
}

.capRail {
    position: absolute;
    left: 0;
    /* stops half a marker short at each end so the line runs between the
       first and last markers rather than past them */
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: rgba(11, 53, 84, 0.14);
    overflow: hidden;
}

.capRail__fill {
    display: block;
    width: 100%;
    height: 0;
    background: var(--color-heading);
    /* eased rather than linear: the fill is driven per frame from script,
       and a short transition smooths the step between frames without
       lagging behind the scroll */
    transition: height 0.15s linear;
}

.capList {
    list-style: none;
    margin: 0;
    padding: 0;
}

.capList__item {
    position: relative;
    padding: clamp(14px, 1rem + 0.6vw, 22px) 0 clamp(14px, 1rem + 0.6vw, 22px) clamp(14px, 1.2vw, 22px);
    /* the row arrives from the rail rather than from nowhere */
    opacity: 0;
    transform: translateX(18px);
    transition:
        opacity 0.55s var(--ease-out),
        transform 0.55s var(--ease-out);
}

/* without JS, or with reduced motion, every row is simply on the page */
.reveal-off .capList__item {
    opacity: 1;
    transform: none;
}

.capList__item.is-reached {
    opacity: 1;
    transform: none;
}

.capList__item + .capList__item {
    border-top: 1px solid rgba(11, 53, 84, 0.1);
}

/* the marker sits ON the rail, not beside it: it is pulled back out of
   the row's indent by exactly the gutter it was given */
.capList__dot {
    position: absolute;
    left: calc(-1 * clamp(26px, 2.4vw, 44px) - 5px);
    top: calc(clamp(14px, 1rem + 0.6vw, 22px) + 0.55em);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f3f6f8;
    border: 2px solid rgba(11, 53, 84, 0.2);
    transition:
        background 0.4s var(--ease-out),
        border-color 0.4s var(--ease-out),
        transform 0.4s var(--ease-out);
}

.capList__item.is-reached .capList__dot {
    background: var(--color-heading);
    border-color: var(--color-heading);
    transform: scale(1.25);
}

.capList__text {
    font-size: clamp(14px, 0.8rem + 0.34vw, 18px);
    line-height: 1.55;
    color: #000000;
    margin-bottom: 0;
    transition: color 0.4s var(--ease-out);
}

.capList__item:hover .capList__text {
    color: var(--color-intro);
}


/*=====================================================================
   Sustainable Development — the dealt stack
   One screen held while the section is scrolled through. The first
   pillar is on the table; the others are waiting off the right edge and
   slide in over it, each landing a little further right so the ones
   behind still show at their left edge.
=====================================================================*/
.sd {
    position: relative;
    background: var(--color-intro);
    color: #ffffff;
    /* clip, NOT hidden: hidden on an ancestor makes it the scroll
       container for the sticky inside it, and a container that does not
       scroll gives a sticky child nothing to stick against */
    overflow-x: clip;
}

.sd__track {
    --sd-cards: 3;
    position: relative;
    /* one screen to read each card on, plus the screen the first is
       shown on before anything moves */
    height: calc(var(--sd-cards) * 100vh);
}

.sd__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    padding: 60px 0;
}

.sd__pin > .container {
    width: 100%;
}

.sd__head {
    max-width: 760px;
    margin-bottom: 0;
}

.sd__title {
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: clamp(10px, 1.2vw, 18px);
}

/* one line, one colour: the em only marks where the second half of the
   heading begins, it is not an accent here */
.sd__title em {
    display: inline;
    font-style: normal;
    font-weight: inherit;
    color: inherit;
}

/* --- the stack --- */
/* The stack takes whatever the held screen has left once the heading,
   the intro and the button are off it — about 380px of chrome. Stated
   as one expression rather than a height plus a short-screen override:
   the two always drifted apart, and the override was still sized for
   cards a third shorter than these. */
.sd__stack {
    position: relative;
    /* taller now that every card carries its own button: the chrome
       around the stack is unchanged, so this asks for more of the held
       screen rather than the same amount split differently */
    height: clamp(460px, calc(100vh - 300px), 620px);
    /* the only spacing between the cards and what sits either side */
    margin: 30px 0;
}

/* Every card is laid on the same spot and stepped right by its index,
   so the ones already dealt keep a sliver showing at the left. The
   later card has to paint over the earlier one, hence the z-index. */
/* the phone's controls for the card set; the dealt stack is its own
   control, so these are shown only where the deal is dropped */
.sdNav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
}

.sdNav__arrow {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}

.sdNav__arrow svg {
    width: 45%;
    height: 45%;
}

/* at the ends there is nowhere to go, and the arrow says so rather than
   quietly doing nothing */
.sdNav__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

.sdNav__dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sdNav__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition:
        width 0.35s var(--ease-out),
        background 0.35s var(--ease-out);
}

/* the open one is a bar rather than a bigger dot, so the row keeps one
   height and only the mark changes */
.sdNav__dot.is-active {
    width: 26px;
    border-radius: 999px;
    background: var(--color-heading);
}

.sdDeal {
    position: absolute;
    top: 0;
    left: calc(var(--i) * clamp(16px, 2vw, 34px));
    right: 0;
    height: 100%;
    border-radius: clamp(14px, 1.4vw, 22px);
    overflow: hidden;
    background: var(--color-intro);
    border: 1px solid rgba(255, 255, 255, 0.28);
    z-index: calc(var(--i) + 1);
    /* the cards after the first wait off the right edge; the script
       brings them in. 110% of their own width clears the viewport
       whatever the screen. */
    will-change: transform;
}

.sdDeal__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% center;
}

/* the copy sits at the foot of the card, so the ground is darkest there
   and eases off towards the top */
.sdDeal__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(11, 53, 84, 0.88) 0%, rgba(11, 53, 84, 0.42) 42%, rgba(11, 53, 84, 0.04) 100%);
}

.sdDeal__body {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: clamp(12px, 1.4vw, 20px);
    padding: clamp(22px, 2.4vw, 44px);
    max-width: 720px;
}

/* the icon rides with the heading rather than sitting alone at the top
   of the card: on a photograph a lone disc reads as a sticker */
.sdDeal__head {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.2vw, 20px);
}

.sdDeal__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: clamp(48px, 4.2vw, 64px);
    height: clamp(48px, 4.2vw, 64px);
    border-radius: 50%;
    background: var(--color-cream);
}

.sdDeal__icon img {
    width: 55%;
    height: 55%;
    object-fit: contain;
    /* the icons are drawn two-tone for a white page; on the orange disc
       they have to be one flat colour */
    /* filter: brightness(0) invert(1); */
}

.sdDeal__title {
    flex: 1 1 auto;
    font-family: var(--font-cond);
    font-size: clamp(20px, 0.9rem + 1.1vw, 32px);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0;
}

.sdDeal__copy {
    font-size: clamp(13.5px, 0.72rem + 0.3vw, 17px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0;
    max-width: 560px;
}

/* the way out of each pillar sits in its own card, so the button is
   part of the copy stack rather than one control under all three */
.sdDeal .secCta {
    margin-top: clamp(14px, 1.6vw, 22px);
}


/* the button is the last thing on a held screen, so it carries its own
   clearance rather than relying on the padding at the foot of the pin */
.sd .secCta {
    margin-top: 0;
    margin-bottom: 0;
}

/*=====================================================================
   Leadership cards — what the held frame changes
   One rule per selector, all in one place: these were spread over three
   parts of the file and had begun to override each other.
=====================================================================*/
.leadCard .leadPanel__grid {
    height: 100%;
    /* An empty flexible row at each end does the centring that
       align-content used to do, and the copy sits in the two middle
       rows. The difference is that the rows now fill the panel, so the
       portrait — which spans all four — can stand on its floor instead
       of on the floor of the centred copy. The flexible rows are
       minmax(0, 1fr) so they collapse rather than overflow when the copy
       is taller than the panel, which is what the safe centring they
       replace was guarding against. */
    grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
    padding-top: clamp(16px, 1.6vw, 28px);
    align-content: stretch;
}

.leadCard .leadPanel__aside {
    grid-row: 3;
    align-self: start;
    margin-bottom: clamp(14px, 1.4vw, 26px);
    margin-top: 12px;
}

.leadCard .leadPanel__figure {
    /* every row, so the cut-out stands on the floor of the panel */
    grid-row: 1 / -1;
    align-self: stretch;
    min-height: 0;
    overflow: hidden;
}

.leadCard .leadPanel__body {
    grid-row: 2;
    align-self: end;
    padding-bottom: clamp(6px, 0.6vw, 10px);
}

.leadCard .leadPanel {
    min-height: 0;
    height: 100%;
    max-height: 100%;
}


/*=====================================================================
   Hero — three acts on one held screen
   Act 1  the film runs, the tagline swaps word over word
   Act 2  the words recede, a navy wash closes over the film
   Act 3  the statement builds line by line, then the hold releases

   The hold is CSS sticky, as everywhere else on this page. A GSAP pin
   would insert a pin-spacer at the very top of the document and every
   trigger below it would have to be re-measured in the right order —
   the reference needs a refreshPriority and two refresh passes to keep
   that straight. Sticky needs neither.
=====================================================================*/
.hero {
    position: relative;
    background: #05121f;
    /* clip, NOT hidden: hidden on an ancestor makes it the scroll
       container for the sticky inside it, and the hold never happens */
    overflow-x: clip;
}

.hero__track {
    position: relative;
}

.hero__pin {
    position: relative;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero__asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% center;
    display: block;
}

/* two stills, one per cut: the tall one is for phones only */
.hero__asset--mobile {
    display: none;
}

.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(to right, rgba(5, 18, 31, 0.42) 0%, rgba(5, 18, 31, 0.16) 45%, rgba(5, 18, 31, 0) 75%),
        linear-gradient(to top, rgba(5, 18, 31, 0.3) 0%, rgba(5, 18, 31, 0) 45%);
}

.hero__inner {
    position: relative;
    z-index: 4;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* the copy column: the eyebrow and the tagline stack in it, and the
   tiers below set how wide it is allowed to run */
.hero__content {
    max-width: 900px;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-cond);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-heading);
    margin-bottom: clamp(14px, 1rem + 0.6vw, 24px);
}

.hero__eyebrow::before {
    content: "";
    width: clamp(24px, 2vw, 44px);
    height: 2px;
    margin-right: 14px;
    background: var(--color-heading);
}

/* --- the tagline ---
   One cell, three words. Each rides up out of it as the next rides in,
   so the line holds one height and one baseline throughout. */
.heroTag {
    display: block;
    margin-bottom: 0;
    line-height: 1;
}

.heroTag__line {
    display: block;
    padding: 0.03em 0;
}

.heroTag__word {
    display: block;
    font-family: var(--font-body);
    font-size: 80px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #ffffff;
}

/* the third word is the one the report sets in green */
.heroTag__line[data-word="1"] .heroTag__word {
    color: var(--color-heading);
}

.heroTag__line[data-word="2"] .heroTag__word {
    color: var(--color-green);
}






/* --- the scroll cue --- */
.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: clamp(20px, 3vh, 40px);
    z-index: 5;
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: var(--font-cond);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.hero__scrollLine {
    position: relative;
    display: block;
    width: 1px;
    height: 54px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.28);
}

.hero__scrollLine i {
    position: absolute;
    left: 0;
    top: -60%;
    width: 100%;
    height: 60%;
    background: var(--color-heading);
    animation: heroScrollCue 1.8s ease-in-out infinite;
}

@keyframes heroScrollCue {
    0% { top: -60%; }
    100% { top: 100%; }
}


/*=====================================================================
   Our Offerings — two boards on one stage
   The three offerings on the first, the field projects on the second.
   Same strip as Performance Highlights: one block slides between the
   tabs and is drawn as the front edge of its board.
=====================================================================*/
.offerings__tabs {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: clamp(28px, 3.4vw, 66px);
    margin-top: 0;
    /* pulls the strip onto the board so no seam shows at the join */
    margin-bottom: -2px;
}

.offerings__ind {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    height: 100%;
    background: #f3f6f8;
    transition:
        transform 0.55s cubic-bezier(0.77, 0, 0.18, 1),
        width 0.55s cubic-bezier(0.77, 0, 0.18, 1);
}

.offerings__indWing {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: auto;
}

.offerings__indWing path {
    fill: #f3f6f8;
}

.offerings__indWing--l {
    right: 98%;
}

.offerings__indWing--r {
    left: 98%;
}

/* at either end of the strip the outer wing has nothing to curve into,
   so it is dropped and the block turns its own corner instead */
.offerings__ind.is-first {
    border-top-left-radius: clamp(10px, 0.9vw, 16px);
}

.offerings__ind.is-first .offerings__indWing--l {
    display: none;
}

.offerings__ind.is-last {
    border-top-right-radius: clamp(10px, 0.9vw, 16px);
}

.offerings__ind.is-last .offerings__indWing--r {
    display: none;
}

.offerTab {
    position: relative;
    z-index: 1;
    padding: clamp(13px, 1.05vw, 18px) 4px;
    border: 0;
    background: none;
    font-family: var(--font-cond);
    font-size: clamp(12px, 0.62rem + 0.38vw, 17px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.25;
    white-space: nowrap;
    color: var(--color-intro);
    cursor: pointer;
    transition: color 0.25s var(--ease-out);
}

.offerTab:first-of-type {
    padding-left: 14px;
}

.offerTab:last-of-type {
    padding-right: 14px;
}

.offerTab:not(.is-active):hover,
.offerTab:not(.is-active):focus-visible {
    color: var(--color-heading);
}

.offerTab.is-active {
    color: var(--color-intro);
}

/* --- the boards --- */
/* The phone's board picker. Hidden here rather than in the phone tier so
   that the strip stays the default and this is the exception, which is
   the way round the two are used. */
.offerings__pick {
    display: none;
}

.offerings__select {
    width: 100%;
    padding: 13px 42px 13px 16px;
    border: 1px solid rgba(11, 53, 84, 0.28);
    border-radius: 10px;
    background-color: #ffffff;
    /* the arrow is drawn rather than fetched: one more request for a
       chevron is not worth making, and this one takes the text colour */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b3554' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px 18px;
    font-family: var(--font-cond);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-intro);
    /* the native control is 40px tall on iOS and cannot be styled; this
       is what lets the box above apply */
    -webkit-appearance: none;
    appearance: none;
}

.offerings__select:focus-visible {
    outline: 2px solid var(--color-heading);
    outline-offset: 2px;
}

.offerings__stage {
    position: relative;
    z-index: 1;
    display: grid;
    /* One column that cannot be widened by what is in it. Both panels
       share this cell, and one of them holds the slider track — which is
       300% wide by design, three cards side by side. An auto column is
       sized to its content, so that 300% was setting the width of the
       stage itself, and the card inside was being laid out against a
       measure wider than the screen. minmax(0, 1fr) is the column
       refusing to grow past its share. */
    grid-template-columns: minmax(0, 1fr);
    border-radius: clamp(12px, 1.1vw, 20px);
    /* squared off under the block while it is at the left end, where the
       block is turning that corner itself */
    border-top-left-radius: var(--offer-tl, clamp(12px, 1.1vw, 20px));
    background: #f3f6f8;
}

.offerPanel {
    grid-area: 1 / 1;
    /* a grid item's automatic minimum is its content, so without this the
       panel hands the track's width back to the column above */
    min-width: 0;
    padding: clamp(24px, 2.4vw, 46px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition:
        opacity 0.45s var(--ease-out),
        transform 0.45s var(--ease-out),
        visibility 0s linear 0.45s;
}

.offerPanel.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
        opacity 0.45s var(--ease-out),
        transform 0.45s var(--ease-out),
        visibility 0s linear 0s;
}

/* the panels share one grid cell so the stage holds one height as the
   boards change; display:none would collapse it mid-change */
.offerPanel[hidden] {
    display: block;
}

/* --- the three offerings --- */
/* No card of its own: the grey stage around it IS the surface, so the
   white fill, the rim and the corners come off together and the copy
   sits straight on the grey. The side padding goes with them — the
   stage already holds the content clear of its own edges — and only
   the vertical rhythm between the head and the columns is kept. */
.offerCard {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: none;
    border: 0;
}

.offerCard__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(12px, 1.2vw, 20px);
    padding-bottom: clamp(12px, 0.7rem + 0.5vw, 20px);
    margin-bottom: clamp(14px, 0.8rem + 0.6vw, 24px);
    border-bottom: 1px solid rgba(11, 53, 84, 0.14);
}

.offerCard__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(58px, 4.6vw, 78px);
    height: clamp(58px, 4.6vw, 78px);
    border-radius: 50%;
    border: 1.5px solid rgba(244, 125, 32, 0.55);
    background: rgba(244, 125, 32, 0.07);
    color: var(--color-heading);
}

.offerCard__icon img {
    width: 76%;
    height: 76%;
    object-fit: contain;
    display: block;
}

.offerCard__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(18px, 0.82rem + 1vw, 30px);
    line-height: 1.15;
    font-weight: 700;
    color: var(--color-intro);
    margin-bottom: 0;
}

.offerCard__index {
    flex: 0 0 auto;
    font-family: var(--font-cond);
    font-size: clamp(24px, 1rem + 1.4vw, 42px);
    font-weight: 700;
    line-height: 1;
    color: rgba(11, 53, 84, 0.16);
}

.offerCard__badge {
    flex: 0 0 auto;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid rgba(11, 53, 84, 0.28);
    font-family: var(--font-cond);
    font-size: clamp(10px, 0.6rem + 0.16vw, 12px);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-intro);
}

.offerCard__body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 34px;
}

.offerCard__body > .offerCol {
    min-width: 0;
}

.offerCard__title,
.offerCol__head,
.offerBlock__name,
.offerBlock__meta,
.offerList__name,
.offerList__meta,
.offerCard__note {
    overflow-wrap: break-word;
}

/* the variant strings are the only ones long enough to need breaking
   mid-run; anywhere is too eager for ordinary copy */
.offerBlock__meta,
.offerList__meta {
    overflow-wrap: anywhere;
}

/* the vertical rule between the two halves, as on the printed page */
.offerCard__body > .offerCol + .offerCol {
    padding-left: 34px;
    border-left: 1px solid rgba(11, 53, 84, 0.14);
}

/* the same 200px window as the lists, wrapped around the entries so
   the head above them stays where it is without being made sticky */
.offerCol__scroll {
    margin-bottom: clamp(12px, 1.2vw, 18px);
    padding-right: 12px;
    max-height: 150px;
    overflow-y: auto;
   
    overscroll-behavior: contain;
}

.offerCol__scroll::-webkit-scrollbar {
    width: 6px;
}

.offerCol__scroll::-webkit-scrollbar-track {
    background: rgba(11, 53, 84, 0.08);
    border-radius: 999px;
}

.offerCol__scroll::-webkit-scrollbar-thumb {
    background: rgba(11, 53, 84, 0.55);
    border-radius: 999px;
}

.offerCol__scroll::-webkit-scrollbar-thumb:hover {
    background: var(--color-intro);
}

.offerCol__head {
    font-family: var(--font-cond);
    font-size: 18px;
    font-weight: 700;
    /* letter-spacing: 0.16em; */
    /* text-transform: uppercase; */
    color: var(--color-heading);
    margin-bottom: clamp(10px, 0.6rem + 0.4vw, 15px);
}

.offerBlock {
    margin-bottom: clamp(13px, 0.8rem + 0.5vw, 20px);
}

.offerBlock:last-child {
    margin-bottom: 0;
}

.offerBlock__name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-heading);
    margin-bottom: 5px;
}

.offerBlock__meta,
.offerList__meta {
    font-size: 16px;
    line-height: 1.55;
    color: #000000;
}

/* the printed page separates variants with a thin orange pipe */
.offerBlock__meta i,
.offerList__meta i {
    font-style: normal;
    padding: 0 3px;
    color: var(--color-heading);
}

.offerList {
    list-style: none;
    /* clear of whatever rules off the foot of the card */
    margin: 0 0 clamp(12px, 1.2vw, 18px);
    padding: 0;
    /* room for the bar, so it never sits on top of the text */
    padding-right: 12px;
    max-height: 150px;
    overflow-y: auto;
    /* reaching the end must not hand the wheel to the page */
    overscroll-behavior: contain;
}

.offerList::-webkit-scrollbar {
    width: 6px;
}

.offerList::-webkit-scrollbar-track {
    background: rgba(11, 53, 84, 0.08);
    border-radius: 999px;
}

.offerList::-webkit-scrollbar-thumb {
    background: rgba(11, 53, 84, 0.55);
    border-radius: 999px;
}

.offerList::-webkit-scrollbar-thumb:hover {
    background: var(--color-intro);
}

.offerList > li {
    position: relative;
    padding-left: 16px;
    margin-bottom: clamp(10px, 0.7rem + 0.4vw, 16px);
}

.offerList > li:last-child {
    margin-bottom: 0;
}

.offerList > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    background: var(--color-heading);
}

.offerList__name {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: #000000;
    margin-bottom: 3px;
}

.offerList__meta {
    display: block;
}

/* auto pushes it onto the card's bottom edge instead of trailing
   whatever content precedes it, which is what keeps the three cards
   reading as one set */
.offerCard__note {
    margin-top: auto;
    padding-top: clamp(20px, 1.4rem + 0.6vw, 30px);
    border-top: 1px solid rgba(11, 53, 84, 0.14);
    font-size: clamp(11px, 0.62rem + 0.18vw, 13px);
    line-height: 1.5;
    color: rgba(11, 53, 84, 0.62);
}

.offerCard__note sup,
.offerBlock__name sup {
    color: var(--color-heading);
}


/*=====================================================================
   Our Offerings — three across
   One offering per column, all on one line. The stage is the surface,
   so the columns are told apart by the rule between each pair rather
   than by boxes, and the three heads sit on one baseline.
=====================================================================*/
.offerGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* head, body, note — the three rows every card lays its parts on */
    grid-template-rows: auto auto auto;
    column-gap: clamp(24px, 2.2vw, 40px);
    align-items: stretch;
}

/* Each card lays its head, body and note on the stage's rows rather
   than its own, so the three heads are one height — the tallest — and
   the rule under each is drawn on the same line across the stage. */
.offerGrid > .offerCard {
    min-width: 0;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
}

/* the vertical rules, one to the left of the second and third column,
   running the full height of the tallest */
.offerGrid > .offerCard + .offerCard {
    padding-left: clamp(24px, 2.2vw, 40px);
    border-left: 1px solid rgba(11, 53, 84, 0.14);
}

/* every card holds one column of copy, so the body is one column and
   the entries in it no longer scroll inside a window */
.offerCard__body {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
}

.offerGrid .offerCard__body {
    flex: 0 0 auto;
}

.offerCard__body > .offerCol,
.offerCol__scroll,
.offerList {
    min-width: 0;
}

.offerCol__scroll,
.offerList {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
}

/* A lighter head than the slider had: a third of the stage is a narrow
   column, so the icon and the title come down. Icon, title and index
   share the first line — the title is the only part that wraps — and
   the badge, which has no room there, drops under the title. */
.offerGrid .offerCard__head {
    flex-wrap: wrap;
    /* packed to the top of the shared row, so a shorter head keeps its
       icon and title level with its neighbours' */
    align-content: flex-start;
    gap: 12px;
    padding-bottom: clamp(10px, 0.6rem + 0.4vw, 16px);
    margin-bottom: clamp(12px, 0.7rem + 0.5vw, 18px);
}

.offerGrid .offerCard__icon {
    width: 48px;
    height: 48px;
}

.offerGrid .offerCard__title {
    flex: 1 1 0;
    min-width: 0;
    font-size: 20px;
    line-height: 1.2;
}

.offerGrid .offerCard__index {
    font-size: clamp(20px, 0.9rem + 0.8vw, 28px);
}

/* a full-width, zero-height item between the first line and the badge
   is what puts the badge on a line of its own; the two row gaps either
   side of it are pulled back to one */
.offerGrid .offerCard__head::after {
    content: "";
    order: 4;
    flex: 0 0 100%;
    height: 0;
}

.offerGrid .offerCard__badge {
    order: 5;
    flex: 0 0 auto;
    margin-top: -12px;
}

/* the note follows the copy rather than being pushed to the foot of
   the tallest column */
.offerGrid .offerCard__note {
    margin-top: 0;
    padding-top: clamp(14px, 1rem + 0.4vw, 20px);
}

/* the copy comes down a step with the head */
.offerGrid .offerCol__head,
.offerGrid .offerBlock__name,
.offerGrid .offerList__name {
    font-size: 17px;
}

.offerGrid .offerBlock__meta,
.offerGrid .offerList__meta {
    font-size: 15px;
}

.digitalBanner h1 span{
    display: block;
}
.rndProductsTable tbody td:nth-child(2) i{
    color: #000000;
}
.innerBanner.ourjrtransform {
    background-image: url(../images/pdf-3-img.webp);
}

/*=========== Our Journey of Transformation ===========*/
.ojtSec {
    padding: 0 0 30px;
}

.ojtIntro p {
    font-size: 18px;
    line-height: 30px;
    color: var(--color-intro-heading);
}

.ojtHead {
    position: relative;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-orange);
    margin: 0 0 22px;
}

/* the rule that trails the heading on the value-proposition block */
.ojtHeadRule {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ojtHeadRule::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--color-orange);
}

/*--- The three journey cards, stacked full width ---*/
.journeyCard {
    position: relative;
    margin-bottom: 26px;
    padding: 0 0 20px;
    border-bottom: 3px solid var(--color-orange);
}

.journeyHead {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    min-width: 260px;
    padding: 16px 90px 16px 22px;
    /* the peach wash behind the title, fading out to the right */
    background: linear-gradient(90deg, #fbe3cd 0%, rgba(251, 227, 205, 0) 100%);
}

.journeyKicker {
    display: block;
    font-size: 20px;
    line-height: 28px;
    text-transform: uppercase;
    color: var(--color-orange);
}

.journeyHead h2 {
    font-size: 26px;
    line-height: 32px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-orange);
}

.journeyChev {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
}

.journeyChev img {
    display: block;
    width: 100%;
    height: auto;
}

.journeyCard p {
    margin: 18px 22px 0;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-intro-heading);
}

.journeyIcon {
    width: 70px;
}

.journeyIcon img {
    display: block;
    width: 100%;
    height: auto;
}

/*--- Landscape equation ---*/
.eqRow {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 10px;
}

.eqBox {
    position: relative;
    flex: 1 1 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 26px 18px;
    text-align: center;
    background: #e9edf0;
}

/* the short navy tab each box carries on its top edge */
.eqBox::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 0;
    width: 58px;
    height: 4px;
    background: var(--color-intro-heading);
}

.eqBox span {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-intro-heading);
}

.eqResult {
    flex: 1 1 240px;
    background: var(--color-orange);
}



.eqResult span {
    font-weight: 700;
    color: var(--color-white);
}

.eqSign {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: center;
    width: 34px;
    height: 34px;
    font-size: 24px;
    line-height: 1;
    color: var(--color-intro-heading);
}

/*--- Track record band ---*/
.trackBand {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 30px 30px 24px;
    background: #e9edf0;
}

.trackItem {
    flex: 1 1 180px;
    position: relative;
    padding-top: 16px;
}

.trackItem::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 58px;
    height: 4px;
    background: var(--color-intro-heading);
}

.trackItem h3 {
    font-size: 38px;
    line-height: 46px;
    font-weight: 400;
    color: var(--color-orange);
}

.trackUnit {
    font-size: 20px;
    line-height: 28px;
    margin-left: 6px;
}

.trackItem p {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-intro-heading);
    margin-top: 6px;
}

/*--- Value proposition ---*/
.ojtlast {
    padding: 20px;
    border: 1px solid var(--color-orange);
    border-top: 0;
    text-align: left;
}

.ojtlast p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-intro-heading);
    margin-bottom: 16px;
}

.valueBox p:last-child {
    margin-bottom: 0;
}
.jrnytsnfrm{
    display: flex;
    align-items: center;
}
.graphnote{
    margin-top: 10px;
}
.graphnote p{
    font-size: 14px;
    line-height: 22px;
    color: #333333;
}

/* Fine print: the chart footnotes are qualifications on the figures
   above them, not copy to be read alongside. Set right down so they are
   available without competing with the numbers. */
.graphnote--fine p{
    font-size: 9px;
    line-height: 13px;
}

/*=========== Chapter PDF viewer ===========*/
body.pdfOpen {
    overflow: hidden;
}

.pdfModal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.pdfModal[hidden] {
    display: none;
}

.pdfModal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.pdfModal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1180px, 100%);
    height: min(880px, 92vh);
    background: var(--color-white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.pdfModal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex: 0 0 auto;
    padding: 10px 20px;
}

.pdfModal__title {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--color-intro-heading);
}

.pdfModal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f1f2f4;
    color: #333333;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

.pdfModal__close:hover {
    background: var(--color-orange);
    color: var(--color-white);
}

.pdfModal__body {
    flex: 1 1 auto;
    min-height: 0;
    background: #333333;
}

.pdfModal__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}