/* The xl range uses Bootstrap's narrower 1140px container, so the right bleed
   has to be measured against that instead of 1320px. */
@media (min-width:1200px) and (max-width:1399px){
    .esg-slider-wrap {
        margin-right: calc((1140px - 100vw) / 2 - 12px);
    }
    .esg-slider .owl-nav {
        margin-right: calc((100vw - 1140px) / 2 + 12px);
    }

}

@media(max-width:1200px){
    :root {
        --header-height: 74px;
    }
    .logo img {
        height: 52px;
    }
    .report-title {
        font-size: 16px;
    }

    /* The copy column goes full width from here down, so the side-by-side split
       ends: the film's panel stops being pinned to the right half and becomes a
       normal block in the flow.

       Stacked as COPY FIRST, film underneath. The markup has the video before
       the container (it has to, to be the panel on the desktop layout), so the
       order is flipped here with flex order rather than by moving it — the
       title and CTA read first, then the collage below them.

       The section goes back to sizing from its content, since a stacked panel
       plus copy needs whatever height the two of them come to.

       Same single file plays here as on the desktop; only its box changes. */
    .hero-banner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        height: auto;
        max-height: none;
        /* The desktop floor is dropped, not just lowered: a stacked panel plus
           copy already fills the screen, and holding a min-height here is what
           left a band of empty ground under the CTA. */
        min-height: 0;
        /* The section already starts below the header via margin-top in
           style.css, so no padding for it here — the two would stack up and
           open a band of empty ground above the collage. */
        padding-top: 0;
    }
    /* Copy above, film below. */
    .hero-banner > .container {
        order: 1;
    }
    .hero-banner-media {
        order: 2;
    }
    /* Out of the absolute right-half placement and into the flow, full width.
       No margin for the fixed header: the section already carries padding-top
       for it, and adding the clearance again here is what opened a band of
       empty ground between the header and the collage. */
    .hero-banner-media {
        position: static;
        left: auto;
        right: auto;
        /* The desktop rule centres the panel on the section with top:50% and a
           -50% translate. Both have to go here or the block is dragged up out of
           the flow — it is a normal stacked element now, not a pinned one. */
        top: auto;
        transform: none;
        width: 100%;
        max-height: none;
        /* The clip is 1100x780 (1.41:1). Holding its own ratio here means the
           whole collage is shown rather than cropped, which is what "fit it into
           the content nicely" needs on a stacked layout. */
        aspect-ratio: 1100 / 780;
    }
    .hero-banner-video {
        /* Nothing is cropped now that the box carries the clip's own ratio, so
           contain and cover agree — cover is kept for the rounding case. */
        object-position: center;
    }
    /* The copy is the first thing in the section now, so this padding is the air
       between the header and the title, and between the CTA and the film below
       it. The section's own margin-top (style.css) already clears the header. */
    .hero-banner > .container {
        padding-top: 30px;
        padding-bottom: 40px;
    }
    .hero-banner-img {
        margin-left: 0;
    }
    .hero-collage {
        height: 520px;
    }
    .hero-banner-text {
        margin-bottom: 34px;
    }
    .hero-banner-title {
        font-size: 40px;
    }

    /* The 50/50 split stacks: photo band on top, copy underneath. */
    .chairman-letter {
        height: auto;
    }
    .chairman-flex {
        display: block;
        height: auto;
    }
    .chairman-media,
    .chairman-body {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
    .chairman-media {
        height: 520px;
    }
    .chairman-body {
        padding: 50px 30px;
    }
    .chairman-letter-text {
        max-width: 100%;
    }
    .chairman-letter-title {
        font-size: 32px;
        line-height: 40px;
        margin-bottom: 26px;
    }
    .chairman-letter-text p {
        max-width: 100%;
    }

    .strategy-section {
        padding: 70px 0;
    }
    .strategy-text {
        margin-bottom: 40px;
    }
    .strategy-text p {
        max-width: 100%;
    }

    .about-section {
        padding: 70px 0;
    }
    .about-panel {
        padding: 40px 35px;
    }
    .about-text {
        margin-bottom: 40px;
    }
    .about-text p {
        max-width: 100%;
    }

    /* No pinning at this width (app.js bails out on the same 1200px), so the
       section becomes a plain stack: heading, photo, then the numbers panel.
       Everything the timeline would have animated is forced to its finished
       state — !important because the base hidden rules would otherwise win. */
    /* Extra bottom padding: .d2c-stats-wrap is pulled up by a negative margin
       to overlap the photo, and without compensation here the card ran past the
       section and collided with the Chairman heading below. */
    .d2c-section {
        padding: 70px 0 90px;
    }
    .d2c-title-wrap {
        display: block;
        height: auto;
        margin-bottom: 30px;
        padding: 0 20px;
        text-align: center;
        background-color: transparent;
    }
    .d2c-t1,
    .d2c-t2 {
        display: none;
    }
    .d2c-t3 {
        display: block;
        font-size: 24px;
        line-height: 32px;
        color: var(--color-dark);
    }
    /* Plain static block below the pinned layout — nothing here moves on
       scroll, so painting is confined to the box rather than re-evaluated
       against the section around it. */
    .d2c-scene {
        position: relative;
        height: 420px;
        transform: none !important;
        opacity: 1 !important;
        contain: paint;
    }
    .d2c-section .container {
        position: static;
        transform: none;
    }
    /* No frosted panel below the pinned layout. backdrop-filter forces the
       browser to re-blur everything behind this card on every scroll frame,
       which is what makes the section stutter and lag on touch devices. The
       flat tint reads the same here and scrolls at full speed. */
    .d2c-stats-wrap {
        margin-top: -60px;
        opacity: 1 !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: rgba(35, 31, 32, 0.82);
    }
    /* Three and four across is too tight without the pinned full-width layout,
       so both rows wrap to two per line: the vertical rule stays between the
       pair, and a horizontal one closes off every row but the last. */
    .d2c-stats {
        flex-wrap: wrap;
    }
    .d2c-stat {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 0 16px 18px;
        margin-bottom: 18px;
        border-right: 1px solid rgba(255, 255, 255, 0.35);
        border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    }
    .d2c-stats .d2c-stat:nth-child(2n),
    .d2c-stats .d2c-stat:last-child {
        border-right: 0;
    }
    /* Last row of each block carries no rule under it — for the 3-up row that
       is the odd trailing cell, for the 4-up row it is the final pair. */
    .d2c-stats-3 .d2c-stat:nth-child(n + 3),
    .d2c-stats-4 .d2c-stat:nth-child(n + 3) {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }
    .d2c-group-title {
        margin-bottom: 16px;
        padding-left: 16px;
        font-size: 22px;
        line-height: 30px;
    }

    .stack {
        margin-top: 60px;
    }
    .sp-scale {
        border-radius: 20px;
    }
    .sp-title {
        font-size: 32px;
        line-height: 40px;
    }

    /* Below the desktop layout the cards stack and the head grows, so pinning
       the section to one screen would squeeze the cards instead of fitting
       them. Let it take the height it needs and scroll normally. */
    .esg-section {
        min-height: 0;
        padding: 70px 0;
    }
    .esg-head {
        margin-bottom: 44px;
    }
    .esg-slider-wrap {
        margin-right: 0;
    }
    /* matches the 40px stagePadding at this breakpoint */
    .esg-slider {
        --esg-stage-pad: 40px;
    }
    .esg-slider .owl-nav {
        margin-right: 0;
    }

    .footer-accent-bar {
        margin: 0 60px;
    }
    .footer-cover {
        padding: 30px 35px;
    }
    .footer-cover img {
        width: 160px;
    }
    .footer-download {
        padding: 30px 30px;
    }
    .footer-download-title {
        font-size: 20px;
        line-height: 28px;
    }
}
@media(max-width:991px){
    :root {
        --header-height: 72px;
    }
    .esg-head {
        margin-bottom: 0px;
    }
    .logo img {
        height: 44px;
    }
    .header-left {
        gap: 14px;
    }
    .report-title {
        padding-left: 14px;
        font-size: 15px;
        line-height: 20px;
    }
    .report-title:before {
        height: 24px;
    }

    /* Icon alone from tablet down — the word crowds the report title beside
       it, and the bars already read as the menu control. The open state needs
       naming too: .ham-icon1.is-open .ham-text-close outranks a bare .ham-text,
       so "Close" would come back once the menu opened. */
    .ham-text,
    .ham-icon1.is-open .ham-text-close {
        display: none;
    }

    /* The copy stacks below the film here. No header offset in this padding: the
       section's own margin-top (style.css) already starts it below the header,
       and adding the clearance again opened a band of empty ground above the
       collage. */
    /* No bottom padding: the film is the last thing in the section now, and any
       padding here shows as a band of pale ground beneath it. The copy's own
       spacing above the film is on > .container. */
    .hero-banner {
        padding: 0;
    }
    /* The copy leads the section here, so it keeps its own top spacing — zeroing
       it (which the old backdrop layout wanted) put the title against the
       header. */
    .hero-banner > .container {
        padding-top: 24px;
        padding-bottom: 32px;
    }
    .hero-banner-title {
        font-size: 35px;
    }

    .chairman-letter-title {
        font-size: 30px;
        line-height: 38px;
    }
    .chairman-media {
        height: 460px;
    }

    /* Mega menu becomes a single-column accordion: the rail loses its divider
       and each pane sits directly under the button that opens it. */
    .megaMenu {
        display: block;
        gap: 0;
        padding: 0 20px;
        overflow-y: auto;
    }
    .menuRail {
        display: block;
        flex: none;
        padding: 20px 0 30px;
        border-right: 0;
    }
    .mcat {
        position: relative;
        margin-bottom: 0;
        padding: 16px 40px 16px 14px;
        border: 0;
        border-bottom: 1px solid rgba(35, 31, 32, 0.15);
    }
    .mcat.active {
        border-color: transparent;
        border-bottom-color: rgba(35, 31, 32, 0.15);
    }

    /* Plus / minus instead of the desktop arrow. Two absolutely positioned bars
       so they sit outside the grid — the vertical one rotates flat on open,
       turning the + into a − rather than swapping icons. */
    .mcatArrow {
        display: none;
    }
    .mcat:before,
    .mcat:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 14px;
        width: 14px;
        height: 2px;
        background-color: var(--color-dark);
        transition: transform 0.35s ease, background-color 0.35s ease;
    }
    .mcat:before {
        transform: translateY(-50%);
    }
    .mcat:after {
        transform: translateY(-50%) rotate(90deg);
    }
    .mcat.active:after {
        transform: translateY(-50%) rotate(0deg);
    }
    .mcat.active:before,
    .mcat.active:after {
        background-color: var(--color-accent);
    }
    .menuPanes {
        display: contents;
    }
    /* The pane stays in the DOM and its height animates through a 0fr -> 1fr
       grid row. display:none/block cannot be transitioned, which is why the
       accordion used to snap open. */
    .mpane {
        display: grid;
        grid-template-rows: 0fr;
        overflow: hidden;
        padding: 0 14px;
        transition: grid-template-rows 0.4s ease, padding 0.4s ease;
    }
    .mpane > * {
        min-height: 0;
    }
    .mpane.active {
        grid-template-rows: 1fr;
        padding: 6px 14px 18px;
    }
    .mpaneTitle {
        display: none;
    }
    /* Accordion grows with its content — no inner scroll area here. */
    .mpaneLinks {
        grid-template-columns: 1fr;
        overflow: visible;
        padding-right: 0;
    }
    .menuFootInner {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 20px;
    }

    .menu, .nav-icon3 {
        display: none;
    }
    .my-sidenav {
        width: 0px;
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        overflow-x: hidden;
        z-index: 999999999;
        height: 100vh;
        max-width: 0px;
        width: 100%;
        background-color:#003974;
        transition: 0.5s;
        -webkit-transition: 0.5s;
    }
    .my-sidenav>ul {
        padding: 0px 20px 0px;
    }
    .my-sidenav>ul>li>ul {
        margin-top: 0px;
        display: none;
    }
    .my-sidenav ul.submenu li ul.submenu {
        display: none;
        position: static;
        width: 100%;
    }
    .my-sidenav ul {
        list-style-type: none;
        padding-left: 15px;
    }
    .my-sidenav ul li
    {
        border-bottom: 1px solid #ffffff;
        padding: 15px 0px;
    }
    .my-sidenav > ul > li > ul >li
    {
        border-bottom: 1px solid #ffffff;
        padding: 10px 0px;
    }
    .my-sidenav > ul > li > ul >li:last-child, .my-sidenav ul.submenu li ul.submenu li:last-child
    {
        border-bottom: 0px;
    }
    .my-sidenav ul.submenu li ul.submenu li {
        border-bottom: 1px solid #ffffff;
        padding: 10px 10px;
    }
    .my-sidenav ul.submenu li ul.submenu li a {
        color: #ffffff;
        font-size: 16px;
    }

    .cross-btn1 {
        text-align: right;
        padding: 16px 14px 0px 0px;
        color: #fff;
        font-size: 35px;
        cursor: pointer;
    }
    .my-sidenav .submenu-indicator-minus .submenu-indicator {
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .my-sidenav .submenu-indicator {
        font-size: 30px;
        position: absolute;
        line-height: 25px;
        right: 15px;
    }
    .my-sidenav>ul>li>a {
        color: #ffffff;
        font-size:18px;
        display:block;
    }
    .my-sidenav>ul>li>ul>li>a {
        color: #ffffff;
        font-size: 14px;
    }
    .my-sidenav>ul>li>ul>li>a img {
        padding-right: 0;
        float: right;
        padding-left: 50px;
    }

}

@media (max-width: 767px) {
    :root {
        --header-height: 60px;
    }
    .header-left {
        gap: 10px;
    }
    .logo img {
        height: 40px;
    }
    .report-title {
        padding-left: 10px;
        font-size: 12px;
        line-height: 18px;
    }
    .report-title:before {
        height: 20px;
    }
    .ham-icon1 {
        gap: 8px;
    }
    .ham-bars {
        width: 26px;
    }

    /* Stacked panel then copy, as in the band above — the film is its own block
       here rather than a backdrop, so the copy no longer has to be positioned
       into a clear area of it. No top padding for the header: the section's own
       margin-top in style.css already clears it. */
    /* Film last, so nothing below it — see the same reasoning at 991px. */
    .hero-banner {
        padding: 0;
    }
    .hero-banner-text {
        margin-bottom: 0;
    }
    .hero-banner-title {
        font-size: 24px;
        line-height: 30px;
    }
    .hero-banner-text .btn-readmore {
        margin-top: 24px;
    }
    /* The desktop collage is an 11-tile, 48-column mosaic — on a phone each tile
       lands around 40px wide and the photos become unreadable. Drop the whole
       placement and reflow into 3 even columns, letting two key shots span.
       Rows scale with the column width instead of a fixed 92px. A fixed row
       height meant the cell aspect changed at every viewport width, so at some
       sizes object-fit:cover cropped the subjects out of frame. Letting the
       single-row tiles hold a square aspect makes the row height track the
       column width at any size — same 3-column arrangement, same spanning
       tiles, stable crop. Tiles 4 and 8 span two rows and are sized by them.
       minmax(0, 1fr): a bare 1fr floors at the tile's intrinsic size, which let
       the square tiles inflate the grid wider than the viewport — the right
       column then ran under .hero-banner's overflow:hidden and got clipped. */
    .hero-collage {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-rows: auto;
        height: auto;
        max-width: 100%;
        gap: 5px;
    }
    .hero-tile {
        aspect-ratio: 1 / 1;
    }
    .hero-tile-4,
    .hero-tile-8 {
        aspect-ratio: auto;
    }
    .hero-tile-1,
    .hero-tile-2,
    .hero-tile-3,
    .hero-tile-4,
    .hero-tile-5,
    .hero-tile-6,
    .hero-tile-7,
    .hero-tile-8,
    .hero-tile-9,
    .hero-tile-10,
    .hero-tile-11 {
        grid-column: auto;
        grid-row: auto;
    }
    .hero-tile-4 {
        grid-column: span 2;
        grid-row: span 2;
    }
    .hero-tile-8 {
        grid-row: span 2;
    }

    .chairman-media {
        height: 380px;
    }
    .chairman-body {
        padding: 40px 20px;
    }
    .chairman-letter-title {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 22px;
    }
    .chairman-author {
        margin-bottom: 26px;
    }
    .btn-readmore {
        padding: 14px 22px;
        font-size: 15px;
    }
    .strategy-section {
        padding: 50px 0;
    }
    .strategy-slider .owl-nav button.owl-prev,
    .strategy-slider .owl-nav button.owl-next {
        width: 40px;
        height: 40px;
    }

    .about-section {
        padding: 50px 0;
    }

    .about-panel {
        padding: 30px 22px;
        /* Shallower lift at phone size, where the wide falloff reads as haze. */
        box-shadow:
            0 2px 4px rgba(22, 73, 107, 0.07),
            0 8px 18px rgba(22, 73, 107, 0.10);
    }

    .d2c-scene {
        height: 300px;
    }
    .d2c-stats-wrap {
        margin-top: 20px;
        padding: 26px 20px;
    }
        .d2c-section{
                    padding: 20px 0 20px;
        }
    .d2c-stat-value {
        font-size: 20px;
        line-height: 32px;
    }

    .stack {
        margin-top: 40px;
    }

    /* No pinning on a phone: each panel is a full-screen card in normal flow,
       one under the other. position stays relative (not static) so .sp-bg,
       .sp-overlay and .sp-content still resolve against the panel rather than
       against .stack, which would pile every background on top of the others. */
    .stack-panel {
        position: relative;
        height: 100vh;
        margin-bottom: 16px;
    }
    .stack-panel:last-child {
        margin-bottom: 0;
    }
    .sp-scale {
        border-radius: 14px;
    }

    /* Portrait crops of the same photos — the desktop landscape versions lose
       their subject once a full-height phone card crops them. */
    .sp--efficiency .sp-bg { background-image: url(../images/enhancing-efficiency-across-the-value-chain-mbl-img.webp); }
    .sp--risk       .sp-bg { background-image: url(../images/risk-management-mbl-img.webp); }
    .sp--capital    .sp-bg { background-image: url(../images/enabling-scalable-capital-flow-mbl-img.webp); }
    .sp--culture    .sp-bg { background-image: url(../images/fostering-a-thriving-work-culture-mbl-img.webp); }
    .sp--future     .sp-bg { background-image: url(../images/our-future-value-builders-and-growth-enablers-mbl-img.webp); }

    .sp-title {
        font-size: 26px;
        line-height: 34px;
    }
    .sp-intro {
        margin-bottom: 22px;
    }

    .esg-section {
        padding: 50px 0;
    }
    .esg-card-label {
        padding: 10px 18px;
        font-size: 14px;
        line-height: 22px;
    }
    /* matches the 30px stagePadding at this breakpoint */
    .esg-slider {
        --esg-stage-pad: 30px;
    }
    .esg-slider .owl-nav button.owl-prev,
    .esg-slider .owl-nav button.owl-next {
        width: 40px;
        height: 40px;
    }

    .footer-accent-bar {
        height: 16px;
        margin: 0 40px;
    }
    /* Cover stacks above the downloads, which drop to a single column. */
    .footer-panel {
        display: block;
    }
    .footer-cover {
        justify-content: center;
        padding: 30px 20px;
    }
    .footer-downloads {
        grid-template-columns: 1fr;
        border-left: 0;
        border-top: 1px solid rgba(35, 31, 32, 0.12);
    }
    .footer-download {
        padding: 24px 20px;
    }
    .footer-download:nth-child(2n) {
        border-left: 0;
    }
    .footer-download + .footer-download {
        border-top: 1px solid rgba(35, 31, 32, 0.12);
    }
    .footer-download-menu {
        left: 20px;
        right: 20px;
    }
    .footer-bottom-inner {
        flex-direction: column;
        gap: 18px;
        padding: 26px 0;
        text-align: center;
    }

    /* The diagram is now a video sized to fit, so there is nothing to pan —
       drop the horizontal scroll and let it shrink with the column. */
    .about-img {
        overflow-x: visible;
    }
    .about-img img,
    .about-video {
        min-width: auto;
        max-width: 100%;
    }

    /* Landscape 1920x1080 backgrounds crop hard on a tall screen — bias the
       crop so the subject stays in frame. */
    .chairman-media {
        background-position: 70% center;
    }
    .ceo-letter .chairman-media {
        background-position: 30% center;
    }

    .strategy-title,
    .about-title,
    .d2c-t3,
    .esg-title {
        font-size: 24px;
        line-height: 32px;
    }
    /* Too long to hold one line on a phone — let it wrap again. */
    .strategy-title-line {
        white-space: normal;
    }

    .section-eyebrow {
        font-size: 14px;
        line-height: 22px;
    }

    /* One stat per row below 576px: no vertical rule left to draw, and every
       cell but the last in its block gets the horizontal one back. */
    .d2c-stat {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 0 12px;
        margin-bottom: 18px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    }
    .d2c-stats-3 .d2c-stat:nth-child(3),
    .d2c-stats-4 .d2c-stat:nth-child(3) {
        padding-bottom: 12px;
        margin-bottom: 18px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    }
    .d2c-stats .d2c-stat:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }
    /* Cells go full-bleed at this width, so the title has nothing to inset to. */
    .d2c-group-title {
        padding-left: 0;
    }

    /* Slider controls stack: dots stay left, arrows drop below them. */
    .strategy-slider .owl-nav,
    .strategy-slider .owl-dots,
    .esg-slider .owl-nav,
    .esg-slider .owl-dots {
        margin-top: 22px;
    }

    /* Menu: category rows and links get touch-sized targets. */
    .mcatName {
        font-size: 16px;
    }
    .mpaneLinks li a {
        padding: 12px 0 12px 18px;
    }
    .mpaneLinks li a:before {
        top: 19px;
    }
    .menuFootDl {
        width: 100%;
        justify-content: center;
    }

    .footer-accent-bar {
        margin: 0 20px;
    }
}

/*-----------Inner Banner & Page Pager Responsive Css Start-------------*/
@media (max-width: 767px) {
    .culture-content {
        padding: 0 0 40px;
    }
    .culture-intro {
        margin-bottom: 30px;
    }
    .culture-logo {
        max-width: 180px;
        margin-bottom: 20px;
    }
    .culture-performance {
        padding: 0 0 40px;
    }
    .culture-performance-row {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .culture-certification {
        padding: 0 0 40px;
    }
    .culture-certification-visual {
        padding: 25px 0 0 35px;
    }
    .culture-certification-badge {
        width: 95px;
    }
    .culture-pillars {
        padding-bottom: 40px;
    }
    .culture-pillar + .culture-pillar {
        margin-top: 24px;
    }
    .future-enablers {
        padding: 36px 0 40px;
    }
    .future-enablers-title {
        margin-bottom: 26px;
        font-size: 26px;
        line-height: 34px;
    }
    .future-enabler + .future-enabler,
    .future-enablers-visual + .future-enabler,
    .future-enabler + .future-enablers-visual {
        margin-top: 28px;
    }
    .esg-overview {
        padding: 0 0 36px;
    }
    .esg-social-impact {
        padding: 36px 0 40px;
    }
    .esg-content-title {
        margin-bottom: 24px;
        font-size: 26px;
        line-height: 34px;
    }
    .esg-copy-block + .esg-copy-block {
        margin-top: 24px;
    }
    .esg-sector-impact {
        padding: 20px 0 40px;
    }
    /* Stacked here, so the g-5 gutter already sits between every block. */
    .esg-sector-row + .esg-sector-row {
        margin-top: 0;
    }
    .esg-sector-visual {
        padding-top: 22px;
    }
    .esg-sector-visual h3 {
        width: calc(100% - 40px);
        min-width: 0;
        padding: 14px 20px;
    }
    .esg-sector-impact .esg-sector-image-col {
        order: 1;
    }
    .esg-sector-impact .esg-sector-data-col {
        order: 2;
    }
    .esg-agriculture {
        padding-bottom: 40px;
    }
    .esg-climate-solutions,
    .esg-sdg-section,
    .esg-approach {
        padding: 38px 0;
    }
    .esg-section-heading {
        margin-bottom: 20px;
    }
    .esg-sdg-table th,
    .esg-sdg-table td {
        padding: 12px;
    }
    .esg-approach-copy {
        column-count: 1;
    }
    .esg-rating-section {
        padding: 40px 0;
    }
    .esg-rating-card {
        display: flex;
        flex-direction: column;
        gap: 14px;
        min-height: 0;
        margin: 45px 0 0;
        padding: 58px 20px 24px;
        text-align: center;
    }
    .esg-rating-agency {
        top: -42px;
        left: 50%;
        min-width: 130px;
        padding: 16px 20px;
        transform: translateX(-50%);
    }
    .esg-rating-score {
        width: 100%;
        padding: 8px 0;
        border-top: 1px solid var(--color-accent);
        border-right: 0;
        border-bottom: 1px solid var(--color-accent);
        border-left: 0;
        font-size: 40px;
        line-height: 48px;
    }
    .esg-rating-status {
        padding-left: 0;
    }
    .esg-rating-categories {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .esg-impact-detail {
        padding-bottom: 40px;
    }
    .esg-responsible-finance {
        padding-bottom: 40px;
    }
    .esg-responsible-content {
        padding: 28px 22px 34px;
    }
    .esg-responsible-content h2 {
        margin-bottom: 20px;
    }
    .board-members {
        padding: 10px 0 40px;
    }
    .board-member img {
        max-width: 100%;
        margin-bottom: 20px;
    }
    .board-member {
        padding: 18px;
    }
    .leadership-team {
        padding: 10px 0 40px;
    }
    .leadership-member img {
        max-width: 100%;
    }
    .leadership-member {
        padding: 18px;
    }
    .leadership-member p {
        max-width: 100%;
    }
    .key-recognitions {
        padding: 10px 0 40px;
    }
    .key-recognitions-title {
        margin-bottom: 24px;
    }
    .recognition-item p {
        max-width: 100%;
    }
    .corporate-info {
        padding: 10px 0 40px;
    }
    .technology-platforms {
        /* padding: 34px 0 40px; */
    }
    .technology-banner {
        background-image: url(../images/enabling/enabling-scalable-capital-flow-mbl-img.webp);
        background-position: center;
    }
    .future-banner {
        background-image: url(../images/our-future/our-future-value-builders-and-growth-enablers-mbl-img.webp);
        background-position: center;
    }
    .technology-banner-scanner {
        top: 248px;
        right: 20px;
        width: 84px;
    }
    .technology-platforms-title {
        margin-bottom: 26px;
        font-size: 26px;
        line-height: 34px;
    }
    .technology-platform-logo {
        width: 180px;
        margin-bottom: 22px;
    }
    /* Keeps nPOS proportionally smaller than the other two logos here too. */
    .technology-platform-logo--npos {
        width: 120px;
    }
    .technology-platform-copy + .technology-platform-copy {
        margin-top: 0px;
        padding-top: 26px;
    }
    .altifi-platform {
        /* padding: 40px 0; */
    }
    /* Phones get the portrait artwork, and the copy stacks above it instead of
       being laid over it: the vertical crop puts the "0" and Nivesh across the
       middle of the frame, so there is no clear column left to overlay. The
       banner therefore stops being a fixed-ratio box and grows to its content,
       with the artwork sitting underneath as a normal block. */
    /* Phones read as three stacked blocks: logo + headline with the QR beside
       it, then the portrait artwork, then the points underneath. The banner
       itself becomes the flex container and .altifi-banner-inner dissolves
       into it (display: contents), so the artwork — a sibling of that wrapper,
       not a child — can be ordered between the headline and the list. */
    .altifi-banner {
        display: flex;
        flex-direction: column;
        aspect-ratio: auto;
        min-height: 0;
        margin-bottom: 0px;
    }
    /* No padding on the banner itself: the artwork bleeds edge to edge here as
       it does on desktop, and each copy block is inset on its own instead. */
    .altifi-banner-inner {
        display: contents;
    }
    .altifi-banner-head,
    .altifi-campaign-title,
    .altifi-benefits-list,
    .altifi-clarity,
    .altifi-disclaimer {
        padding-right: 20px;
        padding-left: 20px;
    }
    .altifi-banner-head {
        order: 1;
        gap: 16px;
    }
    .altifi-campaign-title {
        order: 2;
    }
    /* The portrait crop is 767x1365; letting it run full height pushes the
       points far below the fold, so it is held to a band and cropped top and
       bottom — the "0" and Nivesh sit mid-frame and survive the trim. */
    .altifi-banner-art {
        order: 3;
        position: static;
        margin-top: 22px;
    }
    .altifi-banner-art img {
        height: 380px;
        object-fit: cover;
        object-position: center;
    }
    .altifi-benefits-list {
        order: 4;
    }
    .altifi-clarity {
        order: 5;
    }
    .altifi-disclaimer {
        order: 6;
    }
    .altifi-logo {
        width: 150px;
        max-width: 45%;
    }
    .altifi-qr {
               width: 65px;
        margin-top: 19px;
    }
    /* Back to fixed units — cqw was measured against the banner's width, which
       no longer tracks the artwork now that the two are stacked. */
    .altifi-campaign-title {
        max-width: 100%;
        margin-top: 20px;
        font-size: 20px;
        line-height: 25px;
    }
    .altifi-campaign-title:after {
        width: 74px;
        height: 4px;
        margin-top: 16px;
    }
    .altifi-benefits {
        width: 100%;
        margin-top: 10px;
    }
    .altifi-benefit {
        gap: 14px;
        padding: 12px 0;
    }
    .altifi-benefit img {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
    }
    .altifi-benefit p {
        font-size: 15px;
        line-height: 22px;
    }
    /* Back to fixed units here too: stacked, these no longer sit on the
       artwork, so the banner's width is not the right thing to scale against.
       The box-sizing keeps the inset padding inside the full-width button. */
    .altifi-clarity {
        width: 100%;
        box-sizing: border-box;
        align-self: auto;
        margin: 30px 0 0;
        padding-top: 16px;
        padding-bottom: 16px;
        border-radius: 6px;
        font-size: 16px;
        line-height: 24px;
        text-align: center;
    }
    .altifi-disclaimer {
        margin-top: 24px;
        padding-top: 0;
        padding-bottom: 40px;
    }
    .altifi-disclaimer,
    .altifi-disclaimer a {
        font-size: 12px;
        line-height: 19px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .culture-performance-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .esg-approach-copy {
        column-count: 2;
        column-gap: 36px;
    }
    .esg-rating-card {
        grid-template-columns: 1.2fr 0.55fr 0.9fr;
        padding-right: 24px;
        padding-left: 90px;
    }
    .esg-rating-categories {
        gap: 18px;
    }
    /* Tablet keeps the overlaid landscape banner. The copy column is narrower
       relative to the artwork here, so the benefit rows wrap to two lines and
       the stack grows past the banner's 1920/1085 box — which clips it. The
       column is widened and the rhythm tightened so the seven rows, the CTA
       and the disclaimer still land inside the frame. */
    .altifi-benefits {
        width: 34cqw;
    }
    .altifi-benefit {
        gap: 1.2cqw;
        padding: 0.5cqw 0;
    }
    .altifi-benefit p {
        font-size: 1.35cqw;
    }
    .altifi-benefit img {
        width: 2.2cqw;
        height: 2.2cqw;
        flex: 0 0 2.2cqw;
    }
    /* At this width the desktop cqw sizes fall below a readable floor — the
       banner is ~990px, so 0.53cqw would land near 5px. Both are stepped up. */
    .altifi-clarity {
        margin-top: 1.1cqw;
        padding: 0.8cqw 1.6cqw;
        font-size: 1.4cqw;
    }
    .altifi-disclaimer {
        padding-top: 1cqw;
    }
    .altifi-disclaimer,
    .altifi-disclaimer a {
        font-size: max(8px, 0.86cqw);
        line-height: 1.4;
    }
}

@media(max-width:1200px){
    .sitemap {
        top: 95px;
    }

    /* col-xl-8 / col-xl-4 stack from here down, so the figures block and the
       chart sit one above the other and each needs its own gap back. */
    .cs-fund-split > [class*="col-"],
    .cs-fund-figures > [class*="col-"]:nth-last-child(-n + 2) {
        margin-bottom: 30px;
    }
    .cs-fund-split .cs-graph {
        padding-top: 10px;
    }
}
@media(max-width:991px){
    .inner-banner {
        padding: calc(var(--header-height) + 90px) 0 40px;
        margin-bottom: 30px;
    }
    .sitemap {
        top: 90px;
    }
    /* No photo: keep the plain padding instead of the banner's taller one.
       Bottom padding holds the h1 off the copy below it. */
    .mi-banner {
        padding: 120px 0 24px;
    }

    .inner-banner h1 {
        font-size: 30px;
        line-height: 38px;
    }
    .ib-eyebrow {
        font-size: 18px;
        line-height: 26px;
    }

    .page-pager {
        padding: 40px 0 60px;
    }
}
@media (max-width: 767px) {
    /* Breadcrumb goes back into the flow on phones, so the banner grows with
       its content instead of centring it against a fixed height. */
    .inner-banner {
        display: block;
        height: auto;
        min-height: 100vh;
        padding: 0 0 30px;
        margin-bottom: 30px;
        background-position: center;
    }
    .sitemap {
        position: static;
        padding: 85px 0 25px;
    }
    /* On the photo banners the breadcrumb has to sit ABOVE the dark scrim, not
       under it. `position: static` above cancels the base rule's z-index — a
       static box cannot be z-ordered — so the banner's positioned ::before
       painted over the breadcrumb, dropping it to ~1.2:1 contrast (measured);
       it stayed #fff but was covered. `relative` restores the stacking context
       while leaving the box in the flow exactly where static put it, so the
       layout below is untouched. Scoped to the photo banners: the .mi-banner
       pages have no scrim and need no lift. */
    .inner-banner:not(.mi-banner):not(.split-banner) .sitemap,
    .letter-banner .sitemap {
        position: relative;
        z-index: 3;
        /* The base .sitemap rule pins top/left/right for its absolute desktop
           placement. Those offsets do nothing while it is static, but
           `relative` makes them apply again and shifted the breadcrumb 105px
           down onto the heading. Zeroing them keeps it exactly where the
           static flow put it — this rule changes stacking only, not position. */
        top: auto;
        left: auto;
        right: auto;
    }
    .ib-breadcrumb ul {
        gap: 2px;
    }
    /* Sitemap is in the flow now and carries the top padding itself; the
       bottom padding still separates the h1 from the copy below. */
    .mi-banner {
        min-height: auto;
        padding: 0 0 20px;
    }
    .ib-breadcrumb ul li,
    .ib-breadcrumb ul li a {
        font-size: 13px;
        line-height: 20px;
    }
    .ib-eyebrow {
        margin-bottom: 8px;
        font-size: 16px;
        line-height: 24px;
    }
    .inner-banner h1 {
        font-size: 26px;
        line-height: 34px;
    }
    .cap-icon img {
        width: 44px;
    }

    .page-intro-text p {
        font-size: 16px;
        line-height: 26px;
    }

    .page-pager {
        padding: 30px 0 40px;
    }
    .pager-link {
        gap: 10px;
    }
    .pager-text {
        font-size: 16px;
        line-height: 24px;
    }
}
/*-----------Inner Banner & Page Pager Responsive Css End-------------*/

/*-----------Credit Solutions Responsive Css Start-------------*/
@media(max-width:1200px){
    .cs-summit {
        padding: 40px 30px 10px;
    }
    .cs-acc-title {
        font-size: 22px;
        line-height: 30px;
    }
}
@media(max-width:991px){
    .cs-banner {
        padding-bottom: 0;
    }
    .cs-summit-img {
        margin-top: 30px;
    }
    .cs-summit-gallery {
        margin-top: 10px;
    }
    .cs-stat-value {
        font-size: 26px;
        line-height: 34px;
    }
}
@media (max-width: 767px) {
    .cs-summit {
        padding: 30px 20px 5px;
    }
    .cs-title {
        font-size: 22px;
        line-height: 30px;
    }
    .cs-sub-title,
    .cs-note-title {
        font-size: 16px;
        line-height: 24px;
    }
}
/*-----------Powering India's Credit Ecosystem Responsive Css Start-------------*/
/* Seven columns cannot fit on a tablet or a phone, and scrolling the block
   sideways pushed the content past the viewport. The timeline runs vertically
   instead: the track becomes one column and each year is moved up beside the
   milestone it belongs to, using order so no markup change is needed.
   The horizontal rule-and-sparkle motif is rotated rather than dropped — a
   continuous white line runs down the left gutter and every milestone carries a
   sparkle on it, so the vertical layout reads with the same design language as
   the desktop one. */
@media(max-width:1200px){
    .evolution-timeline {
        position: relative;
        overflow-x: visible;
        display: flex;
        flex-direction: column;
        /* Gutter holding the vertical line and its sparkles. */
        --evo-gutter: 46px;
        --evo-line: 15px;
        padding-left: var(--evo-gutter);
    }
    /* The continuous line. Stops at the last sparkle instead of running to the
       bottom edge, mirroring how the desktop rules end at their last column. */
    .evolution-timeline:before {
        content: "";
        position: absolute;
        top: 8px;
        bottom: 8px;
        left: var(--evo-line);
        width: 2px;
        background-color: #ffffff;
    }
    /* The paired top/bottom rules only describe a horizontal reading; the
       vertical line above replaces them. */
    .evolution-timeline-rule {
        display: none;
    }
    .evolution-timeline-track,
    .evolution-timeline-years {
        display: contents;
    }
    /* Year first, then its milestone — interleaved into a single column. */
    .evolution-timeline-years .evolution-milestone-year:nth-child(1) { order: 1; }
    .evolution-timeline-track .evolution-milestone:nth-child(1)      { order: 2; }
    .evolution-timeline-years .evolution-milestone-year:nth-child(2) { order: 3; }
    .evolution-timeline-track .evolution-milestone:nth-child(2)      { order: 4; }
    .evolution-timeline-years .evolution-milestone-year:nth-child(3) { order: 5; }
    .evolution-timeline-track .evolution-milestone:nth-child(3)      { order: 6; }
    .evolution-timeline-years .evolution-milestone-year:nth-child(4) { order: 7; }
    .evolution-timeline-track .evolution-milestone:nth-child(4)      { order: 8; }
    .evolution-timeline-years .evolution-milestone-year:nth-child(5) { order: 9; }
    .evolution-timeline-track .evolution-milestone:nth-child(5)      { order: 10; }
    .evolution-timeline-years .evolution-milestone-year:nth-child(6) { order: 11; }
    .evolution-timeline-track .evolution-milestone:nth-child(6)      { order: 12; }
    .evolution-timeline-years .evolution-milestone-year:nth-child(7) { order: 13; }
    .evolution-timeline-track .evolution-milestone:nth-child(7)      { order: 14; }

    /* Each entry reads as a row: year, then title, text and icon beneath it.
       No dividing border — the vertical line already separates the entries. */
    .evolution-timeline .evolution-milestone {
        align-items: flex-start;
        padding: 0 0 30px;
        text-align: left;
    }
    .evolution-timeline .evolution-milestone:last-of-type {
        padding-bottom: 0;
    }
    /* Each year is a node on the line: the sparkle is drawn in the gutter,
       reusing the same star art the desktop rules carry. Dark text, because the
       accent colour is the section background here. */
    .evolution-timeline .evolution-milestone-year {
        position: relative;
        margin-bottom: 10px;
        text-align: left;
        color: var(--color-dark);
    }
    .evolution-timeline .evolution-milestone-year:before {
        content: "";
        position: absolute;
        top: 50%;
        left: calc((var(--evo-gutter) - var(--evo-line)) * -1);
        width: 18px;
        height: 18px;
        margin-top: -9px;
        margin-left: -8px;
        background-color: var(--color-accent);
        background-image: url(../images/powering-indias-credit-ecosystem/star-icon.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 18px 18px;
    }
    .evolution-milestone-icon {
        margin-top: 4px;
    }
    /* Nothing in the vertical layout may push past the container. */
    .evolution-timeline .evolution-milestone-title,
    .evolution-timeline .evolution-milestone-text {
        max-width: 100%;
        overflow-wrap: break-word;
    }

    /* The seven-column year axis has gone vertical, so there is nothing left
       above these rows to align them to. The ladder drops back to a plain
       proportional stagger from here down, carrying the nesting on its own;
       the column arithmetic in style.css applies from 1201px up, where the
       horizontal timeline is back and the alignment is meaningful. */
    .business-lines {
        --bl-step-2: 8%;
        --bl-step-3: 16%;
        --bl-step-4: 24%;
        --bl-step-5: 32%;
        --bl-step-6: 40%;
    }
    .business-line--step-6 {
        padding-left: var(--bl-step-6);
    }
}
@media(max-width:991px){
    .defining-numbers {
        padding: 50px 0 0;
    }
    .defining-number-value {
        font-size: 26px;
        line-height: 34px;
    }

    .diversified-credit-enabler {
        padding: 55px 0;
        margin-top: 55px;
    }
    .diversified-credit-enabler-head {
        margin-bottom: 40px;
    }

    .evolution-milestone-year {
        font-size: 26px;
        line-height: 34px;
    }

    /* Below 1200px the timeline above is no longer a row of seven columns — it
       has already become a vertical list, each year sitting directly above its
       own milestone — so there is no horizontal year axis left for these rows
       to line up against. The column arithmetic is dropped here and the ladder
       falls back to a plain proportional stagger, which is all that is left to
       carry the nesting. Column alignment resumes above 1200px, where the
       seven-column timeline is back.

       Halved from the desktop scale: the full indents leave the name column too
       narrow once the container shrinks. Overriding the shared scale keeps the
       group titles in step with their rows automatically. */
    .business-lines {
        --bl-step-2: 6%;
        --bl-step-3: 12%;
        --bl-step-4: 18%;
        --bl-step-5: 24%;
        --bl-step-6: 30%;
    }
    .business-line--step-6 {
        padding-left: var(--bl-step-6);
    }

    .business-line-value {
        width: 200px;
    }

    .growing-aum {
        padding: 55px 0 0;
    }
}
@media (max-width: 767px) {
    .credit-ecosystem-intro-text p,
    .diversified-credit-enabler-head p,
    .growing-aum-head p {
        line-height: 24px;
    }

    .defining-numbers-title,
    .diversified-credit-enabler-title,
    .growing-aum-title,
    .business-lines-group-title,
    .growing-aum-chart-title {
        font-size: 16px;
        line-height: 24px;
    }

    .cs-acc-head {
        padding: 14px 18px;
        gap: 14px;
    }
    .cs-acc-title {
        font-size: 16px;
        line-height: 24px;
    }
    .cs-acc-icon {
        width: 18px;
        height: 18px;
    }
    .cs-acc-body {
        padding: 25px 0 0;
    }
    /* One chart per row from here: nothing is sitting beside a card any more,
       so the equalising heights come off and each chart uses the full width.
       height must be reset too — the tablet rule above still matches here. */
    .cs-graph-row .cs-graph-title {
        min-height: 0;
    }
    .cs-graph-row--pies .cs-graph img {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
    .cs-graph-row--placement .cs-graph img {
        height: auto;
        max-width: 100%;
        max-height: 300px;
        object-position: center;
    }
    .cs-stat-value {
        font-size: 22px;
        line-height: 30px;
    }
    .cs-stat-row > [class*="col-"] {
        margin-bottom: 24px;
    }
    .cs-graph,
    .cs-img,
    .cs-text {
        margin-bottom: 24px;
    }
    .cs-graph-tall {
        max-height: 280px;
    }
    /* Two pies per row here, so they get a little less height. */
    .cs-graph-row--pies .cs-graph img {
        height: 190px;
    }
    .cs-table th,
    .cs-table td {
        padding: 10px 12px;
        font-size: 14px;
        line-height: 22px;
    }
}
/*-----------Credit Solutions Responsive Css End-------------*/

/*-----------D2C Lending Responsive Css Start-------------*/
@media(max-width:991px){
    .d2c-landscape-title {
        margin: 0 20px 20px;
        font-size: 16px;
        line-height: 24px;
    }
    .d2c-landscape .cs-table-wrap {
        margin: 0 20px;
    }
}
@media (max-width: 767px) {
    .d2c-landscape {
        padding-bottom: 20px;
    }
    .d2c-landscape-title {
        margin: 0 14px 16px;
        padding: 12px 14px;
        font-size: 15px;
        line-height: 23px;
    }
    .d2c-landscape .cs-table-wrap {
        margin: 0 14px;
    }
    .d2c-table th,
    .d2c-table td {
        padding: 12px 14px;
    }
    .d2c-sector-icon img {
        width: 28px;
    }
    .d2c-sector-text {
        font-size: 15px;
        line-height: 23px;
    }
}
@media(max-width:1200px){
    .d2c-map-title {
        font-size: 22px;
        line-height: 30px;
    }
}
@media(max-width:1200px){
    /* Columns are full width from here down, so there is no neighbour to match
       — let the image keep its own aspect ratio instead of being cropped. */
    .d2c-eq {
        display: block;
    }
    .d2c-eq > .cs-img img {
        height: auto;
        object-fit: fill;
    }
}
@media(max-width:1199px){
    /* col-xl-6 stacks here, so the panel needs its gap back above the chart. */
    .d2c-glance-graph-row .d2c-glance {
        height: auto;
        margin-bottom: 30px;
    }
}
@media(max-width:991px){
    .d2c-glance-value {
        font-size: 20px;
        line-height: 28px;
    }
}
@media (max-width: 767px) {
    .d2c-glance {
        padding: 24px 20px 2px;
        margin-bottom: 24px;
    }
    .d2c-glance-title {
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 24px;
    }
    .d2c-glance-value {
        font-size: 18px;
        line-height: 26px;
    }
    .d2c-glance .row > [class*="col-"] {
        margin-bottom: 20px;
    }
    .d2c-map {
        margin-bottom: 24px;
    }
    .d2c-map-title {
        font-size: 20px;
        line-height: 28px;
    }
}
/*-----------D2C Lending Responsive Css End-------------*/

/*-----------Risk Management Responsive Css Start-------------*/
@media(max-width:991px){
    /* Columns stack, so each one needs breathing room under it. */
    .rm-framework .row > [class*="col-"] + [class*="col-"] {
        margin-top: 20px;
    }
    /* Full width now — every heading fits on one line, so the matching
       min-height is no longer needed. */
    .rm-col-head {
        min-height: 0;
        padding: 12px 18px;
    }
}
@media (max-width: 767px) {
    .rm-banner {
    background-image: url(../images/risk-management/risk-management-banner-img-mob.webp);
}
    .rm-framework-head {
        padding: 14px 18px;
        font-size: 16px;
        line-height: 24px;
    }
    .rm-col-head {
        min-height: 56px;
        padding: 10px 14px;
        font-size: 15px;
        line-height: 23px;
    }
    .rm-list-item {
        padding: 12px 14px;
        font-size: 14px;
        line-height: 22px;
    }
    .rm-tech-item {
        padding: 10px;
    }
    .rm-tech-icon {
        margin-bottom: 8px;
    }
    .rm-tech-icon img {
        width: 46px;
    }
    .rm-tech-text {
        font-size: 15px;
        line-height: 23px;
    }
}
/*-----------Risk Management Responsive Css End-------------*/
/* These phone-sized rules had lost their opening @media, so they were applying
   at every width — the timeline years in particular were shrinking on desktop. */
@media (max-width: 767px) {
    .defining-number-value {
        font-size: 24px;
        line-height: 32px;
    }
    .defining-number-label,
    .business-line-name,
    .business-line-value {
        font-size: 15px;
        line-height: 22px;
    }

    .evolution-milestone-year {
        font-size: 24px;
        line-height: 32px;
    }

    /* Steps and the connecting rule are dropped on phones — there is not
       enough width for both columns plus an indent. Name and value keep
       their own underlines and sit on one row. */
    .business-line {
        padding-left: 0 !important;
    }
    .business-line-rule {
        display: none;
    }
    .business-line-name {
        flex: 1;
        width: auto;
        text-align: left;
    }
    .business-line-value {
        width: auto;
        max-width: 50%;
        margin-left: 16px;
    }

    .business-lines-group-title--indent-1,
    .business-lines-group-title--indent-2 {
        margin-left: 0;
    }

    .growing-aum-chart-head {
        display: block;
    }
    .growing-aum-chart-unit {
        display: block;
        margin-top: 4px;
    }
}
/*-----------Powering India's Credit Ecosystem Responsive Css End-------------*/

/*-----------Letter to Shareholders Responsive Css Start-------------*/
@media(max-width:1200px){
    /* .chairman-letter drops to height:auto here and takes its own top
       padding, which already clears the fixed header — the banner's extra
       header offset would double it. */
    .letter-banner {
        padding-top: 70px;
    }
    /* Breadcrumb is still absolute at 95px here, so the copy keeps a top
       offset that clears it once the banner's own padding is counted. */
    .letter-banner .chairman-letter-text {
        min-height: 0;
        padding-top: 50px;
    }
}
@media(max-width:991px){
    .letter-highlight-inner {
        padding: 30px;
    }
    .letter-highlight-value {
        font-size: 26px;
        line-height: 34px;
    }

    .letter-continued {
        padding: 50px 0 55px;
        margin-top: 50px;
    }
    /* Side-by-side needs width the tablet layout no longer has, so the closing
       block stacks: text first, artwork under it and still right-aligned. */
    .letter-closing {
        display: block;
        margin-top: 50px;
    }
    .letter-closing-img {
        max-width: 340px;
        margin-top: 30px;
        margin-left: auto;
    }
}
@media (max-width: 767px) {
    /* .sitemap goes back into the flow here and carries its own top padding,
       so the banner and the copy both drop their header/breadcrumb offsets. */
    .letter-banner {
        padding-top: 0;
    }
    .letter-banner .chairman-letter-text {
        padding-top: 0;
    }

    .letter-salutation,
    .letter-subheading,
    .letter-signoff-name {
        font-size: 16px;
        line-height: 24px;
    }
    .letter-body p,
    .letter-regards {
        line-height: 24px;
    }

    .letter-highlight-inner {
        gap: 30px;
        padding: 26px 22px;
    }
    .letter-highlight-value {
        font-size: 24px;
        line-height: 32px;
    }

    .letter-statement-icon img {
        width: 48px;
    }
    .letter-statement-text,
    .letter-body .letter-statement-text {
        font-size: 16px;
        line-height: 26px;
    }
}
/*-----------Letter to Shareholders Responsive Css End-------------*/

/*-----------Delivering Our Strategy Page Responsive Css Start-------------*/
@media(max-width:991px){
    .strategy-banner {
        margin-bottom: 0;
    }

    .strategy-pillars-intro p {
        font-size: 16px;
        line-height: 26px;
    }
    .strategy-stepper {
        margin-top: 40px;
    }
    /* The rail loses its fixed column and the gap closes up before the layout
       stacks outright at 991px. */
    .strategy-stepper-inner {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 36px;
    }
    .strategy-rail-name {
        font-size: 24px;
    }
    .strategy-panel-ghost {
        top: -34px;
        font-size: 150px;
    }
    .strategy-panel-title {
        font-size: 28px;
        line-height: 36px;
    }
    .strategy-pillars-outro {
        margin-top: 40px;
    }

    .strategy-charts {
        padding: 50px 0 60px;
    }
    /* col-lg-6 is full width from here down, so the charts stack in one column
       and the vertical spine has nothing to divide — only the row rules stay. */
    .strategy-charts .col-lg-6:nth-child(odd) {
        border-right: 0;
    }
    /* Every chart but the last now closes a row. */
    .strategy-charts .col-lg-6:nth-last-child(-n+2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    }
    .strategy-charts .col-lg-6:last-child {
        border-bottom: 0;
    }
    .strategy-chart,
    .strategy-charts .col-lg-6:nth-child(n+3) .strategy-chart {
        padding: 36px 0;
    }
    .strategy-charts .col-lg-6:first-child .strategy-chart {
        padding-top: 0;
    }
    .strategy-charts .col-lg-6:last-child .strategy-chart {
        padding-bottom: 0;
    }
}
@media (max-width: 767px) {
    /* .inner-banner reintroduces a bottom margin at both these breakpoints,
       which would cut a white band across the continuous dark field. */
    .strategy-banner {
        margin-bottom: 0;
    }

    .strategy-pillars {
        padding: 30px 0 0;
    }
    .strategy-pillars-intro p,
    .strategy-panel p,
    .strategy-pillars-outro p {
        line-height: 24px;
    }
    /* Below this width the stepper is not pinned (js/strategy.js drops the
       enhancement at the same breakpoint), so the rail moves above the copy and
       every pillar is read in sequence as an ordinary stack. */
    .strategy-stepper {
        margin-top: 30px;
    }
    .strategy-stepper-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }
    /* Rail turns horizontal: the three steps read as a row of markers above the
       copy rather than a tall column pushing the first pillar down the page. */
    .strategy-rail ul {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 28px;
    }
    .strategy-rail ul:before {
        display: none;
    }
    .strategy-rail-item + .strategy-rail-item {
        margin-top: 0;
    }
    .strategy-rail-item button {
        grid-template-areas: "dot name";
        column-gap: 10px;
    }
    /* The number is redundant once the panels are stacked — each panel carries
       its own numeral behind it. */
    .strategy-rail-num {
        display: none;
    }
    .strategy-rail-name {
        font-size: 19px;
    }
    /* Every pillar is visible in the stack, so no step is "the active one". */
    .strategy-rail-item .strategy-rail-name {
        color: rgba(255, 255, 255, 0.78);
    }
    .strategy-rail-item .strategy-rail-dot {
        background-color: var(--color-accent);
        border-color: var(--color-accent);
        box-shadow: none;
    }
    .strategy-panel + .strategy-panel {
        margin-top: 36px;
    }
    /* Stacked, the numeral no longer has a wide panel to sit behind and was
       landing on the title. It drops back further and tucks to the top-right
       corner, where only the rule and the end of the heading reach it. */
    .strategy-panel-ghost {
        top: -18px;
        font-size: 84px;
        color: rgba(255, 255, 255, 0.035);
    }
    .strategy-panel-title {
        font-size: 24px;
        line-height: 32px;
    }
    /* Figures wrap to their own rows: the hairline dividers only work while
       they sit side by side. */
    .strategy-panel-stats {
        gap: 20px;
        margin-top: 26px;
    }
    .strategy-panel-stats li {
        flex: 1 1 100%;
        min-width: 0;
        padding: 0;
    }
    .strategy-panel-stats li + li {
        border-left: 0;
    }
    .strategy-stat-value {
        font-size: 22px;
        line-height: 30px;
    }
    .strategy-pillars-outro {
        margin-top: 30px;
    }

}
/*-----------Delivering Our Strategy Page Responsive Css End-------------*/

/*-----------About Northern Arc Capital Limited Page Responsive Css Start-------------*/
@media(max-width:991px){
    .about-strengths,
    .value-system {
        padding: 30px 0 0;
    }
    .about-na-key-highlights {
        padding: 30px 0 0;
    }
    .about-na-key-highlight-value,
    .value-system-heading {
        font-size: 26px;
        line-height: 34px;
    }

    .our-values,
    .our-beliefs {
        padding: 30px 0 0;
    }
    /* Columns stack, so the diagram centres under the title instead of
       hugging the right edge. */
    .about-banner {
        padding-bottom: 22px;
    }
    .about-banner .ib-content {
        padding-right: 0;
    }
    .about-banner-img img {
        max-width: 600px;
        margin: 0 auto;
    }
    .our-beliefs-inner {
        padding: 30px;
    }
}
@media (max-width: 767px) {
    .about-intro-text p,
    .about-strength p,
    .value-system-block p,
    .our-value p {
        line-height: 24px;
    }

    .about-strength-title,
    .about-na-key-highlights-title,
    .value-system-title,
    .our-values-title,
    .our-value-name,
    .our-beliefs-title {
        font-size: 16px;
        line-height: 24px;
    }

    .about-na-key-highlight-value,
    .value-system-heading {
        font-size: 24px;
        line-height: 32px;
    }

    .our-beliefs-inner {
        padding: 26px 22px;
    }
}
/*-----------About Northern Arc Capital Limited Page Responsive Css End-------------*/

/*-----------Efficient and Scalable Business Model Page Responsive Css Start-------------*/
@media(max-width:991px){
    .bm-section-title {
        font-size: 26px;
        line-height: 34px;
    }
    .bm-stat-value,
    .cb-cell--figure {
        font-size: 22px;
        line-height: 30px;
    }

    .credit-continuum,
    .customer-base {
        padding: 55px 0 0;
    }

    .bm-d2c {
        padding: 30px 0 0;
    }

    .bm-banner {
        padding-bottom: 0;
    }

    /* Bracket ends move in with the narrower matrix. */
    .customer-base-heading:before {
        right: 8%;
        left: 8%;
    }
}
@media (max-width: 767px) {
    .bm-section-title {
        font-size: 22px;
        line-height: 30px;
    }
    .bm-intro-title,
    .credit-continuum-title,
    .customer-base-heading-text {
        font-size: 16px;
        line-height: 24px;
    }
    .bm-intro p {
        line-height: 24px;
    }

    .bm-stat-value,
    .cb-cell--figure {
        font-size: 20px;
        line-height: 28px;
    }

    /* Label column and cells shrink; the matrix keeps scrolling sideways so
       the grid alignment never breaks. */
    .cb-col--labels {
        flex: 0 0 150px;
        min-width: 150px;
    }
    .cb-col {
        min-width: 160px;
    }
    .cb-cell {
        padding: 12px;
        font-size: 14px;
        line-height: 22px;
    }
    .cb-cell--media,
    .cb-cell--spacer-media {
        height: 140px;
    }
    .cb-label-icon img {
        width: 22px;
        height: 22px;
    }
    .cb-aum-box {
        font-size: 15px;
        line-height: 20px;
    }

    /* The bracket's arms are positioned by percentages tuned to the desktop
       matrix, so at this width they break into stranded stubs either side of
       the caption. Dropped here — a plain left-aligned title reads better on a
       narrow screen and needs no alignment to the columns below. */
    .customer-base-heading {
        margin-bottom: 18px;
        text-align: left;
    }
    .customer-base-heading:before,
    .customer-base-heading:after {
        content: none;
    }
    /* Was nudged off-centre to sit on the bracket's midpoint; with the bracket
       gone it returns to the normal text flow. */
    .customer-base-heading-text {
        left: 0;
        padding: 0;
    }

    /* Row labels were wrapping to three lines and crowding their icons. */
    .cb-cell--label {
        gap: 10px;
        font-size: 13px;
        line-height: 19px;
    }
    .cb-cell--value {
        font-size: 13px;
        line-height: 19px;
    }
    .cb-cell--segment {
        font-size: 14px;
        line-height: 20px;
    }
    .cb-cell--figure {
        font-size: 18px;
        line-height: 26px;
    }
}

/* Narrow phones: the matrix still scrolls sideways, but the label column and
   the type inside it need one more step down to stop every row wrapping. */
@media (max-width: 480px) {
    .customer-base-heading-text {
        font-size: 15px;
        line-height: 22px;
    }
    .cb-col--labels {
        flex: 0 0 132px;
        min-width: 132px;
    }
    .cb-cell {
        padding: 10px;
    }
    .cb-cell--label,
    .cb-cell--value {
        font-size: 12px;
        line-height: 18px;
    }
    .cb-label-icon img {
        width: 20px;
        height: 20px;
    }
    .cb-cell--figure {
        font-size: 17px;
        line-height: 24px;
    }
    .cb-aum-box {
        font-size: 13px;
        line-height: 18px;
    }
}
/*-----------Efficient and Scalable Business Model Page Responsive Css End-------------*/

/*-----------Inner Page Rhythm Responsive Css Start-------------*/
/* The six report pages share one vertical rhythm: 40px clear under the banner
   and 30px above the pager. Both scale down together here so every page keeps
   matching gaps at every width. */
@media(max-width:991px){
    .credit-ecosystem-intro,
    .letter-opening,
    .strategy-pillars,
    .about-intro,
    .bm-credit-solutions {
        /* padding-top: 30px; */
    }

    .growing-aum,
    .letter-continued,
    .strategy-charts,
    .our-beliefs {
        padding-bottom: 24px;
    }
}
@media (max-width: 767px) {
    .credit-ecosystem-intro,
    .letter-opening,
    .strategy-pillars,
    .about-intro,
    .bm-credit-solutions {
        /* padding-top: 24px; */
    }

    .growing-aum,
    .letter-continued,
    .strategy-charts,
    .our-beliefs {
        padding-bottom: 20px;
    }

    /* Justified only on phones — the narrow measure leaves ragged right edges
       that read badly over letters this long. Hyphenation prevents the word
       gaps justification would otherwise open up. The sign-off is left out:
       justifying a one-line "Warm Regards," would stretch it across the
       column. */
    .letter-body p {
        text-align: justify;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
    .mcat
    {
        gap: 0px;
    }
    .ceo-letter .chairman-letter-text {
    margin-left: 0px;
}
.esg-title span {
    display: inline;
}
    .d2c-banner {
    background-image: url(../images/direct-to-customer-lending/Our-business-segments/mobile.webp);
}
.csgphimgcls img{
    width: 100%;
}
    /* The desktop scrim runs left-to-centre because the copy sits in the left
       half there. On a phone the copy is full width and stacked at the top, so
       a horizontal fade darkens the wrong part of the photo — it used to be
       switched off entirely (`background: none`), which left white text sitting
       straight on the photograph with nothing behind it.
       Vertical instead: darkest at the top where the breadcrumb and heading
       are, fading out by roughly the middle so the lower half of the picture
       stays clean. */
    /* .letter-banner (the two shareholder-letter pages) gets the same flip: it
       is a .chairman-letter section rather than an .inner-banner, so it has its
       own scrim declared separately and would otherwise keep the left-to-right
       one behind top-stacked copy. */
    /* The ramp holds near-full strength through the top third rather than
       fading immediately: the breadcrumb wraps to two lines and the heading
       sits directly under it, so the whole block — not just the first line —
       has to clear the photo. Some of these images are LIGHT at the top (the
       pale glass on the shareholder-letter pages, a bright sky on d2c), which
       is where a quicker fade left the second breadcrumb line washed out. */
    .inner-banner:before,
    .letter-banner:before {
        background: linear-gradient(180deg,
                    rgba(0, 0, 0, 0.88) 0%,
                    rgba(0, 0, 0, 0.84) 22%,
                    rgba(0, 0, 0, 0.72) 38%,
                    rgba(0, 0, 0, 0.45) 55%,
                    rgba(0, 0, 0, 0.18) 70%,
                    rgba(0, 0, 0, 0) 82%);
    }

    /* Banner text is white on every banner at this width, not just the four
       photo banners that get it on desktop. The breadcrumb's base colour is
       --color-dark, which against the photo read as grey — this is the rule
       that keeps it white the way it already is on the larger screens.
       .mi-banner and .split-banner have no photo behind them, so they are
       excluded and keep their dark text. */
    .inner-banner:not(.mi-banner):not(.split-banner) .ib-breadcrumb ul li,
    .inner-banner:not(.mi-banner):not(.split-banner) .ib-breadcrumb ul li a,
    .inner-banner:not(.mi-banner):not(.split-banner) .ib-eyebrow,
    .inner-banner:not(.mi-banner):not(.split-banner) h1,
    .letter-banner .ib-breadcrumb ul li,
    .letter-banner .ib-breadcrumb ul li a {
        color: #ffffff;
    }

    /* Focal points, set per image rather than with one shared value. These are
       16:9 photographs shown in a tall narrow frame, so `cover` throws away
       most of the WIDTH — a `center` focal point keeps the middle strip, and
       whether the subject survives that depends entirely on where they stand
       in each particular photo. Measured off the source files:

       powering  — the woman at the sewing machine sits right of centre, at
                   roughly 62% across; `center` cut her in half. Vertically she
                   occupies the lower two-thirds, so the crop stays low.
       rm        — the hand and dominoes read from just left of centre.
       future    — a spread-out group with no single subject; centre is right,
                   pulled up slightly to favour the people over the floor. */
    .powering-banner {
        background-position: 62% 60%;
    }
    .rm-banner {
        background-position: 45% 50%;
    }
    .future-banner {
        background-position: center 40%;
    }
    /* .d2c-banner is excluded on purpose: it swaps to a dedicated portrait
       crop (mobile.webp) at this breakpoint, which is already framed for a
       narrow screen and needs no focal-point nudge. */
}
/*-----------Inner Page Rhythm Responsive Css End-------------*/

/*-----------Mobile Header & Menu Rebuild Start-------------*/
/* Small-screen only. The desktop mega menu collapses to an accordion at 991px,
   but it kept desktop-scale spacing and its grid tracks had no min-width, so
   long titles blew past the viewport and clipped. This block rebuilds the
   header bar and the accordion around touch: nothing overflows, every row is
   a comfortable target, and the panel gets its own sticky close control. */
@media (max-width: 767px) {

    /* --- Header bar --- */
    /* Logo and report title share a tight row; the title truncates rather than
       pushing the Menu button off the edge on narrow phones. */
    .header-inner {
        padding: 8px 0;
        gap: 12px;
    }
    .header-left {
        min-width: 0;
        gap: 10px;
    }
    .report-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Keeps the tap area at the 44px minimum without moving the bars. */
    .ham-icon1 {
        gap: 9px;
        min-height: 44px;
        padding-left: 6px;
    }

    /* --- Menu panel --- */
    /* Fills the screen below the header and scrolls as one column, so the
       category list and the open pane never fight for a nested scroll area. */
    .my-sidenav1 {
        top: var(--header-height);
        height: calc(100dvh - var(--header-height));
        height: calc(100vh - var(--header-height));
        overflow: hidden;
    }
    .menuInner {
        height: 100%;
    }
    .megaMenu {
        padding: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .menuRail {
        padding: 0 0 8px;
    }

    /* --- Category buttons --- */
    /* Full-width rows with the arrow pinned right. min-width:0 on the label is
       what stops a long category name from widening the grid past the screen. */
    .mcat {
        grid-template-columns: 28px 1fr 20px;
        gap: 12px;
        padding: 17px 20px;
        min-height: 56px;
    }
    .mcatNum {
        font-size: 12px;
    }
    .mcatName {
        min-width: 0;
        font-size: 15px;
        line-height: 1.25;
        overflow-wrap: break-word;
    }
    .mcat.active {
        background-color: rgba(79, 198, 224, 0.08);
    }
    .mcatArrow {
        width: 16px;
        height: 16px;
    }

    /* --- Link panes --- */
    .mpane {
        padding: 4px 0 10px;
        background-color: rgba(35, 31, 32, 0.02);
    }
    /* Single column that respects the viewport: min-width:0 lets the track
       shrink, so long titles wrap onto a second line instead of clipping. */
    .mpaneLinks {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        padding: 0;
    }
    .mpaneLinks li {
        min-width: 0;
    }
    /* Bullet moves onto its own gutter and pins to the first line, so wrapped
       titles align under themselves rather than under the dot. */
    .mpaneLinks li a {
        min-height: 46px;
        padding: 12px 20px 12px 38px;
        font-size: 15px;
        line-height: 22px;
        overflow-wrap: break-word;
    }
    .mpaneLinks li a:before {
        left: 20px;
        top: 21px;
    }
    /* Download links keep the arrow beside wrapping text, not below it. */
    .mpaneLinks a.hasDl {
        display: flex;
        align-items: flex-start;
        gap: 14px;
    }
    .mpaneLinks a.hasDl:after {
        margin-top: 3px;
    }

    /* --- Panel footer --- */
    /* Pinned below the scrolling list so Download Full Report stays reachable
       without scrolling to the end of every pane. */
    .menuFoot {
        background-color: #ffffff;
    }
    .menuFootInner {
        gap: 12px;
        padding: 14px 20px;
    }
    /* Long on one line at this width — allowed to wrap instead of overflowing. */
    .menuFootMeta {
        font-size: 10px;
        line-height: 16px;
        letter-spacing: 0.06em;
        overflow-wrap: break-word;
    }
    .menuFootDl {
        justify-content: center;
        width: 100%;
        min-height: 46px;
        padding: 12px 18px;
    }
}
/*-----------Mobile Header & Menu Rebuild End-------------*/

@media (max-width: 420px) {
    .ham-bars {
        width: 24px;
    }
    .report-title {
        font-size: 11px;
    }
}

/*-----------Banner Responsive Css Start-------------*/
/* Both banner variants — .split-banner on the inner pages and .letter-banner on
   the two shareholder letters — share one ladder. The desktop rules assume the
   breadcrumb is absolutely positioned and the two columns sit side by side;
   both assumptions change on the way down, so each step is handled here. */

/* Breadcrumb moves to 95px, so the row above it closes up. The photo also
   takes a fixed ratio from here down — its 500px min-height was set against a
   1320px container and grows too tall relative to the copy once narrower. */
@media (max-width: 1200px) {
    .split-banner {
        padding-top: 130px;
    }
    .split-banner .split-banner-row {
        min-height: 0;
    }
    /* No ratio override here any more: the base rule gives each banner its own
       photo's ratio, so the box never needs re-shaping per breakpoint. Forcing
       4/3 here would have re-cropped the 16/9 photos it used to correct for. */

    /* The letter banner's columns are col-xl-6, so they stack from 1200px while
       the split banners are still side by side until 992px. The stacked photo
       column is full-width here, and a 16/9 box across the whole container is
       far taller than the banner on any other page — the portrait then scales up
       to a 88% width ceiling and runs past the bottom of it. Sizing by height
       instead keeps the block the same as everywhere else through this gap. The
       copy column's 420px floor goes with it: it existed to match the 480px
       photo that used to sit beside it, and once stacked it is only dead space. */
    .letter-banner .chairman-img {
        aspect-ratio: auto;
        height: 420px;
    }
    .letter-banner .chairman-img img {
        max-width: 100%;
    }
}

/* Columns stack from here: the copy no longer sits beside the photo, so the
   side padding that kept them apart goes, and the tall min-heights that were
   matching the two columns to each other are released. */
@media (max-width: 991px) {
    /* No min-height once stacked: the copy and photo set their own height, and
       a 500px floor left dead space under the photo on short screens. */
    .split-banner {
        padding-top: 125px;
        margin-bottom: 0px;
        min-height: 0;
    }
    .split-banner .split-banner-row {
        min-height: 0;
    }
    .split-banner .ib-content {
        max-width: 100%;
        padding-right: 0;
        padding-bottom: 26px;
    }
    /* No bottom padding — the portrait ends the stack and stands on the
       banner's bottom edge rather than floating above a strip of backdrop. */
    .letter-banner {
        padding-top: 125px;
        padding-bottom: 0;
    }
    .letter-banner .chairman-letter-text {
        min-height: 0;
        padding-right: 0;
        padding-bottom: 26px;
    }
    /* .chairman-img carries a 40px top margin from the home-page layout, which
       lands on top of the copy's own bottom padding once stacked. */
    .letter-banner .chairman-img {
        min-height: 0;
        margin-top: 0;
        aspect-ratio: 16 / 9;
    }
    /* Only the width ceiling changes here — height still leads, as in the base
       rule, so the portrait keeps fitting the box instead of overflowing it. */
    .letter-banner .chairman-img img {
        max-width: 66%;
    }
}

/* .sitemap returns to the normal flow at this breakpoint and carries its own
   padding, so the banner's offset for an absolute breadcrumb must go — leaving
   it would double the gap. */
@media (max-width: 767px) {
    .split-banner {
        padding-top: 0;
        margin-bottom: 0px;
    }
    .split-banner .ib-content {
        padding-bottom: 22px;
    }

    /* .sitemap is back in the flow here and carries its own 85px top padding,
       so the banner's offset for an absolutely-positioned breadcrumb has to go
       — the two were stacking into a large gap under the header. */
    .letter-banner {
        padding-top: 0;
        padding-bottom: 0;
    }
    .letter-banner .chairman-letter-text {
        padding-bottom: 22px;
    }
    .letter-banner .chairman-img {
        aspect-ratio: 4 / 3;
    }
    .letter-banner .chairman-img img {
        max-width: 72%;
    }
}

/* Narrow phones: a 4/3 backdrop eats the whole screen before any copy is
   visible, so the letter banner takes a shallower crop. The split banners are
   left alone — they now carry their own photo's ratio, which is already
   shallower than 3/2, and reshaping the box would crop the photo again. */
@media (max-width: 575px) {
    .letter-banner .chairman-img {
        aspect-ratio: 3 / 2;
    }
    .letter-banner .chairman-img img {
        max-width: 80%;
    }
}

/* No per-breakpoint override for the future banner: its ratio is set once on
   .future-split-banner in style.css and, now that nothing reshapes
   .split-banner-media at a breakpoint, it holds at every width. */
/*-----------Banner Responsive Css End-------------*/

/*-----------Evolution Journey (arc timeline) Responsive Start-------------*/
@media (max-width: 1199px) {
    .journey-label {
        font-size: 34px;
    }
    .journey-stage {
        width: 96%;
    }
}

@media (max-width: 991px) {
    .journey-section {
        padding: 50px 0 40px;
    }
    .journey-title {
        font-size: 28px;
        line-height: 36px;
    }
    .journey-timeline {
        min-height: 350px;
    }
    .journey-label {
        font-size: 26px;
    }
    .journey-stage {
        top: 152px;
    }
    .journey-detail-icon img {
        width: 54px;
        height: 54px;
    }
    .journey-year {
        font-size: 26px;
        line-height: 32px;
    }
    .journey-milestone-title {
        font-size: 20px;
        line-height: 28px;
    }
    .journey-milestone-text {
        font-size: 15px;
        line-height: 22px;
    }
    /* Only the size changes here — journey.js finds the height from the arc. */
    .journey-arrow {
        --journey-arrow-size: 42px;
    }
    .journey-detail {
        padding: 0 62px;
    }
}

@media (max-width: 767px) {
    .journey-section {
        padding: 40px 0 40px;
    }
    .journey-title {
        font-size: 24px;
        line-height: 31px;
        margin-bottom: 14px;
    }
    /* The arc is far shallower at this width, so the years crowd: the track
       gets taller and the labels drop back to make room for the copy. */
    .journey-timeline {
        min-height: 330px;
    }
    .journey-label {
        font-size: 19px;
    }
    .journey-connector {
        top: 56px;
        height: 74px;
    }
    .journey-stage {
        top: 136px;
    }
    .journey-detail-icon img {
        width: 46px;
        height: 46px;
    }
    .journey-year {
        font-size: 22px;
        line-height: 28px;
    }
    .journey-milestone-title {
        font-size: 18px;
        line-height: 26px;
    }
    .journey-milestone-text {
        font-size: 14px;
        line-height: 21px;
    }
    /* The arrows shrink and tuck in: swiping the track is the main gesture here. */
    .journey-arrow {
        --journey-arrow-size: 36px;
    }
    .journey-detail {
        padding: 0 46px;
    }
    .journey-arrow svg {
        width: 16px;
        height: 16px;
    }
}
/*-----------Evolution Journey (arc timeline) Responsive End-------------*/

/*-----------Enhancing Efficiency Page Responsive Css Start-------------*/
/* Placed after the shared .mi-banner breakpoints so the page keeps its own
   bottom padding at every width; responsive.css loads after style.css, so the
   desktop .ee-banner rule alone would be overridden here. */
@media(max-width:991px){
    .ee-banner {
        padding-bottom: 0;
    }
}
/*-----------Enhancing Efficiency Page Responsive Css End-------------*/

/*-----------Awards Page Responsive Css Start-------------*/
@media(max-width:991px){
    .awards-banner {
        padding-bottom: 0;
        margin-bottom: 20px;
    }
}
/*-----------Awards Page Responsive Css End-------------*/

/*-----------ESG Focus Page Responsive Css Start-------------*/
@media(max-width:991px){
    /* There is no mobile crop of the collage, and `cover` in a tall frame would
       throw away most of its WIDTH and leave a fragment. The banner drops to
       auto height instead and the artwork sits under the copy at full width,
       the 56.25vw bottom padding reserving its own 16:9 strip. */
    .esg-banner {
        height: auto;
        min-height: 0;
        padding-bottom: 56.25vw;
        margin-bottom: 20px;
        background-color: #ffffff;
        background-size: 100% auto;
        background-position: center bottom;
    }

    /* The dark top-down scrim and white text every photo banner gets at this
       width would sit on white here, so both are reversed out. Selectors match
       the shape of the rules they override so the specificity ties and source
       order decides. */
    .esg-banner:before {
        background: none;
    }

    .esg-banner:not(.mi-banner):not(.split-banner) .ib-breadcrumb ul li,
    .esg-banner:not(.mi-banner):not(.split-banner) .ib-breadcrumb ul li a,
    .esg-banner:not(.mi-banner):not(.split-banner) h1 {
        color: var(--color-dark);
    }

    .esg-banner .ib-breadcrumb ul li a:hover {
        color: var(--color-accent);
    }
}
/*-----------ESG Focus Page Responsive Css End-------------*/

/*-----------Work Culture Page Responsive Css Start-------------*/
@media(max-width:991px){
    .culture-page-banner {
        padding-bottom: 0;
        margin-bottom: 20px;
    }
}
/*-----------Work Culture Page Responsive Css End-------------*/

/*-----------Technology Page Responsive Css Start-------------*/
/* After the shared .mi-banner breakpoints, so the page keeps its own bottom
   padding at every width. */
@media(max-width:991px){
    .technology-page-banner {
        padding-bottom: 0;
        margin-bottom: 20px;
    }
}
/*-----------Technology Page Responsive Css End-------------*/