body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    font-family: "DM Sans", sans-serif;
    color:#0F0F10;
}
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: 24px;
    font-weight: 400;
    font-family: "DM Sans", sans-serif;
    color:#0F0F10;
}

.my-sidenav {
    display: none;
}

/*-----The 'Z' wordmark always reads bold, wherever it appears-----*/
.z-mark {
    font-weight: 700;
}

/*-----------Header Css Start-------------*/
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    padding: 12px 0px;
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .8);
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

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

#header.sticky {
    padding: 12px 0px;
    background-color: #0F0F10;
    border-bottom-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0px 2px 20px rgba(15, 15, 16, 0.25);
}

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

#header .logo {
    display: inline-block;
    line-height: 0;
}

#header .logo img {
    height: 52px;
    width: auto;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

#header.sticky .logo img {
    height: 42px;
}

.btn-download {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border: 1px solid #ffffff;
    color: #ffffff;
    border-radius: 10px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.btn-download::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: #7751A1;
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform-origin: left center;
    -webkit-transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-download:hover::before {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
}

.btn-download:hover {
    border-color: #7751A1;
    color: #ffffff;
}

.btn-download .btn-text {
    position: relative;
    z-index: 1;
}

.btn-download .btn-arrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.btn-download .btn-arrow svg {
    width: 15px;
    height: 15px;
    display: block;
}
/*-----------Header Css End-------------*/

/*-----------Hero Banner Css Start-------------*/
.hero-banner {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #0F0F10;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

.hero-video .hero-video-mbl {
    display: none;
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(to right, rgba(15, 15, 16, 0.85) 0%, rgba(15, 15, 16, 0.62) 40%, rgba(15, 15, 16, 0.25) 72%, rgba(15, 15, 16, 0) 100%);
}

.hero-banner .container {
    position: relative;
    z-index: 2;
    height: 100%;
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    text-align: left;
}

.hero-title {
    display: block;
    margin: 0;
    padding: 0;
}

.hero-title-top {
    display: block;
    font-size: 34px;
    line-height: 1;
    font-weight: 300;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffffff;
    padding-bottom: 10px;
}

.hero-title-main {
    display: block;
    font-size: 86px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 30%, #d2d2d2 62%, #8d8d8d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-sub {
    font-size: 12px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #b7b7b7;
}

.hero-content .hero-sub:first-of-type {
    padding-top: 10px;
}

.hero-sub strong {
    font-weight: 700;
    color: #ffffff;
}

.scroll-down {
    position: absolute;
    left: 50%;
    bottom: 40px;
    z-index: 2;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 14px;
    text-transform: uppercase;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.scroll-down .scroll-arrow {
    display: inline-flex;
    align-items: center;
    animation: scrollBounce 1.8s ease-in-out infinite;
    -webkit-animation: scrollBounce 1.8s ease-in-out infinite;
}

.scroll-down .scroll-arrow svg {
    width: 16px;
    height: 16px;
    display: block;
}

@-webkit-keyframes scrollBounce {
    0%, 100% { -webkit-transform: translateY(0px); }
    50% { -webkit-transform: translateY(8px); }
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(8px); }
}

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

/*-----------FY26 Highlights Css Start-------------*/
.fy-highlights {
    padding: 60px 0px;
    background-color: #ffffff;
}

.fy-mainhead {
color: #000;
    font-size: 42px;
    line-height: 48px;
    font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
}

.fy-mainhead span {
    display: block;
}

.fy-intro {
    max-width: 720px;
    padding-top: 22px;
    font-size: 16px;
    line-height: 24px;
}

/*-----Tab Nav-----*/
.fyTabs {
    padding-top: 55px;
}

#fy-tab {
    border-bottom: none;
    position: relative;
    justify-content: space-between;
    gap: 6px;
}

.fyTabs .nav-item {
    flex: 1 1 0;
}

.fyTabs .nav-link {
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
    padding: 16px 12px;
    font-size: 16px;
    line-height: 24px;
    color: #0F0F10;
    background-color: transparent;
    border: none !important;
    border-radius: 0px;
    transition: color 0.4s ease;
    -webkit-transition: color 0.4s ease;
}

.fyTabs .nav-tabs .nav-item.show .nav-link,
.fyTabs .nav-tabs .nav-link.active {
    color: #000000;
    background-color: transparent !important;
    border-color: transparent !important;
}

.tab-indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 0;
    background-color: #F4F2F7;
    background-image: url(../images/pattern-bg.webp);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 0px;
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.18, 1), width 0.6s cubic-bezier(0.77, 0, 0.18, 1);
    -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.18, 1), width 0.6s cubic-bezier(0.77, 0, 0.18, 1);
}

.tab-indicator svg {
    fill: #F4F2F7;
}

.tab-indicator svg:nth-child(1) {
    position: absolute;
    right: 98%;
    height: 100%;
}

.tab-indicator svg:nth-child(2) {
    position: absolute;
    left: 98%;
    height: 100%;
}

.tab-indicator.tabButton_1 {
    border-top-left-radius: 20px;
}

.tab-indicator.tabButton_1 svg:nth-child(1) {
    display: none;
}

.tab-indicator.tabButton_5 {
    border-top-right-radius: 20px;
}

.tab-indicator.tabButton_5 svg:nth-child(2) {
    display: none;
}

.l-tab-mbl {
    display: none;
}

/*-----Tab Content-----*/
.fy-tabcontent .tab-pane {
    border-radius: 30px;
    background-color: #F4F2F7;
    background-image: url(../images/pattern-bg2.webp);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

#fy-tab-a {
    border-radius: 0px 30px 30px 30px;
}

#fy-tab-e {
    border-top-right-radius: 0px;
}

.fy-tabbody {
    padding: 55px 60px;
    min-height: 460px;
}

.fy-tabhead {
    font-size: 26px;
    line-height: 34px;
    color: #0F0F10;
    padding-bottom: 34px;
    font-weight: 300;
}

/*-----Initiative Cards-----*/
.fy-card {
    border-left: 4px solid #ffffff;
    padding: 0px 20px 0px 20px;
    margin-bottom: 34px;
}

.fy-card h4 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: #7751A1;
    text-transform: uppercase;
    padding-bottom: 10px;
}

.fy-card p {
    font-size: 16px;
    line-height: 24px;
}

/*-----New Initiatives cards carry a link to their chapter PDF-----*/
.fy-card-link {
    /* the bootstrap columns already stretch, so a full-height flex card
       puts every Read More on a shared baseline however long the copy runs */
    display: flex;
    flex-direction: column;
    height: calc(100% - 34px);
}

.fy-card-link p {
    flex: 1 1 auto;
}

.fy-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    font-size: 16px;
    line-height: 24px;
    color: #7751A1;
    transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
}

.fy-cta:hover {
    color: #5C3D80;
}

.fy-cta .btn-arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    -webkit-transition: -webkit-transform 0.3s ease;
}

.fy-cta:hover .btn-arrow {
    transform: translateX(4px);
    -webkit-transform: translateX(4px);
}

.fy-cta .btn-arrow svg {
    width: 15px;
    height: 15px;
    display: block;
}

/*-----Stat Cards-----*/
.fy-stat {
    border-left: 4px solid #ffffff;
    padding: 0px 20px 0px 20px;
    margin-bottom: 40px;
}

.fy-stat h4 {
    font-size: 24px;
    line-height: 30px;
    color: #7751A1;
    padding-bottom: 8px;
    font-weight: 700;
}

.fy-stat h4 .unit {
    font-size: 22px;
}

.fy-stat h4 .rupee {
    padding-right: 2px;
}

.fy-stat p {
    font-size: 16px;
    line-height: 24px;
}

.fy-stat-text h4 {
    font-size: 20px;
    line-height: 28px;
    text-transform: uppercase;
}

.fy-footnote {
    font-size: 13px;
    line-height: 20px;
    color: #55555C;
    padding-top: 6px;
}
/*-----------FY26 Highlights Css End-------------*/

/*-----------About Z Css Start-------------*/
.about-z {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #0F0F10;
}

.about-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.about-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    will-change: transform, filter;
}

.about-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    background-color: rgba(15, 15, 16, 0.48);
    will-change: opacity;
}

.about-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    will-change: transform, opacity;
}

.about-mainhead {
    color: #ffffff;
    font-size: 42px;
    line-height: 48px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.about-subhead {
    color: #ffffff;
    font-size: 30px;
    line-height: 40px;
    font-weight: 300;
    padding-top: 26px;
}

.about-text {
    color: #ffffff;
    max-width: 700px;
    padding-top: 22px;
    font-size: 16px;
    line-height: 24px;
}

.about-cta {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    padding: 8px 18px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    color: #ffffff;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.about-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: #7751A1;
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform-origin: left center;
    -webkit-transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-cta:hover::before {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
}

.about-cta:hover {
    border-color: #7751A1;
    color: #ffffff;
}

.about-cta .btn-text {
    position: relative;
    z-index: 1;
}

.about-cta .btn-arrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.about-cta .btn-arrow svg {
    width: 15px;
    height: 15px;
    display: block;
}
/*-----------About Z Css End-------------*/







/*-----------CEO Message Css Start-------------*/
.ceo-message {
    position: relative;
    overflow: hidden;
    background-color: #0F0F10;
    background-image: url(../images/chairman-bg.webp);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.ceo-stage {
    position: relative;
    height: 100vh;
}

/*-----Step 2: heading, left, vertically centred-----*/
.ceo-mainhead {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 3;
    margin-top: -48px;
    color: #ffffff;
    font-size: 72px;
    line-height: 72px;
    font-weight: 200;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    will-change: transform, opacity;
}

.ceo-mainhead span {
    display: block;
}

/*-----Step 1: Z parked on the left of the stage from the outset-----*/
.ceo-zshape {
    position: absolute;
    left: 0;
    bottom: 5vh;
    z-index: 1;
    display: block;
    height: 75vh;
    pointer-events: none;
    will-change: transform, opacity;
}

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

/*-----Step 1: portrait, right, inside the container-----*/
.ceo-portrait {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 83vh;
    will-change: transform;
}

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

/*-----Step 6: copy, right half-----*/
.ceo-info {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 3;
    width: 46%;
    /* centred on a 100vh stage, so on a short window the block is capped and
       scrolls internally instead of running off the top and bottom edges */
    max-height: 88vh;
    overflow-y: auto;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    will-change: transform, opacity;
}

.ceo-salutation {
    color: #ffffff;
    padding-bottom: 14px;


}

.ceo-quote {
    color: #ffffff;
    font-size: 36px;
    line-height: 42px;
    font-weight: 200;
}

/*-----Second line of the promise, in after the first-----*/
.ceo-quote-two {
    margin-top: 20px;
    font-size: 22px;
    line-height: 32px;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    will-change: transform, opacity;
}

.ceo-sign {
    margin-top: 34px;
}

.ceo-sign h4 {
    font-size: 36px;
    line-height: 42px;
    font-weight: 200;
    color: #ffff;
    padding-bottom: 10px;
}

.ceo-sign p {
    color: #ffffff;
    font-size: 16px;
    line-height: 24px;
    font-style: italic;
    font-weight: 300;
}

/*-----CTA-----*/
.ceo-cta {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    padding: 8px 18px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    color: #ffffff;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.ceo-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: #7751A1;
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform-origin: left center;
    -webkit-transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.ceo-cta:hover::before {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
}

.ceo-cta:hover {
    border-color: #7751A1;
    color: #ffffff;
}

.ceo-cta .btn-text,
.ceo-cta .btn-arrow {
    position: relative;
    z-index: 1;
}

.ceo-cta .btn-arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.ceo-cta .btn-arrow svg {
    width: 15px;
    height: 15px;
    display: block;
}
/*-----------CEO Message Css End-------------*/

/*-----------Strategic Overview Css Start-------------*/
.so {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #0F0F10;
}

.so__canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}

.so__scrim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(90deg, rgba(15, 15, 16, 0.86) 0%, rgba(15, 15, 16, 0.60) 40%, rgba(15, 15, 16, 0.18) 100%);
}

.so__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

/*-----All five panels share one grid cell so they swap in place-----*/
.so__stack {
    display: grid;
    grid-template-areas: "stack";
    width: 100%;
    max-width: 560px;
}

.so__panel {
    grid-area: stack;
}

/*-----Masked lines-----*/
.so__mask {
    display: block;
    overflow: hidden;
}

.so__mask > span {
    display: block;
    will-change: transform;
}

.so__title {
    color: #ffffff;
    font-size: 42px;
    line-height: 48px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

/*-----Title words sit side by side so each title keeps to a single line-----*/
.so__title .so__mask {
    display: inline-block;
    vertical-align: top;
}

.so__title .so__mask + .so__mask {
    margin-left: 0.18em;
}

.so__sub {
    color: #ffffff;
    font-size: 15px;
    line-height: 24px;
    text-transform: uppercase;
    padding-top: 18px;
}

.so__text {
    color: #ffffff;
    max-width: 460px;
    padding-top: 18px;
    font-size: 16px;
    line-height: 24px;
}

/*-----Read more, masked so it swaps with the rest of the panel copy-----*/
.so__ctawrap {
    padding-top: 26px;
}

.so__ctawrap .so__mask > span {
    padding-bottom: 4px;
}

.so__cta {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    color: #ffffff;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.so__cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: #7751A1;
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform-origin: left center;
    -webkit-transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.so__cta:hover::before {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
}

.so__cta:hover {
    border-color: #7751A1;
    color: #ffffff;
}

.so__cta .btn-text {
    position: relative;
    z-index: 1;
}

.so__cta .btn-arrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.so__cta .btn-arrow svg {
    width: 15px;
    height: 15px;
    display: block;
}

/*-----Slide indicator-----*/
.so__progress {
    position: absolute;
    right: 40px;
    top: 50%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

.so__dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.30);
    transition: background-color 0.4s ease, transform 0.4s ease;
    -webkit-transition: background-color 0.4s ease, -webkit-transform 0.4s ease;
}

.so__dot.is-active {
    background-color: #ffffff;
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
}
/*-----------Strategic Overview Css End-------------*/

/*-----------ESG Css Start-------------*/
.esg {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #0F0F10;
}

.esg-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

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

.esg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(90deg, rgba(15, 15, 16, 0.3) 0%, rgba(15, 15, 16, 0.2) 48%, rgba(15, 15, 16, 0.1) 100%);
}

.esg-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.esg-mainhead {
    color: #ffffff;
    font-size: 42px;
    line-height: 48px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.esg-text {
    color: #ffffff;
    padding-top: 26px;
    font-size: 16px;
    line-height: 24px;
}

/*-----Read more-----*/
.esg-cta {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    padding: 8px 18px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    color: #ffffff;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.esg-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: #7751A1;
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform-origin: left center;
    -webkit-transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.esg-cta:hover::before {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
}

.esg-cta:hover {
    border-color: #7751A1;
    color: #ffffff;
}

.esg-cta .btn-text {
    position: relative;
    z-index: 1;
}

.esg-cta .btn-arrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.esg-cta .btn-arrow svg {
    width: 15px;
    height: 15px;
    display: block;
}
/*-----------ESG Css End-------------*/

/*-----------ESG Pillars Css Start-------------*/
.esg3 {
    position: relative;
    background-color: #0F0F10;
}

.esg3-pin {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px 60px;
    overflow: hidden;
}

/*-----Stage: slides translate vertically inside it-----*/
.esg3-stage {
    position: relative;
    width: 100%;
    max-width: 1100px;
    height: 86vh;
    max-height: 700px;
    min-height: 380px;
    margin: 0px auto;
    overflow: hidden;
}

.esg3-slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    pointer-events: none;
    will-change: transform;
    padding-top: 30px;
}

.esg3-slide.is-active {
    pointer-events: auto;
}

/*-----Headline sits behind the image, white throughout-----*/
.esg3-headline {
    --overlap: 44px;
    position: relative;
    z-index: 3;
    max-width: 100%;
    /* the media is pulled up under the headline so the type reads half above
       the image and half over it; below 768 the two are stacked instead */
    margin: 0px 0px calc(-1 * var(--overlap));
    /* ENVIRONMENTAL is the longest word and cannot break, so the type is sized
       against the stage width; the vw term only bites on narrow screens */
    font-size: clamp(24px, 7.5vw, 88px);
    line-height: 1;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
}

/*-----Sub-parts stacked in one cell so they swap in place-----*/
.esg3-subs {
    display: grid;
    grid-template-areas: "sub";
    width: 100%;
}

.esg3-sub {
    position: relative;
    grid-area: sub;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    will-change: transform, opacity;
}

.esg3-subhead {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 3;
    color: #ffffff;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}

/*-----Media-----*/
.esg3-media {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    height: min(430px, calc(86vh - 260px));


    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 26px;
    will-change: transform;
}

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

/*-----Soft top scrim so the headline and sub-heading read over bright images-----*/
.esg3-media::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 48%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(15, 15, 16, 0.75) 0%, rgba(15, 15, 16, 0.38) 55%, rgba(15, 15, 16, 0) 100%);
}

/*-----Caption-----*/
.esg3-caption {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 780px;
}

.esg3-desc {
    color: rgba(255, 255, 255, 0.80);


    will-change: transform, opacity;
    font-size: 16px;
    line-height: 24px;
}

/*-----Read more, sits under the caption-----*/
.esg3-cta {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding: 8px 18px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    color: #ffffff;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.esg3-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: #7751A1;
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform-origin: left center;
    -webkit-transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.esg3-cta:hover::before {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
}

.esg3-cta:hover {
    border-color: #7751A1;
    color: #ffffff;
}

.esg3-cta .btn-text {
    position: relative;
    z-index: 1;
}

.esg3-cta .btn-arrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.esg3-cta .btn-arrow svg {
    width: 15px;
    height: 15px;
    display: block;
}

/*-----Right-edge pager-----*/
.esg3-pager {
    position: absolute;
    top: 50%;
    right: 34px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0px;
    padding: 0px;
    list-style: none;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

.esg3-pager li {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.30);
    cursor: pointer;
    transition: background-color 0.4s ease, transform 0.4s ease;
    -webkit-transition: background-color 0.4s ease, -webkit-transform 0.4s ease;
}

.esg3-pager li.is-active {
    background-color: #7751A1;
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
}
/*-----------ESG Pillars Css End-------------*/

/*-----------Pin spacer-------------
  ScrollTrigger wraps every pinned section in a transparent .pin-spacer.
  Its extra scroll-budget area lets the page background show through, which
  reads as a white band between sections. All pinned sections here are dark,
  so the spacer matches them.
-----------------------------------*/
.pin-spacer {
    background-color: #0F0F10;
}



/*-----------Business Segment Review Css Start-------------*/
.bsr {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    padding: 18px;
    background-color: #0F0F10;
}

.bsr-viewport {
    position: relative;
    width: 100%;
    height: 100%;
}

/*-----Each slide is the white panel + the image card-----*/
.bsr-slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    gap: 18px;
    opacity: 0;
    visibility: hidden;
    will-change: transform;
}

.bsr-slide.is-active {
    opacity: 1;
    visibility: visible;
}

/*-----Left white panel-----*/
.bsr-panel {
    flex: 0 0 41%;
    max-width: 41%;
    display: flex;
    align-items: center;
    padding: 40px 76px 150px 76px;
    border-radius: 4px;
    background-color: #ffffff;
    /* the slide is a fixed 100vh box; on a short window the copy is scrolled
       rather than silently clipped by the panel's rounded edge */
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bsr-info {
    width: 100%;
    padding: 28px 0px;
}

.bsr-eyebrow {
    color: #4b4848;
    font-size: 13px;
    line-height: 20px;
    text-transform: uppercase;
    padding-bottom: 14px;
    letter-spacing: 1px;
}

.bsr-title {
    font-size: 36px;
    line-height: 44px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 18px;
    background-image: linear-gradient(to top, #000000 0%, #4B4848 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bsr-title span {
    display: block;
    font-size: 20px;
    line-height: 28px;
}

/*-----Digital carries two brands, each with its own copy and link-----*/
.bsr-brands {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 26px 44px;
    padding-top: 28px;
}

/* the brand row is a distinct zone from the segment copy above it, so it is
   set off by a hairline and given room to breathe on both sides */
.bsr-cta + .bsr-brands {
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid rgba(15, 15, 16, 0.10);
}

.bsr-brand {
    /* 0 basis so the two columns split the row evenly regardless of how long
       each description runs, keeping the logos and links on shared baselines */
    flex: 1 1 0;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* the two logo files sit on different baselines, so the marks are aligned
   by giving each brand's logo row a common height, with room above and below
   so they are not crowded by the divider or their own description */
.bsr-brand .bsr-logo {
    display: flex;
    align-items: center;
    height: 36px;
    margin-top: 6px;
    margin-bottom: 10px;
}

.bsr-brand-text {
    /* flex-grow lets the shorter description absorb the height difference so
       both View Website links settle on the same baseline */
    flex: 1 1 auto;
    padding-top: 6px;
    padding-bottom: 4px;
    font-size: 15px;
    line-height: 22px;
    color: #4b4848;
}

/* auto pushes the link to the block's foot, so both CTAs line up on one
   baseline even when the two descriptions run to different depths */
.bsr-brand .bsr-cta {
    margin-top: auto;
    padding-top: 4px;
}

/* The two logo files carry different internal padding - ZEE5 fills 59% of
   its box, Bullet 96% - so the box heights are set to match the visible marks. */
.bsr-logo img {
    height: 34px;
    width: auto;
    display: block;
}

.bsr-logo-z5 img {
    height: 56px;
}

/*-----Read more - the panel is white here, so the button reads dark-----*/
.bsr-cta {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding: 8px 18px;
    border: 1px solid #7751A1;
    border-radius: 10px;
    color: #7751A1;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.bsr-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: #7751A1;
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform-origin: left center;
    -webkit-transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsr-cta:hover::before {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
}

.bsr-cta:hover {
    border-color: #7751A1;
    color: #ffffff;
}

/*-----Brand links: plain text and arrow, no box-----*/
.bsr-cta-link {
    margin-top: 16px;
    padding: 0px;
    gap: 8px;
    border: none;
    border-radius: 0px;
    overflow: visible;
}

/* the sweeping purple fill belongs to the boxed button only */
.bsr-cta-link::before {
    display: none;
}

.bsr-cta-link:hover {
    color: #5C3D80;
}

/* the arrow steps forward on hover in place of the fill */
.bsr-cta-link .btn-arrow {
    transition: transform 0.3s ease;
    -webkit-transition: -webkit-transform 0.3s ease;
}

.bsr-cta-link:hover .btn-arrow {
    transform: translateX(4px);
    -webkit-transform: translateX(4px);
}

/* the logo row already carries bottom spacing, so the button tightens up after it */
.bsr-cta .btn-text {
    position: relative;
    z-index: 1;
}

.bsr-cta .btn-arrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.bsr-cta .btn-arrow svg {
    width: 15px;
    height: 15px;
    display: block;
}

/*-----Right image card-----*/
.bsr-media {
    flex: 1 1 auto;
    overflow: hidden;
    border-radius: 4px;
}

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

/*-----Counter sits in the bottom-left of the white panel-----*/
.bsr-counter {
    position: absolute;
    left: 94px;
    bottom: 56px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.bsr-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 20px;
    padding: 0px;
    border: none;
    background-color: transparent;
    color: #0F0F10;
    cursor: pointer;
    transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
}

.bsr-arrow svg {
    width: 20px;
    height: 12px;
    display: block;
}

.bsr-arrow:hover {
    color: #7751A1;
}

.bsr-arrow:disabled {
    opacity: 0.28;
    cursor: default;
}

.bsr-arrow:disabled:hover {
    color: #0F0F10;
}

.bsr-count {
    color: #7751A1;
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
}

.bsr-count-total {
    color: #55555C;
    font-size: 15px;
    font-weight: 400;
}
/*-----------Business Segment Review Css End-------------*/

/*-----------Board of Directors Css Start-------------*/
.bod {
    padding: 60px 0px;
    background-color: #ffffff;
}

.bod-mainhead {
    color: #000000;
    font-size: 42px;
    line-height: 48px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding-bottom: 44px;
}

.bod-card {
    margin-bottom: 40px;
}

/*-----Photo with committee tags in the corner-----*/
.bod-photo {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 18px;
}

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

.bod-tags {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 6px;
}

/*-----Grey marks a committee member, black marks its chairperson-----*/
.bod-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background-color: #B9B9BD;
    color: #ffffff;
    font-size: 12px;
    line-height: 22px;
    font-weight: 700;
    flex-shrink: 0;
}

.bod-tag.is-chair {
    background-color: #0F0F10;
}

.bod-name {
    color: #000000;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 6px;
}

.bod-role {
    color: #55555C;
    font-size: 16px;
    line-height: 24px;
}

/*-----Committee legend-----*/
/*-----Key: the colour meaning first, then what each letter stands for-----*/
.bod-key {
    padding: 26px 0px 0px 0px;
    border-top: 1px solid rgba(15, 15, 16, 0.12);
}

.bod-key-role {
    display: flex;
    align-items: center;
    color: #55555C;
    font-size: 14px;
    line-height: 22px;
}

.bod-swatch {
    width: 11px;
    height: 11px;
    margin-right: 8px;
    background-color: #B9B9BD;
    flex-shrink: 0;
}

.bod-key-role .bod-swatch + .bod-swatch,
.bod-key-role .bod-swatch:not(:first-child) {
    margin-left: 26px;
}

.bod-swatch.is-chair {
    background-color: #0F0F10;
}

.bod-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 34px;
    margin: 0px;
    padding: 12px 0px 0px 0px;
    list-style: none;
}

.bod-legend li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #55555C;
    font-size: 14px;
    line-height: 22px;
}

.bod-letter {
    color: #0F0F10;
    font-weight: 700;
    flex-shrink: 0;
}
/*-----------Board of Directors Css End-------------*/

/*-----------Board Expertise Css Start-------------*/
.bex {
    padding: 60px 0px 60px 0px;
    background-color:#f7f4f3;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0px;
}

/*-----Underlined section label, as in the report-----*/
.bex-head {
    display: inline-block;
    color: #55555C;
    font-size: 22px;
    line-height: 30px;
    font-weight: 400;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(15, 15, 16, 0.55);
}

.bex-scroll {
    width: 100%;
    margin-top: 22px;
    overflow-x: auto;
}

/*-----Horizontal rules only, no vertical lines-----*/
.bex-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
}

.bex-table thead th {
    padding: 0px 14px 14px 14px;
    border-top: 3px solid #0F0F10;
    border-bottom: 1px solid rgba(15, 15, 16, 0.18);
    color: #55555C;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    text-align: center;
    vertical-align: bottom;
}

.bex-table thead th:first-child {
    width: 26%;
}

.bex-table thead th:not(:first-child) {
    padding-top: 16px;
}

.bex-table tbody th {
    padding: 14px 14px 14px 0px;
    border-bottom: 1px solid rgba(15, 15, 16, 0.18);
    color: #000000;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    text-align: left;
    vertical-align: middle;
}

.bex-table tbody td {
    padding: 14px;
    border-bottom: 1px solid rgba(15, 15, 16, 0.18);
    text-align: center;
    vertical-align: middle;
}

.bex-tick {
    width: 18px;
    height: 14px;
    display: inline-block;
    color: #0F0F10;
}

.bex-dash {
    color: #7751A1;
    font-size: 16px;
    line-height: 24px;
}

.bex-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    margin: 30px auto 0px auto;
    padding: 8px 18px;
    border: 1px solid #7751A1;
    border-radius: 10px;
    color: #7751A1;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.bex-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: #7751A1;
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform-origin: left center;
    -webkit-transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.bex-cta:hover::before {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
}

.bex-cta:hover {
    color: #ffffff;
}

.bex-cta .btn-text,
.bex-cta .btn-arrow {
    position: relative;
    z-index: 1;
}

.bex-cta .btn-arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.bex-cta .btn-arrow svg {
    width: 15px;
    height: 15px;
    display: block;
}
/*-----------Board Expertise Css End-------------*/

/*-----------Financial Statements Css Start-------------*/
.fin {
    padding: 60px 0px;
    background-color: #ffffff;
}

.fin-mainhead {
    color: #000000;
    font-size: 42px;
    line-height: 48px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding-bottom: 40px;
}

.fin-block + .fin-block {
    padding-top: 54px;
}

/*-----Statement Groups & Tiles-----*/
.fin-group + .fin-group {
    padding-top: 22px;
}

.fin-grouphead {
    color: #0F0F10;
    font-size: 28px;
    line-height: 36px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding-bottom: 26px;
}

.fin-tiles > [class*="col-"] {
    margin-bottom: 24px;
}

.fin-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
    text-align: left;
    padding: 18px 20px 20px 20px;
    border-radius: 8px;
    border: 1px solid rgba(15, 15, 16, 0.12);
    background-color: rgba(15, 15, 16, 0.02);
    color: #0F0F10;
    transition: all 0.35s ease;
    -webkit-transition: all 0.35s ease;
}

.fin-tile:hover,
.fin-tile:focus-visible {
    background-color: #7751A1;
    border-color: #7751A1;
    color: #ffffff;
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
}

.fin-tile-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.fin-tile-doc {
    display: block;
    flex-shrink: 0;
    color: #7751A1;
    transition: color 0.35s ease;
    -webkit-transition: color 0.35s ease;
}

.fin-tile:hover .fin-tile-doc,
.fin-tile:focus-visible .fin-tile-doc {
    color: #ffffff;
}

.fin-tile-doc svg {
    width: 22px;
    height: 27px;
    display: block;
}

.fin-tile-body {
    flex: 1 1 auto;
}

.fin-tile-title {
    display: block;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
}

.fin-tile-tag {
    display: block;
    padding-top: 4px;
    color: #55555C;
    font-size: 11px;
    line-height: 18px;
    text-transform: uppercase;
    transition: color 0.35s ease;
    -webkit-transition: color 0.35s ease;
}

.fin-tile:hover .fin-tile-tag,
.fin-tile:focus-visible .fin-tile-tag {
    color: rgba(255, 255, 255, 0.8);
}

.fin-tile-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-end;
    width: 34px;
    height: 34px;
    margin-top: 18px;
    border-radius: 50%;
    border: 1px solid rgba(15, 15, 16, 0.28);
    transition: all 0.35s ease;
    -webkit-transition: all 0.35s ease;
}

.fin-tile:hover .fin-tile-go,
.fin-tile:focus-visible .fin-tile-go {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #7751A1;
}

.fin-tile-go svg {
    width: 15px;
    height: 15px;
    display: block;
}

.fin-title {
    color: #808285;
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    text-transform: uppercase;
}

.fin-sub {
    color: #55555C;
    font-size: 13px;
    line-height: 20px;
    text-transform: uppercase;
    padding-top: 4px;
}

.fin-unit {
    color: #55555C;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    padding: 14px 0px 4px 0px;
}

.fin-scroll {
    width: 100%;
    overflow-x: auto;
}

/*-----The swipe hint belongs to the narrow layout, where the figures sit
  outside the table's box. On desktop the whole table is in view, so the
  wrapper is inert and the hint stays hidden.-----*/
.fin-swipe {
    display: none;
}

/*-----The mirrored header is built for the narrow layout too. It is only
  styled inside the mobile media query, so on a wide screen it would otherwise
  render as a bare run of column names under the heading - a page that loads
  narrow and is then widened keeps the element it built. Hiding it here means
  it is inert at every width the narrow rules do not claim.-----*/
.fin-colhead {
    display: none;
}

/*-----A row carrying only the swipe cue has nothing left to say once the cue
  is hidden, so on a wide screen it collapses rather than holding open an
  empty line above the table.-----*/
.fin-unit-cue {
    display: none;
}

/*-----Table: horizontal rules only, current year highlighted-----*/
.fin-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
}

.fin-table thead th {
    padding: 8px 10px;
    border-top: 1px solid rgba(15, 15, 16, 0.55);
    border-bottom: 1px solid rgba(15, 15, 16, 0.55);
    color: #000000;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    text-align: left;
}

.fin-table tbody th,
.fin-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(15, 15, 16, 0.12);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    vertical-align: top;
}

.fin-table tbody th {
    color: #0F0F10;
    text-align: left;
}

.fin-note {
    width: 74px;
    text-align: center !important;
    color: #55555C;
}

.fin-num {
    width: 108px;
    text-align: right !important;
    white-space: nowrap;
}

/*-----Mar-26 column tinted, as in the report-----*/
.fin-cur {
    background-color: rgba(119, 81, 161, 0.07);
    color: #7751A1 !important;
}

.fin-table thead th.fin-cur {
    color: #7751A1 !important;
}

.fin-row-head th {
    background-color: rgba(15, 15, 16, 0.05);
    font-weight: 700 !important;
    text-transform: uppercase;
}

.fin-row-sub th {
    font-weight: 700 !important;
}

.fin-row-total th,
.fin-row-total td {
    font-weight: 700 !important;
}

.fin-foot {
    color: #55555C;
    font-size: 12px;
    line-height: 19px;
    padding-top: 10px;
}

/*-----Signature block-----*/
.fin-sign {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 60px;
    padding-top: 26px;
}

.fin-sign-col {
    flex: 1 1 280px;
}

.fin-sign-wide {
    flex: 2 1 460px;
}

.fin-sign-lead {
    color: #0F0F10;
    font-size: 12px;
    line-height: 19px;
    padding-bottom: 8px;
}

.fin-sign p {
    color: #55555C;
    font-size: 12px;
    line-height: 19px;
    padding-bottom: 12px;
}

.fin-sign strong {
    color: #0F0F10;
}

.fin-sign-people {
    display: flex;
    flex-wrap: wrap;
    gap: 0px 40px;
}

/*-----Read more-----*/
.fin-more {
    padding-top: 26px;
}

.fin-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border: 1px solid #7751A1;
    border-radius: 10px;
    background-color: transparent;
    color: #7751A1;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.fin-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: #7751A1;
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform-origin: left center;
    -webkit-transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.fin-btn:hover::before {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
}

.fin-btn:hover {
    color: #ffffff;
}

.fin-btn .btn-text,
.fin-btn .btn-arrow {
    position: relative;
    z-index: 1;
}

.fin-btn .btn-arrow {
    display: inline-flex;
    align-items: center;
}

.fin-btn .btn-arrow svg {
    width: 15px;
    height: 15px;
    display: block;
}

/*-----Modal-----*/
.fin-modal .modal-dialog.modal-xl {
    max-width: 96vw;
}

.fin-modal .modal-content {
    border: none;
    border-radius: 6px;
}

.fin-modal .modal-header {
    align-items: center;
    padding: 22px 28px;
    border-bottom: 1px solid rgba(15, 15, 16, 0.12);
}

.fin-modal-title {
    color: #000000;
    font-size: 24px;
    line-height: 32px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.fin-modal .modal-body {
    padding: 0px 28px 28px 28px;
}

.fin-modal .modal-body > .fin-block:first-child {
    padding-top: 28px;
}

.fin-modal .fin-scroll {
    overflow: visible;
}

/*-----Popup tables keep their header in view while the body scrolls.
  The scrollport is .modal-body, so the header cells stick to its top.
  A collapsed table hands its borders to the table itself, which leaves a
  stuck cell painting unreliably over the rows passing behind it - so the
  popup tables separate their borders and every header cell is opaque.-----*/
.fin-modal .fin-table {
    border-collapse: separate;
    border-spacing: 0px;
}

.fin-modal .fin-table thead th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #ffffff;
}

/* the year row parks directly under the Consolidated/Standalone row, and
   drops the top border collapsing used to merge into a single hairline */
.fin-modal .fin-table thead tr + tr th {
    top: 42px;
    border-top: none;
}

.fin-modal .fin-table thead tr + tr th.fin-cur {
    border-top: 3px solid #7751A1 !important;
}

/* rows travel behind the header, so its tint cannot stay translucent */
.fin-modal .fin-table thead th.fin-cur {
    background-color: #f6f3f8;
}

/*-----------Financial Statements Css End-------------*/

/*-----------Last Five Years Highlights Css Start-------------*/
.five-table {
    min-width: 0;
    table-layout: fixed;
}

.five-table th,
.five-table td {
    padding: 6px 5px;
}

.five-col-name {
    width: 22%;
}

.five-col-num {
    width: 7.8%;
}

.five-table tbody th {
    white-space: normal;
    min-width: 0;
}

.five-table thead th[colspan] {
    text-align: center !important;
    border-bottom: 1px solid rgba(15, 15, 16, 0.18);
}

.five-table thead th[rowspan] {
    vertical-align: bottom;
}

.five-table th,
.five-table td {
    white-space: nowrap;
}

/*-----Purple rule above the current-year (2026) columns-----*/
.fin-table thead tr:last-child th.fin-cur {
    border-top: 3px solid #7751A1 !important;
}
/*-----------Last Five Years Highlights Css End-------------*/
.five
{
    padding-top: 0px;
}
.five .fin-sub
{
    padding-bottom: 10px;
}
/*-----------Performance Ratios Css Start-------------*/
.ratio-col-name {
    width: 26%;
}

.ratio-col-unit {
    width: 4.6%;
}

.ratio-col-num {
    width: 6.94%;
}

.ratio-unit {
    text-align: center !important;
    color: #55555C;
    white-space: nowrap;
}
/*-----------Performance Ratios Css End-------------*/


/*-----------Footer Css Start-------------*/
.ft {
    background-color: #0F0F10;
    padding: 70px 0px 0px 0px;
}

.ft-mainhead {
    color: #ffffff;
    font-size: 42px;
    line-height: 48px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding-bottom: 36px;
}

/*-----Featured band: the full report, spanning the container-----*/
.ft-featured {
    display: flex;
    align-items: center;
    gap: 34px;
    padding: 26px 30px;
    margin-bottom: 40px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.ft-featured-img {
    flex-shrink: 0;
    width: 112px;
    overflow: hidden;
    border-radius: 4px;
}

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

.ft-featured-copy {
    flex: 1 1 auto;
}

.ft-featured-eyebrow {
    color: #B6A0D4;
    font-size: 13px;
    line-height: 20px;
    text-transform: uppercase;
}

.ft-featured-title {
    color: #ffffff;
    font-size: 30px;
    line-height: 38px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 2px 0px 8px 0px;
}

.ft-featured-text {
    color: rgba(255, 255, 255, 0.65);
    font-size: 16px;
    line-height: 24px;
    max-width: 520px;
}

.ft-featured-btn {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 6px;
    background-color: #7751A1;
    color: #ffffff;
}

.ft-featured-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: #ffffff;
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform-origin: left center;
    -webkit-transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.ft-featured-btn:hover::before {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
}

.ft-featured-btn:hover {
    color: #7751A1;
}

.ft-featured-btn .btn-text,
.ft-featured-btn .btn-arrow {
    position: relative;
    z-index: 1;
}

.ft-featured-btn .btn-arrow {
    display: inline-flex;
    align-items: center;
}

.ft-featured-btn .btn-arrow svg {
    width: 15px;
    height: 15px;
    display: block;
}

/*-----Document tiles, four across-----*/
.ft-tiles > [class*="col-"] {
    margin-bottom: 24px;
}

.ft-tile-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ft-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    padding: 18px 20px 20px 20px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.03);
    color: #ffffff;
    transition: all 0.35s ease;
    -webkit-transition: all 0.35s ease;
}

.ft-tile:hover {
    background-color: #7751A1;
    border-color: #7751A1;
    color: #ffffff;
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
}

.ft-tile-tag {
    display: block;
    padding-top: 3px;
    color: #B6A0D4;
    font-size: 11px;
    line-height: 18px;
    text-transform: uppercase;
    transition: color 0.35s ease;
    -webkit-transition: color 0.35s ease;
}

.ft-tile:hover .ft-tile-tag {
    color: rgba(255, 255, 255, 0.8);
}

.ft-tile-doc {
    display: block;
    flex-shrink: 0;
    color: #B6A0D4;
    transition: color 0.35s ease;
    -webkit-transition: color 0.35s ease;
}

.ft-tile:hover .ft-tile-doc {
    color: #ffffff;
}

.ft-tile-doc svg {
    width: 22px;
    height: 27px;
    display: block;
}

.ft-tile-body {
    flex: 1 1 auto;
}

.ft-tile-title {
    display: block;
    font-size: 16px;
    line-height: 24px;
}

.ft-tile-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-end;
    width: 34px;
    height: 34px;
    margin-top: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    transition: all 0.35s ease;
    -webkit-transition: all 0.35s ease;
}

.ft-tile:hover .ft-tile-go {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #7751A1;
}

.ft-tile-go svg {
    width: 15px;
    height: 15px;
    display: block;
}

/*-----Bottom bar-----*/
.ft-bar {
    margin-top: 36px;
    padding: 22px 0px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ft-copy,
.ft-credit {
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    line-height: 22px;
}

.ft-credit {
    text-align: right;
}

.ft-credit a {
    color: #ffffff;
    font-size: 14px;
}

.ft-credit a:hover {
    color: #B6A0D4;
}

.ft-credit-sep {
    padding: 0px 2px;
    color: rgba(255, 255, 255, 0.45);
}

.ft-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.ft-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.75);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.ft-social a:hover {
    background-color: #7751A1;
    border-color: #7751A1;
    color: #ffffff;
}

.ft-social svg {
    width: 15px;
    height: 15px;
    display: block;
}
/*-----------Footer Css End-------------*/

/*-----------Slider nav (mobile only)-------------
  Both the Strategic Overview and the ESG pillars run as pinned scroll
  sequences on desktop; below 992 they become sliders and these arrows appear.
-------------------------------------------------*/
.so__nav,
.esg3-nav {
    display: none;
}

.so__arrow,
.esg3-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    background-color: transparent;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.so__arrow svg,
.esg3-arrow svg {
    width: 16px;
    height: 16px;
    display: block;
}

.so__arrow:hover,
.esg3-arrow:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #0F0F10;
}

.is-first .js-so-prev,
.is-first .js-esg3-prev,
.is-last .js-so-next,
.is-last .js-esg3-next {
    opacity: 0.3;
    pointer-events: none;
}
/*-----------Slider nav Css End-------------*/

/* The panel can scroll as a last resort on very short windows, but the bar
   itself is hidden so it never shows up over the white card. */
.bsr-panel::-webkit-scrollbar {
    display: none;
}

/*-----------Key Performance Indicators Css Start-------------*/
.kpi {
    padding: 60px 0px;
    background-color: #ffffff;
}

.kpi-mainhead {
    color: #000000;
    font-size: 42px;
    line-height: 48px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding-bottom: 44px;
}

.kpi-body {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

/*-----Left: pill tabs-----*/
.kpi-tab-select {
    display: none;
}

.kpi-tabs {
    flex: none;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top:0px;
}

.kpi-tab {
    position: relative;
    padding: 14px;
    border: 1px solid rgba(119, 81, 161, 0.20);
    border-radius: 100px;
    background-color: #ffffff;
    color: #7751A1;
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    -webkit-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.kpi-tab::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 22px;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    opacity: 0.35;
    transform: translateY(-50%) rotate(45deg);
    -webkit-transform: translateY(-50%) rotate(45deg);
    transition: opacity 0.3s ease, right 0.3s ease;
    -webkit-transition: opacity 0.3s ease, right 0.3s ease;
}

.kpi-tab:hover {
    border-color: #7751A1;
}

.kpi-tab.active {
    background-color: #7751A1;
    border-color: #7751A1;
    color: #ffffff;
}

.kpi-tab.active::after {
    opacity: 1;
    right: 18px;
}

/*-----Right: one graph per slide, chart left and copy right-----*/
.kpi-panes {
    flex: 1;
    min-width: 0;
}

.kpi-pane {
    display: none;
}

.kpi-pane.active {
    display: block;
}

.kpi-item {
    display: flex;
    align-items: center;
    gap: 40px;
    height: 440px;
    padding: 30px;
    border: 1px solid rgba(15, 15, 16, 0.10);
    border-radius: 10px;
}

.kpi-graph {
    flex: 0 0 46%;
    max-width: 46%;
    height: 320px;
}

.kpi-graph img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.kpi-copy {
    flex: 1 1 auto;
    min-width: 0;
    max-height: 100%;
}

/*-----Owl controls-----*/
.kpi-slider .owl-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.kpi-slider .owl-nav button.owl-prev,
.kpi-slider .owl-nav button.owl-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(119, 81, 161, 0.35) !important;
    border-radius: 50%;
    background-color: transparent !important;
    color: #7751A1 !important;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.kpi-slider .owl-nav button.owl-prev:hover,
.kpi-slider .owl-nav button.owl-next:hover {
    background-color: #7751A1 !important;
    border-color: #7751A1 !important;
    color: #ffffff !important;
}

.kpi-slider .owl-nav button.disabled {
    opacity: 0.3;
}

.kpi-count {
    display: flex;
    align-items: baseline;
    margin-top: -34px;
    color: #7751A1;
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
}

.kpi-count-total {
    color: #55555C;
    font-size: 15px;
    font-weight: 400;
}
/*-----------Key Performance Indicators Css End-------------*/