:root {
    --font-body: "Montserrat", sans-serif;
    --font-heading: "gotham", sans-serif;
    --color-body: #000000;
    --color-dark: #231f20;
    --color-accent: #4fc6e0;
    --color-banner-bg: #eef8fb;
    --header-height: 78px;
}

body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 24px;
    font-family: var(--font-body);
    color: var(--color-body);
    font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0px;
    padding: 0px;
}

/* Headings: Gotham Bold, 36px/42px. Hero banner heading is excluded and styled separately. */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 36px;
    line-height: 42px;
}

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

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

p {
    font-size: 16px;
    line-height: 24px;
    font-family: var(--font-body);
    color: var(--color-body);
    font-weight: 400;
}

.my-sidenav {
    display: none;
}

/* Reusable thin scroller for capped text blocks on dark backgrounds.
   Deliberately no scrollbar-width/scrollbar-color: Chrome 121+ drops the
   ::-webkit-scrollbar rules entirely as soon as either one is present. */
.scroll-text-new {
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
    max-height: 105px;
}

.scroll-text-new::-webkit-scrollbar {
    width: 3px;
}

.scroll-text-new::-webkit-scrollbar-track {
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.2);
}

.scroll-text-new::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.85);
}

/*-----------Header Css Start-------------*/
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: #ffffff;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}


#header.sticky {
    box-shadow: 0 2px 14px rgba(35, 31, 32, 0.10);
}

/* Slides out of view while scrolling down, back in on scroll up. */
#header.header-hidden {
    transform: translateY(-100%);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo {
    display: block;
}

.logo img {
    display: block;
    height: 58px;
    width: auto;
}

.report-title {
    position: relative;
    padding-left: 20px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}

.report-title:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 30px;
    background-color: rgba(35, 31, 32, 0.25);
}

.ham-icon1 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.ham-bars {
    display: block;
    width: 30px;
}

.ham-bars span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-dark);
    transition: width 0.3s ease, background-color 0.3s ease;
}

.ham-bars span + span {
    margin-top: 7px;
}

.ham-bars span:nth-child(2) {
    width: 70%;
    margin-left: auto;
}

.ham-text {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-dark);
    transition: color 0.3s ease;
}

.ham-icon1:hover .ham-bars span,
.ham-icon1:focus-visible .ham-bars span {
    background-color: var(--color-accent);
}

.ham-icon1:hover .ham-bars span:nth-child(2),
.ham-icon1:focus-visible .ham-bars span:nth-child(2) {
    width: 100%;
}

.ham-icon1:hover .ham-text,
.ham-icon1:focus-visible .ham-text {
    color: var(--color-accent);
}

/* Only one of the two labels is ever shown. */
.ham-text-close,
.ham-icon1.is-open .ham-text-open {
    display: none;
}

.ham-icon1.is-open .ham-text-close {
    display: block;
}

/* Bars fold into a cross while the menu is open. */
.ham-icon1.is-open .ham-bars span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.ham-icon1.is-open .ham-bars span:nth-child(2) {
    opacity: 0;
}

.ham-icon1.is-open .ham-bars span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

.ham-icon1.is-open .ham-bars span:nth-child(2) {
    width: 70%;
}
/*-----------Header Css End-------------*/

/*-----------Mega Menu Css Start-------------*/
.my-sidenav1 {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    z-index: 9998;
    width: 100%;
    height: calc(100% - var(--header-height));
    background-color: #ffffff;
    overflow: hidden;
}

/* Content grows and scrolls; the footer bar stays pinned to the bottom. */
.menuInner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    border-top: 1px solid rgba(35, 31, 32, 0.15);
}

/* Numbered rail on the left, the matching pane on the right. */
.megaMenu {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: 50px;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

.menuRail {
    flex: 0 0 clamp(300px, 34%, 420px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 40px 24px 40px 0;
    border-right: 1px solid rgba(35, 31, 32, 0.15);
}

.mcat {
    display: grid;
    grid-template-columns: 34px 1fr 24px;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-bottom: 10px;
    padding: 14px 20px;
    background: transparent;
    border: 1px solid transparent;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.35s ease;
}

.mcatNum {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-dark);
    transition: color 0.35s ease;
}

.mcatName {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.15;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-dark);
    transition: color 0.35s ease;
}

.mcatArrow {
    width: 18px;
    height: 18px;
    color: var(--color-dark);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.mcat.active {
    border-color: var(--color-accent);
}

.mcat.active .mcatNum,
.mcat.active .mcatName,
.mcat.active .mcatArrow {
    color: var(--color-accent);
}

.mcat.active .mcatArrow {
    opacity: 1;
}

.menuPanes {
    flex: 1 1 auto;
    display: flex;
    min-width: 0;
    min-height: 0;
    padding: 40px 20px 40px 0;
    overflow: hidden;
}

.mpane {
    display: none;
}

/* Column so the title stays put and only the list below it scrolls. */
.mpane.active {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
}

.mpaneTitle {
    margin-bottom: 22px;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
    color:var(--color-accent);;
}

/* Grid, not column-count: multicol with a capped height pushes the overflow
   into extra columns to the right instead of down, so it cannot scroll. */
.mpaneLinks {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    align-content: start;
    min-height: 0;
    margin: 0;
    padding: 0 20px 0 0;
    list-style: none;
    overflow-y: auto;
    overflow-x: hidden;
}

.mpaneLinks::-webkit-scrollbar {
    width: 3px;
}

.mpaneLinks::-webkit-scrollbar-track {
    border-radius: 0;
    background-color: rgba(35, 31, 32, 0.15);
}

.mpaneLinks::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: rgba(35, 31, 32, 0.85);
}

.mpaneLinks li a {
    position: relative;
    display: block;
    padding: 10px 0 10px 18px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 22px;
    color: rgba(35, 31, 32, 0.85);
    transition: color 0.2s ease;
}

.mpaneLinks li a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 17px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-accent);
}

.mpaneLinks li a:hover {
    color: var(--color-accent);
}

/* Download marker on the PDF links. */
.mpaneLinks a.hasDl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mpaneLinks a.hasDl:after {
    content: "";
    flex-shrink: 0;
    width: 13px;
    height: 15px;
    background-color: rgba(35, 31, 32, 0.85);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M7 0v11M2.5 7L7 11.5 11.5 7M0 15h14' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M7 0v11M2.5 7L7 11.5 11.5 7M0 15h14' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: background-color 0.2s ease;
}

.mpaneLinks a.hasDl:hover:after {
    background-color: var(--color-accent);
}

.menuFoot {
    flex: 0 0 auto;
    border-top: 1px solid rgba(35, 31, 32, 0.15);
}

.menuFootInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 18px 40px;
}

.menuFootMeta {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(35, 31, 32, 0.70);
}

.menuFootMeta strong {
    font-weight: 700;
    color: var(--color-dark);
}

.menuFootDl {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 24px;
    background: transparent;
    border: 1px solid var(--color-accent);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-accent);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.menuFootDl svg {
    width: 15px;
    height: 15px;
}

.menuFootDl:hover {
    background-color: var(--color-accent);
    color: #ffffff;
}
/*-----------Mega Menu Css End-------------*/

/*-----------Hero Banner Css Start-------------*/
/* position:relative anchors the .hero-banner-media panel against this section.

   The film is a panel on the right, with the title and CTA on the left, and it
   touches the top, bottom and right edges with no ground showing on any side.

   The split is 4/8: the title takes the container's first four columns and the
   film's panel starts at that boundary and runs off the right of the screen.

   The video is never cropped, on any edge. That is only possible if the section
   is exactly as tall as the panel is at the clip's own ratio, so the height is
   DERIVED rather than set: the panel spans from the col-4 boundary to the right
   of the screen, so its width is (100vw - that edge), and at the clip's
   1100x780 its height is that over 1.410256. Pinning the height to the viewport
   instead left object-fit to crop the difference — at 100vh that was trimming
   31-43% off the sides of the collage.

   margin-top starts the section below the header rather than at y=0. The header
   is a solid white bar pinned over the page at z-index 9999, so without it the
   top ~78px of the panel sat behind the header and the collage's first row of
   tiles was hidden.

   --hero-media-left is the panel's left edge, shared with .hero-banner-media so
   the two cannot drift apart. overflow:hidden lets the panel bleed past the
   right edge without adding a scrollbar. */
.hero-banner {
    /* The col-4/col-8 boundary in viewport terms: a third of the way across the
       centred container, plus the margin to its left. In vw, not %, because this
       also drives the section's HEIGHT below and a percentage there would
       resolve against the wrong axis. */
    --hero-container-w: min(1320px, 100vw);
    --hero-media-left: calc(
        (100vw - var(--hero-container-w)) / 2 + var(--hero-container-w) / 3
    );

    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: var(--header-height);
    /* Exactly the panel's height at the clip's ratio: this is what lets the film
       touch top, bottom and right while staying uncropped. */
    height: calc((100vw - var(--hero-media-left)) / 1.410256);
    padding: 0;
    background-color: var(--color-banner-bg);
    overflow: hidden;
}

/* No header clearance here any more: the section itself now starts below the
   header (margin-top on .hero-banner), so padding it again would push the copy
   down by a second header's worth and knock it off centre against the panel. */
.hero-banner > .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-banner-text .btn-readmore {
    margin-top: 32px;
}

/* Hero banner heading is the documented exception to the Gotham heading rule.

   Fluid rather than a flat 42px: the copy now sits in a col-4 beside the film's
   panel, and at a flat size the longest line ("INDIA'S CREDIT") came within 2px
   of the panel around 1366px — reading as though the text touched the video.
   Scaling with the viewport keeps a real gap at every width without needing a
   size at each breakpoint; the clamp holds it to the original 42px on a wide
   screen and stops it collapsing on a narrow one. */
.hero-banner-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(30px, 2.9vw, 42px);
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Stays inside the container on the right; gains width by extending leftward
   past the col-xl-8 edge. */
.hero-banner-img {
    margin-left:0px;
    margin-right: 0;
}

/* The film's panel: pinned to the right half of the section and run off the
   right edge of the screen, so the collage is full-bleed on that side while the
   copy opposite it stays on the container's grid.

   left is set from the container rather than a flat 50%: the copy occupies the
   left half of a centred, max-width container, so on a wide screen the panel
   starts where that column ends instead of at the middle of the viewport. The
   gutter keeps the collage's first tile clear of the title.

   Not display:none anywhere — the same file plays at every width; below the
   desktop breakpoint this panel simply becomes a stacked block (responsive.css)
   instead of an absolutely positioned one. */
/* Runs the full height of the section and off its right edge — top, bottom and
   right all touch, with no band of ground showing on any side.

   The section takes its height FROM this panel (see .hero-banner), so the panel
   filling it edge to edge and the collage never being cropped are the same
   thing: the box is the clip's own ratio because the section was sized to it. */
.hero-banner-media {
    position: absolute;
    top: 0;
    bottom: 0;
    /* Half the section, nudged right by a quarter of whatever margin the centred
       1320px container leaves. On a wide screen that lands the panel's edge on
       the copy column's edge instead of the raw viewport centre; once the
       viewport is narrower than the container the term goes to zero and this is
       a plain half. Shared with .hero-banner, which sizes its own height from
       the same edge so the panel fills it exactly. */
    left: var(--hero-media-left);
    right: 0;
    z-index: 0;
    overflow: hidden;
}

/* Fills its panel edge to edge. The panel is sized to the clip's own ratio (see
   .hero-banner), so object-fit has nothing to crop — the whole collage shows.

   The scale is not decoration: the source file has a pale border baked INTO the
   picture — 14px top, 10px bottom, 6px left, 10px right of flat #ecf9f9 around
   the tiles. No amount of box sizing removes that, because it is part of the
   frame, and it read as a thin band of empty space along the top, bottom and
   right of the panel. Scaling the video up by 4.5% about its centre pushes that
   border out past the panel's edges — the trim works out at ~25px horizontally
   and ~17px vertically in source pixels, clearing the widest border on each
   axis with room to spare — so the tiles themselves reach the edges.

   If the film is ever re-exported without the border, drop the transform and
   the overflow:hidden that clips it. */
.hero-banner-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.045);
}


/* 12-tile collage. A 48-column track set is used because each of the three
   bands splits the width at different points; tiles just span the columns
   they need. Row 1 is two tracks so the narrow left column can hold two
   stacked tiles while its neighbours span both. */
.hero-collage {
    display: grid;
    grid-template-columns: repeat(48, 1fr);
    grid-template-rows: 1.01fr 1.01fr 1.05fr 1.25fr;
    gap: 3px;
    height: 600px;
    width: 100%;
}

.hero-tile {
    overflow: hidden;
}

.hero-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Two crops that only go wrong once the collage reshapes below the desktop
   grid — both subjects sit off the centre these frames are otherwise cropped
   around. Tile 4: the woman in red stands at the right edge, so a centred crop
   cuts her out; anchoring right keeps her in. Tile 5: the girl and her
   grandfather are both in the upper half, so a centred crop on a squarer tile
   takes the tops of their heads off; anchoring top holds both faces. */
@media (max-width: 1200px) {
    .hero-tile-4 img {
        object-position: right center;
    }
    .hero-tile-5 img {
        object-position: center top;
    }
}

/* animate.css defaults .animated to 1s, which is longer than the gap between
   the tiles' wow delays — they all overlap and read as one burst. Shortening
   it makes the sequence visible. */
.hero-tile .animated {
    animation-duration: 0.6s;
}

/* Band 1 */
.hero-tile-1  { grid-column: 1 / 7;    grid-row: 1; }
.hero-tile-2  { grid-column: 1 / 7;    grid-row: 2; }
.hero-tile-3  { grid-column: 7 / 19;   grid-row: 1 / 3; }
.hero-tile-4  { grid-column: 19 / 40;  grid-row: 1 / 3; }
.hero-tile-5  { grid-column: 40 / 49;  grid-row: 1 / 3; }


/* Band 2. Tile 8 is the tall one — it runs down through band 3 as well, which
   is why band 3 only holds two tiles. */
.hero-tile-6  { grid-column: 1 / 13;   grid-row: 3; }
.hero-tile-7  { grid-column: 13 / 28;  grid-row: 3; }
.hero-tile-8  { grid-column: 28 / 40;  grid-row: 3 / 5; }
.hero-tile-9  { grid-column: 40 / 49;  grid-row: 3; }

/* Band 3 */
.hero-tile-10 { grid-column: 1 / 28;   grid-row: 4; }
.hero-tile-11 { grid-column: 40 / 49;  grid-row: 4; }

/*-----------Hero Banner Css End-------------*/

/*-----------Chairman Letter Css Start-------------*/
/* Full-bleed 50/50 split: photo on one half, copy on the other. No .container,
   so each half runs to its viewport edge. */
.chairman-letter {
    position: relative;
    height: 100vh;
    padding: 0;
    overflow: hidden;
}

.chairman-flex {
    display: flex;
    height: 100%;
}

/* Photo half — the section background sits here now, with the cut-out portrait
   standing on the bottom edge. */
.chairman-media {
    position: relative;
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-image: url(../images/chairman-bg-img.webp);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.ceo-letter .chairman-media {
    background-image: url(../images/md-ceo-bg-img.webp);
}

/* The two letters mirror each other on desktop: the Chairman's portrait sits on
   the right, the MD & CEO's on the left. Ordering rather than markup order, so
   below 1200px — where .chairman-flex stops being a flex row and the blocks
   stack — both keep the photo-then-copy reading order they have today. */
@media (min-width: 1201px) {
    .ceo-letter .chairman-media {
        order: -1;
    }
}

/* Copy half. */
.chairman-body {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 50px;
    background-color: var(--color-banner-bg);
}

.chairman-letter-text {
    width: 100%;
    max-width: 520px;
}

.chairman-letter-title {
    margin-bottom: 34px;
    color: var(--color-accent);
}

.chairman-quote-icon {
    display: inline-block;
    margin-bottom: 18px;
    line-height: 0;
}

.chairman-quote-icon img {
    display: block;
    width: 34px;
    height: auto;
}

.chairman-letter-text p {
    max-width: 560px;
    margin-bottom: 28px;
    color:var(--color-body);
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
}

.chairman-author {
    margin-bottom: 34px;
}

.chairman-name {
    display: block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-dark);
}

.chairman-designation {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--color-dark);
}

.btn-readmore {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background-color: #ffffff;
    border-bottom: 3px solid var(--color-accent);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    color: var(--color-accent);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-readmore-arrow {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.btn-readmore:hover {
    background-color: var(--color-accent);
    color: #ffffff;
}

.btn-readmore:hover .btn-readmore-arrow {
    transform: translateX(5px);
}

/* Reversed fill, for sections sitting on a white background where the plain
   white button would disappear. */
.btn-readmore-alt {
    background-color: var(--color-accent);
    border-bottom-color: #ffffff;
    color: #ffffff;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.btn-readmore-alt:hover {
    background-color: #ffffff;
    border-bottom-color: var(--color-accent);
    color: var(--color-accent);
}

.chairman-img {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Both portraits render at the same size regardless of their differing source
   dimensions; `contain` keeps the aspect ratio intact. */
.chairman-img img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 85%;
    object-fit: contain;
    object-position: center bottom;
}
/*-----------Chairman Letter Css End-------------*/

/*-----------Delivering Our Strategy Css Start-------------*/
.strategy-section {
    padding: 100px 0;
    background-color: var(--color-dark);
}

.strategy-title {
    margin-bottom: 26px;
    color: #ffffff;
}

/* Keeps "Strengthen • Grow • Reimagine" on a single line. */
.strategy-title-line {
    white-space: nowrap;
}

.strategy-text p {
    max-width: 520px;
    margin-bottom: 36px;
    color: #ffffff;
}

/* Has to out-specify owl.carousel.css's own `.owl-carousel .owl-item img
   { width: 100% }`, which would otherwise win. */
/* collectMapSvg() swaps the <img> for an inline <svg> carrying the same
   classes, so both selectors are needed. */
.strategy-slider .owl-item .strategy-graph img,
.strategy-slider .owl-item .strategy-graph svg {
    display: block;
    width:100%;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: 0;
}

/* Bars grow out of the axis one after another; the trend line fades in.
   transform-box: fill-box makes transform-origin resolve against each bar's own
   box — without it SVG defaults to the whole view-box and every bar would pivot
   around the chart's bottom-left corner. */
.strategy-graph .performance-bar {
    transform-box: fill-box;
    transform-origin: center bottom;
}

/* Resting state, applied only once JS has armed the slider — if the script
   never runs the charts stay fully visible instead of blank. */
.strategy-slider.graphs-armed .strategy-graph .performance-bar {
    transform: scaleY(0);
}

.strategy-slider.graphs-armed .strategy-graph .performance-line,
.strategy-slider.graphs-armed .strategy-graph .performance-line-path,
.strategy-slider.graphs-armed .strategy-graph .performance-line-nums,
.strategy-slider.graphs-armed .strategy-graph .performance-bar-num {
    opacity: 0;
}

/* The animation lives on .in-view rather than being paused/resumed, so removing
   and re-adding the class replays it on every visit to the slide. */
.strategy-graph.in-view .performance-bar {
    animation: performanceBar 0.45s ease forwards;
}

/* Ends on `none`, not scaleY(1): a transform left applied to the bar keeps it on
   a rasterised compositing layer and the vector art renders blurry. */
@keyframes performanceBar {
    from { transform: scaleY(0); }
    to   { transform: none; }
}

.strategy-graph.in-view .bar1 { animation-delay: 0s; }
.strategy-graph.in-view .bar2 { animation-delay: 0.1s; }
.strategy-graph.in-view .bar3 { animation-delay: 0.2s; }
.strategy-graph.in-view .bar4 { animation-delay: 0.3s; }
.strategy-graph.in-view .bar5 { animation-delay: 0.4s; }
.strategy-graph.in-view .bar6 { animation-delay: 0.5s; }

/* Each value appears only once its own bar has finished growing, so the number
   never floats above a half-height column. Delays are the matching bar's delay
   plus the 0.45s it takes to grow. */
.strategy-graph.in-view .performance-bar-num {
    animation: performanceLine 0.3s ease forwards;
}

.strategy-graph.in-view .num1 { animation-delay: 0.45s; }
.strategy-graph.in-view .num2 { animation-delay: 0.55s; }
.strategy-graph.in-view .num3 { animation-delay: 0.65s; }
.strategy-graph.in-view .num4 { animation-delay: 0.75s; }
.strategy-graph.in-view .num5 { animation-delay: 0.85s; }
.strategy-graph.in-view .num6 { animation-delay: 0.95s; }

.strategy-graph.in-view .performance-line {
    animation: performanceLine 0.55s ease-in 0.2s forwards;
}

/* On the combo chart the line sits over the bars, so it waits for them. */
.strategy-graph.in-view .performance-line-late {
    animation-delay: 0.95s;
}

/* Pure line charts draw the line on instead of fading it. The dash length is a
   real measurement, so JS sets stroke-dasharray/dashoffset per path and only
   the reveal is done here. The .strategy-slider prefix is needed to match the
   specificity of the .graphs-armed rule above, which would otherwise keep the
   line at opacity 0 and there would be nothing to watch being drawn. */
.strategy-slider .strategy-graph.in-view .performance-line-path {
    opacity: 1;
}

/* Values land once the line has finished drawing. */
.strategy-graph.in-view .performance-line-nums {
    animation: performanceLine 0.4s ease 0.85s forwards;
}

@keyframes performanceLine {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Owl renders .owl-nav before .owl-dots, so the carousel itself becomes the
   flex row and `order` puts the dots on the left, the arrows on the right.
   Scoped to .owl-loaded because owl.carousel.css keeps .owl-carousel hidden
   until it initialises. */
.strategy-slider.owl-loaded {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.strategy-slider .owl-stage-outer {
    flex: 0 0 100%;
    width: 100%;
}

.strategy-slider .owl-nav {
    order: 2;
    display: flex;
    gap: 12px;
    margin-top: 30px;
    margin-left: auto;
}

.strategy-slider .owl-nav button.owl-prev,
.strategy-slider .owl-nav button.owl-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0;
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.strategy-slider .owl-nav button svg,
.esg-slider .owl-nav button svg {
    display: block;
    flex-shrink: 0;
}

.strategy-slider .owl-nav button.owl-prev:hover,
.strategy-slider .owl-nav button.owl-next:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-dark);
}

.strategy-slider .owl-dots {
    order: 1;
    display: flex;
    align-items: center;
    margin-top: 30px;
    line-height: 0;
}

.strategy-slider .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 0 6px 0 0;
    background-color: rgba(255, 255, 255, 0.30);
    border-radius: 50%;
    transition: background-color 0.3s ease, width 0.3s ease;
}

.strategy-slider .owl-dots .owl-dot.active span,
.strategy-slider .owl-dots .owl-dot:hover span {
    background-color: var(--color-accent);
}
/*-----------Delivering Our Strategy Css End-------------*/

/*-----------About Northern Arc Css Start-------------*/
.about-section {
    padding: 70px 0;
    background-color: #ffffff;
}

/* Copy and diagram share one tinted panel - the same pale field the report
   uses behind its banners - so the section reads as a block rather than as two
   things adrift on white. The GIF is rendered on white but carries
   mix-blend-mode: multiply, so its ground drops out against the tint. */
.about-panel {
    padding: 55px 50px;
    background-color: var(--color-banner-bg);
    /* Raised off the page: three stacked shadows rather than one, so the
       falloff reads the way a real one does - a tight contact shadow under the
       edge, then progressively softer and wider. Tinted with the report navy
       instead of black so the shade stays inside the palette. */
    box-shadow:
        0 2px 4px rgba(22, 73, 107, 0.07),
        0 12px 24px rgba(22, 73, 107, 0.10),
        0 28px 56px rgba(22, 73, 107, 0.08);
}

.about-title {
    margin-bottom: 26px;
    color: var(--color-accent);
}

.about-text p {
    max-width:375px;
    margin-bottom: 36px;
}

/* The ecosystem diagram is an animated loop - an <img> carrying a GIF, so it
   loops on its own with no playback attributes. The source is 1256x752, wide
   enough for the column at typical desktop widths. */
.about-img img {
    display: block;
    width: 100%;
    height: auto;
}

.about-video {
    display: block;
    width: 100%;
    height: auto;
    /* The clip is rendered on white; blend it into the section so no box edge
       or letterbox band shows against the background. */
    background-color: transparent;
    mix-blend-mode: multiply;
}
/*-----------About Northern Arc Css End-------------*/

/*-----------Direct to Customer Lending Css Start-------------*/
/* Scroll-driven reveal: the section pins, "Our business segments" splits apart
   and the photo emerges from between its halves, then "Direct-to-Customer
   lending" fades in over the photo and the stat panel lands.
   Timeline lives in app.js (GSAP ScrollTrigger); the hidden starting states
   below are what it animates from. */
.d2c-section {
    position: relative;
}

/* The two halves of "Our business segments" — they part horizontally. */
/* Reads as one ordinary line at rest — the two halves only part once the scene
   starts scaling. The scene grows from the page centre, so the seam between the
   halves has to sit on that centre or the image clips the end of "business".
   Centring the pair as a whole would not do it: "Our business" is the wider
   half, which pushes the seam right of centre. Giving each half equal flex
   space instead pins the seam to 50% whatever the two words measure. */
.d2c-title-wrap {
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--color-banner-bg);
}

.d2c-t1,
.d2c-t2 {
    font-size: 36px;
    line-height: 32px;
    white-space: nowrap;
    color: var(--color-dark);
    flex: 1 1 0;
}

.d2c-t1 {
    text-align: right;
}

.d2c-t2 {
    text-align: left;
}

/* Single-line heading used instead of the split pair on smaller screens. */
.d2c-t3 {
    display: none;
}

.d2c-scene {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    transform: scale(0);
    opacity: 0;
}

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

/* Centred, then nudged up so the panel sits a little above the midline. */
.d2c-section .container {
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 6;
}

/* Frosted panel holding the two business segments. */
.d2c-stats-wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 32px 40px;
    border-radius: 20px;
    background-color: rgba(35, 31, 32, 0.45);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
}

/* One block per segment, separated by a full-width rule. */
.d2c-group + .d2c-group {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}

/* Left-aligned, but inset by the same 20px the first stat cell is padded by so
   the title lines up with the number under it rather than the panel edge. */
.d2c-group-title {
    margin-bottom: 20px;
    padding-left: 20px;
    font-size: 26px;
    line-height: 34px;
    text-align: left;
    color: #ffffff;
}

/* Single row of equal columns — three for Credit Solutions, four for D2C.
   Labels run to different lengths ("D2C AUM" vs "No. of Digital Partners"), so
   each cell fills the row height and pins its label to the bottom; that keeps
   every number in the row on one baseline however the labels wrap. */
.d2c-stats {
    display: flex;
    align-items: stretch;
}

.d2c-stat {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    padding: 0 20px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.35);
}

.d2c-stats .d2c-stat:last-child {
    border-right: 0;
}

.d2c-stat-value {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    color: #ffffff;
}

.d2c-stat-label {
    display: block;
    /* Pinned to the bottom of the cell so the numbers above share a baseline. */
    margin-top: auto;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.85);
}

.d2c-btn {
    margin-top: 22px;
    text-align: center;
}

/* Small label sitting above a section heading. Reusable. */
.section-eyebrow {
    display: block;
    margin-bottom: 14px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}

/*-----------Direct to Customer Lending Css End-------------*/

/*-----------Stacked Scroll Panels Css Start-------------*/
/* Each panel pins to the top; the next one slides up over it while the one
   underneath zooms out, blurs and dims. Transforms are set by JS in custom.js. */
.stack {
    position: relative;
    margin-top: 80px;
}

.stack-panel {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: visible;
}

/* The card JS scales and blurs. Rounded on all corners so it never looks
   clipped once it zooms out. */
.sp-scale {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    overflow: hidden;
    will-change: transform, filter, opacity;
}

.sp-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-dark);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.sp--efficiency .sp-bg { background-image: url(../images/enhancing-efficiency-across-the-value-chain-img.webp); }
.sp--risk       .sp-bg { background-image: url(../images/risk-management-img.webp); }
.sp--capital    .sp-bg { background-image: url(../images/enabling-scalable-capital-flow-img.webp); }
.sp--culture    .sp-bg { background-image: url(../images/fostering-a-thriving-work-culture-img.webp); }
.sp--future     .sp-bg { background-image: url(../images/our-future-value-builders-and-growth-enablers-img.webp); }

/* Dark wash only at the bottom, behind the copy — the top of each photo stays
   fully visible. */
.sp-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.90) 0%,
        rgba(0, 0, 0, 0.70) 30%,
        rgba(0, 0, 0, 0.35) 55%,
        rgba(0, 0, 0, 0) 80%);
}

.sp-content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    padding: clamp(40px, 7vh, 80px) 0;
    color: #ffffff;
}

.sp-content > .container {
    width: 100%;
}

.sp-title {
    max-width: 800px;
    margin-bottom: 16px;
    color: #ffffff;
}

.sp-intro {
    max-width: 760px;
    margin-bottom: 28px;
    color: rgba(255, 255, 255, 0.90);
}
/*-----------Stacked Scroll Panels Css End-------------*/

/*-----------ESG Focus Css Start-------------*/
/* The whole section is meant to read in a single screen. Rather than budgeting
   each piece against the viewport separately and hoping the total lands under
   100vh, the section IS one viewport tall and distributes that height: the head
   (title, copy, CTA) takes what it needs, and the slider absorbs the remainder.
   That way adding to the head can never push the cards past the fold. */
.esg-section {
    /* Everything in the section that isn't the card photo: the top+bottom
       padding, the head block (title, copy, CTA + its margin), the label
       overhang above the photo, and the dots/arrows row with its margin.
       .esg-card-img subtracts this (and the fixed header) from the viewport to
       cap its own height, which is what keeps the whole section inside one
       screen — so the header is NOT counted here. The card count no longer
       depends on it; custom.js holds that at three.

       It scales with the viewport rather than sitting at a flat ~410px,
       because most of what it covers already scales: the section padding and
       the head's margins are vh-clamped, and the head's own text reflows to
       fewer lines as the window narrows. A flat figure measured on a tall
       desktop over-reserved on a 620px-tall window — it claimed two thirds of
       the screen, starving the photo so much that the card shrank well inside
       its slot and left visible gaps between cards. The clamp keeps it within
       the range actually measured from the rendered layout. */
    --esg-chrome: clamp(280px, 43vh, 420px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* #header is fixed, so a bare 100vh would put the title under it and push
       the same 78px past the fold. Reserving the header height keeps the whole
       section — heading through dots — inside one screen with no extra scroll,
       and scroll-margin-top stops the in-page #esg link landing under it too. */
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
    scroll-margin-top: var(--header-height);
    padding: clamp(24px, 4vh, 80px) 0;
    background-color: #ffffff;
    overflow: hidden;
}

.esg-section > .container {
    display: flex;
    flex-direction: column;
    /* Fills the section box so the slider's `flex: 1` has a height to divide. */
    flex: 1;
    min-height: 0;
}

/* Wrapper breaks out of the container and runs to the right viewport edge.
   1320px = Bootstrap's xxl container, 12px = its inner padding. */
.esg-slider-wrap {
    overflow: hidden;
    margin-right: calc((1320px - 100vw) / 2 - 12px);
    /* Takes whatever vertical room the head leaves. min-height:0 lets it shrink
       below its content's natural size, which flex items otherwise refuse to do. */
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Owl's stagePadding peeks on BOTH sides. Pulling the slider left by exactly
   the stagePadding pushes the left peek outside the wrapper, which clips it —
   so the first card sits flush and only the right side peeks.
   The width has to grow by the same amount: owl.carousel.css sets
   .owl-carousel { width: 100% }, so a bare negative margin would shift the
   whole box left and leave a gap at the right edge. */
.esg-slider {
    /* Must match stagePadding in custom.js — if the two drift apart the left
       peek stops being fully clipped. */
    --esg-stage-pad: 120px;
    width: calc(100% + var(--esg-stage-pad));
    margin-left: calc(-1 * var(--esg-stage-pad));
}

.esg-head {
    max-width: 980px;
    /* Tightened from 3vh/46px: the section now budgets one viewport minus the
       fixed header, and this gap below the CTA is the slack that pays for it —
       taking it from here rather than from the card photos. */
    margin: 0 auto clamp(16px, 2vh, 30px);
    text-align: center;
    /* Never squeezed by the slider — it keeps its natural height and the
       slider takes what's left. */
    flex: none;
}

/* Same reason: the CTA sat on the generic 32px top margin, which is more than
   this one-screen section can spare. */
.esg-head .btn-readmore {
    margin-top: clamp(10px, 1.6vh, 20px);
    /* Was a flat 30px. On a short window that gap, plus the title's top margin
       below, was the last of the slack keeping the dots and arrows above the
       fold — both now scale with the viewport like the rest of the head. */
    margin-bottom: clamp(12px, 2.6vh, 30px);
}

.esg-title {
    margin-top: clamp(6px, 1.6vh, 20px);
    margin-bottom: clamp(12px, 1.6vh, 20px);
    color: var(--color-accent);
}

.esg-head p {
    margin-bottom: clamp(18px, 2.4vh, 28px);
}
.esg-title span 
{
    display: block;
}
/* Room above the photo for the half of the label that hangs over its top edge.
   .owl-stage-outer is overflow:hidden (owl's own CSS), so anything not reserved
   here gets clipped — this padding is what keeps the overhanging half visible.
   It has to cover the WORST case, not the current one: the label is centred and
   half-overhanging, so the overhang is half the label's height, and a label that
   wraps to two lines is roughly twice as tall as a one-line one. Sized for two
   lines at the fixed 16px/1.4 type plus 12px padding — ~68px tall, ~34px over
   the edge — with a little slack. Labels are authored in index.php and can get
   longer; if one ever wraps to three lines, raise this to match. */
.esg-card {
    padding-top: 40px;
}

/* The photo is the section's biggest height cost, so it's what gives way. It's
   measured off the stage's leftover height (100% of the flexed stage) rather
   than a raw vh guess, so the head growing — e.g. the CTA — shrinks the photo
   instead of pushing the dots and arrows below the fold. The clamp only caps
   it on very tall screens and floors it on very short ones; cover crops rather
   than letterboxes so every card keeps the same shape. */
/* The card keeps a fixed shape instead of stretching to fill leftover height.
   Letting the height be whatever vertical space remained meant that on a short
   window the box flattened into a letterbox strip — 2.95:1 against a 1.14:1
   source, throwing away 61% of the photo — while on a tall window it looked
   fine. Pinning the ratio means the height always follows the width, so every
   screen crops the same modest amount and the framing is predictable. */
/* Fixed 4:3 shape, so the crop is identical at every screen size — the photo
   is never squeezed into a letterbox and never re-framed.

   Normally the width is the slot and the height follows from the ratio. On a
   short window that height would push the dots and arrows past the fold, so
   max-height caps it at whatever the section has left, and `width: auto` lets
   the width follow the height back down at the same 4:3 — a smaller card of
   exactly the same shape, rather than a cropped or squashed one. The card
   count stays at three either way (see custom.js).

   --esg-card-max-h is the viewport, less the fixed header, less everything in
   the section that isn't the photo (--esg-chrome: padding, head block, label
   overhang, dots/arrows row). */
.esg-card-img {
    aspect-ratio: 4 / 3;
    width: 100%;
    max-width: 100%;
    /* svh so mobile browser chrome collapsing doesn't change the cap mid-scroll */
    --esg-card-max-h: calc(100svh - var(--header-height) - var(--esg-chrome));
    max-height: max(180px, var(--esg-card-max-h));
    /* Lets the width shrink with the capped height instead of staying full-slot
       and cropping. Paired with the centring on .esg-card below. */
    width: auto;
    align-self: center;
    /* The label lives INSIDE this box (see index.php) and anchors to it, not to
       .esg-card. The card is always the full slot width, so while the label was
       a sibling measured against the card, a photo narrower than its slot left
       the label starting beside the photo and running off its edge — that was
       the stray "Agriculture Supply Chain Finance" text. Anchored here it sits
       on the photo at every screen size.
       Visible, not hidden: the label straddles the top edge deliberately, and
       clipping here would cut it in half. The image clips its own crop below. */
    position: relative;
    overflow: visible;
}

.esg-card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* These are portraits and the subjects' heads sit near the top, so a
       centred crop cut them. Biasing the focal point upward keeps heads intact
       and takes the crop off the bottom, which is only foreground. Not `top`,
       which would clip hands and leave the framing bottom-heavy. */
    object-position: center 22%;
}

.esg-card-label {
    position: absolute;
    /* Straddles the photo's top edge: anchored to the edge itself and pulled up
       by half its own height, so exactly half the label sits on the photo and
       half above it, whatever the label wraps to. */
    top: 0;
    /* Centred on the photo, not inset from its left. Percentages resolve
       against the PHOTO (the label is inside it and the photo is the positioned
       ancestor), so left + translateX genuinely centre it on the image at every
       screen size; max-width keeps the longest labels off the photo's edges. */
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    /* The photo narrows steeply as the viewport does (its height is capped, so
       its width follows). At ~1280px — a 1920 screen at 150% zoom — 84% of it
       left roughly 170px of text column against a fixed 16px font, so
       "Consumer Finance" fell to three lines and "Microfinance", which has no
       space to break at, was hyphenated mid-word to "Microfinanc / e".
       fit-content is deliberately NOT used: on an absolutely positioned box it
       shrink-to-fits against the containing block and settles before max-width
       can widen it, which pinned the label at that 170px however high the cap
       was raised. max-content + a max-width cap gives the intended behaviour —
       the label takes its natural single-line width, and only wraps once that
       exceeds the cap. */
    width: max-content;
    /* The floor keeps a usable measure at narrow widths; the percentage still
       holds the label off the photo's edges on wide screens. min() so the
       label can never exceed the photo itself. */
    max-width: min(100%, max(84%, 240px));
    /* The text must never be cut or sit outside the blue box, at any screen
       size. Three things together guarantee that:
       - fit-content + auto height: the box is sized BY its text, so it grows to
         whatever the text wraps to instead of the text being fitted to a box.
       - overflow-wrap/hyphens: a label longer than max-width wraps to more
         lines (and a single unbroken word breaks mid-word) rather than running
         past the edge. Labels are set in index.php and can change.
       - overflow: visible + no white-space:nowrap or text-overflow anywhere on
         this element, so nothing clips what wrapped.
       box-sizing is border-box globally, so max-width covers the padding too —
       the padding is always inside the blue, never pushing text out of it. */
    height: auto;
    overflow: visible;
    /* break-word only as a last resort, and no auto-hyphenation: together they
       were splitting words that would have fit on their own line ("Microfinanc
       / e"). anywhere/auto are deliberately NOT used here — overflow-wrap only
       breaks a word that cannot fit the line by itself, which is the real
       guarantee wanted: long single words still can't run past the blue. */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
    /* Fixed, not vw-scaled. Tying padding and type to viewport width made the
       label a visibly different size on every desktop width — the section is
       meant to read the same on all of them, so these stay put and the small
       screen media queries below step them down for phones instead. */
    padding: 12px 24px;
    background-color: var(--color-accent);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
    color: #ffffff;
}

/* Same trick as the strategy slider: the carousel becomes the flex row so
   `order` can put the dots left and the arrows right. It also has to fill the
   wrapper's height, so the stage (flex:1) can claim the leftover space and the
   dots/arrows row keeps its natural height at the bottom. */
.esg-slider.owl-loaded {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: stretch;
    height: 100%;
}

.esg-slider .owl-stage-outer {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
}

/* Cards sit at the top of the row and take their height from their own
   aspect-ratio; the stage no longer dictates it. */
.esg-slider .owl-stage {
    display: flex;
    align-items: flex-start;
}

.esg-slider .owl-item {
    display: flex;
}

.esg-slider .owl-item > .item,
.esg-slider .owl-item .esg-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* The photo owns its shape via aspect-ratio, so on short screens it can be
   narrower than the carousel slot. The card shrinks to the photo's width and
   centres within the slot — the label is positioned against the card, so if the
   card stayed full-width its `left: 18%` would land in empty space beside the
   photo rather than on it. */
/* On a short window the photo caps its height and so ends up narrower than the
   slot; centring keeps the leftover width split evenly on both sides instead of
   pooling on the right. On a normal window the photo fills the slot and this is
   a no-op. */
.esg-slider .owl-item .esg-card {
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

/* Dots stay aligned to the container's left edge, not to the bled-out stage. */
.esg-slider .owl-dots {
    order: 1;
    display: flex;
    justify-content: flex-start;
    margin-top: clamp(16px, 2.5vh, 34px);
    padding-left: var(--esg-stage-pad);
    line-height: 0;
}

/* Arrows pulled back in from the bleed so they line up with the container's
   right edge instead of the viewport edge. */
.esg-slider .owl-nav {
    order: 2;
    display: flex;
    gap: 12px;
    margin-top: clamp(16px, 2.5vh, 34px);
    margin-left: auto;
    margin-right: calc((100vw - 1320px) / 2 + 12px);
}

.esg-slider .owl-nav button.owl-prev,
.esg-slider .owl-nav button.owl-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0;
    background-color: transparent;
    border: 1px solid var(--color-accent);
    border-radius: 0;
    color: var(--color-accent);
    font-size: 20px;
    line-height: 1;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.esg-slider .owl-nav button.owl-prev:hover,
.esg-slider .owl-nav button.owl-next:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
}

.esg-slider .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background-color: rgba(35, 31, 32, 0.20);
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.esg-slider .owl-dots .owl-dot.active span,
.esg-slider .owl-dots .owl-dot:hover span {
    background-color: var(--color-accent);
}

/* Short desktop windows (a 1366x620 laptop, or any window with the dock and a
   browser toolbar eating the height). Below ~700px the head block — title,
   copy, CTA — stops being the small part of the budget: at 620px it measured
   245px against a 620px screen, which is what pushed the dots and arrows past
   the fold, NOT the photo (the photo was still under its cap). Shrinking the
   head's type and its remaining fixed gaps is what buys the section back into
   one screen; the photo then takes the room that frees up.
   Width-guarded so it only applies to the one-screen desktop layout — below
   992px the section is allowed to scroll (see responsive.css). */
@media (min-width: 992px) and (max-height: 700px) {
    .esg-title {
        font-size: 28px;
        line-height: 36px;
    }
    .esg-head p {
        font-size: 15px;
        line-height: 22px;
    }
    .esg-head .btn-readmore {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    /* The label overhang: still the full two-line reserve. The label's type is
       unchanged at this breakpoint, so a wrapped label overhangs by the same
       ~34px and a smaller reserve would let owl's overflow:hidden clip it —
       the very thing this padding exists to prevent. Only the label's own
       placement needs no override: it anchors to the photo's top edge
       (top: 0) at every size. */
    .esg-card {
        padding-top: 40px;
    }
}

/* Big screens: one constant look. Everything above is written to survive a
   short window by trading height away — the chrome reserve and the photo's
   height cap are both keyed to vh, so a 900px-tall desktop and a 1080px-tall
   one cropped the card to different widths and the section read as a different
   size on each. Once there's height to spare none of that trading is needed,
   so the cap is lifted and the photo becomes purely width-driven: same 4:3
   card filling the same slot, same label on it, on every large screen. The
   short-window rules above are untouched and still apply below 700px. */
@media (min-width: 992px) and (min-height: 701px) {
    .esg-card-img {
        max-height: none;
        width: 100%;
    }
}
/*-----------ESG Focus Css End-------------*/

/*-----------Inner Banner Css Start-------------*/
/* Shared banner for all inner pages. The photo goes on the section as a
   background, a per-page class only swaps the image. Copy is centred against
   the full height; the breadcrumb is absolutely placed over the top. */
.inner-banner {
    margin-bottom: 40px;
    position: relative;
    display: flex;
    align-items: center;
    height: 100vh;
    /* background-color: var(--color-banner-bg); */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    /* margin-bottom: 40px; */
    overflow: hidden;
}

/* Per-page background image */
.d2c-banner {
    background-image: url(../images/direct-to-customer-lending/Our-business-segments/direct-to-customer-segment-landscape-img2.webp);
    background-position: center;
}
.rm-banner {
    background-image: url(../images/risk-management/risk-management-banner-img.webp);
    background-position: center;
}

.powering-banner {
    background-image: url(../images/powering-indias-credit-ecosystem/powering-banner.webp);
    background-position: center;
}

/* The ESG collage is a 1920x1080 frame with its photographs massed on the right
   and the left half left clear for the heading, so it runs full bleed like the
   other photo banners. It keeps the pale wash and dark banner text the light
   inner pages use rather than the dark scrim and white text the four
   photographic banners get: the artwork is white behind the copy.

   The 20px bottom margin (against the shared 40px) holds the heading close to
   the intro paragraph under it. */
.esg-banner {
    background-image: url(../images/esg-focus-banner-img.webp);
    background-position: center;
    margin-bottom: 20px;
}

/* Held to the clear left band of the artwork - the leftmost photograph starts
   around 44% across the frame - so the heading wraps inside the white rather
   than running across the collage. */
.esg-banner h1 {
    max-width: 460px;
}

.technology-banner {
    background-image: url(../images/enabling/enabling-scalable-capital-flow-img.webp);
    background-position: center;
}

.technology-banner-scanner {
    position: absolute;
    top: 130px;
    right: 6%;
    z-index: 2;
    display: block;
    width: 120px;
    height: auto;
}

/* The 760px cap broke this title across two lines; it is lifted so the heading
   sits on one line, and the wrap is suppressed down to the tablet breakpoint. */
.technology-page .inner-banner h1 {
    max-width: none;
    font-size: 30px;
    line-height: 38px;
    white-space: nowrap;
}

/* Below ~992px the title is wider than the viewport, so it wraps again rather
   than overflowing the banner. */
@media (max-width: 991px) {
    .technology-page .inner-banner h1 {
        white-space: normal;
    }
}

/* This title had a <span> in the markup, which the global rule renders as a
   block and so split it across two lines. The span is gone; nowrap keeps the
   heading on one line at the banner's base 36px. */
.efficiency-page .inner-banner h1 {
    white-space: nowrap;
}

@media (max-width: 991px) {
    .efficiency-page .inner-banner h1 {
        white-space: normal;
    }
}

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

/* The h1 sits directly above the intro paragraph. The banner drops the shared
   30px bottom padding and halves the shared 40px margin, so the heading and
   the copy under it read as one block. */
.technology-page-banner {
    padding-bottom: 0;
    margin-bottom: 20px;
}

.technology-platforms {
    padding: 0px 0 40px;
    background-color: #ffffff;
}

.technology-platforms-title {
    margin-bottom: 34px;
    font-size: 30px;
    line-height: 38px;
    color: var(--color-dark);
}

.technology-platform-logo {
    display: block;
    width: 210px;
    height: auto;
    max-height: 90px;
    margin-bottom: 26px;
    object-fit: contain;
    object-position: left center;
}

/* The nPOS artwork is set on a tighter crop than the other two lockups, so at
   the shared width it reads noticeably larger. Scaled down to sit level with
   Nimbus and NuScore. */
.technology-platform-logo--npos {
    width: 140px;
    max-height: 60px;
}

.technology-platform-copy p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

.technology-platform-copy p + p {
    margin-top: 24px;
}

/* 40px, the step the rest of the page runs on: intro to section title, and
   the last platform block to the Altifi banner. */
.technology-platform-copy + .technology-platform-copy {
    margin-top: 40px;
}

.altifi-platform {
    padding: 0px;
    background-color: #ffffff;
}

/* The pager carries 50px of its own padding on every page; with the banner
   clearing 20px above it, the run-out lands on the same step the rest of the
   page runs on instead of the 90px the two used to add up to. */
.altifi-platform + .page-pager {
    padding-top: 30px;
}

/* The banner keeps the artwork's own 1920x1085 proportions, so the copy laid
   over it holds the same position relative to the "0" and Nivesh at every
   width — the layout scales rather than reflowing. Everything inside is sized
   in cqw (percent of the banner's own width) for the same reason.

   min-height rather than aspect-ratio: the copy column now carries the CTA and
   the disclaimer as well, and below ~1400px the readability floors on those two
   stop them shrinking with the frame. The ratio is held as a minimum so the
   banner grows those last few pixels instead of clipping the legal copy. The
   artwork covers whatever height results.

   Flex, so the copy column stretches to whatever height that min-height
   resolves to. A plain `height: 100%` on the child cannot resolve against a
   min-height parent — it falls back to content height, which on wide screens
   left the disclaimer stranded well above the foot of the frame. */
.altifi-banner {
    position: relative;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    min-height: 56.51cqw;
    margin-bottom: 20px;
    overflow: hidden;
}

.altifi-banner-art {
    position: absolute;
    inset: 0;
    display: block;
}

.altifi-banner-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Copy sits over the left half of the artwork, clear of the "0". The artwork
   itself bleeds the full width of the section, but this layer is a Bootstrap
   .container, so the logo, headline, points, CTA and disclaimer line up with
   the body copy on the rest of the page rather than with the image's edge. The
   vertical padding stays in cqw so the block keeps its position as the banner
   scales. */
.altifi-banner-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding-top: 2.4cqw;
    padding-bottom: 1.6cqw;
}

.altifi-banner-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2cqw;
}

.altifi-logo {
    display: block;
    width: 10cqw;
    max-width: 250px;
    height: auto;
    object-fit: contain;
    object-position: left top;
}

/* Top right, matching the artwork's own corner. */
.altifi-qr {
    display: block;
    width: 7.2cqw;
    max-width: 138px;
    height: auto;
}

.altifi-campaign-title {
    max-width: 46cqw;
    margin: 10px 0 0;
    font-size: 30px;
    line-height: 1.14;
    color: var(--color-dark);
}

.altifi-campaign-title span {
    color: var(--color-accent);
    display: block;
}

/* Short accent rule under the headline, as in the campaign artwork. */
.altifi-campaign-title:after {
    content: "";
    display: block;
    width: 5.4cqw;
    height: 0.36cqw;
    margin-top: 1.2cqw;
    background-color: var(--color-accent);
}

/* Single column down the left, each row divided — the artwork's own list. The
   seven rows, the CTA and the disclaimer all have to finish inside the banner's
   fixed ratio, so the row rhythm is what gets tuned rather than the banner
   growing to fit them.

   The list is the flex item that absorbs slack. Past ~1450px the readability
   floors on the CTA and disclaimer stop those two scaling with the frame, so
   the column comes up short of the banner height; letting the rows share the
   difference spreads it evenly instead of collecting it in one gap above the
   disclaimer. */
.altifi-benefits {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    width: 30cqw;
    max-width: 520px;
    margin: 0.8cqw 0 0;
    padding: 0;
    list-style: none;
}

.altifi-benefit {
    display: flex;
    align-items: center;
    gap: 1.5cqw;
    padding: 0.62cqw 0;
    border-bottom: 1px solid rgba(35, 31, 32, 0.16);
}

.altifi-benefit:last-child {
    border-bottom: 0;
}

.altifi-benefit img {
    display: block;
    width: 2.5cqw;
    height: 2.5cqw;
    flex: 0 0 2.5cqw;
    object-fit: contain;
}

.altifi-benefit p {
    font-size: 0.9cqw;
    line-height: 1.3;
    font-weight: 600;
    color: var(--color-dark);
}

/* CTA and disclaimer sit on the artwork, as in the campaign layout: the button
   closes the left copy column and the disclaimer runs along the foot of the
   frame. Both are sized in cqw so they hold their place as the banner scales.
   margin-top: auto pushes the pair to the bottom of the flex column, so the
   gap between the benefit list and the CTA absorbs any slack. */
.altifi-clarity {
    display: inline-block;
    align-self: flex-start;
    margin: 10px 0 0;
    padding: 10px;
    border-radius: 0.32cqw;
    background-color: var(--color-accent);
    font-family: var(--font-body);
    font-size: max(13px, 0.95cqw);
    line-height: 1.4;
    font-weight: 700;
    color: var(--color-dark);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.altifi-clarity:hover {
    background-color: var(--color-dark);
    color: #ffffff;
}

/* Full width of the banner's container, under the artwork's left column and
   the "0" alike — the campaign sets it as a footnote band across the frame.
   No margin-top: auto here — the benefit list above absorbs the slack now, and
   an auto margin would take it back and reopen the gap over the disclaimer. */
.altifi-disclaimer {
    padding-top: 1.1cqw;
}

/* Floored at 9px: below roughly 1450px the pure cqw size drops under 7px,
   which is unreadable. The floor costs a little fidelity to the artwork's
   proportions at mid widths in exchange for legible legal copy. */
.altifi-disclaimer,
.altifi-disclaimer a {
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-dark);
}

.altifi-disclaimer a:hover {
    color: var(--color-accent);
}

.future-banner {
    background-image: url(../images/our-future/our-future-value-builders-and-growth-enablers-img.webp);
    background-position: center;
}

.future-page .inner-banner h1 {
    max-width: 460px;
    font-size: 30px;
    line-height: 38px;
}

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

.future-enablers {
    padding: 48px 0 60px;
    background-color: #e1f5fa;
}

.future-enablers-title {
    margin-bottom: 34px;
    font-size: 30px;
    line-height: 38px;
    color: var(--color-dark);
}

.future-enabler {
    width: 100%;
}

.future-enabler + .future-enabler {
    margin-top: 34px;
}

.future-enabler h3 {
    margin-bottom: 10px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--color-accent);
}

.future-enabler p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

/* The platforms visual floats right and the enabler copy wraps around it. It
   lives inside the Altifi block but that block's paragraph alone is shorter
   than the image, so the float is deliberately left to run past it and the
   following enablers wrap too — hence no clear on .future-enabler. */
.future-enablers-visual {
       float: right;
    width: 100%;
    max-width: 629px;
    margin: 0 0 20px 20px;
}

.future-enablers-visual img {
    display: block;
    width: 100%;
    height: auto;
}

/* The section closes the float so the pager below starts on a clean line. */
.future-enablers .container:after {
    content: "";
    display: block;
    clear: both;
}

/* Wrapping a narrow column round a floated image leaves ragged, hard-to-read
   line lengths, so below the tablet breakpoint the image goes back to a
   full-width block in the normal flow. */
@media (max-width: 767px) {
    .future-enablers-visual {
        float: none;
        width: 100%;
        max-width: none;
        margin: 0 0 24px;
    }
}

.esg-focus-page .inner-banner h1 {
    font-size: 30px;
    line-height: 38px;
}

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

.esg-overview {
    padding-bottom: 40px;
    background-color: #ffffff;
}

.esg-social-impact {
    padding: 0px 0 40px;
    background-color: #ffffff;
}

.esg-content-title {
    margin-bottom: 20px;
    font-size: 30px;
    line-height: 38px;
    color: var(--color-dark);
}

.esg-copy-block {
    width: 100%;
}

.esg-copy-block + .esg-copy-block {
    margin-top: 28px;
}

.esg-copy-block p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

.esg-copy-block p + p {
    margin-top: 18px;
}

.esg-sector-impact {
    padding: 30px 0 48px;
    background-color: #ffffff;
}

/* The rows carry Bootstrap's g-5, which already puts 48px of gutter above every
   column. The extra 40px on top of that opened an 88px hole between one sector
   block and the next, so the row margin is dropped and the gutter alone does
   the separating. */
.esg-sector-row + .esg-sector-row {
    margin-top: 0;
}

.esg-sector-visual {
    position: relative;
    padding-top: 28px;
}

.esg-sector-visual h3 {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    width: max-content;
    max-width: calc(100% - 40px);
    min-width: 240px;
    margin: 0;
    padding: 18px 28px;
    transform: translateX(-50%);
    background-color: var(--color-accent);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    text-align: center;
    color: #ffffff;
}

.esg-sector-visual img {
    display: block;
    width: 100%;
    height: auto;
}

.esg-sector-copy p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

.esg-agriculture {
    padding: 0 0 70px;
    background-color: #ffffff;
}

.esg-climate-solutions,
.esg-sdg-section,
.esg-approach {
    padding: 0 0 40px;
    background-color: #ffffff;
}

.esg-sdg-section {
    padding-top: 0;
}

.esg-section-heading {
    margin-bottom: 24px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--color-accent);
}

.esg-climate-copy p,
.esg-sdg-intro,
.esg-approach-copy {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

/* Consecutive paragraphs need a gap between them; the last keeps the
   section's own bottom padding. */
.esg-approach-copy + .esg-approach-copy {
    margin-top: 20px;
}

.esg-climate-copy h3 {
    margin: 28px 0 6px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--color-dark);
}

.esg-sdg-intro {
    margin: -14px 0 14px;
}

.esg-sdg-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    table-layout: fixed;
}

.esg-sdg-table th,
.esg-sdg-table td {
    padding: 14px 16px;
    border-top: 1px solid rgba(35, 31, 32, 0.35);
    vertical-align: top;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}

.esg-sdg-table thead th {
    border-top-width: 4px;
    border-bottom: 4px solid rgba(35, 31, 32, 0.45);
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    color: var(--color-accent);
}

.esg-sdg-table th:first-child,
.esg-sdg-table td:first-child {
    width: 130px;
}

.esg-sdg-table th:nth-child(2),
.esg-sdg-table td:nth-child(2) {
    width: 28%;
}

.esg-sdg-table td:first-child img {
    display: block;
    width: 105px;
    height: 105px;
    object-fit: cover;
}


.esg-rating-section {
    padding-bottom: 40px;
    background-color: #ffffff;
}

.esg-rating-card {
    position: relative;
    display: grid;
    grid-template-columns: 1.5fr 0.55fr 1fr;
    align-items: center;
    min-height: 116px;
    margin-left: 65px;
    padding: 20px 34px 20px 110px;
    border: 1px solid var(--color-dark);
    border-radius: 15px;
}

.esg-rating-agency {
    position: absolute;
    top: 50%;
    left: -65px;
    min-width: 132px;
    padding: 22px 20px;
    transform: translateY(-50%);
    border-radius: 18px;
    background-color: var(--color-accent);
    font-family: var(--font-body);
    font-size: 30px;
    line-height: 38px;
    font-weight: 700;
    text-align: center;
    color: #ffffff;
}

.esg-rating-label,
.esg-rating-status {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--color-dark);
}

.esg-rating-label img,
.esg-rating-status img {
    display: block;
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.esg-rating-score {
    padding: 0 30px;
    border-right: 1px solid var(--color-accent);
    border-left: 1px solid var(--color-accent);
    font-family: var(--font-body);
    font-size: 48px;
    line-height: 58px;
    font-weight: 700;
    text-align: center;
    color: var(--color-accent);
}

.esg-rating-status {
    padding-left: 34px;
}

.esg-rating-categories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 38px;
    margin-top: 18px;
}

.esg-rating-category,
/* Left-aligned to match the report: the heading sits on the same left edge as
   the score line and body copy below it, so each column reads as one block. */
.esg-impact-heading {
    padding: 18px 20px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    text-align: left;
    color: #ffffff;
}

/* Copy is inset to the heading's padding so both share one left edge. */
.esg-impact-copy {
    padding: 0 20px;
}

.esg-rating-category--environment,
.esg-impact-heading--environment {
    background-color: #279e49;
}

.esg-rating-category--social,
.esg-impact-heading--social {
    background-color: #f89c24;
}

.esg-rating-category--governance,
.esg-impact-heading--governance {
    background-color: var(--color-accent);
}

.esg-impact-columns,
.esg-impact-acc {
    margin-top: 18px;
}

/* Each pillar is a full-width row stacked under the last, rather than three
   side-by-side columns — so the copy runs the container width and the sections
   read in sequence: Environmental, then Social, then Governance. */
.esg-impact-column {
    height: 100%;
}

.esg-impact-columns > [class*="col-"] + [class*="col-"] {
    margin-top: 30px;
}

/* The colour bar no longer needs to stretch across the whole container — it
   sits at the head of its section, sized to the copy beneath it. */
.esg-impact-columns .esg-impact-heading {
    max-width: 420px;
}

/* The pillars reuse the .cs-acc accordion, but keep their own pillar colour on
   the header bar — so the accent-blue background and the bottom margin that the
   static heading carried both have to give way here. */
.esg-impact-acc .cs-acc-head.esg-impact-heading {
    margin-bottom: 0;
    padding: 8px 20px;
}

/* .cs-acc-head's accent-blue background is declared later in this file than the
   pillar colours, so at equal specificity it would win and flatten all three
   bars to blue. These re-assert each pillar's colour from here. */
.esg-impact-acc .cs-acc-head.esg-impact-heading--environment {
    background-color: #279e49;
}

.esg-impact-acc .cs-acc-head.esg-impact-heading--social {
    background-color: #f89c24;
}

.esg-impact-acc .cs-acc-head.esg-impact-heading--governance {
    background-color: var(--color-accent);
}

.esg-impact-acc .cs-acc-head.esg-impact-heading:hover {
    filter: brightness(1.08);
}

/* .cs-acc-title carries the white 20px type; the pillar name sits in it, so the
   heading's own font sizing is not inherited by the label. */
.esg-impact-acc .cs-acc-title {
    font-size: 18px;
    line-height: 26px;
}

/* Padding-left matches the header bar's so the copy and the pillar name share
   one left edge, as they did when the heading sat above static copy. */
.esg-impact-acc .cs-acc-body.esg-impact-copy {
    padding: 20px 20px 0;
}

.esg-impact-detail {
    padding: 0 0 55px;
    background-color: #ffffff;
}

.esg-impact-heading {
    width: 100%;
    margin-bottom: 20px;
}

.esg-impact-copy h3 {
    margin-bottom: 8px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--color-dark);
}

.esg-impact-copy p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

.esg-impact-copy p + p {
    margin-top: 20px;
}

.esg-responsible-finance {
    padding: 0 0 0px;
    background-color: #ffffff;
}

.esg-responsible-image {
    width: 100%;
}

.esg-responsible-image img {
    display: block;
    width: 100%;
    height: auto;
}

.esg-responsible-content {
    padding: 34px 38px 42px;
    background-color: #000000;
}

.esg-responsible-content h2 {
    margin-bottom: 26px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--color-accent);
}

.esg-responsible-copy {
    width: 100%;
}

.esg-responsible-copy p {
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    color: #ffffff;
}

.esg-responsible-copy p + p {
    margin-top: 24px;
}

/*-----------Efficient and Diversified Board Css Start-------------*/
.board-page .inner-banner h1 {
    font-size: 30px;
    line-height: 38px;
}

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

.board-members {
    padding: 20px 0 0px;
    background-color: #ffffff;
}

.board-member {
    height: 100%;
    padding: 22px;
    background-color: #ffffff;
    border: 1px solid rgba(35, 31, 32, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.board-member:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 16px 38px rgba(35, 31, 32, 0.16);
}

/* Same treatment as .leadership-member: the photo fills the column rather than
   being capped, so there is no gap down the right of each card. */
.board-member img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 24px;
    object-fit: cover;
}

.board-member h2 {
    margin-bottom: 6px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--color-accent);
}

.board-member p {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}

.board-member p + p {
    margin-top: 10px;
}
/*-----------Efficient and Diversified Board Css End-------------*/

/*-----------Key Management and Leadership Team Css Start-------------*/
.leadership-page .inner-banner h1 {
    max-width: 760px;
    font-size: 30px;
    line-height: 38px;
}

.leadership-team {
    padding: 20px 0 0px;
    background-color: #ffffff;
}

.leadership-member {
    height: 100%;
    padding: 22px;
    background-color: #ffffff;
    border: 1px solid rgba(35, 31, 32, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.leadership-member:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 16px 38px rgba(35, 31, 32, 0.16);
}

.leadership-member img {
    display: block;
    width: 100%;
    margin-bottom: 14px;
    object-fit: cover;
}

/* Matched to the 220px portrait above, so names and titles wrap within the
   image's width instead of running past its right edge. */
.leadership-member h2,
.leadership-member p {
    /* max-width: 220px; */
}

.leadership-member h2 {
    margin-bottom: 2px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--color-accent);
}

.leadership-member p {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}
/*-----------Key Management and Leadership Team Css End-------------*/

/*-----------Awards and Recognitions Css Start-------------*/
/* The h1 sits directly above the intro paragraph. The banner drops the shared
   30px bottom padding and halves the shared 40px margin, so the heading and
   the copy under it read as one block. */
.awards-banner {
    padding-bottom: 0;
    margin-bottom: 20px;
}

.awards-page .inner-banner h1 {
    font-size: 30px;
    line-height: 38px;
}

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

.key-recognitions {
    padding: 20px 0 0px;
    background-color: #ffffff;
}

.key-recognitions-title {
    margin-bottom: 30px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--color-accent);
}

.recognition-item {
    position: relative;
    height: 100%;
    padding-top: 18px;
}

.recognition-item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 74px;
    height: 5px;
    background-color: var(--color-dark);
}

.recognition-item p {
    max-width: 320px;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}
/*-----------Awards and Recognitions Css End-------------*/

/*-----------Corporate Information Css Start-------------*/
.corporate-info-page .inner-banner h1 {
    font-size: 30px;
    line-height: 38px;
}

.corporate-info {
    padding: 20px 0 0px;
    background-color: #ffffff;
}

.corporate-info-block + .corporate-info-block {
    margin-top: 28px;
}

.corporate-info-block h2 {
    margin-bottom: 6px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--color-accent);
}

.corporate-info-block h3 {
    margin-bottom: 5px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--color-dark);
}

.corporate-info-block p,
.corporate-info-list li,
.corporate-listed-list li {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}

.corporate-info-block a {
    overflow-wrap: anywhere;
    font-size: inherit;
    color: inherit;
}

.corporate-info-block a:hover {
    color: var(--color-accent);
}

.corporate-person + .corporate-person {
    margin-top: 22px;
}

.corporate-info-list,
.corporate-listed-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.corporate-info-list li + li {
    margin-top: 12px;
}

.corporate-listed-list {
    margin-bottom: 22px;
}

.corporate-listed-list li {
    position: relative;
    padding-left: 18px;
}

.corporate-listed-list li:before {
    content: "\2022";
    position: absolute;
    left: 0;
}

.corporate-listed-list li + li {
    margin-top: 10px;
}
/*-----------Corporate Information Css End-------------*/

/* Variant for pages with no banner photo — the section collapses to its own
   content height and the readability wash is dropped. On these pages the h1
   shares the white field with the copy that follows, so the bottom padding
   carries the gap between them. Pages with banner artwork get that separation
   from the photo itself and are left alone. */
.mi-banner {
    height: auto;
    padding: 150px 0 30px;
    background-image: none;
    /* background-color: var(--color-banner-bg); */
}

.mi-banner:before {
    display: none;
}


/* Breadcrumb rides on top of the banner so the copy can stay vertically
   centred in the section. */
.sitemap {
    position: absolute;
    top: 105px;
    left: 0;
    right: 0;
    z-index: 3;
}

.inner-banner > .container {
    position: relative;
    z-index: 1;
    width: 100%;
}

.ib-breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 5px;
}

.ib-breadcrumb ul li,
.ib-breadcrumb ul li a {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    color: var(--color-dark);
}

.ib-breadcrumb ul li a {
    transition: color 0.3s ease;
}

.ib-breadcrumb ul li a:hover {
    color: var(--color-accent);
}

/* .ib-breadcrumb ul li.active {
    font-weight: 700;
    color: var(--color-accent);
} */

/* Optional icon above the eyebrow, used by the capital pages. */
.cap-icon {
    display: inline-block;
    margin-bottom: 16px;
    line-height: 0;
}

.cap-icon img {
    display: block;
    width: 52px;
    height: auto;
}

.ib-eyebrow {
    display: block;
    margin-bottom: 12px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: var(--color-dark);
}

.inner-banner h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    color: var(--color-accent);
}

.inner-banner h1 span {
    display: block;
}
/*-----------Inner Banner Css End-------------*/

/*-----------Page Intro Css Start-------------*/
/* Lead paragraph sitting under an inner-page banner. */
.page-intro {
    padding: 0 0 40px;
    background-color: #ffffff;
}


.page-intro-text p {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    color: var(--color-dark);
}

.page-intro-text p + p {
    margin-top: 18px;
}
/*-----------Page Intro Css End-------------*/

/*-----------Credit Solutions Css Start-------------*/
.cs-detail {
    padding: 0 0 30px;
    background-color: #ffffff;
}

/* Chart / photo block. Everything the page drops into a column uses this so the
   spacing stays even whether it holds a graph or an image. */
.cs-graph {
    margin-bottom: 30px;
    padding-top:30px;
}

.cs-graph img {
    display: block;
    width: 100%;
    height: auto;
}

/* Charts that previously sat alone in a narrow column, leaving the rest of the
   row empty. Floating them right lets the body copy wrap up the left-hand side
   and closes that gap. */
.cs-graph--float {
    float: right;
    width: 45%;
    max-width: 520px;
    margin-left: 40px;
    padding-top: 0;
}

/* The MSME AUM chart is a tall 480x324 SVG with only one paragraph beside it,
   so at the default float width it outran the copy and left a block of empty
   space underneath. Narrowing it shortens it proportionally and lets the
   paragraph close the gap. */
.cs-graph--msme-aum {
    width: 50%;
    max-width: 420px;
}

/* The copy block has to enclose its floated chart, otherwise the float escapes
   into whatever section follows. */
.cs-text:after {
    content: "";
    display: block;
    clear: both;
}

/* Side-by-side text and chart both get too narrow on small screens, so the
   chart returns to a full-width block in the normal flow. */
@media (max-width: 991px) {
    .cs-graph--float,
    .cs-graph--msme-aum {
        float: none;
        width: 100%;
        max-width: none;
        margin-left: 0;
        padding-top: 30px;
    }
}

.cs-graph-title {
    display: block;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(35, 31, 32, 0.20);
    font-family: var(--font-body);
    font-weight: 700;
}

/* Chart rows span the full container: the columns already divide it evenly, so
   the blocks only need equal heights for their rules and artwork to line up.
   Stretching every card to the row height puts each title's underline on the
   same baseline no matter how many lines the title runs to. */
.cs-graph-row {
    align-items: stretch;
}

.cs-graph-row > [class*="col-"] {
    display: flex;
}

.cs-graph-row .cs-graph {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Titles share one block so the rule beneath them is continuous across the
   row; the artwork then starts from a common line. */
.cs-graph-row .cs-graph-title {
    min-height: 58px;
}

/* The two bar charts carry a lot of empty plot area, so they read better run
   narrower than the column. Scoped to this row only — the pie charts below
   keep the full column width. */
.cs-graph--narrow img {
    width: 60%;
}

/* The three pies are drawn on different canvases (the AUM chart carries a
   wider legend), so matching their widths would render its circle smaller.
   Sizing by height instead makes all three read at the same scale, and the
   auto width keeps each one centred in its column. */
.cs-graph-row--pies .cs-graph img {
    width: auto;
    max-width: 100%;
    height: 220px;
    margin: auto auto 0;
}

/* Placement charts use very different SVG aspect ratios (the sector mix is
   747x331, the fee income 261x355). Give both artwork areas the same height so
   their titles and lower edges align as one row.
   The height caps the tall fee-income chart; the width cap is what actually
   shrinks the wide sector-mix pie, which would otherwise be bound by its
   column. Both stay centred, so the row still reads as one band. */
.cs-graph-row--placement .cs-graph img {
    width: 100%;
    max-width: 500px;
    height: 245px;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
    object-position: center bottom;
}
/*-----------Fostering a Thriving Work Culture Css Start-------------*/
.culture-page .inner-banner h1 {
    font-size: 30px;
    line-height: 38px;
}

/* The h1 sits directly above the intro paragraph. The banner drops the shared
   30px bottom padding and halves the shared 40px margin, so the heading and
   the copy under it read as one block. */
.culture-page-banner {
    padding-bottom: 0;
    margin-bottom: 20px;
}

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

.culture-content {
    padding: 10px 0 30px;
    background-color: #ffffff;
}

.culture-content-inner {
    width: 100%;
}

.culture-content p {
    max-width: 100%;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

.culture-intro {
    margin-bottom: 36px;
}

.culture-feature {
    width: 100%;
}

.culture-logo {
    display: block;
    width: auto;
    max-width: 220px;
    height: auto;
    margin-bottom: 24px;
}

.culture-feature h2 {
    margin-bottom: 12px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--color-accent);
}

.culture-feature p + p {
    margin-top: 24px;
}

.culture-performance {
    padding: 10px 0 60px;
    background-color: #ffffff;
}

.culture-performance-title {
    margin-bottom: 28px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--color-accent);
}

.culture-performance-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
}

.culture-performance-item {
    min-width: 0;
    padding-bottom: 18px;
    border-bottom: 4px solid var(--color-dark);
}

.culture-performance-item strong {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-body);
    font-size: 30px;
    line-height: 38px;
    font-weight: 600;
    color: var(--color-dark);
}

.culture-performance-item p {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}

.cs-graph-title em {
    font-style: normal;
    font-weight: 400;
    display: block;
}

/* Portrait charts — the SVG is taller than it is wide (e.g. 261x355), so a
   plain width:100% stretches it to a huge height. Cap the height and let the
   width follow the aspect ratio. */
.cs-graph-tall {
    width: auto !important;
    max-width: 100%;
    max-height: 340px;
    margin-left: auto;
    margin-right: auto;
}

.cs-img {
    margin-bottom: 30px;
}

.cs-img img {
}
.culture-certification {
    padding: 10px 0 70px;
    background-color: #ffffff;
}

.culture-certification-visual {
    position: relative;
    width: 100%;
    padding: 35px 0 0 70px;
}

.culture-certification-photo {
    display: block;
    width: 100%;
    height: auto;
}

/* The h1 sits directly above the lead paragraph on this page, so the banner
   drops its shared 30px bottom padding and the 40px under the banner does the
   separating on its own. */
.cs-banner {
    padding-bottom: 0;
}

.cs-text {
    margin-bottom: 15px;
}

.cs-text p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

.cs-text p + p {
    margin-top: 16px;
}

/* 24px section heading, one step down from the page h1. */
.cs-title {
    margin-bottom: 12px;
    font-size: 24px;
    line-height: 32px;
    color: var(--color-dark);
}

.cs-sub-title {
    display: block;
    margin-bottom: 18px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-dark);
}

/* Same size as the sub-title but accent coloured — used inside the segments. */
.cs-note-title {
    display: block;
    margin-bottom: 14px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    margin-top: 30px;
    line-height: 26px;
    color: var(--color-accent);
}
.tablecstitle {
    display: block;
    margin-bottom: 14px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
}

/*-----------Bharat Credit Summit-------------*/
.cs-summit-section {
    padding: 0 0 30px;
}

.cs-summit {
    padding: 45px 40px 15px;
    background-color: #f1f1f1;
}

.cs-summit-img img {
    display: block;
    width: 100%;
    height: auto;
}

.cs-summit-gallery {
    margin-top: 30px;
}

/*-----------Key segments accordion-------------*/

.cs-segments-title {
    display: block;
    margin-bottom: 24px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(35, 31, 32, 0.20);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}

.cs-acc-item + .cs-acc-item {
    margin-top: 20px;
}

/* Bootstrap's collapse plugin drives this — it puts .collapsed back on the
   button whenever the panel is closed, which is what flips the icon. */
.cs-acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 8px 15px;
    background-color: var(--color-accent);
    border: 0;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cs-acc-head:hover {
    background-color: #3bb2cc;
}

.cs-acc-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    color: #ffffff;
}

/* Minus when open; the second bar rotates in to make a plus when closed. */
.cs-acc-icon {
    position: relative;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.cs-acc-icon:before,
.cs-acc-icon:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    background-color: #ffffff;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.cs-acc-icon:after {
    transform: rotate(0deg);
    opacity: 0;
}

.cs-acc-head.collapsed .cs-acc-icon:after {
    transform: rotate(90deg);
    opacity: 1;
}

.cs-acc-body {
    padding: 30px 0 0;
    border-top: 0;
}

/* Columns stretch to the tallest stat and the label is pushed to the bottom,
   so the rules stay on one line even when a value wraps. */
.cs-stat-row > [class*="col-"] {
    display: flex;
    margin-bottom: 30px;
}

/* Fund Management splits three ways: the four figures as a 2x2 block on the
   left, the pie chart alongside on the right. The inner .row is a nested grid,
   so it needs the same flex treatment .cs-stat-row gives its own direct
   children — the selector above stops at one level. */
.cs-fund-figures > [class*="col-"] {
    display: flex;
    margin-bottom: 30px;
}

/* The outer columns stretch, so both halves share one height and the pie sits
   level with the figures rather than starting below them. */
/* The columns zero the 30px the other stat rows carry so the figures and the
   chart end flush with each other. That 30px then has to come back on the row
   itself, or whatever follows - the segment photograph - sits straight against
   the chart legend. */
.cs-fund-split {
    margin-bottom: 30px;
}

.cs-fund-split > [class*="col-"] {
    margin-bottom: 0;
}

/* Bottom row of the 2x2 has the .row's own gutter below it; drop it so the
   block ends flush with the chart column beside it. */
.cs-fund-figures > [class*="col-"]:nth-last-child(-n + 2) {
    margin-bottom: 0;
}

/* Chart fills its column's height and centres, so it reads as one band with
   the figures instead of hanging from the top. */
.cs-fund-split .cs-graph {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70%;
    margin-bottom: 0;
    padding-top: 0;
}

.cs-stat {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(35, 31, 32, 0.25);
}

.cs-stat-value {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    color: var(--color-dark);
}

.cs-stat-label {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}

/* Table scrolls on its own rather than pushing the page sideways. */
.cs-table-wrap {
    margin-bottom: 30px;
    overflow-x: auto;
}
.cstblethbrd th{
    border-top: 3px solid grey;
    border-bottom: 3px solid grey !important;
}

.cs-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.cs-table th,
.cs-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(35, 31, 32, 0.15);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 23px;
    text-align: left;
    color: var(--color-dark);
}

.cs-table th {
    font-weight: 700;
    color: var(--color-accent);
    border-bottom-color: rgba(35, 31, 32, 0.30);
}
.d2c-branch-table th {
    font-weight: 700;
    color: var(--color-dark);
    border-bottom-color: rgba(35, 31, 32, 0.30);
}

.cs-table td {
    font-weight: 400;
}

/*-----------Credit Solutions Css End-------------*/

/*-----------D2C Lending Css Start-------------*/
/* Dark "At a Glance" panel. Reused by every D2C segment — the title is
   optional, some panels are just the stat grid. */
.d2c-glance {
    padding: 32px 30px 8px;
    margin-bottom: 30px;
    background-color: var(--color-dark);
}

.d2c-glance-title {
    display: block;
    margin-bottom: 26px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
}

/* Same trick as .cs-stat — a value that wraps to two lines must not drag its
   label and rule below the neighbouring ones. */
.d2c-glance .row > [class*="col-"] {
    display: flex;
    margin-bottom: 24px;
}

.d2c-glance-stat {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-accent);
}

/* Panel and photo sitting side by side. Bootstrap already makes the columns
   equal height; this passes that height down so the dark panel and the image
   both fill it and their top and bottom edges line up. */
.d2c-eq {
    display: flex;
}

.d2c-eq > .d2c-glance,
.d2c-eq > .cs-img {
    width: 100%;
}

.d2c-eq > .cs-img img {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Rural Finance: dark panel left, chart right. The panel stretches to the
   row's height while the chart centres against it, so a short chart does not
   sit hard against the panel's top edge. */
.d2c-glance-graph-row {
    margin-bottom: 30px;
}

.d2c-glance-graph-row .d2c-glance {
    height: 100%;
    margin-bottom: 0;
}

.d2c-glance-graph-row > .d2c-eq > .cs-graph {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
}

/* Stacked variant — the figures run one below the other down the panel instead
   of sitting side by side across it. */
.d2c-glance-stack .row > [class*="col-"] {
    margin-bottom: 22px;
}

.d2c-glance-stack .row > [class*="col-"]:last-child {
    margin-bottom: 8px;
}

.d2c-glance-value {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 30px;
    line-height: 34px;
    color: var(--color-accent);
}

.d2c-glance-label {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #ffffff;
}

/* Branch network: map on the left, state table on the right. */
.d2c-map {
    margin-bottom: 30px;
}

.d2c-map-title {
    display: block;
    margin-bottom: 20px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: var(--color-dark);
    padding-bottom: 5px;
    border-bottom: 3px solid #000;
}

.d2c-map img {
    display: block;
    width: 100%;
    height: auto;
}
.titlenobrd{
    border-bottom: none;
}
.d2c-map-note {
    display: block;
    margin-top: 14px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 20px;
    color: rgba(35, 31, 32, 0.65);
}

.d2c-branch-table {
    min-width: 320px;
}

/*-----------Page Pager Css End-------------*/

/*-----------Footer Css Start-------------*/
#footer {
    background-color: #ffffff;
}

/* Accent band sitting on top of the white panel, inset from both edges. */
.footer-accent-bar {
    display: block;
    height: 15px;
    margin: 0 90px;
    background-color: var(--color-accent);
}

.footer-panel {
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(35, 31, 32, 0.12);
}

.footer-cover {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 40px 55px;
}

.footer-cover img {
    display: block;
    width: 200px;
    height: auto;
    border: 1px solid rgba(35, 31, 32, 0.12);
}

.footer-downloads {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-left: 1px solid rgba(35, 31, 32, 0.12);
}

.footer-download {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 45px;
}

/* Divider between the two columns, and between the two rows. */
.footer-download:nth-child(2n) {
    border-left: 1px solid rgba(35, 31, 32, 0.12);
}

.footer-download:nth-child(n + 3) {
    border-top: 1px solid rgba(35, 31, 32, 0.12);
}

.footer-download-title {
    margin-bottom: 8px;
    font-size: 22px;
    line-height: 30px;
    color: var(--color-dark);
}

.footer-download-link {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    color: rgba(35, 31, 32, 0.70);
    transition: color 0.3s ease;
}

.footer-download-link:hover {
    color: var(--color-accent);
}

/* Categories holding more than one PDF reveal the list instead of linking out. */
.footer-download.has-menu {
    position: relative;
}

.footer-download-toggle {
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.footer-download-menu {
    position: absolute;
    left: 45px;
    right: 45px;
    top: 100%;
    z-index: 5;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid rgba(35, 31, 32, 0.12);
    box-shadow: 0 12px 28px rgba(35, 31, 32, 0.12);
    display: none;
}

.footer-download.is-open .footer-download-menu {
    display: block;
}

/* Bottom-row tiles would push their list past the panel, so they open upward. */
.footer-download:nth-child(n + 3) .footer-download-menu {
    top: auto;
    bottom: 100%;
    box-shadow: 0 -12px 28px rgba(35, 31, 32, 0.12);
}

.footer-download-menu a {
    display: block;
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 20px;
    color: rgba(35, 31, 32, 0.70);
    transition: color 0.3s ease, background-color 0.3s ease;
}

.footer-download-menu a:hover {
    color: var(--color-accent);
    background-color: rgba(35, 31, 32, 0.04);
}

.footer-bottom {
    background-color: var(--color-dark);
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
}

.footer-copy,
.footer-credit {
    font-size: 14px;
    line-height: 22px;
    color: #ffffff;
}

/* Stays white on hover — the global `a` rules would otherwise resize it too. */
.footer-credit a,
.footer-credit a:hover {
    font-size: 14px;
    line-height: 22px;
    color: #ffffff;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0;
}
.culture-certification-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 165px;
    height: auto;
    z-index: 1;
}

.culture-pillars {
    padding: 0 0 0px;
    background-color: #ffffff;
}

.culture-pillar {
    width: 100%;
}

.culture-pillar + .culture-pillar {
    margin-top: 30px;
}

.culture-pillar h2 {
    margin-bottom: 10px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--color-accent);
}

.culture-pillar p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

.culture-pillar p + p {
    margin-top: 24px;
}

.culture-pillar-list {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.footer-social a {
    display: block;
    line-height: 0;
    color: #ffffff;
    transition: color 0.3s ease;
}

.footer-social a:hover {
    color: var(--color-accent);
}
/*-----------Footer Css End-------------*/

.footer-credit a 
{
    color: #ffffff;
}

.d2c-branch-table th:last-child,
.d2c-branch-table td:last-child {
    text-align: right;
}

.d2c-branch-total td {
    font-weight: 700;
}

/* Segment landscape: illustration, cyan title band and the sector grid all sit
   on one deep-blue panel, so the gaps between the cells read as the panel
   colour showing through. */
.d2c-landscape {
    margin-bottom: 30px;
    padding: 20px 0 30px;
    background-color: #2b7aa5;
}
.d2c-landscape-img{
    max-width: 580px;
    width: 100%;
    margin: 20px auto;
}
.d2c-landscape-img img {
    display: block;
    width: 100%;
    height: auto;
}

.d2c-landscape-title {
    display: block;
    margin: 0 30px 26px;
    padding: 14px 20px;
    background-color: #4fc6e0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    /* color: #16496b; */
}

.d2c-landscape .cs-table-wrap {
    margin: 0 30px;
}

/* Separate borders so border-spacing can open the gaps between the blocks. */
.d2c-table {
    border-collapse: separate;
    border-spacing: 8px 3px;
}

.d2c-table th,
.d2c-table td {
    border: 0;
    vertical-align: middle;
}

.d2c-table th {
    padding: 12px 18px;
    background-color: #c9cccd;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

/* Products column — the palest of the three blocks. */
.d2c-table td {
    padding: 16px 18px;
    background-color: #e9f6fc;
    font-size: 15px;
    line-height: 23px;
    color: #000;
}

/* Column 1 sits on the panel colour itself and carries the icon, with a hairline
   rule under each sector instead of a filled block. */
.d2c-table th:first-child,
.d2c-table td:first-child {
    width: 24%;
}

.d2c-table td:first-child {
    padding-left: 0;
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.40);
}

.d2c-table th:nth-child(2),
.d2c-table td:nth-child(2) {
    width: 38%;
}

/* Market segment column: solid cyan, with the first row dropped to the pale
   tint as in the report. */
.d2c-table td:nth-child(2) {
    background-color: #5bc8e3;
}



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

.d2c-sector-icon {
    flex-shrink: 0;
    line-height: 0;
}

.d2c-sector-icon img {
    display: block;
    width: 34px;
    height: auto;
}

.d2c-sector-text {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}
/*-----------D2C Lending Css End-------------*/

/*-----------Risk Management Css Start-------------*/
/* Three-column framework panel. The 1px gaps between the tiles come from the
   4px margins, so the row uses g-0 and the columns butt up against each other. */
.rm-framework {
    margin-bottom: 30px;
}

.rm-framework-head {
    display: block;
    margin-bottom: 4px;
    padding: 16px 24px;
    background-color: var(--color-accent);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
}

/* Fixed min-height so all three bars match even though the third heading wraps
   to two lines — separate columns cannot equalise on their own. */
.rm-col-head {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    margin-bottom: 4px;
    padding: 10px 18px;
    background-color: #8f9294;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #ffffff;
}

/* Columns are flex so the wheel and the icon list can take the leftover height
   under their heading and centre themselves in it. */
.rm-framework .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.rm-wheel {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}

.rm-wheel img {
    display: block;
    width: 100%;
    height: auto;
}

.rm-list-item {
    display: block;
    margin-bottom: 4px;
    padding: 14px 18px;
    background-color: #e8f6fb;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 23px;
    color: var(--color-dark);
}

.rm-list-item strong {
    font-weight: 700;
}

/* Four icons spread evenly down the column so the block lines up with the
   wheel beside it. No tile behind them — the icons carry the colour. */
.rm-tech {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px 0;
}

.rm-tech-item {
    padding: 8px 12px;
    text-align: center;
}

.rm-tech-icon {
    display: block;
    margin-bottom: 12px;
    line-height: 0;
}

.rm-tech-icon img {
    display: inline-block;
    width: 56px;
    height: auto;
}

.rm-tech-text {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}
/*-----------Risk Management Css End-------------*/

.culture-pillar-list li {
    position: relative;
    padding-left: 24px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

.culture-pillar-list li:before {
    content: "\2013";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--color-accent);
}

.culture-pillar-list li + li {
    margin-top: 12px;
}
/*-----------Fostering a Thriving Work Culture Css End-------------*/

/*-----------Page Pager Css Start-------------*/
/* Previous / next page links. Gradient is the index palette: accent cyan into
   the indigo used in the ecosystem diagram. */
.page-pager {
    padding: 50px 0 50px;
    background-color: #ffffff;
}

.pager-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    min-height: 60px;
    padding: 18px 20px;
    background-color: #ffffff;
    border: 1px solid rgba(35, 31, 32, 0.18);
    overflow: hidden;
    transition: border-color 0.35s ease;
}

/* Gradient washes in on hover — fading a pseudo-element instead of animating
   background-image, which is not interpolatable. */
.pager-link:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #4fc6e0 0%, #5a72b7 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.pager-link > * {
    position: relative;
    z-index: 1;
}

.pager-next {
    justify-content: flex-end;
    text-align: right;
}

.pager-text {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: var(--color-dark);
    transition: color 0.35s ease;
}

.pager-arrow {
    display: flex;
    flex-shrink: 0;
    line-height: 0;
}

.pager-arrow svg {
    display: block;
    transition: transform 0.35s ease;
}

.pager-link:hover {
    border-color: transparent;
}

.pager-link:hover:before {
    opacity: 1;
}

.pager-link:hover .pager-text {
    color: #ffffff;
}

/* CSS beats the gradient set as a presentation attribute on the path. */
.pager-link:hover .pager-arrow svg path {
    stroke: #ffffff;
}

.pager-prev:hover .pager-arrow svg {
    transform: translateX(-5px);
}

.pager-next:hover .pager-arrow svg {
    transform: translateX(5px);
}
/*-----------Page Pager Css End-------------*/

/*-----------Powering India's Credit Ecosystem Css Start-------------*/
/* Title is set in caps here, as it is in the report. The banner is full-bleed
   again, so the copy sits over the photograph — it is coloured white with the
   other full-screen banners further down this file. */
.powering-banner h1 {
    text-transform: uppercase;
}

/* Each line breaks where the report breaks it. */
.powering-banner h1 span {
    display: block;
}

/* Lead copy sitting directly under the banner. 40px clears the banner exactly
   as specified; the paragraphs run as one straight column, not the PDF's
   two-column setting. */
.credit-ecosystem-intro {
    /* padding: 40px 0 0; */
    background-color: #ffffff;
}

.credit-ecosystem-intro-text p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

.credit-ecosystem-intro-text p + p {
    margin-top: 18px;
}

/* The blue figures from the right rail of the PDF spread, re-laid as three
   columns instead of two. */
.defining-numbers {
    padding: 60px 0 0;
    background-color: #ffffff;
}

.defining-numbers-title {
    margin-bottom: 30px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-dark);
}

.defining-numbers-grid {
    row-gap: 30px;
}

/* Underline per figure, matching the rule under each number in the report. */
.defining-number-item {
    height: 100%;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-accent);
}

.defining-number-value {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    color: var(--color-accent);
}

.defining-number-label {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}

/* Parenthetical qualifier under a label — italic in the report. */
.defining-number-note {
    display: block;
    font-style: italic;
}

/* Second spread: the whole section sits on the report's blue field. */
.diversified-credit-enabler {
    padding: 70px 0;
    margin-top: 70px;
    background-color: var(--color-accent);
}

.diversified-credit-enabler-head {
    margin-bottom: 50px;
}

.diversified-credit-enabler-title {
    margin-bottom: 12px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-dark);
}

.diversified-credit-enabler-head p {
    /* max-width: 900px; */
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

/* Seven milestones between two white rules. Everything is laid on one shared
   7-column grid so the sparkles, icons and years all line up column for
   column. */
.evolution-timeline {
    margin-bottom: 60px;
}

.evolution-timeline-track,
.evolution-timeline-rule,
.evolution-timeline-years {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 20px;
}

/* The rule itself is the background; each sparkle is centred in its column
   and masks the line behind it. */
.evolution-timeline-rule {
    position: relative;
    align-items: center;
    height: 24px;
}

.evolution-timeline-rule:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    transform: translateY(-50%);
}

.evolution-timeline-rule--top {
    margin-bottom: 26px;
}

.evolution-timeline-rule--bottom {
    margin-top: 26px;
}

.evolution-timeline-sparkle {
    position: relative;
    display: flex;
    justify-content: center;
    line-height: 0;
}

.evolution-timeline-sparkle img {
    display: block;
    width: 18px;
    height: 18px;
}

.evolution-milestone {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.evolution-milestone-title {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: var(--color-dark);
    text-transform: uppercase;
}

.evolution-milestone-text {
    display: block;
    margin-bottom: 20px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-dark);
}

/* Pushed to the bottom of the flex column so the icons sit on one line
   regardless of how tall the labels above them run. */
.evolution-milestone-icon {
    display: block;
    margin-top: auto;
}

.evolution-milestone-icon img {
    display: block;
    width: 56px;
    height: 56px;
}

.evolution-milestone-year {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    color: var(--color-dark);
    text-align: center;
}

/* Stepped leader rows. Two columns: a left area that steps further right on
   each level, and a fixed-width right column carrying the bold figure. */
.business-lines-group + .business-lines-group {
    margin-top: 30px;
}

.business-lines-group-title {
    padding: 8px 20px;
    margin-bottom: 0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-dark);
    text-align: center;
    background-color: #d3d3d3;
}

/* The band spans a different portion of the width per group, as in the
   report — full for Credit Solutions, then progressively inset. */
/* The ladder is derived from the year grid above, not from a pitch of its own:
   each row names the year its business line started, and the reader checks that
   by looking straight up the page. An invented step (this was a uniform 11.5%)
   drifts against the years — the columns sit on a 14.5% pitch — and by the
   fifth level the row was ~150px left of the year it belongs to.

   .evolution-timeline-* is a 7-column `repeat(7, 1fr)` grid with a 20px gap, so
   the centre of column n is (n - 0.5) column-widths plus (n - 1) gaps from the
   left edge. Both grids span the same container, so repeating that arithmetic
   here puts a row's name box under its own year at any width — no magic
   numbers, and the two stay locked together if the column count or gap ever
   changes. */
.business-lines {
    --bl-cols: 7;
    --bl-gap: 20px;
    /* one column of the year grid */
    --bl-col-w: calc((100% - (var(--bl-cols) - 1) * var(--bl-gap)) / var(--bl-cols));
    /* centre of column n, measured from the left edge of the grid */
    --bl-c1: calc(0.5 * var(--bl-col-w));
    --bl-c2: calc(1.5 * var(--bl-col-w) + 1 * var(--bl-gap));
    --bl-c3: calc(2.5 * var(--bl-col-w) + 2 * var(--bl-gap));
    --bl-c4: calc(3.5 * var(--bl-col-w) + 3 * var(--bl-gap));
    --bl-c5: calc(4.5 * var(--bl-col-w) + 4 * var(--bl-gap));
    --bl-c6: calc(5.5 * var(--bl-col-w) + 5 * var(--bl-gap));
    --bl-c7: calc(6.5 * var(--bl-col-w) + 6 * var(--bl-gap));

    /* The text columns keep their full size at every level — it is the leader
       rule between them that gives way as the rows step right, since it carries
       no content. flex-shrink on .business-line-rule does that; these stay
       fixed. */
    --bl-name-w: 175px;
    --bl-value-w: 240px;

    /* The row is indented by its padding but the name box is centred text, so
       the indent that lands the box's CENTRE on a column centre is that centre
       less half the box. Clamped at 0 so the shallowest row cannot pull left
       out of the container. */
    --bl-step-1: max(0px, calc(var(--bl-c1) - var(--bl-name-w) / 2));
    --bl-step-2: max(0px, calc(var(--bl-c2) - var(--bl-name-w) / 2));
    --bl-step-3: max(0px, calc(var(--bl-c3) - var(--bl-name-w) / 2));
    --bl-step-4: max(0px, calc(var(--bl-c4) - var(--bl-name-w) / 2));
    --bl-step-5: max(0px, calc(var(--bl-c5) - var(--bl-name-w) / 2));
    --bl-step-6: max(0px, calc(var(--bl-c6) - var(--bl-name-w) / 2));
}

.business-lines-group-title--full {
    margin-left: var(--bl-step-1);
}

/* Each band starts at its own first row: Direct to Customer Lending shares an
   edge with Consumer Finance (step-3), Data & Tech with nPOS (step-4). The rows
   below each band then step deeper, so every group reads as a nested block. */
.business-lines-group-title--indent-1 {
    margin-left: var(--bl-step-3);
}

.business-lines-group-title--indent-2 {
    margin-left: var(--bl-step-4);
}

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

.business-line {
    display: flex;
    align-items: flex-end;
    padding: 18px 0 0;
}

/* Name sits on its own underline; the spacer rule continues the leader across
   to the value column. */
.business-line-name {
    flex-shrink: 0;
    width: var(--bl-name-w);
    padding-bottom: 6px;
    border-bottom: 2px solid var(--color-dark);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
    text-align: center;
}

/* Sits clear of both underlines either side — the rules read as separate
   segments, not one continuous line. */
/* The rule is the only part of the row that gives way as the levels step right:
   the name and value columns keep their full width, and this absorbs whatever
   is left. min-width:0 lets it shrink past its basis, and once nothing remains
   it collapses to zero rather than forcing the row wider than the container. */
.business-line-rule {
    flex: 1 1 0;
    min-width: 0;
    height: 1px;
    margin: 0 16px;
    background-color: var(--color-dark);
}

/* On the deepest row there is not enough width left to draw a leader that reads
   as a connector, so the line itself goes — but the element stays and keeps
   flexing, so the value column still lands on the shared right-hand edge.

   The min-width is what keeps the two underlines apart. Without it this spacer
   shrinks to nothing on this row — it is the only part that can give — and the
   name's underline runs straight into the value's, so "Monetisation" and its
   figure read as one bar on a single continuous line. Reserving the gap here
   separates them without shifting the row off the 2024 column. */
.business-line--step-6 .business-line-rule {
    flex: 1 1 0;
    min-width: 40px;
    margin: 0;
    background-color: transparent;
}

/* Reserving that gap costs 40px the deepest row does not have. At column 6 the
   indent leaves less room than a full-width name plus the gap plus a full-width
   value, so something has to give or the value box hangs past the right-hand
   column every other row shares.

   The name column keeps its position, because sitting under 2024 is the whole
   point of the row; the value column gives way instead. Its underline is
   shorter than the ones above it as a result, but it still ends on the shared
   right edge, and the figure it carries ("Bank and NBFCs") is short enough that
   nothing wraps. The alternative — capping the indent — drags the name back off
   2024, which is the one thing this row must not do. */
.business-line--step-6 {
    padding-left: var(--bl-step-6);
}

.business-line--step-6 .business-line-value {
    width: auto;
    min-width: 0;
    flex-shrink: 1;
}

/* Fixed width, so every figure in the stack shares one right-hand column. That
   column runs to the container's right edge rather than being centred on 2026:
   the box is 240px but column 7's centre is only ~84px from the edge, so
   centring it would hang the figures off the side. Its right edge sits just
   past 2026 instead, which is what the report shows. */
.business-line-value {
    flex-shrink: 0;
    width: var(--bl-value-w);
    padding-bottom: 6px;
    border-bottom: 2px solid var(--color-dark);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
    text-align: right;
}

/* Each step pushes the name column further right; the spacer absorbs the
   difference so the value column never moves. Same scale as the group-title
   indents above, so titles and their rows share a left edge.

   The indent is padding on the row, and the name/value columns are fixed px, so
   their widths stay constant while only the leader rule absorbs each step. */
.business-line--step-1 { padding-left: var(--bl-step-1); }
.business-line--step-2 { padding-left: var(--bl-step-2); }
.business-line--step-3 { padding-left: var(--bl-step-3); }
.business-line--step-4 { padding-left: var(--bl-step-4); }
.business-line--step-5 { padding-left: var(--bl-step-5); }

/* Monetisation belongs to 2024 — column 6 — the same as every other row sits
   under the year its line began. The indent is capped just below, where the
   deepest row runs out of width. */

/* Charts page — placeholders until the real artwork lands. */
.growing-aum {
    padding: 70px 0 30px;
    background-color: #ffffff;
}

.growing-aum-head {
    margin-bottom: 40px;
}

.growing-aum-title {
    margin-bottom: 12px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-dark);
}

.growing-aum-head p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

.growing-aum-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.growing-aum-chart-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-dark);
}

/* "(AUM)" / "(Excluding NCI)" are set lighter than the title in the report. */
.growing-aum-chart-title em {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
}

.growing-aum-chart-unit {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}

.growing-aum-chart img {
    display: block;
    width: 100%;
    height: auto;
}
/*-----------Powering India's Credit Ecosystem Css End-------------*/

/*-----------Letter to Shareholders Css Start-------------*/
/* Reuses .chairman-letter from the home page wholesale — background photo,
   white wash and portrait all carry over. Only the fixed header clearance
   differs, since this runs as the first section of an inner page. */
.letter-banner {
    margin-bottom: 30px;
    padding-top: var(--header-height);
}

/* Extra clearance under the absolutely-positioned breadcrumb, so the centred
   copy never rides up under it. */
.letter-banner .chairman-letter-text {
    min-height: calc(100vh - var(--header-height));
    padding-top: 60px;
}

/* Banner quote goes white like the title above it, rather than the black body
   colour it would otherwise inherit. Scoped to .letter-banner, so the home
   page's version of this section keeps its black quote. */
.letter-banner .chairman-letter-text p {
    color: #ffffff;
}

/* Only the background photo differs from the Chairman's banner — the layout,
   white wash and portrait placement are all inherited. */
.ceo-letter-banner {
    background-image: url(../images/md-ceo-bg-img.webp);
}

/* Body copy runs as one straight column, not the report's four-column
   setting. */
.letter-opening {
    /* padding: 40px 0 0; */
    background-color: #ffffff;
}

.letter-salutation {
    margin-bottom: 18px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-dark);
}

/* Blue question/sub-heading breaking up the copy, as in the MD & CEO letter. */
.letter-subheading {
    margin: 26px 0 18px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-accent);
}

/* .letter-closing-text is included because the closing paragraphs now sit in
   their own column beside the illustration rather than inside .letter-body —
   without it they would drop to the browser default face and size. */
.letter-body p,
.letter-closing-text p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

.letter-body p + p,
.letter-closing-text p + p {
    margin-top: 18px;
}

/* The two figures pulled out of the letter, on the report's blue block. */
.letter-highlight {
    padding: 50px 0 0;
    background-color: #ffffff;
}

.letter-highlight-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 40px;
    background-color: var(--color-accent);
}

/* Column flex so the label can be pushed down — the labels differ in length,
   and without this their underlines would sit at different heights. */
.letter-highlight-figure {
    display: flex;
    flex: 1 1 300px;
    flex-direction: column;
}

.letter-highlight-value {
    display: block;
    margin-bottom: 12px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    color: var(--color-dark);
}

/* Rule under each figure, as in the report.

   The labels differ in length — one runs to a single line, the other to two —
   so margin-top:auto alone bottom-aligned the rules but left the label TEXT
   starting at different heights, which read as a vertical jog between the two
   columns. Reserving two lines of height and starting the text at the top of
   that box aligns the first line of every label with its neighbour, while the
   fixed box keeps the underlines level. */
.letter-highlight-label {
    display: block;
    margin-top: auto;
    min-height: 48px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-dark);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}

/* Second half of the letter, on the report's pale blue field. */
.letter-continued {
    padding: 40px 0 30px;
    margin-top: 60px;
    background-color: var(--color-banner-bg);
}

/* The MD & CEO letter carries no tint — its second half runs on white. */
.letter-continued--plain {
    background-color: #ffffff;
}

.letter-signoff {
    margin-top: 30px;
}

.letter-regards {
    margin-bottom: 18px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

.letter-signoff-name {
    display: block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-dark);
}

.letter-signoff-designation {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}

/* Closing block beside the illustration: text column left, artwork right, both
   starting at the same height. align-items:flex-start keeps the illustration at
   the top of the row rather than stretching or centring against a much taller
   text column. */
/* align-items:flex-end sits the artwork on the foot of the text column, so the
   illustration's base lines up with the last closing paragraph. Top-aligning it
   left a large dead space underneath instead. The sign-off deliberately sits
   OUTSIDE this row — inside it, the artwork would align to the bottom of
   "Chairman" rather than to the paragraph above. */
.letter-closing {
    display: flex;
    align-items: flex-end;
    gap: 40px;
}

/* Takes the remaining width; min-width:0 lets it shrink properly inside flex
   instead of being floored by its longest line. */
.letter-closing-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* The pull quote now sits inline between body paragraphs, which are spaced by
   a p + p rule it interrupts — so it carries its own breathing room. */
.letter-body .letter-statement,
.letter-closing-text .letter-statement {
    margin: 34px 0;
}

/* The quote leads the closing column, so its top margin would drop the text a
   further 34px and break the level start the artwork is aligned to. */
.letter-closing-text .letter-statement:first-child {
    margin-top: 0;
}

/* The `<container> p` rules above are more specific than .letter-statement-text
   and would otherwise repaint the quote in body grey at body weight. Both
   containers are listed since the quote moved into the closing column. */
.letter-body .letter-statement-text,
.letter-closing-text .letter-statement-text {
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    color: var(--color-accent);
}

.letter-statement-icon {
    display: inline-block;
    /* margin-bottom: 20px; */
    line-height: 0;
}

.letter-statement-icon img {
    display: block;
    width: 60px;
      
    height: auto;
}

.letter-statement-text {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
      
    color: var(--color-accent);
}

/* Right-hand column of .letter-closing. flex-shrink:0 holds its width so the
   artwork keeps its size and the text takes the slack; the old margin-top is
   gone because it now aligns to the top of the closing block, not to the foot
   of the page. */
.letter-closing-img {
    flex: 0 0 420px;
    max-width: 420px;
}

.letter-closing-img img {
    display: block;
    width: 100%;
    height: auto;
}
/*-----------Letter to Shareholders Css End-------------*/

/*-----------Delivering Our Strategy Page Css Start-------------*/
/* Dark spread. Uses the same --color-dark field as the home page strategy
   section, applied to the bannerless .mi-banner variant. The banner carries
   the top of the field and the sections below continue it, so the default
   bottom margin is dropped — it would cut a white band across the spread. */
.strategy-banner {
    margin-bottom: 0;
    background-color: var(--color-dark);
}

.strategy-banner .ib-content {
    max-width: 900px;
}

.strategy-banner h1 {
    color: #ffffff;
}

.strategy-banner .ib-breadcrumb ul li,
.strategy-banner .ib-breadcrumb ul li a {
    color: #ffffff;
}

.strategy-banner .ib-breadcrumb ul li a:hover {
    color: var(--color-accent);
}

.strategy-pillars {
    padding: 40px 0 0;
    background-color: var(--color-dark);
}

/* While the stepper is pinned the whole section is held on screen at once, so
   it has to fit one viewport: the intro sits at the top, the rail and panel
   take the space that is left, and the tallest pillar sets the height. Applied
   by js/strategy.js only on the widths that actually pin (it adds the class),
   so the un-pinned stack below the breakpoint is never height-capped.
   A full 100vh, not 100vh-minus-header: this page's header scrolls away with
   the document rather than staying fixed, so subtracting its height left the
   dark field 78px short and a white band showed above the pinned section. */
.strategy-pillars.is-pinned {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Content sits toward the top rather than centred in the viewport. Centring
       split the leftover height evenly above and below, which on a tall screen
       put ~140px of dead ground between the top of the section and the opening
       paragraph. flex-start with a modest padding keeps the intro close to the
       top edge; the panel below it still has room to grow to the tallest
       pillar, and any slack now collects at the foot where it reads as margin
       rather than as a gap. */
    justify-content: flex-start;
    /* clamp against viewport height, not a fixed value: 60px of head room is
       right on a tall screen but pushes the longest pillar off the bottom at
       720px, where the whole section only just fits. */
    padding: clamp(24px, 6.5vh, 60px) 0 clamp(16px, 3vh, 30px);
}

.strategy-pillars.is-pinned > .container {
    width: 100%;
}

/* Pulled in from the 50px the unpinned stack uses: while pinned everything has
   to share one screen, so the rail sits closer under the opening paragraph.
   Scaled with the viewport for the same reason as the padding above. */
.strategy-pillars.is-pinned .strategy-stepper {
    margin-top: clamp(20px, 3.8vh, 34px);
}

.strategy-pillars.is-pinned .strategy-pillars-outro {
    margin-top: clamp(18px, 3.8vh, 34px);
}

/* Short viewports (a 1080p screen at 150% zoom lands at 720px) run about 10px
   over once the tallest pillar is open. Tightening the leading on the two
   framing paragraphs recovers more than that without touching type size, so
   the whole section still parks on one screen. */
@media (min-width: 992px) and (max-height: 800px) {
    .strategy-pillars.is-pinned .strategy-pillars-intro p,
    .strategy-pillars.is-pinned .strategy-pillars-outro p {
        font-size: 15px;
        line-height: 23px;
    }
    .strategy-pillars.is-pinned .strategy-panel-title {
        margin-bottom: 10px;
        font-size: 28px;
        line-height: 34px;
    }
    .strategy-pillars.is-pinned .strategy-panel-stats {
        margin-top: 22px;
    }
    .strategy-pillars.is-pinned .strategy-pillar-rule {
        margin-bottom: 12px;
    }
}

.strategy-pillars-intro p {
    /* max-width: 900px; */
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
}

/* Short accent rule sitting above each pillar, as in the report. */
.strategy-pillar-rule {
    display: block;
    width: 48px;
    height: 10px;
    margin-bottom: 18px;
    background-color: var(--color-accent);
}

/* --- Strategy stepper: rail + swapping panel --- */
/* The section is pinned by js/strategy.js and the panels are swapped as the
   page is scrolled through it, so the three pillars occupy one screen instead
   of three screenfuls of stacked copy. Everything here is written so that the
   no-script state is the plain stack it replaced: the panels are only taken
   out of the flow once .is-enhanced is set by the script. */
.strategy-stepper {
    margin-top: 50px;
}

.strategy-stepper-inner {
    display: grid;
    /* Rail is a fixed column; the panel takes the rest. */
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 60px;
    align-items: start;
}

/* --- the rail --- */
.strategy-rail ul {
    /* The vertical line the dots ride. Drawn on the list rather than per item
       so it runs unbroken from the first dot to the last. */
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.strategy-rail ul:before {
    content: "";
    position: absolute;
    /* Aligned to the centre of the dots (10px wide, so 5px in). */
    left: 5px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.18);
}

.strategy-rail-item + .strategy-rail-item {
    margin-top: 42px;
}

/* Buttons carry no chrome: the rail is the design, the button is only there to
   make each step operable by keyboard and pointer. */
.strategy-rail-item button {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* The dot spans both rows so the number and name sit beside it. */
    grid-template-areas:
        "dot num"
        "dot name";
    align-items: center;
    column-gap: 18px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.strategy-rail-dot {
    grid-area: dot;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    /* Hollow while resting, filled when active — the ring is always there so
       the dot does not change size and shift the row. */
    border: 1px solid rgba(255, 255, 255, 0.45);
    background-color: transparent;
    transition: background-color 0.35s ease, border-color 0.35s ease,
                box-shadow 0.35s ease;
}

.strategy-rail-num {
    grid-area: num;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.35s ease;
}

.strategy-rail-name {
    grid-area: name;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.25;
    /* Resting steps are dimmed rather than hidden: the reader can see where the
       section is going and where it has been. */
    color: rgba(255, 255, 255, 0.34);
    transition: color 0.35s ease;
}

.strategy-rail-item.is-active .strategy-rail-dot {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 5px rgba(79, 198, 224, 0.16);
}

.strategy-rail-item.is-active .strategy-rail-num {
    color: var(--color-accent);
}

.strategy-rail-item.is-active .strategy-rail-name {
    color: #ffffff;
}

/* Hover only lifts a resting step part of the way, so it never reads as active. */
.strategy-rail-item:not(.is-active) button:hover .strategy-rail-name {
    color: rgba(255, 255, 255, 0.62);
}

.strategy-rail-item:not(.is-active) button:hover .strategy-rail-dot {
    border-color: rgba(255, 255, 255, 0.8);
}

.strategy-rail-item button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 6px;
}

/* --- the panels --- */
.strategy-panels {
    position: relative;
}

/* Before the script runs the panels are simply stacked and all visible. */
.strategy-panel + .strategy-panel {
    margin-top: 46px;
}

/* Once enhanced they are layered on one another and only the active one shows,
   so the section holds a single panel's height and the copy swaps in place. */
.strategy-stepper.is-enhanced .strategy-panels {
    display: grid;
}

.strategy-stepper.is-enhanced .strategy-panel {
    grid-area: 1 / 1;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
    /* Nothing in a hidden panel should be tabbable or hit-testable. */
    pointer-events: none;
}

.strategy-stepper.is-enhanced .strategy-panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* The oversized numeral behind the copy. Sits at the top-right of the panel and
   is clipped by nothing — it is deliberately allowed to run large and faint. */
.strategy-panel-ghost {
    position: absolute;
    top: -46px;
    right: 0;
    z-index: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 200px;
    line-height: 1;
    letter-spacing: -0.02em;
    /* Barely above the ground: it is texture, not information. */
    color: rgba(255, 255, 255, 0.05);
    pointer-events: none;
    user-select: none;
}

/* Everything else in the panel sits above the numeral. */
.strategy-panel > *:not(.strategy-panel-ghost) {
    position: relative;
    z-index: 1;
}

.strategy-panel-title {
    margin-bottom: 16px;
    font-size: 34px;
    line-height: 42px;
    color: #ffffff;
}

.strategy-panel p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
}

.strategy-panel p strong {
    font-weight: 700;
    color: #ffffff;
}

/* --- the figures under each panel --- */
.strategy-panel-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}

.strategy-panel-stats li {
    flex: 1 1 0;
    min-width: 150px;
    padding: 0 26px;
}

.strategy-panel-stats li:first-child {
    padding-left: 0;
}

/* Hairline between figures rather than boxes around them. */
.strategy-panel-stats li + li {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.strategy-stat-value {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 26px;
    line-height: 34px;
    color: var(--color-accent);
}

.strategy-stat-label {
    display: block;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.68);
}

/* Strengthen / growing / reimagine — the blue keywords in the report. */
.strategy-pillar-accent {
    color: var(--color-accent) !important;
}

.strategy-pillars-outro {
    margin-top: 50px;
}

.strategy-pillars-outro p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
}

/* Two-column chart grid closing out the dark spread. */
/* Bottom padding closes the dark field itself — the pager sits on white, so
   the section cannot simply run to its edge. */
.strategy-charts {
    padding: 60px 0 30px;
    background-color: var(--color-dark);
}

/* Grid rules as drawn in the report: one continuous vertical between the two
   columns and a horizontal under each row.

   The rules live on the COLUMN, not the figure. A border on the figure stops at
   the figure's own edge, so the horizontals fell short of the centre spine and
   left a visible gap where the two should meet. Bordering the column instead
   carries each rule across the gutter to the spine, so the grid closes.

   Bootstrap puts half the gutter as padding inside each column, so the bottom
   border sits hard against that padding; the figure carries the breathing room
   above it instead, keeping the rule clear of the artwork on both sides. */
.strategy-charts .col-lg-6 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

/* Spine: the left column's right edge, drawn on the column so it runs the full
   height of the row and meets every horizontal. */
.strategy-charts .col-lg-6:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.22);
}

/* Nothing follows the last row, so it closes without a rule. */
.strategy-charts .col-lg-6:nth-last-child(-n+2) {
    border-bottom: 0;
}

/* Gap on both sides of every horizontal — above it from the figure's own bottom
   padding, below it from the next column's top padding. */
.strategy-chart {
    height: 100%;
    padding: 0 26px 46px;
}

.strategy-charts .col-lg-6:nth-child(n+3) .strategy-chart {
    padding-top: 46px;
}

/* The SVGs carry their own titles and units, so no caption is rendered here.
   Capped below the column width — at full width the artwork reads far larger
   than it does in the report. */
.strategy-chart img {
    display: block;
    width: 100%;
    max-width: 500px;
    height: auto;
    margin: 0 auto;
}
/*-----------Delivering Our Strategy Page Css End-------------*/

/*-----------About Northern Arc Capital Limited Page Css Start-------------*/
/* Intro paragraphs run the full container width — no inner column wrapper. */
.about-intro {
    /* padding: 40px 0 0; */
    background-color: #ffffff;
}

.about-intro-text p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

.about-intro-text p + p {
    margin-top: 14px;
}

/* The report's narrow left column, run here as full-width blocks. */
.about-strengths {
    padding: 40px 0 0;
    background-color: #ffffff;
}

.about-strength + .about-strength {
    margin-top: 24px;
}

.about-strength-title {
    margin-bottom: 10px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-accent);
}

.about-strength p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

.about-na-key-highlights {
    padding: 40px 0 0;
    background-color: #ffffff;
}

.about-na-key-highlights-title {
    margin-bottom: 20px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-accent);
}

.about-na-key-highlights-grid {
    row-gap: 24px;
}

.about-na-key-highlight {
    height: 100%;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--color-dark);
}

.about-na-key-highlight-value {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    color: var(--color-dark);
}

.about-na-key-highlight-label {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}

/* Vision on the left, Mission on the right. */
.value-system {
    padding: 40px 0 0;
    background-color: #ffffff;
}

.value-system-title {
    margin-bottom: 20px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-accent);
}

.value-system-heading {
    margin-bottom: 12px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    color: var(--color-dark);
}

.value-system-block p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

/* The ecosystem diagram now rides in the banner rather than as a section of
   its own: title on the left, diagram on the right, the two vertically
   centred against each other. The banner is the bannerless .mi-banner
   variant, so its height comes from this row. */
.about-banner-row {
    row-gap: 30px;
}

.about-banner-img img {
    display: block;
    width: 100%;
    max-width: 620px;
    height: auto;
    margin-left: auto;
}

/* The shared .mi-banner bottom padding is sized for a lone h1; the diagram
   needs its own breathing room below. */
.about-banner .ib-content {
    padding-right: 20px;
}

.about-banner {
    padding-bottom: 30px;
}

.our-values {
    padding: 40px 0 0;
    background-color: #ffffff;
}

.our-values-title {
    margin-bottom: 20px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-accent);
}

.our-values-grid {
    row-gap: 22px;
}

.our-value-name {
    margin-bottom: 6px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-dark);
}

.our-value p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

/* Blue box closing the page. */
.our-beliefs {
    padding: 40px 0 30px;
    background-color: #ffffff;
}

.our-beliefs-inner {
    padding: 40px;
    background-color: var(--color-accent);
}

.our-beliefs-title {
    margin-bottom: 20px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-dark);
}

.our-beliefs-grid {
    row-gap: 24px;
}

/* Arrow marker beside each point, with the rule under it from the report. */
.our-belief {
    display: flex;
    gap: 10px;
    height: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-dark);
}

/* Optically centred against the first line of copy — the 24px line box less
   the 16px glyph, halved. */
.our-belief-icon {
    flex-shrink: 0;
    margin-top: 4px;
    line-height: 0;
}

.our-belief-icon img {
    display: block;
    width: 18px;
    height: auto;
}

.our-belief p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}
/*-----------About Northern Arc Capital Limited Page Css End-------------*/

/*-----------Efficient and Scalable Business Model Page Css Start-------------*/
.bm-credit-solutions {
    /* padding: 40px 0 0; */
    background-color: #ffffff;
}

/* This page carries its own banner bottom padding: the h1 sits directly
   above the "Credit Solutions" heading, so the shared 30px is dropped and the
   40px under the banner does the separating on its own. */
.bm-banner {
    padding-bottom: 0;
}

/* "Credit Solutions" / "Direct-To-Customer lending" — the black section
   headings on this spread. */
.bm-section-title {
    margin-bottom: 24px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    color: var(--color-dark);
}

.bm-intro {
    margin-bottom: 40px;
}

.bm-intro-title {
    margin-bottom: 10px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-accent);
}

.bm-intro p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

.bm-intro p + p {
    margin-top: 16px;
}

.bm-stats-grid {
    row-gap: 30px;
}

.bm-stat {
    height: 100%;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--color-dark);
}

.bm-stat-value {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 30px;
    line-height: 32px;
    color: var(--color-dark);
}

.bm-stat-label {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}

/* Credit continuum hub-and-spokes. */
.credit-continuum {
    padding: 70px 0 0;
    background-color: #ffffff;
}

.credit-continuum-title {
    margin-bottom: 40px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-dark);
}

/* Supplied artwork carries the hub, spokes, icons and copy as one piece, so
   the section only has to size and centre it. Wider than the ecosystem
   diagram — the spoke copy needs the room to stay legible. */
.credit-continuum-img img {
    display: block;
    width: 100%;
    max-width: 1000px;
    height: auto;
    margin: 0 auto;
}

.bm-d2c {
    padding: 40px 0 0;
    background-color: #ffffff;
}

/* Customer base matrix. */
/* The matrix already reserves 40px below itself for the overhanging AUM
   boxes, so this section adds none of its own — the page still ends with the
   same clear gap as every other. */
.customer-base {
    padding: 70px 0 0;
    background-color: #ffffff;
}

/* The bracket spans the MSME and Rural column centres — 34.6% and 86.9% of
   the matrix — so its own midpoint is 60.75%, not 50%. The caption is centred
   on that midpoint rather than on the section, which is what puts it between
   the two arms. */
.customer-base-heading {
    position: relative;
    margin-bottom: 30px;
    text-align: center;
}

/* Two opposed L shapes: a horizontal arm level with the caption, turning down
   into a riser at each outer end. */
.customer-base-heading:before,
.customer-base-heading:after {
    content: "";
    position: absolute;
    top: 50%;
    height: 30px;
    border-top: 1px solid var(--color-dark);
}

.customer-base-heading:before {
    left: 34.6%;
    right: 39.25%;
    border-left: 1px solid var(--color-dark);
}

.customer-base-heading:after {
    left: 60.75%;
    right: 13.1%;
    border-right: 1px solid var(--color-dark);
}

/* Centred on the bracket's midpoint (60.75%) rather than the section's, and
   sitting above the arms so they appear to stop at the words. */
.customer-base-heading-text {
    position: relative;
    z-index: 1;
    left: 10.75%;
    display: inline-block;
    padding: 0 20px;
    background-color: #ffffff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-dark);
}

/* Hairline gaps between the segment columns, plus bottom room for the AUM
   boxes that hang past the columns. */
.customer-base-matrix {
    display: flex;
    gap: 8px;
    padding-bottom: 40px;
    overflow-x: auto;
}

/* Narrower than before, matching the report's proportions. */
.cb-col {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 170px;
}

/* No photo and no grey strip here — the label column starts level with the
   first data row, so those two cells are transparent spacers. Proportional
   rather than fixed, so the bracket percentages above hold at any width. */
.cb-col--labels {
    flex: 0 0 21.5%;
    min-width: 190px;
}

.cb-cell--spacer-media {
    height: 193px;
    padding: 0;
}

.cb-cell--spacer-segment {
    min-height: 60px;
}

.cb-cell--spacer-aum {
    min-height: 78px;
}

.cb-cell {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.cb-cell--media {
    height: 193px;
    padding: 0;
}

.cb-cell--media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Grey strip naming each segment — segment columns only. */
.cb-cell--segment {
    justify-content: center;
    min-height: 60px;
    background-color: #c9c9c9;
    font-weight: 700;
    color: var(--color-dark);
}

/* Row labels are separated by a light blue rule, not a solid border. */
.cb-cell--label {
    gap: 12px;
    min-height: 80px;
    border-bottom: 1px solid #9fdcec;
}

.cb-col--labels .cb-cell--label:last-of-type {
    border-bottom: 0;
}

.cb-label-icon {
    flex-shrink: 0;
    line-height: 0;
}

.cb-label-icon img {
    display: block;
    width: 30px;
    height: 30px;
}

/* Same rule inside the filled columns, so every row reads across. */
.cb-cell--value {
    min-height: 80px;
    border-bottom: 1px solid #ffffff;
}

/* The last value row runs straight into the AUM block, so no divider. */
.cb-cell--value:last-of-type {
    border-bottom: 0;
}

.cb-cell--figure {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 30px;
    line-height: 34px;
}

/* The AUM box overlaps the fill above it rather than sitting in a gap — the
   cell keeps the column colour and the box is pulled up over the boundary. */
/* The fill stops here; the grey box below straddles that bottom edge, so the
   cell must not clip it. */
.cb-cell--aum {
    position: relative;
    justify-content: center;
    align-items: flex-start;
    min-height: 60px;
    padding: 0 12%;
    overflow: visible;
}

/* Half inside the coloured column, half hanging below it — pulled down by
   half its own height. */
.cb-aum-box {
    position: absolute;
    bottom: -34px;
    left: 12%;
    right: 12%;
    padding: 16px 10px;
    background-color: #c9c9c9;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: var(--color-dark);
    text-align: center;
}

/* Three fills, darkest to lightest. Only the darkest needs white text; the
   lighter two keep the dark body colour. */
.cb-col--msme .cb-cell--value,
.cb-col--msme .cb-cell--aum {
    background-color: #4fc6e0;
    color: #ffffff;
}

.cb-col--consumer .cb-cell--value,
.cb-col--consumer .cb-cell--aum {
    background-color: #8ed8e9;
    color: var(--color-dark);
}

.cb-col--rural .cb-cell--value,
.cb-col--rural .cb-cell--aum {
    background-color: #d6eef6;
    color: var(--color-dark);
}

/* A white divider would vanish on the lightest fill, so it goes blue. */
.cb-col--rural .cb-cell--value {
    border-bottom-color: #7ac7de;
}
/*-----------Efficient and Scalable Business Model Page Css End-------------*/
/*-----------ESG Focus Css End-------------*/
/* The h1 sits directly above the intro paragraph, so the banner drops its
   shared 30px bottom padding and the 40px under the banner does the
   separating on its own. */
.ee-banner {
    padding-bottom: 0;
}

.enhacingcsdtail{
    padding: 0;
}

/* The pager carries 50px of its own padding on every page; here the last
   chart already clears 20px, so it is trimmed to keep the 50px step the rest
   of the page runs on. */
.enhacingcsdtail + .page-pager {
    padding-top: 30px;
}

/* One vertical step for the whole page. The shared .cs-note-title (30px top),
   .cs-text (15px bottom) and .cs-graph (30px top and bottom) values meet in
   different combinations down the page, so the gaps came out at 45px, 55px,
   60px and 70px. Scoped to this section, the values below settle every gap on
   50px above a heading and 40px between a copy block and the chart under it. */
.enhacingcsdtail .cs-graph {
    padding-top: 25px;
    margin-bottom: 20px;
}

/* The intro section already clears 40px, so the first heading adds only the
   remaining 10px instead of a second full step. */
.enhacingcsdtail > .container > .row:first-child .cs-note-title {
    margin-top: 10px;
}

.enhacingcsdtail .cs-graph-pair {
    margin-top: 5px;
}

/* Titles inside the pair label their own chart rather than the section, so
   they sit tight to it. The untitled column keeps its 66px offset: both charts
   drop the same padding, so the two plots stay on a common top edge. */
.enhacingcsdtail .cs-graph-pair .cs-graph {
    padding-top: 0;
}
/* The six pie SVGs are Illustrator exports with their legends baked in, each
   on a differently sized artboard (206x231 up to 301x240) with different
   padding around the donut. Sizing the box alone still left the rings
   themselves up to 17% apart, so each image is given a common box and then
   scaled by the ratio its own ring needs to match the others. */
.csgphimgcls img{
    width: 100%;
    height: 230px;
    object-fit: contain;
    object-position: center top;
}

/* Ring diameters measured at a common render height: 284, 243, 273, 272, 251
   and 264 units respectively. Each factor below brings its chart to ~264. */
.csgphimgcls img[src*="82-customers-pie"]          { transform: scale(0.930); }
.csgphimgcls img[src*="average-ticket-size"]       { transform: scale(1.086); }
.csgphimgcls img[src*="68-of-customers-with-bureau"] { transform: scale(0.967); }
.csgphimgcls img[src*="aum-mix-by-state"]          { transform: scale(0.971); }
.csgphimgcls img[src*="76-of-book-has-ltvbelow-60"] { transform: scale(1.052); }
.csgphimgcls img[src*="focussing-self-employed"]   { transform: scale(1.000); }
.bignpos{
    font-size: 36px;
    line-height: 36px;
    color: var(--color-accent);
    padding: 10px 0px;
}
.inner-banner:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: transparent linear-gradient(90deg, rgba(232, 238, 248, 0.85) 0%, rgba(232, 238, 248, 0.65) 50%, rgba(232, 238, 248, 0.25) 57%, rgba(232, 238, 248, 0) 65%) 0% 0% no-repeat padding-box;
}
/* The copy sits straight on the photograph on these four, so the pale wash the
   other inner pages use is replaced with a dark scrim running from the left
   edge and fading out by the centre. That is the half the text occupies — the
   right half of the photograph stays untouched. Overriding the shared gradient
   here rather than globally leaves the other inner pages as they were. */
.d2c-banner:before,
.rm-banner:before,
.powering-banner:before,
.future-banner:before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0) 60%);
}

/* With the wash gone the copy sits straight on the photograph, so every piece
   of banner text goes white — breadcrumb, eyebrow and title alike. Same
   treatment .strategy-banner already uses. Scoped to the four full-screen photo
   banners: the .mi-banner pages have no photo behind them and keep dark text.

   The banner content and the breadcrumb sit in separate blocks, so the rules
   below cover the section as a whole rather than the heading alone. */
.d2c-banner .ib-breadcrumb ul li,
.d2c-banner .ib-breadcrumb ul li a,
.rm-banner .ib-breadcrumb ul li,
.rm-banner .ib-breadcrumb ul li a,
.powering-banner .ib-breadcrumb ul li,
.powering-banner .ib-breadcrumb ul li a,
.future-banner .ib-breadcrumb ul li,
.future-banner .ib-breadcrumb ul li a,
.d2c-banner .ib-eyebrow,
.rm-banner .ib-eyebrow,
.powering-banner .ib-eyebrow,
.future-banner .ib-eyebrow,
.d2c-banner h1,
.rm-banner h1,
.powering-banner h1,
.future-banner h1 {
    color: #ffffff;
}

/* Breadcrumb links keep a visible hover state against the photo. */
.d2c-banner .ib-breadcrumb ul li a:hover,
.rm-banner .ib-breadcrumb ul li a:hover,
.powering-banner .ib-breadcrumb ul li a:hover,
.future-banner .ib-breadcrumb ul li a:hover {
    color: var(--color-accent);
}

.oneLogo img {
    max-width: 180px;
}
.pdbtm15{
    padding-bottom: 15px;

}

/*-----------Split Banner Css Start-------------*/
/* Banner variant: copy in the left half, photo in the right, instead of the
   photo running full-bleed behind the text. The section no longer carries the
   background image or the readability wash — the photo is a real element in
   its own column, so nothing sits on top of it. */
/* .sitemap sits absolute at 105px, so the row starts below it. */
.split-banner {
    height: auto;
    min-height: 0;
    /* margin-bottom: 40px; */
    padding-top: 150px;
    background-image: none;
    background-color: #ffffff;
    overflow: visible;
}

/* No wash: with the copy beside the photo rather than over it, there is
   nothing to darken for legibility. */
.split-banner:before {
    display: none;
}

/* The breadcrumb keeps the shared .sitemap treatment — absolutely positioned
   at the top of the section, spanning the full container, exactly as on every
   other page. Only the section's own top padding changes, to clear it. */
/* No gutter: the copy and the photo each sit on the container's own edges, so
   the heading lines up with the breadcrumb above and the body copy below, and
   the photo's bleed is measured from a known edge. */
.split-banner .split-banner-row {
    --bs-gutter-x: 0;
    min-height: 480px;
}

/* Copy sits clear of the photo beside it. */
.split-banner .ib-content {
    max-width: 560px;
    padding-right: 40px;
}

/* Every split banner sizes to its own photo rather than stretching to the row.
   The four pages share a col-lg-6, so they already span the same width; taking
   the image's ratio instead of a 500px stretch is what makes them read as the
   same banner from page to page. 16/9 is the default because three of the four
   photos are 1920x1080 — our-future overrides it below with its own ratio. */
.split-banner-media {
    position: relative;
    align-self: center;
    min-height: 0;
    aspect-ratio: 16 / 9;
}

/* The photo stays inside the container, exactly like the portrait on the two
   letter pages — no bleed past the grid. The old bleed was measured off the
   viewport and had to be re-derived at every container step, which is what
   made the banner overflow on wide and mid-size screens. */
/* The photo stays inside the container, exactly like the portrait on the two
   letter pages — no bleed past the grid. That bleed was measured off the
   viewport and had to be re-derived at every container step, which is what
   made the banner overflow on very wide and mid-size screens. */

.split-banner-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* This photo is 750x480, not the 1920x1080 the other three are, so it takes its
   own ratio instead of the shared 16/9 — the group of five is the subject and a
   16/9 box would crop the outer two out of it. Named .future-split-banner:
   .future-banner is taken by the older full-bleed background treatment of this
   same section. */
.future-split-banner .split-banner-media {
    aspect-ratio: 750 / 480;
}

.future-split-banner .split-banner-media img {
    object-fit: contain;
}
/*-----------Split Banner Css End-------------*/

/*-----------Letter Banner: full-screen treatment Start-------------*/
/* Full-screen banner, matching the four photo banners on the other inner pages.
   The backdrop runs edge to edge as the section's own background and the
   cut-out portrait stands over it, rather than both being boxed into a
   half-width column. */
.letter-banner {
    height: 100vh;
    min-height: 0;
    padding-top: var(--header-height);
    padding-bottom: 0;
    background-image: url(../images/chairman-bg-img.webp);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.ceo-letter-banner {
    background-image: url(../images/md-ceo-bg-img.webp);
}

/* Dark scrim from the left edge fading out by the centre, the same treatment
   the other full-screen banners use — it carries the white copy on the left
   while the portrait on the right stays clear of it. */
/* This section is .chairman-letter, not .inner-banner, so it has no shared
   overlay to override — the scrim element is declared in full here. */
.letter-banner:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0) 60%);
}

/* The scrim above is z-index 1, so the content is lifted over it — without
   this the gradient would cover the copy and the portrait. The breadcrumb's
   .sitemap already sits at z-index 3. */
.letter-banner > .container {
    position: relative;
    z-index: 2;
}

/* The row fills the banner so the copy centres against the full height and the
   portrait can stand on the bottom edge. */
.letter-banner .letter-banner-row {
    min-height: calc(100vh - var(--header-height));
}

/* Copy centres in the full-height column; the 100vh floor from the base rule
   would double-count the header clearance the section already applies. */
.letter-banner .chairman-letter-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    padding-top: 0;
    padding-right: 40px;
}

/* The backdrop is the section's background now, so this column carries only the
   portrait — no box, no ratio, no background of its own. It runs the full height
   of the banner with the portrait standing on its bottom edge.

   The flex item here is the Bootstrap column, not .chairman-img inside it, so
   the row's .align-items-center centres the column and no amount of alignment
   on the inner div reaches the bottom edge. The column is stretched instead,
   and its gutter padding removed, so the portrait stands on the banner's true
   bottom edge. */
.letter-banner .letter-banner-row > [class*="col-"]:last-child {
    align-self: stretch;
    display: flex;
    padding-bottom: 0;
}

/* The cut-outs are cropped tight to the top of the head — there is no headroom
   inside the file — so whenever one is tall enough to fill this column it runs
   straight up under the fixed header. The top padding reserves that headroom
   here instead, and the portrait still sits on the bottom edge below it. */
.letter-banner .chairman-img {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    min-height: 0;
    height: 100%;
    padding-top: 60px;
    aspect-ratio: auto;
    background-image: none;
}

/* Sized from the column width, then held inside the padded box above so the
   head cannot reach the header. Whichever limit bites first wins, and the
   proportions are kept either way. */
.letter-banner .chairman-img img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

/* Banner copy sits on the photograph, so every piece of text goes white — the
   breadcrumb above and the title and quote below it. */
.letter-banner .ib-breadcrumb ul li,
.letter-banner .ib-breadcrumb ul li a {
    color: #ffffff;
}

.letter-banner .ib-breadcrumb ul li a:hover {
    color: var(--color-accent);
}

/* Everything on the photograph is white — breadcrumb, title and quote alike.
   The blue was legible over the scrim but sat oddly against the white
   breadcrumb directly above it; one colour reads as one block of copy. */
.letter-banner .chairman-letter-title,
.letter-banner .chairman-letter-text p {
    color: #ffffff;
}

/* The comma is a flat dark SVG loaded as an <img>, so `color` cannot reach it —
   brightness(0) flattens it to black and invert(1) turns that white. */
.letter-banner .chairman-quote-icon img {
    filter: brightness(0) invert(1);
}

/* Below the desktop breakpoint the columns stack, so the portrait no longer has
   a column beside it to balance — it takes its own height rather than the
   viewport's, and the section grows with its content. */
@media (max-width: 1199px) {
    /* No bottom padding: the portrait is the last thing in the stack and has to
       stand on the banner's bottom edge, not float above a strip of backdrop. */
    .letter-banner {
        height: auto;
        padding-bottom: 0;
    }

    .letter-banner .letter-banner-row {
        min-height: 0;
    }

    /* The column's own gutter padding would lift the portrait off the edge the
       same way the section padding did. */
    .letter-banner .letter-banner-row > [class*="col-"]:last-child {
        padding-bottom: 0;
    }

    .letter-banner .chairman-img {
        padding-top: 30px;
    }

    /* The stacked column has no height to fill, so the portrait returns to its
       own intrinsic height — height:100% would collapse it here. Bottom-aligned
       and flush, so it reads as standing on the banner rather than floating. */
    .letter-banner .chairman-img img {
        display: block;
        height: auto;
        max-height: 70vh;
        margin: 0 auto -1px;
    }
}

/* Above Bootstrap's last breakpoint .container stops growing at 1320px, so from
   1400px up the copy and portrait stayed frozen at that width while the banner
   kept widening — on a 2560 or ultrawide screen the copy was stranded in the
   upper left and the portrait sat small and low in a mostly empty frame. The
   container is allowed to keep scaling with the viewport here, and the portrait
   is sized from viewport height so it grows with the banner rather than staying
   at its intrinsic pixel size. */
@media (min-width: 1400px) {
    .letter-banner > .container,
    .letter-banner .sitemap > .container {
        max-width: min(92vw, 2200px);
    }

    .letter-banner .chairman-letter-text {
        padding-right: 60px;
    }

    /* The title and quote were set for a 1320px container; at twice that width
       they read as small print against the portrait beside them. Both scale
       with the viewport and are capped so they stop growing on the widest
       screens. The quote's own 560px cap has to lift too, or the wider column
       would have no effect on it. */
    .letter-banner .chairman-letter-title {
        font-size: clamp(36px, 2.6vw, 60px);
        line-height: 1.18;
    }

    .letter-banner .chairman-letter-text p {
        max-width: 46ch;
        font-size: clamp(18px, 1.15vw, 26px);
        line-height: 1.5;
    }

    .letter-banner .chairman-quote-icon img {
        width: clamp(34px, 2.2vw, 52px);
    }

    /* Grows with the banner instead of sitting at its natural 636px. The cap
       keeps it from outrunning the source file and going soft. */
    .letter-banner .chairman-img img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: min(88vh, 1000px);
        margin-left: auto;
        margin-right: 0;
    }
}

/* Ultrawide: the 16:9 backdrop loses about a quarter of its height to `cover`
   once the banner is wider than 2:1, which cuts the top out of the scene. The
   banner is capped in height there so the frame stays nearer the image's own
   proportions and the crop comes off the sides, where there is nothing to
   lose, rather than off the top. */
@media (min-aspect-ratio: 2/1) and (min-width: 1400px) {
    .letter-banner {
        height: auto;
        min-height: min(100vh, 56.25vw);
    }

    .letter-banner .letter-banner-row {
        min-height: min(calc(100vh - var(--header-height)), calc(56.25vw - var(--header-height)));
    }
}
/*-----------Letter Banner: full-screen treatment End-------------*/

/*-----------D2C MSME tinted panel Start-------------*/
/* The branch-network map and the pie-chart grid below it sit on one blue field
   in the report, rather than on the page's white. The panel bleeds a little
   past the copy either side so the charts are not cramped against its edge. */
/* The tint runs edge to edge while the content inside stays on the grid: the
   panel is pulled out to the viewport on both sides and the same amount is
   given back as padding. */
.d2c-msme-panel {
    margin: 10px calc(50% - 50vw) 30px;
    padding: 34px calc(50vw - 50%) 26px;
    background-color: var(--color-accent);
}

/* On the tint, the rules under each chart title need to read against blue
   rather than white. The titles wrap to one or two lines depending on their
   length, so a min-height holds every underline on the same baseline across
   the row instead of stepping with the text. */
.d2c-msme-panel .cs-graph-title {
    border-bottom-color: rgba(35, 31, 32, 0.35);
}

.d2c-msme-panel .row .cs-graph-title {
    display: flex;
    align-items: flex-start;
    min-height: 32px;
}

.d2c-msme-panel .cs-graph {
    margin-bottom: 22px;
}

/* Pie charts are narrower than their column, so they are centred under their
   title rather than left against its start. */
.d2c-msme-panel .row .cs-graph img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/*-----------D2C MSME tinted panel End-------------*/

/*-----------Enhancing Efficiency: text/graph split Start-------------*/
/* "Improving operating efficiencies" runs its copy beside the graph rather
   than above it. The split holds from lg up; below that the two stack, and the
   graph is capped so it does not render far larger than it does in the report. */
/* Copy and chart start on a common top edge. The rows used to carry
   .align-items-center, which centred the shorter column against the taller one
   and pushed one of them down by 35-71px, opening a hole at the top of the
   row; the chart also loses its 30px top padding so its baked-in title lines up
   with the first line of copy beside it. */
.cs-note-split .cs-graph {
    margin-bottom: 0;
    padding-top: 0;
}

/* Consecutive splits (Net NPA runs two, alternating sides) need a gap between
   the rows, which the zeroed graph margin above would otherwise remove. */
.cs-note-split + .cs-note-split {
    margin-top: 30px;
}

/* The two funding/productivity graphs sit side by side under their shared
   copy. Both columns stretch to the taller of the pair, so the two graphs sit
   on a common top edge whatever their titles wrap to. */
.cs-graph-pair {
    margin-top: 10px;
    align-items: stretch;
}

.cs-graph-pair > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

/* Titles here label an individual graph rather than the section, so they sit
   tighter to the artwork than the section-level ones do. */
.cs-graph-pair .cs-note-title {
    margin-bottom: 10px;
}

/* Only the first column carries a title, so the untitled graph is pushed down
   by the height that title occupies — its own 26px plus the margins above and
   below it — to keep the two plots on a common top edge. */
.cs-graph-pair > [class*="col-"]:last-child .cs-graph {
    margin-top: 66px;
}

/* Top-aligned rather than centred: the two SVGs have different intrinsic
   ratios, so centring them in equal-height columns would offset their plots
   from each other. */
.cs-graph-pair .cs-graph {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
}

.cs-graph-pair .cs-graph img {
    width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    /* Stacked, the chart no longer has copy beside it to line up with, so the
       breathing room the zeroed padding used to give it comes back as margin. */
    .cs-note-split .cs-graph {
        margin-top: 40px;
    }
    .cs-note-split .cs-graph img {
        max-width: 560px;
        margin: 0 auto;
    }
    /* Stacked: copy following a graph needs the gap the side-by-side layout
       got from the column gutter. */
    .cs-note-split .cs-graph + .cs-text,
    .cs-note-split [class*="col-"] + [class*="col-"] .cs-text {
        margin-top: 20px;
    }

    /* Once the pair stacks there is no neighbour to line up with, so the
       offset that held the untitled graph level on desktop is dropped and each
       graph takes its natural height one under the other. */
    .cs-graph-pair > [class*="col-"] + [class*="col-"] {
        margin-top: 24px;
    }

    .cs-graph-pair > [class*="col-"]:last-child .cs-graph {
        margin-top: 0;
    }

    .cs-graph-pair .cs-graph {
        display: block;
        flex: 0 0 auto;
    }
}
/*-----------Enhancing Efficiency: text/graph split End-------------*/

/*-----------Evolution Journey (arc timeline) Css Start-------------*/
/* Milestones ride a wide, shallow arc with the centred one opened below it.
   js/journey.js positions the points and rotates the arc a notch per step. */
/* Deep navy is the ground, charcoal sits under it as a weighted base, and the
   accent cyan is spent only on the open milestone. Holding the cyan back to
   one element per screen is what makes it read as "lit": the years, arc and
   copy are all white at varying strength, so the eye lands on the one thing
   carrying colour. */
.journey-section {
    /* The whole scheme is driven from here — the four colours the section is
       allowed to use, so retuning it means editing this block and nothing else. */
    --journey-navy: #16496b;
    --journey-charcoal: #231f20;
    --journey-lit: var(--color-accent);
    --journey-ink: #ffffff;
    /* White at the strengths the field needs: body copy, resting years/arc,
       and the faint rules. Kept as steps of one colour rather than separate
       greys so nothing drifts off-hue against the navy. */
    --journey-ink-soft: rgba(255, 255, 255, 0.86);
    --journey-ink-muted: rgba(255, 255, 255, 0.6);
    --journey-ink-faint: rgba(255, 255, 255, 0.28);

    position: relative;
    overflow: hidden;
    /* Fills the viewport, with the heading and arc centred in whatever height
       is left over. min-height rather than height so a short viewport still
       grows to hold the content instead of clipping it. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px 0 40px;
    /* Charcoal underneath the navy, so the section sinks at the edges and the
       centre — where the arc and the open milestone sit — stays the brightest
       part of the field. */
    background-color: var(--journey-navy);
    background-image: radial-gradient(
        118% 82% at 50% 34%,
        var(--journey-navy) 0%,
        var(--journey-navy) 42%,
        #123b58 72%,
        var(--journey-charcoal) 100%
    );
    color: var(--journey-ink);
}

.journey-inner {
    position: relative;
    z-index: 1;
}

.journey-title {
    margin-bottom: 26px;
    font-size: 36px;
    line-height: 44px;
    text-align: center;
    color: var(--journey-ink);
}

/* "diversified credit enabler" is the phrase the heading is about, so it takes
   the cyan and the rest of the line stays white. */
.journey-title span {
    display: block;
    color: var(--journey-lit);
}

/* Sits in the centre of the arc, under the open milestone's copy, set down far
   enough that it reads as its own step rather than as another line of it. */
.journey-cta {
    margin-top: 34px;
    text-align: center;
}

/* The shared button is a white chip with cyan type, which on this navy would
   read as a bright block competing with the open milestone. Scoped to this
   section it reverses: cyan type on the ground, boxed in cyan, filling solid
   on hover. The global .btn-readmore is left alone for the rest of the site. */
/* Also stepped down a size from the site-wide button: here it sits under three
   short lines of copy in the open middle of the arc, and at the full size it
   was the heaviest mark in the section, pulling ahead of the milestone it
   belongs to. */
.journey-cta .btn-readmore {
    padding: 11px 22px;
    gap: 12px;
    font-size: 15px;
    background-color: transparent;
    border: 2px solid var(--journey-lit);
    border-bottom: 2px solid var(--journey-lit);
    color: var(--journey-lit);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.journey-cta .btn-readmore-arrow {
    width: 22px;
}

.journey-cta .btn-readmore:hover {
    background-color: var(--journey-lit);
    border-color: var(--journey-lit);
    color: var(--journey-navy);
}

/* The source list is only there for readers without the script. */
.journey-source[hidden] {
    display: none;
}

/* --- the track --- */
.journey-timeline {
    position: relative;
    width: 100%;
    /* A floor only: journey.js measures the milestone with the most copy and
       raises this to fit it, so the longest title is never cut off and the
       track does not change height as the years are stepped through. */
    min-height: 300px;
    overflow: hidden;
    outline: none;
    touch-action: pan-y;
}

/* A circle far larger than the track: only its crown is on screen, which is
   what makes the curve read as a shallow arc rather than a ring. */
.journey-arc {
    position: absolute;
    /* Faint on the navy: the arc is the track the years ride, not a feature in
       its own right, so it sits well below them in strength. */
    border: 4px dotted var(--journey-ink-faint);
    border-radius: 50%;
    pointer-events: none;
}

/* Drops from the apex down to the open milestone — cyan, because it belongs to
   the open milestone rather than to the track. */
.journey-connector {
    position: absolute;
    left: 50%;
    top: 70px;
    height: 88px;
    border-left: 4px dotted rgba(79, 198, 224, 0.75);
}

.journey-point {
    position: absolute;
    transform: translate(-50%, -50%);
}

/* The year sits above its dot and is tilted to the arc tangent by the script. */
.journey-label {
    position: absolute;
    left: 0;
    bottom: 20px;
    transform-origin: bottom center;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font-heading);
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0.01em;
    /* Resting years are held well back: the open one takes the cyan, so the
       separation here comes from both hue and brightness rather than from
       brightness alone. */
    color: var(--journey-ink-muted);
    transition: color 0.35s ease;
    will-change: transform, opacity;
}

.journey-point.is-active .journey-label {
    font-weight: 700;
    color: var(--journey-lit);
}

.journey-dot {
    position: absolute;
    left: -6px;
    top: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--journey-ink-muted);
    transition: background-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

/* The halo is cyan rather than white so the active dot reads as one lit mark
   instead of a coloured centre inside a white ring. */
.journey-point.is-active .journey-dot {
    background-color: var(--journey-lit);
    transform: scale(1.5);
    box-shadow: 0 0 0 7px rgba(79, 198, 224, 0.28);
}

/* --- the open milestone, sitting inside the arc --- */
.journey-stage {
    position: absolute;
    top: 170px;
    left: 50%;
    transform: translateX(-50%);
    width: min(980px, 94%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* The arrows are pinned to this box rather than sitting in the row, so the
   copy keeps the centre to itself and the arrows are free to move down to
   wherever the arc has cleared. */
.journey-detail {
    flex: 1 1 auto;
    min-height: 170px;
    /* room for an arrow plus its gap on either side, so long titles wrap
       before they reach one instead of running underneath it */
    padding: 0 78px;
    text-align: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.journey-detail.is-swapping {
    opacity: 0;
    transform: translateY(8px);
}

/* The SVGs are drawn in white, which is what this ground wants, so they sit
   bare on the field — no disc behind them to read as a white box. */
.journey-detail-icon {
    display: block;
    margin-bottom: 16px;
}

.journey-detail-icon img {
    width: 84px;
    height: 84px;
    object-fit: contain;
}

.journey-year {
    margin-bottom: 10px;
    font-family: var(--font-heading);
    font-size: 30px;
    line-height: 36px;
    letter-spacing: 0.04em;
    color: var(--journey-lit);
}

.journey-milestone-title {
    margin-bottom: 8px;
    font-size: 22px;
    line-height: 30px;
    text-transform: uppercase;
    color: var(--journey-ink);
}

.journey-milestone-text {
    max-width: 620px;
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    color: var(--journey-ink-soft);
}

/* --- arrows --- */
/* Outlined rather than filled, so they read as controls on the field instead
   of as white chips sitting on top of it.

   Taken out of the flex row and pinned to the track instead: as flex siblings
   of the copy their height came from a margin-top that had to be re-guessed at
   every breakpoint, and the guess put them on the dotted arc. journey.js now
   measures where the curve actually falls at each arrow's x and sets
   --journey-arrow-top so they clear it by the same gap at every width; the
   values here are the fallback for when the script has not run. */
.journey-arrow {
    position: absolute;
    top: var(--journey-arrow-top, 50%);
    width: var(--journey-arrow-size, 48px);
    height: var(--journey-arrow-size, 48px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--journey-ink-faint);
    background-color: transparent;
    color: var(--journey-ink-soft);
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, transform 0.2s ease;
}

/* Held against the ends of the stage, one on each side of the copy. */
.journey-arrow.is-prev {
    left: 0;
}

.journey-arrow.is-next {
    right: 0;
}

.journey-arrow svg {
    width: 20px;
    height: 20px;
}

/* Fills with the cyan on hover and the chevron reverses out to the navy, so
   the control picks up the same colour as the milestone it is stepping to. */
.journey-arrow:hover {
    background-color: var(--journey-lit);
    border-color: var(--journey-lit);
    color: var(--journey-navy);
}

.journey-arrow:active {
    transform: scale(0.94);
}

/* --- short viewports --- */
/* Keyed to viewport HEIGHT, not width: the squeeze here is vertical, and a
   1920x1080 screen at 150% zoom lands at roughly 1280x720 — wide enough to
   miss every width breakpoint while being 180px shorter than the layout was
   drawn for. The section is min-height:100vh and the track is sized to the
   tallest milestone, so at that height the copy filled the screen edge to
   edge with no air around it. Everything below trims vertical space only —
   no colour, no widths, nothing that changes the layout on a normal screen. */
@media (min-width: 992px) and (max-height: 820px) {
    .journey-section {
        padding: 28px 0 24px;
    }
    .journey-title {
        margin-bottom: 14px;
        font-size: 30px;
        line-height: 38px;
    }
    /* The years are the tallest thing on the arc; stepping them down is what
       buys back the most height. journey.js re-measures the track on resize,
       so the arc and the stage follow this automatically. */
    .journey-label {
        font-size: 32px;
    }
    .journey-connector {
        top: 58px;
        height: 66px;
    }
    .journey-stage {
        top: 132px;
    }
    .journey-detail-icon {
        margin-bottom: 10px;
    }
    .journey-detail-icon img {
        width: 60px;
        height: 60px;
    }
    .journey-year {
        margin-bottom: 6px;
        font-size: 26px;
        line-height: 30px;
    }
    .journey-milestone-title {
        font-size: 19px;
        line-height: 26px;
    }
    .journey-cta {
        margin-top: 35px;
    }
}

/* Shorter still (~700px and under): the same dial turned one notch further. */
@media (min-width: 992px) and (max-height: 700px) {
    .journey-section {
        padding: 20px 0 18px;
    }
    .journey-title {
        margin-bottom: 10px;
        font-size: 26px;
        line-height: 32px;
    }
    .journey-label {
        font-size: 27px;
    }
    .journey-connector {
        top: 50px;
        height: 54px;
    }
    .journey-stage {
        top: 114px;
    }
    .journey-detail-icon img {
        width: 50px;
        height: 50px;
    }
    .journey-year {
        font-size: 23px;
        line-height: 27px;
    }
    .journey-milestone-title {
        font-size: 17px;
        line-height: 24px;
    }
    .journey-milestone-text {
        font-size: 15px;
        line-height: 22px;
    }
}
/*-----------Evolution Journey (arc timeline) Css End-------------*/