/*==================================================================
   RESPONSIVE LADDER

   Target screen        Breakpoint
   ------------------   -------------------------
   1920 x 1080          min-width: 1800px
   1536 x 1024          1500px - 1799px
   1440 x 900           1400px - 1499px
   1366 x 768           1200px - 1399px
   Small laptop         1024px - 1199px
   Tablet                768px - 1023px
   Small tablet          600px -  767px
   Mobile                320px -  599px

   style.css is the 1400-1499 base (the most common design width). Type
   and spacing already scale fluidly from the clamp() tokens there, so
   each tier below only handles LAYOUT — what stacks, what hides, what
   changes direction. Orientation rules live at the bottom.

   The nav switches to the drawer at 1023px, i.e. tablet and down.
   js/custom.js reads the same 1023 value.
==================================================================*/


/*==================================================================
   1920 x 1080  —  min-width: 1800px
   Wider container so the report does not sit in a narrow column on a
   full-HD monitor; Bootstrap caps at 1320px on its own.
==================================================================*/
@media (min-width: 1800px) {
    .container,
    .container-xl,
    .container-xxl {
        max-width: 1320px;
    }

    #header {
        padding: 24px 0;
    }

    .mainLogo img {
        max-width: 178px;
    }

    .navPill {
        padding: 12px 20px;
    }

    .navCta {
        font-size: 13px;
        padding: 13px 24px;
    }

    .megaCard {
        width: 940px;
    }

    .megaCard__links a {
        font-size: 16px;
    }
}


/*==================================================================
   1536 x 1024  —  1500px - 1799px
==================================================================*/
@media (min-width: 1500px) and (max-width: 1799px) {
    .container,
    .container-xl,
    .container-xxl {
        max-width: 1320px;
    }

    .navPill {
        padding: 11px 16px;
    }

    .megaCard {
        width: 940px;
    }
}


/*==================================================================
   1440 x 900  —  1400px - 1499px   (design base, style.css as-is)
   900px tall is short for a 1440 layout, so the card is capped a
   little tighter to stay clear of the viewport bottom.
==================================================================*/
@media (min-width: 1400px) and (max-width: 1499px) {
    .megaCard {
        max-height: min(68vh, 520px);
    }
}


/*==================================================================
   1366 x 768  —  1200px - 1399px
   The four labels no longer fit at full size. Icons go, labels tighten.
   768px tall is the shortest desktop target, so the card is capped by
   viewport height rather than a fixed px value.
==================================================================*/
@media (min-width: 1200px) and (max-width: 1399px) {
    .container,
    .container-xl,
    .container-xxl {
        max-width: 1140px;
    }

    .navBar {
        gap: 16px;
    }

    .navPills {
        gap: 5px;
    }

    .navPill {
        padding: 9px 12px;
        gap: 6px;
    }

    .navPill svg {
        display: none;
    }


    .navCta span {
        display: none;
    }

    .navCta {
        padding: 10px 13px;
    }

    .mainLogo img {
        max-width: 132px;
    }

    .megaCard {
        width: min(880px, 94vw);
        max-height: min(74vh, 560px);
    }

    .megaCard__links a {
        font-size: 14px;
        padding: 9px 12px 9px 18px;
    }
}


/*==================================================================
   Small laptop  —  1024px - 1199px
   Last tier with the pills still on show. Labels shorten further and
   the CTA becomes icon-only.
==================================================================*/
@media (min-width: 1024px) and (max-width: 1199px) {
    .navBar {
        gap: 12px;
    }

    .navPills {
        gap: 4px;
    }

    .navPill {
        padding: 8px 10px;
    }

    .navPill svg {
        display: none;
    }


    .navCta span {
        display: none;
    }

    .navCta {
        padding: 9px 12px;
    }

    .mainLogo img {
        max-width: 118px;
    }

    .megaCard {
        width: min(900px, 94vw);
        max-height: min(74vh, 520px);
    }

    .megaCard__links {
        gap: 2px 8px;
    }

    .megaCard__links a {
        padding-left: 14px;
    }
}


/*==================================================================
   Tablet and below  —  max-width: 1023px
   The drawer takes over. Everything from here down is shared by
   tablet / small tablet / mobile; the narrower tiers only refine it.
==================================================================*/
@media (max-width: 1023px) {
    #header {
        padding: 12px 0;
    }

    .navToggle {
        display: block;
    }

    /* collapsed until the hamburger opens the sheet */
    .navPills,
    .navCta {
        display: none;
    }

    #header.isOpen .navPills {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
        padding-top: 48px;
    }

    #header.isOpen .navCta {
        display: inline-flex;
        justify-content: flex-start;
        margin-top: 14px;
    }

    #header.isOpen .navCta span {
        display: inline;
    }

    /* open, the bar becomes a full-height sheet: logo across the top,
       then the nav using the full width beneath it */
    #header.isOpen .navBar {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        min-height: 100dvh;
        padding-bottom: 40px;
    }

    #header.isOpen .navRight {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    #header.isOpen .mainLogo {
        align-self: flex-start;
        background: #ffffff;
    }

    /* the X moves to the top-right, level with the logo — left in flow it
       would be stranded halfway down a full-height sheet */
    #header.isOpen .navToggle {
        position: absolute;
        top: 20px;
        right: 4vw;
    }

    #header.isOpen .navToggle::before {
        background: transparent;
        box-shadow: none;
    }

    #header.isOpen .navToggle span,
    #header.isOpen .navToggle span::before,
    #header.isOpen .navToggle span::after {
        background: #ffffff;
    }

    #header.isOpen .container {
        max-width: 100%;
    }

    /* the sheet itself — fixed so it covers regardless of scroll position */
    #header.isOpen .navBar::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background: var(--color-primary);
    }

    /* pills invert against the sheet and wrap freely: no truncation here,
       there is full width for the long labels */
    #header.isOpen .navPill {
        width: 100%;
        justify-content: flex-start;
        background: transparent;
        border-color: rgba(255, 255, 255, 0.35);
        color: #ffffff;
        box-shadow: none;
        white-space: normal;
        text-align: left;
        font-size: 13px;
        padding: 12px 18px;
    }

    #header.isOpen .navPill svg {
        display: block;
    }

    #header.isOpen .navPill span {
        max-width: none;
        overflow: visible;
        white-space: normal;
    }

    #header.isOpen .navPill[aria-expanded="true"] {
        background: #ffffff;
        border-color: #ffffff;
        color: var(--color-deep);
    }

    #header.isOpen .navPill[aria-expanded="true"] svg {
        color: var(--color-primary);
    }

    #header.isOpen .navCta {
        background: #ffffff;
        border-color: #ffffff;
        color: var(--color-deep);
    }

    body.drawerOpen {
        overflow: hidden;
    }

    /*--- cards become inline accordion sections ---*/
    .megaCard--inline {
        position: static;
        width: 100%;
        max-height: 0;
        border: none;
        border-radius: 0;
        background: none;
        box-shadow: none;
        opacity: 1;
        transform: none;
        overflow: hidden;
        transition: max-height 0.35s var(--ease-out);
    }

    .megaCard--inline.isOpen {
        max-height: 70vh;
        overflow-y: auto;
    }

    .megaCard--inline .megaCard__head {
        display: none;
    }

    /* the drawer is a plain list again: three columns in a phone-width
       panel would leave each link two words wide */
    .megaCard--inline .megaCard__links {
        display: block;
        padding: 6px 0 10px 14px;
    }

    /* in the drawer the three groups run as one list */
    .megaCard--inline .megaCard__col {
        display: contents;
    }

    .megaCard--inline .megaCard__links a {
        font-size: 14px;
        padding: 9px 10px 9px 16px;
        color: rgba(255, 255, 255, 0.82);
    }

    .navScrim {
        display: none;
    }

    #main {
        padding-top: 72px;
    }
}


/*==================================================================
   Tablet  —  768px - 1023px
   Two-up footer still fits at this width.
==================================================================*/
@media (min-width: 768px) and (max-width: 1023px) {
    .container,
    .container-xl,
    .container-xxl {
        max-width: 720px;
    }

    footer {
        padding: 70px 0 30px;
    }

    .footTop {
        gap: 28px;
        padding-bottom: 32px;
    }

}


/*==================================================================
   Small tablet  —  600px - 767px
   Footer goes single-column from here down.
==================================================================*/
@media (min-width: 600px) and (max-width: 767px) {
    .container,
    .container-xl,
    .container-xxl {
        max-width: 540px;
    }

    footer {
        padding: 56px 0 28px;
    }

    .footTop,
    .footBottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footTop {
        gap: 26px;
        padding-bottom: 28px;
    }

    .footBottom {
        gap: 14px;
    }


    .investorRel {
        gap: 18px;
    }
}


/*==================================================================
   Mobile  —  320px - 599px
==================================================================*/
@media (max-width: 599px) {
    .container,
    .container-xl,
    .container-xxl {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    #header {
        padding: 10px 0;
    }

    .mainLogo img {
        max-width: 118px;
    }

    .mainLogo {
        padding: 9px 11px;
    }

    #header.isOpen .navToggle {
        top: 17px;
        right: 20px;
    }

    #header.isOpen .navPills {
        padding-top: 42px;
    }

    #header.isOpen .navPill {
        font-size: 12px;
        padding: 11px 15px;
    }

    .megaCard--inline .megaCard__links a {
        font-size: 13.5px;
    }

    #main {
        padding-top: 64px;
    }

    footer {
        padding: 48px 0 26px;
    }

    .footTop,
    .footBottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footTop {
        gap: 24px;
        padding-bottom: 26px;
    }

    .footBottom {
        gap: 12px;
    }


    /* the CTA becomes full-width so it is a comfortable tap target */
    .footDownload,
    .footDownload a {
        width: 100%;
    }

    .footDownload a {
        justify-content: space-between;
        padding: 9px 9px 9px 20px;
        font-size: 11.5px;
        gap: 12px;
    }

    .footArrow {
        width: 36px;
        height: 36px;
    }

    .investorRel {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/*==================================================================
   Very narrow  —  max-width: 359px
   Guards the 320px floor.
==================================================================*/
@media (max-width: 359px) {
    .container,
    .container-xl,
    .container-xxl {
        padding-left: 15px;
        padding-right: 15px;
    }

    .mainLogo img {
        max-width: 104px;
    }

    #header.isOpen .navPill {
        font-size: 11.5px;
        padding: 10px 13px;
    }

    .footDownload a {
        font-size: 10.5px;
        letter-spacing: 0.1em;
    }
}




/*--- 1024 - 1399: tablets in landscape, and small laptops.

      Four pills with their full labels need about 1140px before the
      logo and the download button are counted, and the header does not
      have that here — on every landscape iPad the row ran off the end.
      Rather than cut the labels again, the row takes a second line at
      these widths. The header measures its own height into
      --nav-height, so everything that clears the header follows it. ---*/
@media (min-width: 1024px) and (max-width: 1399px) {
    .navPills {
        flex-wrap: nowrap;
    }

    .navPill {
        padding-left: 12px;
        padding-right: 12px;
    }

    .navBar {
        gap: 10px;
    }
}

/*--- 1024 - 1199: the narrowest width that still shows the pill bar.
      Four full labels need about 770px here once the logo and the
      download button are off, so the type steps down to make them. ---*/
@media (min-width: 1024px) and (max-width: 1199px) {
    .navPill {
        font-size: 12px;
        padding-left: 9px;
        padding-right: 9px;
    }

    .navPills {
        gap: 3px;
    }

    .mainLogo img {
        max-width: 104px;
    }
}

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

   Three acts play on one held screen from 768px up. Below that the
   hold is dropped: a phone would spend four screens of scroll on an
   act sequence before reaching the report, and the statement reads
   perfectly well as ordinary copy under the film.
==================================================================*/

/*--- 1920 x 1080 ---*/
@media (min-width: 1800px) {
    .hero__content {
        max-width: 820px;
    }

    .hero__asset {
        object-position: 68% center;
    }
}

/*--- 1536 x 1024 ---*/
@media (min-width: 1500px) and (max-width: 1799px) {
    .hero__content {
        max-width: 740px;
    }
}

/*--- 1366 x 768 : short desktop, tighten the vertical ---*/
@media (min-width: 1200px) and (max-width: 1399px) {
    .hero__content {
        max-width: 640px;
    }

    .hero__scrollLine {
        height: 40px;
    }
}

/*--- Small laptop ---*/
@media (min-width: 1024px) and (max-width: 1199px) {
    .hero__content {
        max-width: 580px;
    }

    .hero__asset {
        object-position: 76% center;
    }

    .hero__scrollLine {
        height: 38px;
    }
}

/*--- Tablet 768 - 1023: the acts still play, but the film is cropped
      to the turbine rather than the wide frame ---*/
@media (min-width: 768px) and (max-width: 1023px) {
    .hero__asset {
        object-position: 62% 40%;
    }

    .hero__content {
        max-width: 560px;
    }

    .hero__scrim {
        background:
            linear-gradient(0deg, rgba(5, 18, 31, 0.5) 0%, rgba(5, 18, 31, 0.3) 34%, rgba(5, 18, 31, 0.1) 64%, rgba(5, 18, 31, 0) 100%),
            linear-gradient(90deg, rgba(5, 18, 31, 0.25) 0%, rgba(5, 18, 31, 0) 62%);
    }
}

/*--- Below 768px: no hold, no acts. The film and the tagline make the
      opening screen, and the statement follows as ordinary copy. ---*/
@media (max-width: 767px) {
    .hero__media,
    .hero__scrim {
        position: absolute;
        inset: 0 0 auto;
        height: clamp(420px, 78vh, 620px);
    }

    .hero__asset {
        height: 100%;
        object-position: 58% 32%;
    }

    /* the tall cut takes over from the wide one */
    .hero__asset--desktop {
        display: none;
    }

    .hero__asset--mobile {
        display: block;
    }

    /* the wash never closes on this tier, so the statement carries its
       own ground instead */
    .hero__cover {
        display: none;
    }

    .hero__inner {
        display: block;
        padding-top: clamp(260px, 46vh, 380px);
        padding-bottom: clamp(40px, 8vh, 72px);
    }

    .hero__content {
        margin-bottom: clamp(28px, 6vh, 48px);
    }

    /* stacked, all three words are shown at once rather than swapped */
    .hero__scroll {
        display: none;
    }
}

/*--- Mobile 320 - 599 ---*/
@media (max-width: 767px) {
    /* the three words are set at 80px on the desktop hero, which on a
       phone is wider than the screen — 40px is the size they were asked
       to hold to here */
    .heroTag__word {
        font-size: 40px;
    }
}

@media (max-width: 599px) {
    .hero__eyebrow::before {
        width: 20px;
        margin-right: 10px;
    }
}

/*==================================================================
   ORIENTATION

   Landscape phones and small tablets are WIDE but very SHORT. A layout
   tuned for a 768px-tall viewport leaves nothing visible at 400px tall,
   so anything sized in vh, plus the fixed header and the open drawer,
   has to be reined in here. This is keyed on height, not on device, so
   it also catches a short desktop window.
==================================================================*/

/*--- Short viewport in landscape: phones and small tablets turned ---*/
@media (orientation: landscape) and (max-height: 500px) {
    #header {
        padding: 7px 0;
    }

    .mainLogo img {
        max-width: 100px;
    }

    #main {
        padding-top: 56px;
    }

    /* the drawer must scroll: at 380px tall the pills alone overflow */
    #header.isOpen .navBar {
        min-height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        padding-bottom: 24px;
    }

    #header.isOpen .navPills {
        padding-top: 34px;
        gap: 7px;
    }

    #header.isOpen .navPill {
        padding: 8px 15px;
        font-size: 11.5px;
    }

    #header.isOpen .navToggle {
        top: 13px;
    }

    .megaCard--inline.isOpen {
        max-height: 46vh;
    }

    /* desktop dropdown card, if the drawer is not in play */
    .megaCard {
        max-height: 78vh;
    }

    .megaCard__head {
        padding: 10px 18px;
    }

    .megaCard__links a {
        padding: 7px 12px 7px 18px;
    }

    footer {
        padding: 40px 0 22px;
    }

    /* vertical rhythm collapses — a 130px section pad eats the screen */
    :root {
        --section-pad: clamp(30px, 2rem + 2vw, 56px);
    }

    /*--- Hero on a phone held sideways ---
       ~380px of height. A 100dvh hero is correct (it still fills the
       screen) but its min-height must go, the copy has to shrink hard,
       and the composition returns to SIDE-BY-SIDE: there is width to
       spare here and no vertical room to stack. */
    /* the acts are dropped on a screen this short: the film and the
       tagline make the opening, and the statement follows it */
    .hero__asset {
        object-position: 74% center;
    }

    .hero__scrim {
        background:
            linear-gradient(90deg, rgba(5, 18, 31, 0.5) 0%, rgba(5, 18, 31, 0.34) 38%, rgba(5, 18, 31, 0.08) 66%, rgba(5, 18, 31, 0) 82%),
            linear-gradient(0deg, rgba(5, 18, 31, 0.22) 0%, rgba(5, 18, 31, 0) 40%);
    }

    .hero__content {
        max-width: 62%;
    }

    .hero__eyebrow {
        margin-bottom: 8px;
        letter-spacing: 0.2em;
    }

    .heroTag {
        display: block;
        margin-bottom: 10px;
    }

    .heroTag__word {
        font-size: clamp(20px, 3.2vw + 0.5rem, 32px);
    }

    .heroTag__word {
        padding-bottom: 5px;
    }

    /* nothing left to scroll-cue toward in a 380px-tall frame */
    .hero__scroll {
        display: none;
    }
}

/*--- Landscape tablet (iPad-class, 1024x768 and similar) ---
   Tall enough not to need the squeeze above, but the drawer is in play,
   so give the sheet a comfortable two-column feel instead of one long
   scrolling list. */
@media (orientation: landscape) and (min-width: 700px) and (max-width: 1023px) and (min-height: 501px) {
    #header.isOpen .navPills {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 18px;
        align-items: start;
    }

    /* a pill and its accordion stay in the same column */
    #header.isOpen .navPill {
        width: 100%;
    }

    .megaCard--inline.isOpen {
        max-height: 40vh;
    }

    #header.isOpen .navCta {
        align-self: start;
        width: auto;
    }
}

/*--- Portrait tablet: extra breathing room, single column ---*/
@media (orientation: portrait) and (min-width: 600px) and (max-width: 1023px) {
    #header.isOpen .navPills {
        max-width: 560px;
    }

    #header.isOpen .navCta {
        align-self: flex-start;
    }

    .megaCard--inline.isOpen {
        max-height: 60vh;
    }
}

/*--- Portrait phone ---*/
@media (orientation: portrait) and (max-width: 599px) {
    .megaCard--inline.isOpen {
        max-height: 56vh;
    }
}


/*==================================================================
   Accessibility / device preferences
==================================================================*/
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* touch devices: hover states never resolve, so make the tap targets the
   comfortable 44px minimum instead */
@media (hover: none) {
    .navPill,
    .navCta,
    .megaCard__links a,
    .investorRel a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .navPill:hover,
    .navCta:hover {
        transform: none;
    }
}

@media print {
    #header,
    .navScrim,
    .megaCard,
    footer .footDownload {
        display: none !important;
    }

    #main {
        padding-top: 0;
    }

    body {
        color: #000000;
    }
}


/*==================================================================
   LANDSCAPE SECTION — per-tier layout

   The equation is a 7-track grid (3 inputs + result, with operators
   between). That only survives on a wide screen. From small laptop
   down it becomes a 2-up grid with the result spanning the full row,
   and on mobile a single column — with the +/= operators rotated to
   sit BETWEEN the stacked blocks instead of beside them, so the
   equation still reads as an equation.

   The track record steps 4 -> 4 -> 2 -> 1 across the ladder.
==================================================================*/

/*--- 1366 x 768 ---*/
@media (min-width: 1200px) and (max-width: 1399px) {
    .equation__item {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/*--- Small laptop: the 7-track row no longer fits ---*/
@media (min-width: 768px) and (max-width: 1199px) {
    .equation {
        grid-template-columns: 1fr auto 1fr;
        gap: 14px;
    }

    /* the third input drops to the next row, so its leading operator has
       to move under the first block rather than sit inline */
    .equation__op:nth-of-type(2) {
        grid-column: 2;
    }

    .equation__item:nth-of-type(3) {
        grid-column: 1 / -1;
    }

    /* result spans the full width, which suits its longer copy */
    .equation__item--result {
        grid-column: 1 / -1;
    }

    .equation__op:nth-of-type(3) {
        grid-column: 1 / -1;
        padding: 4px 0;
    }

    .equation__item {
        padding: 26px 18px;
    }
}

/*--- Tablet: track record halves ---*/
@media (min-width: 600px) and (max-width: 1023px) {
    .trackRecord {
        --track-gap: 24px;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 30px;
    }

    .trackRecord__item:nth-child(odd) {
        padding-left: 0;
        border-left: none;
    }

    .trackRecord__item:nth-child(odd)::before {
        left: 0;
    }

    .trackRecord__label {
        max-width: 18em;
    }
}

/*--- Small tablet ---*/
@media (min-width: 600px) and (max-width: 767px) {
    .equation {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .equation__op {
        padding: 10px 0;
    }

    .equation__item {
        padding: 22px 20px;
        text-align: left;
        justify-content: flex-start;
    }
}

/*--- Mobile: single column, operators between the blocks ---*/
@media (max-width: 599px) {
    .sectionTitle {
        /* the rule beside a wrapped heading looks broken; drop it under */
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .equation {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .equation__item {
        padding: 20px 18px;
        text-align: left;
        justify-content: flex-start;
        font-size: 15px;
    }

    .equation__op {
        padding: 9px 0;
        font-size: 22px;
    }

    .trackRecord {
        grid-template-columns: 1fr;
        row-gap: 26px;
    }

    /* one per row: nothing to divide, so the rules come off */
    .trackRecord__item {
        padding-left: 0;
        padding-right: 0;
        border-left: none;
    }

    .trackRecord__item::before {
        left: 0;
    }

    .trackRecord__value {
        /* the rupee figure is the widest; let it wrap rather than overflow
           on a 320px screen */
        white-space: normal;
    }

    .trackRecord__label {
        max-width: none;
    }
}


/*==================================================================
   LANDSCAPE — pinned image vs. stacked band

   Desktop and small laptop get the pinned behaviour: image holds at
   100vh, content panel scrolls up over it, so each stage is one full
   screen. Below 1024 that is dropped — the content is far taller than
   a phone screen, so pinning would leave the panel scrolling inside a
   frame the viewer cannot see out of, and mobile browsers resize the
   viewport mid-scroll which makes a sticky 100vh element jump.
==================================================================*/

/*--- Short desktop (1366 x 768 and any small laptop window) ---
   The panel has to hold heading + equation + subheading + 4 stats in
   768px. Everything tightens so it still lands in one screen. */
@media (min-width: 1024px) and (max-height: 820px) {
    .landscape__body {
        padding-top: 42px;
        padding-bottom: 42px;
    }

    .sectionTitle {
        margin-bottom: 22px;
        font-size: 21px;
    }

    .sectionTitle--sub {
        margin-top: 30px;
        font-size: 18px;
    }

    .equation__item {
        padding: 20px 14px;
        font-size: 14px;
    }

    .trackRecord {
        --track-gap: 26px;
    }

    .trackRecord__item {
        padding-top: 14px;
    }

    .trackRecord__value {
        font-size: 38px;
        margin-bottom: 6px;
    }

    .trackRecord__label {
        font-size: 13px;
    }
}

/*--- Very short desktop windows: let it grow rather than crush ---*/
@media (min-width: 1024px) and (max-height: 500px) {
    .landscape__banner {
        position: relative;
        height: 78vh;
    }

    .landscape__body {
        min-height: 0;
    }
}

/*--- Tablet and below: plain stacked band, no pinning ---*/
@media (max-width: 1023px) {
    .landscape__banner {
        position: relative;
        top: auto;
        height: clamp(200px, 42vw, 380px);
    }

    .landscape__body {
        min-height: 0;
        display: block;
        /* pulled up so the panel still overlaps the image edge, keeping the
           same "content over image" read without the pinning */
        margin-top: clamp(-40px, -4vw, -20px);
        padding-top: clamp(32px, 5vw, 54px);
        padding-bottom: clamp(40px, 6vw, 64px);
    }
}

@media (max-width: 599px) {
    .landscape__banner {
        height: 210px;
    }

    .landscape__banner img {
        object-position: 50% center;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    .landscape__banner {
        height: 62vh;
    }
}

/*==================================================================
   Glass panel — cost control on small screens
   A 30px backdrop blur repainted every scroll frame is the single most
   expensive thing on the page for a mid-range phone. The blur is
   reduced and the fill raised to compensate for the lost separation.
==================================================================*/
@media (max-width: 1023px) {
    .landscape__body > .container {
        background: #f3f6f8;
        /* nothing behind it to see through once it is stacked */
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: 1px solid rgba(11, 53, 84, 0.1);
    }

    /* The three input boxes are pale by design; on a pale ground they
       need their own edge to read as boxes at all. The result box is
       excluded — it carries the orange, and a blanket rule here painted
       over it. */
    .equation__item:not(.equation__item--result) {
        background: #ffffff;
        border: 1px solid rgba(11, 53, 84, 0.12);
    }
}

/*==================================================================
   CORE CAPABILITIES — per-tier layout

   Desktop: sticky image column beside the eight points.
   Below 1024 the sticky column is dropped — the image would pin inside
   a frame taller than the screen — and the media moves above the list
   as a normal block.
==================================================================*/

@media (min-width: 1800px) {
    .coreCap__grid {
        gap: 76px;
    }
}

/*--- 1366 x 768 and small laptop: image column narrows ---*/
@media (min-width: 1024px) and (max-width: 1399px) {
    .coreCap__grid {
        grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
        gap: 34px;
    }

    .coreCap__mediaFrame {
        aspect-ratio: 3 / 4;
    }

    .capList__item {
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

/*--- Short desktop: the sticky frame must fit under the header ---*/
@media (min-width: 1024px) and (max-height: 820px) {
    .coreCap__mediaFrame {
        aspect-ratio: 1 / 1;
    }
}

/*--- Tablet and below: stacked, no sticky ---*/
@media (max-width: 1023px) {
    .coreCap__grid {
        grid-template-columns: 1fr;
        gap: clamp(26px, 4vw, 40px);
    }

    .coreCap__media {
        position: static;
        top: auto;
    }

    .coreCap__mediaFrame {
        aspect-ratio: 16 / 9;
        border-radius: 18px;
    }

    .coreCap__mediaFrame img {
        object-position: 60% center;
    }

    .coreCap__title {
        max-width: none;
    }
}

/*--- Mobile ---*/
@media (max-width: 599px) {
    .coreCap::after {
        font-size: 150px;
        top: -0.04em;
    }

    .coreCap__mediaFrame {
        aspect-ratio: 4 / 3;
        border-radius: 14px;
    }

    .capList__item {
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

/*--- Landscape phone: drop the tall frame ---*/
@media (orientation: landscape) and (max-height: 500px) {
    .coreCap__mediaFrame {
        aspect-ratio: 21 / 9;
    }
}


/*==================================================================
   OUR OFFERINGS — per-tier layout

   The panels are 100vh frames pinned at the same offset, so nothing
   about the STACK changes per breakpoint. What changes is whether the
   card's content can fit one screen: the two-column body collapses on
   tablet, and below 768px the pinning is dropped entirely because a
   single column of this much copy is several screens tall.
==================================================================*/

/*--- 1366 x 768 / small laptop: tighten so the card still fits 100vh ---*/

/*--- Short desktop: the whole card has to survive in ~768px of height ---*/
/*--- Short desktop: the densest card has to survive in ~700px of
     usable height, so every vertical gap is cut again ---*/

/*--- Small tablet and mobile: no pinning ---
   Single-column, this much copy runs several screens tall. Pinning it
   in a 100vh frame would mean scrolling inside a card whose edges you
   cannot see, so the panels revert to plain stacked blocks. The JS
   checks the same 768px and clears its inline transforms below it. */

@media (max-width: 599px) {
    /* index and badge share the top line, the long title drops beneath */
    .offerings__sub {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .offerings__sub::after {
        flex: 0 0 auto;
        width: 52px;
        height: 3px;
        background: var(--color-intro);
    }
}

/*--- Landscape phone (wide but ~380px tall): the panel is pinned again
      above 768px, so the card must shed as much height as possible ---*/

/*==================================================================
   Offerings card width — kept flush with the section heading

   .container is capped per tier and carries 12px of padding a side, so
   the heading's content edge sits at (container max-width - 24px). The
   card mirrors that at every tier, which is what keeps its left and
   right edges lined up with "OUR OFFERINGS AND THEIR APPLICATIONS"
   above it instead of floating on a narrower measure of its own.
==================================================================*/






/* below 600 the container runs full width on a 20px gutter, so the card
   matches by filling the deck's own padding box */

/*==================================================================
   Offerings deck — very short desktop windows

   The card no longer scrolls internally (that was swallowing the page
   scroll under the pointer), so on a window too short to hold the
   densest card there is nothing to fall back on. Below 620px of height
   the pinning is dropped entirely and the panels flow normally, which
   is the only way every line stays reachable.
==================================================================*/

/*--- Short desktop: give the cards their height back by shrinking the
      reserved heading band rather than the card padding again ---*/
@media (min-width: 768px) and (min-height: 621px) and (max-height: 820px) {
    .offerings__sub {
        font-size: 17px;
    }
}

/* Where the heading band is released (below), it no longer pulls itself
   back up — so the space the intro was reserving for it has to go too. */
@media (max-width: 767px) {
    .offerings__intro {
        margin-bottom: clamp(26px, 5vw, 44px);
    }
}

@media (min-width: 768px) and (max-height: 500px) {
    .offerings__intro {
        margin-bottom: 32px;
    }
}

/*--- Card 04 projects: two columns collapse with the rest ---*/
@media (max-width: 1023px) {
    .offerProjects {
        grid-template-columns: 1fr;
    }
}

/* the swap still tracks which card you have reached, but with the band
   no longer sticky there is nothing to crossfade against — the inactive
   title is simply removed from flow instead */


/*--- Tablet and below: no deal. Three screens of track with a stack
      that cannot be read side by side is three screens of nothing, so
      the cards are simply laid out one under another. ---*/
@media (max-width: 1023px) {
    .sd__track {
        height: auto;
    }

    .sd__pin {
        position: relative;
        top: auto;
        height: auto;
        display: block;
        padding: var(--section-pad) 0;
    }

    .sd__stack {
        height: auto;
        display: grid;
        gap: clamp(14px, 2vw, 22px);
    }

    .sdDeal {
        position: relative;
        left: auto;
        right: auto;
        height: clamp(260px, 46vw, 340px);
        transform: none !important;
    }
}

/*--- Phones: the three cards become a slider.

      One under another they are three tall pictures with copy laid over
      the foot of each, and the section runs to most of a screen and a
      half. One at a time instead, with the picture above the copy rather
      than behind it — at this width a scrim dark enough to read white
      type through is dark enough to lose the photograph.

      The stack is its own viewport: the cards are each a full width of
      it, so one shared translate moves them together and there is no
      inner track to keep in step. ---*/
@media (max-width: 767px) {
    .sd__stack {
        display: flex;
        gap: 0;
        overflow: hidden;
        border-radius: clamp(14px, 1.4vw, 22px);
    }

    .sdDeal {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        display: flex;
        flex-direction: column;
        border-radius: 0;
        /* the tier above turns the dealt transform off outright, so the
           one that moves the slider has to answer it in kind */
        transform: translateX(calc(var(--sd-open, 0) * -100%)) !important;
        transition: transform 0.5s var(--ease-out);
    }

    /* out of the backdrop and into the flow, above the copy */
    .sdDeal__bg {
        position: relative;
        inset: auto;
        height: 190px;
        flex: 0 0 auto;
    }

    /* nothing is laid over the picture any more */
    .sdDeal__scrim {
        display: none;
    }

    .sdDeal__body {
        height: auto;
        justify-content: flex-start;
        max-width: none;
        padding: 20px;
    }

    .sdNav {
        display: flex;
    }
}

/*--- Laptop-height windows: the cards hold their 400px, so the
      chrome around them is what gives way. Everything trimmed here is
      spacing, not content — the alternative is shorter cards, which is
      the thing being protected. ---*/
@media (min-width: 1024px) and (max-height: 860px) {
    .sd__title {
        margin-bottom: 8px;
    }

}


/* the deal is the motion here; the cards are laid out plainly instead */
@media (prefers-reduced-motion: reduce) {
    .sd__track {
        height: auto;
    }

    .sd__pin {
        position: relative;
        height: auto;
        display: block;
        padding: var(--section-pad) 0;
    }

    .sd__stack {
        height: auto;
        display: grid;
        gap: 18px;
    }

    .sdDeal {
        position: relative;
        left: auto;
        height: 300px;
        transform: none !important;
    }
}

/* on paper nothing is dealt, so all three are laid out */
@media print {
    .sd__track {
        height: auto;
    }

    .sd__pin {
        position: relative;
        height: auto;
        display: block;
    }

    .sd__stack {
        height: auto;
        display: block;
    }

    .sdDeal {
        position: relative;
        left: auto;
        height: 260px;
        margin-bottom: 16px;
        transform: none !important;
        page-break-inside: avoid;
    }
}

/*--- A held screen around 600px tall: a 1920x1080 desktop at 150%
      scaling lands here once the browser chrome is off. The hold stays;
      what gives way is the spacing around the cards. ---*/
@media (min-width: 1024px) and (max-height: 700px) {
    .sd__pin {
        padding: 28px 0;
    }

    .sd__head {
        margin-bottom: 0;
    }

    .sd__stack {
        height: min(400px, calc(100vh - 220px));
        margin: 18px 0;
    }

    .sdDeal__body {
        padding: clamp(18px, 2vw, 28px);
    }

    .leadCard__scale {
        padding: 26px 0;
    }
}

/*=====================================================================
   Research & Development
=====================================================================*/

/*--- 1920 x 1080 and up ---*/
@media (min-width: 1800px) {
    .rnd__panel {
        max-width: 1160px;
    }

    .rnd__note {
        max-width: none;
    }
}

/*--- 1366 x 768 : short desktop, the row has to fit one screen ---*/
@media (min-width: 1024px) and (max-height: 820px) {
    .rnd__head {
        margin-bottom: 22px;
    }

    .rnd__panelHead {
        margin-bottom: 14px;
    }

    .rnd__note {
        margin-top: 20px;
        padding-top: 16px;
    }

    .rnd__noteHead {
        margin-bottom: 12px;
    }

    .rndModel__item {
        min-height: 0;
    }
}

/*--- Very short desktop windows: let the section grow rather than crush
      the figures. The hold is dropped so nothing is left unreachable. ---*/
@media (min-width: 1024px) and (max-height: 500px) {
    .rnd {
        height: auto;
    }

    .rnd__pin {
        position: relative;
        height: auto;
    }

    .rnd__inner {
        padding: calc(var(--nav-height, 96px) + 40px) 0 60px;
    }
}

/*--- Small laptop: four figures across is tight, go two by two ---*/
@media (min-width: 1024px) and (max-width: 1199px) {
    .rnd__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px 0;
    }

    .rnd .rndStat:nth-child(odd) {
        padding-left: 0;
        border-left: none;
    }

    /* the pillars follow the figures: two across, so the second of each
       pair keeps its rule and the first starts the line clean */
    .rndModel {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 0;
    }

    .rndModel__item:nth-child(odd) {
        padding-left: 0;
        border-left: none;
    }
}

/*--- Tablet and below: no hold, the section is a plain stacked block.
      The picture stays behind the copy but at natural section height. ---*/
@media (max-width: 1023px) {
    .rnd {
        height: auto;
    }

    .rnd__pin {
        position: relative;
        height: auto;
        min-height: 0;
    }

    .rnd__inner {
        padding: var(--section-pad) 0;
    }

    .rnd__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px 0;
    }

    .rnd .rndStat:nth-child(odd) {
        padding-left: 0;
        border-left: none;
    }

    /* the pillars follow the figures: two across, so the second of each
       pair keeps its rule and the first starts the line clean */
    .rndModel {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 0;
    }

    .rndModel__item:nth-child(odd) {
        padding-left: 0;
        border-left: none;
    }
}

/*--- Large tablets in landscape (iPad Pro / Air): show the picture.

      These are 1024-1399 wide, so they take the desktop path — a held
      screen where the photograph is covered by the deep scrim as soon as
      the copy fades in. On a desktop that reads fine because you watch
      it happen; on a tablet the section is usually already past its
      first screen by the time it is looked at, so the picture is never
      seen at all.

      Here the section is unheld and the photograph gets a band of its
      own above the copy, the way it reads on the reference. Gated on
      pointer: coarse so laptops at the same widths keep the held
      version. ---*/
@media (max-width: 1399px) and (pointer: coarse), (max-width: 1023px) {
    .rnd {
        height: auto;
    }

    .rnd__pin {
        position: relative;
        height: auto;
        min-height: 0;
    }

    /* out of the backdrop and into the flow, as a band the copy sits
       under rather than on */
    .rnd__media {
        position: relative;
        inset: auto;
        height: 46vh;
        min-height: 320px;
        /* the push-in is scrubbed against a hold that no longer exists */
        transform: none !important;
    }

    .rnd__scrim {
        height: 46vh;
        min-height: 320px;
        bottom: auto;
    }

    /* the deep wash exists to make copy readable over the picture; with
       the copy underneath it there is nothing for it to do but hide the
       photograph */
    .rnd__scrim--deep {
        display: none;
    }

    .rnd__inner {
        height: auto;
        padding: clamp(30px, 4vw, 48px) 0 var(--section-pad);
    }

    /* the copy is revealed by the same scrubbed timeline, which without
       the hold never reaches its end — so it is simply shown */
    .js .rnd__stage {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .rnd__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px 0;
    }

    .rnd .rndStat:nth-child(odd) {
        padding-left: 0;
        border-left: none;
    }

    /* the pillars follow the figures: two across, so the second of each
       pair keeps its rule and the first starts the line clean */
    .rndModel {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 0;
    }

    .rndModel__item:nth-child(odd) {
        padding-left: 0;
        border-left: none;
    }
}

/*--- Small tablet 600 - 767 ---*/
@media (min-width: 600px) and (max-width: 767px) {
    .rnd__head {
        margin-bottom: 28px;
    }
}

/*--- Mobile: one figure per line, the rules turn horizontal so they
      still read as dividers rather than as a stray left edge ---*/
@media (max-width: 599px) {
    .rnd__stats {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .rnd .rndStat {
        padding: 20px 0;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.28);
    }

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

    .rnd .rndStat:last-child {
        padding-bottom: 0;
    }

    /* the pillars go one per line and keep their left rule off: at this
       width the disc and its heading already read as one unit */
    .rndModel {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .rndModel__item {
        min-height: 0;
        padding-left: 0;
        border-left: none;
    }
}

/*--- Phones turned on their side: the hold would trap the copy ---*/
@media (orientation: landscape) and (max-height: 500px) {
    .rnd {
        height: auto;
    }

    .rnd__pin {
        position: relative;
        height: auto;
    }

    .rnd__inner {
        padding: calc(var(--nav-height, 96px) + 28px) 0 40px;
    }

    .rnd__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 0;
    }

    .rnd .rndStat:nth-child(odd) {
        padding-left: 0;
        border-left: none;
        border-top: none;
    }

    .rndModel {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 0;
    }

    .rndModel__item:nth-child(odd) {
        padding-left: 0;
        border-left: none;
    }
}

/* the push-in is a scrubbed transform, so it simply never runs — but the
   scale it starts from is inline on the element until GSAP clears it */
@media (prefers-reduced-motion: reduce) {
    .rnd__media {
        transform: none !important;
    }

    .rnd__img {
        transform: none !important;
    }
}


/*=====================================================================
   Digital Capabilities
   The statement and the slider sit side by side on a desktop and stack
   from the tablet tier down, statement first — it frames the areas, so
   it has to come before them. Only the layout changes here; the type is
   on the fluid scale and needs no tier of its own.
=====================================================================*/

/*--- Tablet and below: the two columns stack ---*/
@media (max-width: 1023px) {
    .dgx__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
        align-items: start;
    }
}


/*=====================================================================
   Corporate Overview
=====================================================================*/

/*--- Tablet and below: the rail keeps its gutter but tightens, since
      the column it runs down is narrower ---*/
@media (max-width: 1023px) {
    .capTrack {
        padding-left: 26px;
    }

    .capList__dot {
        left: -31px;
    }
}

/*--- Mobile ---*/
@media (max-width: 599px) {
    .capTrack {
        padding-left: 22px;
    }

    .capList__dot {
        left: -27px;
        width: 10px;
        height: 10px;
    }
}

/* the markers still light — which statement you have reached is
   information — but nothing travels to get there */
@media (prefers-reduced-motion: reduce) {
    .capList__item,
    .capList__dot,
    .capList__text,
    .capRail__fill {
        transition: none;
    }

    .capList__item {
        opacity: 1;
        transform: none;
    }
}

/* on paper there is no scroll to fill the rail, so every statement is
   shown in its reached state */
@media print {
    .capList__item {
        opacity: 1;
        transform: none;
    }

    .capRail {
        display: none;
    }
}

/*=====================================================================
   Our Offerings
=====================================================================*/

/*--- Tablet: three across is too narrow for the variant strings, so
      the columns stack, one under the next, with the rule between them
      turning horizontal ---*/
@media (max-width: 1023px) {
    .offerGrid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        row-gap: 26px;
    }

    /* one under the next, each card is its own height again */
    .offerGrid > .offerCard {
        grid-template-rows: none;
        grid-row: auto;
    }

    .offerGrid > .offerCard + .offerCard {
        padding-left: 0;
        border-left: none;
        padding-top: 26px;
        border-top: 1px solid rgba(11, 53, 84, 0.14);
    }

    .offerCard__body {
        display: grid;
        grid-template-columns: 1fr;
        align-content: start;
        gap: 22px;
    }

    /* the rule between the halves only makes sense side by side */
    .offerCard__body > .offerCol + .offerCol {
        padding-left: 0;
        border-left: none;
        padding-top: 22px;
        border-top: 1px solid rgba(11, 53, 84, 0.14);
    }

    /* stacked, the lists have the room to show without their own scroll */
    .offerList,
    .offerCol__scroll {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }
}

/*--- Phones: the card head is what breaks out.

      Icon, title, badge and index all sit on one line. The icon, badge
      and index are fixed widths that will not shrink, so on a 375px
      screen the title is squeezed to about 120px — narrower than the
      word "Solutions" — and since a title is ordinary copy with no
      break inside it, it runs straight out of the card and pushes the
      badge past the right edge with it.

      The head is given a definite first line instead: icon and title,
      with the badge and the index wrapping under them. ---*/
@media (max-width: 767px) {
    .offerCard__head,
    .offerGrid .offerCard__head {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    /* the title takes what is left of the line after the icon and the
       index, wrapping inside that, so the index stays on the first line
       with them; the badge still drops under, as it does on desktop */
    .offerCard__title,
    .offerGrid .offerCard__title {
        flex: 1 1 0;
        min-width: 0;
        overflow-wrap: break-word;
    }

    /* nothing in the body may set the card's width either */
    .offerCard__body > .offerCol,
    .offerCol__scroll,
    .offerBlock,
    .offerList,
    .offerList li {
        min-width: 0;
    }
}

/*--- Phones: the two boards are chosen from a select.

      "Engineering Excellence Proven in the Field" does not fit a phone
      as a tab and does not read as one wrapped over three lines either.
      A select gives the whole label the room of the system's own picker
      and gives the section back the vertical space two stacked tabs
      were taking. ---*/
@media (max-width: 767px) {
    .offerings__tabs {
        display: none;
    }

    .offerings__pick {
        display: block;
        margin-bottom: 14px;
    }
}

/*--- Mobile: one of everything per line ---*/
@media (max-width: 599px) {
    .offerProjects {
        grid-template-columns: 1fr;
    }
}

/* the board change is the only motion here */
@media (prefers-reduced-motion: reduce) {
    .offerPanel,
    .offerTab,
    .offerings__ind {
        transition: none;
    }

    .offerPanel {
        transform: none;
    }
}

/* both boards belong on paper, and neither can be left mid-change */
@media print {
    .offerings__tabs {
        display: none;
    }

    .offerings__stage {
        display: block;
    }

    .offerPanel {
        opacity: 1;
        visibility: visible;
        transform: none;
        page-break-inside: avoid;
    }
}

/*=====================================================================
   Leadership Messages
=====================================================================*/

/*--- 1920 x 1080 and up ---*/
@media (min-width: 1800px) {
    .leadPanel__figure img {
        max-height: 640px;
    }
}

/*--- Small laptop: the halves hold, but the quote needs the gap back ---*/
@media (min-width: 1024px) and (max-width: 1199px) {
    .leadPanel__grid {
        gap: 0 24px;
    }
}

/*--- Tablet and below: the panel keeps its two halves, but the portrait
      gives up a little of its own so the quote is not left a column of
      single words. ---*/
@media (max-width: 1023px) {
    .leadPanel {
        min-height: 0;
    }

    .leadPanel__body {
        padding-bottom: clamp(8px, 1vw, 14px);
    }

    .leadPanel__aside {
        margin-bottom: clamp(24px, 3vw, 40px);
    }
}

/*--- Tablet 768 - 1023 ---*/
/*--- Small tablet 600 - 767 ---*/
@media (min-width: 600px) and (max-width: 767px) {
    .leadPanel__figure img {
        max-height: 440px;
    }
}

/*--- Below 768px the deck is dropped: a screen-tall frame holding a
      stacked portrait-over-copy layout leaves most of the message below
      the fold, and the script leaves the cards alone at this width. ---*/
@media (max-width: 767px) {
    .leadDeck__tail {
        display: none;
    }

    .leadCard {
        position: relative;
        top: auto;
        height: auto;
        z-index: auto;
    }

    .leadCard__scale {
        position: relative;
        inset: auto;
        display: block;
        padding: 0;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }

    .leadCard .leadPanel {
        height: auto;
    }

    .leadCard .leadPanel__grid {
        height: auto;
    }
}

/* held on a screen too short to hold it, a card's foot sits below the
   fold for its whole run */
@media (min-width: 768px) and (max-height: 500px) {
    .leadDeck__tail {
        display: none;
    }

    .leadCard {
        position: relative;
        height: auto;
    }

    .leadCard__scale {
        position: relative;
        inset: auto;
        padding: 40px 0;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }

    .leadCard .leadPanel,
    .leadCard .leadPanel__grid {
        height: auto;
    }
}

/*--- Tablets: the message reads first, the portrait follows.

      Side by side, a 768-1023px panel gives the copy about 400px and
      the portrait about 300px — the quote box crushes and the cut-out
      is too small to be a portrait. Stacked, the copy has the full
      width and the photograph sits under it at a size worth showing.

      The hold goes with it: a screen-tall frame around a stacked
      panel leaves half of it below the fold. ---*/
@media (min-width: 768px) and (max-width: 1023px) {
    .leadDeck__tail {
        display: none;
    }

    .leadCard {
        position: relative;
        top: auto;
        height: auto;
        z-index: auto;
    }

    .leadCard__scale {
        position: relative;
        inset: auto;
        display: block;
        padding: 0;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }

    .leadCard .leadPanel,
    .leadCard .leadPanel__grid {
        height: auto;
        max-height: none;
    }

    .leadPanel__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        align-content: start;
        padding: clamp(26px, 3.4vw, 40px) clamp(22px, 2.6vw, 34px) 0;
        gap: 0;
    }

    /* the title, then the quote, then the portrait under both */
    .leadPanel__body {
        grid-column: 1;
        grid-row: auto;
        order: 1;
        align-self: auto;
        padding-bottom: 14px;
    }

    .leadPanel__aside {
        grid-column: 1;
        grid-row: auto;
        order: 2;
        margin: 0 0 clamp(24px, 3vw, 36px);
    }

    .leadCard .leadPanel__aside {
        margin-bottom: clamp(24px, 3vw, 36px);
    }

    .leadPanel__figure {
        grid-column: 1;
        grid-row: auto;
        order: 3;
        margin-bottom: 0;
        justify-content: center;
        overflow: visible;
    }

    .leadPanel__figure img,
    .leadCard .leadPanel__figure img {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 420px;
        object-position: bottom center;
    }

    /* stacked, the copy runs the full width, so the scrim darkens from
       the foot rather than from one side */
    .leadPanel__scrim {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.45) 42%, rgba(0, 0, 0, 0.15) 100%);
    }

    /* the line reaching towards a portrait beside the quote has nothing
       to reach for once the portrait is underneath it */
    .leadPanel__card {
        border-left: 1px solid #ffffff;
    }

    .leadPanel__card::before,
    .leadPanel__card::after,
    .leadPanel__notch {
        display: none;
    }
}

/*--- Stacked: with the portrait no longer beside the quote there is
      nothing for the line to reach towards, so the box closes up. ---*/
@media (max-width: 767px) {
    .leadPanel__card {
        padding: 22px;
        border-left: 1px solid #ffffff;
    }

    .leadPanel__card::before,
    .leadPanel__card::after,
    .leadPanel__notch {
        display: none;
    }
}

/*--- Mobile: one column throughout. The cut-out goes behind the copy as
      a faded ground rather than beside it — beside it at this width it
      would be a thumbnail of a face. ---*/
@media (max-width: 599px) {
    .leadPanel__grid {
        grid-template-columns: 1fr;
        padding: 26px 20px 0;
        gap: 0;
    }

    .leadPanel__figure {
        grid-column: 1;
        grid-row: auto;
        order: 3;
        justify-content: center;
        margin-top: 24px;
    }

    .leadPanel__body,
    .leadPanel__aside {
        grid-column: 1;
        grid-row: auto;
    }

    /* The files are 450 x 510, and width: auto meant the ceiling below
       was doing the sizing — 380 of a possible 510, so the picture was
       being shown at three quarters of itself. Given the whole width of
       a phone the figure is larger and the ceiling is only there to stop
       it running away on a wide phone. */
    .leadPanel__figure img {
        width: 100%;
        max-height: 460px;
        object-fit: contain;
        object-position: bottom center;
    }

    .leadPanel__body {
        order: 1;
    }

    .leadPanel__aside {
        order: 2;
        grid-column: 1;
        margin: 22px 0 0;
    }
}

/*--- Phones turned on their side: keep the portrait beside the copy,
      there is width for it and no height to spare ---*/
@media (orientation: landscape) and (max-height: 500px) {
    .leadPanel__grid {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    }

    .leadPanel__figure {
        order: 0;
        grid-column: 1;
        grid-row: 1 / span 2;
        margin-top: 0;
    }

    .leadPanel__figure img {
        max-height: 300px;
        width: 100%;
    }

    .leadPanel__body {
        grid-column: 2;
        grid-row: 1;
    }

    .leadPanel__aside {
        order: 0;
        grid-column: 2;
        grid-row: 2;
        margin: 18px 0 26px;
    }
}

/*--- Room around the messages once they stop being held.

      Held, the deck needs none of this: each card is a screen of its
      own with 50px kept clear inside the frame, and one card rises over
      the last so there is no gap to see. Unheld they are two blocks
      stacked in the flow, touching each other and touching the sections
      either side — which is what the spacing below is for. ---*/
@media (max-width: 1023px) {
    .leadDeck {
        padding: var(--section-pad) 0;
    }

    /* the second message clears the first */
    .leadCard + .leadCard {
        margin-top: clamp(26px, 3.4vw, 44px);
    }

    /* the rule above the quote sat close under the top edge; the box is
       opened up so the line has ground above it */
    .leadPanel__card {
        padding-top: clamp(26px, 3.2vw, 38px);
    }

    /* Side by side the desktop panel places these by row, so the portrait
       spans the full height of the panel and stands on its floor.
       Stacked there is one column and the order is what matters, so the
       row placements are handed back. Written at the specificity the
       desktop rules use, and after the tiers that do the ordering — at
       plain .leadPanel__figure the desktop rule outranks it, and the
       portrait covers the message instead of following it. */
    .leadCard .leadPanel__body,
    .leadCard .leadPanel__aside,
    .leadCard .leadPanel__figure {
        grid-row: auto;
        align-self: auto;
    }

    /* The panel has a 460px floor so a short message does not read as a
       strip. Stacked, the message and the portrait together always clear
       that on their own — and any part of the floor they do not use is
       blank ground under the portrait's feet. */
    .leadCard .leadPanel {
        min-height: 0;
    }

    /* The four-row template is what was leaving the space.

       Held, the panel is a grid of an empty flexible row, the two copy
       rows, and a second empty flexible row — the two spacers are what
       centre the copy, and the portrait spans all four so it reaches the
       floor. Stacked, the three blocks are placed one per row in order,
       which puts the copy in rows 1 to 3 and leaves the fourth row —
       flexible, and below everything — as the gap under the portrait.

       The stacked tiers did reset this, but only on .leadPanel__grid,
       and the template is set on .leadCard .leadPanel__grid, which
       outranks them. Reset here at that specificity: three rows sized to
       their content, packed to the top. */
    .leadCard .leadPanel__grid {
        grid-template-rows: auto;
        align-content: start;
    }

    .leadPanel__figure {
        margin-bottom: 0;
    }

    .leadPanel__figure img {
        display: block;
        vertical-align: bottom;
    }

    /* The chairman's ground is a corridor that is lit at the far end, so
       the top of it is the brightest part of either panel and the
       heading and quote were sitting on the light. Darkened from the top
       down, and only on this one — the other panel's ground is already
       dark where its copy falls. */
    #leadPanel-chairman .leadPanel__scrim {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.78) 0%,
            rgba(0, 0, 0, 0.62) 38%,
            rgba(0, 0, 0, 0.3) 70%,
            rgba(0, 0, 0, 0.12) 100%
        );
    }
}

@media print {
    .leadPanel {
        page-break-inside: avoid;
    }

    .leadPanel__scrim {
        background: none;
    }
}


/*=====================================================================
   Performance Highlights
=====================================================================*/

/*--- 1920 x 1080 and up ---*/
@media (min-width: 1800px) {
    .perfGrid {
        --perf-gap: 56px;
    }
}

/*--- Small laptop: nine figures three across leaves the longer labels
      two words to a line ---*/
@media (min-width: 768px) and (max-width: 1199px) {
    .perfGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .perfStat:nth-child(3n + 1),
    .perfStat:nth-child(-n + 3) {
        padding-left: calc(var(--perf-gap) / 2);
        padding-top: calc(var(--perf-gap) / 2);
        border-left: 1px solid var(--perf-rule);
        border-top: 1px solid var(--perf-rule);
    }

    .perfStat:nth-child(2n + 1) {
        padding-left: 0;
        border-left: none;
    }

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

/*--- Tablet and below: the tab labels are long, so the strip is allowed
      to run to two rows rather than shrinking the type ---*/
@media (max-width: 767px) {
    .perfTab {
        padding: 12px 14px;
        white-space: normal;
        text-align: left;
    }

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

    /* Two labels this long do not fit a phone as a strip, and stacked as
       two blocks they take a third of the screen before a figure is
       shown. The board is chosen from a select instead, the same as Our
       Offerings — and the sliding block, which could not follow a
       wrapped row anyway, goes with the strip. */
    .perf__tabs {
        display: none;
    }

    .perf__pick {
        display: block;
        margin-bottom: 14px;
    }
}

/*--- Small tablet ---*/
@media (min-width: 600px) and (max-width: 767px) {
    .perfGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .perfStat:nth-child(3n + 1),
    .perfStat:nth-child(-n + 3) {
        padding-left: calc(var(--perf-gap) / 2);
        padding-top: calc(var(--perf-gap) / 2);
        border-left: 1px solid var(--perf-rule);
        border-top: 1px solid var(--perf-rule);
    }

    .perfStat:nth-child(2n + 1) {
        padding-left: 0;
        border-left: none;
    }

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

    .perfPanel .salesShareGrid {
        grid-template-columns: 1fr;
    }
}

/*--- Mobile: one figure per line, and the ring sits over its key rather
      than beside it ---*/
@media (max-width: 599px) {
    .perfGrid {
        --perf-gap: 30px;
        grid-template-columns: 1fr;
    }

    .perfStat {
        padding-left: 0;
        border-left: none;
    }

    .perfStat:nth-child(-n + 3) {
        padding-top: calc(var(--perf-gap) / 2);
        border-top: 1px solid var(--perf-rule);
    }

    .perfStat:first-child {
        padding-top: 0;
        border-top: none;
    }

    .perfPanel .salesShareGrid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/*--- Phones turned on their side ---*/
@media (orientation: landscape) and (max-height: 500px) {
    .perfGrid {
        --perf-gap: 24px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

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

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

/* the board change is the only motion here */
@media (prefers-reduced-motion: reduce) {
    .perfPanel,
    .perfTab {
        transition: none;
    }

    .perfPanel {
        transform: none;
    }
}

/* both boards belong on paper, and neither can be left mid-change */
@media print {
    .perf__tabs {
        display: none;
    }

    .perf__stage {
        display: block;
    }

    .perfPanel {
        opacity: 1;
        visibility: visible;
        transform: none;
        page-break-inside: avoid;
    }
}


/*=====================================================================
   Key Performance Indicators
=====================================================================*/

/*--- 1920 x 1080 and up ---*/
@media (min-width: 1800px) {
    .kpi__stage {
        max-width: 1160px;
        height: 420px;
    }
}

/*--- Small laptop ---*/
@media (min-width: 768px) and (max-width: 1199px) {
    .kpi__stage {
        height: clamp(330px, 38vw, 380px);
    }
}

/*--- Tablet and below ---*/
@media (max-width: 1023px) {
    .kpi__tabs {
        justify-content: flex-start;
    }
}

/*--- Mobile: one card on stage. The neighbours are dropped rather than
      shrunk — at this width they are two blurred slivers at the edges
      and read as damage, not as depth. ---*/
@media (max-width: 767px) {
    .kpi__stage {
        height: auto;
        min-height: 340px;
    }

    .kpi__track {
        position: relative;
        inset: auto;
        min-height: 340px;
    }

    .kpiCard {
        width: min(88vw, 400px);
    }

    .kpiCard:not(.is-active) {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/*--- Small mobile ---*/
@media (max-width: 400px) {
    .kpiCard {
        padding: 16px 14px;
    }
}

/*--- Phones turned on their side ---*/
@media (orientation: landscape) and (max-height: 500px) {
    .kpi__stage {
        height: 300px;
    }
}

/* the walk is stopped in the script; this is the wipe the graph arrives
   on, which has to go with it */
@media (prefers-reduced-motion: reduce) {
    .kpiCard,
    .kpiTab,
    .kpiTab__name,
    .kpiCard .kpiGraphImage {
        transition: none;
    }

    /* the chart is simply there rather than drawing itself in */
    .kpiCard.is-active .kpiGraphImage {
        animation: none;
    }

    .kpiTab.is-active .kpiTab__prog {
        transition: none;
    }
}

/* on paper the deck cannot be walked, so the graphs are laid out one
   after another instead of stacked on one spot */
@media print {
    .kpi__tabs {
        display: none;
    }

    .kpi__stage,
    .kpi__track {
        position: static;
        height: auto;
        max-width: none;
    }

    .kpiCard {
        position: static;
        width: auto;
        max-width: 480px;
        margin: 0 auto 20px;
        filter: none !important;
        box-shadow: none;
        page-break-inside: avoid;
    }

    /* the wipe never runs on paper, so the drawing has to be shown */
    .kpiCard .kpiGraphImage {
        opacity: 1;
        clip-path: none;
        transform: none;
    }
}


/*=====================================================================
   Sustainable Development
=====================================================================*/

/*--- 1920 x 1080 and up ---*/

/*--- Small laptop: the icon rail gives up its outer spacing first, it
      is the column with the least in it ---*/

/*--- Tablet and below: no hold. Three screens of track with nothing
      held on them is three screens of empty page, so the track
      collapses and the pillars are simply stacked. ---*/
@media (max-width: 1023px) {
    .sd {
        padding-bottom: var(--section-pad);
    }

    .sd__track {
        height: auto;
    }

    /* the rail turns into a marker beside the copy rather than a control:
       with every pillar on the page there is nothing left to switch */
    /* stacked, every pillar is shown at once — the panels are no longer
       three states of one cell */
}

/*--- Small tablet and mobile: the rail drops below the copy, since a
      column of discs beside it leaves the text a narrow gutter ---*/

/*--- Short desktop windows: a screen too short to hold the stage on
      would leave its foot below the fold for the whole run ---*/
@media (min-width: 1024px) and (max-height: 500px) {
    .sd__track {
        height: auto;
    }

}

/* the pillars still change; what goes is the travel they change on */

/* on paper the pillars cannot be walked, so all three are laid out */
@media print {
    .sd__track {
        height: auto;
    }

}


/*-----------Inner Pages Responsive-------------*/
@media (max-width: 1399px) {
    .innerBanner .bannerContent h1 {
        font-size: 32px;
        line-height: 44px;
    }
    .bannerQuote {
        max-width: 440px;
    }
    .pillarHead {
        flex: 0 0 260px;
    }
}

/* Key performance indicators */
@media (max-width: 991px) {
    .kpiPrimaryGrid,
    .kpiAnalysisGrid {
        column-gap: 30px;
    }
    .kpiStackPart b {
        font-size: 12px;
    }
    .stakeholderDetailGrid {
        grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr);
        gap: 30px;
    }
    .stakeholderDetailList {
        gap: 38px 26px;
    }
}

@media (max-width: 767px) {
    .kpiHero {
        min-height: 420px;
        padding: 26px 0 40px;
    }
    .kpiHero .container {
        min-height: 354px;
    }
    .kpiBreadcrumb {
        left: 12px;
    }
    .kpiEyebrow {
        font-size: 16px;
    }
    .kpiHero h1 {
        font-size: 36px;
        line-height: 48px;
    }
    .kpiPrimaryGrid,
    .kpiAnalysisGrid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .kpiChartHead h2 {
        font-size: 20px;
        line-height: 27px;
    }
    .kpiChartHead span,
    .kpiValue,
    .kpiYear,
    .kpiLineValue,
    .kpiLegend > span,
    .kpiGroupTitle span,
    .kpiGroupTitle small {
        font-size: 16px;
    }
    .kpiGroupTitle {
        flex-wrap: wrap;
        margin-bottom: 32px;
        font-size: 23px;
        line-height: 30px;
    }
    .kpiAnalysisGrid + .kpiGroupTitle {
        margin-top: 52px;
    }
    .stakeholderTitle {
        margin-bottom: 34px;
        font-size: 25px;
        line-height: 34px;
    }
    .shareholderStats,
    .stakeholderDetailGrid {
        grid-template-columns: 1fr;
    }
    .shareholderStats {
        gap: 26px;
    }
    .stakeholderStat strong,
    .stakeholderDetail strong {
        font-size: 34px;
        line-height: 42px;
    }
    .stakeholderDetailList {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 24px;
    }
    .stakeholderImage,
    .stakeholderImage img {
        min-height: 380px;
    }
}

@media (max-width: 575px) {
    .stakeholderDetailList {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .kpiChartHead {
        align-items: flex-start;
    }
    .kpiChartHead span {
        text-align: right;
    }
    .kpiBars {
        gap: 4px;
    }
    .kpiBarFill,
    .kpiStack {
        width: 22px;
    }
    .kpiValue,
    .kpiYear,
    .kpiLineValue {
        font-size: 14px;
    }
    .kpiStackPart b {
        left: calc(100% + 3px);
        font-size: 10px;
    }
    .kpiLegend {
        gap: 10px 16px;
    }
}

/*-----------Inner Pages Responsive-------------*/

@media (max-width: 1199px) {
    .innerBanner .bannerEyebrow {
        font-size: 15px;
        margin-bottom: 12px;
    }
    .innerBanner .bannerContent h1 {
        font-size: 30px;
        line-height: 42px;
    }
    .bannerQuote {
        max-width: 420px;
        padding: 26px 30px 26px 26px;
    }
    .pillarItem {
        gap: 30px;
    }
    .pillarHead {
        flex: 0 0 230px;
    }
    .metricsBox {
        padding: 30px 24px 6px;
    }
    .sdBlockHead {
        gap: 18px;
    }
    .legendBox {
        gap: 30px;
        padding: 26px 24px 16px;
    }
    .dlHead {
        font-size: 19px;
    }
}

@media (max-width: 991px) {
    /* banner : viewport height minus the shorter header strip */
    .innerBanner {
        min-height: calc(100vh - 74px);
        padding: 26px 0 55px;
    }
    .innerBanner.plainBanner {
        min-height: auto;
        padding: 0 0 6px;
    }
    .innerBanner .bannerEyebrow {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .innerBanner .bannerContent h1 {
        font-size: 36px;
        line-height: 48px;
    }
    .plainBanner .breadCrumb {
        margin-bottom: 22px;
    }

    /*--- Q&A quote box ---*/
    .bannerQuote {
        max-width: 100%;
        margin-top: 26px;
        padding: 24px 22px;
    }
    .bannerAuthor {
        max-width: 100%;
    }

    /*--- Q&A ---*/
    .qaQuestion {
        gap: 14px;
    }

    /*--- Sustainable development ---*/
    .sdIntro p {
        font-size: 17px;
        line-height: 28px;
    }
    /* framework pillars stack their title above the list */
    .pillarItem {
        gap: 24px;
        flex-direction: column;
    }
    .pillarHead {
        flex: 0 0 auto;
        width: 100%;
    }
    .pillarIcon {
        width: 56px;
    }
    .metricsBox {
        padding: 28px 22px 4px;
    }
    .sdBlockHead {
        gap: 16px;
    }
    .blockIcon {
        width: 56px;
    }
    .awardBox {
        min-height: 130px;
    }

    .bodStats {
        gap: 40px;
        padding-bottom: 24px;
    }
    .legendBox {
        gap: 24px;
        padding: 24px 20px 14px;
    }
    .legendKey {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: flex-start;
        width: 100%;
    }

    /*--- BRSR : section band scales down with the page ---*/
    .brsrSectionBand {
        min-height: 64px;
        margin-bottom: 24px;
    }
    .brsrSectionLabel {
        width: 140px;
        height: 36px;
        padding: 0 30px 0 18px;
        font-size: 18px;
        line-height: 24px;
    }
    .brsrSectionLabel::after {
        right: -18px;
        width: 18px;
        height: 36px;
    }
    .brsrSectionLetter {
        width: 88px;
        height: 46px;
        margin-left: -11px;
        font-size: 22px;
        line-height: 26px;
    }
    .brsrSectionLetter::before,
    .brsrSectionLetter::after {
        width: 24px;
        height: 64px;
    }
    .brsrSectionLetter::before {
        left: -23px;
    }
    .brsrSectionLetter::after {
        right: -23px;
    }
    .brsrSectionName {
        height: 36px;
        margin-left: -11px;
        padding: 0 14px 0 27px;
        font-size: 18px;
        line-height: 24px;
    }
    .brsrSectionName::after {
        left: -18px;
        width: 18px;
        height: 36px;
    }
    /* the table keeps its column widths and scrolls inside its own box */
    .brsrTableWrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /*--- Prev / next stack one below the other ---*/
    .prevNextWrap {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .pnBtn {
        max-width: 100%;
        width: 100%;
    }
    .pnNext {
        margin-left: 0;
        justify-content: flex-end;
    }
}

@media (max-width: 767px) {
    /* mobile banner artwork (pages that carry a photograph) */
    .innerBanner:not(.plainBanner) {
        /* background-image: url(../images/chairman-message/chairman-bg-img.webp); */
        padding: 22px 0 0px;
    }
    .innerBanner.plainBanner{
        margin-bottom: 25px;
    }
    .innerBanner .bannerPatch {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.72) 100%);
    }

   
    .innerBanner .bannerContent h1,
    .plainBanner .bannerContent h1 {
        font-size: 26px;
        line-height: 34px;
    }
    .breadCrumb ul {
        gap: 6px;
    }
    .breadCrumb ul li,
    .breadCrumb ul li a,
    .breadCrumb ul li span {
        font-size: 13px;
        line-height: 20px;
    }

    /*--- Q&A quote box : the notch would overhang the column, so the right
          edge closes up into a plain border ---*/
    .bannerQuote {
        padding: 20px 18px;
        border-right: 1px solid var(--color-white);
    }
    .bannerQuote::before,
    .bannerQuote::after,
    .bannerQuote .quoteNotch {
        display: none;
    }
    .bannerQuote .quoteDash {
        margin-bottom: 16px;
    }
    .bannerQuote p {
        font-size: 15px;
        line-height: 26px;
    }
    .bannerAuthor {
        text-align: left;
    }

    /*--- Q&A ---*/
    .qaItem {
        padding-bottom: 26px;
    }
    .qaQuestion {
        gap: 12px;
        margin-bottom: 12px;
    }
    .qaQuestion h2 {
        line-height: 26px;
    }

    /*--- Chairman's message ---*/
    .chairmanIntro .introAuthor span {
        padding-bottom: 10px;
    }
    .contentBlock h2 {
        font-size: 18px;
        line-height: 28px;
        margin: 22px 0 10px;
    }
    .contentBlock .pullQuote {
        margin: 22px 0;
        padding-left: 14px;
    }
    .contentBlock .pullQuote p {
        font-size: 16px;
        line-height: 26px;
    }
    .signBlock {
        margin-top: 26px;
    }
    .signBlock .signImg img {
        max-width: 160px;
    }
    .contentImg {
        margin-top: 26px;
    }

    /*--- Sustainable development ---*/
    .sdIntro p {
        font-size: 16px;
        line-height: 26px;
    }
    .secHead {
        font-size: 18px;
        line-height: 28px;
    }
    .subHead {
        margin: 22px 0 14px;
    }
    /* one bullet per row on phones */
    .pillarList li {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
    }
    .metricItem h3,
    .metricUnit {
        font-size: 26px;
        line-height: 34px;
    }
    .sdBlockHead {
        flex-direction: column;
        gap: 12px;
    }
    .blockIcon {
        width: 50px;
    }
    .ruleItem {
        margin-bottom: 24px;
    }
    .awardBox {
        min-height: auto;
        padding: 28px 18px 24px;
    }
    .readMore {
        font-size: 14px;
        gap: 8px;
    }
    .readMore img {
        width: 26px;
    }
    .sdImg {
        margin: 6px 0 24px;
    }

    /*--- Board of directors : portrait on top, every detail flush left below it ---*/
    .bodCard {
        margin-bottom: 30px;
    }
    .bodTop {
        gap: 16px;
        padding-bottom: 18px;
    }
    .bodImg {
        width: 100%;
        max-width: 100%;
    }
    .bodImg img {
        height: 300px;
    }
    .bodInfo {
        width: 100%;
        min-width: 0;
        padding: 0 16px;
    }
    .bodInfo h3 {
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 6px;
    }
    .bodDesig {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 12px;
    }
    .bodInfo p {
        font-size: 16px;
        line-height: 24px;
    }
    .cmBadge {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
    .cmList {
        max-width: 180px;
    }
    .bodCommittee {
        gap: 10px;
    }
    /* the badge grid keeps its 5-per-row cap so the card cannot outgrow the column */
    .bodCard,
    .bodCommittee {
        max-width: 100%;
    }
    .bodInfo {
        min-width: 0;
    }
    .bodStats {
        gap: 26px;
    }
    .bodStat h3 {
        font-size: 26px;
        line-height: 34px;
    }
    .legendBox {
        padding: 20px 16px 10px;
    }
    .legendCol {
        flex: 1 1 100%;
    }

    /*--- Download centre ---*/
    .dlHead {
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 16px;
    }
    .dlItem {
        gap: 12px;
        margin-bottom: 14px;
    }
    .dlItem.dlFull {
        margin-top: 20px;
    }
    .dlFull label {
        font-size: 16px;
    }
    .dlBtn {
        padding: 14px 26px;
        font-size: 15px;
    }

    /*--- BRSR ---*/
    .brsrSectionBand {
        min-height: 54px;
        margin-bottom: 20px;
    }
    .brsrSectionLabel {
        width: 110px;
        height: 32px;
        padding: 0 24px 0 12px;
        font-size: 16px;
        line-height: 20px;
    }
    .brsrSectionLabel::after {
        right: -14px;
        width: 14px;
        height: 32px;
    }
    .brsrSectionLetter {
        width: 70px;
        height: 40px;
        margin-left: -9px;
        font-size: 20px;
        line-height: 24px;
    }
    .brsrSectionLetter::before,
    .brsrSectionLetter::after {
        width: 20px;
        height: 54px;
    }
    .brsrSectionLetter::before {
        left: -19px;
    }
    .brsrSectionLetter::after {
        right: -19px;
    }
    .brsrSectionName {
        height: 32px;
        margin-left: -9px;
        padding: 0 10px 0 23px;
        font-size: 15px;
        line-height: 20px;
    }
    .brsrSectionName::after {
        left: -14px;
        width: 14px;
        height: 32px;
    }
    .brsrDetailBlock {
        gap: 18px;
    }
    .brsrDetailIcon,
    .brsrDetailIcon img {
        width: 42px;
        flex-basis: 42px;
    }
    .brsrDetailContent h2 {
        gap: 14px;
        margin: 26px 0 12px;
    }
    .brsrTableWrap {
        width: calc(100% + 60px);
        margin-left: -60px;
    }
    .brsrDownloadWrap {
        margin-left: -60px;
    }
    .brsrDownloadBtn {
        padding: 8px 14px;
        font-size: 16px;
        line-height: 22px;
    }

    /*--- Prev / next ---*/
    .prevNextSec {
        padding: 40px 0;
    }
    .prevNextWrap {
        padding-top: 26px;
    }
    .pnBtn {
        padding: 14px 18px;
        gap: 14px;
    }
    .pnArrow {
        width: 42px;
        height: 42px;
    }
    .pnArrow svg {
        width: 20px;
        height: 13px;
    }
}



/*-----------Corporate Overview Sections-------------*/
@media (max-width: 991px) {
    .standItem {
        padding-right: 0;
        margin-bottom: 26px;
    }
    .valuesIntroTxt {
        padding: 28px 26px 30px;
    }
    .valuesCards .row {
        row-gap: 25px;
    }
    .valueBox {
        min-height: 210px;
    }
}

@media (max-width: 767px) {
    .whereWeStand .secTitle,
    .valuesIntroTxt h2 {
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 22px;
    }
    .standItem .itemRule {
        width: 44px;
        margin-bottom: 11px;
    }
    .valuesIntroTxt p {
        line-height: 26px;
    }
    .valueIcon {
        height: 66px;
        margin-bottom: 16px;
    }
    .valueIcon img {
        width: 58px;
        height: 58px;
    }
    .valueBox {
        min-height: 0;
        padding: 28px 22px 36px;
    }
}

/*-----------Our Core Principles-------------*/
@media (max-width: 991px) {
    .principleBox {
        padding: 22px 22px 30px;
    }
    .principleNote {
        margin-top: 34px;
    }
    .principleNote p {
        font-size: 16px;
        line-height: 28px;
    }
}

@media (max-width: 767px) {
    .principleBox h2 {
        font-size: 17px;
        line-height: 24px;
    }
    .principleNote {
        padding-left: 16px;
        border-left-width: 3px;
    }
    .principleNote p {
        font-size: 16px;
        line-height: 26px;
    }
}

/*-----------Globally Diversified Presence-------------*/
@media (max-width: 1199px) {
    .globalPresenceCopy p {
        font-size: 16px;
    }
    .globalLegend {
        column-gap: 42px;
        padding-right: 12px;
        padding-left: 12px;
    }
}

@media (max-width: 991px) {
    .globalPresenceSec {
        padding: 46px 0 54px;
    }
    .globalPresenceTitle {
        margin-bottom: 30px;
        font-size: 26px;
        line-height: 34px;
    }
    .globalMap {
        margin-top: 34px;
    }
    .globalLegend {
        grid-template-columns: 1fr;
        row-gap: 20px;
        padding-top: 34px;
    }
    .legendManufacturing,
    .legendOffice {
        grid-column: auto;
        grid-row: auto;
    }
    .globalMapNote {
        margin-top: 54px;
    }
}

@media (max-width: 767px) {
    .globalPresenceSec {
        padding: 38px 0 44px;
    }
    .globalBreadcrumbRow {
        margin-bottom: 24px;
    }
    .globalPresenceTitle {
        margin-bottom: 24px;
        font-size: 22px;
        line-height: 30px;
    }
    .globalPresenceCopy p {
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 26px;
    }
    .globalMap {
        margin-top: 28px;
    }
    .globalLegend {
        row-gap: 18px;
        padding: 28px 0 0;
    }
    .legendItem {
        align-items: flex-start;
        gap: 12px;
        font-size: 16px;
        line-height: 24px;
    }
    .legendItem br {
        display: none;
    }
    .legendIcon {
        flex-basis: 26px;
        width: 26px;
        height: 32px;
    }
    .legendDot {
        flex-basis: 15px;
        width: 15px;
        height: 15px;
        margin-top: 4px;
    }
    .globalMapNote {
        margin: 42px 0 0;
    }
    .globalMapNote .noteRule {
        width: 58px;
    }
    .globalMapNote p {
        font-size: 16px;
        line-height: 23px;
    }
}

/*-----------Our Offerings-------------*/
@media (max-width: 1199px) {
    .innerBanner.offeringsBanner .bannerContent h1 {
        max-width: 920px;
    }
    .offeringRow {
        grid-template-columns: 36% 64%;
    }
    .offeringProduct,
    .aftermarketSide,
    .technologyColumn:first-child {
        padding-right: 28px;
    }
    .offeringUses,
    .aftermarketMain,
    .technologyApplications {
        padding-left: 30px;
    }
}

@media (max-width: 991px) {
    .innerBanner.offeringsBanner {
        min-height: 540px;
    }
    .innerBanner.offeringsBanner .offeringsEyebrow {
        margin-bottom: 16px;
        font-size: 17px;
    }
    .innerBanner.offeringsBanner .bannerContent h1 {
        margin-bottom: 24px;
        font-size: 36px;
        line-height: 48px;
    }
    .innerBanner.offeringsBanner .bannerContent p {
        font-size: 16px;
        line-height: 1.42;
    }
    .offeringsSectionTitle,
    .engineeringExcellence > .container > h2 {
        font-size: 24px;
        line-height: 32px;
    }
    .offeringGroup + .offeringGroup {
        margin-top: 50px;
    }
    .offeringRow,
    .aftermarketPanel,
    .technologyPanel {
        grid-template-columns: 1fr;
    }
    .offeringProduct,
    .aftermarketSide,
    .technologyColumn:first-child {
        padding: 0 0 26px;
    }
    .offeringUses,
    .aftermarketMain,
    .technologyApplications {
        padding: 26px 0 0;
        border-top: 1px solid var(--color-orange);
        border-left: 0;
    }
    .offeringRowBottom .offeringProduct {
        padding-bottom: 26px;
    }
    .capacityLabel {
        position: static;
        display: inline-block;
        margin: 22px 0 0 38px;
        padding: 0 0 5px;
        font-size: 18px;
        line-height: 24px;
        writing-mode: horizontal-tb;
        transform: none;
        border-bottom: 2px solid #222;
        background: transparent;
    }
    .capacityLabel::before,
    .capacityLabel::after {
        display: none;
    }
    .fieldCase h3 {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .innerBanner.offeringsBanner {
        min-height: 0;
        padding-bottom: 42px;
    }
    .innerBanner.offeringsBanner .offeringsEyebrow {
        margin-bottom: 12px;
        font-size: 15px;
    }
    .innerBanner.offeringsBanner .bannerContent h1 {
        margin-bottom: 20px;
        font-size: 36px;
        line-height: 48px;
    }
    .innerBanner.offeringsBanner .bannerContent h1 br {
        display: none;
    }
    .innerBanner.offeringsBanner .bannerContent p {
        font-size: 16px;
        line-height: 25px;
    }
    .offeringsSectionTitle,
    .engineeringExcellence > .container > h2 {
        margin-bottom: 24px;
        font-size: 21px;
        line-height: 28px;
    }
    .offeringGroupHead {
        gap: 12px;
        margin-left: 0;
    }
    .offeringGroupIcon {
        flex-basis: 72px;
        width: 72px;
        height: 72px;
    }
    .offeringGroupHead h3 {
        font-size: 18px;
        line-height: 24px;
    }
    .productPanel,
    .aftermarketPanel,
    .technologyPanel {
        margin-left: 0;
    }
    .offeringRow {
        margin-right: 18px;
        margin-left: 18px;
    }
    .aftermarketPanel,
    .technologyPanel {
        padding: 24px 20px;
    }
    .capacityLabel {
        margin-left: 18px;
    }
    .offeringPanel h4 {
        font-size: 17px;
        line-height: 23px;
    }
    .offeringPanel p,
    .offeringPanel li {
        font-size: 16px;
        line-height: 22px;
    }
    .offeringPanel br {
        display: none;
    }
    .offeringFootnote {
        margin-left: 0;
    }
    .engineeringExcellence {
        padding: 38px 0 42px;
    }
    .fieldCase + .fieldCase {
        margin-top: 36px;
    }
    .fieldCase h3 {
        gap: 12px;
        padding: 13px 16px;
        font-size: 18px;
        line-height: 1.3;
    }
    .fieldCase h3 br {
        display: none;
    }
    .fieldArrow {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }
    .fieldArrow::before,
    .fieldArrow::after {
        top: 10px;
        height: 17px;
    }
    .fieldArrow::before { left: 7px; }
    .fieldArrow::after { left: 14px; }
    .fieldCase p {
        font-size: 16px;
        line-height: 21px;
    }
}

/*-----------Our Strengths-------------*/
@media (max-width: 1199px) {
    .innerBanner.strengthsBanner .bannerContent p {
        font-size: 16px;
    }
    .strengthCardHead {
        grid-template-columns: 90px minmax(0, 1fr);
    }
    .strengthIcon {
        width: 78px;
        height: 78px;
    }
    .strengthCardHead h2 {
        font-size: 20px;
    }
    .strengthCard li {
        font-size: 16px;
    }
}

@media (max-width: 991px) {
    .innerBanner.strengthsBanner {
        min-height: 500px;
    }
    .strengthsEyebrow {
        margin-bottom: 15px;
        font-size: 17px;
    }
    .innerBanner.strengthsBanner .bannerContent h1 {
        margin-bottom: 20px;
        font-size: 36px;
        line-height: 48px;
    }
    .certificationPanel {
        gap: 32px;
        padding-right: 28px;
        padding-left: 28px;
    }
    .strengthsGrid {
        row-gap: 42px;
    }
    .strengthCardHead {
        grid-template-columns: 104px minmax(0, 1fr);
    }
    .strengthIcon {
        width: 92px;
        height: 92px;
    }
    .strengthCardHead h2 {
        font-size: 20px;
    }
    .strengthCard li {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .innerBanner.strengthsBanner {
        min-height: 0;
        padding-bottom: 42px;
    }
    .innerBanner.strengthsBanner .bannerContent h1 {
        font-size: 36px;
        line-height: 48px;
    }
    .innerBanner.strengthsBanner .bannerContent p {
        font-size: 16px;
        line-height: 25px;
    }
    .strengthsCertifications h2 {
        margin-left: 0;
        font-size: 20px;
        line-height: 28px;
    }
    .certificationPanel {
        grid-template-columns: 1fr;
        gap: 46px;
        padding: 26px 22px;
    }
    .certificationItem h3 {
        font-size: 18px;
        line-height: 25px;
    }
    .certificationItem p {
        font-size: 16px;
        line-height: 23px;
    }
    .strengthsGridSec {
        padding-top: 46px;
    }
    .strengthsGrid {
        row-gap: 36px;
    }
    .strengthCard {
        padding: 0 0 30px;
    }
    .strengthCardHead {
        grid-template-columns: 82px minmax(0, 1fr);
        min-height: 88px;
        margin-bottom: 22px;
        padding-left: 8px;
    }
    .strengthIcon {
        width: 72px;
        height: 72px;
    }
    .strengthCardHead h2 {
        min-height: 88px;
        padding: 13px 15px;
        font-size: 20px;
        line-height: 1.22;
    }
    .strengthCardHead h2 br {
        display: none;
    }
    .strengthCard li {
        padding-left: 22px;
        font-size: 16px;
        line-height: 24px;
    }
    .strengthCard li::before {
        width: 8px;
        height: 8px;
    }
}

/*-----------Research & Development-------------*/
@media (max-width: 1199px) {
    .rndStatsGrid {
        column-gap: 42px;
    }
    .rndModelItem {
        grid-template-columns: 270px minmax(0, 1fr);
        gap: 34px;
    }
    .rndModelLabel {
        grid-template-columns: 84px minmax(0, 1fr);
    }
    .rndNumber {
        width: 60px;
        height: 60px;
        font-size: 30px;
    }
    .rndModelLabel h3 {
        font-size: 19px;
    }
}

@media (max-width: 991px) {
    .innerBanner.rndBanner {
        min-height: 520px;
    }
    .rndEyebrow {
        margin-bottom: 15px;
        font-size: 17px;
    }
    .innerBanner.rndBanner .bannerContent h1 {
        margin-bottom: 20px;
        font-size: 36px;
        line-height: 48px;
    }
    .ipModel {
        grid-template-columns: 1fr;
    }
    .ipApproach {
        margin: -2px -2px 0;
        padding: 30px 32px 56px;
        clip-path: none;
    }
    .ipArrow {
        right: 50%;
        top: auto;
        bottom: -34px;
        width: 68px;
        height: 68px;
        transform: translateX(50%) rotate(90deg);
    }
    .ipArrow::before,
    .ipArrow::after {
        top: 21px;
    }
    .ipOutcomes {
        padding: 58px 32px 26px;
    }
    .rndStatsGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .rndTechnology {
        grid-column: span 1;
    }
    .rndModelItem {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 30px;
    }
    .rndModelLabel {
        grid-template-columns: 76px minmax(0, 1fr);
    }
    .rndNumber {
        width: 56px;
        height: 56px;
        font-size: 28px;
    }
    .rndModelLabel h3 {
        padding-top: 8px;
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .innerBanner.rndBanner {
        min-height: 0;
        padding-bottom: 42px;
    }
    .innerBanner.rndBanner .bannerContent h1 {
        font-size: 36px;
        line-height: 48px;
    }
    .innerBanner.rndBanner .bannerContent p {
        font-size: 16px;
        line-height: 25px;
    }
    .rndIpSec,
    .rndModelSec {
        padding: 0 0 30px;
    }
    .rndSectionTitle {
        margin-bottom: 26px;
        font-size: 23px;
        line-height: 31px;
    }
    .ipApproach,
    .ipOutcomes {
        padding-right: 22px;
        padding-left: 22px;
    }
    .ipApproach h3,
    .ipOutcomes h3 {
        margin-bottom: 20px;
        font-size: 21px;
        line-height: 28px;
    }
    .ipApproach li,
    .ipOutcomes li,
    .rndModelItem li {
        font-size: 16px;
    }
    .rndStatsGrid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .rndStat strong {
        font-size: 30px;
    }
    .rndTechnology h3 {
        font-size: 30px;
        line-height: 38px;
    }
    .rndModelList {
        gap: 52px;
    }
    .rndModelItem {
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .rndModelLabel {
        grid-template-columns: 76px minmax(0, 1fr);
        min-height: 120px;
        padding-bottom: 18px;
    }
    .rndModelLabel h3 {
        font-size: 19px;
        line-height: 1.28;
    }
}

@media (max-width: 991px) {
    .rndProductsSec {
        padding-top: 48px;
    }
    .rndProductsTable {
        min-width: 900px;
    }
    .rndProductImage {
        margin-top: 42px;
    }
}

@media (max-width: 767px) {
    .rndProductsSec {
        padding-top: 42px;
    }
    .rndProductsIntro {
        margin-top: -12px;
        font-size: 16px;
        line-height: 25px;
    }
    .rndProductsTable {
        min-width: 820px;
    }
    .rndProductsTable th,
    .rndProductsTable td {
        padding: 9px 10px;
        font-size: 16px;
    }
    .rndProductImage {
        margin-top: 34px;
    }
}

/*-----------Digital Capabilities-------------*/
@media (max-width: 1199px) {
    .digitalColumns {
        grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    }
    .initiativeRow {
        grid-template-columns: 195px minmax(0, 1fr);
    }
    .initiativeRow::after {
        left: 176px;
        width: 19px;
    }
    .initiativeRow h5 {
        font-size: 16px;
    }
}

@media (max-width: 991px) {
    .innerBanner.digitalBanner {
        min-height: 520px;
    }
    .digitalEyebrow {
        margin-bottom: 15px;
        font-size: 17px;
    }
    .innerBanner.digitalBanner .bannerContent h1 {
        margin-bottom: 20px;
        font-size: 36px;
        line-height: 48px;
    }
    .digitalColumns {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .digitalImpact {
        padding-left: 0;
    }
    .initiativeRow {
        grid-template-columns: 220px minmax(0, 1fr);
    }
    .initiativeRow::after {
        left: 198px;
        width: 22px;
    }
}

@media (max-width: 767px) {
    .innerBanner.digitalBanner {
        min-height: 0;
        padding-bottom: 42px;
    }
    .innerBanner.digitalBanner .bannerContent h1 {
        font-size: 36px;
        line-height: 48px;
    }
    .innerBanner.digitalBanner .bannerContent p {
        font-size: 16px;
        line-height: 25px;
    }
    .digitalSectionTitle {
        margin-bottom: 28px;
        font-size: 23px;
        line-height: 31px;
    }
    .digitalGroup > h3 {
        font-size: 20px;
        line-height: 28px;
    }
    .digitalInitiatives > h4,
    .digitalImpact > h4 {
        font-size: 17px;
        line-height: 24px;
    }
    .initiativeRow {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .initiativeRow h5 {
        min-height: 68px;
        padding: 13px 18px;
        font-size: 17px;
        clip-path: none;
        border-left: 3px solid var(--color-orange);
    }
    .initiativeRow::before,
    .initiativeRow::after {
        display: none;
    }
    .initiativeRow p {
        padding: 14px 4px 8px;
        font-size: 16px;
        line-height: 24px;
    }
    .digitalImpact li {
        font-size: 16px;
        line-height: 24px;
    }
}

/*-----------Performance Highlights-------------*/
@media (max-width: 991px) {
    .financialGrid {
        column-gap: 54px;
        row-gap: 42px;
    }
    .financialStat strong {
        font-size: 40px;
    }
    .operationalGrid {
        column-gap: 36px;
    }
    .salesShareGrid {
        gap: 40px;
    }
    .shareDonut {
        flex-basis: 110px;
        width: 110px;
        height: 110px;
    }
    .shareDonut::after {
        inset: 32px;
    }
}

@media (max-width: 767px) {
    .performanceHero {
        padding: 26px 0 38px;
    }
    .performanceBreadcrumb {
        margin-bottom: 26px;
    }
    .performanceEyebrow {
        font-size: 16px;
    }
    .performanceHero h1 {
        font-size: 36px;
        line-height: 48px;
    }
    .performanceHero p,
    .financialStat p,
    .operationalStat p,
    .salesShare li {
        font-size: 16px;
    }
    .financialHighlights,
    .operationalHighlights {
        padding: 42px 0 46px;
    }
    .financialHighlights h2,
    .operationalHighlights > .container > .row > div > h2 {
        margin-bottom: 28px;
        font-size: 22px;
        line-height: 30px;
    }
    .financialGrid {
        grid-template-columns: 1fr;
        row-gap: 34px;
    }
    .financialStat strong {
        font-size: 34px;
    }
    .financialStat strong .currency {
        font-size: 22px;
    }
    .financialStat strong small {
        font-size: 21px;
    }
    .operationalGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 24px;
    }
    .operationalStat strong {
        font-size: 38px;
    }
    .salesShareGrid {
        grid-template-columns: 1fr;
        gap: 42px;
        margin-top: 58px;
    }
     .qaBanner {
        background-image: url(../images/q-and-a/vice-chairman-bg.webp);
    }
    .sdBanner {
        background-image: url(../images/mobile/sustainable-development-mob.webp);
    }
    .bodBanner {
        background-image: url(../images/board-of-directors-banner-mobile.jpg);
    }
}

@media (max-width: 420px) {
    .operationalGrid {
        grid-template-columns: 1fr;
    }
}

/* Keep every photographic banner on the shared innerBanner layout */
@media (max-width: 1199px) {
    .innerBanner:not(.plainBanner):not(.downloadCentreBanner) {
        min-height: calc(100vh - 74px);
    }
}

@media (max-width: 767px) {
    .innerBanner:not(.plainBanner):not(.downloadCentreBanner) {
        min-height: calc(100vh - 74px);
        margin-bottom: 40px;
        padding: 26px 0 55px;
    }

    .innerBanner:not(.plainBanner):not(.downloadCentreBanner) .bannerContent h1 {
        font-size: 26px;
        line-height: 28px;
    }
}

/*-----------Management Discussion & Analysis Responsive-------------*/
@media (max-width: 1199px) {
    .barChart {
        gap: 20px;
        height: 270px;
    }
    .chartCard {
        padding: 22px 20px 16px;
    }
}

@media (max-width: 991px) {
    .mdaSubHead {
        margin: 22px 0 10px;
    }
    .barChart {
        gap: 16px;
        height: 240px;
    }
    .barStack {
        max-width: 74px;
    }
    .mdaQuote {
        margin: 22px 0;
    }
    .chapterBtn {
        padding: 16px 20px;
    }
}

@media (max-width: 767px) {
    .innerBanner.coBanner {
    background-image: url(../images/mobile/corporate-overview-banner-img-mob.webp);
}
.innerBanner.digitalBanner {
    background-image: url(../images/mobile/digital-capabilities-img-mob.webp);
}
.innerBanner.kpiBanner {
    background-image: url(../images/mobile/key-p-i-banner-img-mob.webp);
}
.innerBanner.ocpBanner {
    background-image: url(../images/mobile/our-core-principles-banner-img-mob.webp);
}
/*=========== Our Offerings ===========*/
.innerBanner.offeringsBanner {
    background-image: url(../images/mobile/our-offrings-mob.webp);
}
.innerBanner.strengthsBanner {
    background-image: url(../images/mobile/our-strength-banner-mob.webp);
}
.innerBanner.rndBanner {
    background-image: url(../images/mobile/research-and-development-banner-img-mob.webp);
}


    .mdaBanner {
    background-image: url(../images/mda/mbl-img.webp);
}
    .mdaHead {
        font-size: 18px;
        line-height: 28px;
    }
    .mdaSubHead {
        font-size: 17px;
        line-height: 26px;
    }
    .mdaImg {
        margin: 8px 0 22px;
    }
    .mdaImgCap .imgCap {
        padding: 8px 14px;
        font-size: 13px;
        line-height: 18px;
    }
    .chartCard {
        padding: 18px 14px 14px;
    }
    .chartTitle {
        font-size: 15px;
        line-height: 22px;
    }
    /* the plot scrolls sideways rather than squeezing the columns */
    .chartScroll,
    .barChart {
        gap: 12px;
        height: 220px;
    }
    .barStack {
        max-width: 54px;
    }
    .barSeg em {
        font-size: 12px;
    }
    .barTotal {
        font-size: 13px;
        line-height: 20px;
    }
    .barYear {
        font-size: 13px;
    }
    .mdaQuote p {
        font-size: 16px;
        line-height: 26px;
    }
    .mdaTable th,
    .mdaTable td {
        padding: 8px 10px;
        font-size: 15px;
        line-height: 22px;
    }
    .chapterBtn {
        gap: 14px;
        padding: 14px 16px;
        font-size: 15px;
    }
    .chapterBtn .chapterArrow img {
        width: 22px;
    }
}

/*-----------Photo banners : full height with the header floating over-------------*/
/* body.innerPage prefix keeps these ahead of the per-page banner overrides above;
   the negative margin cancels #main padding (104 / 72 / 64) so the artwork starts at
   the very top, and the top padding drops the breadcrumb clear of the header bar. */
body.innerPage .innerBanner:not(.plainBanner) {
    min-height: 100vh;
    margin-top: -104px;
    padding-top: 110px;
}

@media (max-width: 1023px) {
    body.innerPage .innerBanner:not(.plainBanner) {
        min-height: 100vh;  
        margin-top: -72px;
        padding-top: 100px;
    }
}

@media (max-width: 767px) {
    body.innerPage .innerBanner:not(.plainBanner) {
        min-height: 100vh;
        padding-top: 100px;
        padding-bottom: 0;
    }
}

@media (max-width: 599px) {
    body.innerPage .innerBanner:not(.plainBanner) {
        margin-top: -64px;
        padding-top: 92px;
    }
}

/*-----------MD&A : chart row-------------*/
@media (max-width: 1199px) {
    .chartRow .barChart {
        height: 220px;
        gap: 6px;
    }
    .chartRow .barStack {
        max-width: 40px;
    }
}

@media (max-width: 991px) {
    .chartRow .chartTitle {
        min-height: 0;
    }
    .chartRow .barChart {
        height: 230px;
        gap: 12px;
    }
    .chartRow .barStack {
        max-width: 56px;
    }
}

@media (max-width: 767px) {
    .chartRow .chartCard {
        padding: 18px 14px 12px;
    }
    .chartRow .barChart {
        height: 220px;
        gap: 10px;
    }
    .chartRow .barStack {
        max-width: 50px;
    }
}

/*-----------MD&A : chapter button width-------------*/
@media (max-width: 991px) {
    .chapterBtn {
        width: 70%;
    }
}

@media (max-width: 767px) {
    .chapterBtn {
        width: 100%;
    }
}


/*=====================================================================
   Section headings on phones

   Each of these is sized by its own clamp, and the clamps disagree at
   the narrow end — the section titles came out anywhere between about
   26px and 34px on the same screen. One size for all of them, so the
   page reads as one document rather than as seven sections that each
   chose a heading size.
=====================================================================*/
@media (max-width: 767px) {
    .coreCap__title,
    .offerings__title,
    .rnd__title,
    .dgx__title,
    .perf__title,
    .kpi__title,
    .sd__title,
    .sectionTitle {
        font-size: 22px;
    }

    /* The bold half of each heading is a block, which puts the break at a
       fixed point. On a wide screen that point falls where the line was
       going to break anyway; at 22px on a phone it strands whatever short
       word ends the first half on a line of its own — "the", here. Set
       inline, the two halves are one run of text and the heading breaks
       where it runs out of room. */
    .offerings__title em,
    .rnd__title em,
    .dgx__title em,
    .perf__title em,
    .kpi__title em,
    .sd__title em,
    .coreCap__title em {
        display: inline;
    }
}


/*--- The glass panel on phones.

      Its side padding is a flat 60px, which on a 375px screen is a third
      of the width given to margin on each side. ---*/
@media (max-width: 767px) {
    .landscape__body > .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    .digitalBanner h1 span{
    display: initial;
}
}


/*--- The Report PDF button and the hamburger sit next to each other on
      a touch device, with only the bar gap between them. Two round tap
      targets that close together read as one control. ---*/
@media (max-width: 1023px) {
    .navCta {
        margin-right: 14px;
    }
}

/*-----------Our Journey of Transformation-------------*/
@media (max-width: 1199px) {
    .eqBox {
        min-height: 140px;
    }
    .trackItem h3 {
        font-size: 34px;
        line-height: 42px;
    }
}

@media (max-width: 991px) {
    .ojtIntro p {
        font-size: 17px;
        line-height: 28px;
    }
    .journeyHead h2 {
        font-size: 22px;
        line-height: 28px;
    }
    .journeyKicker {
        font-size: 18px;
        line-height: 26px;
    }
    /* the equation wraps to two rows : the signs stay with their boxes */
    .eqRow {
        gap: 10px;
    }
    .eqBox {
        flex: 1 1 40%;
        min-height: 130px;
    }
    .eqResult {
        flex: 1 1 100%;
    }
    .trackBand {
        gap: 24px;
        padding: 26px 22px 20px;
    }
    .trackItem {
        flex: 1 1 40%;
    }
}

@media (max-width: 767px) {
    .innerBanner.ourjrtransform {
    background-image: url(../images/journey/pdf-3-img-mob.webp);
}
    .ojtIntro p {
        font-size: 16px;
        line-height: 26px;
    }
    .ojtHead {
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 18px;
    }
    .journeyHead {
        min-width: 0;
        width: 100%;
        padding: 14px 60px 14px 16px;
    }
    .journeyChev {
        right: 14px;
        width: 20px;
    }
    .journeyCard p {
        margin: 16px 16px 0;
    }
    .eqBox,
    .eqResult {
        flex: 1 1 100%;
        min-height: 0;
        padding: 20px 16px;
    }
    .eqSign {
        width: 100%;
        height: 26px;
    }
    .trackItem {
        flex: 1 1 100%;
    }
    .trackItem h3 {
        font-size: 30px;
        line-height: 38px;
    }
    .valueBox {
        padding: 20px 18px;
    }
}

/*-----------Hero on phones : the film fills the screen-------------*/
/* the media used to be a fixed strip at the top of a 100dvh pin, which left
   an empty band under it once the section background was taken off */
@media (max-width: 767px) {
    .hero {
        background: none;
    }

    .hero__media,
    .hero__scrim {
        inset: 0;
        height: 100%;
    }

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

    /* the tagline sits at the top of the frame, just under the fixed
       header, over the dark upper half of the still; the turbine below
       is left clear of copy */
    .hero__inner {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: 100%;
        padding-top: calc(clamp(96px, 14vh, 128px) + env(safe-area-inset-top, 0px));
        padding-bottom: clamp(32px, 6vh, 56px);
    }

    .hero__content {
        margin-bottom: 0;
    }
    .rnd__img{
        object-fit: initial;
    }
    .innerBanner.ocpBanner .bannerPatch{
        background: none;
    }
    .innerBanner.chair-vcbaner .bannerContent{
        margin-top: 30px;
    }
}

/*-----------Chapter PDF viewer-------------*/
@media (max-width: 1199px) {
    .pdfModal {
        padding: 20px;
    }
    .pdfModal__title {
        font-size: 18px;
        line-height: 26px;
    }
}

@media (max-width: 991px) {
    .pdfModal__dialog {
        height: 94vh;
    }
    .pdfModal__head {
        padding: 14px 16px;
    }
}


/*==================================================================
   Digital Capabilities  —  deck + rail
   Both sections were built on the fluid scale alone and never got
   layout tiers of their own, so they kept their desktop two-column
   grids all the way down while the rest of the report stacked. The
   rail's spine was also measured in vw — off the VIEWPORT, not off
   the container — so as the screen widened the line drifted away
   from the content the container was holding at 1320px. Both are
   pinned to the container's own measure here.
==================================================================*/

/* The spine's column is a fixed measure from here up: past the point
   where .container stops growing, a vw-based offset only pushes the
   line further from the copy it belongs to. */
@media (min-width: 1400px) {
    .dgRail {
        padding-left: 104px;
    }

    .dgRail__line {
        left: 39px;
    }

    .dgArea__marker {
        left: -104px;
        width: 80px;
        height: 80px;
    }
}

/*--- Laptop  —  1024px - 1399px ---*/
@media (min-width: 1024px) and (max-width: 1399px) {
    .dgDeck__inner {
        gap: 44px;
    }

    .dgArea__split {
        grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
        gap: 28px;
    }
}

/*--- Tablet and below  —  the grids stack ---*/
@media (max-width: 1023px) {
    .dgDeck {
        margin-top: -24px;
    }

    /* copy first, figures under it — the figures are a summary of the
       copy, so they read after it once they are no longer beside it */
    .dgDeck__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    .dgDeck__figures {
        gap: 22px;
    }

    .dgRailSec__title {
        max-width: none;
    }

    /* the spine tightens but stays — it is what makes the five areas
       read as one sequence rather than five stacked blocks */
    .dgRail {
        padding-left: 62px;
    }

    .dgRail__line {
        left: 23px;
    }

    .dgArea__marker {
        left: -62px;
        width: 48px;
        height: 48px;
    }

    .dgArea__split {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    /* impact is the payoff of the initiatives beside it; stacked, it
       has to come after them */
    .dgArea__impact {
        order: 2;
    }
}

/*--- Mobile  —  the spine goes ---*/
@media (max-width: 599px) {
    .dgDeck {
        margin-top: -16px;
    }

    .dgDeck__figures {
        gap: 18px;
    }

    /* At this width the rail's column costs more than the sequence it
       buys: the line and its nodes are dropped, and the number leads
       each area inline instead. */
    .dgRail {
        padding-left: 0;
    }

    .dgRail__line {
        display: none;
    }

    .dgArea__marker {
        position: static;
        width: 40px;
        height: 40px;
        margin-bottom: 16px;
        border-width: 2px;
    }

    .dgArea + .dgArea .dgArea__marker {
        top: auto;
    }

    .dgCard,
    .dgImpact {
        padding-left: 16px;
        padding-right: 16px;
    }
}