body {
    box-sizing: border-box;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: #000000;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

h1,
h2,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0px;
    padding: 0px;
}

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

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

p {
    font-size: 16px;
    line-height: 22px;
}

/* Header */
.sbi-header {
    position: fixed;
    z-index: 99999;
    display: flex;
    align-items: center;
    width: 100%;
    height: 75px;
    background: #ffffff;
    padding-top: 0px;
    padding-bottom: 0px;
    top: 0;
    left: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.sbi-header.hide-header {
    transform: translateY(-100%);
}

.sbi-header.show-shadow {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.sbi-header-row {
    align-items: center;
}

.sbi-logo-wrap {
    width: 265px;
}
.sbi-header-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.sbi-search-box {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border-right: 0.5px solid #302e6c;
}

.sbi-search-input {
    width: 0;
    opacity: 0;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 30px;
    transition: all 0.4s ease;
    position: absolute;
    right: 12px;
    background: #fff;
}

.sbi-search-input::placeholder {
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    color: rgba(43, 43, 43, 0.5);
}

.sbi-search-box:hover .sbi-search-input,
.sbi-search-box.active .sbi-search-input {
    width: 191px;
    opacity: 1;
}

.sbi-search-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 2;
}

.sbi-download-link {
    min-height: 44px;
    padding: 0 20px;
    border-right: 0.5px solid #302e6c;
    display: flex;
    align-items: center;
}

/* copy and arrow side by side; the inner span still breaks onto line two */
.sbi-download-link a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sbi-download-link .dl-arrow {
    width: 11px;
    height: auto;
    flex-shrink: 0;
}

.sbi-download-link a {
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    color: #302e6c;
    text-decoration: none;
}

.sbi-download-link a span {
    display: block;
}

.sbi-download-link a:hover {
    color: #ce181e;
}

.sbi-menu-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #215e9e;
    color: #fff;
    border: none;
    margin-left: 20px;
    padding: 14px 20px;
    border-radius: 50px;
    cursor: pointer;
}

.menu-line {
    width: 18px;
    height: 2px;
    background: #fff;
    position: relative;
}

.menu-line::before,
.menu-line::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 2px;
    background: #fff;
    left: 0;
}

.menu-line::before {
    top: -6px;
}

.menu-line::after {
    top: 6px;
}

.menu-text {
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    color: #ffffff;
    /* "Menu" and "Close" differ in width — fixing it stops the button resizing */
    min-width: 42px;
    text-align: left;
}

.menu-line,
.menu-line::before,
.menu-line::after {
    transition:
        transform 0.3s ease,
        top 0.3s ease,
        background-color 0.2s ease;
}

/* hamburger -> X: the middle bar disappears, the other two cross over it */
.sbi-menu-btn.is-open .menu-line {
    background: transparent;
}

.sbi-menu-btn.is-open .menu-line::before {
    top: 0;
    transform: rotate(45deg);
}

.sbi-menu-btn.is-open .menu-line::after {
    top: 0;
    transform: rotate(-45deg);
}

/* header css end */

/* ==========================================================================
   Full-screen menu
   ========================================================================== */

.sbi-menu {
    position: fixed;
    inset: 0;
    z-index: 99998; /* below .sbi-header (99999) so Close stays clickable */
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(90deg, #ce181e 0%, #2a2076 75%);
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-24px);
    transition:
        opacity 0.3s ease,
        transform 0.4s ease,
        visibility 0s linear 0.4s;
}

.sbi-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}

/* padding-top reserves the fixed header's strip, then the container is centred
   in whatever height is left. margin:auto rather than align-items:center — with
   overflow-y:auto the latter makes the overflowing top unreachable. */
.sbi-menu {
    display: flex;
    padding-top: 75px;
}

.sbi-menu > .container {
    width: 100%;
    margin: auto;
    padding-top: 30px;
    padding-bottom: 30px;
}

/* the three panels line up on their centres too */
.sbi-menu .row {
    align-items: center;
}

/* stops the page behind scrolling while the menu is open */
body.menu-open {
    overflow: hidden;
}

.sbi-menu-nav {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px 30px;
}

.sbi-menu-nav .nav {
    display: block;
}

.sbi-menu-nav .nav-item {
    margin-bottom: 14px;
}

.sbi-menu-nav .nav-item:last-child {
    margin-bottom: 0;
}

/* no rule under the last item — it would sit right on the box padding */
.sbi-menu-nav .nav-item:last-child .nav-link {
    padding-bottom: 0;
    border-bottom: none;
}

.sbi-menu-nav .nav-link {
    width: 100%;
    text-align: left;
    padding: 0 0 14px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0;
    background: transparent;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
    transition: border-color 0.3s ease;
}

.sbi-menu-nav .nav-link:hover,
.sbi-menu-nav .nav-link.active {
    background: transparent;
    color: #ffffff;
    font-weight: 700;
    border-bottom-color: #ffffff;
}

.sbi-menu-content {
    padding-left: 30px;
}

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

.sbi-submenu li {
    padding-bottom: 18px;
}

.sbi-submenu a {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #ffffff;
    transition: opacity 0.25s ease;
}

.sbi-submenu a:hover {
    color: #ffffff;
    opacity: 0.7;
}

.sbi-submenu .d-pdf a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sbi-menu-aside {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
}

.sbi-menu-cover img {
    max-width: 150px;
    width: 100%;
    margin: 0 auto;
}

.sbi-menu-download {
    padding: 18px 0 14px;
}

.sbi-menu-download a {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #ffffff;
}

.sbi-menu-download a span {
    display: block;
}

.sbi-menu-aside h5 {
    padding-bottom: 16px;
}

.sbi-menu-aside h5 a {
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
}

.sbi-menu-social {
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* home page css */
.bannersec {
    position: relative;
    display: flex;
    align-items: center;
    /* dvh tracks the area actually visible once mobile browser chrome is counted;
     vh stays as the fallback for older browsers */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.banner-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.bannersec .container {
    position: relative;
    z-index: 1;
}

.bannersec .row {
    align-items: center;
    padding-top: 60px;
}

.bannerheading h1 {
    font-weight: 700;
    font-size: 40px;
    line-height: 42px;
    color: #302e6c;
}

.bannerheading h1 span {
    display: block;
}

.bannerheading .readmorebtn {
    margin-top: 32px;
}

.bannerheading h1 em {
    font-weight: 700;
    font-style: normal;
    position: relative;
    display: inline-block;
    background: linear-gradient(90deg, #ce181e 0%, #7c1c4a 50%, #2a2076 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bannerheading h1 b {
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.bannerheading h1 b::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 53%;
    height: 2px;
    background: #ce181e;
}

.steppping25 .stepping25img {
    text-align: center;
}

.steppping25 .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.steppping25 .container-fluid .col-xl-5 {
    padding-right: 0;
}

.steppping25 .container-fluid .col-xl-7 {
    padding-left: 0;
}

.steppinggradient {
    background: transparent linear-gradient(89deg, #c2205a 0%, #312d6c 100%) 0%
        0% no-repeat padding-box;
    padding: 23px;
    display: flex;
    justify-content: center;
}

.steppinggradient h3 {
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: #ffffff;
    max-width: 275px;
}

.steppinggradient h3 span {
    display: block;
    font-size: 80px;
    line-height: 85px;
}

.steppingcontent {
    background-color: #f1f1f1;
    padding: 40px;
}

.steppingcontent p {
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    color: #302e6c;
    padding-bottom: 25px;
    max-width: 530px;
}

.readmorebtn {
    max-width: 150px;
    width: 100%;
}

.readmorebtn a {
    font-weight: 500;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    color: #2b2b2b;
    display: flex;
    align-items: center;
    gap: 15px;
}

.readmorebtn a:hover {
    color: #302e6c;
    gap: 20px;
    transition: all 0.3s ease-out;
}

.financialStrengthSec {
    padding: 40px 0;
    background-image: url('/documents/d/annual-reports-fy-2025-26/microsites_annualreports26_images_home_growing-with-india-through-img');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.wherepurpose {
    position: relative;
    max-width: 420px;
    padding: 70px 0px;
}

.wherepurpose h2 {
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    margin-bottom: 25px;
    background-image: linear-gradient(90deg, #ce181e 0%, #2a2076 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dotimg1 {
    position: absolute;
    top: -50px;
    left: -50px;
}

.dotimg2 {
    position: absolute;
    bottom: -50px;
    right: 50px;
}

.finstrength {
    background: linear-gradient(90deg, #ce181e 0%, #2a2076 75%);
    padding: 32px 75px;
    position: relative;
    overflow: hidden;
}

.finstrength-inner h4 {
    font-size: 20px;
    margin-bottom: 30px;
    font-weight: 700;
    color: #ffffff;
}

.fin-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px 35px;
}

.fin-item h3 {
    font-size: 35px;
    line-height: 35px;
    color: #ffffff;
    font-weight: 700;
}

.fin-item p {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: #ffffff;
}

.chairmanSec {
    background-image: url('/documents/d/annual-reports-fy-2025-26/microsites_annualreports26_images_home_chairman-bg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 60px;
    position: relative;
    margin-top: 0px;
    transition: background-image 0.4s ease-in-out;
}

.chairman-img-wrap {
    position: relative;
    margin-top: 0px;
}

.chairman-big-img {
    width: 100%;
    max-width: 520px;
    position: relative;
    z-index: 2;
}

/* portrait duplicated inside each message pane — mobile stacked layout only */
.chairman-img-mobile {
    display: none;
}

.chairmanContent h5 {
    font-size: 20px;
    line-height: 25px;
    color: #302e6c;
    font-weight: 700;
    padding-bottom: 5px;
}

.chairmanContent h2 {
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    padding-bottom: 25px;
    max-width: fit-content;
    background-image: linear-gradient(90deg, #ce181e 0%, #2a2076 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.chairmanContent h2 span {
    display: block;
}

.chairmandata {
    position: relative;
    max-width: 500px;
}

.chairmanContent p {
    font-size: 16px;
    line-height: 24px;
    color: #302e6c;
    font-weight: 500;
    padding-bottom: 20px;
}

.chairmanContent h4 {
    font-weight: 700;
    font-size: 20px;
    line-height: 22px;
    padding-bottom: 5px;
    max-width: fit-content;
    background-image: linear-gradient(90deg, #ce181e 0%, #2a2076 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.chairmanContent h6 {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #302e6c;
    padding-bottom: 2px;
    max-width: 100%;
    border-bottom: none;
    margin-bottom: 30px;
}

.readBtn a {
    max-width: 190px;
    width: 100%;
}

.readBtn a {
    font-weight: 500;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    color: #302e6c;
    display: flex;
    align-items: center;
    gap: 10px;
}

.readBtn a:hover {
    color: #302e6c;
    gap: 20px;
    transition: all 0.3s ease-out;
}

.chairmanSec .col6relative {
    position: relative;
}

.chairman-tabs {
    position: absolute;
    right: 90px;
    bottom: 0px;
    list-style: none;
    padding: 0;
}

.chairman-tabs img {
    margin-bottom: 5px;
    width: 80px;
}

.chairman-tabs h6 {
    font-size: 16px;
    line-height: 22px;
    color: #c2205a;
    font-weight: 700;
    margin-bottom: 0;
    border-bottom: none;
    max-width: 100%;
}

.chairman-tabs p {
    font-size: 12px;
    line-height: 15px;
    color: #302e6c;
    font-weight: 500;
    padding-bottom: 0;
}

.chairman-tabs p span {
    display: block;
}

.chairman-tabs button {
    background: transparent;
    border: none;
    color: #302e6c;
}

.chairman-tabs button.active {
    display: none;
}

.value-section {
    padding: 45px 0px;
    background: #f3fafe;
}

.value-heading h6 {
    font-weight: 700;
    font-size: 20px;
    line-height: 35px;
    color: #302e6c;
    padding-bottom: 5px;
}

.value-heading h2 {
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    color: #ce181e;
    padding-bottom: 40px;
    background-image: linear-gradient(90deg, #ce181e 30%, #2a2076 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.value-wrapper {
    /* max-width: 1110px; */
    width: 100%;
    margin: 0 auto;
}

.value-tabs {
    border-bottom: none;
    justify-content: space-between;
    padding: 0;
}

.value-tabs .nav-item {
    position: relative;
    z-index: 1;
}

.value-tabs .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    border: none;
    color: #404040;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    padding: 6px 12px 12px 12px;
    border-radius: 0;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    background-color: transparent;
    transition: color 0.4s ease;
}

.value-tabs .nav-link:hover {
    border-color: #707070;
}

.value-tabs .nav-link.active {
    background-color: transparent;
    color: #302e6c;
    font-weight: 600;
}

.value-tabs .tab-icon {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex-shrink: 0;
}

/* sliding indicator behind the active tab */
.value-tabs .tab-indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 0;
    list-style: none;
    background-color: #ffffff;
    border-radius: 0;
    transition:
        transform 0.6s cubic-bezier(0.77, 0, 0.18, 1),
        width 0.6s cubic-bezier(0.77, 0, 0.18, 1);
}

/* mobile-only control — the media query in responsive.css turns it on */
.vc-tab-select {
    display: none;
}

.value-content {
    padding: 0;
}

.value-content .tab-pane {
    min-height: 420px;
    background-color: #ffffff;
    padding: 45px 30px 30px 30px;
}

/* Every column gets the same list height; longer ones scroll inside the box.
   No scrollbar-width / scrollbar-color here on purpose — Chrome 121+ ignores
   every ::-webkit-scrollbar rule below the moment either standard property is
   set. Firefox is handled in the @supports block instead. */
.vc-scroll {
    max-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-right: 12px;
}

/* added from JS to lists that already fit, so no empty bar is painted */
.vc-scroll.is-fit {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

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

.vc-scroll::-webkit-scrollbar-track {
    border-radius: 0;
    background-color: #d6e3ec;
}

.vc-scroll::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: #2a2076;
}

.vc-scroll::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}

@supports not selector(::-webkit-scrollbar) {
    .vc-scroll {
        scrollbar-width: thin;
        scrollbar-color: #2a2076 #d6e3ec;
    }
}

/* white panel -> dark text */
.value-content p,
.value-content .value-block h5,
.value-content .value-block li {
    color: #2b2b2b;
}

.value-content hr {
    border-color: #d6e3ec;
}

.value-content .blockbrd-rgt {
    border-right-color: #d6e3ec;
}

/* pill background dropped — the gradient now runs through the text itself */
.gradientHeading {
    max-width: fit-content;
    margin-bottom: 20px;
}

.gradientHeading h4 {
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    background-image: linear-gradient(90deg, #ce181e 0%, #2a2076 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.value-content p {
    font-weight: 400 !important;
    font-weight: 100;
    font-size: 16px;
    line-height: 24px;
    color: #2b2b2b;
    padding-bottom: 10px;
}

.value-content p span {
    font-weight: 700;
}

.blockbrd-rgt {
    max-width: 450px;
    width: 100%;
    border-right: 0.5px solid #707070;
}

.value-block h5 {
    font-size: 18px;
    line-height: 24px;
    color: #000000;

    padding-bottom: 5px;
}

.value-block ul {
    padding-left: 18px;
    margin: 0;
}

.value-block li {
    padding-bottom: 5px;
    font-size: 16px;
    line-height: 22px;
    color: #000000;
}

.top-section ul li::marker {
    color: #f05b6c;
}

/* the capital pointers are paragraphs, not a list, so the square is drawn the
   same way the value creation model page draws its own : 6px, brand red */
.top-section .vc-scroll p {
    position: relative;
    padding-left: 18px;
}

.top-section .vc-scroll p::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 0;
    width: 6px;
    height: 6px;
    background: #ce181e;
}

hr {
    margin: 20px 0 30px 0px;
    border-color: #707070;
}

.sdgnumbers {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}

.sdgnumbers .num {
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    color: #2b2b2b;
    border-radius: 0;
    border-width: 2px;
    border-style: solid;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.num1 {
    border-color: #ff2e24;
}

.num2 {
    border-color: #dda63a;
}

.num3 {
    border-color: #4c9f38;
}

.num4 {
    border-color: #c5192d;
}

.num5 {
    border-color: #ff3a21;
}

.num6 {
    border-color: #26bde2;
}

.num7 {
    border-color: #fcc30b;
}

.num10 {
    border-color: #dd1367;
}

.num13 {
    border-color: #3f7e44;
}

.num15 {
    border-color: #56c02b;
}

.num8 {
    border-color: #951e34;
}

.num9 {
    border-color: #ff6823;
}

.num11 {
    border-color: #ff9b31;
}

.num12 {
    border-color: #d78b2b;
}

.num16 {
    border-color: #084f8d;
}

.num17 {
    border-color: #123168;
}

.capital-wrapper {
    position: relative;
}

.capital-section {
    position: relative;
}

.capital-section .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.capital-section .row {
    align-items: center;
}

.capital-header {
    position: sticky;
    top: 0;
    color: #fff;
    padding: 20px 0px;
    z-index: 5;
    border-bottom: 2px solid #ffffff;
}

.capital-txt {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.capital-txt h2 {
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    color: #ffffff;
}

.capital-txt span {
    font-weight: 700;
    font-size: 35px;
    line-height: 42px;
    color: #ffffff;
    opacity: 50%;
}

.capital-content {
    padding: 75px 0px;
}

.contentimg {
    display: flex;
    justify-content: right;
    position: relative;
}

.reveal-img {
    opacity: 0;
    /* transform:scale(1.15) translateY(60px); */
    transform: scale(1) translateY(0);
    /* filter:blur(12px); */
    transition: none;
}

.reveal-wrap {
    position: relative;
    overflow: hidden;
}

.reveal-mask {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 2;
}

.reveal-mask.left {
    left: 0;
}
.reveal-mask.right {
    right: 0;
}

.contenttxt h3 {
    font-weight: 700;
    font-size: 20px;
    line-height: 22px;
    padding-bottom: 9px;
    max-width: fit-content;
    background-image: linear-gradient(90deg, #ce181e 0%, #2a2076 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contenttxt h6 {
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #302e6c;
    padding-bottom: 9px;
}

.kpi-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 60px;
    padding-bottom: 25px;
}

.kpi-item {
    border-bottom: 1px solid #a9cde6;
}

.kpi-item h2 {
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    color: #302e6c;
}

.kpi-item h2 span {
    font-size: 16px;
    line-height: 35px;
    font-weight: 400;
}

/* the animated figure keeps the full heading size; only unit spans shrink */
.kpi-item h2 span.counter {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

/* index only (.home-page) — the six capital blocks show their figures in the
   brand gradient. .kpi-item is shared with the capital pages, which keep the
   solid navy above. */
.home-page .kpi-item h2 {
    max-width: fit-content;
    background-image: linear-gradient(90deg, #ce181e 0%, #2a2076 130%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* this tile is the only one carrying its labels inside the h2, so the labels
   opt back out of the gradient and keep the same colour as the p labels below
   the other tiles. Only the counters stay gradient. */
.home-page .kpi-item h2.kpi-products {
    max-width: none;
    width: fit-content;
}

.home-page .kpi-item h2.kpi-products span:not(.counter) {
    -webkit-text-fill-color: #2b2b2b;
    color: #2b2b2b;
}

.kpi-item .kpi-growth {
    display: block;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #2b2b2b;
}

.kpi-item p {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #2b2b2b;
    padding-bottom: 15px;
}

.kpi-item p span {
    display: block;
}

/* all six capitals share one light content background */
.capital-section,
.capital-section .capital-content {
    background: #fbfdff;
}

/* sticky header bar uses the site gradient */
.capital-section .capital-header {
    background: #302e6c;
}

.awards-section {
    padding: 35px 0;
    background: #f3fafe;
}

.awards-heading {
    text-align: center;
}

.awards-heading h6 {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #302e6c;
    padding-bottom: 5px;
}

.awards-heading h2 {
    font-size: 32px;
    line-height: 38px;
    color: #ce181e;
    font-weight: 700;
    padding-bottom: 30px;
    background-image: linear-gradient(90deg, #ce181e 30%, #2a2076 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.awards-heading h2 span {
    display: block;
}

.award-box {
    clip-path: polygon(0 28%, 100% 0, 100% 100%, 0% 100%);
    border: 0.5px solid #302e6c;
    padding: 74px 15px 15px 15px;
    text-align: center;
    max-width: 286px;
    width: 100%;
    min-height: 390px;
    background-color: black;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.award-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f3fafe;
    clip-path: polygon(0 28%, 100% 0, 100% 100%, 0% 100%);
    z-index: -1;
    width: 100%;
    height: 100%;
}

.aw-track .award-box img {
    width: auto;
    margin: 0 auto;
    margin-bottom: 30px;
}

.award-box p {
    font-size: 16px;
    line-height: 20px;
    color: #2b2b2b;
    font-weight: 400;
    margin-bottom: 0;
}

.award-box span {
    color: #2b2b2b;
}

.awards-footer {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

/* ===== Awards marquee — edge-to-edge, continuous scroll ===== */
.aw-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent,
        #000 6%,
        #000 94%,
        transparent
    );
    mask-image: linear-gradient(
        90deg,
        transparent,
        #000 6%,
        #000 94%,
        transparent
    );
}

.aw-track {
    display: flex;
    width: max-content;
    animation: aw-marquee 60s linear infinite;
}

@keyframes aw-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* trailing margin (not gap) so one duplicated set is exactly 50% — no jump on loop */
.aw-track .award-item {
    flex: 0 0 286px;
    margin-right: 32px;
    display: flex;
}

/* pause only where a real mouse exists, so touch devices never freeze it */
@media (hover: hover) {
    .aw-marquee:hover .aw-track {
        animation-play-state: paused;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aw-track {
        animation: none;
    }
}

/* mobile: JS drives scrollLeft instead of the CSS animation */
@media (max-width: 900px) {
    .aw-marquee {
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent,
            #000 4%,
            #000 96%,
            transparent
        );
        mask-image: linear-gradient(
            90deg,
            transparent,
            #000 4%,
            #000 96%,
            transparent
        );
    }

    .aw-marquee::-webkit-scrollbar {
        display: none;
    }

    .aw-track {
        animation: none;
    }
}

/* symmetric padding is what keeps the left gradient panel off the section
   edges — same approach as the ICICI "Corporate Information" board section */
.iraddonkaSection {
    position: relative;
    padding: 60px 0;
}

.iraddonkaSection .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.iraadonkaIndia {
    margin: 0 auto;
    max-width: 650px;
    width: 100%;
    padding-bottom: 35px;
}
.iraadotopimg {
    display: flex;
    align-items: center;
    gap: 10px;
}
.iraadotopimg h2 {
    font-weight: 400;
    font-size: 30px;
    line-height: 35px;
    background: transparent linear-gradient(100deg, #bc225b 0%, #312d6c 100%) 0%
        0% no-repeat padding-box;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.iraadotopimg h2 span {
    display: block;
    font-weight: 700;
}

.iraadonkaIndia h4 {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #2e2c74;
    padding-bottom: 5px;
}

.iraadonkaIndia p {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #302e6c;
}

.iraadonkaIndia p span {
    display: block;
}

/* the height lives on the wrapper, not on the absolute panels inside it —
   panels use inset:0 so they follow this and can never overshoot the section */
.slider-wrapper {
    position: relative;
    /* the panels and the slider inside stack against each other with values as
     high as 9999 — isolating them here keeps that fight local, so the cards
     can never climb over the fixed header or the full-screen menu */
    z-index: 0;
    isolation: isolate;
    min-height: 545px;
    /* centres the slider in the panel's height; the gradient panels are absolute
     so they stay out of this flex flow */
    display: flex;
    align-items: center;
}

.ira-card {
    box-shadow: 0px 3px 6px #00000029;
    background-color: #fff;
    position: relative;
    min-height: 450px;
    margin: 10px 0px;
}

.ira-img {
    position: relative;
}

.iraddon-slider.owl-carousel .owl-item img {
    width: auto;
}

/* owl's own stylesheet puts touch-action:none on every slide, so a finger that
   lands on a card owns the whole gesture and the page will not scroll. pan-y
   hands the vertical swipe back to the browser — owl already ignores a drag
   that travels further down than across, so the sideways drag still works */
.iraddon-slider.owl-carousel.owl-drag .owl-item,
.iraddon-slider.owl-carousel .owl-stage {
    touch-action: pan-y;
}

.ira-content {
    padding: 20px;
}

.ira-content h5 {
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    color: #302e6c;
    padding-bottom: 10px;
}

.ira-content p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #2b2b2b;
}

/* inset top/bottom 0 already matches .slider-wrapper's height — a min-height
   here forces the panel past it and over the section below */
.left-gradient-bg {
    position: absolute;
    inset: 0 auto 0 0;
    max-width: 478px;
    width: 100%;
    background: linear-gradient(90deg, #ce181e 0%, #2a2076 75%);
    z-index: 1;
}

.slider-container {
    position: relative;
    /* z-index: 2; */
    z-index: 9999;
    /* as a flex item it would shrink to content — keep it full width */
    flex: 1;
    min-width: 0;
}

.iraddon-slider {
    padding-left: 360px;
}

.left-gradient-overlay {
    position: absolute;
    inset: 0 auto 0 0;
    max-width: 360px;
    width: 100%;
    background: linear-gradient(90deg, #ce181e 0%, #2a2076 75%);
    z-index: 999;
    pointer-events: none;
}

.slider-counter {
    position: absolute;
    bottom: 120px;
    left: 70px;
    color: #ffffff;
}

.slider-counter .current {
    font-size: 50px;
    line-height: 30px;
    font-weight: 500;
}

.slider-counter .total {
    font-weight: 500;
    font-size: 30px;
    line-height: 30px;
    margin-left: 0;
}

.slider-counter .separator {
    font-weight: 500;
    font-size: 30px;
    line-height: 30px;
    margin: 0 10px;
}

.iraddon-slider .owl-nav {
    position: absolute;
    top: 40%;
    left: 7%;
    display: flex;
    gap: 14px;
    flex-direction: column;
}

.iraddon-slider .owl-nav button {
    width: 46px;
    height: 46px;
    border: 1px solid #ffffff !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: all;
    backdrop-filter: blur(2px);
}

.iraddon-slider .owl-nav button:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.9);
}

/* the SVGs are already white — no invert, or they come out black */
.iraddon-slider .owl-nav button img {
    width: 18px;
    height: auto;
    display: block;
}

.sbiScrollCardsSec {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #f3fafe;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* both groups occupy the same box, stacked on top of each other */
.sbiCardsStage {
    position: relative;
    width: 100%;
    min-height: 430px;
}

/* each group needs its own stacking context (z-index must not be auto), or its
   cards escape into the stage's context and outrank the group above them */
.sbiCardGroup {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 30px;
    z-index: 1;
    /* the group spans the whole stage, so it must not swallow clicks meant for
     the group beneath it — only the cards themselves are interactive */
    pointer-events: none;
}

.sbiCardGroup[data-group='2'] {
    z-index: 2;
}

.sbiCard {
    position: relative;
    flex: 0 0 350px;
    max-width: 350px;
    width: 100%;
    background: #ffffff;
    padding: 30px 30px 30px 30px;
    box-shadow: 0px 3px 6px #00000029;
    z-index: 1;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}

/* pins Read More to the bottom whatever the copy length */
.sbiCard .readmorebtn {
    margin-top: auto;
}
.sbiCard::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #ce181e 0%, #2a2076 75%);
    bottom: 0;
    left: 0;
    right: 0;
}
.txtsbiscrollcards {
    min-height: 250px;
}

.sbiCard h2 {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #302e6c;
    padding-bottom: 5px;
}
.sbiCard h3 {
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
    padding-bottom: 10px;
    background-image: linear-gradient(90deg, #ce181e 0%, #2a2076 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sbiCard p {
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: #2b2b2b;
    padding-bottom: 15px;
}

/* footer css */

.dc-footer {
    background-color: #302e6c;
    color: #ffffff;
    padding-top: 55px;
}

.dc-title-wrap h2 {
    font-weight: 700;
    font-size: 32px;
    line-height: 35px;
    padding-bottom: 30px;
}

.dc-image-wrap {
    padding: 0 20px;
}

.esgintegratedreport {
    border: 1px solid #ffffff;
    display: flex;
    align-items: center;
}

.imgdiv {
    padding: 12px 22px;
    border-right: 1px solid #ffffff;
}

/* height auto keeps the SVG's own 10.42:18.245 ratio instead of forcing it */
.imgdiv img {
    width: 14px;
    height: auto;
}

.reporttxtdiv {
    padding: 0 18px;
}

.reporttxtdiv h5 {
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #ffffff;
}

.reporttxtdiv h5 span {
    display: inline;
}

.dc-secondary-links-wrap {
    margin-top: 45px;
    display: flex;
    gap: 0px;
}

/* second row sits directly under the first, so it needs a smaller gap */
.dc-secondary-links-row2 {
    margin-top: 18px;
}

.dc-link-item {
    border-right: 1px solid #22b3e8;
    padding: 10px 20px;
}

.dcbrdnone {
    border-right: none;
}

.dcpdleft0 {
    padding-left: 0;
}

.dc-link-item a {
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.socialmediaiconsdiv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #ffffff;
    padding-top: 30px;
    margin-top: 45px;
}

.socialicon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.backtopbutton a {
    text-decoration: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dc-bottom-bar {
    background-color: #0b1150;
    padding: 15px 0;
    margin-top: 40px;
}

.dc-bottom-bar-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.dc-bottom-bar-inner h6 {
    font-weight: 500;
    font-size: 12px;
    line-height: 22px;
    color: #ffffff;
}

/* the global `a` rule sets 16px and no colour — pull both back from the h6 */
.dc-bottom-bar-inner h6 a {
    color: inherit;
    font-size: inherit;
    transition: opacity 0.25s ease;
}

.dc-bottom-bar-inner h6 a:hover {
    color: inherit;
    opacity: 0.7;
}

/* footer css end */

/* ==========================================================================
   Approach to Reporting page css start  (approach-to-reporting.php)
   ========================================================================== */

/* --- page icons --- */
.atr-capital-icon,
.atr-stake-icon,
.atr-mail-icon,
.atr-sdg-img {
    display: block;
    flex-shrink: 0;
    object-fit: contain;
}

/* --- banner --- */
.atr-banner {
    padding-top: 110px;
    margin-bottom: 30px;
}

.atr-sitemap ul {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0;
    margin: 0 0 15px 0;
}

.atr-sitemap ul li {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #302e6c;
}

.atr-sitemap ul li::after {
    content: '/';
    color: #ce181e;
    margin: 0 8px;
}

.atr-sitemap ul li:last-child::after {
    content: none;
}

.atr-sitemap ul li a {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #302e6c;
}

.atr-sitemap ul li a:hover {
    color: #ce181e;
}

.atr-banner-heading h1 {
    font-weight: 700;

    font-size: 18px;
    line-height: 22px;
    max-width: fit-content;
    background: linear-gradient(90deg, #ba1a2a 0%, #2b2075 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- intro section --- */
.atr-intro {
    padding: 0 0 30px;
}

.atr-intro p {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #302e6c;
    padding-bottom: 15px;
}

.atr-intro p:last-child {
    padding-bottom: 0;
}

.atr-intro p .counter {
    font-weight: 700;
}

/* --- content section --- */
.atr-content {
    padding: 0 0;
}

.atr-block {
    margin-bottom: 20px;
}

.atr-block:last-child {
    margin-bottom: 0;
}

.atr-block h2 {
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #302e6c;
    padding-bottom: 8px;
}

.atr-block p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    padding-bottom: 12px;
}

.atr-block p:last-child {
    padding-bottom: 0;
}

.atr-block p.atr-pd-top {
    padding-top: 15px;
}

/* --- bullet list (red square marker) --- */
.atr-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.atr-list li {
    position: relative;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    padding-left: 18px;
    padding-bottom: 10px;
}

.atr-list li:last-child {
    padding-bottom: 0;
}

.atr-list li::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 0;
    width: 7px;
    height: 7px;
    background: #00b5ef;
}

.atr-list li span {
    font-weight: 700;

    color: #ce181e;
}

/* two per line : the last item sits alone on the closing row */
.atr-list-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
}

/* every item keeps its rhythm, including the one that ends a column */
.atr-list-2col li:last-child {
    padding-bottom: 10px;
}

/* --- gradient tab heading --- */
.atr-tab {
    max-width: fit-content;
    padding: 5px 20px;
    margin-bottom: 15px;
    background: transparent linear-gradient(90deg, #ce181e 0%, #302e6c 100%) 0%
        0% no-repeat padding-box;
}

.atr-tab h2 {
    font-weight: 700;

    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
    padding-bottom: 0;
}

/* --- our capitals --- */
.atr-capital-box {
    padding: 20px 0px 30px;
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #eff7fd 15%,
        #d2e7f7 50%,
        #eff7fd 85%,
        #ffffff 100%
    );
}

.atr-capital-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 25px;
}

.atr-capital-head .atr-tab {
    margin-bottom: 0;
    padding: 6px 18px;
    background: transparent linear-gradient(90deg, #8e1015 0%, #e31e24 100%) 0%
        0% no-repeat padding-box;
}

.atr-capital-head > p {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #302e6c;
    padding-bottom: 0;
}

.atr-capital-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 0;
}

.atr-capital-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 0 28px;
}

.atr-capital-item:nth-child(3n) {
    padding-right: 0;
}

.atr-capital-item:nth-child(3n + 1) {
    padding-left: 0;
}

/* vertical gradient divider between the columns (blue > red) */
.atr-capital-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: transparent
        linear-gradient(180deg, #8fd3f0 0%, #9aa0d2 45%, #ce181e 100%) 0% 0%
        no-repeat padding-box;
}

.atr-capital-item:nth-child(3n)::after {
    content: none;
}

/* horizontal gradient divider between the two rows (navy > red > fade)
   the 300% background-size + shifted position keeps the three segments
   reading as one continuous line across the full grid width */
.atr-capital-item:nth-child(n + 4)::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 1px;
    background-image: linear-gradient(
        90deg,
        #302e6c 0%,
        #6e2a46 35%,
        #ce181e 70%,
        rgba(206, 24, 30, 0) 100%
    );
    background-repeat: no-repeat;
    background-size: 300% 100%;
}

.atr-capital-item:nth-child(3n + 1)::before {
    background-position: 0% 0;
}

.atr-capital-item:nth-child(3n + 2)::before {
    background-position: 50% 0;
}

.atr-capital-item:nth-child(3n)::before {
    background-position: 100% 0;
}

.atr-capital-icon {
    width: 46px;
    height: 46px;
}

.atr-capital-item h3 {
    font-weight: 700;
    font-size: 17px;
    line-height: 24px;
    max-width: fit-content;
    padding-bottom: 6px;
    background: transparent
        linear-gradient(90deg, #6b2c8f 0%, #4a3a9e 45%, #1b6fb5 100%) 0% 0%
        no-repeat padding-box;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.atr-capital-item p {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #302e6c;
    padding-bottom: 0;
}

/* --- stakeholders and their value drivers --- */
.atr-stake-block {
    position: relative;
}

/* the gradient tab sits on the top-left edge of the box */
.atr-stake-block .atr-tab {
    position: relative;
    z-index: 2;
    margin: 0 0 -10px 10px;
    padding: 6px 18px;
}

/* double background : inner fill on padding-box, gradient stroke on border-box */
.atr-stake-box {
    background: linear-gradient(180deg, #d8f0fa 0%, #f4fbfe 50%, #ffffff 100%);

    /* Layout & Corners */
    border-radius: 20px;
    padding: 24px;

    /* Gradient Border Setup */
    border: 2px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image:
        linear-gradient(180deg, #d8f0fa 0%, #ffffff 100%),
        /* Fill */ linear-gradient(135deg, #e63946 0%, #2b2d42 100%);
}

.atr-stake-box > p {
    font-weight: 500;
    font-size: 17px;
    line-height: 26px;
    color: #302e6c;
    padding-bottom: 20px;
}

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

.atr-stake-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 18px;
}

.atr-stake-list li:last-child {
    padding-bottom: 0;
}

.atr-stake-icon {
    width: 42px;
    height: 42px;
}

.atr-stake-list li p {
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #302e6c;
    padding-bottom: 0;
}

.atr-stake-list li p span {
    font-weight: 700;
    color: #302e6c;
}

/* --- our material topics --- */
.atr-topic-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 40px;
    margin-top: 10px;
}

.atr-topic-grid .atr-list:last-child {
    padding-left: 40px;
    border-left: 1px solid #ce181e;
}

/* --- sdgs we contribute to --- */
/* 17 individual goal icons laid out 6 per row */
.atr-sdg-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.atr-sdg-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

/* --- board approval box --- */
.atr-board-box {
    border: 1px solid #8886bc;
    border-radius: 15px;
    padding: 28px 30px;
}

.atr-board-item {
    margin-bottom: 22px;
}

.atr-board-item:last-child {
    margin-bottom: 0;
}

.atr-board-box h3 {
    font-weight: 700;

    font-size: 18px;
    line-height: 24px;
    color: #302e6c;
    padding-bottom: 5px;
}

.atr-board-box p {
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    padding-bottom: 0;
}

.atr-board-mail {
    margin-top: 12px;
}

.atr-board-mail a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: #302e6c;
    transition: all 0.3s ease-out;
}

.atr-board-mail a:hover {
    color: #ce181e;
}

.atr-mail-icon {
    width: 24px;
    height: auto;
}

/* --- prev / next buttons --- */
.atr-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 50px 0px;
}

/* the ink colours live on the button, and the label / arrow read them back
   out — the gradient and the text can never end up out of step, whatever
   state turns it on */
.atr-page-btn {
    --atr-nav-ink: #302e6c;
    --atr-nav-eyebrow: #ce181e;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    min-width: 235px;
    padding: 12px 26px;
    border: 1px solid var(--atr-nav-ink);
    border-radius: 50px;
    background: #ffffff;
    transition: all 0.35s ease-out;
}

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

.atr-nav-txt {
    display: flex;
    flex-direction: column;
}

.atr-nav-txt em {
    font-weight: 500;
    font-style: normal;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--atr-nav-eyebrow);
    transition: all 0.35s ease-out;
}

.atr-nav-txt strong {
    font-weight: 400;

    font-size: 16px;
    line-height: 22px;
    color: var(--atr-nav-ink);
    transition: all 0.35s ease-out;
}

/* css arrow : swap this <i> for an img / icon later */
.atr-nav-arrow {
    position: relative;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: 1px solid var(--atr-nav-ink);
    border-radius: 50%;
    font-style: normal;
    transition: all 0.35s ease-out;
}

.atr-nav-arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--atr-nav-ink);
    border-right: 2px solid var(--atr-nav-ink);
    transition: all 0.35s ease-out;
}

.atr-page-prev .atr-nav-arrow::before {
    transform: translate(-40%, -50%) rotate(-135deg);
}

.atr-page-next .atr-nav-arrow::before {
    transform: translate(-60%, -50%) rotate(45deg);
}

/* every state that paints the gradient flips the ink white in the same rule,
   so the label cannot be left dark on it.  :focus is in here on purpose — a
   tap gives the link focus and holds it, which is what carries the state on
   a touch screen where there is no hover */
.atr-page-btn:hover,
.atr-page-btn:focus,
.atr-page-btn:active {
    --atr-nav-ink: #ffffff;
    --atr-nav-eyebrow: #ffffff;
    border-color: transparent;
    background: transparent linear-gradient(90deg, #ce181e 0%, #302e6c 100%) 0%
        0% no-repeat padding-box;
    outline: none;
}

/* the same colours again, spelled out on the children rather than inherited
   through the variables.  the gradient text elsewhere on the site sets
   -webkit-text-fill-color, which silently wins over `color` if it ever
   reaches this label, so both are pinned here */
.atr-page-btn:hover .atr-nav-txt strong,
.atr-page-btn:hover .atr-nav-txt em,
.atr-page-btn:focus .atr-nav-txt strong,
.atr-page-btn:focus .atr-nav-txt em,
.atr-page-btn:active .atr-nav-txt strong,
.atr-page-btn:active .atr-nav-txt em {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.atr-page-btn:hover .atr-nav-arrow,
.atr-page-btn:focus .atr-nav-arrow,
.atr-page-btn:active .atr-nav-arrow {
    border-color: #ffffff;
}

.atr-page-btn:hover .atr-nav-arrow::before,
.atr-page-btn:focus .atr-nav-arrow::before,
.atr-page-btn:active .atr-nav-arrow::before {
    border-top-color: #ffffff;
    border-right-color: #ffffff;
}

/* kept in its own rule : a browser that does not know :focus-visible would
   throw away the whole block it was grouped with */
.atr-page-btn:focus-visible {
    outline: 2px solid #302e6c;
    outline-offset: 3px;
}

/* Approach to Reporting page css end */

/* ==========================================================================

   Strategy page css start  (strategy.php)
   ========================================================================== */

.strategy-page .atr-banner {
    margin-bottom: 22px;
}

.strategy-page .atr-banner-heading h1 {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #414042;
    color: #414042;
}

.strategy-intro {
    padding-bottom: 50px;
}

.strategy-intro h2 {
    max-width: fit-content;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.25;
    background: linear-gradient(90deg, #ba1a2a 0%, #2b2075 75%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* --- banner heading --- */
.bot-banner-heading h1 {
    font-weight: 700;
    font-size: 30px;
    line-height: 40px;
    color: #302e6c;
}

.bot-banner-heading h1 span {
    display: block;
}

.bot-banner-heading h1 em {
    font-weight: 700;
    font-style: normal;
    background: linear-gradient(90deg, #e22d5b 0%, #852c6e 50%, #3a2367 100%);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.strategy-intro p {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #302e6c;
}

.strategy-intro p + p {
    margin-top: 24px;
    color: #000000;
}

/* --- strategic pillar --- */
.strategy-pillar {
    padding: 0 0 60px;
}

.strategy-pillar-grid {
    display: grid;
    grid-template-columns: 37% 17.5% 45.5%;
    align-items: stretch;
}

.strategy-levers,
.strategy-momentum {
    padding-bottom: 20px;
}

.strategy-levers {
    padding-right: 20px;
}

.strategy-momentum {
    padding-left: 20px;
}

.strategy-levers > h3,
.strategy-momentum > h3 {
    margin: 0 0 20px;
    padding: 11px 18px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
}

.strategy-levers > h3 {
    background: linear-gradient(90deg, #a9a1c5 0%, #f8f8fa 100%);
}

.strategy-momentum > h3 {
    background: linear-gradient(90deg, #b9e0f0 0%, #ffffff 100%);
}

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

.strategy-square-list li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 19px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #000000;
}

.strategy-square-list li:last-child {
    margin-bottom: 0;
}

.strategy-square-list li::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    width: 7px;
    height: 7px;
    background: #00b5ef;
}

.strategy-square-list strong {
    font-weight: 700;
}

.strategy-square-list sup {
    font-size: 10px;
    line-height: 0;
}

.strategy-pillar-focus {
    position: relative;
    min-height: 610px;
    overflow: hidden;
    background: linear-gradient(180deg, #e4e1ee 0%, #f7f4f8 100%);
}

.strategy-pillar-focus::before,
.strategy-pillar-focus::after {
    content: '';
    position: absolute;
    inset: 0;
}

.strategy-pillar-focus::before {
    background: rgba(209, 226, 237, 0.75);
    clip-path: polygon(0 0, 100% 0, 100% 37%, 0 27%);
}

.strategy-pillar-focus::after {
    background: rgba(253, 229, 239, 0.75);
    clip-path: polygon(0 27%, 100% 38%, 100% 100%, 0 87%);
}

.strategy-focus-content {
    position: relative;
    z-index: 1;
    padding: 14px 14px 35px;
    text-align: center;
}

.strategy-code {
    display: block;
    max-width: fit-content;
    margin: 0 auto 22px;
    font-weight: 700;
    font-weight: bold;
    font-size: 18px;
    line-height: 24px;
    color: #ba1a2a;
    background: linear-gradient(90deg, #ba1a2a 0%, #2b2075 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* --- content --- */
.bot-content {
    padding: 0;
}

.bot-block {
    margin-bottom: 30px;
}

.bot-block:last-child {
    margin-bottom: 0;
}

.bot-block h2 {
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #302e6c;
    padding-bottom: 10px;
    font-style: italic;
}
.bot-block.botlasthead h2 {
    font-style: normal;
}

.bot-block p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    padding-bottom: 15px;
}

.bot-block p:last-child {
    padding-bottom: 0;
}

/* --- section image --- */
.bot-img {
    margin-top: 35px;
}

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

/* Built on Trust. Shared in Growth. page css end */

/* ==========================================================================
   Growing with India Through Trust and Protection page css start
   (growing-with-india-through-trust-and-protection.php)
   ========================================================================== */

/* --- banner heading --- */
.gwi-banner-heading h6 {
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #4d4d4f;
    padding-bottom: 12px;
}

.gwi-banner-heading h1 {
    font-weight: 700;
    font-size: 30px;
    line-height: 40px;
}

/* --- content --- */
.gwi-content {
    padding: 0;
}

.gwi-block {
    margin-bottom: 35px;
}

.gwi-block:last-child {
    margin-bottom: 0;
}

.gwi-block > h2 {
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: #302e6c;
    padding-bottom: 8px;
}

/* --- one leadership dimension --- */
.gwi-dimension {
    margin-bottom: 30px;
}

.gwi-dimension:last-child {
    margin-bottom: 0;
}

.gwi-dimension h3 {
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    padding-bottom: 6px;
}

.gwi-dimension > p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    padding-bottom: 18px;
}

/* --- stat grid --- */
.gwi-stat-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px 30px;
    padding: 0;
    margin: 0;
}

.gwi-stat-grid li {
    padding-bottom: 12px;
    border-bottom: 1px solid #d5d4e6;
}

.gwi-stat-grid h4 {
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    background: linear-gradient(90deg, #e22d5b 0%, #852c6e 50%, #3a2367 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 4px;
}

.gwi-stat-grid li > p {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
}

.gwi-stat-grid li > p sup {
    font-size: 11px;
}

/* --- the five headline legacy numbers --- */
.gwi-legacy-grid {
    grid-template-columns: repeat(2, 1fr);
}

.gwi-legacy-grid h4 {
    font-size: 40px;
    line-height: 48px;
}

/* --- footnote --- */
.gwi-note {
    display: block;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    padding-top: 10px;
}

.gwi-note sup {
    font-size: 10px;
}

/* Growing with India Through Trust and Protection page css end */

/* ==========================================================================
   Board of Directors page css start  (board-of-directors.php)
   ========================================================================== */

.bod-content {
    padding: 0;
}

.bod-list {
    width: 100%;
    --bs-gutter-x: 70px;
    --bs-gutter-y: 34px;
}

.bod-item {
    position: relative;
    padding-top: 0;
    padding-bottom: 32px;
    margin-bottom: 0;
}

.bod-item::after {
    content: '';
    position: absolute;
    left: calc(var(--bs-gutter-x) * 0.5);
    bottom: 0;
    width: calc(100% - var(--bs-gutter-x));
    height: 2px;
    background: transparent linear-gradient(90deg, #ce181e 0%, #302e6c 100%) 0%
        0% no-repeat padding-box;
}

.bod-item:last-child {
    margin-bottom: 0;
}

.bod-item > .row {
    height: 100%;
    align-items: stretch !important;
}

.bod-profile {
    max-width: 300px;
}

.bod-profile .bod-serial {
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #ce181e;
    margin-bottom: 12px;
}

.bod-img {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1 / 1;
    margin-bottom: 10px;
    overflow: hidden;
}

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

.bod-profile h3 {
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #302e6c;
    margin: 0;
}

.bod-profile span {
    display: block;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
}

.bod-data {
    height: 100%;
}

.bod-data p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    padding-bottom: 8px;
}

@media (min-width: 992px) {
    .bod-item:nth-child(odd):not(:last-child)::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 2px;
        height: calc(100% - 32px);
        background: transparent
            linear-gradient(180deg, #ce181e 0%, #302e6c 100%) 0% 0% no-repeat
            padding-box;
    }

    .bod-item > .row > .col-lg-4 {
        width: 42%;
    }

    .bod-item > .row > .col-lg-8 {
        width: 58%;
    }
}

/* Board of Directors page css end */

/* ==========================================================================
   Chairman's Message page css start  (chairmans-message.php)
   ========================================================================== */

/* --- full height banner : drop the artwork in as the background image --- */
.cm-banner {
    display: flex;
    align-items: stretch;
    height: 100vh;
    margin-bottom: 0;
    overflow: hidden;
    background-image: url('/documents/d/annual-reports-fy-2025-26/microsites_annualreports26_images_chairmans-message_bg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.md-banner {
    background-image: url('/documents/d/annual-reports-fy-2025-26/microsites_annualreports26_images_md-and-ceos_md-bg');
}

.cm-banner > .container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* the breadcrumb keeps its place at the top, the rest fills what is left */
.cm-banner-row {
    flex: 1;
    align-items: stretch;
    min-height: 0;
}

.cm-banner-row > [class*='col-'] {
    display: flex;
    min-height: 0;
}

/* heading sits in the middle of the section, on the left */
.cm-banner-txt {
    display: flex;
    align-items: center;
    height: 100%;
}

/* chairman photo is pinned to the bottom edge of the section */
.cm-banner-img {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.cm-banner-img img {
    display: block;
    width: auto;
    max-width: 480px;
    max-height: 100%;
    height: auto;
    object-fit: contain;
}

/* --- pull quote --- */
.cm-intro {
    padding: 40px 0;
}

.cm-quote > p {
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: #302e6c;
    padding-bottom: 20px;
}

/* --- name and designation --- */
.cm-author h5 {
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    width: max-content;
    background: linear-gradient(90deg, #ba1a2a 20%, #2b2075 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.strategy-focus-content > h3 {
    margin: 0;
    font-weight: 700;
    font-size: 21px;
    line-height: 1.22;
    color: #25217d;
}

.strategy-focus-copy {
    margin-top: 38px;
}

.strategy-focus-copy h4 {
    margin: 0 0 14px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
}

.strategy-focus-copy p {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.45;
    color: #000000;
}

/* --- strategy pillar metadata --- */
.strategy-pillar-next {
    padding-top: 5px;
}

#strategy-s05 {
    padding-bottom: 0;
}

.strategy-meta {
    display: grid;
    grid-template-columns: 25% 22% 53%;
    margin-top: 12px;
}

.strategy-meta > div {
    min-width: 0;
}

.strategy-meta h3 {
    margin: 0 5px 0 0;
    padding: 7px 12px;
    background: #e3f3fb;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #25217d;
    white-space: nowrap;
}

.strategy-meta > div:last-child h3 {
    margin-right: 0;
}

.strategy-capital-icons,
.strategy-theme-list,
.strategy-risk-list {
    padding: 10px 12px 0;
}

.strategy-capital-icons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.strategy-capital-icons img {
    display: block;
    width: auto;
    max-width: 70%;
    height: auto;
    max-height: 120px;
}

.strategy-capital-icons small {
    display: block;
    margin-top: 5px;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    font-style: italic;
    color: #000000;
}

.strategy-capital-icons small sup {
    font-size: 8px;
}

.strategy-theme-list {
    display: grid;
    grid-template-columns: repeat(3, 48px);
    gap: 12px 16px;
}

.strategy-theme-list span {
    position: relative;
    display: block;
    padding-bottom: 6px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: #000000;
}

.strategy-theme-list span::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 4px;
    width: 40px;
    height: 4px;
    background: linear-gradient(90deg, #ba1a2a 0%, #2b2075 70%);
}

.strategy-theme-list-wide {
    grid-template-columns: repeat(4, 44px);
    gap: 12px 10px;
}

.strategy-risk-list {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 5px 0;
}

.strategy-risk-list span {
    position: relative;
    display: inline-block;
    padding: 0 9px;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    color: #000000;
}

.strategy-risk-list span:first-child {
    padding-left: 0;
}

.strategy-risk-list span:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 0;
    width: 2px;
    height: 17px;
    background: #a41e52;
}

@media (max-width: 991px) {
    .strategy-page .atr-banner {
        margin-bottom: 16px;
    }

    .strategy-intro {
        padding-bottom: 35px;
    }

    .strategy-intro h2 {
        font-size: 30px;
        line-height: 1.25;
    }

    .strategy-intro p {
        font-size: 16px;
        line-height: 1.5;
    }

    .strategy-intro p + p {
        margin-top: 18px;
    }

    .strategy-pillar {
        padding-bottom: 35px;
    }

    .strategy-pillar-grid {
        display: flex;
        flex-direction: column;
    }

    .strategy-levers,
    .strategy-momentum {
        padding: 0 0 30px;
    }

    .strategy-pillar-focus {
        min-height: auto;
        margin-bottom: 30px;
    }

    .strategy-focus-content {
        padding: 20px 25px 35px;
    }

    .strategy-focus-copy {
        margin-top: 35px;
    }

    .strategy-meta {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 0;
    }

    .strategy-meta h3 {
        margin-right: 0;
        white-space: normal;
    }

    .strategy-capital-icons img {
        max-width: 260px;
    }

    .strategy-theme-list {
        grid-template-columns: repeat(3, 48px);
    }

    .strategy-theme-list-wide {
        grid-template-columns: repeat(4, 44px);
    }

    .strategy-page-navigation .atr-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .strategy-page-navigation .atr-page-btn {
        width: 100%;
    }
}

/* Strategy page css end */

/* ==========================================================================
   External Environment page css start  (external-environment.php)
   ========================================================================== */

.external-environment-page .atr-banner {
    margin-bottom: 22px;
}

.external-environment-page .atr-banner-heading h1 {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #414042;
    color: #414042;
}

.external-environment-intro {
    padding-bottom: 50px;
}

.external-environment-intro h2 {
    max-width: fit-content;
    margin-bottom: 18px;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.25;
    background: linear-gradient(90deg, #ba1a2a 0%, #2b2075 75%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.external-environment-intro p {
    max-width: 1100px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #302e6c;
}

/* --- external environment highlights --- */
.external-highlights {
    padding: 5px 0 50px;
}

.external-highlights-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 35px;
}

.external-highlight-value {
    margin-bottom: 3px;
    font-weight: 500;
    font-size: 36px;
    line-height: 40px;
    color: #54256d;
}

.external-highlight-value strong {
    font-weight: 700;
    font-weight: normal;
    color: #b51f3b;
}

/* the unit only : must not catch span.counter inside the strong */
.external-highlight-value > span {
    font-size: 28px;
}

.external-highlight-item p {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    color: #000000;
}

/* --- trend --- */
.external-trend {
    padding-bottom: 60px;
}

.external-trend-last {
    padding-bottom: 0;
}

.external-trend-heading {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 62px;
    padding-left: 63px;
}

.external-trend-number {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #ce181e 0%, #302e6c 100%);
    font-weight: 700;
    font-size: 34px;
    line-height: 1;
    color: #ffffff;
}

.external-trend-title {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    width: 100%;
    min-height: 38px;
    background: linear-gradient(
        90deg,
        #c62242 0%,
        #d2c9d9 27%,
        #f7f7f9 75%,
        #ffffff 100%
    );
}

.external-trend-title span {
    padding: 6px 17px 6px 26px;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    text-transform: uppercase;
    color: #ffffff;
}

.external-trend-title h2 {
    margin: 0;
    padding: 6px 20px;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #302e6c;
}

.external-trend-content {
    padding-top: 28px;
}

.external-trend-block {
    width: 100%;
}

.external-trend-block + .external-trend-block {
    margin-top: 30px;
}

.external-trend-block h3 {
    margin: 0 0 7px;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #302e6c;
}

.external-trend-response h3 {
    color: #ce181e;
}

.external-trend-block p {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.45;
    color: #000000;
}

.external-trend-block sup {
    font-size: 10px;
    line-height: 0;
}

.external-trend-source {
    margin: 28px 0 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    font-style: italic;
    color: #000000;
}

.external-trend-source span {
    padding: 0 9px;
    font-style: normal;
    color: #302e6c;
}

@media (max-width: 991px) {
    .external-environment-page .atr-banner {
        margin-bottom: 16px;
    }

    .external-environment-intro {
        padding-bottom: 35px;
    }

    .external-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .external-trend-title {
        display: block;
        padding: 8px 15px 8px 25px;
    }

    .external-trend-title span,
    .external-trend-title h2 {
        display: block;
        padding: 0;
    }

    .external-trend-title h2 {
        margin-top: 3px;
    }

    .external-page-navigation .atr-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .external-page-navigation .atr-page-btn {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .external-trend-heading {
        align-items: flex-start;
        padding-top: 78px;
        padding-left: 0;
    }

    .external-trend-number {
        top: 0;
        transform: none;
    }

    .external-trend-title {
        min-height: auto;
        padding: 10px 15px;
    }
}

/* External Environment page css end */

/* ==========================================================================
   Materiality page css start  (materiality.php)
   ========================================================================== */

.materiality-page .atr-banner {
    margin-bottom: 22px;
}

.materiality-page .atr-banner-heading h1 {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #414042;
    color: #414042;
}

.materiality-intro {
    padding-bottom: 50px;
}

.materiality-intro h2 {
    max-width: fit-content;
    margin-bottom: 18px;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.25;
    background: linear-gradient(90deg, #ba1a2a 0%, #2b2075 75%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.materiality-intro p {
    max-width: 1100px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #302e6c;
}

@media (max-width: 991px) {
    .materiality-page .atr-banner {
        margin-bottom: 16px;
    }

    .materiality-intro {
        padding-bottom: 35px;
    }
}

/* Materiality page css end */

/* ==========================================================================
   Stakeholder Engagement page css start  (stakeholder-engagement.php)
   ========================================================================== */

.stakeholder-engagement-page .atr-banner {
    margin-bottom: 22px;
}

.stakeholder-engagement-page .atr-banner-heading h1 {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #414042;
    color: #414042;
}

.stakeholder-engagement-intro {
    padding-bottom: 50px;
}

.stakeholder-engagement-intro h2 {
    max-width: fit-content;
    margin-bottom: 18px;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.25;
    background: linear-gradient(90deg, #ba1a2a 0%, #2b2075 75%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.stakeholder-engagement-intro p {
    max-width: 1100px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #302e6c;
}

@media (max-width: 991px) {
    .stakeholder-engagement-page .atr-banner {
        margin-bottom: 16px;
    }

    .stakeholder-engagement-intro {
        padding-bottom: 35px;
    }
}

/* Stakeholder Engagement page css end */

/* ==========================================================================
   Value Creation Model page css start  (value-creation-model.php)
   ========================================================================== */

.value-creation-model-page .atr-banner {
    margin-bottom: 22px;
}

.value-creation-model-page .atr-banner-heading h1 {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #414042;
    color: #414042;
}

.value-creation-model-intro {
    padding-bottom: 50px;
}

.value-creation-model-intro h2 {
    max-width: fit-content;
    margin: 0 0 30px;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.25;
    background: linear-gradient(90deg, #ba1a2a 0%, #2b2075 75%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.value-creation-sdg-placeholder,
.value-creation-sdg-img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- value creation accordions --- */
.value-creation-accordions {
    padding-bottom: 60px;
}

.value-accordion-item {
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid #c9e8f3;
    border-radius: 50px;
    background: #ffffff;
}

.value-accordion-item:last-child {
    margin-bottom: 0;
}

.value-accordion-header {
    margin: 0;
}

.value-accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 58px;
    padding: 10px 18px 10px 28px;
    border: none;
    background: transparent;
    box-shadow: none;
    text-align: left;
    cursor: pointer;
}

.value-accordion-button span {
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #302e6c;
}

.value-accordion-icon {
    position: relative;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 1px solid #302e6c;
    border-radius: 50%;
    font-style: normal;
}

.value-accordion-icon::before,
.value-accordion-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background: #302e6c;
    transform: translate(-50%, -50%);
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.value-accordion-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.value-accordion-button[aria-expanded='true'] .value-accordion-icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
}

.value-accordion-body {
    padding: 20px 28px;
    border-top: 1px solid #c9e8f3;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #000000;
}

/* --- input capital grid --- */
.value-input-list {
    display: block;
}

.value-input-column {
    display: block;
}

.value-input-column + .value-input-column {
    margin-top: 24px;
}

.value-input-capital {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 14px;
    padding: 0 0 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, #ce181e 0%, #302e6c 100%) 1;
}

.value-input-capital:last-child {
    margin-bottom: 0;
}

.value-input-capital-natural {
    border-bottom: none;
}

.value-input-icon {
    display: block;
    width: 54px;
    max-height: 58px;
    object-fit: contain;
}

.value-input-capital h3 {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
}

.value-input-capital ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.value-input-capital li {
    position: relative;
    margin-bottom: 0;
    padding-left: 18px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #000000;
}

.value-input-capital li:last-child {
    margin-bottom: 0;
}

.value-input-capital li::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    width: 6px;
    height: 6px;
    background: #ce181e;
}

.value-input-capital strong {
    font-weight: 700;
}

/* --- capital-wise output --- */
.value-output-capital {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, #ce181e 0%, #302e6c 100%) 1;
}

.value-output-capital-last {
    margin-bottom: 0;
    border-bottom: none;
}

.value-output-capital h3 {
    margin: 0 0 10px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
}

.value-output-capital ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 45px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.value-output-capital li {
    position: relative;
    padding-left: 18px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #000000;
}

.value-output-capital li::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    width: 6px;
    height: 6px;
    background: #ce181e;
}

.value-output-capital strong {
    font-weight: 700;
}

.value-output-capital sup,
.value-output-capital sub {
    line-height: 0;
}

/* --- outcomes --- */
.value-outcomes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
}

.value-outcome-item {
    min-height: 190px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, #ce181e 0%, #302e6c 100%) 1;
}

.value-outcomes-column .value-outcome-item:last-child {
    min-height: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.value-outcome-item h3 {
    margin: 0 0 10px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
}

.value-outcome-item hgroup {
    display: flex;
    gap: 0;
    flex-direction: column;
    margin-bottom: 1rem;
}

.value-outcome-item hgroup p {
    margin: 0 0 10px;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #4d4b4b;
}

.value-outcome-item ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.value-outcome-item li {
    position: relative;
    margin-bottom: 9px;
    padding-left: 19px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #000000;
}

.value-outcome-item li:last-child {
    margin-bottom: 0;
}

.value-outcome-item li::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    width: 6px;
    height: 6px;
    background: #ce181e;
}

/* --- UN SDGs by capital --- */
.value-sdg-grid {
    display: block;
}

.value-sdg-capital {
    min-height: 225px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, #ce181e 0%, #302e6c 100%) 1;
}

.value-sdg-capital-last {
    min-height: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.value-sdg-capital h3 {
    margin: 0 0 12px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
}

.value-sdg-logo {
    display: block;
    width: 72px;
    height: auto;
    max-height: 58px;
    margin-bottom: 15px;
    object-fit: contain;
}

/* --- the SDG goals, drawn as boxes rather than an exported image --- */
/* wraps only when the row runs out of width : on desktop every set fits
   on one line, on narrow screens the goals flow onto a second row */
.value-sdg-goals {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.value-sdg-goal {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 2px solid;
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
    color: #4d4d4f;
}

/* official UN goal colours, in the print palette used across the report */
.value-sdg-goal.sdg-01 {
    border-color: #e91f2f;
}
.value-sdg-goal.sdg-02 {
    border-color: #d19e2a;
}
.value-sdg-goal.sdg-03 {
    border-color: #2d9947;
}
.value-sdg-goal.sdg-04 {
    border-color: #c22234;
}
.value-sdg-goal.sdg-05 {
    border-color: #ef4128;
}
.value-sdg-goal.sdg-06 {
    border-color: #00add8;
}
.value-sdg-goal.sdg-07 {
    border-color: #fbb716;
}
.value-sdg-goal.sdg-08 {
    border-color: #8f1839;
}
.value-sdg-goal.sdg-09 {
    border-color: #f36e25;
}
.value-sdg-goal.sdg-10 {
    border-color: #e01a82;
}
.value-sdg-goal.sdg-11 {
    border-color: #f99e27;
}
.value-sdg-goal.sdg-12 {
    border-color: #cc8c2a;
}
.value-sdg-goal.sdg-13 {
    border-color: #48783e;
}
.value-sdg-goal.sdg-14 {
    border-color: #007dbc;
}
.value-sdg-goal.sdg-15 {
    border-color: #40ad49;
}
.value-sdg-goal.sdg-16 {
    border-color: #00558a;
}
.value-sdg-goal.sdg-17 {
    border-color: #1f3668;
}

.value-sdg-tiles {
    display: grid;
    grid-template-columns: repeat(7, 36px);
    gap: 8px;
}

.value-sdg-tiles span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid currentColor;
    font-weight: 700;
    font-size: 13px;
    color: #ce181e;
}

.value-sdg-tiles .sdg-red {
    color: #ef3340;
}
.value-sdg-tiles .sdg-burgundy {
    color: #a21942;
}
.value-sdg-tiles .sdg-orange {
    color: #fd9d24;
}
.value-sdg-tiles .sdg-yellow {
    color: #bf8b2e;
}
.value-sdg-tiles .sdg-green {
    color: #4c9f38;
}
.value-sdg-tiles .sdg-green-dark {
    color: #3f7e44;
}
.value-sdg-tiles .sdg-blue {
    color: #00689d;
}
.value-sdg-tiles .sdg-blue-light {
    color: #26bde2;
}
.value-sdg-tiles .sdg-navy {
    color: #19486a;
}
.value-sdg-tiles .sdg-pink {
    color: #dd1367;
}

/* --- business approach grid --- */
.value-business-body {
    padding: 0;
}

.value-business-grid {
    display: block;
}

.value-business-model,
.value-business-activities {
    padding: 22px 20px;
    background: linear-gradient(180deg, #d6f1f8 0%, #edf9fc 100%);
}

.value-business-principles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, #ce181e 0%, #302e6c 100%) 1;
}

.value-business-principles > div,
.value-offerings-grid > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
}

.value-business-icon {
    display: block;
    flex: 0 0 46px;
    width: 46px;
    max-height: 50px;
    object-fit: contain;
}

.value-business-principles strong,
.value-offerings-grid strong {
    font-weight: 700;
    font-size: 16px;
    line-height: 21px;
    color: #302e6c;
}

.value-business-model-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 390px;
    margin: 18px auto 0;
    border: 2px dashed #b51f48;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #fff7ea 0 31%, transparent 31%),
        linear-gradient(
            135deg,
            rgba(206, 24, 30, 0.16),
            rgba(48, 46, 108, 0.18)
        );
    text-align: center;
}

.value-business-model-placeholder span {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.35;
    color: #8a5274;
}

.value-business-model-img {
    display: block;
    width: 100%;
    max-width: 430px;
    margin: 18px auto 0;
    height: auto;
}

.value-business-activities {
    border-top: 1px solid rgba(48, 46, 108, 0.18);
}

.value-business-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #302e6c;
}

.value-business-section-heading::before,
.value-business-section-heading::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #ce181e, #302e6c);
}

.value-business-activities h4 {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 17px;
    line-height: 23px;
    color: #000000;
}

.value-business-list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

.value-business-list li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 18px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: #000000;
}

.value-business-list li::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    width: 6px;
    height: 6px;
    background: #ce181e;
}

.value-business-what-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 30px;
}

.value-business-functions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

.value-business-offerings {
    padding-top: 18px;
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, #ce181e 0%, #302e6c 100%) 1;
}

.value-offerings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 12px;
}

.value-business-stakeholders {
    margin: 22px;
    padding: 24px;
    border: 1px solid transparent;
    border-radius: 32px;
    background:
        linear-gradient(#e8f8fc, #f7fcfe) padding-box,
        linear-gradient(135deg, #ce181e, #302e6c) border-box;
}

.value-business-stakeholders h3,
.value-business-strategy h3 {
    margin: 0 0 18px;
    font-weight: 700;
    font-size: 17px;
    line-height: 23px;
    color: #000000;
}

.value-business-stakeholders ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.value-business-stakeholders li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #000000;
}

.value-business-stakeholders li:last-child {
    margin-bottom: 0;
}

.value-business-strategy {
    padding: 22px;
}

.value-strategy-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 24px;
}

.value-strategy-list > div {
    display: grid;
    grid-template-columns: 55px 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

.value-strategy-list span {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding-left: 11px;
    border-radius: 0 24px 24px 0;
    background: linear-gradient(90deg, #ce181e 0%, #302e6c 100%);
    font-weight: 700;
    font-size: 18px;
    color: #ffffff;
}

.value-strategy-list p {
    margin: 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.25;
    color: #414042;
}

.value-business-strategy .value-esg-title {
    margin-top: 35px;
    margin-bottom: 10px;
}

.value-esg-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 24px;
    margin: 0;
}

.value-esg-list > div {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.value-esg-list dt {
    font-weight: 700;
    color: #302e6c;
}

.value-esg-list dd {
    margin: 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    color: #414042;
}

.value-accordion-button:focus {
    outline: 2px solid rgba(48, 46, 108, 0.35);
    outline-offset: -2px;
}

@media (max-width: 991px) {
    .value-creation-model-page .atr-banner {
        margin-bottom: 16px;
    }

    .value-creation-model-intro {
        padding-bottom: 35px;
    }

    .value-creation-model-intro h2 {
        margin-bottom: 22px;
    }

    .value-accordion-button {
        padding-left: 18px;
    }

    .value-business-stakeholders ul,
    .value-strategy-list,
    .value-esg-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .value-input-capital ul {
        grid-template-columns: 1fr;
    }

    .value-output-capital ul {
        grid-template-columns: 1fr;
    }

    .value-business-functions {
        grid-template-columns: 1fr;
    }

    .value-business-what-list {
        grid-template-columns: 1fr;
    }

    .value-business-stakeholders ul,
    .value-strategy-list,
    .value-esg-list {
        grid-template-columns: 1fr;
    }

    .value-outcomes-grid {
        grid-template-columns: 1fr;
    }

    .value-outcome-item {
        min-height: 0;
    }

    .value-sdg-grid {
        grid-template-columns: 1fr;
    }

    .value-sdg-capital {
        min-height: 0;
    }

    .value-sdg-goals {
        gap: 8px;
    }

    .value-sdg-goal {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .value-offerings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Value Creation Model page css end */

/* ==========================================================================
   Stakeholder Engagement page content
   ========================================================================== */

.stakeholder-details {
    padding: 5px 0 0;
}

.stakeholder-details-title {
    margin: 0 0 28px;
    font-weight: 500;
    font-size: 30px;
    line-height: 38px;
    background: linear-gradient(90deg, #ce181e 0%, #302e6c 55%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.stakeholder-card {
    position: relative;
    padding: 34px 25px 24px;
    background: linear-gradient(180deg, #eeeaf5 0%, #f4f2f8 52%, #fefeff 100%);
}

.stakeholder-card + .stakeholder-card {
    margin-top: 45px;
}

.stakeholder-card-label {
    position: absolute;
    top: 0;
    left: 16px;
    margin: 0;
    padding: 7px 18px;
    border-radius: 0 0 12px 12px;
    background: #ffffff;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
}

.stakeholder-card-label span {
    color: #ce181e;
}

.stakeholder-card-icon {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 0 14px;
    font-weight: 500;
    font-size: 11px;
    color: #ffffff;
}

.stakeholder-card-icon img {
    display: block;
    width: 64px;
    max-height: 64px;
    object-fit: contain;
}

.stakeholder-card-top {
    display: grid;
    grid-template-columns: 38% 62%;
    gap: 35px;
    padding: 12px 100px 28px 0;
    border-bottom: 1px solid #302e6c;
}

.stakeholder-card-block h4,
.stakeholder-engagement-meta h4,
.stakeholder-capitals h4,
.stakeholder-risks h4 {
    margin: 0 0 5px;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #302e6c;
}

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

.stakeholder-list li {
    position: relative;
    margin-bottom: 4px;
    padding-left: 17px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.25;
    color: #000000;
}

.stakeholder-list li:last-child {
    margin-bottom: 0;
}

.stakeholder-list li::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    width: 7px;
    height: 7px;
    background: #00b5ef;
}

.stakeholder-list strong,
.stakeholder-engagement-meta strong {
    font-weight: 700;
}

.stakeholder-card-bottom {
    display: grid;
    grid-template-columns: 38% 62%;
    gap: 35px;
    padding-top: 28px;
}

.stakeholder-bottom-details {
    display: grid;
    grid-template-columns: 38% 27% 33%;
    gap: 22px;
}

.stakeholder-engagement-meta {
    display: flex;
    flex-direction: column;
    gap: 23px;
}

.stakeholder-engagement-meta p {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: #000000;
}

.stakeholder-placeholder-grid {
    display: flex;
    align-items: flex-start;
    margin-top: 10px;
}

/* Grouped SVGs again: every file is the same 136.82 units wide but 1-2 rows tall.
   Pin the width so each icon cell renders identically and let height follow the
   row count — capping height would shrink the two-row groups' icons. */
.stakeholder-placeholder-grid img {
    display: block;
    width: 124px;
    max-width: none;
    height: auto;
    object-fit: contain;
}

.stakeholder-placeholder-grid span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px dashed #b51f48;
    border-radius: 7px;
    font-weight: 500;
    font-size: 10px;
    color: #8a5274;
}

.stakeholder-no-risk {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #000000;
}

@media (max-width: 991px) {
    .stakeholder-card-top,
    .stakeholder-card-bottom {
        grid-template-columns: 1fr;
    }

    .stakeholder-card-top {
        padding-top: 65px;
        padding-right: 0;
    }

    .stakeholder-bottom-details {
        grid-template-columns: repeat(3, 1fr);
    }

    .stakeholder-page-navigation .atr-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .stakeholder-page-navigation .atr-page-btn {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .stakeholder-details-title {
        font-size: 25px;
        line-height: 32px;
    }

    .stakeholder-card {
        padding-right: 15px;
        padding-left: 15px;
    }

    .stakeholder-card-label {
        right: 0;
        left: 0;
        max-width: calc(100% - 75px);
        font-size: 16px;
    }

    .stakeholder-card-icon {
        width: 70px;
        height: 70px;
    }

    .stakeholder-bottom-details {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Materiality page content
   ========================================================================== */

.materiality-section-title {
    margin: 0 0 35px;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #302e6c;
}

/* --- materiality process --- */
.materiality-process {
    padding: 5px 0 55px;
}

.materiality-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px;
}

.materiality-process-visual {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 28px;
    overflow: visible;
    border-radius: 0;
    background: transparent;
}

.materiality-process-step:not(:last-child) .materiality-process-visual::after {
    content: none;
    position: absolute;
    top: 50%;
    right: -34px;
    width: 24px;
    height: 38px;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #ce181e 0%, #302e6c 100%);
    clip-path: polygon(0 0, 58% 0, 100% 50%, 58% 100%, 0 100%, 42% 50%);
}

.materiality-icon-placeholder,
.materiality-small-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #b51f48;
    font-weight: 500;
    font-size: 11px;
    color: #8a5274;
}

.materiality-icon-placeholder {
    width: 72px;
    height: 72px;
    border-radius: 12px;
}

.materiality-process-visual img {
    display: block;
    width: 108px;
    max-height: 86px;
    object-fit: contain;
}

.materiality-process-step h3 {
    margin: 0 0 7px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
}

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

.materiality-list li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 18px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #000000;
}

.materiality-list li:last-child {
    margin-bottom: 0;
}

.materiality-list li::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    width: 7px;
    height: 7px;
    background: #00b5ef;
}

/* --- capitals, objectives and stakeholders map --- */
.materiality-map {
    padding-bottom: 55px;
}

.materiality-map-panel {
    padding: 0 25px 28px;
    background: linear-gradient(90deg, #f5fafc 0%, #d6ecf8 48%, #f9fbfc 100%);
}

.materiality-gradient-label {
    display: inline-block;
    margin: 0;
    padding: 7px 14px;
    background: linear-gradient(90deg, #ce181e 0%, #302e6c 100%);
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #ffffff;
}

.materiality-map-capitals {
    padding-bottom: 22px;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, #ce181e 0%, #302e6c 100%) 1;
}

.materiality-capital-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    padding-top: 15px;
}

.materiality-map-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.materiality-capital-grid .materiality-map-item {
    min-height: 62px;
    padding: 0 18px;
    border-right: 1px solid #9c3870;
}

.materiality-capital-grid .materiality-map-item:first-child {
    padding-left: 0;
}

.materiality-capital-grid .materiality-map-item:last-child {
    padding-right: 0;
    border-right: none;
}

.materiality-small-placeholder {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 8px;
}

.materiality-map-item img {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.materiality-map-item p {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #000000;
}

.materiality-map-lower {
    display: grid;
    grid-template-columns: 44% 56%;
    padding-top: 32px;
}

.materiality-objectives {
    padding-right: 45px;
    border-right: 1px solid transparent;
    border-image: linear-gradient(180deg, #ce181e 0%, #302e6c 100%) 1;
}

.materiality-objectives .materiality-list {
    padding-top: 17px;
}

.materiality-objectives .materiality-list li {
    margin-bottom: 20px;
}

.materiality-objectives .materiality-list strong {
    font-weight: 500;
    font-weight: normal;
    color: #ce181e;
}

.materiality-stakeholders {
    padding-left: 70px;
}

.materiality-stakeholder-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 70px;
    padding-top: 18px;
}

/* --- material topics --- */
.materiality-topics {
    padding-bottom: 0;
}

.materiality-topics-title {
    margin: 0 0 30px;
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    color: #bf202f;
}

.materiality-topic-card {
    margin-bottom: 48px;
    padding: 0 30px 28px;
    border-bottom: 2px solid #302e6c;
    border-radius: 0 0 28px 28px;
}

.materiality-topic-card:last-child {
    margin-bottom: 0;
}

.materiality-topic-heading {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: stretch;
    margin: 0 -30px 28px;
}

.materiality-topic-heading > span {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    background: #00a9df;
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
    color: #ffffff;
}

.materiality-topic-heading h3 {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 4px 16px;
    background: linear-gradient(90deg, #ddf2fa 0%, #62c4e3 100%);
    font-weight: 700;
    font-size: 24px;
    line-height: 34px;
    color: #302e6c;
}

.materiality-topic-main {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 30px;
    padding-bottom: 22px;
}

.materiality-topic-card h4 {
    margin: 0 0 5px;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #302e6c;
}

.materiality-topic-main p,
.materiality-topic-meta p {
    margin: 0 0 5px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #000000;
}

.materiality-topic-main .materiality-list li {
    margin-bottom: 8px;
}

/* Default (>=1400px, where the Bootstrap container is 1320px): all four blocks
   sit in ONE row, as originally designed. Columns 2 and 4 hold grouped icon
   strips whose widest members render at 250px (m5 capitals) and 363px (m2
   stakeholders) at the 52px icon height, so those tracks are sized to fit
   their content outright rather than clipping it. */
.materiality-topic-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px minmax(0, 0.8fr) 375px;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, #ce181e 0%, #302e6c 100%) 1;
}

/* Below 1400px the Bootstrap container drops from 1320px to 1140px. The two
   icon tracks (260 + 375) plus gaps cost 695px of that, leaving too little for
   the two text columns, so the single row stops working here — and only here.

   At these widths only, switch to the 40%/60% split that matches
   .materiality-topic-main above, so each meta block lines up vertically with
   the text column it belongs to:
     left  (under "Why is it material?"): UN SDGs, then Strategic objectives
     right (under "How we address"):      Capitals, then Stakeholders impacted

   Placement is explicit rather than DOM-ordered: source order across all ten
   cards is SDGs / Capitals / Objectives / Stakeholders, so normal flow would
   pair them the wrong way. */
@media (max-width: 1399px) {
    .materiality-topic-meta {
        grid-template-columns: 40% 60%;
        column-gap: 30px;
        row-gap: 24px;
    }

    .materiality-topic-meta > *:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    } /* UN SDGs */
    .materiality-topic-meta > *:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    } /* Capitals impacted */
    .materiality-topic-meta > *:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    } /* Strategic objectives */
    .materiality-topic-meta > *:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
    } /* Stakeholders impacted */
}

.materiality-placeholder-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 7px;
}

.materiality-placeholder-row span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px dashed #b51f48;
    border-radius: 5px;
    font-weight: 500;
    font-size: 9px;
    line-height: 1.1;
    text-align: center;
    color: #8a5274;
}

/* These are grouped SVGs: one file holds 1-7 icons side by side, so their widths
   differ wildly while every icon cell is the same height. Size them by height
   only — capping width would shrink the wide strips and make their icons look
   smaller than the single-icon ones.

   --icon-cell is the size ONE icon should render at. Every rule below derives
   from it, so the breakpoints only ever change this single number and all the
   groups stay equal to each other. */
.materiality-topic-meta {
    --icon-cell: 52px;
}

.materiality-placeholder-row img {
    display: block;
    width: auto;
    max-width: none;
    height: var(--icon-cell);
    object-fit: contain;
}

/* m2's capitals art is the one file laid out on two rows (viewBox 213x129), so
   it needs twice the height to render its icons at the same size as everyone
   else. Without this it renders at half scale — the odd small group. */
.materiality-topic-meta
    .materiality-placeholder-row
    img[src*='m2-capital-icon'] {
    height: calc(var(--icon-cell) * 2);
}

.materiality-sdg-row span {
    width: 48px;
    height: 48px;
    border-color: #00a9df;
    color: #302e6c;
}

/* SDG art ships in two cell heights (60 and 50.67 units) and some files stack
   two rows, so each variant is expressed as a multiple of the same --icon-cell
   and every SDG tile lands at one size on screen. */
.materiality-sdg-row img {
    height: var(--icon-cell);
}

/* 50.67-unit cells: scale up so the tile matches the 60-unit ones */
.materiality-sdg-row img[src*='m4-sdg'],
.materiality-sdg-row img[src*='m5-sdg'],
.materiality-sdg-row img[src*='m6-sdg'],
.materiality-sdg-row img[src*='m7-sdg'] {
    height: calc(var(--icon-cell) * 0.845);
}

/* two rows of 60-unit cells */
.materiality-sdg-row img[src*='m3-sdg'] {
    height: calc(var(--icon-cell) * 2);
}

/* two rows of 50.67-unit cells */
.materiality-sdg-row img[src*='m8-sdg'],
.materiality-sdg-row img[src*='m9-sdg'],
.materiality-sdg-row img[src*='m10-sdg'] {
    height: calc(var(--icon-cell) * 1.76);
}

/* One number per breakpoint: every group above is a multiple of it, so the
   icons shrink together and stay equal to each other at every width. */
@media (max-width: 1399px) {
    .materiality-topic-meta {
        --icon-cell: 44px;
    }
}

@media (max-width: 767px) {
    .materiality-topic-meta {
        --icon-cell: 38px;
    }
}

/* ==========================================================================
   Social and Relationship Capital - Customers page
   ========================================================================== */

.social-customers-page .atr-banner {
    margin-bottom: 18px;
}

.src-section-title,
.src-sdg-block h2,
.src-material-block h2 {
    margin: 0;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #302e6c;
}

.src-section-title {
    margin-bottom: 26px;
}

.src-impact-panel {
    position: relative;
    display: grid;
    grid-template-columns: 64% 6% 30%;
    align-items: center;
    margin-bottom: 42px;
    overflow: hidden;
    background: linear-gradient(
        90deg,
        rgba(217, 242, 250, 0.96) 0%,
        rgba(170, 218, 239, 0.96) 62%,
        rgba(204, 234, 248, 0.96) 100%
    );
    border-radius: 0 150px 150px 0;
}

.src-impact-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -130px;
    width: 67%;
    height: 100%;
    border-radius: 0 150px 150px 0;
    background: rgba(154, 211, 236, 0.58);
}

.src-impact-column {
    position: relative;
    z-index: 1;
    align-self: stretch;
}

.src-impact-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 10px 20px;
    background: linear-gradient(90deg, #ce181e 0%, #302e6c 100%);
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
}

/* the arrow sits beside the label, not at the far end of the bar */
.src-impact-column:first-child .src-impact-heading {
    width: calc(100% + 100%);
    max-width: calc(100% + 68px);
    justify-content: flex-start;
    gap: 44px;
}

.src-impact-heading img {
    width: 20px;
    max-height: 22px;
    object-fit: contain;
}

.src-outcome-column .src-impact-heading {
    justify-content: center;
    background: #302e6c;
    border-radius: 0 28px 28px 0;
}

.src-square-list {
    list-style: none;
    margin: 0;
    padding: 26px 26px;
}

.src-square-list li {
    position: relative;
    margin-bottom: 9px;
    padding-left: 18px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #000000;
}

.src-square-list li:last-child {
    margin-bottom: 0;
}

.src-square-list li::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 0;
    width: 7px;
    height: 7px;
    background: #00b5ef;
}

.src-impact-arrow {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.src-impact-arrow img {
    width: 34px;
    max-height: 34px;
    object-fit: contain;
}

.src-alignment-grid {
    display: grid;
    grid-template-columns: 38% 47%;
    gap: 8%;
    align-items: start;
}

.src-sdg-block h2,
.src-material-block h2 {
    margin-bottom: 15px;
    color: #000000;
}

.src-sdg-block img {
    display: block;
    max-width: 380px;
    width: 100%;
    height: auto;
}

.src-material-grid {
    display: grid;
    grid-template-columns: 52px 1fr;
}

.src-material-grid > div {
    display: contents;
}

.src-material-grid strong,
.src-material-grid span {
    padding: 8px 0;
    border-bottom: 1px solid #2b2b2b;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.25;
    color: #000000;
}

.src-material-grid strong {
    background: linear-gradient(90deg, #ce181e 0%, #302e6c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.src-material-grid strong,
.src-kpi-item strong,
.src-kpi-item strong em,
.src-outcome-grid strong,
.src-outcome-grid strong em,
.src-feedback-summary strong,
.src-resolution-metric strong,
.src-resolution-metric strong em,
.src-resolution-text-metric p {
    background: linear-gradient(90deg, #ce181e 0%, #2a2076 130%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* every material matter closes with its own rule, including the last one, so
   the block ends on a line as printed */

.social-communities-page .src-relationships {
    background-image: none;
}

.src-material-grid-short {
    max-width: 430px;
}

/* the photo sits in the banner, so the KPI panel runs the full width */
.src-community-kpi-grid {
    margin-top: 44px;
}

.src-community-kpi-panel {
    padding: 24px 34px 28px;
    border-radius: 0 0 0 70px;
    background: #e5f4fb;
}

.src-community-kpi-panel h2 {
    display: inline-block;
    margin: 0 0 22px;
    padding: 4px 34px;
    background: linear-gradient(90deg, #ce181e 0%, #302e6c 100%);
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: #ffffff;
}

/* three explicit columns holding 3 / 4 / 6 items, so each column reads top to
   bottom as printed rather than the items wrapping across the rows */
.src-community-kpi-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 0 28px;
}

.src-community-kpi-item {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #7a3b85;
}

/* the last rule in each column is the panel's own edge — dropped, as printed */
.src-community-kpi-col > .src-community-kpi-item:last-child {
    margin-bottom: 0;
}

.src-community-kpi-item strong {
    display: block;
    font-weight: 700;
    font-size: 26px;
    line-height: 30px;
    max-width: fit-content;
    background: linear-gradient(90deg, #ce181e 0%, #2a2076 130%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.src-community-kpi-item strong .counter {
    display: inline;
    font: inherit;
}

.src-community-kpi-item strong em {
    font-weight: 400;
    font-style: normal;
}

.src-community-kpi-item > span {
    display: block;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.25;
    color: #000000;
}

.src-community-content {
    margin-top: 48px;
}

.src-community-content section {
    margin-bottom: 34px;
}

.src-community-content h2 {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #2a2076;
}

.src-community-content p {
    margin: 0 0 20px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #000000;
}

.src-community-content p:last-child {
    margin-bottom: 0;
}

.src-community-priorities ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: community-priority;
}

.src-community-priorities li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 48px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #000000;
    counter-increment: community-priority;
}

.src-community-priorities li::before {
    content: counter(community-priority) ')';
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 500;
}

.src-community-priorities li strong {
    display: block;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.25;
}

.src-community-priorities li span {
    display: block;
}

.src-community-pillar-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 70px;
    margin-top: 50px;
    padding-bottom: 40px;
}

.src-community-pillar img {
    display: block;
    width: 78px;
    max-height: 78px;
    margin-bottom: 16px;
    object-fit: contain;
}

.src-community-pillar h3 {
    margin: 0 0 6px;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #000000;
}

.src-community-pillar strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    max-width: fit-content;
    background: linear-gradient(90deg, #ce181e 0%, #2a2076 130%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.src-community-pillar strong .counter {
    display: inline;
    font: inherit;
}

.src-community-pillar p {
    margin: 0;
    font-size: 16px;
}

.src-community-plant {
    margin-top: 20px;
}

.src-community-plant img {
    display: block;
    width: 100%;
    height: auto;
}

.src-impact-story {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px;
    align-items: start;
    margin-top: 48px;
    padding: 20px 18px 28px;
    border-radius: 8px;
    background: linear-gradient(
        115deg,
        rgba(244, 209, 211, 0.92) 0%,
        rgba(247, 233, 236, 0.82) 48%,
        rgba(222, 224, 240, 0.92) 100%
    );
}

.src-impact-story-card h2 {
    display: inline-block;
    margin: 0 0 30px;
    padding: 10px 28px 10px 18px;
    border-radius: 0 24px 24px 0;
    background: #302e6c;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #f6a800;
}

.src-impact-story-card figure {
    position: relative;
    overflow: hidden;
    border-radius: 8px 8px 24px 0;
}

.src-impact-story-card img {
    display: block;
    width: 100%;
    height: auto;
}

.src-impact-story-card figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 16px;
    border-radius: 0 20px 20px 0;
    background: linear-gradient(90deg, #ce181e 0%, #2a2076 130%);
    font-weight: 700;
    font-size: 18px;
    line-height: 23px;
    color: #ffffff;
}

.src-impact-story-copy {
    padding-top: 64px;
}

.src-impact-story-copy p {
    max-width: 560px;
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 22px;
    color: #000000;
}

.src-impact-story-full {
    grid-column: 1 / -1;
}

.src-impact-story-full p {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 22px;
    color: #000000;
}

.src-impact-story-wide {
    margin-top: 34px;
    padding: 20px 18px 28px;
    border-radius: 8px;
    background: linear-gradient(
        115deg,
        rgba(244, 209, 211, 0.92) 0%,
        rgba(247, 233, 236, 0.82) 48%,
        rgba(222, 224, 240, 0.92) 100%
    );
}

.src-impact-story-wide-rounded {
    border-radius: 8px 0 70px 8px;
}

.src-impact-story-wide h2 {
    display: inline-block;
    margin: 0 0 28px;
    padding: 10px 28px 10px 18px;
    border-radius: 0 24px 24px 0;
    background: #302e6c;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #f6a800;
}

.src-impact-story-wide-copy {
    margin-bottom: 34px;
}

.src-impact-story-wide-copy p {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 22px;
    color: #000000;
}

.src-impact-story-wide figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
}

.src-impact-story-wide img {
    display: block;
    width: 100%;
    height: auto;
}

.src-impact-story-wide figcaption {
    position: absolute;
    left: 0;
    bottom: 0;
    min-width: 42%;
    padding: 12px 18px;
    border-radius: 0 22px 22px 0;
    background: linear-gradient(90deg, #ce181e 0%, #2a2076 130%);
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #ffffff;
}

.src-community-way-forward {
    width: 100%;
    margin-top: 48px;
    margin-bottom: 58px;
    border-radius: 0 58px 58px 0;
}

.src-distribution-sdg {
    max-width: 360px;
}

.src-distribution-top-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 58px;
    align-items: start;
}

.src-distribution-info {
    display: grid;
    gap: 44px;
}

.src-distribution-material {
    max-width: 420px;
}

.src-distribution-kpi-panel {
    padding-top: 18px;
    background: transparent;
}

/* --- our priorities in FY26 : image left, priorities right --- */
.src-distribution-priorities {
    padding: 58px 0 20px;
}

.src-priorities-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 50px;
    align-items: stretch;
}

.src-priorities-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.src-priorities-content .src-section-title {
    margin-bottom: 28px;
}

.src-priority-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 26px;
}

/* the fifth priority runs the full width so its heading stays on one line */
.src-priority-item:last-child {
    grid-column: 1 / -1;
}

.src-priority-item {
    position: relative;
    padding-left: 22px;
}

/* line running down beside the copy, tangent to the left edge of the pill */
.src-priority-item::before {
    content: '';
    position: absolute;
    left: 21px;
    top: 44px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg, #ce181e 0%, #2a2075 100%);
}

.src-priority-item h3 {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin: 0 0 14px;
    padding: 10px 24px;
    background: linear-gradient(90deg, #7c204d 0%, #b9232d 55%, #e12614 100%);
    border-radius: 50px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
}

/* arc wrapping the rounded left cap of the pill */
.src-priority-item h3::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 0;
    bottom: 0;
    width: 22px;
    border: 1px solid #b9232d;
    border-right: 0;
    border-radius: 40px 0 0 40px;
}

.src-priority-item p {
    margin: 0;
    padding-left: 14px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #302e6c;
}

/* --- our multi-channel distribution network --- */
.src-distribution-channels {
    padding: 56px 0 0;
}

.src-channels-intro,
.src-enablement-intro {
    margin: 0 0 42px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.45;
    color: #000000;
}

.src-channel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 60px 40px;
    align-items: stretch;
}

.src-channel-card {
    position: relative;
    margin-top: 26px;
    padding: 54px 30px 34px;
    background: #e9f2fa;
    border-radius: 12px;
}

.src-channel-tab {
    position: absolute;
    top: -26px;
    left: 18px;
    max-width: calc(100% - 36px);
    margin: 0;
    padding: 12px 24px;
    background: #009fda;
    border-radius: 8px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
}

.src-channel-card h4 {
    margin: 0 0 14px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #302e6c;
}

.src-channel-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
}

.src-channel-stat strong,
.src-channel-highlight strong {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.15;
    color: #cf1a20;
    max-width: fit-content;
    background: linear-gradient(90deg, #ce181e 0%, #2a2076 130%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* the unit keeps a flat colour : text-fill-color inherits, so reset it */
.src-channel-stat strong em,
.src-channel-highlight strong em {
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    color: #7e1e4d;
    -webkit-text-fill-color: #7e1e4d;
}

/* direct child only : must not catch span.counter inside the strong */
.src-channel-stat > span,
.src-channel-highlight > span {
    display: block;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #000000;
}

.src-channel-rule {
    height: 1px;
    margin: 24px 0;
    background: rgba(48, 46, 108, 0.4);
}

.src-channel-rule-short {
    width: 48%;
}

.src-channel-card p {
    margin: 0 0 24px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #000000;
}

.src-channel-card .src-square-list {
    margin: 0;
    padding: 0;
}

/* the footnote sits in the grid, on its own row under the first two cards */
.src-channel-grid .src-channel-note {
    grid-column: 1 / -1;
    margin: -30px 0 0;
}

.src-channel-note {
    margin: 30px 0 0;
    font-weight: 400;
    font-style: italic;
    font-size: 15px;
    line-height: 1.35;
    color: #000000;
}

/* --- digital and business enablement --- */
.src-distribution-enablement {
    padding: 30px 0 0;
}

.src-enablement-intro {
    margin-bottom: 26px;
}

.src-enablement-subtitle {
    margin: 0 0 30px;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #000000;
}

.src-initiative-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 90px;
}

.src-initiative-item {
    position: relative;
    padding-top: 22px;
}

.src-initiative-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 92px;
    height: 5px;
    background: linear-gradient(90deg, #ce181e 0%, #302e6c 100%);
}

.src-initiative-item h4 {
    margin: 0 0 6px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #302e6c;
}

.src-initiative-item p {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #000000;
}

/* --- way forward panel --- */
.src-distribution-way-forward-wrap {
    padding: 60px 0 10px;
}

.src-distribution-way-forward {
    min-height: 0;
    padding: 72px 60px 72px 12%;
    border-radius: 40px;
}

.src-distribution-way-forward h2 {
    margin: 0 0 10px;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #ffffff;
}

.src-distribution-way-forward p {
    margin: 0;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: #ffffff;
}

/* the photo now sits in the banner, so the KPI panel runs the full width */
.src-kpi-grid {
    margin-top: 48px;
}

.src-kpi-panel {
    padding: 22px 34px 26px 0;
}

.src-kpi-panel h2 {
    display: inline-block;
    margin: 0 0 24px;
    padding: 4px 34px;
    background: linear-gradient(90deg, #ce181e 0%, #302e6c 100%);
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: #ffffff;
}

/* three across at full width, matching the other capital chapters */
.src-kpi-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 40px;
}

.src-kpi-item {
    min-height: 86px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #7a3b85;
}

.src-kpi-item strong {
    display: block;
    font-weight: 700;
    font-size: 26px;
    line-height: 30px;
    max-width: fit-content;
}

.src-kpi-item strong em {
    font-weight: 400;
    font-style: normal;
}

.src-kpi-item strong .counter {
    display: inline;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.src-outcome-grid strong .counter,
.src-feedback-summary strong .counter,
.src-resolution-metric strong .counter {
    display: inline;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.src-kpi-item > span {
    display: block;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.25;
    color: #000000;
}

.src-kpi-item sup {
    font-size: 65%;
}

.src-kpi-wide {
    grid-column: 1 / -1;
    min-height: 0;
    margin-bottom: 0;
}

.src-priority-service-grid {
    display: block;
    margin-top: 48px;
}

.src-service-delivery {
    margin-top: 38px;
}

.src-priorities h2,
.src-service-delivery h2 {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #302e6c;
}

.src-priorities .src-square-list,
.src-service-delivery .src-square-list {
    padding: 0;
}

/* the priorities run two across rather than one long column */
.src-priorities .src-square-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 50px;
}

.src-priorities .src-square-list li,
.src-service-delivery .src-square-list li {
    margin-bottom: 16px;
    font-size: 16px;
}

/* the grid gap handles the spacing between the priorities */
.src-priorities .src-square-list li {
    margin-bottom: 0;
}

.src-priorities .src-square-list strong {
    display: block;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
}

.src-priorities .src-square-list span {
    display: block;
    font-size: 16px;
    line-height: 1.35;
}

.src-service-delivery p {
    margin: 0 0 22px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #000000;
}

.src-service-delivery .src-square-list strong {
    font-weight: 700;
}

.src-customer-journey {
    margin-top: 40px;
}

.src-journey-intro h2,
.src-approach > h2,
.src-pillars h2,
.src-transforming-service > h2 {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #302e6c;
    padding-bottom: 20px;
}

.src-journey-intro p {
    max-width: 1030px;
    margin: 0 0 18px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #000000;
}

.src-journey-intro strong,
.src-approach-card strong {
    font-weight: 700;
}

.src-approach-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 36px;
}

.src-approach-card {
    position: relative;
    padding: 22px 24px 24px;
    border: 1px solid transparent;
    border-radius: 0 24px 24px 24px;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, #ce181e 0%, #302e6c 100%) border-box;
}

.src-approach-card h3 {
    position: absolute;
    top: -15px;
    left: 22px;
    margin: 0;
    padding: 0 18px;
    background: #ffffff;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #302e6c;
}

.src-approach-card p {
    margin: 0 0 20px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #000000;
}

.src-approach-card .src-square-list {
    padding: 0;
}

.src-approach-card .src-square-list li {
    margin-bottom: 14px;
    font-size: 16px;
}

.src-pillars {
    margin-top: 32px;
}

.src-pillar-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px 88px;
    padding-top: 6px;
}

.src-pillar-list span {
    display: flex;
    align-items: center;
    min-width: 305px;
    min-height: 60px;
    padding: 8px 34px;
    border-radius: 0 34px 34px 0;
    background: linear-gradient(90deg, #ffffff 0%, #b4e0f5 100%);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    color: #000000;
}

.src-transforming-service {
    margin-top: 36px;
}

.src-transform-row {
    display: grid;
    grid-template-columns: 42% 50%;
    gap: 8%;
    align-items: stretch;
    margin-top: 34px;
}

.src-innovation-card,
.src-outcome-card {
    position: relative;
    border-radius: 10px;
    background: linear-gradient(90deg, #e5f4fb 0%, #ffffff 100%);
    margin-bottom: 20px;
}

.src-innovation-card {
    padding: 46px 22px 24px;
}

.src-innovation-card h3 {
    position: absolute;
    top: -28px;
    left: 16px;
    margin: 0;
    padding: 10px 20px;
    border-radius: 8px;
    background: #00a9df;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
}

.src-innovation-card h4,
.src-outcome-card h4 {
    margin: 0 0 14px;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #302e6c;
}

.src-innovation-card .src-square-list {
    padding: 0;
}

.src-innovation-card .src-square-list li {
    margin-bottom: 12px;
    font-size: 16px;
}

.src-outcome-card {
    padding: 44px 30px 28px;
    background: linear-gradient(180deg, #e5f4fb 0%, #ffffff 100%);
}

.src-outcome-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 58px;
}

.src-outcome-grid div {
    padding-bottom: 12px;
    border-bottom: 1px solid #7a3b85;
}

.src-outcome-grid strong {
    display: block;
    font-weight: 700;
    font-size: 26px;
    line-height: 30px;
    max-width: fit-content;
}

.src-outcome-grid strong em {
    font-weight: 400;
    font-style: normal;
}

/* the label only : must not catch span.counter inside the strong */
.src-outcome-grid div > span {
    display: block;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.25;
    color: #000000;
}

.src-feedback-resolution {
    margin-top: 48px;
}

.src-feedback-summary {
    display: grid;
    grid-template-columns: 62% 28%;
    gap: 10%;
    align-items: center;
    margin-bottom: 56px;
}

.src-feedback-summary > div:first-child {
    padding-right: 46px;
    border-right: 1px solid #7a3b85;
}

.src-feedback-summary h2 {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #302e6c;
}

.src-feedback-summary h3 {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #000000;
}

.src-feedback-summary p,
.src-resolution-card p {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #000000;
}

.src-feedback-summary h4,
.src-resolution-card h4 {
    margin: 0 0 22px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #302e6c;
}

.src-feedback-summary strong,
.src-resolution-metric strong {
    display: block;
    font-weight: 700;
    font-size: 28px;
    line-height: 32px;
    max-width: fit-content;
}

/* the label only : must not catch span.counter inside the strong */
.src-feedback-summary div > span,
.src-resolution-metric > span {
    display: block;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.25;
    color: #000000;
}

.src-resolution-card {
    display: grid;
    grid-template-columns: 32% 34% 26%;
    gap: 28px;
    margin-bottom: 58px;
    padding: 22px 28px 38px;
    border-radius: 10px;
    background: linear-gradient(90deg, #e6f4fb 0%, #ffffff 100%);
}

.src-resolution-card > div:not(:last-child) {
    padding-right: 28px;
    border-right: 1px solid #7a3b85;
}

.src-resolution-intro h3 {
    margin: 0 0 10px;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #000000;
}

.src-resolution-metric {
    margin-bottom: 26px;
    padding-bottom: 10px;
    border-bottom: 1px solid #7a3b85;
}

.src-resolution-metric:last-child {
    margin-bottom: 0;
}

.src-resolution-metric strong em {
    font-weight: 400;
    font-style: normal;
}

.src-resolution-text-metric p {
    margin: 0;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
}

.src-resolution-initiatives p,
.src-resolution-outcomes p {
    padding-bottom: 6px;
    font-weight: 700;
}

.src-resolution-initiatives p + p {
    margin-top: 18px;
}

.src-resolution-initiatives p strong,
.src-resolution-outcomes p strong,
.src-resolution-metric span strong {
    font-weight: 700;
}

.src-way-forward {
    width: 100%;
    min-height: 300px;
    padding: 92px 60px 54px;
    border-radius: 70px 0 0 70px;
    background: linear-gradient(135deg, #302e6c 0%, #ce181e 100%);
    color: #ffffff;
}

.src-way-forward h3 {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #ffffff;
}

.src-way-forward .src-square-list {
    padding: 0;
}

.src-way-forward .src-square-list li {
    margin-bottom: 18px;
    font-size: 18px;
    color: #ffffff;
}

@media (max-width: 1199px) {
    .src-impact-panel {
        grid-template-columns: 58% 8% 34%;
    }

    .src-square-list li {
        font-size: 16px;
    }

    .src-alignment-grid {
        grid-template-columns: 42% 52%;
        gap: 6%;
    }

    .src-kpi-grid {
        gap: 30px;
    }

    .src-pillar-list {
        gap: 22px 38px;
    }

    .src-resolution-card {
        grid-template-columns: 32% 33% 27%;
        gap: 22px;
    }

    .src-community-kpi-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .src-community-pillar-grid {
        gap: 40px;
    }

    .materiality-process-grid {
        gap: 35px;
    }

    .materiality-process-step:not(:last-child)
        .materiality-process-visual::after {
        right: -27px;
    }

    .materiality-capital-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 0;
    }

    .materiality-capital-grid .materiality-map-item:nth-child(3) {
        border-right: none;
    }

    .materiality-stakeholders {
        padding-left: 40px;
    }

    .materiality-stakeholder-grid {
        gap: 22px 30px;
    }
}

@media (max-width: 991px) {
    .src-impact-panel {
        grid-template-columns: 1fr;
        border-radius: 0 80px 80px 0;
    }

    .src-impact-panel::before {
        width: 100%;
    }

    .src-impact-arrow {
        padding: 4px 0;
    }

    .src-outcome-column .src-impact-heading {
        border-radius: 0;
    }

    .src-alignment-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .src-priorities .src-square-list {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .src-kpi-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .src-service-delivery {
        margin-top: 34px;
    }

    .src-approach-grid,
    .src-transform-row {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .src-pillar-list {
        justify-content: flex-start;
        gap: 18px;
    }

    .src-feedback-summary,
    .src-resolution-card {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .src-feedback-summary > div:first-child,
    .src-resolution-card > div:not(:last-child) {
        padding-right: 0;
        padding-bottom: 24px;
        border-right: none;
        border-bottom: 1px solid #7a3b85;
    }

    .src-way-forward {
        width: 100%;
    }

    .src-community-pillar-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .src-distribution-top-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .src-distribution-priorities {
        padding: 40px 0 10px;
    }

    .src-priorities-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .src-priorities-visual img {
        height: auto;
    }

    .src-channel-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .src-initiative-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 40px;
    }

    .src-distribution-way-forward {
        padding: 48px 40px;
        border-radius: 30px;
    }

    .src-distribution-way-forward p {
        max-width: 100%;
    }

    .src-impact-story {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .src-impact-story-copy {
        padding-top: 0;
    }

    .src-impact-story-wide figcaption {
        min-width: 0;
        max-width: calc(100% - 30px);
    }

    .materiality-process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .materiality-process-step:nth-child(2) .materiality-process-visual::after {
        content: none;
    }

    .materiality-map-lower,
    .materiality-topic-main {
        grid-template-columns: 1fr;
    }

    .materiality-objectives {
        padding: 0 0 30px;
        border-right: none;
        border-bottom: 1px solid #9c3870;
    }

    .materiality-stakeholders {
        padding: 30px 0 0;
    }

    /* .materiality-topic-main goes single column here, so the meta block follows
     it — the 40/60 pairing no longer has two text columns to align against. */
    .materiality-topic-meta {
        grid-template-columns: minmax(0, 1fr);
    }

    .materiality-topic-meta > *:nth-child(1),
    .materiality-topic-meta > *:nth-child(2),
    .materiality-topic-meta > *:nth-child(3),
    .materiality-topic-meta > *:nth-child(4) {
        grid-column: 1;
        grid-row: auto;
    }

    .materiality-page-navigation .atr-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .materiality-page-navigation .atr-page-btn {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .src-impact-panel {
        border-radius: 0 45px 45px 0;
    }

    .src-impact-heading {
        font-size: 16px;
    }

    .src-square-list {
        padding: 22px 18px;
    }

    .src-material-grid {
        grid-template-columns: 44px 1fr;
    }

    .src-priority-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .src-priority-item:last-child {
        grid-column: auto;
    }

    .src-priority-item h3 {
        font-size: 16px;
        line-height: 22px;
        padding: 9px 20px;
    }

    .src-channel-card {
        padding: 50px 20px 28px;
    }

    .src-channel-stats {
        grid-template-columns: 1fr;
    }

    .src-channel-rule-short {
        width: 100%;
    }

    .src-channel-stat strong,
    .src-channel-highlight strong {
        font-size: 22px;
    }

    .src-initiative-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .src-distribution-way-forward {
        padding: 36px 24px;
        border-radius: 24px;
    }

    .src-distribution-way-forward p {
        font-size: 16px;
    }

    .src-material-grid strong,
    .src-material-grid span {
        font-size: 16px;
    }

    .src-kpi-panel {
        padding: 20px;
    }

    .src-kpi-list {
        grid-template-columns: 1fr;
    }

    .src-kpi-wide {
        grid-column: auto;
    }

    .src-priorities .src-square-list li,
    .src-service-delivery .src-square-list li,
    .src-service-delivery p {
        font-size: 16px;
    }

    .src-approach-card {
        padding-right: 18px;
        padding-left: 18px;
    }

    .src-pillar-list span {
        width: 100%;
        min-width: 0;
    }

    .src-outcome-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .src-innovation-card h3 {
        left: 12px;
        max-width: calc(100% - 24px);
        font-size: 16px;
    }

    .src-feedback-summary {
        margin-bottom: 38px;
    }

    .src-resolution-card {
        padding: 20px;
    }

    .src-way-forward {
        min-height: 0;
        padding: 44px 24px 34px;
        border-radius: 42px 0 0 42px;
    }

    .src-way-forward .src-square-list li {
        font-size: 16px;
    }

    .src-community-kpi-panel {
        padding: 20px;
        border-radius: 0 0 0 42px;
    }

    .src-community-kpi-list {
        grid-template-columns: 1fr;
    }

    .src-community-priorities li {
        padding-left: 34px;
    }

    .materiality-process-grid,
    .materiality-capital-grid,
    .materiality-stakeholder-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Two columns on a phone leave no room for the desktop side padding and
     dividers, so the icon ran into the next column's label and long names like
     "Communities" were clipped. Trim the box and let the labels wrap.
     (The capital grid's own padding is set further down in this block.) */
    .materiality-capital-grid .materiality-map-item,
    .materiality-stakeholder-grid .materiality-map-item {
        gap: 8px;
        border-right: none;
    }

    .materiality-stakeholder-grid .materiality-map-item {
        padding-right: 10px;
    }

    .materiality-capital-grid .materiality-map-item {
        min-height: 0;
    }

    /* the desktop 70px column gap eats the label width at this size */
    .materiality-stakeholder-grid {
        gap: 18px 12px;
    }

    .materiality-capital-grid {
        gap: 16px 12px;
    }

    .materiality-map-item img {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }

    .materiality-map-item p {
        font-size: 14px;
        overflow-wrap: anywhere;
    }
    .materiality-process-step .materiality-process-visual::after {
        content: none !important;
    }

    .materiality-capital-grid .materiality-map-item {
        padding: 10px 10px 10px 0;
        border-right: none;
        border-bottom: 1px solid rgba(156, 56, 112, 0.25);
    }

    .materiality-map-panel {
        padding-right: 15px;
        padding-left: 15px;
    }

    .materiality-topic-card {
        padding-right: 15px;
        padding-left: 15px;
    }

    .materiality-topic-heading {
        margin-right: -15px;
        margin-left: -15px;
    }

    .materiality-topic-heading h3 {
        font-size: 18px;
        line-height: 24px;
    }

    .materiality-topic-heading > span {
        font-size: 24px;
    }
}

.cm-author span {
    display: block;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

/* --- content --- */
.cm-content {
    padding: 0;
}

.cm-block {
    margin-bottom: 28px;
}

.cm-block:last-child {
    margin-bottom: 0;
}

.cm-block h4 {
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    padding-bottom: 12px;
}

.cm-block h2 {
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: #302e6c;
    padding-bottom: 12px;
}

.cm-block p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    padding-bottom: 15px;
}

.cm-block p:last-child {
    padding-bottom: 0;
}

.cm-block p.cm-pd-top {
    padding-top: 15px;
}

/* --- bullet list (red square marker) --- */
.cm-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cm-list > li {
    position: relative;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    padding-left: 18px;
    padding-bottom: 10px;
}

.cm-list > li:last-child {
    padding-bottom: 0;
}

.cm-list > li::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 0;
    width: 7px;
    height: 7px;
    background: #00b5ef;
}

/* --- nested bullets --- */
.cm-sub-list {
    list-style: none;
    padding: 8px 0 0 0;
    margin: 0;
}

.cm-sub-list li {
    position: relative;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    padding-left: 18px;
    padding-bottom: 8px;
}

.cm-sub-list li:last-child {
    padding-bottom: 0;
}

.cm-sub-list li::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 0;
    width: 7px;
    height: 7px;
    background: #00b5ef;
}

/* --- sign off --- */
.cm-signoff p {
    padding-bottom: 8px;
}

.cm-signoff .cm-author {
    padding-top: 12px;
}

/* Chairman's Message + MD & CEO's Message pages css end */

/* ==========================================================================
   Governance page css start
   (governance.php)
   ========================================================================== */

.gov-content {
    padding: 0 0 30px;
}

.gov-content-last {
    padding-bottom: 30px;
}
.pdbtm15t {
    padding-bottom: 15px;
}
/* --- section title (plain navy heading, as printed) --- */
.gov-section-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: #302e6c;
    padding-bottom: 5px;
}

.gov-intro-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    padding-bottom: 25px;
}

/* --- plain (un-boxed) content block --- */
.gov-block {
    margin-bottom: 22px;
}

.gov-block > h3 {
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
    padding-bottom: 12px;
}

/* --- bullet lists --- */
.gov-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gov-list > li {
    position: relative;
    padding-left: 18px;
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #000000;
}

.gov-list > li:last-child {
    padding-bottom: 0;
}

.gov-list > li::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 0;
    width: 7px;
    height: 7px;
    background: #00b5ef;
}

.gov-sub-list {
    list-style: none;
    margin: 0;
    padding: 8px 0 0 0;
}

.gov-sub-list li {
    position: relative;
    padding-left: 18px;
    padding-bottom: 8px;
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #000000;
}

.gov-sub-list li:last-child {
    padding-bottom: 0;
}

.gov-sub-list li::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 0;
    width: 6px;
    height: 6px;
    background: #00b5ef;
}

/* --- tinted boxes --- */
.gov-box {
    height: 100%;
    padding: 22px 24px 26px;
    border-radius: 8px;
}

.gov-box > h3 {
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    padding-bottom: 14px;
}

/* board snapshot : light lavender fill */
.gov-box-lavender {
    background: linear-gradient(180deg, #efebf6 0%, #f5f3f9 55%, #fbfafd 100%);
}

.gov-box-lavender > h3 {
    color: #6e6baf;
}

/* board committees : light blue fill */
.gov-box-blue {
    background: linear-gradient(180deg, #d5eaf7 0%, #e7f4fb 55%, #f7fcfe 100%);
}

.gov-box-blue > h3 {
    color: #302e6c;
}

/* --- board snapshot stats --- */
.gov-snapshot-group {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #302e6c;
}

.gov-snapshot-group:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.gov-snapshot-group h4 {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #000000;
    padding-bottom: 10px;
}

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

.gov-stat-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
}

.gov-stat-list li:last-child {
    padding-bottom: 0;
}

.gov-stat-list li span {
    flex: 0 0 auto;
    max-width: 62%;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #000000;
}

.gov-stat-list li i {
    flex: 1 1 auto;
    height: 1px;
    background: #ce181e;
}

.gov-stat-list li em {
    flex: 0 0 auto;
    min-width: 18px;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 22px;
}

/* --- committee cards --- */
.gov-committee {
    margin-bottom: 20px;
    overflow: hidden;
    background: #ffffff;
}

.gov-committee-name {
    padding: 11px 22px;
    background: transparent
        linear-gradient(90deg, #dcd7ea 0%, #efedf6 55%, #fbfafd 100%) 0% 0%
        no-repeat padding-box;
    border-bottom: 1px solid #302e6c;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
    padding-bottom: 10px;
}

.gov-committee-body {
    display: grid;
    grid-template-columns: 1fr 1fr 250px;
    gap: 30px;
    padding: 20px 22px 24px;
}

.gov-focus-item h4 {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #302e6c;
    padding-bottom: 6px;
}

.gov-focus-item p {
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #000000;
    padding-bottom: 0;
}

.gov-committee-impact {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gov-impact-block h5 {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #302e6c;
    padding-bottom: 10px;
}

.gov-icon-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.gov-icon-row img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

/* --- capitals / stakeholders legend --- */
.gov-legend {
    margin-top: 18px;
    padding-top: 20px;
    border-top: 1px solid #8fc5e4;
}

.gov-legend-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px 30px;
    padding-bottom: 16px;
}

.gov-legend-row:last-child {
    padding-bottom: 0;
}

.gov-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gov-legend-item img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.gov-legend-item p {
    font-weight: 500;
    font-size: 13px;
    line-height: 17px;
    color: #302e6c;
    padding-bottom: 0;
}

/* --- light blue content panel (ethics, risk, compliance, esg) --- */
.gov-panel {
    padding: 26px 28px 30px;
    border-radius: 8px;
    background: linear-gradient(180deg, #d7ecf8 0%, #eaf6fc 45%, #ffffff 100%);
}

.gov-panel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.gov-panel-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 50px;
    row-gap: 30px;
}

.gov-panel-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.gov-panel-grid-3 > .gov-panel-col {
    padding-right: 28px;
}

.gov-panel-grid-3 > .gov-panel-col + .gov-panel-col {
    padding-left: 28px;
}

.gov-panel-grid-3 > .gov-panel-col:last-child {
    padding-right: 0;
}

/* the column rules only belong to the tinted panel */
.gov-panel .gov-panel-grid-3 > .gov-panel-col {
    border-right: 1px solid #7fb6d6;
}

.gov-panel .gov-panel-grid-3 > .gov-panel-col:last-child {
    border-right: none;
}

.gov-panel-col > h3 {
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
    padding-bottom: 12px;
}

.gov-panel-subhead {
    padding-top: 22px;
}

/* --- reference note (icon is an img : swap the artwork later) --- */
.gov-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px;
}

.gov-note-icon {
    flex: 0 0 auto;
    width: 26px;
    height: auto;
}

.gov-note p {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    font-style: italic;
    color: #000000;
    padding-bottom: 0;
}

/* --- way forward --- */
.gov-way-forward {
    padding: 28px 30px;
    border-radius: 8px;
    background: transparent
        linear-gradient(115deg, #302e6c 0%, #6e2143 55%, #ce181e 100%) 0% 0%
        no-repeat padding-box;
}

.gov-way-forward h3 {
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #ffffff;
    padding-bottom: 14px;
}

.gov-list-light > li {
    color: #ffffff;
}

/* Governance page css end */

/* ==========================================================================
   Natural Capital page css start  (natural-capital.php)
   ========================================================================== */

.natural-capital-page .atr-banner {
    margin-bottom: 20px;
}

.nc-banner-heading h1 {
    font-size: 30px;
    line-height: 40px;
}

.nc-section-title {
    margin: 0 0 10px;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #302e6c;
}

/* --- why natural capital matters --- */
.nc-matters {
    padding: 30px 0 20px;
}

.nc-impact-panel {
    position: relative;
    overflow: hidden;
    padding: 26px 0 36px;
    border-radius: 0 150px 150px 0;
    background: linear-gradient(
        90deg,
        rgba(217, 242, 250, 0.96) 0%,
        rgba(198, 231, 246, 0.96) 62%,
        rgba(214, 238, 250, 0.96) 100%
    );
}

/* the deeper blue block that sits behind the left column */
.nc-impact-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -130px;
    width: 67%;
    height: 100%;
    border-radius: 0 150px 150px 0;
    background: rgba(154, 211, 236, 0.58);
}

.nc-impact-heading {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 62% 38%;
    align-items: center;
    width: 84%;
    min-height: 52px;
    margin: 0 0 28px 16px;
    padding: 10px 26px;
    border-radius: 0 30px 30px 0;
    background: linear-gradient(90deg, #ce181e 0%, #302e6c 100%);
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
}

.nc-heading-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.nc-heading-main img {
    flex: none;
    width: 16px;
    height: auto;
}

.nc-heading-outcome {
    padding-left: 40px;
}

.nc-impact-body {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 56% 8% 36%;
    align-items: center;
    padding: 0 26px 0 42px;
}

.nc-impact-column .src-square-list {
}

/* ==========================================================================
   Financial Capital page css start
   (financial-capital.php)
   ========================================================================== */

.fc-content {
    padding: 0 0 30px;
}

.fc-content-last {
    padding-bottom: 0;
}

.fc-section-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #302e6c;
    padding-bottom: 20px;
}

.fc-block {
    margin-bottom: 25px;
}

.fc-block:last-child {
    margin-bottom: 0;
}

.fc-block-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #302e6c;
    padding-bottom: 12px;
}

.fc-block-title-dark {
    color: #000000;
}

/* the unit runs on from the heading, in the lighter weight */
.fc-title-unit {
    font-weight: 400;
    font-size: 16px;
}

.fc-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    padding-bottom: 15px;
}

/* --- bullet list --- */
.fc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fc-list > li {
    position: relative;
    padding-left: 18px;
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #000;
}

.fc-list > li:last-child {
    padding-bottom: 0;
}

.fc-list > li::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 0;
    width: 7px;
    height: 7px;
    background: #00b5ef;
}

/* --- why financial capital matters ------------------------------------- */
/* stadium shaped light blue field, with a deeper blue block behind the
   "enables it to" column, exactly as the artwork is printed */
.fc-matters {
    position: relative;
    padding: 22px 45px 40px;
    border-radius: 0 200px 200px 0;
    overflow: hidden;
    background: #c9e7f8;
}

.fc-matters::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 66%;
    border-radius: 0 200px 200px 0;
    background: radial-gradient(
        circle at 0% 50%,
        #ffffff 0%,
        #e0f2fe 35%,
        #b9e6fe 70%,
        #90d5ff 100%
    );
}

.fc-matters-head,
.fc-matters-body {
    position: relative;
    z-index: 2;
}

.fc-matters-head {
    display: grid;
    grid-template-columns: 62% 38%;
    align-items: center;
    width: 92%;
    padding: 11px 26px;
    border-radius: 0 40px 40px 0;
    background: transparent
        linear-gradient(90deg, #ce181e 0%, #8e1a3c 45%, #302e6c 100%) 0% 0%
        no-repeat padding-box;
}

.fc-matters-head-left,
.fc-matters-head-right {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 17px;
    line-height: 23px;
    color: #ffffff;
    padding-bottom: 0;
}

.fc-matters-head-right {
    justify-content: center;
}

.fc-head-arrow {
    width: 14px;
    height: auto;
}

/* the arrow and the outcome copy line up with the FIRST "enables it to" bullet,
   as printed, rather than centring against the whole seven item list */
.fc-matters-body {
    display: grid;
    grid-template-columns: 56% 80px 1fr;
    align-items: start;
    gap: 10px;
    padding: 24px 26px 0;
}

/* the outcome copy sits clear of the inner blue curve, as printed */
.fc-matters-outcome {
    padding-left: 65px;
    max-width: 340px;
}

/* the body grid is top aligned for the outcome copy, so the arrow cell is
   stretched back to full height and the arrow centred vertically within it */
.fc-matters-link {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
}

.fc-link-arrow {
    width: 28px;
    height: auto;
}

/* --- un sdgs and material matters --- */
.fc-sdg-strip img {
    width: 100%;
    max-width: 520px;
}

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

.nc-impact-column .src-square-list li {
    margin-bottom: 14px;
    color: #000000;
}

.nc-impact-column .src-square-list li:last-child {
    margin-bottom: 0;
}

.nc-impact-arrow {
    display: flex;
    justify-content: center;
}

.nc-impact-arrow img {
    width: 24px;
    height: auto;
}

.nc-outcome-column {
    padding-left: 14px;
}

/* --- un sdgs and material matters : image left, alignment right --- */
.nc-alignment {
    padding: 48px 0 20px;
}

.nc-alignment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 50px;
    align-items: center;
}

.nc-alignment-visual img {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
}

.nc-alignment-info {
    display: grid;
    gap: 46px;
}

.nc-sdg-block img {
    max-width: 100%;
}

.nc-material-block {
    max-width: 520px;
}

/* --- kpis --- */
.nc-kpis {
    padding: 40px 0 10px;
}

.nc-kpi-panel {
    padding: 30px 40px 36px;
    border-radius: 12px;
    background: linear-gradient(
        90deg,
        rgba(217, 242, 250, 0.96) 0%,
        rgba(198, 231, 246, 0.96) 100%
    );
}

.nc-kpi-tab,
.nc-snapshot-tab {
    display: inline-block;
    margin: 0 0 28px;
    padding: 6px 20px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ce181e 0%, #302e6c 100%);
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #ffffff;
}
.fc-material-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid #b9b7d6;
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
}

/* .fc-material-list li:first-child {
  padding-top: 0;
} */

.fc-material-list li:last-child {
    border-bottom: none;
}

.fc-material-list li span {
    flex: 0 0 auto;
    min-width: 26px;
    font-weight: 700;
    background: linear-gradient(90deg, #ce181e 0%, #302e6c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- kpis --- */
.fc-tab {
    position: relative;
    max-width: fit-content;
    margin: 0 0 25px;
    padding: 7px 20px;
    background: transparent linear-gradient(90deg, #ce181e 0%, #302e6c 100%) 0%
        0% no-repeat padding-box;
}

.fc-tab h2 {
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #ffffff;
    padding-bottom: 0;
}

/* the box carries the deep rounded bottom-left corner the artwork has */
.fc-kpi-box {
    padding: 30px 30px;
    border-radius: 30px;
    background: linear-gradient(180deg, #e4f0fa 0%, #edf5fc 60%, #f8fcfe 100%);
}

.fc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.fc-kpi-item {
    padding: 0 90px 16px 0;
    margin-bottom: 26px;
    border-bottom: 1px solid #8886bc;
}

/* the last row runs without a rule under it */
.fc-kpi-item:nth-last-child(-n + 2) {
    margin-bottom: 0;
    border-bottom: none;
}

.fc-kpi-item h3 {
    font-weight: 700;
    font-size: 30px;
    line-height: 32px;
    max-width: fit-content;
    background: linear-gradient(90deg, #ce181e 0%, #2a2076 130%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 4px;
}

.fc-kpi-item p {
    font-weight: 500;
    font-size: 16px;
    line-height: 21px;
    color: #000000;
    padding-bottom: 0;
}

.fc-kpi-change {
    font-weight: 500;
    color: #302e6c;
}

/* --- priorities --- */
.fc-priority-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: fc-priority;
}

.fc-priority-list > li {
    position: relative;
    counter-increment: fc-priority;
    padding-left: 34px;
    padding-bottom: 16px;
}

.fc-priority-list > li::before {
    content: counter(fc-priority) ')';
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #302e6c;
}

.fc-priority-list h4 {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #302e6c;
    padding-bottom: 4px;
}

.fc-priority-list p {
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #000000;
    padding-bottom: 0;
}

/* --- charts (artwork is an img : swap the file to update a graph) --- */
/* the column is the flex box and the figure the flex item, so a figure
   fills the row height without height:100% overflowing its column */
.fc-content .row > [class*='col-']:has(> .fc-chart) {
    display: flex;
    flex-direction: column;
}

.fc-chart {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin-bottom: 25px;
}

/* one caption height per row, whether the title runs to one line, two, or
   carries a unit : without it a short title drags its artwork upwards */
.fc-chart figcaption {
    min-height: 30px;
    margin-bottom: 10px;
}

.fc-chart figcaption h3 {
    font-weight: 700;
    font-size: 18px;
    line-height: 23px;
    color: #000000;
    padding-bottom: 4px;
}

/* the market share note always starts its own line, so the three titles in
   the row break at the same point rather than wherever the text happens to
   run out of width */
.fc-chart figcaption h3 .fc-chart-sub {
    display: block;
}

.fc-chart-unit {
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    color: #000000;
    padding-bottom: 10px;
}

/* artwork is pushed to the bottom of the cell, so the axis lines across a
   row sit on one line however tall the individual graphs are */
.fc-chart img {
    width: 100%;
    max-width: 250px;
    margin-top: auto;
    align-self: flex-start;
}

.fccharimg img {
    max-width: max-content;
}

/* the premium pair carries its legend inside the artwork, so the two graphs
   would otherwise butt up against each other : hold them apart */
.fc-content .row > [class*='col-']:has(> .fccharimg) {
    padding-right: 45px;
}

@media (max-width: 991px) {
    .fc-content .row > [class*='col-']:has(> .fccharimg) {
        padding-right: 12px;
    }

    .fccharimg {
        margin-bottom: 45px;
    }
}

/* --- solvency / persistency row --- */
/* solvency, then the two persistency cohorts, then the footnotes */
.fc-chart-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.4fr;
    gap: 40px;
    /* stretch, so the figures can bottom align their artwork between them */
    align-items: stretch;
}

.fc-chart-row > .fc-footnote-list {
    align-self: end;
}
/* --- data tables --- */
.fc-table-block {
    margin-bottom: 25px;
}

/* the rows are separated by a gap, so the borders stay uncollapsed */
.fc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 9px;
}

.fc-table th,
.fc-table td {
    padding: 13px 14px;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #000000;
    text-align: center;
}

/* header sits in its own cyan outlined box */
.fc-table thead th {
    font-weight: 500;
    background: #ffffff;
    border-top: 1px solid #29abe2;
    border-bottom: 1px solid #29abe2;
}

.fc-table thead th:first-child {
    text-align: left;
    border-left: 1px solid #29abe2;
}

/* each body row is ruled off top and bottom in grey */
.fc-table tbody th,
.fc-table tbody td {
    background: #ffffff;
    border-top: 1px solid #a6aeb8;
    border-bottom: 1px solid #a6aeb8;
}

.fc-table tbody th {
    font-weight: 500;
    text-align: left;
    background: #e5eff8;
}

.fc-table-channel thead th:first-child {
    border-right: none;
}

/* --- footnotes --- */
.fc-footnote {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    padding-bottom: 0;
}

.fc-footnote-list {
    list-style: decimal;
    margin: 0;
    padding: 0 0 0 20px;
}

.fc-footnote-list li {
    padding-bottom: 12px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
}

.fc-footnote-list li:last-child {
    padding-bottom: 0;
}

/* --- way forward --- */
.fc-way-forward {
    padding: 28px 34px;
    border-radius: 20px;
    background: transparent
        linear-gradient(90deg, #ce181e 0%, #7b1e4c 55%, #4b2a80 100%) 0% 0%
        no-repeat padding-box;
}

.fc-way-forward h3 {
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #ffffff;
    padding-bottom: 14px;
}

.fc-list-light > li {
    color: #ffffff;
}
/* 
.fc-list-light > li::before {
  background: #FFFFFF;
} */

/* Financial Capital page css end */

/* ==========================================================================
   Service Capital page css start
   (service-capital.php)
   ========================================================================== */

.sc-content {
    padding: 0 0 30px;
}

.sc-content-last {
    padding-bottom: 0;
}

.sc-section-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #302e6c;
    padding-bottom: 20px;
}

.sc-block {
    margin-bottom: 25px;
}

.sc-block:last-child {
    margin-bottom: 0;
}

.sc-block-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #302e6c;
    padding-bottom: 12px;
}

.sc-block-title-dark {
    color: #000000;
}

.sc-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    padding-bottom: 12px;
}

/* cross-chapter link : the house navy, not a browser blue */
/* light blue marks the link as clickable, matching .esg-report-link */
.sc-inline-link {
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: #00a9df;
    -webkit-text-fill-color: #00a9df;
    text-decoration-color: #00a9df;
}

.sc-inline-link:hover,
.sc-inline-link:focus {
    color: #0089b8;
    -webkit-text-fill-color: #0089b8;
    text-decoration-color: #0089b8;
}

/* --- bullet list --- */
.sc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sc-list > li {
    position: relative;
    padding-left: 18px;
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
}

.sc-list > li:last-child {
    padding-bottom: 0;
}

.sc-list > li::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 20px;
    background: #00b5ef;
}

/* --- why service capital matters ---------------------------------------
   stadium shaped light blue field, with a deeper blue block behind the
   "enables to" column, as the artwork is printed
   ----------------------------------------------------------------------- */
.sc-matters {
    position: relative;
    padding: 22px 45px 40px;
    border-radius: 0 200px 200px 0;
    overflow: hidden;
    background: #c9e7f8;
}

.sc-matters::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 66%;
    border-radius: 0 200px 200px 0;
    background: radial-gradient(
        circle at 0% 50%,
        #ffffff 0%,
        #e0f2fe 35%,
        #b9e6fe 70%,
        #90d5ff 100%
    );
}

.sc-matters-head,
.sc-matters-body {
    position: relative;
    z-index: 2;
}

.sc-matters-head {
    display: grid;
    grid-template-columns: 62% 38%;
    align-items: center;
    width: 92%;
    padding: 11px 26px;
    border-radius: 0 40px 40px 0;
    background: transparent
        linear-gradient(90deg, #ce181e 0%, #8e1a3c 45%, #302e6c 100%) 0% 0%
        no-repeat padding-box;
}

.sc-matters-head-left,
.sc-matters-head-right {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 17px;
    line-height: 23px;
    color: #ffffff;
    padding-bottom: 0;
}

.sc-matters-head-right {
    justify-content: center;
}

.sc-head-arrow {
    width: 14px;
    height: auto;
}

/* the arrow and the outcome copy line up with the FIRST "enables to" bullet,
   as printed, rather than centring against the whole five item list */
.sc-matters-body {
    display: grid;
    grid-template-columns: 56% 80px 1fr;
    align-items: start;
    gap: 10px;
    padding: 24px 26px 0;
}

/* pushed clear of the inner blue curve so the copy never sits over it */
.sc-matters-outcome {
    padding-left: 52px;
    max-width: 340px;
}

/* the body grid is top aligned for the outcome copy, so the arrow cell is
   stretched back to full height and the arrow centred vertically within it */
.sc-matters-link {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
}

.sc-link-arrow {
    width: 28px;
    height: auto;
}

/* --- un sdgs and material matters --- */
.sc-sdg-strip img {
    width: 100%;
    max-width: 520px;
}

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

.sc-material-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid #b9b7d6;
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
}

.sc-material-list li:first-child {
    padding-top: 0;
}

.sc-material-list li:last-child {
    border-bottom: none;
}

.sc-material-list li span {
    flex: 0 0 auto;
    min-width: 26px;
    font-weight: 700;
    background: linear-gradient(90deg, #ce181e 0%, #302e6c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- kpis --- */
.sc-tab {
    max-width: fit-content;
    margin: 0 0 20px;
    padding: 7px 20px;
    background: transparent linear-gradient(90deg, #ce181e 0%, #302e6c 100%) 0%
        0% no-repeat padding-box;
}

.sc-tab h2 {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #ffffff;
}

.nc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 60px;
}

.nc-kpi-item strong,
.nc-snapshot-item strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.25;
    color: #ce181e;
    max-width: fit-content;
    background: linear-gradient(90deg, #ce181e 0%, #2a2076 130%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 0;
}

.sc-kpi-box {
    margin-top: 30px;
    padding: 30px 35px 35px;
    border-radius: 30px;
    background: linear-gradient(180deg, #e4f0fa 0%, #edf5fc 60%, #f8fcfe 100%);
}

/* three across, the remaining two sit on the row below */
.sc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.sc-kpi-item {
    padding: 0 70px 14px 0;
    margin-bottom: 24px;
    border-bottom: 1px solid #8886bc;
}

/* the last row runs without a rule under it */
.sc-kpi-item:nth-last-child(-n + 2) {
    margin-bottom: 0;
    border-bottom: none;
}

.sc-kpi-item h3 {
    font-weight: 700;
    font-size: 26px;
    line-height: 32px;
    max-width: fit-content;
    background: linear-gradient(90deg, #ce181e 0%, #2a2076 130%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 2px;
}

.sc-kpi-item p {
    font-weight: 500;
    font-size: 16px;
    line-height: 21px;
    color: #000000;
    padding-bottom: 0;
}
span.h3parasize {
    font-weight: 500;
    font-size: 16px;
    line-height: 21px;
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    color: #000000 !important;
    padding-bottom: 0;
}

/* the products tile carries its labels inside the h3, the same way the home
   page tile does : the figures keep the full heading size, labels stay small */
.sc-kpi-item h3.sc-kpi-products .counter {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

/* --- priorities in fy26 --- */
.sc-priority {
    position: relative;
    height: 100%;
    margin-bottom: 25px;
    padding: 26px 22px 22px;
    border: 1px solid #ce181e;
}

/* red to navy bar riding the top-left edge of every card */
.sc-priority::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 42%;
    height: 6px;
    background: transparent linear-gradient(90deg, #ce181e 0%, #302e6c 100%) 0%
        0% no-repeat padding-box;
}

.sc-priority h3 {
    font-weight: 700;
    font-size: 17px;
    line-height: 23px;
    color: #302e6c;
    padding-bottom: 8px;
}

.sc-priority p {
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #000000;
    padding-bottom: 0;
}

/* --- nationwide presence --- */
.sc-map {
    padding: 10px 0;
}
.sc-map {
    max-width: 520px;
}

.sc-map-note {
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    font-style: italic;
    color: #000000;
    padding-bottom: 0;
}

.sc-presence {
    padding-top: 10px;
}

/* "Presence in" is the light weight, only "Our Presence" is bold */
.sc-presence > .sc-block-title {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    padding-bottom: 10px;
}

.sc-presence > .sc-block-title.sc-presence-heading {
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
}

.sc-presence-list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0 0 18px;
    border-bottom: 1px solid #e38c90;
}

.sc-presence-list li {
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #000000;
}

.sc-presence-list li:last-child {
    padding-bottom: 0;
}

/* the figures carry the red to indigo gradient */
.sc-presence-list li em,
.sc-region-value {
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
    max-width: fit-content;
    background: linear-gradient(90deg, #ce181e 0%, #2a2076 130%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* the units stay transparent so the figure and its unit read as one continuous
   red > navy ramp across the whole line, rather than the unit carrying a flat
   colour of its own */
.nc-kpi-item strong em,
.nc-snapshot-item strong em {
    font-weight: 400;
    font-style: normal;
    font-size: 26px;
}

.nc-kpi-item strong sub,
.nc-snapshot-item strong sub {
    font-size: 60%;
}

/* direct child only : must not catch span.counter inside the strong */
.nc-kpi-item > span,
.nc-snapshot-item > span {
    display: block;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #000000;
}

.nc-kpi-item::after {
    content: '';
    display: block;
    height: 1px;
    margin-top: 14px;
    background: linear-gradient(90deg, #ce181e 0%, #302e6c 100%);
    opacity: 0.5;
}

/* --- repeating topic block : approach / key actions / snapshot --- */
.nc-topic {
    padding: 46px 0 0;
}

.nc-topic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 60px;
    align-items: start;
}

.nc-topic-title {
    margin: 0 0 10px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #302e6c;
}

.nc-topic-col h3,
.nc-energy-col h3 {
    margin: 0 0 12px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
}

/* the right column heads the block, so it has no title above it */
.nc-topic-col:last-child h3 {
    margin-top: 0;
}

.nc-dot-list {
    margin: 0 0 26px;
    padding: 0 0 0 20px;
    list-style: none;
}

.nc-dot-list:last-child {
    margin-bottom: 0;
}

.nc-dot-list li {
    position: relative;
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #000000;
}

.nc-dot-list li::before {
    content: '\2022';
    position: absolute;
    top: 0;
    left: -20px;
    color: #302e6c;
}

.nc-dot-list strong,
.nc-number-list strong {
    font-weight: 700;
}

.nc-topic-rule {
    height: 1px;
    margin-top: 40px;
    background: linear-gradient(90deg, #ce181e 0%, #302e6c 100%);
    opacity: 0.5;
}

/* --- way forward panel and closing note --- */
.nc-way-forward-wrap {
    padding: 50px 0 10px;
}

.nc-way-forward {
    min-height: 0;
    padding: 72px 60px 72px 4%;
    border-radius: 50px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.nc-way-forward h2 {
    margin: 0 0 10px;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #ffffff;
}

.nc-way-forward p {
    margin: 0;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: #ffffff;
}

.nc-note {
    margin: 34px 0 0;
    font-weight: 500;
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    color: #302e6c;
}

/* ESG report references open the PDF — light blue marks them as clickable */
.esg-report-link {
    color: #00a9df;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.esg-report-link:hover,
.esg-report-link:focus {
    color: #0089b8;
}

/* --- climate policy horizons --- */
.nc-climate-policy {
    padding: 46px 0 10px;
}

.nc-policy-panel {
    padding: 40px 46px 46px;
    border-radius: 0 40px 40px 0;
    background: linear-gradient(
        90deg,
        rgba(233, 246, 252, 0.9) 0%,
        rgba(198, 231, 246, 0.9) 100%
    );
}

.nc-policy-title {
    margin: 0 0 30px;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #302e6c;
}

.nc-policy-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 64px;
    align-items: stretch;
}

.nc-policy-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #ce181e;
    border-radius: 20px;
}

/* chevron sitting in the gap between the cards */
.nc-policy-card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -40px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border-top: 2px solid #302e6c;
    border-right: 2px solid #302e6c;
    transform: rotate(45deg);
}

.nc-policy-card h3 {
    margin: 0;
    padding: 14px 18px;
    border-radius: 19px 19px 0 0;
    background: #2b2075;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: #ffffff;
}

.nc-policy-body {
    padding: 24px 22px 26px;
}

.nc-policy-body .src-square-list {
    margin: 0;
    padding: 0;
}

.nc-policy-body .src-square-list li {
    margin-bottom: 18px;
}

.nc-policy-body .src-square-list li:last-child {
    margin-bottom: 0;
}

/* --- snapshot --- */
.nc-snapshot {
    padding: 46px 0 10px;
}

.nc-snapshot-tab {
    margin-bottom: 32px;
}

/* six tracks : thirds span 2, halves span 3 */
.nc-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 40px 46px;
    align-items: stretch;
}

.nc-snapshot-item {
    display: flex;
    flex-direction: column;
    grid-column: span 2;
}

.nc-snapshot-item.nc-span-half {
    grid-column: span 3;
}

.nc-snapshot-item > span {
    margin-bottom: 26px;
}

/* snapshot cells whose value is a phrase rather than a figure */
.nc-snapshot-item.nc-snapshot-text strong {
    font-weight: 400;
    font-size: 24px;
    line-height: 1.3;
}

.nc-snapshot-item.nc-snapshot-text > span {
    font-weight: 700;
}

/* the tab repeats inside each topic block, so it needs headroom there */
.nc-topic .nc-snapshot-tab {
    margin-top: 34px;
}

/* the rule is pushed to the foot of the cell so it lines up across the row */
.nc-snapshot-item::after {
    content: '';
    display: block;
    height: 1px;
    margin-top: auto;
    background: linear-gradient(90deg, #ce181e 0%, #302e6c 100%);
    opacity: 0.5;
}

/* --- priorities in FY26 --- */
.nc-priorities {
    padding: 52px 0 10px;
}

.nc-priority-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 48px;
    align-items: stretch;
}

.nc-priority-card {
    position: relative;
    overflow: hidden;
    padding: 22px 24px 24px 72px;
    background: #ffffff;
    border: 1px solid #302e6c;
}

/* the badge sits inside the card, its left sliver clipped by the card edge */
.nc-priority-badge {
    position: absolute;
    top: 0;
    left: 0px;
    display: block;
    width: 60px;
    height: 60px;
}

.nc-priority-badge img {
    display: block;
    width: 100%;
    height: 100%;
}

/* the numeral rides over the patch as live text, so it uses the page's Noto
   Sans : baked into the svg it could not reach the webfont and fell back to
   Verdana, which is a different glyph. outline weight matches .ic-impact-no */
.nc-priority-badge em {
    position: absolute;
    top: 5px;
    left: 10px;
    width: 42px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-weight: 700;
    font-size: 34px;
    line-height: 1;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px #ffffff;
}

.nc-priority-card h3 {
    margin: 0 0 6px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #302e6c;
}

.nc-priority-card p {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #000000;
}

/* --- energy and emission management --- */
.nc-energy {
    padding: 40px 0 10px;
}

.nc-energy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 60px;
    align-items: start;
}

.nc-number-list {
    margin: 0 0 26px;
    padding-left: 26px;
    list-style: decimal;
}

.nc-number-list:last-child {
    margin-bottom: 0;
}

.nc-number-list li {
    margin-bottom: 10px;
    padding-left: 6px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #000000;
}

@media (max-width: 1199px) {
    .nc-banner-heading h1 {
        font-size: 32px;
        line-height: 42px;
    }

    .nc-impact-heading {
        width: 92%;
        grid-template-columns: 58% 42%;
    }

    .nc-heading-outcome {
        padding-left: 24px;
    }

    .nc-impact-body {
        grid-template-columns: 54% 8% 38%;
        padding-left: 30px;
    }

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

    .nc-kpi-item strong,
    .nc-snapshot-item strong {
        font-size: 26px;
    }

    .nc-kpi-item strong em,
    .nc-snapshot-item strong em {
        font-size: 22px;
    }
}

@media (max-width: 991px) {
    .nc-banner-heading h1 {
        font-size: 26px;
        line-height: 36px;
    }

    .nc-impact-panel {
        border-radius: 0 80px 80px 0;
    }

    .nc-impact-panel::before {
        width: 100%;
    }

    .nc-impact-heading,
    .nc-impact-body {
        grid-template-columns: 1fr;
    }

    .nc-impact-heading {
        width: calc(100% - 16px);
        gap: 6px;
    }

    .nc-heading-outcome {
        padding-left: 0;
    }

    .nc-impact-body {
        padding: 0 26px;
    }

    .nc-impact-arrow {
        padding: 16px 0;
        transform: rotate(90deg);
    }

    .nc-outcome-column {
        padding-left: 0;
    }

    .nc-alignment-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .nc-alignment-visual img {
        margin: 0 auto;
    }

    .nc-alignment-info {
        gap: 36px;
    }

    .nc-kpi-panel {
        padding: 26px 24px 30px;
    }

    .nc-kpi-grid {
        gap: 26px 34px;
    }

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

    .nc-energy-col:last-child .nc-number-list {
        margin-top: -16px;
    }

    .nc-snapshot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px;
    }

    .nc-snapshot-item,
    .nc-snapshot-item.nc-span-half {
        grid-column: span 1;
    }

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

    .nc-topic-col:last-child h3 {
        margin-top: 8px;
    }

    .nc-policy-panel {
        padding: 30px 26px 34px;
        border-radius: 0 30px 30px 0;
    }

    .nc-policy-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .nc-way-forward {
        padding: 48px 40px;
        border-radius: 34px;
    }

    .nc-way-forward p {
        max-width: 100%;
    }

    /* the chevron drops below the card and points down when stacked */
    .nc-policy-card:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: -36px;
        left: 50%;
        margin: 0 0 0 -8px;
        transform: rotate(135deg);
    }
}

@media (max-width: 575px) {
    .nc-banner-heading h1 {
        font-size: 22px;
        line-height: 30px;
    }

    .nc-impact-panel {
        padding: 20px 0 28px;
        border-radius: 0 40px 40px 0;
    }

    .nc-impact-heading {
        margin-left: 0;
        padding: 10px 18px;
        font-size: 16px;
        line-height: 22px;
        border-radius: 0;
    }

    .nc-impact-body {
        padding: 0 18px;
    }

    .nc-kpi-grid {
        grid-template-columns: 1fr;
    }

    .nc-kpi-item strong,
    .nc-snapshot-item strong {
        font-size: 24px;
    }

    .nc-kpi-item strong em,
    .nc-snapshot-item strong em {
        font-size: 20px;
    }

    .nc-snapshot-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .nc-snapshot-item.nc-snapshot-text strong {
        font-size: 20px;
    }

    .nc-policy-card h3 {
        font-size: 16px;
        line-height: 22px;
    }

    .nc-policy-body {
        padding: 20px 18px 22px;
    }

    .nc-way-forward {
        padding: 36px 24px;
        border-radius: 26px;
    }

    .nc-way-forward p {
        font-size: 16px;
    }

    .nc-note {
        font-size: 15px;
    }

    .nc-priority-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .nc-priority-card {
        padding: 20px 18px 20px 54px;
    }

    .nc-priority-badge {
        left: -10px;
        width: 54px;
        height: 54px;
        border-bottom-right-radius: 54px;
        font-size: 34px;
        padding-left: 8px;
    }
}

/* Natural Capital page css end */

/* ==========================================================================
   Risk Management page css start  (risk-management.php)
   ========================================================================== */

.risk-management-page .atr-banner {
    margin-bottom: 10px;
}

.rm-banner-heading h1 {
    font-size: 30px;
    line-height: 40px;
}

.rm-intro {
    padding-bottom: 30px;
}

.rm-section-title {
    margin: 0 0 14px;
    font-size: 20px;
    color: #2a2076;
    font-weight: 700;
    line-height: 26px;
}
.sc-region-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
}

/* the map key square sits outside the text column */
.sc-region {
    position: relative;
    padding-left: 28px;
}

.sc-region::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    width: 14px;
    height: 14px;
}

.sc-region-east::before {
    background: #00aeef;
}

.sc-region-west::before {
    background: #3b2c6e;
}

.sc-region-north::before {
    background: #ffc20e;
}

.sc-region-south::before {
    background: #ec008c;
}

.sc-region h4 {
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #2b3a8f;
    padding-bottom: 2px;
}

.sc-region-value {
    padding-bottom: 0;
}

.sc-region p {
    font-weight: 500;
    font-size: 16px;
    line-height: 21px;
    color: #000000;
    padding-bottom: 0;
}
.sc-region p span {
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
    max-width: fit-content;
    background: linear-gradient(90deg, #ce181e 0%, #2a2076 130%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- our offerings --- */
.sc-offering {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 30px;
    margin-bottom: 20px;
    padding: 24px 26px 34px;
    background: transparent
        linear-gradient(180deg, #ffffff 60%, #e2f1fa 100%, #cfe8f7 100%) 0% 0%
        no-repeat padding-box;
}

.sc-offering-intro h3 {
    font-weight: 700;
    font-size: 18px;
    line-height: 23px;
    color: #000000;
    padding-bottom: 12px;
}

/* the plan name in brackets always sits on its own line below the title,
   as printed, rather than wrapping mid phrase ("(Child / Plans)") */
.sc-offering-intro h3 .sc-offering-plan {
    display: block;
    white-space: nowrap;
}

.sc-offering-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
}

.sc-stat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #ffffff;
}

.sc-stat-age {
    background: #ce181e;
}

.sc-stat-share {
    background: #302e6c;
}

.sc-offering-intro p {
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #000000;
    padding-bottom: 0;
}

.sc-offering-benefits h4,
.sc-offering-products h4 {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #302e6c;
    padding-bottom: 10px;
}

.sc-product-list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 26px;
}

.sc-product-list li {
    break-inside: avoid;
    padding-bottom: 12px;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    color: #000000;
}

/* the SBI Life lock-up printed above every product name : swap the file later */
.sc-brand {
    display: block;
    width: auto;
    height: 16px;
    margin-bottom: 3px;
}

.sc-offering-legend {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px 30px;
    margin: 0;
    padding-bottom: 4px;
    border-bottom: 2px solid #302e6c;
}

.sc-offering-legend li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
}

.sc-offering-legend i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

/* --- looking ahead --- */
/* the box runs the full width below the group products and ape blocks, so it
   carries its own top gap rather than sitting alongside them */
.sc-looking-ahead {
    margin-top: 25px;
    padding: 40px;
    border-radius: 8px;
    background: transparent
        linear-gradient(135deg, #ce181e 0%, #8e1a3c 55%, #4b2a80 100%) 0% 0%
        no-repeat padding-box;
}

.sc-looking-ahead h3 {
    font-weight: 700;
    font-size: 20px;
    line-height: 25px;
    color: #ffffff;
    padding-bottom: 12px;
}

.sc-looking-ahead > p {
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #ffffff;
    padding-bottom: 14px;
}

.sc-list-light > li {
    color: #ffffff;
}

.sc-list-light > li::before {
    background: #ffffff;
}

/* Service Capital page css end */

/* ==========================================================================
   Intellectual Capital page css start
   (intellectual-capital.php)
   ========================================================================== */

.ic-content {
    padding: 0 0 30px;
}

.ic-content-last {
    padding-bottom: 0;
}
.ic-block.icblckmt0 {
    margin-bottom: 0;
}
.ic-section-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #302e6c;
    padding-bottom: 10px;
}

/* --- risk management framework --- */
.rm-framework {
    padding: 10px 0 0;
}

.rm-columns p,
.rm-copy p,
.rm-tools-intro,
.rm-intro-text {
    margin: 0 0 18px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

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

.rm-copy p strong {
    font-weight: 700;
}

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

.rm-lead-list {
    margin: 26px 0 0;
    padding: 0;
}

.rm-lead-list li {
    margin-bottom: 16px;
}

.rm-lead-list li:last-child {
    margin-bottom: 0;
}

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

/* --- risk governance structure --- */
.rm-governance {
    padding: 46px 0 10px;
}

.rm-intro-text {
    margin-bottom: 24px;
}

.rm-committee-list {
    column-count: 2;
    column-gap: 60px;
    margin-top: 0;
}

/* keep a committee from being split across the column break */
.rm-committee-list li {
    margin-bottom: 20px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

/* --- risk governance framework : chart and three lines of defence --- */
.rm-governance-chart {
    padding: 40px 0 0;
}

.rm-chart-figure {
    margin-bottom: 36px;
}

.rm-chart-figure img,
.rm-process-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.rm-chart-figure img {
    max-width: 1110px;
    margin: 0 auto;
}

.rm-subsection-title {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
}

.rm-defence-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 66px;
    margin-top: 66px;
    align-items: stretch;
}

.rm-defence-card {
    position: relative;
    padding: 48px 26px 30px;
    background: #ffffff;
    border: 1px solid #b7dcef;
    border-radius: 26px;
}

/* the badge straddles the top edge of the card */
.rm-defence-badge {
    position: absolute;
    top: -34px;
    left: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-left: -32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #302e6c 0%, #ce181e 100%);
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    color: #ffffff;
}

/* chevron sitting in the gap between the cards */
.rm-defence-card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -42px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border-top: 2px solid #a9d5ec;
    border-right: 2px solid #a9d5ec;
    transform: rotate(45deg);
}

.rm-defence-card h3 {
    margin: 0 0 6px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #302e6c;
}

.rm-defence-card p {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #000000;
}

/* --- key tools and processes --- */
.rm-tools {
    padding: 50px 0 0;
}

.rm-tools-intro {
    margin-bottom: 26px;
}

/* flows column-wise like the report; items never split across a column */
.rm-tools-grid {
    column-count: 3;
    column-gap: 50px;
}

.rm-tool-item {
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(48, 46, 108, 0.45);
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.rm-tool-item h3 {
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(206, 24, 30, 0.45);
    font-weight: 700;
    font-size: 17px;
    line-height: 22px;
    color: #cf1a20;
    background: linear-gradient(90deg, #cf1a20 0%, #2e237b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.rm-tool-item p {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #000000;
}

/* --- fraud risks --- */
.rm-fraud {
    padding: 46px 0 0;
}

.rm-fraud-grid {
    display: grid;
    grid-template-columns: 27% 1fr;
    gap: 40px;
    align-items: center;
}

.rm-fraud-copy p {
    margin: 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

.rm-fraud-figure img {
    display: block;
    width: 100%;
    max-width: 700px;
    height: auto;
    margin: 0 auto;
}

.rm-fraud-list {
    margin: 34px 0 0;
    padding: 0;
}

.rm-fraud-list li {
    margin-bottom: 16px;
}

/* --- emerging risks --- */
.rm-emerging {
    padding: 46px 0 10px;
}

.rm-emerging-item {
    margin-bottom: 26px;
}

.rm-emerging-item .rm-subsection-title {
    margin-bottom: 6px;
}

.rm-emerging-close {
    margin-top: 30px;
}

/* --- mitigating principal risks --- */
.rm-risks {
    padding: 50px 0 10px;
}

.rm-risk-card {
    position: relative;
    margin-top: 22px;
    margin-bottom: 34px;
    padding: 46px 30px 30px;
    background: #f2f0f8;
    border-radius: 10px;
}

.rm-risk-tab {
    position: absolute;
    top: -22px;
    left: 24px;
    max-width: calc(100% - 48px);
    margin: 0;
    padding: 10px 24px;
    border-radius: 10px;
    background: linear-gradient(90deg, #ce181e 0%, #302e6c 100%);
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
}

.rm-risk-body {
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 34px;
}

.rm-risk-cols {
    display: grid;
    grid-template-columns: 30% 1fr;
    gap: 34px;
}

/* rule between the description and the mitigation */
.rm-risk-mitigation {
    padding-left: 34px;
    border-left: 1px solid #302e6c;
}

.rm-risk-card h4 {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 16px;
    padding-bottom: 18px;
}

.ic-block {
    margin-bottom: 25px;
}

.ic-block-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #302e6c;
    padding-bottom: 12px;
}

.ic-block-title-dark {
    color: #000000;
}

/* --- bullet list --- */
.ic-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ic-list > li {
    position: relative;
    padding-left: 18px;
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
}

.ic-list > li:last-child {
    padding-bottom: 0;
}

.ic-list > li::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 0;
    width: 7px;
    height: 7px;
    background: #00b5ef;
}

/* --- why intellectual capital matters ----------------------------------
   flat left edge, rounded right, with a deeper wash behind the
   "enables to" column, matching the other capital chapters
   ----------------------------------------------------------------------- */
.ic-matters {
    position: relative;
    padding: 22px 45px 40px;
    border-radius: 0 200px 200px 0;
    overflow: hidden;
    background: #c9e7f8;
    margin-bottom: 20px;
}

.ic-matters::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 66%;
    border-radius: 0 200px 200px 0;
    background: radial-gradient(
        circle at 0% 50%,
        #ffffff 0%,
        #e0f2fe 35%,
        #b9e6fe 70%,
        #90d5ff 100%
    );
}

.ic-matters-head,
.ic-matters-body {
    position: relative;
    z-index: 2;
}

.ic-matters-head {
    display: grid;
    grid-template-columns: 62% 38%;
    align-items: center;
    width: 92%;
    padding: 11px 26px;
    border-radius: 0 40px 40px 0;
    background: transparent
        linear-gradient(90deg, #ce181e 0%, #8e1a3c 45%, #302e6c 100%) 0% 0%
        no-repeat padding-box;
}

.ic-matters-head-left,
.ic-matters-head-right {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 17px;
    line-height: 23px;
    color: #ffffff;
    padding-bottom: 0;
}

.ic-matters-head-right {
    justify-content: center;
}

.ic-head-arrow {
    width: 14px;
    height: auto;
}

/* the arrow and the outcome copy line up with the FIRST "enables to" bullet,
   as printed, rather than centring against the whole five item list */
.ic-matters-body {
    display: grid;
    grid-template-columns: 56% 80px 1fr;
    align-items: start;
    gap: 10px;
    padding: 24px 26px 0;
}

/* pushed clear of the inner blue curve so the copy never sits over it */
.ic-matters-outcome {
    padding-left: 52px;
    max-width: 340px;
}

/* the body grid is top aligned for the outcome copy, so the arrow cell is
   stretched back to full height and the arrow centred vertically within it */
.ic-matters-link {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
}

.ic-link-arrow {
    width: 28px;
    height: auto;
}

/* --- un sdgs and material matters --- */
.ic-sdg-strip img {
    width: 100%;
    max-width: 480px;
}

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

.ic-material-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid #b9b7d6;
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
}

.ic-material-list li:first-child {
    padding-top: 0;
}

.ic-material-list li:last-child {
    border-bottom: none;
}

.ic-material-list li span {
    flex: 0 0 auto;
    min-width: 26px;
    font-weight: 700;
    background: linear-gradient(90deg, #ce181e 0%, #302e6c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- kpis --- */
.ic-tab {
    max-width: fit-content;
    margin: 0 0 20px;
    padding: 7px 20px;
    background: transparent linear-gradient(90deg, #ce181e 0%, #302e6c 100%) 0%
        0% no-repeat padding-box;
}

.ic-tab h2 {
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #ffffff;
    padding-bottom: 0;
}

.ic-kpi-box {
    margin-top: 30px;
    margin-bottom: 20px;
    padding: 30px 35px 35px;
    border-radius: 30px;
    background: linear-gradient(180deg, #e4f0fa 0%, #edf5fc 60%, #f8fcfe 100%);
}

.ic-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.ic-kpi-grid.ickpi2grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.ickpi2grid .ic-kpi-item {
    border-bottom: 1px solid #852c6e !important;
    padding-bottom: 5px;
}

/* the closing item runs the full width, which leaves the third one alone
   on its own row : only in the raised panel, a plain 2-up grid stays 2-up */
.ic-kpi-box-raised .ickpi2grid > .ic-kpi-item:last-child {
    grid-column: 1 / -1;
    padding-right: 0;
}

/* the label chip breaks out over the top edge of the panel */
.ic-kpi-box-raised {
    position: relative;
    margin-top: 50px;
    padding-top: 42px;
}

.ic-kpi-box-raised > .ic-tab {
    position: absolute;
    top: -20px;
    left: 35px;
    margin: 0;
    border-radius: 8px;
}

.ic-kpi-item {
    padding: 0 40px 0px 0;
}

/* three items : the last one sits alone on the closing row */
.ic-kpi-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.ic-kpi-item h3 {
    font-weight: 700;
    font-size: 30px;
    line-height: 32px;
    max-width: fit-content;
    background: linear-gradient(90deg, #ce181e 0%, #2a2076 130%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 2px;
}

.ic-kpi-item p {
    font-weight: 500;
    font-size: 16px;
    line-height: 21px;
    color: #000000;
    padding-bottom: 0;
}

/* --- shared text bits --- */
.ic-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    padding-bottom: 0;
}

.ic-lead {
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
    color: #302e6c;
    padding-bottom: 18px;
}

.ic-block-spaced {
    padding-top: 20px;
}

/* dotted variant used in the employee columns */
.ic-list-dot > li::before {
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
/* --- priorities for fy26 : plain columns on a pale blue field --- */
.ic-priority-panel {
    padding: 30px;
    border-radius: 20px;
    background: linear-gradient(180deg, #e6f1fa 0%, #eff6fc 60%, #f8fcfe 100%);
}

/* the cards carry the same numbered badge as the natural capital priorities :
   white number knocked out of the red > navy patch, its left sliver clipped by
   the card edge, so the padding leaves room for it */
.ic-priority {
    position: relative;
    overflow: hidden;
    height: 100%;
    margin-bottom: 28px;
    padding: 22px 24px 24px 72px;
    background: #ffffff;
    border: 1px solid #302e6c;
}

.ic-priority-badge {
    position: absolute;
    top: 0;
    left: 0px;
    display: block;
    width: 60px;
    height: 60px;
}

.ic-priority-badge img {
    display: block;
    width: 100%;
    height: 100%;
}

/* same live-text numeral as the natural capital priority badge */
.ic-priority-badge em {
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-weight: 700;
    font-size: 34px;
    line-height: 1;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px #ffffff;
}

.ic-priority h3 {
    font-weight: 700;
    font-size: 17px;
    line-height: 23px;
    color: #302e6c;
    padding-bottom: 8px;
}

.ic-priority p {
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #000000;
    padding-bottom: 0;
}

/* --- delivering impact : the numbered quadrants --- */
.ic-impact {
    height: 100%;
    margin-bottom: 25px;
}

.ic-impact-head {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 15px;
}

/* red rule along the top of the band, running out to the right */

/* and the kink that lifts it up and away over the numeral */
/* .ic-impact-head::after {
  content: "";
  position: absolute;
  top: 8px;
    left: -13px;
    width: 50px;
    height: 1.5px;
  background: #CE181E;
  transform-origin: right center;
  transform: rotate(28deg);
} */

/* the figure is drawn as an outline, not a solid */
.ic-impact-no {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 46px;
    line-height: 50px;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px #a79fd0;
}

.ic-impact-head h3 {
    flex: 1 1 auto;
    padding: 9px 18px;
    border-left: 2px solid #ce181e;
    border-bottom: 2px solid #302e6c;
    background: transparent
        linear-gradient(90deg, #dfdcec 0%, #efeef6 45%, #ffffff 100%) 0% 0%
        no-repeat padding-box;
    font-weight: 700;
    font-size: 17px;
    line-height: 23px;
    color: #302e6c;
    padding-bottom: 9px;
}
/* --- diagrams : the artwork is an img, the labels stay as text --- */

.ic-diagram img {
    width: 100%;
    max-width: 720px;
}

.ic-enabler-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 30px;
    margin: 0;
    padding: 0;
}

.ic-enabler-list li {
    position: relative;
    padding: 0 0 14px 18px;
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #000000;
}

.ic-enabler-list li::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 0;
    width: 7px;
    height: 7px;
    background: #00b5ef;
}

/* --- key interventions --- */
.ic-intervention-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 30px;
}

.ic-intervention h3 {
    font-weight: 700;
    font-size: 17px;
    line-height: 23px;
    color: #302e6c;
    padding-bottom: 6px;
}

.ic-intervention p {
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #000000;
    padding-bottom: 0;
}

/* --- audience banner (customers / distributors / employees) --- */
.ic-audience-tab {
    max-width: fit-content;
    margin-bottom: 16px;
    padding: 8px 26px;
    background: transparent linear-gradient(90deg, #302e6c 0%, #4b2a80 100%) 0%
        0% no-repeat padding-box;
}

.ic-audience-tab h2 {
    font-weight: 700;
    font-size: 17px;
    line-height: 23px;
    color: #ffffff;
    padding-bottom: 0;
}

.ic-audience-title {
    max-width: fit-content;
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    background: linear-gradient(90deg, #ba1a2a 0%, #2b2075 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 14px;
}

/* --- tool / platform cards --- */
/* the row rule is one continuous red to navy gradient laid across the whole
   grid : each cell shows its own slice of a 300% wide gradient, the same
   trick the capitals grid uses.  the column rules stop short of it. */
.ic-tool-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.ic-tool-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.ic-tool {
    position: relative;
    padding: 22px 26px 26px;
}

/* row rule : plain light blue, the gradient rule belongs to the group head */
.ic-tool::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #6fb8e0;
}

/* vertical divider, held clear of the row rule top and bottom */
.ic-tool::after {
    content: '';
    position: absolute;
    top: 14px;
    bottom: 14px;
    right: 0;
    width: 1px;
    background: #6fb8e0;
}

/* --- three column grid --- */
/* nothing above the first row */
.ic-tool-grid:not(.ic-tool-grid-2):not(.ic-tool-grid-mixed)
    > .ic-tool:nth-child(-n + 3)::before {
    content: none;
}

/* no divider at the end of a row, no left padding at the start of one */
.ic-tool-grid:not(.ic-tool-grid-2):not(.ic-tool-grid-mixed)
    > .ic-tool:nth-child(3n)::after {
    content: none;
}

.ic-tool-grid:not(.ic-tool-grid-2):not(.ic-tool-grid-mixed)
    > .ic-tool:nth-child(3n + 1) {
    padding-left: 0;
}

/* --- two column grid --- */
.ic-tool-grid-2 > .ic-tool:nth-child(-n + 2)::before {
    content: none;
}

.ic-tool-grid-2 > .ic-tool:nth-child(2n)::after {
    content: none;
}

.ic-tool-grid-2 > .ic-tool:nth-child(2n + 1) {
    padding-left: 0;
}

/* --- three on the first row, then two half width ones --- */
/* a six column base carries both patterns : thirds span 2, halves span 3 */
.ic-tool-grid-mixed {
    grid-template-columns: repeat(6, 1fr);
}

.ic-tool-grid-mixed > .ic-tool {
    grid-column: span 2;
}

.ic-tool-grid-mixed > .ic-tool:nth-child(n + 4) {
    grid-column: span 3;
}

.ic-tool-grid-mixed > .ic-tool:nth-child(-n + 3)::before {
    content: none;
}

.ic-tool-grid-mixed > .ic-tool:nth-child(3)::after,
.ic-tool-grid-mixed > .ic-tool:nth-child(5)::after {
    content: none;
}

.ic-tool-grid-mixed > .ic-tool:nth-child(1),
.ic-tool-grid-mixed > .ic-tool:nth-child(4) {
    padding-left: 0;
}

/* the double width cell closes an incomplete row */
.ic-tool-wide {
    grid-column: span 2;
}

.ic-tool-wide::after {
    content: none;
}

.ic-tool h4 {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #000000;
    padding-bottom: 8px;
}

.ic-tool h4.ic-block-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #302e6c;
    padding-bottom: 5px;
}

.ic-tool p {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #302e6c;
    padding-bottom: 0;
}
/* the groups sit on one continuous blush panel, not on separate cards */
.ic-platform-wrap {
    padding: 26px 30px 20px;
    background: linear-gradient(180deg, #fcefef 0%, #fdf5f4 60%, #fffcfb 100%);
}

.ic-platform-group {
    margin-bottom: 30px;
}

.ic-platform-group:last-child {
    margin-bottom: 0;
}

/* group label : gradient type over a matching gradient rule */
.ic-group-head {
    position: relative;
    padding: 0 0 10px;
    width: max-content;
    max-width: 100%;
    margin-bottom: 0;
    background: linear-gradient(90deg, #ce181e 0%, #7b1e4c 55%, #302e6c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
}

/* the head is only as wide as its text, so the gradient sweeps across the
   words : the rule under it belongs to the grid, which is full width */
.ic-group-head + .ic-tool-grid {
    position: relative;
    padding-top: 4px;
}

.ic-group-head + .ic-tool-grid::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1.5px;
    background: linear-gradient(90deg, #ce181e 0%, #7b1e4c 55%, #302e6c 100%);
}

/* --- customer lifecycle : alternating timeline --- */
/* three shared rows : text above | circle rail | text below.
   every step is a subgrid of those rows, so the circles line up and each
   half auto-sizes to its tallest label : no fixed heights anywhere */
.ic-lifecycle {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 0;
    margin: 0;
    /* the labels are wider than their step, so the two end ones need room
     to hang past the first and last circle */
    padding: 0 60px;
}

.ic-lifecycle li {
    display: grid;
    grid-row: 1 / -1;
    /* one explicit column : without it the circle and the connector, which
     share row 2, get auto-placed into a second implicit column */
    grid-template-columns: 100%;
    grid-template-rows: subgrid;
    row-gap: 0;
    text-align: center;
}

/* the connector : one slice of a single red-to-navy gradient per step */
.ic-lifecycle li::before {
    content: '';
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    width: 100%;
    height: 2px;
    background-image: linear-gradient(90deg, #ce181e 0%, #302e6c 100%);
    background-size: 700% 100%;
    background-repeat: no-repeat;
}

.ic-lifecycle li:nth-child(1)::before {
    width: 50%;
    justify-self: end;
    background-position: 0% 0;
}

.ic-lifecycle li:nth-child(2)::before {
    background-position: 16.66% 0;
}

.ic-lifecycle li:nth-child(3)::before {
    background-position: 33.33% 0;
}

.ic-lifecycle li:nth-child(4)::before {
    background-position: 50% 0;
}

.ic-lifecycle li:nth-child(5)::before {
    background-position: 66.66% 0;
}

.ic-lifecycle li:nth-child(6)::before {
    background-position: 83.33% 0;
}

.ic-lifecycle li:nth-child(7)::before {
    width: 50%;
    justify-self: start;
    background-position: 100% 0;
}

.ic-step-no {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #c7ddf3;
    border: 1px solid #302e6c;
    border-radius: 50%;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #302e6c;
}

.rm-risk-card p {
    margin: 0 0 14px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #000000;
}

.rm-risk-card p:last-child {
    margin-bottom: 0;
}

.rm-risk-mitigation .src-square-list {
}
/* the label is wider than its own step so the copy does not wrap to a
   sliver : neighbours never collide because the labels alternate rows */
.ic-step-text {
    grid-column: 1;
    width: 170%;
    justify-self: center;
    padding: 0;
}

/* label above the rail : sits on the bottom of row 1, rule under it */
.ic-step-above > .ic-step-text {
    grid-row: 1;
    align-self: end;
    padding-bottom: 12px;
    margin-bottom: 14px;
    max-width: 220px;
    border-bottom: 2px solid #302e6c;
}

/* label below the rail : sits on the top of row 3, rule over it */
.ic-step-below > .ic-step-text {
    grid-row: 3;
    align-self: start;
    padding-top: 12px;
    margin-top: 14px;
    max-width: 220px;
    border-top: 2px solid #ce181e;
}

.ic-lifecycle h3 {
    font-weight: 700;
    font-size: 16px;
    line-height: 21px;
    color: #302e6c;
    padding-bottom: 4px;
}

.ic-lifecycle p {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #000000;
    padding-bottom: 0;
}

/* --- customer journeys --- */
/* the column is the flex box, the card is the flex item : the card fills the
   row height on its own, so no height:100% (which overflowed on some screens) */
.ic-journey-col {
    display: flex;
}

.ic-journey {
    flex: 1 1 auto;
    margin-bottom: 25px;
    padding: 22px 24px 24px;
    background: linear-gradient(180deg, #eef6fc 0%, #f6fafd 60%, #ffffff 100%);
}

.ic-journey > h3 {
    font-weight: 700;
    font-size: 18px;
    line-height: 23px;
    background: linear-gradient(90deg, #ba1a2a 0%, #2b2075 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 4px;
}

.ic-journey-note {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #000000;
    padding-bottom: 18px;
}

.ic-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.ic-stat {
    padding: 0 20px 12px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid #8886bc;
}

.ic-stat h4 {
    font-weight: 700;
    font-size: 30px;
    line-height: 28px;
    max-width: fit-content;
    background: linear-gradient(90deg, #ce181e 0%, #2a2076 130%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 2px;
}

.ic-stat p {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #000000;
    padding-bottom: 0;
}

/* --- outcomes --- */
.ic-outcome-box {
    position: relative;
    height: 100%;
    padding: 30px 32px 26px;
    border-radius: 0 0 0 40px;
    background: linear-gradient(180deg, #e4f0fa 0%, #edf5fc 60%, #f8fcfe 100%);
}

/* the label is set plain, not in a chip */
.ic-outcome-tab {
    margin-bottom: 18px;
}

.ic-outcome-tab h3 {
    font-weight: 700;
    font-size: 18px;
    line-height: 23px;
    color: #302e6c;
    padding-bottom: 0;
}

.ic-outcome-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    /* items stretch, so every rule in a row lands on one baseline whatever
     the label wraps to */
    align-items: stretch;
}

.ic-outcome-grid-1 {
    grid-template-columns: 1fr;
}

.ic-outcome {
    padding: 0 40px 8px 0;
    margin-bottom: 18px;
    border-bottom: 1px solid #a8a8c4;
}

.ic-outcome h4 {
    font-weight: 700;
    font-size: 30px;
    line-height: 30px;
    background: linear-gradient(90deg, #ba1a2a 0%, #2b2075 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 2px;
}

.ic-outcome p {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #000000;
    padding-bottom: 0;
}

/* --- onboardx steps --- */
.ic-diagram-onboardx img {
    max-width: 300px;
}

.ic-step-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 0;
    padding: 0;
}

.rm-risk-mitigation .src-square-list li {
    margin-bottom: 16px;
}

.rm-risk-mitigation .src-square-list li:last-child {
    margin-bottom: 0;
}

/* the opportunity runs under the first two columns only */
.rm-risk-opportunity {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #302e6c;
}

/* rule down the left of the impact column */
.rm-risk-meta {
    padding-left: 30px;
    border-left: 1px solid #302e6c;
}

.rm-risk-meta-block {
    margin-bottom: 26px;
}

.rm-risk-meta-block:last-child {
    margin-bottom: 0;
}

.rm-risk-meta-block img {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
}

/* stakeholder icons, two across as in the design */
.rm-risk-icons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
    max-width: 200px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rm-risk-icons img {
    width: 100%;
    max-width: 84px;
}

/* the capitals sit three across */
.rm-risk-icons-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.rm-risk-icons-3 img {
    max-width: 60px;
}

.rm-risk-note {
    margin: 0;
    padding-top: 24px;
    border-top: 1px solid #302e6c;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

/* --- long form copy blocks --- */
.rm-copy-section {
    padding: 44px 0 0;
}

.rm-copy-after-list {
    margin-top: 20px;
}

.rm-figure {
    margin-top: 40px;
}

.rm-figure img {
    display: block;
    width: 100%;
    max-width: 750px;
    height: auto;
    margin: 0 auto;
}

/* --- risk management process --- */
.rm-process {
    padding: 56px 0 10px;
}

.rm-process-grid {
    display: grid;
    grid-template-columns: 45% 51%;
    gap: 4%;
    align-items: center;
}

/* the diagram is close to square, so it is capped rather than filling its column */
.rm-process-figure img {
    max-width: 440px;
    margin: 0 auto;
}

.rm-process-copy p {
    margin: 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

@media (max-width: 1199px) {
    .rm-banner-heading h1 {
        font-size: 32px;
        line-height: 42px;
    }

    .rm-defence-grid {
        gap: 48px;
    }

    .rm-defence-card:not(:last-child)::after {
        right: -33px;
    }

    .rm-committee-list {
        column-gap: 40px;
    }

    .rm-tools-grid {
        column-gap: 36px;
    }
}

@media (max-width: 991px) {
    .rm-banner-heading h1 {
        font-size: 26px;
        line-height: 36px;
    }

    .rm-committee-list {
        column-count: 1;
    }

    .rm-tools-grid {
        column-count: 2;
    }

    .rm-risk-body,
    .rm-risk-cols {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .rm-risk-mitigation {
        padding-left: 0;
        padding-top: 22px;
        border-left: 0;
        border-top: 1px solid #302e6c;
    }

    .rm-risk-meta {
        padding-left: 0;
        padding-top: 24px;
        border-left: 0;
        border-top: 1px solid #302e6c;
    }

    .rm-fraud-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .rm-governance {
        padding-top: 34px;
    }

    .rm-defence-grid {
        grid-template-columns: 1fr;
        gap: 62px;
        margin-top: 56px;
    }

    /* the chevron drops below the card and points down when stacked */
    .rm-defence-card:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: -40px;
        left: 50%;
        margin: 0 0 0 -9px;
        transform: rotate(135deg);
    }

    .rm-process-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .rm-process-figure img {
        max-width: 620px;
        margin: 0 auto;
    }
}

@media (max-width: 575px) {
    .rm-banner-heading h1 {
        font-size: 22px;
        line-height: 30px;
    }

    .rm-defence-card {
        padding: 44px 18px 24px;
        border-radius: 20px;
    }

    .rm-defence-badge {
        width: 56px;
        height: 56px;
        top: -30px;
        margin-left: -28px;
        font-size: 20px;
    }

    .rm-tools-grid {
        column-count: 1;
    }

    .rm-risk-card {
        padding: 42px 18px 24px;
    }

    .rm-risk-tab {
        left: 16px;
        padding: 9px 18px;
        font-size: 16px;
        line-height: 22px;
    }
}

/* Risk Management page css end */

/* ==========================================================================
   Awards page css start  (awards.php)
   ========================================================================== */

.awards-page .atr-banner {
    margin-bottom: 10px;
}

.aw-banner-heading h1 {
    font-size: 30px;
    line-height: 40px;
}

.aw-list {
    padding: 30px 0 20px;
    background: linear-gradient(180deg, #e9f4fb 0%, #f6fbfe 100%);
}

.aw-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    padding-bottom: 44px;
    margin-bottom: 44px;
}

/* gradient rule between the rows */
.aw-row::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, #ce181e 0%, #302e6c 100%);
    opacity: 0.6;
}

.aw-row:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

.aw-row:last-child::after {
    display: none;
}

.aw-item {
    display: flex;
    flex-direction: column;
}

/* the trophies vary in height, so they are seated on a shared baseline */
.aw-item-media {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    min-height: 300px;
    margin-bottom: 20px;
}

.aw-item-media img {
    width: auto;
    max-width: 100%;
    max-height: 300px;
    height: auto;
}

.aw-item p {
    margin: 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #302e6c;
}

@media (max-width: 1199px) {
    .aw-banner-heading h1 {
        font-size: 32px;
        line-height: 42px;
    }

    .aw-item-media {
        min-height: 250px;
    }

    .aw-item-media img {
        max-height: 250px;
    }
}

@media (max-width: 991px) {
    .aw-banner-heading h1 {
        font-size: 26px;
        line-height: 36px;
    }

    .aw-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px;
        padding-bottom: 34px;
        margin-bottom: 34px;
    }
}

@media (max-width: 575px) {
    .aw-banner-heading h1 {
        font-size: 22px;
        line-height: 30px;
    }

    .aw-banner-heading h1 span {
        display: inline;
    }

    .aw-row {
        grid-template-columns: 1fr;
    }

    .aw-item-media {
        min-height: 0;
        justify-content: center;
    }
}

/* Awards page css end */

.ic-step-list li {
    padding: 7px 16px;
    border: 1px solid #8886bc;
    border-radius: 20px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #302e6c;
}

/* --- report tables --- */
/* one base, two looks : a labelled corner cell keeps the grey header, an
   empty corner cell switches to the gradient band over shaded figures */
.ic-table {
    width: 100%;
    margin-bottom: 18px;
    border-collapse: collapse;
}

.ic-table th,
.ic-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #dddddd;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #000000;
    text-align: left;
    vertical-align: top;
}

.ic-table thead {
    position: relative;
}

/* the rule under the header spans the whole table, so it hangs off the
   section : sliced across the cells, uneven columns would break it up */
.ic-table thead::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, #ce181e 0%, #7b1e4c 55%, #302e6c 100%);
}

.ic-table thead th {
    padding: 12px 14px;
    border-bottom: none;
    background: #f1f1f1;
    color: #2a2076;
    font-weight: 700;
}
.ic-table.ictbleth thead th {
    background: #75bee9;
}

.ic-table tbody tr:last-child th,
.ic-table tbody tr:last-child td {
    border-bottom: 1.5px solid #3b3b3b;
}

.ic-table strong {
    font-weight: 700;
}

/* figures right align, the label column stays left */
.ic-table-figures th:not(:first-child),
.ic-table-figures td:not(:first-child) {
    text-align: right;
}

/* --- banded variant --- */
/* keyed off an empty corner cell, so it needs no class of its own : the
   markup has to be <th></th> with nothing between the tags */
.ic-table thead th:first-child:empty {
    background: #ededed;
}

.ic-table thead th:first-child:empty ~ th {
    background-image: linear-gradient(
        90deg,
        #ce181e 0%,
        #7b1e4c 55%,
        #302e6c 100%
    );
    background-repeat: no-repeat;
    background-size: 300% 100%;
    color: #ffffff;
}

.ic-table thead th:first-child:empty ~ th:nth-child(2) {
    background-position: 0 0;
}

.ic-table thead th:first-child:empty ~ th:nth-child(3) {
    background-position: 50% 0;
}

.ic-table thead th:first-child:empty ~ th:nth-child(4) {
    background-position: 100% 0;
}

/* fixed columns keep the three header slices lined up end to end */
.ic-table:has(thead th:first-child:empty) {
    table-layout: fixed;
}

.ic-table:has(thead th:first-child:empty) th:first-child,
.ic-table:has(thead th:first-child:empty) td:first-child {
    width: 40%;
}

.ic-table:has(thead th:first-child:empty) tbody td:not(:first-child) {
    background: #eae9f3;
}

/* --- the four average L&D tables, which sit two to a row --- */
/* one of each pair carries a two line title and the other a single line,
   which started the two tables on different lines : a floor on the title
   depth lands both header bands together.  scoped so no other table moves */
.hc-ld-table .ic-block-title {
    min-height: 60px;
}

.ic-note {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    font-style: italic;
    color: #302e6c;
    padding-bottom: 0;
}

/* --- way forward --- */
.ic-way-forward {
    height: 100%;
    padding: 28px 30px;
    border-radius: 8px;
    background: transparent
        linear-gradient(135deg, #ce181e 0%, #8e1a3c 55%, #4b2a80 100%) 0% 0%
        no-repeat padding-box;
}

.ic-way-forward h3 {
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #ffffff;
    padding-bottom: 14px;
}

/* the panel also takes plain copy, not only a bullet list */
.ic-way-forward p {
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #ffffff;
    padding-bottom: 0;
}

.ic-list-light > li {
    color: #ffffff;
}

.ic-list-light > li::before {
    background: #ffffff;
}

.ic-list-light strong {
    color: #ffffff;
}

/* Intellectual Capital page css end */

.hcchart {
    margin: 20px 0px;
    padding-bottom: 20px;
}
.mtbtm0hcap {
    margin-bottom: 0;
}

/* ========================================================================= */
/* Branding : Jolly & Polly, 25 Years, Spell Bee, IdeationX, Thanks A Dot,   */
/* Hack-AI-Thon                                                              */
/* ========================================================================= */

.br-content {
    padding: 0 0 45px;
}

.br-content-last {
    padding-bottom: 0;
}

/* --- jolly and polly --- */
.br-title {
    font-weight: 500;
    font-size: 36px;
    line-height: 36px;
    width: max-content;
    background: linear-gradient(90deg, #c6168d 0%, #8e1c7a 45%, #302e6c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 4px;
}

.br-title-sub {
    font-weight: 400;
    font-size: 30px;
    line-height: 30px;
    color: #302e6c;
    padding-bottom: 20px;
}

/* the three campaign stills, each in the pink to violet campaign border */
.br-still-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 30px;
}

.br-still {
    margin: 0;
    padding: 5px;
    background: linear-gradient(120deg, #e6007e 0%, #b01c7f 50%, #4b2a80 100%);
}

.br-still img {
    display: block;
    width: 100%;
}

.br-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    text-align: justify;
    padding-bottom: 15px;
}

.br-text strong {
    font-weight: 700;
}

.br-text-spaced {
    padding-top: 14px;
}

.br-hero {
    margin-top: 20px;
    text-align: center;
}

/* --- 25 years --- */
/* the mark and the headline sit side by side, split by a hairline rule */
.br-25-head {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 26px;
}

/* the logo files carry a viewBox but no width or height, so they have no
   intrinsic size : as a flex item that collapses to nothing.  a definite
   basis plus a full width image is what makes them render */
.br-25-logo {
    flex: 0 0 210px;
    width: 210px;
    padding-right: 30px;
    border-right: 1px solid #b9b7d6;
}

.br-25-logo img,
.br-lockup-logo img,
.br-dot-logo img,
.br-panel-logo img {
    width: 100%;
    height: auto;
}

.br-25-title {
    font-weight: 400;
    font-size: 30px;
    line-height: 30px;
    color: #302e6c;
    padding-bottom: 0;
}

/* the two celebration photographs carry their gold frame in the artwork.
   one per half column, so the artwork is capped and centred rather than
   blown up to the full width of the column */
.br-frame-stack {
    display: grid;
    gap: 18px;
    margin: 0 auto;
}

.br-frame {
    margin: 0;
}

.br-frame img {
    display: block;
    width: 100%;
}

.br-25-visual {
    margin-top: 30px;
    text-align: center;
}

/* --- campaign panels : spell bee and hack-ai-thon --- */
/* the artwork is the panel background, the copy sits on its open left half */
.br-panel {
    display: flex;
    align-items: center;
    min-height: 520px;
    padding: 45px 50px;
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
}

.br-panel-copy {
    width: 100%;
    max-width: 470px;
}

.br-panel-spell {
    background-image: url('../images/branding-jolly-and-polly/spellings-spellers-and-spellionaire-img.webp');
}

.br-panel-hack {
    background-image: url('../images/branding-jolly-and-polly/hack-ai-thon-img.webp');
}

/* the artwork is the panel background here : the inline copy of it is only
   for the narrow layout, where it moves below the text */
.bg-img1,
.bg-img2 {
    display: none;
}

.br-panel-logo {
    max-width: 320px;
    margin-bottom: 16px;
}

/* stand-in for the hack-ai-thon lockup while its svg exports empty */
.br-panel-brand {
    display: block;
    font-weight: 700;
    font-size: 26px;
    line-height: 32px;
    color: #ffffff;
}

.br-panel-wordmark {
    display: block;
    font-weight: 700;
    font-size: 34px;
    line-height: 42px;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #f6dfa1 0%, #e3be68 45%, #c39a33 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.br-panel-title {
    font-weight: 400;
    font-size: 30px;
    line-height: 34px;
    color: #ffffff;
    padding-bottom: 20px;
}

.br-panel-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #ffffff;
    text-align: justify;
    padding-bottom: 0;
}

/* --- ideationx and thanks a dot --- */
.br-lockup {
    display: flex;
    align-items: center;
    gap: 34px;
    margin-bottom: 26px;
}

.br-lockup-logo {
    flex: 0 0 300px;
    width: 300px;
    padding-right: 34px;
    border-right: 1px solid #b9b7d6;
}

.br-lockup-title {
    font-weight: 400;
    font-size: 30px;
    line-height: 34px;
    color: #302e6c;
    padding-bottom: 0;
}

.br-lockup-title-tight {
    padding-bottom: 18px;
}

.br-shot-stack {
    display: grid;
    gap: 18px;
    max-width: 400px;
    margin: 0 auto 22px;
}

.br-shot {
    margin: 0;
    padding: 4px;
    background: linear-gradient(120deg, #e6007e 0%, #b01c7f 50%, #4b2a80 100%);
}

.br-shot img {
    display: block;
    width: 100%;
}

.br-dot-logo {
    max-width: 320px;
    margin-bottom: 18px;
}

/* Governance page css end */

/* ==========================================================================
   Home page only (.home-page) — Read More / Read Full Message button style
   Scoped to index.php so no other page is affected.
   ========================================================================== */

.home-page .readmorebtn,
.home-page .readBtn {
    max-width: none;
    width: fit-content;
}

.home-page .readmorebtn a,
.home-page .readBtn a {
    max-width: none;
    width: fit-content;
    padding: 11px 18px 11px 20px;
    border: none;
    border-radius: 30px;
    color: #ffffff;
    /* Only half of this is visible through the 200%-wide window, so sliding it
     reverses the colours instead of cross-fading — the hover effect is unchanged.
     Left half maps stop 37.5% onto the button's 75%, so at rest this renders
     exactly the heading gradient: #CE181E 0% -> #2A2076 75%.
     Right half is its mirror, which is what hover shows. */
    background-image: linear-gradient(
        90deg,
        #ce181e 0%,
        #2a2076 37.5%,
        #2a2076 62.5%,
        #ce181e 100%
    );
    background-size: 200% 100%;
    background-position: left center;
    transition:
        background-position 0.5s ease,
        gap 0.3s ease-out;
}

.home-page .readmorebtn a:hover,
.home-page .readBtn a:hover {
    color: #ffffff;
    background-position: right center;
    gap: 16px;
}

/* the arrow ships as a red SVG at 13x26, so scale it down and knock it to white */
.home-page .readmorebtn a img,
.home-page .readBtn a img {
    width: auto;
    height: 14px;
    filter: brightness(0) invert(1);
    margin-top: -2px;
}
.br-dot-visual {
    margin-top: 18px;
}

/* ==========================================================================
   Jolly & Polly — two-column intro plus a full-bleed image strip below
   ========================================================================== */

.jollyPollySec {
    position: relative;
    padding-top: 60px;
}

.jolly-content h2 {
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    padding-bottom: 8px;
    max-width: fit-content;
    background-image: linear-gradient(90deg, #ce181e 0%, #2a2076 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* same treatment as the slider card headings */
.jolly-content h5 {
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    color: #302e6c;
    padding-bottom: 15px;
}

/* the copy must read at one weight throughout — the descendant rule kills any
   bold that creeps in from a stray strong/b in the source text */
.jolly-content p,
.jolly-content p * {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #2b2b2b;
}
.jolly-content p strong {
    font-weight: 700;
}
.jolly-content .readmorebtn {
    margin-top: 32px;
}

.jolly-img {
    display: flex;
    justify-content: flex-end;
}

/* sits outside .container so it can run the full viewport width */
.jolly-years-img {
    margin-top: 50px;
}

.jolly-years-img img,
.jolly-years-img video {
    width: 100%;
    height: auto;
    display: block;
}

/* ========================================================================= */
/* Scroll reveal : wow.js + animate.css timing                               */
/* ========================================================================= */

/* animate.css moves fadeInUp by translate3d(0, 100%, 0), which is 100% of
   the element's OWN height.  a tall paragraph, table or image therefore
   starts a whole block-height below its resting place, so by the time wow
   triggers at the viewport edge the content is still off screen and only
   arrives as the animation ends : it reads as "nothing happens until the
   text reaches the top".  a short fixed travel fixes the lateness, and a
   shorter duration keeps the reveal from dragging on a slow phone */
.wow.fadeInUp {
    animation-name: fadeInUpShort;
}

@keyframes fadeInUpShort {
    from {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.wow.animated {
    animation-duration: 0.6s;
}

/* ========================================================================= */
/* Financial Capital : banner                                                */
/* ========================================================================= */

/* the copy sits centred against the artwork while the breadcrumb stays
   pinned to the top : both columns are flex, so the auto margins take the
   leftover height either side of the block that is shorter */
.fc-banner-row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

.fc-banner-row .atr-banner-heading,
.fc-banner-row .fc-visual {
    margin-top: auto;
    margin-bottom: auto;
}

/* two per line : the grid rows keep both cells the same height, so the rules
   under each pair stay on one line however the copy wraps */
.fc-material-list-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 30px;
}

/* both cells of the closing row keep their rule : in the 2 column grid the
   last child sits beside its pair, not below it */
.fc-material-list-2col li:last-child {
    border-bottom: 1px solid #b9b7d6;
}

.botcontclr p {
    color: #302e6c;
}

.fc-priority-list.fch4span h4 span {
    font-weight: 400;
    color: #000;
}
.gov-note p a {
    color: #000;
}
.strgintroh2spn h2 span {
    display: block;
}