/* ===== Preloader ===== */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999999999;
  background: #0067AC;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
#preloader.loaded {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
.preloader-inner { text-align: center; }
.preloader-logo {
  height: 46px;
  width: auto;
  margin-bottom: 28px;
  animation: preloader-pulse 1.5s ease infinite;
}
@keyframes preloader-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.96); }
}
/* ===== Blue case-study subheading ===== */
.tc-block-head-blue {
  color: #0067AC !important;
}
.blue-in-text{
  color: #0067AC;
}
.bold-text{
  font-family: roboto-bold;
  font-weight: 900;
}
.preloader-bar {
  width: 190px;
  height: 3px;
  background: rgba(255,255,255,0.18);
  border-radius: 3px;
  margin: 0 auto 16px;
  overflow: hidden;
}
.preloader-progress {
  width: 0%;
  height: 100%;
  background: #72BF44;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.preloader-text {
  font-family: roboto-medium;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
@font-face {
  font-family: roboto-light;
  src: url(../fonts/Roboto-Light.ttf);
}
@font-face {
  font-family: roboto-regular;
  src: url(../fonts/Roboto-Regular.ttf);
}
@font-face {
  font-family: roboto-medium;
  src: url(../fonts/Roboto-Medium.ttf);
}
@font-face {
  font-family: roboto-bold;
  src: url(../fonts/Roboto-Bold.ttf);
}
@font-face {
  font-family: roboto-black;
  src: url(../fonts/Roboto-Black.ttf);
}
@font-face {
  font-family: RobotoCondensed-Regular;
  src: url(../fonts/RobotoCondensed-Regular.ttf);
}
@font-face {
  font-family: Roboto-BoldCondensed;
  src: url(../fonts/Roboto-BoldCondensed.ttf);
}
@font-face {
  font-family: roboto-italic;
  src: url(../fonts/Roboto-Italic.ttf);
}
@font-face {
  font-family: "Brother Signature";
  src: url("../fonts/Brother Signature.otf") format("opentype");
}

body {
  box-sizing: border-box;
  color: #000000;
  font-family: roboto-regular;
  font-size: 16px;
  line-height: 22px;
  margin: 0;
  padding: 0;
}
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;
}

.my-sidenav,
.ham-icon1 {
  display: none;
}
/*-----------Header Css End-------------*/
.my-sidenav1 {
  display: block;
  position: relative;
  top: 20px;
  right: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 999;
  max-width: 100%;
  width: 100%;
  background: transparent;
  height: auto;
}
.openMenu .nav-tabs .nav-link {
  margin-bottom: 0px;
  border: none;
  border-radius: 0px;
}
.openMenu .nav-item {
  display: inline-block;
  width: 100%;
}
.openMenu .nav-tabs {
  border-bottom: 0;
}
.openMenu .nav-tabs .nav-item.show .nav-link,
.openMenu .nav-tabs .nav-link.active {
  color: #73bf44;
  background-color: transparent;
  border-color: transparent;
  text-decoration: underline;
}

.openMenu {
  background-color: #0067ac;
  padding: 47px 147px 0px 160px;
}
.openMenu ul li .nav-link:hover {
  color: #fff;
}
.openMenu ul li .nav-link {
  font-size: 20px;
  line-height: 25px;
  text-align: left;
  color: #fff;
}
.innerOpenMenu ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
.innerOpenMenu {
  padding: 0px 20px 0px 0px;
}
.innerOpenMenu ul li a {
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  font-family: roboto-bold;
  display: block;
  margin-bottom: 5px;
  position: relative;
}
.innerOpenMenu ul li a:hover {
  color: #0067ac;
  transition: 0.3s;
}
.linkWithImg {
  display: flex;
  gap: 36px;
  align-items: center;
}
/**/
#header {
  background-color:#0067AC;
  /*box-shadow: 0px 3px 6px #00000029;*/
  display:block;
  align-items: center;
  position:fixed;
  width: 100%;
  z-index: 9;
}
#header:after 
{
  content: '';
  position: absolute;
  right: 0;
  top:0;
  background-color: #73BF44;
  height: 80px;
  width: 20%;
  z-index: -1;
}
.middleDownlOad a {
  font-size: 14px;
  line-height: 18px;
  color: #fff;
  display: flex;
  gap: 10px;
  align-items: center;
}
#header .row {
  align-items: center;
  height: 80px;
}

/**/
.topBanner {
  height: 100vh;
  position: relative;
}
.topBanner video
{
  height: 100%;
  width: 100%;
  object-position: center;
  object-fit: cover;
}
/* Banner video: desktop by default, mobile video swapped in on small screens
   (the preloader JS also keys off which video is visible via offsetParent). */
.topBanner .desktopV { display: block; }
.topBanner .mblV { display: none; }
.topBanner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.banner-text {
  position: absolute;
  left: calc(100vw / 16 * 1);
  bottom: 35%;
  max-width: 550px;
  width: 100%;
  margin-left: 30px;
}
.topBanner h1 {
  font-size: 48px;
  line-height: 50px;
  color: #ffffff;
  font-family: roboto-regular;
  padding-bottom: 15px;
}
.topBanner h1 span {
  display: block;
  font-family: roboto-bold;
  font-size: 32px;
}
.topBanner p {
  color: #ffffff;
  font-family: roboto-medium;
  padding-bottom:30px;
}
.banner-caption {
  position: absolute;
  left: calc(100vw / 16 * 1);
  bottom: 5%;
  margin-left: 30px;
  z-index: 2;
}
.banner-caption p {
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: roboto-regular;
  padding-bottom: 0px;
}
.banner-caption p strong {
  font-family: roboto-bold;
  font-weight: normal;
}
.banner-caption .bc-sep {
  margin: 0 8px;
  opacity: 0.7;
}
.tabHide {
  display: none;
}

.tabBottomMenu ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  display: flex;
  justify-content: center;
  gap: 52px;
}
.tabBottomMenu {
  background: #73bf44 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  padding: 12px 0px;
}
.tabBottomMenu ul li a {
   font-size: 16px;
  color: #ffffff;
  line-height: 18px;
}

.rightTab {
  max-width: 763px;
  width: 100%;
  position: relative;
  height: calc(100vh - 122px);
  background-color: #0067ac;
}
.linksMenu {
  max-width: 570px;
  width: 100%;
  background: #73bf44;
  box-shadow: 0px 3px 6px #00000029;
  position: absolute;
  left: -442px;
  z-index: 9999;
  top: calc(50% - 134px);
  padding:50px 45px;
}
.backTop {
  position: relative;
}
.backTop a {
  text-align: right;
  display: block;
  font-size: 16px;
  line-height: 21px;
  color: #0067ac;
  font-family: roboto-bold;
}

.downloadCenter h3 {
  font-size: 35px;
  line-height: 38px;
  color: #fff;
  text-align: center;
  padding-top: 100px;
  margin-bottom: 15px;
  font-family: roboto-bold;
}
.copyRightBg {
  background-color: #0067ac;
  padding: 19px 0px;
}

.footSocial ul {
  list-style: none;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 0px;
  padding: 0px;
}
.rdxDev p {
  text-align: right;
  font-size: 14px;
  line-height: 19px;
  color: #fff;
}
.rdxDev p a {
  color: #fff;
  font-size: 14px;
  line-height: 19px;
}
.copyrightTxt p {
  font-size: 14px;
  line-height: 19px;
  color: #fff;
}
.backTop a {
  position: absolute;
  right: 215px;
  top: 122px;
}
.backTop a {
  text-align: right;
  display: block;
  font-size: 16px;
  line-height: 21px;
  color: #fff;
  font-family: roboto-bold;
}
.allReport {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
.allHeads h3 {
  font-size: 35px;
  line-height: 38px;
  color: #0067ac;
  text-align: center;
  font-family: roboto-bold;
}

.top-menu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: center;
    gap:20px;
}
.left-menu
{
  display: flex;
  gap:85px;
  align-items: center;
}
.top-menu li a 
{
   font-size: 14px;
  color: #ffffff;
}
.right-menu
{
  display: flex;
  align-items: center;
  gap:20px;
  justify-content:center;
  background-color: #73BF44;
  height: 80px;
}
.explore-btn a 
{
  color: #000000;
  font-size: 16px;
  line-height: 22px;
  font-family: roboto-medium;
  display: inline-block;
  transition: all .3s ease-in-out;
}
.explore-btn a span 
{
background-color: #ffffff;
padding: 11px 20px 12px 20px;
  border-radius: 100px;
}
.explore-btn a img 
{
  width: auto;
  height: auto;
  transition: all .3s ease-in-out;
}
.explore-btn a:hover
{
  color: #0066AA !important;
}
.explore-btn a:hover img
{
transform: rotate(-45deg);
transition: all .3s ease-in-out;
}
.glance-img-wrap
{
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap:7px;
}
.glance
{
  position: relative;
}
.glance h3
{
color: #72BF44;
font-size: 24px;
line-height: 32px;
font-family: roboto-bold;
}
.glance-img
{
  position:absolute;
  z-index: 2;
  left: 0;
  top:0;
  transform: scale(0);
  opacity: 0;
  height: 100vh;
  width: 100%;
}
.glance-img img 
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.glance-text1
{
  font-size: 24px;
  line-height: 38px;
  color: #ffffff;
  font-family: roboto-bold;
  text-align: center;
  z-index: 4;
  position: absolute;
  left: 0;
  right: 0;
  top:40px;
  opacity: 0;
}
.glance-text1 span 
{
  display: block;
  font-size: 35px;
}
.glance .container
{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom:40px;
width: 100%;
z-index: 6;
}
.glance-num-wrap
{
border-radius: 20px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
padding: 40px 140px 40px 140px;
background-color: rgba(0, 0, 0, .4);
opacity: 0;
}
.glance-num-wrap h4
{
font-size: 24px;
line-height: 30px;
color: #ffffff;
padding-bottom: 30px;
font-family: roboto-bold;
text-align: center;
}
.glance-num-wrap h5 
{
  font-size: 18px;
  line-height: 24px;
  color: #ffffff;
  padding-bottom: 20px;
  font-family: roboto-bold;
}
.glance-num
{
  border-right: 1px solid #ffffff;
}
.glance-num h4
{
  color: #fff;
  font-size: 40px;
  line-height: 50px;
  font-family: roboto-medium;
  padding-bottom: 0px;
  text-align: left;
}
.glance-num h4 span 
{
font-size: 18px;
color: #ffffff;
font-family: roboto-regular;
}
.glance-num p
{
color: #fff;
font-size: 14px;
line-height: 18px;
}
.glance-num p span 
{
  display: block;
}
.glance-num-wrap .row 
{
  border-bottom: 1px solid #fff;
  padding-bottom: 30px;
  margin-bottom: 30px;
}
.bd-none
{
  border:none !important;
}
.glance-num-wrap .glance-row1
{
  border:none;
  padding-bottom: 0px;
  margin-bottom: 0px;
}
.glance-row1 .glance-num
{
  min-height: 95px;
}
.glance-btn
{
  text-align: center;
  margin-top: 30px;
}
.hm-ch 
{
  position: relative;
}
.hm-ch .col-xl-12 
{
  padding-left: 0px;
  padding-right: 0px;
}
.leader-slider .item 
{
  display: flex;
}
/*.ch-left
{
  background: transparent linear-gradient(220deg, #0066AA 0%, #72BF44 100%) 0% 0% no-repeat padding-box;
  width: 50%;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}*/
.ch-left
{
width: 50%;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-image: url(../images/chairman-s-speech-img-bg.png);
  background-size: cover;
  background-position: center;
}
.ch-right 
{
  background-color: #f1fafe;
  width: 50%;
  height: 100vh;
  display:flex;
  align-items: center;
  justify-content: center;
}
.msgPart h3 {
  color: #0067ac;
  font-size: 24px;
  line-height: 38px;
  max-width: 450px;
  width: 100%;
  font-family: roboto-bold;
  padding-bottom:20px;
}
.msgPart h3 span
{
display: block;
font-size: 35px;
}
.msgPart h5 {
  display: block;
  font-size: 20px;
  line-height: 24px;
  color: #72bf44;
  font-family: roboto-bold;
  padding-bottom: 7px;
}

.msgPart p {
  font-size: 16px;
  line-height: 22px;
  color: #000;
  position: relative;
  padding-bottom: 19px;
}
.msgPart p:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../images/comma-icon.svg);
  width: 43px;
  height: 30px;
}
.name-btn-wrap {
  display: flex;
}
.name-btnarrow {
  margin-right: 10px;
}
.msgPart {
  max-width: 450px;
  width: 100%;
}
.msgPart h4 {
    color: #0067ac;
    font-size: 18px;
    line-height: 17px;
    margin-bottom: 18px;
    font-family: roboto-medium;
}
.msgPart h4 span {
    display: block;
    font-size: 14px;
    line-height: 17px;
    color: #000000;
    font-family: roboto-regular;
    padding-top: 5px;
}
.ch-btn a
{
  display: flex;
  gap: 5px;
}
.leader-slider-wrap .rmrhover,
.leader-slider-wrap .rmrhover a,
.leader-slider-wrap .rmhover,
.leader-slider-wrap .rmhover a{
  cursor: grab;
}
.leader-slider-wrap .rmrhover:active,
.leader-slider-wrap .rmrhover a:active,
.leader-slider-wrap .rmhover:active,
.leader-slider-wrap .rmhover a:active{
  cursor: grabbing;
}
.ch-btn a span 
{
  border:1px solid #0066AA;
}
.leader-slider .slick-list 
{
padding-left: 0px !important;
}
.lead-counter
{
  display: none;
}
.leader-slider-wrap{
  position: relative;
    cursor:default;
}
.cursor-arrow{
  position:absolute;
  top:0;
  left:0;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform 0.2s ease;
  z-index: 9999;
  pointer-events: none;
}
.cursor-arrow.left{
  transform: translate(-50%, -50%) rotate(180deg);
}
.cursor-arrow img{
  width:40px !important;
  height:auto !important;
  display:block !important;
  opacity:1 !important;
  transition: transform 0.2s ease;
}

/* Chairman static section (no slider): 50% image + 50% data */
.ch-flex { display: flex; }

/* Chairman's Message: fixed prev/next arrows */
.leader-slider-wrap { position: relative; }
.slick-prev11,
.slick-next11 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s;
}
.slick-prev11 { left: 30px; }
.slick-next11 { right: 30px; }
.slick-prev11 img,
.slick-next11 img { width: 46px; height: auto; }
.slick-prev11.slick-disabled,
.slick-next11.slick-disabled { opacity: 0.4; cursor: default; }

/* Management Speak: active-state dots (bottom-right) */
.leader-dots {
  position: absolute;
  right: 30px;
  bottom: 30px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.leader-dots li { line-height: 0; }
.leader-dots li button {
  width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #0067AC;
  background: transparent;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  transition: 0.3s;
}
.leader-dots li.slick-active button {
  background: #0067AC;
}

.leaders-section{
  padding:50px;
}
.leaders-section h2
{
  font-size: 24px;
}
.leaders-section h2 span 
{
  display: block;
  font-size: 35px;
}
.leader-img{
  width:50%;
  background:#0e5e9b;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.leader-img img{
  max-width:100%;
}
.leader-info{
  position:relative;
  background:#72BF44;
  color:#fff;
  padding:55px 40px;
 width: 50%;
}
.leader-info h4{
  font-size:18px;
  line-height: 22px;
   font-family: roboto-bold;
   padding-bottom: 6px;
}

.leader-info p{
  font-size:14px;
  line-height: 18px;
  padding-bottom: 15px;
}
.circle-arrow{
  transition:0.3s;
}
.circle-arrow:hover{
  transform:translateX(5px);
}
.leader-info::before{
  content:"";
  position:absolute;
  top:22%;
  left:0px;
  transform:translateY(-50%);
  border-top:15px solid transparent;
  border-bottom:15px solid transparent;
  border-right:15px solid #0066AA;
  transform: rotate(180deg);
}
.leader-info.l-blue::before{
  content:"";
  position:absolute;
  top:22%;
  right:0px;
  transform:translateY(-50%);
  border-top:15px solid transparent;
  border-bottom:15px solid transparent;
  border-right:15px solid #0066AA;
}
.hm-smallhead
{
  font-size: 18px;
  line-height: 24px;
  color: #72BF44;
   font-family: roboto-bold;
   padding-bottom: 5px;
   text-align: center;
}
.hm-mainhead
{
  font-size: 35px;
  line-height: 38px;
  color: #0067AC;
  font-family: roboto-bold;
  padding-bottom: 30px;
  text-align: center;
}
.hm-mainhead span 
{
  display: block;
}
.leader-card{
  min-width: 50%;
  display:flex;
}
.leaders-scroll1
{
display:flex;
  flex-wrap:nowrap;
}
.leaders-scroll{
  overflow-x:auto;
  scroll-behavior:smooth;
  padding-bottom: 20px;
}

.leaders-scroll::-webkit-scrollbar{
  height:8px;
  background:#00000010;
  border-radius:10px;
}

.leaders-scroll::-webkit-scrollbar-thumb{
  background:#0e5e9b;
  border-radius:10px;
}

/* ===== Board of Directors slick slider ===== */
.leaders-section{
  overflow:hidden;
}
/* full-bleed: break the slider out of .container to full viewport width */
.bod-frame{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  min-height:500px;
  margin-top:10px;
  width:100vw;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}
.bod-panel{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:clamp(220px,32%,400px);
  z-index:1;
  background:transparent linear-gradient(220deg, #0066AA 0%, #72BF44 100%) 0% 0% no-repeat padding-box;
  color:#fff;
  padding:clamp(40px,5vw,70px) clamp(28px,3vw,48px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.bod-nav{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-left: 60px;
}
.bod-nav-btn{
  width:46px;
  height:46px;
  border-radius:50%;
  border:none;
  background:#ffffff;
  color:#0067AC;
  box-shadow:0px 4px 16px rgba(0,0,0,0.15);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:0.3s;
}
.bod-nav-btn:hover{
  background:#0067AC;
  color:#ffffff;
}
.bod-slider{
  position:relative;
  z-index:2;
  margin-left:220px;
  width:calc(100% - 220px);
  padding:20px 0;
}
.bod-slider .slick-list{
  margin:0 -12px;
}
.bod-slider .slick-slide{
  height:auto;
  margin:0 12px;
}
.bod-card{
  background:#fff;
  display:flex;
  flex-direction:column;
  border:1px solid #e5e5e5;
  border-bottom:3px solid #0067AC;
}
.bod-card-img{
  width:100%;
  aspect-ratio:350 / 250;
  background:#0e5e9b;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
}
.bod-card-img img{
  max-width:100%;
}
.bod-card-body{
  position:relative;
  padding:22px 24px;
}
.bod-card-body h4{
  font-size:18px;
  line-height:22px;
  font-family:roboto-bold;
  color:#0067AC;
  padding-bottom:6px;
}
.bod-card-body p{
  font-size:14px;
  line-height:18px;
  color:#000;
  padding-bottom:15px;
}
.bod-readmore-wrap{
  display:flex;
  justify-content:center;
  margin-left:220px;
  width:calc(100% - 220px);
  margin-top:24px;
}

@media (max-width:991px){
  .bod-frame{
    flex-direction:column;
    min-height:0;
  }
  .bod-panel{
    position:relative;
    order:2;                 /* move arrows below the slider */
    width:100%;
    flex-direction:row;
    align-items:center;
    gap:18px;
    justify-content:center;  /* centre the arrows */
    background:transparent;   /* drop the gradient bar on mobile */
    padding:10px 0 0;
  }
  .bod-nav{
    flex-direction:row;
    margin-left:0;
  }
  .bod-nav-btn{
    border-color:#0067AC;
    color:#0067AC;
  }
  .bod-nav-btn:hover{
    background:#0067AC;
    color:#fff;
  }
  .bod-slider{
    order:1;                 /* slider on top */
    margin-left:0;
    width:100%;
  }
  .bod-readmore-wrap{
    order:3;                 /* below the arrows */
    margin-left:0;
    width:100%;
  }
}

/* ===== Stacked parallax image section ===== */
.sp-sec{
  position:relative;
}
.sp-pin{
  position:relative;
  width:100%;
}
.sp-panel{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
}
/* desktop: stack panels; section is pinned via ScrollTrigger (pin:true) */
@media (min-width:1026px){
  .sp-sec{
    height:100vh;
    position:relative;
  }
  .sp-pin{
    height:100%;
    overflow:hidden;
  }
  .sp-panel{
    position:absolute;
    top:0;
    left:0;
  }
  /* later panels paint above and start hidden (revealed bottom-to-top by JS) */
  .sp-panel-1{ z-index:1; }
  .sp-panel-2{ z-index:2; clip-path:inset(100% 0 0 0); }
  .sp-panel-3{ z-index:3; clip-path:inset(100% 0 0 0); }
  .sp-panel-4{ z-index:4; clip-path:inset(100% 0 0 0); }
}
.sp-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  will-change:transform;
}
.sp-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.sp-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
}
.sp-content{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:100%;
  padding:0 calc(100vw / 16);
  z-index:2;
}
.sp-eyebrow{
  font-size:18px;
  line-height:24px;
  color:#ffffff;
  font-family:roboto-bold;
  padding-bottom:10px;
}
.sp-head{
  font-size:35px;
  line-height:40px;
  color:#fff;
  font-family:roboto-bold;
  padding-bottom:24px;
}
.sp-head span{
  display:block;
  text-transform:uppercase;
}
.sp-sec .sp-content .readmore-text{
  color:#000000;
  font-size:16px;
  line-height:22px;
  font-family:roboto-medium;
  font-weight:normal;
  display:inline-block;
  transition:all .3s ease-in-out;
  background-color: #ffffff;
  border: none;
}
.sp-sec .sp-content .readmore-btn:hover .readmore-text{
  background-color: #ffffff;
  color:#0066AA !important;
}
@media (max-width:991px){
  .sp-head{ font-size:26px; line-height:34px; }
  .sp-content{ padding:0 24px; }
}

/* ===== Awards section ===== */
.awards-sec{
  background:transparent linear-gradient(135deg, #01203B 0%, #0067AC 100%) 0% 0% no-repeat padding-box;
  padding:70px 0;
  overflow:hidden;
}
.awards-head-wrap{
  text-align:center;
  margin-bottom:50px;
}
.awards-label{
  font-size:18px;
  line-height:24px;
  color:#72BF44;
  font-family:roboto-bold;
  padding-bottom:5px;
}
.awards-head{
  font-size:24px;
  line-height:38px;
  color:#fff;
  font-family:roboto-bold;
}
.awards-head span{
  display:block;
  text-transform:uppercase;
  font-size: 35px;
}
.awards-star{
  margin-top:30px;
}
.awards-star img{
  max-width:100%;
}
.awards-right{
  position:relative;
  padding-left:20px;
}
.awards-slider .slick-list{
  margin:0 -12px;
}
.awards-slider .slick-track{
  display:flex;
}
.awards-slider .slick-slide{
  height:auto;
  flex:0 0 auto;
  width:22vw;
  margin:0 12px;
}
@media (max-width:1199px){
  .awards-slider .slick-slide{ width:26vw; }
}
@media (max-width:991px){
  .awards-slider .slick-slide{ width:60vw; }
}
@media (max-width:575px){
  .awards-slider .slick-slide{ width:80vw;}
}
.award-box{
  background:#ffffff20;
  height:100%;
  padding:30px 28px;
  border-radius:4px;
  display:flex;
  align-items:flex-start;
}
.award-box p{
  font-size:15px;
  line-height:22px;
  color:#ffffff;
}
.awards-nav{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:15px;
  margin-top:35px;
}
.awards-arrow{
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.5);
  background:transparent;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:0.3s;
}
.awards-arrow:hover{
  background:#fff;
  color:#0067AC;
}
.awards-readmore{
  margin:0;
  line-height:0;
}
.awards-readmore a{
  white-space:nowrap;
}
@media (max-width:991px){
  .awards-right{
    padding-left:15px;
    margin-top:40px;
  }
  .awards-head{
    font-size:28px;
    line-height:34px;
  }
}

.capital-highlights
{
  padding: 20px 0px 60px 0px;
}
.capital-highlights h2 
{
  font-size: 24px;
}
.capital-highlights h2 span 
{
  display: block;
  font-size: 35px;
}
.capital-highlights h6, .capital-highlights h2
{
  text-align: left;
}
.l-tab-mbl
{
  display: none;
}
#vc-tab {
    border-bottom: none;
    position: relative;
    justify-content: space-between;
}
.vcTabs .nav-link {
    display: block;
    padding: 0px;
    font-size: 16px;
    line-height: 22px;
    color:#000000 !important;
    width: 100%;
    position: relative;
    background-color: transparent;
    border-radius: 0px;
    padding: 12px 0px 12px 0px;
    border: none !important;
     font-family: roboto-medium;
}

.vcTabs .nav-tabs .nav-item.show .nav-link, .vcTabs .nav-tabs .nav-link.active {
    color: #ffffff !important;
}
.vc-tabcontent
{
  border-radius: 30px;
}
.vc-tabcontent .tab-pane
{
  min-height: 470px;
  border-radius:30px; 
}
#vc-tab-a
{
background-color: #0067AC;
 border-radius: 0px 30px 30px 30px; 
}
#vc-tab-b
{
background-color: #0067AC;
}
#vc-tab-c
{
background-color:#0067AC;
}
#vc-tab-d
{
background-color: #0067AC;
}
#vc-tab-e
{
background-color:#0067AC;
}
#vc-tab-f
{
background-color:#0067AC;
border-top-right-radius: 0px;
}

.tab-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 0;
  transition: transform 0.6s cubic-bezier(.77,0,.18,1),
              width 0.6s cubic-bezier(.77,0,.18,1);
}
.vcTabs .nav-tabs .nav-link.active,
.vcTabs .nav-tabs .nav-item.show .nav-link {
  background-color: transparent !important;
  border-color: transparent !important;
}
.stakeTabBody
{
  padding:50px 60px 30px 60px;
}
.cap-icnwrap
{
  display: flex;
  gap:10px;
  align-items: flex-end;
}
.cap-icnwrap img
{
  width: 48px;
  height: auto;
  filter: brightness(0) invert(1);
}
.cap-icnwrap h3 
{
  font-size: 24px;
  line-height: 32px;
  color: #ffffff;
   font-family: roboto-medium;
}
.vc-tabcontent p 
{
  color: #ffffff;
  padding-top: 12px;
  padding-bottom: 40px;
}
.vc-tabcontent h4 
{
  font-size: 18px;
  line-height: 24px;
  color: #ffffff;
  padding-bottom: 12px;
  font-family: roboto-medium;
}
.cap-num
{
  border-right: 1px solid #ffffff20;
  margin-bottom: 30px;
}
.cap-num h5 
{
  font-size: 40px;
  color: #ffffff;
}
.cap-num h5 span 
{
  font-size: 18px;
}
.cap-num h5 span.rupe 
{
  font-size: 30px;
}
.cap-num p 
{
  font-size: 16px;
  line-height: 22px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.cap-num h6 
{
  font-family: roboto-bold;
  color: #ffffff;
  padding-top: 3px;
}
.lenderMain {
    position: relative;
}
.lenderMain {
  position: relative;
}
.slider.slider-for {
  position: absolute;
  visibility: hidden;
}

.slider-nav .item {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100vh;
  position: relative;
}
.slider-nav .item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 60%;
  background: linear-gradient(90deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0) 100%);
  z-index: 1;
}
.slider-nav .item .container {
  position: relative;
  z-index: 2;
}
.slider-nav .item1 {
  background-image: url(../images/asset-overview/zinc-lead-silver-img.png);
}
.slider-nav .item2 {
  background-image: url(../images/asset-overview/aluminium-img.png);
}
.slider-nav .item3 {
  background-image: url("../images/asset-overview/oil-&-gas-img.png");
}
.slider-nav .item4 {
  background-image: url(../images/asset-overview/power-img.png);
}
.slider-nav .item5 {
  background-image: url(../images/asset-overview/Iron-ore-img.png);
}
.slider-nav .item6 {
  background-image: url(../images/asset-overview/steel-img.png);
}
.slider-nav .item7 {
  background-image: url(../images/asset-overview/facor-img.png);
}
.slider-nav .item8 {
  background-image: url(../images/asset-overview/copper-img.png);
}
.lenderMain .slick-slider .slick-slide {
  margin: 0px;
}
.action a img{
  transform: scale(.9);
}
.action a.active  img{
  transform: scale(1);
}
.ourServices h6, .ourServices h4 {
    color: #fff;
    font-size: 20px;
    line-height: 24px;
    font-family: roboto-bold;
    padding-bottom: 8px;
}
.ourServices h6 {
    padding-top: 150px;
}
.ourServices h3 {
    font-size: 24px;
    line-height: 38px;
    font-family: roboto-bold;
    color: #fff;
    padding-bottom: 25px;
}
.ourServices h3 span 
{
  display: block;
  font-size: 35px;
}
.ourServices p {
    color: #fff;
    padding-bottom: 30px;
}
.lenderMain .explore-btn a
{
  display: flex;
  gap: 5px;
  cursor: pointer;
}
.action {
    list-style: none;
    padding: 0px;
    display: flex;
    justify-content:flex-end;
    gap: 30px;
    position: absolute;
    bottom: 50px;
    margin: 0px auto;
    text-align: center;
    left: auto;
    right: calc(100vw / 16 * 1);
    max-width: 200px;
}
.action .slick-prev,
.action .slick-next {
    z-index: 5;
}
.action .slick-prev {
    left: -30px;
    background-image: url(../images/asset/left-arrow.svg);
    width: 16px;
    height: 15px;
}
.action .slick-next {
    right:-15px;
    background-image: url(../images/asset/right-arrow.svg);
    width: 16px;
    height: 15px;
}
.action .slick-prev:before,
.action .slick-next:before {
   display: none;
}
.action a
{
  cursor: pointer;
}
.action a.slick-current img {
    border: 1px solid #ffffff;
    border-radius: 5px;
    box-sizing: border-box;
}
.case-study
{
  padding-top: 40px;
  padding-bottom: 50px;
}

.case-accordion {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 510px;
  gap: 30px;
}
.case-accordion > div {
  flex: 1;
  overflow: hidden;
  transition: all .6s ease;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
}
.case-accordion > div::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
  z-index: 1;
  pointer-events: none;
}
.case-text {
  z-index: 2;
}
.case-accordion > div.active5 {
  flex: 4;
}
.case-accordion div img {
  width: 100%;
  height: 100%;
 object-fit:cover;
 transition: all .8s ease-in-out;
}
.case-accordion > div:hover img 
{
  transform: scale(1.2);
  transition: all .8s ease-in-out;
}
.case-accordion > div.active5:hover img 
{
  transform:none;
}
.case-study1, .case-study3
{
  margin-top: 50px;
}
.case-study2, .case-study4
{
height: 460px;
}
.case-text
{
  position:absolute;
  left: 40px;
  right: 40px;
  bottom:40px;
  display: none;
}
.case-accordion > div.active5 .case-text
{
display: block;
}
.case-text h4 
{
  font-size: 20px;
  color: #ffffff;
  font-family: roboto-bold;
  padding-bottom: 20px;
}
.case-accordion .case-text a
{
  /* display: flex; */
}
.case-accordion .case-text a img 
{
  width: auto;
}
.case-accordion .case-text a:hover {
    color: #0066AA;
}
.case-accordion .case-text a:hover img {
    transform: rotate(-45deg);
    transition: all .3s ease-in-out;
}
.repoting-suite
{
  padding-top: 60px;
}
.accordeon {
  display: flex;
  flex-direction: column;
}
.repoting-wrap
{
padding: 30px 20px 30px 95px;
  height: 74px;
  overflow: hidden;
  transition: height .5s ease;
  cursor: pointer;
  display: flex;
  gap:20%;
  position: relative;
}
.repoting-wrap.active6 {
  height: 320px;
}
.rep1
{
  background-color: #4DAFF1;
}
.rep2
{
  background-color: #319BE1;
}
.rep3
{
  background-color: #1F8AD1;
}
.rep4
{
  background-color: #127BC0;
}
.rep5
{
  background-color: #0066AA;
}
.reporting-text h3 
{
  color: #FFFFFF;
  font-size: 24px;
  line-height: 32px;
  padding-bottom: 10px;
}
.reporting-text h6 
{
  color: #ffffff;
  font-size: 16px;
  line-height: 22px;
  border-bottom: 1px solid #ffffff;
  padding-bottom: 8px;
  margin-bottom: 22px;
}
.reporting-text p 
{
  color: #ffffff;
  padding-bottom: 20px;
  max-width: 500px;
}
.reporting-text p span 
{
  font-family: roboto-bold;
  display: block;
}
.rep-num
{
  position: absolute;
  right: 20px;
  top: 25px;
  font-size: 24px;
  color: #ffffff;
  font-family: roboto-bold;
}

.tab-indicator svg:nth-child(1)
{
right: 98%;
    height: 100%;
    position: absolute;
}
.tab-indicator svg:nth-child(2)
{
  left: 98%;
  height: 100%;
  position: absolute;
}
.tabButton_1
{
  background-color:#0067AC;
  border-top-left-radius: 20px;
}
#vc-tab-1
{
padding-left: 10px;
}
.tab-indicator.tabButton_1 svg:nth-child(1)
{
display: none;
}
.tabButton_2
{
  background-color: #0067AC;
}
.tabButton_3
{
  background-color: #0067AC;
}
.tabButton_4
{
  background-color: #0067AC;
}
.tabButton_5
{
  background-color:#0067AC;
}
.tabButton_6
{
  background-color:#0067AC;
}
.tabButton_1 svg
{
    fill:#0067AC;
}
.tabButton_2 svg
{
    fill: #0067AC;
}
.tabButton_3 svg
{
  
    fill:#0067AC;
}
.tabButton_4 svg
{
  
    fill:#0067AC;
}
.tabButton_5 svg
{
  
    fill:#0067AC;
}
.tabButton_6 svg
{
  
    fill:#0067AC;
}
.tab-indicator.tabButton_6 
{
border-top-right-radius: 20px;
}
.tab-indicator.tabButton_6 svg:nth-child(2)
{
display: none;
border-top-right-radius: 20px;
}
#vc-tab-6
{
padding-right: 10px;
}

.esg-3d-slider {
  width: 85%;
  margin: 100px auto;
  perspective: 1500px; /* Enables 3D */
}
.strategic-pr .slide {
  transition: all 0.5s ease;
}
.strategic-pr .card {
  background: linear-gradient(135deg, #49b37c, #1c78b4);
  color: white;
  padding: 60px 40px;
  border-radius: 20px;
  min-height: 250px;
  transition: all 0.5s ease;
}
.strategic-pr .slick-slide {
  transform: scale(0.85);
  opacity: 0.6;
  transition: all 0.5s ease;
  width: 81.6rem;
}
.strategic-pr .slick-slide {
  transform: scale(.7) perspective(.5rem) rotateY(-.1deg);
}
.strategic-pr .slick-center + .slick-slide 
  {
transform: scale(.7) perspective(.5rem) rotateY(.1deg);
  }
.strategic-pr .slick-center {
  transform: rotateY(0deg) scale(1) !important;
  opacity: 1 !important;
  z-index: 2;
}
.strategic-pr
{
padding:50px 0px 40px 0px;
background: transparent linear-gradient(90deg, #0064B0 0%, #6CC247 100%) 0% 0% no-repeat padding-box;
height: 662px;
}
.strategic-pr h6, .strategic-pr h2
{
color: #ffffff;
}

.image-section {
  height: 100vh;
  position: relative;
}
.image-wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.panel {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.img-inner {
  width: 100%;
  height: 100%;
  transform: scale(1.2);
}
.panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right;
}
.panel2,
.panel3 {
  width: 33.33%;
}
.panel2 {
  left: 66.66%;
  clip-path: inset(0 100% 0 0);
}
.panel3 {
  left: 90%;
  clip-path: inset(0 100% 0 0);
}
.blanksection
{
    height: 100vh;
}
.blacktransdiv1
{
    width: 33.33%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  left: 0;
  top:0;
  opacity: 0;
}
.blacktransdiv2
{
  width: 33.33%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  right: 0;
  top:0;
  opacity: 0;
}
.transfromingtxt
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    max-width: fit-content;
    margin: auto;
}
.transfromingtxt h2
{
    color: #fff;
}
.transfromingtxt h2 span
{
    display: block;
    opacity: 0;
}
.transfromingtxt h2 span.esgtxt1
{
    transform: translateX(-100%);
}
.transfromingtxt h2 span.esgtxt2
{
    transform: translateX(100%);
}
.transfromingtxt a
{
    color: #fff;
    opacity: 0;
    padding: 10px;
    transform: translateY(100%);
    display: inline-block;
}

.hm-keysec {
  padding-bottom: 55px;
  position: relative;
  margin-bottom: 55px;
}
.hm-keysec h2 
{
  font-size: 24px !important;
}
.hm-keysec h2 span
{
  font-size: 35px !important;
  display: block;
}
.hm-keysec h6 {
  padding-bottom:0px;
}
#key-tab
{
border:none;
}
.stakeTabs1 .nav-link {
  display: block;
  padding: 0px;
  font-size: 16px;
  color: #fff;
  width: 100%;
  position: relative;
  background-color: #d4d4d4;
  border-radius: 0px;
  padding: 5px 15px;
  opacity: 0.4;
}
.stakeTabs1 #stake-tab-1,
.stakeTabs1 #stake-tab-3 {
  background-color: #0067ac;
}
.stakeTabs1 #stake-tab-2,
.stakeTabs1 #stake-tab-4 {
  background-color: #72bf44;
}

.stakeTabs1 .nav-tabs .nav-item.show .nav-link,
.stakeTabs1 .nav-tabs .nav-link.active {
  color: #fff;
  opacity: 1;
  border: 0px;
}
.key-tabcontent p {
  font-size: 14px;
  color:#6d6e71;
  border-bottom: 1px solid #4e505550;
  padding-bottom: 10px;
  margin-bottom: 10px;
  margin-right: 40px;
  font-family:roboto-regular;
}
.key-tabcontent p span {
  color: #0064b0;
  font-family: roboto-medium;
}
.bdbtm-none {
  border-bottom: none !important;
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
}
.key-tabcontent .row .col-xl-5:last-child {
  margin-left: 40px;
}
.key-tabcontent .explore-btn {
  margin-top: 20px;
  text-align: center;
}
.stakeTabs1 .nav-tabs .nav-link {
    height: 70px;
    display: flex;
    align-items: center;
    padding: 30px;
    background-color:#0066AA;
    border-radius: 0px;
    border: none;
    font-size: 16px;
    color: #fff;
    line-height: 20px;
    opacity: 1;
    justify-content: center;
}
.stakeTabs1 .nav-item:first-child .nav-link {
    border-bottom-left-radius: 30px;
}
.stakeTabs1 .nav-item:last-child  .nav-link{
    border-bottom-right-radius: 30px;
}
.stakeTabs1 .nav-tabs .nav-item.show .nav-link, .stakeTabs1 .nav-tabs .nav-link.active {
    background-color:#72BF44;
    color: #ffffff;
}
.keytabcontent h6 
{
  padding-top: 60px;
}
.keytabcontent h2 
{
padding-top:0px;
padding-bottom: 60px;
}
.graph-title {
    font-size: 14px;
    line-height: 24px;
    font-family: roboto-bold;
    color: #000000;
    padding-bottom: 5px;
    margin-bottom: 15px;
    border-bottom: 1px solid #0067AC;
}
.graph-title span {
    color: #939598;
    font-family: roboto-regular;
}
.sliderTab2 .slick-list {
    margin: 0 -25px;
}
.sliderTab2 .slick-slide {
    padding: 0 30px;
    box-sizing: border-box;
}
.key-flex {
    display: flex;
    gap: 30px;
    align-items:center;
}
.graph-footnote {
    text-align: right;
    font-size: 14px;
    font-style: italic;
    color: #4e5055;
    margin-top: -30px;
}
.graph-footnote.gf-left {
    text-align: left;
}
.key-graph {
    flex-shrink: 0;
}
.key-text {
    flex: 1;
}
.key-graph img {
    height: 300px;
    width: auto;
    max-width: 100%;
}
.sliderTab2 p {
    font-size: 14px;
    color: #4e5055;
    border-bottom: 1px solid #4e505550;
    padding-bottom: 10px;
    margin-bottom: 10px;
    margin-right: 0px;
    font-family: roboto-regular;
}
.sliderTab2 p span {
    color: #0064b0;
    font-family: roboto-medium;
}
.slider-counter
{
  display: none;
}
.hm-keysec .slick-dots {
    bottom: -75px;
    text-align: left;
    left:0px;
    width: 150px;
}
.hm-keysec .slick-dots li
{
  width: 5px;
  height: 5px;
}
.hm-keysec .slick-dots li button::before {
    top: 0;
    left: 0;
    width: 7px;
    height: 7px;
    content: '';
    text-align: center;
    opacity: .5;
    background-color: #0067ac;
    border-radius: 50px;
}
.hm-keysec .slick-dots li.slick-active button::before {
    opacity: 1;
    background-color: #0067ac;
}
.hm-keysec .slick-prev, .hm-keysec .slick-next
{
top: 50%;
bottom: auto;
transform: translateY(-50%);
margin: 0;
z-index: 5;
}
.hm-keysec .slick-prev
{
  left: -55px;
  right: auto;
}
.hm-keysec .slick-next
{
  left: auto;
  right: -55px;
}
.hm-keysec .slick-prev::before {
    content: '';
    display: block;
    background-image: url(../images/key/left-arrow-blue.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 44px;
    height: 46px;
    opacity: 1;
}
.hm-keysec .slick-next::before {
    content: '';
    display: block;
    background-image: url(../images/key/right-arrow-blue.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 44px;
    height: 46px;
    opacity: 1;
}
.snum-wrap
{
  display: flex;
  align-items: center;
  gap:12px;
  margin-bottom: 20px;
}
.snum
{
  font-size: 20px;
  line-height: 24px;
  font-family: roboto-bold;
  color: #0066AA;
  background-color: #ffffff;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.snum-wrap h5 
{
  font-size: 20px;
  line-height: 24px;
  font-family: roboto-bold;
}
.strategic-pr p 
{
  font-size: 20px;
  line-height: 26px;
}
.strategic-pr .slick-next::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    background-image: url(../images/whiteright-arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 1;
}
.strategic-pr .slick-prev::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    background-image: url(../images/whiteright-arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transform: rotate(180deg);
    opacity: 1;
}
/* position arrows at the left/right edges of the centre item */
.strategic-pr .slick-prev, .strategic-pr .slick-next {
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}
.strategic-pr .slick-prev { left: 235px; right: auto; }
.strategic-pr .slick-next { right: 258px; left: auto; }
.slider-3d .slick-list {
  cursor: grab;
}
.slider-3d .slick-list:active {
  cursor: grabbing;
}
.download-center {
    background-color:#ffffff;
    padding: 50px 0px 50px 0px;
    /*border-top:2px solid #25408F;*/

}
.download-card {
  font-size: 18px;
  font-family: roboto-medium;
  color: #ffffff;
    background-color:#0067AC;
    text-decoration: none;
    padding: 20px 25px;
  width: 320px;
    display: flex;
    justify-content:center;
    gap:10px;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.download-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    color: #ffffff;
}
.download-card img
{
  filter: brightness(0) invert(1);
}
.download-center h2 
{
  color: #0067AC;
  text-align: center;
}
.downlaod-wrap
{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
}
.d-image { flex: 0 0 auto; }
.d-buttons
{
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 380px;
}
.d-buttons .download-card
{
  width: 100%;
  justify-content: space-between;
  margin-top: 0;
}
.value-creation-section {
    background-color: #FCF8F1;
}
.value-creation-section .col-xl-5 {
    padding-left: 0;
}
.value-creation-section .vc-left {
    background: transparent linear-gradient(142deg, #0066AA 0%, #72BF44 100%) 0% 0% no-repeat padding-box;
    padding: 50px 50px 50px 120px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    max-width: 508px;
    width: 100%;
}
.vc-left h6 {
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
    font-family: roboto-bold;
}
.vc-left h2 {
    font-size: 24px;
    line-height: 38px;
    margin-bottom: 30px;
    font-family: roboto-bold;
    color: #FFFFFF;
}
.vc-left h2 span 
{
  display: block;
  font-size: 35px;
}

.vc-tabs {
    display: flex;
    flex-direction: column;
}
.vc-tabs .nav-link {
    background: transparent;
    border: none;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    line-height: 24px;
    opacity: 50%;
    font-weight: 600;
    text-align: left;
    padding: 14px 0 20px 0;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 284px;
    width: 100%;
}
.vc-tabs .nav-link:hover {
    color: #FFFFFF;
}
.vc-tabs .nav-link.active {
    color: #FFFFFF;
    font-weight: 600;
    opacity: 100%;
}
.vc-tabs .nav-link span {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}
.vc-tabs .nav-link.active span {
    opacity: 1;
    transform: translateX(0);
}
.value-creation-section .vc-right {
    padding: 40px 0 40px 0;
}
.value-creation-section .vc-right .tab-pane > img {
    height: 50px;
    width: auto;
    margin-bottom:5px;
}
.vc-right h5 {
    font-size: 16px;
    line-height: 22px;
    padding-bottom: 14px;
    color: #25408F;
}
.tabtoptxt {
    display: flex;
    gap: 90px;
    align-items: center;
    padding-bottom: 25px;
}
.fincaptxt {
    max-width: 325px;
    width: 100%;
}
.outcometxt {
    max-width: 325px;
    width: 100%;
}
.tabtoptxt p {
    font-size: 14px;
    line-height: 20px;
    color: #000000;
    padding-bottom: 5px;
}
.tabtoptxt ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.tabtoptxt ul li {
    font-size: 14px;
    line-height: 20px;
    color: #000000;
    padding-bottom: 5px;
    padding-left: 12px;
    position: relative;
}
.tabtoptxt ul li::after {
    content: "";
    width: 4px;
    height: 4px;
    background-color: #72BF44;
    position: absolute;
    top: 10px;
    left: 0;
}
.sdgtxtimg {
    display: flex;
    gap: 10px;
    padding-bottom: 35px;
}
.greendots {
    display: flex;
    align-items: center;
    gap: 3px;
    padding-bottom: 15px;
}
.greendot1,
.greendot2,
.greendot3 {
    width: 7px;
    height: 7px;
    background-color: #6CC247;
}
.valuechain {
    position: relative;
    border-top: 1px solid #72BF44;
    padding-top: 26px;
    padding-bottom: 15px;
    max-width: 570px;
    width: 100%;
}
.valuechainicon {
    display: flex;
    gap: 50px;
    text-align: center;
}
.valuechainicon img {
    padding-bottom: 5px;
}
.valuechain h5 {
    position: absolute;
    background-color: #FCF8F1;
    top: -13px;
    padding-right: 10px;
}
.valuechain p {
    font-size: 12px;
    line-height: 16px;
    color: #000000;
}
.valuechain p span {
    display: block;
}
.valueicon1 {
    position: relative;
}
.valueicon1::before {
    content: "";
    position: absolute;
    background-image: url("vcm/our-value-chain/arrow.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 27px;
    height: 24px;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
}
.valuecore {
    position: relative;
    border-top: 1px solid #72BF44;
    padding-top: 26px;
    padding-bottom: 15px;
    max-width: 700px;
    width: 100%;
}
.valuecoreicon {
    display: flex;
    gap: 50px;
    text-align: center;
}
.valuecoreicon img {
    padding-bottom: 5px;
}
.valuecore h5 {
    line-height: 30px;
    position: absolute;
    background-color: #FCF8F1;
    top: -17px;
    padding-right: 10px;
}
.valuecore p {
    font-size: 12px;
    line-height: 16px;
    color: #000000;
}
.vcm-readmore {
    margin-top: 20px;
}
.vcm-readmore .readmore-btn {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    text-decoration: none;
}
.vcm-readmore .readmore-text {
    padding: 10px 20px;
    border: 1px solid #0066AA;
    border-radius: 50px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    color: #000;
}
.readmore-arrow {
    width: 40px;
    height: 40px;
    background-color: #72BF44;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vcm-readmore .readmore-btn:hover .readmore-text {
    background-color: #0066AA;
    color: #FFFFFF;
}
.vcm-readmore .readmore-btn:hover .readmore-arrow img {
    rotate: -45deg;
    transition: all 0.3s ease;
}
.valuechainicon img,
.valuecoreicon img {
    width: 43px;
    height: 42px;
}
.leader-info a 
{
  display: inline-block;
  transition: all 0.3s ease;
}
.leader-info a:hover
{
  transform: rotate(-45deg);
  transition: all 0.3s ease;
}

.nav-icon3 {
  width: 25px;
  height: 20px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  z-index: 999;
}

.nav-icon3 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #ffffff;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

.nav-icon3 span:nth-child(1) {
  top: 0px;
}

.nav-icon3 span:nth-child(2),
.nav-icon3 span:nth-child(3) {
  top: 6px;
}

.nav-icon3 span:nth-child(4) {
  top: 12px;
}

.nav-icon3.open span:nth-child(1) {
  top: 16px;
  width: 0%;
  left: 50%;
}

.nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.nav-icon3.open span:nth-child(4) {
  top: 16px;
  width: 0%;
  left: 50%;
}

.my-sidenav1 {
  display: none;
  position: fixed;
  top: 80px;
  right: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 99;
  max-width: 100%;
  width: 100%;
background: linear-gradient(to right,  #0067ac 50%,#73bf44 50%);
  height:calc(100vh - 80px);
}
.my-sidenav1 .row
{
  height: auto!important;
  align-items:flex-start!important;
}
.topmenu-header {
  padding-top: 50px;
}
.top-nav, .top-nav-content
{
  padding-top:60px;
}
.top-nav .nav {
  min-height:auto;
  display: block;
}
.top-nav .nav > li {
  float: none;
}
.top-nav .nav > li:last-child {
  border-bottom: none;
}
.top-nav .nav > li > a {
  color: #fff;
  font-size: 20px;
  line-height: 26px;
  padding-bottom: 24px;
  border-radius: 0px;
  font-weight: 400;
  padding-left: 0px;
  padding-top: 0px;
  font-family: roboto-bold;
}
.top-nav .nav > li > a img {
  padding-left: 20px;
  opacity: 0;
}
.top-nav .nav > li > a:focus,
.top-nav .nav > li > a:hover {
  background-color: transparent;
  font-weight: 700;
  color: #73BF44;
  font-family: roboto-bold;
}
.top-nav .nav-pills > li > a.active,
.top-nav .nav-pills > li > a.active:focus,
.top-nav .nav-pills > li > a.active:hover {
  background-color: transparent;
  font-weight: 700;
  position: relative;
  color: #73BF44;
  font-family: roboto-bold;
}
.top-nav .nav-pills > li.active > a img {
  opacity: 1;
}
.top-nav .nav-pills > li.active > a:after {
  content: "";
  position: absolute;
  right: -2px;
  top: 15px;
  background-color: #ffcc05;
  width: 2px;
  height: 15px;
}
.top-nav-content ul.sub-menu {
  margin-top: 15px;
  padding-left: 0px;
}
.top-nav-content ul li {
  list-style: none;
  padding-bottom: 18px;
}
.top-nav-content ul li.menu-img {
  padding-left: 60px;
}

.top-nav-content ul li a {
  color: #fff;
  font-size: 16px;
  line-height: 21px;
}
/* Download icon next to PDF links in the menus */
.menu-doc-link { display: inline-flex; align-items: center; gap: 8px; }
.menu-doc-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);   /* render the icon white to match menu text */
}

.next-preview {
    width:300px;
    height: 200px;
    margin: 0 auto 20px;
    overflow: hidden;
    position: absolute;
    bottom: 15%;
    right: calc(100vw / 16 * .6);
    border-radius: 15px;
    border:1px solid #ffffff;
}

.next-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vc-tabcontent h3 
{
font-size: 18px;
font-family: roboto-bold;
color: #ffffff;
margin-top: -10px;
padding-bottom: 10px;
}
.graph-li li 
{
font-size: 14px;
padding-bottom: 10px;
color: #4e5055;
}
.v-t3
{
  display: none;
}
.cap-num img 
{
  width: 18px;
}
.hm-keysec .hm-smallhead
{
  padding-top:20px;
}
.hm-keysec .hm-mainhead
{
  padding-bottom:20px;
}
.keytabcontent .row 
{
  align-items: center;
}
#key-tab-b .graph-title,
#key-tab-d .graph-title
{
  border-bottom: 1px solid #72BF44;
}
.hm-keysec .explore-btn
{
  position: absolute;
  bottom: -65px;
  right: 0px;
}
/* =====================================================================
   INSIDE PAGES
   ===================================================================== */

/* ---------- Inside page banner ---------- */
.it-banner {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.it-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.it-banner-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0) 70%);
}

/* Message banners (Chairman / Director): lobby background + person photo
   on the right, text on the left. */
.msg-banner .it-banner-shade {
  /* darker on the left where the text sits, clear on the right for the photo */
  background: linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0) 100%);
}
.msg-banner-person {
  position: absolute;
  right: 6%;
  bottom: 0;
  height: 88%;
  width: auto;
  max-width: 42%;
  object-fit: contain;
  object-position: bottom right;
  z-index: 2;
  pointer-events: none;
}
.msg-banner-sign {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 48px;
  z-index: 3;
}
.msg-banner-sign-rule {
  display: block;
  width: 54px;
  height: 8px;
  background: #ffffff;
  opacity: 0.85;
  margin-bottom: 16px;
}
.msg-banner-sign-name {
  margin: 0;
  color: #ffffff;
  font-family: roboto-bold;
  font-size: 16px;
  line-height: 30px;
}
.msg-banner-sign-role {
  margin: 4px 0 0;
   color: #ffffff;
  font-family: roboto-medium;
  font-size: 16px;
  line-height: 22px;
}
@media (max-width: 991px) {
  .msg-banner-person {
    right: 2%;
    height: 70%;
    max-width: 40%;
  }
}
@media (max-width: 767px) {
  /* On phones: stack as a flex column — breadcrumb + text on top, signature,
     then the person photo at the bottom. Nothing overlaps and the banner
     grows with its content instead of being locked to 100vh. */
  .it-banner.msg-banner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
    min-height: auto;
    padding: 0;                 /* drop the 150px top padding that left a gap */
  }
  .msg-banner .it-banner-shade {
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0) 70%);
  }
  /* breadcrumb flows normally above the title (no more absolute overlap) */
  .msg-banner .it-banner-top {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    order: 0;
    padding-top: 95px;
  }
  .msg-banner .it-banner-center {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    order: 1;
    padding-top: 50px;
    padding-bottom: 20px;
  }
  .msg-banner-person {
    position: relative;
    order: 3;
    margin-top: 0;
    right: auto;
    left: auto;
    transform: none;
    bottom: auto;
    display: block;
    align-self: center;
    height: auto;
    width: auto;
    max-width: 72%;
    max-height: none;
    object-position: bottom center;
  }
  .msg-banner-sign {
    position: relative;
    order: 2;
    left: auto;
    transform: none;
    bottom: auto;
    padding-top: 16px;
    padding-bottom: 24px;
  }
}

.it-banner-top {
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 2;
}
.it-breadcrumb {
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  font-family: roboto-medium;
}
.it-breadcrumb a {
  color: #ffffff;
  font-size: 14px;
}
.it-breadcrumb a:hover { color: #ffffff; }
.it-breadcrumb a[href="#"],
.ch-breadcrumb a[href="#"] { cursor: default; pointer-events: none; }
.it-bc-sep { margin: 0 8px; opacity: 1; color:#ffffff }
.it-bc-current { color: #ffffff; }
.it-banner-center {
  position: relative;
  z-index: 2;
  text-align: left;
}
.it-eyebrow {
  font-size: 18px;
  line-height: 24px;
  color: #ffffff;
  font-family: roboto-medium;
  padding-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.it-eyebrow::before {
  content: "";
  width: 12px;
  height: 12px;
  background: #72BF44;
  flex-shrink: 0;
}
.it-heading {
  font-size: 28px;
  line-height:38px;
  color: #ffffff;
  font-family: roboto-bold;;
}
.it-heading span {
  display: block;
  font-family: roboto-bold;
  text-transform: uppercase;
  font-size: 35px;
  line-height: 42px;
}
.it-banner-subline {
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 26px;
  color: #ffffff;
  font-family: roboto-medium;
  font-style: italic;
  max-width: 400px;
}

/* Stakeholder engagement banner */
.stakeholder-banner {
  height: auto;
  min-height: 100vh;
  padding: 170px 0 60px;
}
.stakeholder-banner .it-banner-top {
  top: 110px;
}
.stakeholder-banner .it-banner-center {
  max-width: 1120px;
}
.stakeholder-banner-copy {
  max-width: 1020px;
  color: #ffffff;
}
.stakeholder-banner-copy .it-heading {
  margin-bottom: 18px;
}
.stakeholder-banner-accent {
  display: block;
  width: 64px;
  height: 18px;
  background: #0067ac;
  margin: 24px 0 32px;
}

/* =====================================================================
   PEOPLE AND CULTURE
   ===================================================================== */
.peopleCulturePage {
  background: #ffffff;
}
.pc-content {
  width: 100%;
}
.pc-block {
  width: 100%;
}
.pc-block--blue,
.pc-block--white,
.pc-block--stat {
  background: #ffffff;
}
.pc-block-inner {
  width: 100%;
  padding-bottom: 30px;
  box-sizing: border-box;
}
.peopleCulturePage .pc-title {
  font-size: 22px;
  line-height: 28px;
  color: #0067ac;
  font-family: roboto-bold;
  margin: 0 0 10px;
}
.peopleCulturePage .pc-title--dark {
  color: #000000;
}
.peopleCulturePage .pc-text {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 18px;
  max-width: none;
}
.peopleCulturePage .pc-text:last-child {
  margin-bottom: 0;
}

.peopleCulturePage .pc-stat {
  color: #0067ac;
  font-size: 30px;
  line-height: 1;
  font-family: roboto-bold;
}
.peopleCulturePage .pc-plus {
  font-size: 30px;
  line-height: 1;
}
.peopleCulturePage .pc-stat-text {
  font-size: 18px;
  line-height: 28px;
  color: #000000;
  font-family: roboto-regular;
  max-width: 520px;
  margin: 0;
}
.pc-feature-section {
  width: 100%;
  padding-bottom: 40px;
}
.pc-feature-section .row{
  align-items: center;
}
.pc-feature-title {
  font-size: 22px;
  line-height: 28px;
  color: #0067ac;
  font-family: roboto-bold;
  margin: 0 0 10px;
}
.pc-feature-text {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 18px;
  max-width: none;
}
.pc-feature-text:last-child {
  margin-bottom: 0;
}
.pc-feature-media {
  height: 100%;
  min-height: 420px;
}
.pc-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pc-leadership-section {
  width: 100%;
}
.pc-leadership-card {
  height: 100%;
  padding-bottom: 30px;
}
.pc-leadership-title {
  font-size: 22px;
  line-height: 28px;
  color: #0067ac;
  font-family: roboto-bold;
  margin: 0 0 10px;
}
.pc-leadership-text {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 18px;
  max-width: none;
}
.pc-leadership-text:last-child {
  margin-bottom: 0;
}
.pc-profile-section {
  width: 100%;
}
.pc-profile-block {
  padding: 0;
  margin: 0 0 34px;
}
.pc-profile-title {
  font-size: 22px;
  line-height: 28px;
  color: #0067ac;
  font-family: roboto-bold;
  margin: 0 0 8px;
}
.pc-profile-subtitle {
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-bold;
  margin: 0 0 8px;
}
.pc-profile-text {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0;
  max-width: none;
}
.pc-profile-head {
  font-size: 18px;
  line-height: 24px;
  color: #0067ac;
  font-family: roboto-bold;
  margin: 0 0 18px;
}
.pc-capability-card {
  height: 100%;
  border-bottom: 6px solid #72BF44;
  padding-bottom: 16px;
}
.pc-capability-text {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0;
}
.pc-expert-section {
  width: 100%;
}
.pc-expert-media {
  width: 100%;
  margin-bottom: 18px;
  padding-top: 30px;
}
.pc-expert-media img {
  width: 100%;
  height: auto;
  display: block;
}
.pc-expert-block {
  padding: 0;
  margin: 0 0 20px;
}
.pc-expert-title {
  font-size: 22px;
  line-height: 28px;
  color: #000000;
  font-family: roboto-bold;
  margin: 0 0 10px;
}
.pc-expert-text {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 14px;
  max-width: none;
}
.pc-expert-text:last-child {
  margin-bottom: 0;
}
.pc-expert-head {
  font-size: 18px;
  line-height: 24px;
  color: #0067ac;
  font-family: roboto-bold;
  margin: 10px 0 16px;
}
.pc-expert-stat {
  border-bottom: 6px solid #72BF44;
  padding-bottom: 14px;
  height: 100%;
  max-width: 350px;
}
.pc-expert-stat-val {
  line-height: 1;
  color: #0067ac;
  font-family: roboto-bold;
  margin-bottom: 4px;
}
.pc-expert-stat-val .counter {
  font-size: 30px;
  line-height: 1;
}
@media (max-width: 575px) {
  .it-heading { font-size: 26px; line-height: 30px; }
  .it-heading span { font-size: 30px; line-height: 34px; }
  .it-vc-card { padding: 28px 22px 0px; }
  .it-activity { gap: 20px; }
  .it-strategic { grid-template-columns: 1fr; row-gap: 14px; }
}
.pc-expert-stat-text {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0;
}
.pc-expert-foot {
  margin: 26px 0 0;
  border-top: 1px solid #b9b9b9;
}
.pc-expert-subsection {
  padding: 0;
  margin: 22px 0 20px;
}
.pc-expert-subtitle {
  font-size: 22px;
  line-height: 28px;
  color: #0067ac;
  font-family: roboto-bold;
  margin: 0 0 10px;
}
.pc-expert-subtext {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0;
  max-width: none;
}
.pc-aspire-section {
  width: 100%;
}
.pc-aspire-copy {
  padding: 0;
  margin: 0 0 26px;
}
.pc-aspire-title,
.pc-aspire-subtitle {
  font-size: 22px;
  line-height: 28px;
  color: #000000;
  font-family: roboto-bold;
  margin: 0 0 10px;
}
.pc-aspire-subtitle {
  color: #000000;
}
.pc-aspire-text {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 18px;
  max-width: none;
}
.pc-aspire-text:last-child {
  margin-bottom: 0;
}
.pc-aspire-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
  margin: 0 0 28px;
}
.pc-aspire-stat {
  min-width: 0;
}
.pc-aspire-stat-val {
  line-height: 1;
  color: #0067ac;
  font-family: roboto-bold;
  margin-bottom: 6px;
}
.pc-aspire-stat-val .counter {
  font-size: 30px;
  line-height: 1;
}
.pc-aspire-stat-text {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0;
}
.pc-growth-section {
  width: 100%;
}
.pc-growth-media {
  width: 100%;
  margin-bottom: 30px;
}
.pc-growth-media img {
  width: 100%;
  height: auto;
  display: block;
}
.pc-growth-block {
  padding: 0;
  margin: 0 0 22px;
}
.pc-growth-title,
.pc-growth-subtitle {
  font-size: 22px;
  line-height: 28px;
  color: #000000;
  font-family: roboto-bold;
  margin: 0 0 10px;
}
.pc-growth-text {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 18px;
  max-width: none;
}
.pc-growth-text:last-child {
  margin-bottom: 0;
}
.pc-growth-stats {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 22px;
}
.pc-growth-stat {
  min-width: 0;
}
.pc-growth-stat-val {
  font-size: 30px;
  line-height: 1;
  color: #0067ac;
  font-family: roboto-bold;
  margin-bottom: 6px;
}
.pc-growth-stat-val .counter {
  font-size: 30px;
  line-height: 1;
}
.pc-growth-stat-text {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0;
}
.pc-nextgen-section {
  width: 100%;
}
.pc-nextgen-section .row {
  align-items: center;
}
.pc-nextgen-media {
  width: 100%;
  margin-bottom: 18px;
}
.pc-nextgen-media img {
  width: 100%;
  height: auto;
  display: block;
}
.pc-nextgen-block {
  margin: 0 0 22px;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .ch-pagehead { padding: 80px 0 0px; }
  .ch-heading { font-size: 30px; line-height: 34px; }
  .ch-heading span { font-size: 36px; line-height: 40px; }
  .ch-numbers { grid-template-columns: repeat(2, 1fr); }
  .ch-numbers .ch-num:nth-child(4n+1)::after { display: block; }
  .ch-numbers .ch-num:nth-child(2n+1)::after { display: none; }
  .ch-cap-intro { max-width: 100%; }
}
@media (max-width: 575px) {
  .ch-numbers .ch-num::after { display: none; }
  .ch-heading { font-size: 22px; line-height: 30px; }
  .ch-heading span { font-size: 26px; line-height: 34px; }
  .ch-numbers { grid-template-columns: 1fr; }
  }
.pc-nextgen-block.pl20 {
    padding-left: 20px;
}
.pc-nextgen-title,
.pc-nextgen-subtitle {
  font-size: 22px;
  line-height: 28px;
  color: #000000;
  font-family: roboto-bold;
  margin: 0 0 10px;
}
.pc-nextgen-subtitle--blue {
  color: #0067ac;
}
.pc-nextgen-title--blue {
  color: #0067ac;
}
.pc-nextgen-subtitle {
  color: #000000;
}
.pc-nextgen-subtitle.pc-nextgen-subtitle--blue {
  color: #0067ac;
}
.pc-nextgen-text {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 18px;
  max-width: none;
}
.pc-nextgen-text:last-child {
  margin-bottom: 0;
}
.pc-nextgen-stats {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 22px;
}
.pc-nextgen-stat-val {
  font-size: 30px;
  line-height: 1;
  color: #0067ac;
  font-family: roboto-bold;
  margin-bottom: 6px;
}
.pc-nextgen-stat-val .counter,
.pc-nextgen-unit {
  font-size: 30px;
  line-height: 1;
}
.pc-nextgen-stat-text {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0;
}
.pc-internship-section {
  width: 100%;
}
.esg-foot-line { flex: 1; height: 1px; background: #000; }
.esg-sdg { flex-shrink: 0; max-width: 380px; }
.esg-sdg img { width: 100%; height: auto; display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .esg-overview { column-count: 1; }
  .esg-pillar-grid { grid-template-columns: 1fr 1fr; }
  .esg-pillar-info { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  }
.pc-internship-stat,
.pc-internship-block {
  padding: 0;
  margin: 0 0 24px;
}
.pc-internship-stat-val {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #0067ac;
  font-family: roboto-bold;
  line-height: 1;
  margin-bottom: 6px;
  font-size: 30px;
}
.pc-internship-stat-val .counter,
.pc-internship-unit,
.pc-internship-metric-val .counter,
.pc-internship-metric-label {
  font-size: 30px;
  line-height: 1;
}
.pc-internship-stat-text,
.pc-internship-text,
.pc-internship-metric-text {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0;
}
.pc-internship-title,
.pc-internship-subtitle {
  font-size: 22px;
  line-height: 28px;
  color: #000000;
  font-family: roboto-bold;
  margin: 0 0 10px;
}
.table-para{
  padding-top: 10px;
}
.bold-text{
  font-family: roboto-bold;
  font-weight: 900;
}
.pc-internship-subtitle--small {
  font-size: 22px;
  line-height: 24px;
  margin-top: 14px;
}
.es-subhead--blk { color: #000000; font-size: 16px; line-height: 22px; }
.es-subhead--dark { color: #000000; }
.es-subhead-dark{
      font-size: 18px;
    line-height: 24px;
    font-family: roboto-bold;
    margin: 24px 0 12px;
    color: #000000;
}
/* VEDAS box */
.es-vedas {
  margin-top: 10px;
  }
.pc-internship-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 28px;
  margin: 0 0 24px;
}
.pc-internship-metric {
  min-width: 0;
}
.pc-internship-metric-val {
  color: #0067ac;
  font-family: roboto-bold;
  line-height: 1;
  margin-bottom: 6px;
}
.pc-internship-metric-label {
  color: #0067ac;
  font-family: roboto-bold;
}
.pc-awards-section {
  width: 100%;
  padding: 18px 0 42px;
}
.pc-awards-panel {
  background: #ffffff;
}
.pc-awards-head {
  display: flex;
  align-items: center;
  min-height: 64px;
  background: #ffffff;
}
.pc-awards-icon {
  width: 82px;
  min-width: 82px;
  height: 64px;
  background: #0067ac;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc-awards-icon img {
  width: 34px;
  height: 34px;
  display: block;
}
.pc-awards-head-title {
  flex: 1;
  padding: 0 18px;
  color: #0067ac;
  font-size: 22px;
  line-height: 28px;
  font-family: roboto-bold;
}
.es-section-subtitle {
  font-size: 18px;
  line-height: 24px;
  font-style: italic;
  color: #000000;
  margin: 8px 0 28px;
  font-family: roboto-bold;
  }
.pc-awards-band {
  height: 34px;
  background: #e78f1f;
}
.pc-awards-row {
  padding: 28px 0 6px;
}
.pc-awards-divider {
  height: 1px;
  background: #bcbcbc;
  margin: 14px 0 0;
}
.pc-awards-item {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  margin-bottom: 15px;
  padding-left: 34px;
}
.pc-awards-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 24px;
  height: 6px;
  background: #5bb6e8;
}
.pc-awards-text {
  font-size: 16px;
  line-height: 24px;
  color: #222222;
  font-family: roboto-regular;
  margin: 0;
}
.pc-awards-text em {
  color: #72bf44;
  font-style: italic;
  font-family: roboto-bold;
}
.pc-awards-item--empty {
  min-height: 1px;
}
.corporateGovernancePage {
  background: #ffffff;
}
.cg-intro-section,
.cg-framework-section,
.cg-philosophy-section {
  width: 100%;
}
.cg-intro-section {
  background: #f5f7fa;
  padding: 18px 0 20px;
}
.cg-intro-text {
  font-size: 18px;
  line-height: 28px;
  color: #0067ac;
  font-family: roboto-bold;
  margin: 0;
}
.cg-framework-section {
  padding: 26px 0 28px;
}
.cg-framework-copy,
.cg-philosophy-block {
  padding: 0;
  margin: 0 0 24px;
}
.cg-title {
  font-size: 22px;
  line-height: 28px;
  color: #0067ac;
  font-family: roboto-bold;
  margin: 0 0 8px;
}
/* ESG Ratings heading — same as cg-title but no colour override (inherits default) */
.cg-esg-ratings-title {
  font-size: 20px;
  line-height: 28px;
  font-family: roboto-bold;
  margin: 0 0 8px;
}
.cg-text {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 16px;
}
.cg-text:last-child {
  margin-bottom: 15px;
}
.cg-framework-card {
  background: #ffffff;
  box-shadow: 0 0 0 1px #f0f0f0;
  padding: 34px 24px 28px;
}
.cg-framework-item {
  text-align: center;
}
.cg-framework-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0067ac;
  font-size: 36px;
}
.cg-framework-icon img {
  max-width: 72px;
  max-height: 72px;
  display: block;
}
.cg-framework-label {
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-bold;
  padding-bottom: 12px;
  border-bottom: 3px solid #72bf44;
  display: inline-block;
}
.cg-philosophy-section {
  padding: 10px 0 0px;
}
.cg-board-section,
.cg-pie-section,
.cg-board-governance-section {
  width: 100%;
}
.cg-board-section {
  padding: 18px 0 22px;
}
/* The two donut SVGs have different aspect ratios (Age Group is wide because its
   legend sits beside the donut; Gender is near-square). Scaling both to the same box
   width made the Gender donut ~1.45x bigger. We size Gender's box to ~0.68x of Age
   Group's so the two donuts render at the same visual diameter. */
.cg-pie-figure.second{
  max-width: 300px;
  margin: 0 auto;
}
.cg-board-block {
  padding: 0;
  margin: 0;
}
.cg-board-table-wrap {
  margin-top: 8px;
}
.cg-board-table {
  margin: 0;
  border-collapse: collapse;
}
.cg-board-table thead th {
  background: #e9f1db;
  color: #000000;
  font-size: 16px;
  line-height: 22px;
  font-family: roboto-bold;
  border-bottom: 2px solid #0067ac;
  border-top: 0;
  vertical-align: middle;
}
.cg-board-table td {
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  font-family: roboto-regular;
  vertical-align: middle;
}
.cg-board-table td,
.cg-board-table th {
  border-color: #b7b7b7;
}
.cg-pie-section {
  padding: 28px 0 28px;
}
.cg-pie-block {
  padding: 0;
}
.cg-pie-title {
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-bold;
  margin: 0 0 12px;
}
.cg-pie-figure {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.cg-pie-figure img {
  max-width: 100%;
  height: auto;
  display: block;
}
.cg-board-governance-section {
  padding: 12px 0 42px;
}
.cg-esg-section {
  width: 100%;
  padding: 8px 0 42px;
}
.cg-esg-section .row {
  align-items: center;
}
.cg-esg-media {
  width: 100%;
}
.cg-esg-media img {
  width: 100%;
  height: auto;
  display: block;
}
.cg-esg-copy {
  padding-left: 28px;
}
.cg-ratings-section {
  width: 100%;
  padding: 18px 0 42px;
}
.cg-ratings-title {
  font-size: 22px;
  line-height: 28px;
  color: #0067ac;
  font-family: roboto-bold;
  margin: 0 0 22px;
}
.cg-oecd-section {
  width: 100%;
  padding: 14px 0 34px;
}
.cg-oecd-intro {
  margin-bottom: 10px;
}
.cg-oecd-card {
  height: 100%;
  border-bottom: 1px solid #9e9e9e;
  padding-bottom: 14px;
}
.cg-oecd-card-title {
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-bold;
  margin: 0 0 10px;
}
.cg-oecd-list {
  margin: 0;
  padding-left: 18px;
}
.cg-oecd-list li {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 8px;
}
.cg-oecd-list li:last-child {
  margin-bottom: 0;
}
.cg-oecd-row {
  margin-top: 2px;
}
.cg-ratings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #b7b7b7;
  border-left: 1px solid #b7b7b7;
}
.cg-rating-card {
  min-width: 0;
  padding: 26px 22px 24px;
  border-right: 1px solid #b7b7b7;
  border-bottom: 1px solid #b7b7b7;
  background: #ffffff;
}
.cg-rating-logo {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.cg-rating-logo img {
  max-width: 100%;
  max-height: 76px;
  display: block;
}
.cg-rating-logo--sp img {
  max-height: 68px;
}
.cg-rating-main h3 {
  font-size: 20px;
  line-height: 28px;
  color: #000000;
  font-family: roboto-bold;
  margin: 0;
}
.cg-rating-chart {
  margin: 10px 0 14px;
  display: flex;
  justify-content: center;
}
.cg-rating-chart img {
  max-width: 100%;
  height: auto;
  display: block;
}
.cg-rating-points {
  margin: 0;
  padding-left: 20px;
}
.cg-rating-points li {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 6px;
}
.cg-rating-points li:last-child {
  margin-bottom: 0;
}
.cg-governance-copy {
  padding: 0;
}
.cg-governance-list {
  margin: 0 0 16px;
  padding-left: 20px;
}
.cg-governance-list li {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 8px;
}
.stakeholder-intro {
  padding: 60px 0 0;
}
.stakeholder-intro-subhead {
  font-size: 18px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-bold;
  margin-bottom: 8px;
}
.stakeholder-intro-text {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-medium;
  margin-bottom: 20px;
 
}
.stakeholder-framework {
  padding: 0;
}
.stakeholder-framework-panel {
  background: #0067ac;
  padding: 62px 0 8px;
}
.stakeholder-framework-box {
  background: #7ac943;
  color: #ffffff;
  text-align: center;
  padding: 56px 42px 50px;
}
.stakeholder-framework-title {
  font-size: 25px;
  line-height: 30px;
  font-family: roboto-bold;
  text-transform: uppercase;
  margin-bottom: 15px;
}
.stakeholder-framework-text {
  font-size: 16px;
  line-height: 30px;
  font-family: roboto-medium;
  margin: 0;
}
.stakeholder-group-card {
  background: #ffffff;
  min-height: 250px;
  padding: 42px 26px 34px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}
.stakeholder-group-icon {
  color: #8f9094;
  font-size: 72px;
  line-height: 1;
  margin-bottom: 36px;
}
.stakeholder-group-icon img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
}
.stakeholder-group-title {
  font-size: 18px;
  line-height: 22px;
  font-family: roboto-bold;
  color: #0067ac;
  margin: 0;
}
.stakeholder-framework.stakeholder-groups {
  background: #0067ac;
  padding: 24px 0 60px;
}
.stakeholder-framework.stakeholder-groups .stakeholder-framework-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.stakeholder-framework.stakeholder-groups .stakeholder-framework-box {
  background: #7ac943;
  color: #ffffff;
  text-align: center;
  padding: 56px 42px 50px;
}
.stakeholder-group-grid-wrap {
  padding-top: 34px;
}
/* Framework layout: 3 cards (top) → green box (middle) → 3 cards (bottom) */
.stakeholder-group-grid-wrap--top { padding-top: 0; }
.stakeholder-framework.stakeholder-groups .stakeholder-framework-copy { margin: 34px 0; }
.stakeholder-group-grid-wrap--bottom { padding-top: 0; }
.stakeholder-community-section {
  background: #ffffff;
  padding: 40px 0 40px;
}
.stakeholder-community-card {
  background: #eef7fb;
  border-bottom: 6px solid #0067ac;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  margin-top: 0;
}
.stakeholder-community-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 0 18px 0 0;
  background: #ffffff;
}
.stakeholder-community-icon {
  width: 120px;
  min-height: 120px;
  background: #7ac943;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stakeholder-community-icon i {
  font-size: 68px;
  line-height: 1;
}
.stakeholder-community-icon img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  display: block;
}
.stakeholder-community-title {
  font-size: 20px;
  line-height: 25px;
  font-family: roboto-bold;
  color: #0067ac;
  margin: 0;
  flex: 1;
}
.stakeholder-community-sdg {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Single SDG strip per pillar — the SVG is a wide horizontal set of icons,
   so let it size by height and keep its natural (wide) aspect ratio, bigger. */
.stakeholder-sdg-item {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}
.stakeholder-sdg-item img {
  height: 100%;
  width: auto;
  object-fit: contain;
}
.stakeholder-community-strip {
  background: #0067ac;
  color: #ffffff;
  padding: 10px 0;
}
.stakeholder-community-strip p {
  font-size: 18px;
  line-height: 24px;
  font-family: roboto-regular;
  margin: 0;
  padding-left: 135px;
}
.stakeholder-community-body {
  padding: 42px 15px 48px 40px;
}
.stakeholder-community-overview {
  margin-bottom: 52px;
}
.stakeholder-community-overview h3,
.stakeholder-community-col h3 {
  font-size: 20px;
  line-height: 25px;
  font-family: roboto-bold;
  color: #000000;
  margin-bottom: 12px;
}
.stakeholder-community-overview p {
  font-size: 16px;
  line-height: 30px;
  font-family: roboto-regular;
  color: #000000;
  max-width: 1050px;
}
.stakeholder-community-grid {
  row-gap: 34px;
}
.stakeholder-community-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.stakeholder-community-col li {
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  line-height: 28px;
  color: #000000;
  font-family: roboto-regular;
  margin-bottom: 10px;
}
.stakeholder-community-col li::before {
  content: "\25A0";
  position: absolute;
  left: 0;
  top: -2px;
  color: #000000;
  font-size: 16px;
  line-height: 28px;
}
.stakeholder-community-compare {
  padding-top: 28px;
}
.stakeholder-community-panel h3 {
  color: #0067ac;
  font-size: 20px;
  line-height: 22px;
  padding-bottom: 10px;
  font-family: roboto-bold;
}
.stakeholder-community-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.stakeholder-community-panel li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  font-family: roboto-regular;
  margin-bottom: 10px;
}
.stakeholder-community-panel li::before {
  content: "\25A0";
  position: absolute;
  left: 0;
  top: -3px;
  color: #000000;
  font-size: 16px;
  line-height: 26px;
}
.stakeholder-community-outcomes {
  padding-top: 42px;
}
.stakeholder-community-outcomes h3 {
  font-size: 18px;
  line-height: 24px;
  color: #0067ac;
  font-family: roboto-bold;
  margin-bottom: 18px;
}

.stakeholder-community-stat-val {
  font-size: 30px;
  line-height: 34px;
  color: #72BF44;
  font-family: roboto-bold;
}
.stakeholder-community-stat-val .counter {
  font-size: 30px;
  line-height: 34px;
}
.stakeholder-community-unit {
  font-size: 20px;
  line-height: 24px;
  font-family: roboto-bold;
}
.stakeholder-community-stat p {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-regular;
  margin-top: 8px;
}
.stakeholder-community-bottom {
  padding-top: 28px;
}
.stakeholder-employees-section,
.stakeholder-investors-section,
.stakeholder-industry-section,
.stakeholder-ngo-section,
.stakeholder-government-section {
  padding-bottom: 0;
}
.stakeholder-employees-compare-section,
.stakeholder-investors-compare-section,
.stakeholder-industry-compare-section,
.stakeholder-ngo-compare-section,
.stakeholder-government-compare-section {
  background: #ffffff;
  padding: 0 0 40px;
}
.stakeholder-community-bottom-card h3 {
  font-size: 18px;
  line-height: 24px;
  color: #0067ac;
  font-family: roboto-bold;
  margin-bottom: 10px;
}
.stakeholder-community-bottom-card p {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0;
}
.stakeholder-community-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.stakeholder-community-tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: #7ac943;
  color: #ffffff;
  font-size: 16px;
  line-height: 1;
  font-family: roboto-bold;
}
.stakeholder-community-capitals {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
}
.stakeholder-community-capital {
  color: #7ac943;
  font-size: 34px;
  line-height: 1;
  font-family: roboto-bold;
  display: inline-flex;
  align-items: center;
}
/* Green pillar icon is a wide strip of capital icons — size by height, keep aspect */
.stakeholder-community-capital img {
  height: 46px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* ---------- Content ---------- */
.it-content { padding: 60px 0; }
.it-intro {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-medium;
  margin-bottom: 40px;
}
.it-main-row { row-gap: 30px; }

/* Read more link */
.it-readmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 18px;
  color: #000;
  font-family: roboto-regular;
  margin-top:40px;
  margin-bottom: 40px;
}
.it-readmore::before {
  content: "";
  display: inline-flex;
  width: 20px;
  height: 20px;
  background: url(../images/new-integrated-thinking/add.svg) no-repeat center / contain;
  flex-shrink: 0;
}
.it-readmore:hover { color: #0067AC; }

/* ---------- Left value-creation card ---------- */
.it-vc-card {
  background: #ffffff;
  box-shadow: 0px 3px 20px #0000001a;
  border-radius: 6px;
  padding: 40px 35px;
  height: 100%;
}
.it-vc-card-title {
  font-size: 18px;
  line-height: 24px;
  color: #0067AC;
  font-family: roboto-bold;
  margin-bottom: 28px;
}
.it-vc-block { margin-bottom: 30px; }
.it-vc-block:last-child { margin-bottom: 0; }
.it-vc-icon { display: inline-block; margin-bottom: 12px; }
.it-vc-icon img { width: 44px; height: 44px; object-fit: contain; }
.it-vc-block h6 {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-bold;
  padding-bottom: 10px;
}
.it-vc-block p {
  font-size: 16px;
  line-height: 22px;
  color: #000000;
}
.it-values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
}
.it-values li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  line-height: 22px;
  color: #000000;
}
.it-values li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: #72BF44;
  border-radius: 50px;
}
.it-strategic {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 18px;
}
.it-strategic li {
  display: flex;
  gap: 10px;
  font-size: 16px;
  line-height: 22px;
  color: #000000;
}
.it-strategic-rm .it-readmore {
    margin-top: 0;
    color: #000;
    font-family: 'roboto-regular';
}
.it-strategic-rm .it-readmore:hover 
{
  color: #0067AC;
}
.it-s-code {
  color: #0067AC;
  font-family: roboto-bold;
  flex-shrink: 0;
}

/* ---------- Right sections ---------- */

.it-sec:last-child { margin-bottom: 0; }
.it-blue-head {
  font-size: 18px;
  line-height: 26px;
  color: #0067AC;
  font-family: roboto-bold;
  padding-bottom: 22px;
}
.it-sub {
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  font-family: roboto-bold;
  padding: 0px 0 12px;
}

/* Business activity row */
.it-activity {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
}
.it-activity li {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.it-act-icon img { width: 44px; height: 44px; object-fit: contain; }
.it-act-text {
  font-size: 14px;
  line-height: 18px;
  color: #000000;
  font-family: roboto-medium;
}

/* Badge rows (T / M / R) */
.it-badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.it-badges li {
  min-width: 46px;
  text-align: center;
  padding: 8px 6px;
  font-size: 14px;
  line-height: 18px;
 
  font-family: roboto-bold;
}
.it-badges-t li { background: #6CCFF6; }
.it-badges-m li { background: #72BF44; }
.it-badges-r li { background: #0067AC; color: #ffffff; }

/* Icon grid (capitals / stakeholders) */
.it-icon-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 20px;
}
.it-icon-grid li {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.it-grid-icon img { width: 40px; height: 40px; object-fit: contain; }
.it-grid-text {
  font-size: 14px;
  line-height: 18px;
  color: #000000;
  font-family: roboto-medium;
}

/* ---------- Prev / Next pagination ---------- */
.it-pagination { padding: 45px 0; background: #f3f4f8; border-top:2px solid #72BF44; }
.it-pagination .container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.it-page-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 6px 24px rgba(0,0,0,0.08);
  padding: 18px 30px;
  transition: 0.3s;
}
.it-page-link:hover { box-shadow: 0px 8px 28px rgba(0,0,0,0.14); }
.it-page-next { text-align: right; }
.it-page-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.it-page-arrow img {
  width: 28px;
  height: auto;
}
.it-page-meta { display: flex; flex-direction: column; }
.it-page-label {
  font-size: 13px;
  line-height: 18px;
  color: #8a8f98;
  font-family: roboto-bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.it-page-title {
  font-size: 16px;
  line-height: 22px;
  color: #0067AC;
  font-family: roboto-bold;
}

/* ---------- Inside page responsive ---------- */
@media (max-width: 991px) {
  .it-banner {  padding: 150px 0 0px; }
  .it-banner-top { top: 90px; }
  .it-heading { font-size: 32px; line-height: 36px; }
  .it-heading span { font-size: 38px; line-height: 42px; }
  .stakeholder-banner { padding: 175px 0 50px; }
  .stakeholder-banner .it-banner-top { top: 125px; }
  .it-icon-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .it-heading { font-size: 26px; line-height: 30px; }
  .it-heading span { font-size: 30px; line-height: 34px; }
  .stakeholder-banner { padding: 165px 0 40px; }
  .stakeholder-banner .it-banner-top { top: 120px; }
  .stakeholder-intro { padding: 30px 0 0; }
  .stakeholder-intro-subhead { margin-bottom: 24px; }
  .stakeholder-intro-text {  font-size: 16px; line-height: 24px; margin-bottom: 30px; }
  .stakeholder-banner-accent { margin: 18px 0 24px; }
  .stakeholder-framework-panel { padding: 48px 0 44px; }
  .stakeholder-framework-box { padding: 42px 28px 38px; }
  .stakeholder-framework-title { font-size: 30px; line-height: 38px; margin-bottom: 26px; }
  .stakeholder-framework-text { font-size: 16px; line-height: 26px; }
  .stakeholder-group-card { min-height: auto; padding: 34px 22px 28px; }
  .stakeholder-group-icon { font-size: 62px; margin-bottom: 28px; }
  .stakeholder-group-title { font-size: 22px; line-height: 28px; }
  .stakeholder-framework.stakeholder-groups { padding: 18px 0 50px; }
  .stakeholder-group-grid-wrap { padding-top: 28px; }
  .stakeholder-community-section { padding: 30px 0 30px; }
  .stakeholder-community-head { flex-wrap: wrap; gap: 16px; padding: 0 14px 0 14px; }
  .stakeholder-community-icon { width: 96px; min-height: 96px; }
  .stakeholder-community-icon i { font-size: 56px; }
  .stakeholder-community-title { font-size: 22px; line-height: 28px; }
  .stakeholder-community-sdg { margin-left: auto; }
  .stakeholder-sdg-item { height: 56px; width: auto; }
  /* the 135px left padding is only needed to clear the desktop icon */
  .stakeholder-community-strip p { padding-left: 15px; padding-right: 15px; }
}

/* Right-section read-more links get a trailing rule that fills the row */
.it-sec > .it-readmore {
  display: flex;
  width: 100%;
}
.it-sec > .it-readmore::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #0a0a0a;
  margin-left: 18px;
  align-self: center;
}

/* =====================================================================
   CAPITAL HIGHLIGHTS FY 2025-26 (inside page, no banner)
   ===================================================================== */
.ch-pagehead { padding: 110px 0 0px; }
.ch-breadcrumb {
  font-size: 14px;
  line-height: 20px;
  color: #4e5055;
  font-family: roboto-medium;
  margin-bottom: 28px;
}
.ch-breadcrumb a { color: #000; font-size: 14px; }
.ch-breadcrumb a:hover { color: #000; }
.ch-bc-sep { margin: 0 8px; opacity: 1; color:#000; }
.ch-bc-current { color: #000; }
.ch-eyebrow {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-medium;
  padding-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ch-eyebrow::before {
  content: "";
  width: 14px;
  height: 14px;
  background: #72BF44;
  flex-shrink: 0;
}
.ch-heading {
  font-size: 28px;
  line-height: 36px;
  color: #000000;
  font-family: roboto-bold;
}
.ch-heading span {
  display: block;
  font-family: roboto-bold;
  text-transform: uppercase;
  font-size: 36px;
  line-height: 42px;
}
.awards-pagehead {
  background: #00538b;
  padding: 110px 0 24px;
  position: relative;
  z-index: 2;
}
.awards-pagehead .ch-breadcrumb a,
.awards-pagehead .ch-breadcrumb a:hover,
.awards-pagehead .ch-bc-sep,
.awards-pagehead .ch-bc-current,
.awards-pagehead .ch-eyebrow,
.awards-pagehead .ch-heading,
.awards-pagehead .ch-heading span {
  color: #ffffff !important;
}
.awards-pagehead .ch-eyebrow::before {
  background: #72bf44;
}
.awards-pagehead .ch-breadcrumb {
  color: #ffffff;
  margin-bottom: 22px;
}
.awards-key-section {
  width: 100%;
  background: #00538b;
  padding: 18px 0 38px;
}
.awards-key-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 18px 28px;
  align-items: center;
}
.awards-key-copy {
  color: #ffffff;
  font-size: 16px;
  line-height: 24px;
  font-family: roboto-regular;
  max-width: 320px;
}
.awards-key-copy p {
  margin: 0;
}
.awards-key-copy--tl {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  text-align: center;
}
.awards-key-copy--tr {
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-self: center;
  text-align: left;
  max-width: 300px;
}
.awards-key-copy--ml {
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  text-align: center;
}
.awards-key-copy--bl {
  grid-column: 1;
  grid-row: 3;
  justify-self: center;
  text-align: center;
}
.awards-key-copy--br {
  grid-column: 3;
  grid-row: 3;
  justify-self: center;
  text-align: left;
  max-width: 310px;
}

.awards-key-graphic img {
  width: 100%;
  height: auto;
  display: block;
}
.awards-key-graphic {
    max-width: 900px;
    width: 100%;
    margin: auto;
}
.awards-category-section {
  width: 100%;
  background: #00538b;
  padding: 22px 0 34px;
}
.awards-category-block {
  background: #00538b;
  padding: 14px 0 24px;
  border-bottom: 1px solid rgba(255,255,255,0.7);
}
.awards-category-block:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.awards-category-head {
  display: inline-block;
  background: #a7dcf3;
  color: #000000;
  font-size: 22px;
  line-height: 26px;
  font-family: roboto-bold;
  padding: 8px 22px;
  margin-bottom: 18px;
}
.awards-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.awards-category-list li {
  position: relative;
  color: #ffffff;
  font-size: 16px;
  line-height: 24px;
  font-family: roboto-regular;
  padding-left: 20px;
  margin: 0 0 12px;
}
.awards-category-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  background: #76c043;
}
.awards-category-list li:last-child {
  margin-bottom: 0;
}
/* ---------- Capital section ---------- */
.ch-cap { padding-top: 45px; }
.ch-cap:not(:last-of-type) > .container { border-bottom: 1px solid #c2bfbf; padding-bottom: 50px; }
.ch-cap-top { align-items: center; row-gap: 30px; }
.ch-cap-head {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
}
.ch-cap-icon {
  flex-shrink: 0;
  line-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ch-cap-icon img { width: 70px; height: 70px; object-fit: contain; }
.ch-cap-icon::after {
  content: "";
  display: block;
  width: 70px;
  height: 8px;
  background: #72BF44;
}
.ch-cap-title {
  font-size: 22px;
  line-height:28px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0;
}
.ch-cap-title span { display: inline; }
.ch-cap-intro {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  max-width: 540px;
  font-family: roboto-medium;
}
.ch-cap-media {
  aspect-ratio: 640 / 460;
}
.ch-cap-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* ---------- Outcomes / numbers grid ---------- */
.ch-outcomes-head {
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-bold;
  margin: 45px 0 6px;
}
.ch-outcomes-sub {
  font-size: 14px;
  line-height: 20px;
  color: #4e5055;
  font-family: roboto-bold;
  margin-bottom: 22px;
}
.ch-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 30px;
  margin-top: 24px;
}
.ch-num { position: relative; }
.ch-num::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -25px;
  width: 2px;
  background:#72BF44;
}
.ch-numbers .ch-num:nth-child(4n+1)::after { display: none; }
.ch-num-cat {
  display: block;
  font-size: 14px;
  line-height: 18px;
  color: #72BF44;
  font-family: roboto-bold;
  margin-bottom: 6px;
}
.ch-num-cat.ch-cat-green { color: #72BF44; }
.ch-num-val {
  font-size: 30px;
  line-height: 32px;
  color: #0067AC;
  font-family: roboto-medium;
}
.ch-num-val .ch-cur { font-size: 20px; }
.ch-num-val .ch-unit {
  font-size: 18px;
  font-family: roboto-medium;
}
.ch-num-val sup { font-size: 13px; }
.ch-num-label {
  font-size: 14px;
  line-height: 19px;
  color: #000000;
  margin-top: 8px;
  padding-right: 15px;
}
.ch-num-yoy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  line-height: 18px;
  font-family: roboto-bold;
  margin-top: 8px;
}
.ch-num-yoy.ch-up { color: #72BF44; }
.ch-num-yoy.ch-up::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url(../images/capital/green-arrow.svg) no-repeat center / contain;
}
.ch-num-yoy.ch-down { color: #939598; }
.ch-num-yoy.ch-down::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url(../images/capital/gray-arrow.svg) no-repeat center / contain;
}
.ch-footnote {
  font-size: 13px;
  line-height: 18px;
  font-style: italic;
  color: #4e5055;
  margin-top: 30px;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .ch-pagehead { padding: 110px 0 30px; }
  .ch-heading { font-size: 30px; line-height: 34px; }
  .ch-heading span { font-size: 36px; line-height: 40px; }
  .ch-numbers { grid-template-columns: repeat(2, 1fr); }
  .ch-numbers .ch-num:nth-child(4n+1)::after { display: block; }
  .ch-numbers .ch-num:nth-child(2n+1)::after { display: none; }
  .ch-cap-intro { max-width: 100%; }
}
@media (max-width: 575px) {
  .ch-numbers .ch-num::after { display: none; }
  .ch-heading { font-size: 26px; line-height: 30px; }
  .ch-heading span { font-size: 30px; line-height: 34px; }
  .ch-numbers { grid-template-columns: 1fr; }
}
.reporting-text img 
{
  width: 30px;
  padding-bottom: 10px;
  filter: invert(1);
}
/* =====================================================================
   OUR ESG COMMITMENT (inside page)
   ===================================================================== */
.esg-overview {
  margin-bottom: 50px;
}
.esg-overview p {
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  break-inside: avoid;
}
.esg-bar {
  background: #0067AC;
  color: #ffffff;
  font-family: roboto-medium;
  font-size: 18px;
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  padding: 14px 20px;
}
.esg-pillars-sub {
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  font-family: roboto-bold;
  text-align: center;
  border-top: 1px solid #d8d8d8;
  margin-top: 18px;
  padding: 24px 0 6px;
}

/* ---------- Pillar ---------- */
.esg-pillar { --esg-accent: #0067AC; padding: 30px 0; border-bottom: 1px solid #e2e2e2; }
.esg-pillar--communities { --esg-accent: #5f3917; }
.esg-pillar--planet { --esg-accent: #5a9e2f; }
.esg-pillar--workplace { --esg-accent: #000000; }
.esg-pillar-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 30px;
  align-items: start;
}
.esg-pillar-info { display: flex; flex-direction: row; align-items: center; gap: 18px; }
.esg-pillar-icon {
  flex-shrink: 0;
  width: 110px;
  height:110px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.esg-pillar-icon img { width: 100%; height: 100%; object-fit: contain; }
.esg-pillar-desc {
  font-size: 18px;
  line-height: 22px;
  color: var(--esg-accent);
  font-family: roboto-medium;
  margin: 0;
}
.esg-aim-no {
  display: block;
  font-size: 18px;
  line-height: 20px;
  color: var(--esg-accent);
  font-family: roboto-bold;
  margin-bottom: 8px;
}
.esg-aim p {
  font-size: 16px;
  line-height: 22px;
  color: #000000;
}
.esg-pillar-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
}
.esg-pillar-label {
  background: var(--esg-accent);
  color: #ffffff;
  font-family: roboto-bold;
  font-size: 14px;
  line-height: 18px;
  padding: 9px 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.esg-foot-line { flex: 1; height: 1px; background: #d8d8d8; }
.esg-sdg { flex-shrink: 0; max-width: 380px; }
.esg-sdg img { width: 100%; height: auto; display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .esg-overview { column-count: 1; }
  .esg-pillar-grid { grid-template-columns: 1fr 1fr; }
  .esg-pillar-info { grid-column: 1 / -1; flex-direction: row; align-items: center; }
}
@media (max-width: 575px) {
  .esg-pillar-grid { grid-template-columns: 1fr; }
  .esg-pillar-info { flex-direction: column; align-items: flex-start; }
  .esg-pillar-foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .esg-bar {  font-size: 16px; }
}
.esg-overview p 
{
  padding-bottom: 20px;
}
/* =====================================================================
   OUR ESG STRATEGY (inside page)
   ===================================================================== */
.es-section { padding-top:50px; }
/* kill trailing block margin so inter-section gap stays a clean 50px (no doubling) */
.es-section .container > *:last-child { margin-bottom: 0; }
.es-intro {
  font-size: 18px;
  line-height: 26px;
  color: #000000;
  margin-bottom: 30px;
  font-family: roboto-medium;
}
.es-text { margin-bottom: 30px;  
}
.es-text p {
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  margin-bottom: 18px;
}
.es-subhead {
  font-size: 18px;
  line-height: 24px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 24px 0 12px;
}
.es-subhead--blk { color: #000000; font-size: 16px; line-height: 22px; }
.es-subhead--dark { color: #000000; }

/* VEDAS box */
.es-vedas {
  margin-top: 10px;
}
.es-vedas-head {
  color: #000000;
  font-family: roboto-bold;
  font-size: 18px;
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 14px;
  border-bottom: 4px solid #72BF44;
  margin-bottom: 24px;
}
.es-vedas-body {
  padding: 0;
}
.es-vedas-body p {
  font-size: 16px;
  line-height: 22px;
  color: #0067AC;
  margin-bottom: 16px;
  break-inside: avoid;
}

/* --- ESG Strategy: governance + VSF --- */
.es-section-title {
  font-size: 24px;
  line-height: 32px;
  color: #72BF44;
  font-family: roboto-bold;
  text-transform: uppercase;
}
.es-section-subtitle {
  font-size: 18px;
  line-height: 24px;
  font-style: italic;
  color: #000000;
  margin: 8px 0 28px;
  font-family: roboto-bold;
}

/* COP topics */
.es-cop {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px 24px;
}
.es-cop li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid #cdd5de;
  padding-bottom: 12px;
}
.es-cop-icon img { width: 44px; height: 44px; object-fit: contain; }
.es-cop-name { font-size: 16px; line-height: 18px; font-family: roboto-regular; color: #72BF44; }

/* Lists */
.es-list { list-style: none; margin: 0; padding: 0; }
.es-list li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  margin-bottom:15px;
}
.es-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    background: #72BF44;
}

/* =========================================================
   About the Report — full-width stacked content section
   ========================================================= */
.about-report-section {
  padding: 45px 0 60px;
}

/* Lead / intro statement (bold, dark, full width) */
.about-report-lead {
  font-size: 18px;
  line-height: 32px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 0 0 50px;
}

/* Each titled content block, stacked one after another */
.about-report-block {
  width: 100%;
  margin-bottom: 42px;
}
.about-report-block:last-child {
  margin-bottom: 0;
}

/* Blue section headings */
.about-report-block-title {
  font-size: 22px;
  line-height: 28px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 16px;
}

/* Body paragraphs */
.about-report-text {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 18px;
}
.about-report-text:last-child {
  margin-bottom: 0;
}

/* Authorised-for-release note with leading icon */
.about-report-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-regular;
  margin: 20px 0 0;
}
.about-report-note strong {
  font-family: roboto-bold;
  color: #000000;
}
.about-report-note-icon {
  flex-shrink: 0;
  line-height: 0;
  margin-top: 4px;
}
.about-report-note-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* =========================================================
   Our Reporting Suite — two-up report card grid
   ========================================================= */
.reporting-suite-section {
  padding: 45px 0 60px;
}

/* "Vedanta Limited" sub-heading above the grid */
.reporting-suite-company {
  font-size: 22px;
  line-height: 28px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 0 0 30px;
}

/* Grid: 2 cards per row on desktop, with the final card centered. */
.reporting-suite-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 40px;
  row-gap: 0;
}

/* Each report card spans 2 of the 4 columns (half width) */
.reporting-suite-card {
  grid-column: span 2;
  padding: 36px 0;
  border-bottom: 1px solid #c2bfbf;
}
/* Left-align the final card on the last row */
.reporting-suite-card:nth-child(5) {
  grid-column: 1 / span 2;
}
/* Remove the bottom border on the last row (last 2 cards) */
.reporting-suite-card:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.reporting-suite-card-title {
  font-size: 18px;
  line-height: 24px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 0 0 18px;
}

/* Body = cover image (left) + meta details (right) */
.reporting-suite-card-body {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

/* Report cover thumbnail */
.reporting-suite-cover {
  flex-shrink: 0;
  /* width: 118px; */
  line-height: 0;
  display: block;
  border: 1px solid #e3e3e3;
}
.reporting-suite-cover img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Meta column (PDF icon + detail text) */
.reporting-suite-meta {
  flex: 1;
  min-width: 0;
}

/* PDF download icon */
.reporting-suite-pdf {
  display: inline-block;
  line-height: 0;
  margin-bottom: 16px;
}
.reporting-suite-pdf img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* Detail paragraphs */
.reporting-suite-detail {
  font-size: 14px;
  line-height: 20px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0 0 14px;
}
.reporting-suite-detail:last-child {
  margin-bottom: 0;
}
.reporting-suite-detail-head {
  display: block;
  font-family: roboto-bold;
  color: #1a1a1a;
  margin-bottom: 2px;
}

/* =========================================================
   Vedanta at a Glance — leading natural resources
   ========================================================= */
.vedanta-glance-leading {
  position: relative;
  padding: 10px 0 60px;
}

/* Inner panel that holds the stats */
.vedanta-glance-panel {
  /* max-width: 900px; */
  margin: 0 auto;
  text-align: left;
}

/* Blue title line */
.vedanta-glance-title {
  font-size: 26px;
  line-height: 34px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 50px;
}

/* Each row block (resources / economic value) */
.vedanta-glance-block {
  padding-bottom: 45px;
  margin-bottom: 45px;
  border-bottom: 1px solid #c2bfbf;
}
.vedanta-glance-block-last {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

/* Dark bold sub-heading */
.vedanta-glance-subhead {
  font-size: 18px;
  line-height: 24px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 0 0 34px;
}

/* 3-up grid of stats */
.vedanta-glance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
}

/* Single stat */
.vedanta-glance-stat {
  text-align: center;
}
.vedanta-glance-stat-val {
  font-size: 44px;
  line-height: 50px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0;
}
.vedanta-glance-stat-val .vedanta-glance-stat-unit {
  display: block;
  font-size: 22px;
  line-height: 28px;
  color: #0067AC;
  font-family: roboto-bold;
  margin-top: 2px;
}
.vedanta-glance-stat-val sub { font-size: 60%; }
.vedanta-glance-stat-label {
   font-size: 16px;
  line-height: 20px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 8px 0 0;
}

/* ---------- Overview content (full-width paragraphs) ---------- */
.vedanta-glance-overview {
  padding: 55px 0 60px;
}
.vedanta-glance-overview-text {
  font-size: 16px;
  line-height: 26px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0 0 22px;
}
.vedanta-glance-overview-text:last-child {
  margin-bottom: 0;
}

/* =========================================================
   Our value chain — 5 numbered cards (3 top, 2 centered)
   ========================================================= */
.value-chain-section {
  background: #0067AC;
  padding: 70px 0 80px;
}

/* "Our value chain" pill heading */
.value-chain-heading {
  display: inline-block;
  font-size: 22px;
  line-height: 24px;
  color: #003e6b;
  font-family: roboto-bold;
  background: #8ed8f8;
  padding: 14px 26px;
  margin: 0 auto 50px;
}

/* Card grid: flex wrap so the last row centers */
.value-chain-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 52px;
}

/* Each card sized so 3 fit per row */
.value-chain-card {
  flex: 0 0 calc((100% - 2 * 32px) / 3);
  max-width: 350px;
}

@media (min-width: 992px) {
  .value-chain-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .value-chain-card {
    width: 100%;
    max-width: none;
    grid-column: span 2;
    flex: none;
  }

  .value-chain-card:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .value-chain-card:nth-child(5) {
    grid-column: 4 / span 2;
  }
}

/* Number + icon row */
.value-chain-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  min-height: 84px;
}
.value-chain-card-num {
  font-size: 60px;
  line-height: 1;
  color: #4a9fd4;
  font-family: roboto-light;
}
.value-chain-card-icon {
  line-height: 0;
}
.value-chain-card-icon img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

/* Green underline with raised 3D drop shadow */
.value-chain-card-rule {
  display: block;
  width: 100%;
  height: 6px;
  background: #72BF44;
  margin-bottom: 22px;
  box-shadow: 0 8px 12px 0 rgba(0, 0, 0, .35),
              0 4px 6px 0 rgba(0, 51, 90, .45);
}

.value-chain-card-title {
  font-size: 18px;
  line-height: 24px;
  color: #ffffff;
  font-family: roboto-bold;
  margin: 0 0 12px;
}
.value-chain-card-text {
   font-size: 16px;
  line-height: 22px;
  color: #ffffff;
  font-family: roboto-regular;
  margin: 0;
}

/* =========================================================
   ESG purpose and mission — themed aim rows
   ========================================================= */
.esg-purpose-section {
  padding: 55px 0 50px;
}
.esg-purpose-heading {
  font-size: 22px;
  line-height: 28px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 40px;
}

/* One theme row = circular icon + 3 aim columns */
.esg-purpose-row {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 30px;
  align-items: center;
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid #c2bfbf;
}
.esg-purpose-row:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

/* Theme block (icon + title) */
.esg-purpose-theme {
  display: flex;
  align-items: center;
  gap: 28px;
}
.esg-purpose-icon {
  flex-shrink: 0;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1px solid #5f3917;
  display: flex;
  align-items: center;
  justify-content: center;
}
.esg-purpose-icon img {
  width: 78px;
  height: 78px;
  object-fit: contain;
}
.esg-purpose-icon-planet { border-color: #579842; }
.esg-purpose-icon-governance { border-color: #3f5eab; }
.esg-purpose-icon-communities { border-color: #e87722; }
.esg-purpose-theme-title {
  font-size: 18px;
  line-height: 24px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 0;
}

/* The three aims */
.esg-purpose-aims {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  border-left: 1px solid #c2bfbf;
  padding-left: 30px;
}
.esg-purpose-aim-label {
  display: block;
  font-size: 16px;
  line-height: 20px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin-bottom: 8px;
}
.esg-purpose-aim-label-green { color: #72BF44; }
.esg-purpose-aim-text {
   font-size: 16px;
  line-height: 21px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0;
}

/* =========================================================
   Operating structure — SVG diagram
   ========================================================= */
.operating-structure-section {
  padding: 50px 0 60px;
}
.operating-structure-heading {
  font-size: 22px;
  line-height: 28px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 10px;
}
.operating-structure-intro {
  font-size: 16px;
  line-height: 24px;
  color: #4e5055;
  font-family: roboto-regular;
  margin: 0 0 40px;
}
.operating-structure-chart {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
}
.operating-structure-img {
  display: block;
  width: 100%;
  height: auto;
}
.operating-structure-note {
  font-size: 13px;
  line-height: 18px;
  font-style: italic;
  color: #4e5055;
  font-family: roboto-regular;
  margin: 20px 0 0;
}

/* =========================================================
   Vedanta at a Glance — minimal hover interactions
   ========================================================= */

/* Leading stats: lift gently and shift the number from blue to green */
/* .vedanta-glance-stat {
  transition: transform .3s ease;
} */
/* .vedanta-glance-stat:hover {
  transform: translateY(-6px);
} */
/* .vedanta-glance-stat-val,
.vedanta-glance-stat-val .vedanta-glance-stat-unit {
  transition: color .3s ease;
} */
/* .vedanta-glance-stat:hover .vedanta-glance-stat-val,
.vedanta-glance-stat:hover .vedanta-glance-stat-val .vedanta-glance-stat-unit {
  color: #72BF44;
} */

/* Value chain cards: zoom in on hover, lift the icon and brighten the rule */
.value-chain-card {
  transition: none;
  will-change: auto;
}
.value-chain-card:hover {
  transform: none;
}
.value-chain-card-icon img,
.value-chain-card-num,
.value-chain-card-rule {
  transition: none;
}
/* .value-chain-card:hover .value-chain-card-icon img,
.value-chain-card:hover .value-chain-card-num,
.value-chain-card:hover .value-chain-card-rule {
  transform: none;
  color: inherit;
  box-shadow: none;
} */

/* ESG aims: text turns green and nudges right; theme icon zooms slightly */
.esg-purpose-aim-label,
.esg-purpose-aim-text {
  transition: none;
}
.esg-purpose-aim:hover .esg-purpose-aim-label,
.esg-purpose-aim:hover .esg-purpose-aim-text {
  color: #1a1a1a;
}
.esg-purpose-aim:hover {
  transform: none;
}
.esg-purpose-aim {
  transition: none;
}
.esg-purpose-icon {
  transition: none;
}
.esg-purpose-theme:hover .esg-purpose-icon {
  transform: none;
  box-shadow: none;
}


/* =========================================================
   Presence — India / Global maps, legend, location lists
   ========================================================= */
.presence-section {
  padding: 50px 0 40px;
}
.presence-region-title {
  font-size: 24px;
  line-height: 30px;
  color: #0067AC;
  font-family: roboto-bold;
  padding-bottom: 12px;
  border-bottom: 1px solid #c2bfbf;
  margin: 0 0 34px;
}

/* Top row: map on the left, legend on the right */
.presence-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 44px;
}
.presence-map-wrap {
  width: 100%;
}
.presence-map-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Colour legend — 2 columns, on the right of the map */
.presence-legend {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
  border: 1px solid #c2bfbf;
  border-radius: 4px;
  padding: 28px 30px;
}
.presence-legend-item {
  display: flex;
  align-items: center;
   font-size: 16px;
  line-height: 19px;
  color: #1a1a1a;
  font-family: roboto-medium;
  text-transform: uppercase;
}
.presence-legend-swatch {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-right: 12px;
}

/* Numbered location cards — equal-size grid, numbered horizontally */
.presence-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 992px) {
  .presence-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

/* =====================================================================
   START CSS: Value Creation Model cards (value-creation-modal)
   ===================================================================== */
.vca-section { padding: 45px 0 10px; }
.vca-row { row-gap: 30px; }
.vca-title {
  font-size: 18px;
  line-height: 24px;
  color: #ffffff;
  font-family: roboto-bold;
  background: #0067AC;
  text-align: center;
  padding: 16px 20px;
  margin: 0;
}
.vca-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
/* 2 items per row, last item centered (2 + 2 + 1) */
.vca-item {
  position: relative;
  flex: 0 0 50%;
  max-width: 50%;
  box-sizing: border-box;
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
/* Inset divider lines (don't touch edges -> small gaps at the crossings) */
/* vertical divider on the right column */
.vca-item:nth-child(even)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 2px;
  background: #e3e6ea;
}
/* last (5th) item spans full width so its divider runs full and content stays centered */
.vca-item:nth-child(5) {
  flex: 0 0 100%;
  max-width: 100%;
}
/* horizontal divider above the second row and above the last (5th) item */
.vca-item:nth-child(3)::after,
.vca-item:nth-child(4)::after,
.vca-item:nth-child(5)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  background: #e3e6ea;
}
.vca-num {
  position: absolute;
  top: 18px;
  left: 40%;
  transform: translateX(-78px); /* sit just left of the centered icon */
  font-size: 38px;
  line-height: 1;
  font-family: roboto-light;
  font-weight: normal;
  color: #9FCB6B;
}
.vca-icon { display: inline-flex; }
.vca-icon img { width: 56px; height: 56px; object-fit: contain; }
.vca-text {
  font-size: 16px;
  line-height: 22px;
  font-family: roboto-regular;
}
/* =====================================================================
   END CSS: Value Creation Model cards (value-creation-modal)
   ===================================================================== */

/* =====================================================================
   START CSS: Value Creation Accordions (value-creation-modal)
   ===================================================================== */

.vc-acc .accordion-item {
  border: none;
  border-bottom: 1px solid #e3e6ea;
  border-radius: 0;
  margin-bottom: 16px;
  background: transparent;
}
.vc-acc .accordion-header { margin: 0; }
.vc-acc .accordion-item:first-of-type .accordion-button,
.vc-acc .accordion-item:last-of-type .accordion-button.collapsed {
  border-radius: 0;
}
.vc-acc .accordion-button {
  font-size: 18px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-bold;
  background: transparent;
  padding: 14px 0;
  box-shadow: none;
}
.vc-acc .accordion-button:not(.collapsed) {
  color: #000000;
  background: transparent;
  box-shadow: none;
}
.vc-acc .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}
/* custom +/- indicator (matches the green plus used elsewhere) */
.vc-acc .accordion-button::after {
  content: "+";
  background-image: none;
  width: 40px;
  height: 40px;
  background: #72BF44;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  line-height: 1;
  transform: none;
  flex-shrink: 0;
}
.vc-acc .accordion-button:not(.collapsed)::after {
  content: "\2212"; /* minus sign */
  background: #0067AC;
  transform: none;
}
.vc-acc .accordion-body {
  padding: 8px 0 28px;
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-medium;
}

/* ---- Resources and Relationships Deployed grid (6 capitals, 2 per row) ---- */
.vcr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 70px;
  row-gap: 30px;
}
.vcr-item {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding-top: 24px;
  border-top: 1px solid #e3e6ea;
}
/* first row of the two-column grid has no top rule */
.vcr-item:nth-child(1),
.vcr-item:nth-child(2) { border-top: none; padding-top: 0; }
.vcr-head {
  flex: 0 0 100px;
  max-width: 100px;
}
.vcr-title {
  font-size: 16px;
  line-height: 22px;
  color: #0067AC;
  font-family: roboto-medium;
  margin: 0 0 14px;
}
.vcr-title span { display: block; }
.vcr-icon { display: inline-flex; }
.vcr-icon img { width: 54px; height: 54px; object-fit: contain; }
.vcr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.vcr-list > li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-regular;
}
.vcr-list > li:last-child { margin-bottom: 0; }
.vcr-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  background: #72BF44;
  border-radius: 2px;
}
.vcr-sublist {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.vcr-sublist li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
}
.vcr-sublist li:last-child { margin-bottom: 0; }
.vcr-sublist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: #9FCB6B;
  border-radius: 50%;
}
/* Stakeholder icon row (3rd accordion) */
.vcr-stake {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-content: flex-start;
}
.stake-ic-stake{
     width: 150px;
}
/* =====================================================================
   END CSS: Value Creation Accordions (value-creation-modal)
   ===================================================================== */

/* =====================================================================
   START CSS: Business Segments (value-creation-modal)
   ===================================================================== */
.bseg-section { padding: 35px 0 10px; }
.bseg-title {
  font-size: 18px;
  line-height: 24px;
  color: #ffffff;
  font-family: roboto-bold;
  background: #72BF44;
  text-align: center;
  padding: 16px 20px;
  margin: 0;
}
.bseg-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
/* 4 items per row, last row (3) centered -> 4 + 4 + 3 */
.bseg-item {
  position: relative;
  flex: 0 0 25%;
  max-width: 25%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
}
/* Inset divider lines (don't touch edges -> small gaps at the crossings) */
.bseg-item::before,
.bseg-item::after {
  content: "";
  position: absolute;
  background: #e3e6ea;
  display: none;
}
.bseg-item::before { left: 0; top: 22%; bottom: 22%; width: 1px; }  /* vertical */
.bseg-item::after { top: 0; left: 10%; right: 10%; height: 1px; }   /* horizontal */
@media (min-width: 992px) {
  /* vertical divider on items not starting a row (skip 1, 5, 9) */
  .bseg-item:not(:nth-child(4n+1))::before { display: block; }
  /* horizontal divider above rows 2 and 3 (items 5 onwards) */
  .bseg-item:nth-child(n+5)::after { display: block; }
}

.bseg-icon {
  width: 55px;
  height: 55px;
}
.bseg-text {
  font-size: 16px;
  line-height: 22px;
  color: #000000;
}
/* =====================================================================
   END CSS: Business Segments (value-creation-modal)
   ===================================================================== */

/* =====================================================================
   START CSS: Utilising the six capitals (value-creation-modal)
   ===================================================================== */
.six-cap-section { padding: 40px 0 20px; }
.six-cap-heading {
  font-size: 20px;
  line-height: 28px;
  color: #000000;
  font-family: roboto-bold;
  margin: 0 0 22px;
}
.six-cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.presence-list-item {
  display: flex;
  gap: 12px;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  padding: 16px 18px;
  background: #ffffff;
  transition: background-color .25s ease, border-color .25s ease;
}
.presence-list-item:hover {
  background: #e6f2fb;
  border-color: #b9ddf5;
}
.presence-list-num {
  flex-shrink: 0;
}
.sc-card {
  border: 1px solid #e3e6ea;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sc-head {
   font-size: 16px;
  line-height: 20px;
  color: #ffffff;
  font-family: roboto-bold;
  padding: 12px 16px;
  margin: 0;
}
.sc-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  padding: 16px;
  flex: 1;
  min-height: 120px;
}
.sc-stats { display: flex; flex-direction: column; gap: 12px; }
.sc-stat { display: flex; flex-direction: column; }
.sc-label {
  font-size: 13px;
  line-height: 18px;
  color: #000000;
  font-family: roboto-regular;
}
.sc-val {
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-bold;
}
.sc-unit {
  font-size: 14px;
  line-height: 18px;
  color: #000000;
  font-family: roboto-medium;
}
/* big single-metric variant */
.sc-stat--big .sc-val { font-size: 28px; line-height: 32px; }
.sc-unit--block { display: block; margin-top: 2px; }
.sc-note {
  display: block;
  font-size: 13px;
  line-height: 18px;
  color: #000000;
  font-family: roboto-regular;
  margin-top: 2px;
}
.sc-icon {
  width: 52px;
  height: 52px;
}

/* header colours per business */
.sc-orange  .sc-head { background: #F18903; }
.sc-teal    .sc-head { background: #00A99D; }
.sc-blue    .sc-head { background: #0095DA; }
.sc-green   .sc-head { background: #8CC63F; }
.sc-khaki   .sc-head { background: #B8923E; }
.sc-amber   .sc-head { background: #E0A030; }
.sc-slate   .sc-head { background: #74879A; }
.sc-copper  .sc-head { background: #EA7D00; }
/* =====================================================================
   END CSS: Utilising the six capitals (value-creation-modal)
   ===================================================================== */

/* =====================================================================
   START CSS: Outcomes Delivered accordions (value-creation-modal)
   ===================================================================== */
.oc-section { padding: 30px 0 20px; }
.oc-heading {
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-bold;
  background: #d1eefc;
  padding: 14px 20px;
  margin: 0 0 16px;
}
.oc-acc .accordion-item {
  border: none;
  border-bottom: 1px solid #d6deec;
  border-radius: 0;
  margin-bottom: 12px;
  background: transparent;
}
.oc-acc .accordion-header { margin: 0; }
.oc-acc .accordion-button {
  font-size: 18px;
  line-height: 24px;
  color: #0067AC;
  font-family: roboto-bold; 
  background: transparent;
  padding: 14px 20px;
  box-shadow: none;
  border-radius: 0;
}
.oc-acc .accordion-button:not(.collapsed) {
  color: #0067AC;
  background: transparent;
  box-shadow: none;
}
.oc-acc .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}
/* blue +/- indicator (matches the blue theme in the reference) */
.oc-acc .accordion-button::after {
  content: "+";
  background-image: none;
  width: 40px;
  height: 40px;
  background: #0067AC;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
  transform: none;
  flex-shrink: 0;
}
.oc-acc .accordion-button:not(.collapsed)::after {
  content: "\2212"; /* minus sign */
  background: #0067AC;
  transform: none;
}
.oc-acc .accordion-body {
  padding: 16px 20px;
  font-size: 16px;
  line-height: 26px;
  color: #000000;
}
/* =====================================================================
   END CSS: Outcomes Delivered accordions (value-creation-modal)
   ===================================================================== */

/* =====================================================================
   START CSS: Stakeholders legend (value-creation-modal)
   ===================================================================== */
.stk-legend-section { padding: 20px 0 30px; }
.stk-legend {
  list-style: none;
  margin: 0 0 16px;
  padding: 14px 24px;
  border: 1px solid #d9dde3;
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: 25px 20px;
}
.stk-legend:last-child { margin-bottom: 0; }
.stk-leg-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.stk-leg-text {
   font-size: 16px;
  line-height: 20px;
  color: #000000;
  font-family: roboto-medium;
}
.stk-leg-ic {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* =====================================================================
   END CSS: Stakeholders legend (value-creation-modal)
   ===================================================================== */

/* =====================================================================
   START CSS: Purpose-Driven Mining trend (opportunities)
   ===================================================================== */

   .it-content.itcontentpdbtm0section{
    padding-bottom: 0;
   }
.opp-trend { padding: 10px 0 40px; }
/* header row: T1 | title */
.opp-trend-head {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid #000000;
  padding-top: 16px;
}
/* vertical gradient accent bar on the left of the code */
.opp-trend-accent {
  width: 6px;
  height: 48px;
  flex-shrink: 0;
  border-left: 10px solid #00aeef;
}
.opp-trend-code {
  font-size: 32px;
  line-height: 1;
  color: #000000;
  font-family: roboto-light;
}
.opp-trend-sep {
  width: 1px;
  height: 28px;
  background: #cfd2d7;
  flex-shrink: 0;
}
.opp-trend-title {
  font-size: 20px;
  line-height: 22px;
  color: #000000;
  font-family: roboto-bold;
  margin: 0;
}
/* blue -> teal gradient bar (blue holds, teal at the right end) */
.opp-trend-bar {
  display: block;
  height: 7px;
  border-bottom: 10px solid #00aeef;
}
/* blue intro (ref: .it-intro family, image colour/size) */
.opp-trend-intro {
  font-size: 16px;
  line-height: 22px;
  color: #0067AC;
  font-family: roboto-medium;
  margin: 18px 0 0;
}
/* Vedanta response */
.opp-response {
  border-top: 1px solid #000000;
  margin-top: 26px;
}
/* light grey box wrapping the response */
.opp-response-inner {
  background: #f2f2f0;
  padding: 30px 35px;
}
.opp-response-title {
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-bold;
  margin: 0 0 18px;
}
.opp-response p {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 16px;
  text-align: left;
}
.opp-response p:last-child { margin-bottom: 0; }
.opp-response strong { font-family: roboto-bold; }
/* =====================================================================
   END CSS: Purpose-Driven Mining trend (opportunities)
   ===================================================================== */

/* =====================================================================
   START CSS: Strategic Priorities cards (strategic-priorities)
   ===================================================================== */
.sp-section { padding: 10px 0 70px; }
/* 3 cards per row, last 2 centered */
.sp-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}
.sp-card {
  flex: 0 0 calc(33.333% - 18px);
  max-width: calc(33.333% - 18px);
  background: #ffffff;
  border: 1px solid #e6e9ee;
  border-top: 3px solid #72BF44;
  border-radius: 10px;
  padding: 28px 26px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.sp-card:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
  transform: translateY(-4px);
}
/* compact green code badge */
.sp-code-box {
  width: 64px;
  height: 64px;
  border: 2px solid #cfe3b3;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.sp-code {
  font-size: 24px;
  line-height: 1;
  color: #0067AC;
  font-family: roboto-light;
}
.sp-title {
  font-size: 18px;
  line-height: 24px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 12px;
}
.sp-text {
  font-size: 16px;
  line-height: 24px;
  color: #5a6b7d;
  font-family: roboto-regular;
  margin: 0;
}
/* =====================================================================
   END CSS: Strategic Priorities cards (strategic-priorities)
   ===================================================================== */

/* =====================================================================
   START CSS: Strategic Priority detail S1 (strategic-priorities)
   ===================================================================== */
.spd-section { 
  padding: 10px 0 40px; 
  margin-top: 20px;
  /* margin-top: 40px; */
}
.spd-card {
  position: relative;
  border-top: 1px solid #d3d6db;
}
/* header: white box overlapping on top of the teal banner */
.spd-head {
  position: absolute;
  top: -40px;
  left: 30px;
  width: 95%;
  z-index: 2;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 24px 16px 16px;
  border-top: 1px solid #000000;
  box-shadow: 0px 20px 15px 10px rgba(0, 0, 0, 0.1);
}
.spd-code {
  font-size: 42px;
  line-height: 1;
  color: #7FA8D4;
  flex-shrink: 0;
  font-family: roboto-light;
}
.spd-sep {
  width: 1px;
  height: 34px;
  background: #cfd2d7;
  flex-shrink: 0;
}
.spd-title {
  font-size: 18px;
  line-height: 24px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0;
}
/* teal banner (header overlaps its top-left) */
.spd-banner {
  position: relative;
  z-index: 1;
  background-color: #008c84;
  padding: 60px 24px 20px;
}
.spd-banner p {
  font-size: 16px;
  line-height: 23px;
  color: #ffffff;
  margin: 0;
}
/* body: updates + 3-column list */

/* FY 2025-26 block sits in a tinted box; Objectives / KPIs stay outside it */
.spd-fybox {
  background-color: #eff8f6;
  padding: 22px 24px;
  border-bottom: 1px solid #000000;
}
.spd-updates-title {
  font-size: 16px;
  line-height: 22px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 16px;
}
.spd-list {
  list-style: none;
  margin: 0;
  padding: 0;
  column-count: 3;
  column-gap: 40px;
}
.spd-list li {
  break-inside: avoid;
  position: relative;
  padding-left: 18px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 21px;
  color: #000000;
  font-family: roboto-regular;
}
.spd-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  background: #000000;
  border-radius: 2px;
}
.spd-list strong {
  color: #000000;
  font-family: roboto-bold;
}

/* ---- ESG Pillars (3 columns) ---- */
.esg-pillars {
  
  padding: 22px 24px;
  border-bottom: 1px solid #000000;
}
.esg-pillars-head {
  font-size: 16px;
  line-height: 20px;
  color: #0067AC;
  font-family: roboto-bold;
  min-width: 22px;
  margin: 0 0 16px;
}
.presence-list-body {
  font-size: 14px;
  line-height: 19px;
  color: #1a1a1a;
  font-family: roboto-regular;
}
.presence-list-body strong {
  display: block;
  font-family: roboto-bold;
  color: #1a1a1a;
  margin-bottom: 3px;
}

/* Global (world map) — smaller, centered */
.presence-section-global .presence-map-wrap {
  max-width: 760px;
  margin: 0 auto 40px;
}

/* Footnote */
.presence-note {
  font-size: 13px;
  line-height: 18px;
  font-style: italic;
  color: #4e5055;
  font-family: roboto-regular;
  margin: 28px 0 0;
}

/* ---------- Capability highlights ---------- */
.presence-capability-section {
  padding: 20px 0 50px;
}

/* Titles row above the boxes, with a line on top */
.presence-capability-heads {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  border-top: 1px solid #939598;
  padding-top: 18px;
}
.presence-capability-title {
  font-size: 18px;
  line-height: 24px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 0;
  padding: 0 24px;
}
/* Per-card title: shown only on mobile (see responsive.css); hidden on desktop */
.presence-capability-title-inline {
  display: none;
  padding: 0;
  margin: 0 0 12px;
}

/* Boxes row */
.presence-capability-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 14px;
}
.presence-capability-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 30px;
}
.presence-capability-card-aluminium { background: #d7e7c8; }
.presence-capability-card-oil       { background: #cfe6ef; }
.presence-capability-card-iron      { background: #ddd2c4; }
.presence-capability-card-zinc      { background: #f6dcc0; }
.presence-capability-text {
   font-size: 16px;
  line-height: 21px;
  color: #1a1a1a;
  font-family: roboto-regular;
  min-height: 130px;
  margin: 0 0 18px;
}
.presence-capability-label {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin-bottom: 8px;
}
.presence-capability-value {
  font-size: 26px;
  line-height: 32px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 0;
}
.presence-capability-cur { font-size: 24px; }
.presence-capability-unit {
  font-size: 16px;
  font-family: roboto-bold;
}
.presence-capability-sub {
  font-size: 14px;
  line-height: 18px;
  color: #4e5055;
  font-family: roboto-regular;
  margin: 2px 0 14px;
}
.presence-capability-sub:last-child { margin-bottom: 0; }

/* =========================================================
   Asset Overview — business segment blocks
   ========================================================= */
.segment {
  padding: 40px 0;
  position: relative;
  overflow: hidden;
  margin-top: 40px;
  
}
/* Tinted backgrounds per segment */
.segment-zinc      { background: linear-gradient(180deg, #fdf3e8 0%, #fbe9d6 100%); }
.segment-aluminium { background: linear-gradient(180deg, #eef5e8 0%, #e3eed8 100%); }
.segment-power     { background: linear-gradient(180deg, #e9f4fb 0%, #d9ecf8 100%); }
.segment-oil       { background: linear-gradient(180deg, #eef5ef 0%, #e1efe6 100%); }
.segment-iron      { background: linear-gradient(180deg, #f5f1ee 0%, #ece4dd 100%); }
.segment-steel     { background: linear-gradient(180deg, #f1f2f4 0%, #e4e7ea 100%); }
.segment-facor     { background: linear-gradient(180deg, #f0f1ee 0%, #e6e8e2 100%); }
.segment-copper    { background: linear-gradient(180deg, #fbf3e9 0%, #f6e6d3 100%); }

/* Row: content + media side by side. Fixed columns — no hover resize.
   The 50px gap sits only between the two columns (the content side).
   min-height fixes every card (and its full-height image) to the same height,
   sized to the tallest card's content so nothing is clipped. */
.segment-row {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 50px;
  align-items: stretch;
  min-height: 580px;
}
.segment-reverse .segment-row {
  grid-template-columns: 420px 1fr;
}

/* Media (photo) — full height of the row (matches content, no top/bottom gap)
   and bled out to the page edge on its outer side (no gap there).
   --edge = distance from the centered container edge to the viewport edge,
   recomputed per Bootstrap breakpoint below. */
.segment-media {
  --edge: 0px;
  position: relative;
  overflow: hidden;
  align-self: stretch;          /* fill the full row height — no top/bottom gap */
  margin-right: calc(-1 * var(--edge));   /* bleed to the right page edge */
  border-radius: 8px 0 0 8px;             /* round only the inner (content) corners */
  transition: opacity .7s ease, transform .7s ease;
}
/* Reverse layout: image on the left, bleed to the left page edge */
.segment-reverse .segment-media {
  margin-right: 0;
  margin-left: calc(-1 * var(--edge));
  border-radius: 0 8px 8px 0;             /* round only the inner (content) corners */
}
/* Per-breakpoint edge size = (viewport - container max-width)/2 + container side padding.
   Container side padding is 0.75rem (12px). */
@media (min-width: 576px)  { .segment-media { --edge: calc((100vw - 540px)  / 2 + 12px); } }
@media (min-width: 768px)  { .segment-media { --edge: calc((100vw - 720px)  / 2 + 12px); } }
@media (min-width: 992px)  { .segment-media { --edge: calc((100vw - 960px)  / 2 + 12px); } }
@media (min-width: 1200px) { .segment-media { --edge: calc((100vw - 1140px) / 2 + 12px); } }
@media (min-width: 1400px) { .segment-media { --edge: calc((100vw - 1320px) / 2 + 12px); } }
.segment-media img {
  position: absolute;           /* fill the media box exactly, top to bottom */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Scroll-reveal: images start offset to their side, then settle into place */
.segment .segment-media {
  opacity: 0;
  transform: translateX(60px);
}
.segment-reverse .segment-media {
  transform: translateX(-60px);
}
.segment.in-view .segment-media {
  opacity: 1;
  transform: translateX(0);
}

/* Content */
.segment-content {
  min-width: 0;
}
.segment-title {
  font-size: 24px;
  line-height: 34px;
  font-family: roboto-bold;
  margin: 0 0 24px;
}
.segment-zinc      .segment-title { color: #f29200; }
.segment-aluminium .segment-title { color: #7cbf45; }
.segment-power     .segment-title { color: #29ABE2; }
.segment-oil       .segment-title { color: #00a89c; }
.segment-iron      .segment-title { color: #a98a6a; }
.segment-steel     .segment-title { color: #8a9aa3; }
.segment-facor     .segment-title { color: #9a9c92; }
.segment-copper    .segment-title { color: #d99323; }

/* Muted accent blurb under Business (Iron Ore / Copper) */
.segment-blurb {
   font-size: 16px;
  line-height: 21px;
  color: #a98a6a;
  font-family: roboto-bold;
  margin: 6px 0 0;
}
.segment-blurb-copper { color: #d99323; }

/* Inner two-column content grid */
.segment-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 40px;
}
.segment-col { min-width: 0; }

.segment-subhead {
   font-size: 18px;
  line-height: 23px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 22px 0 6px;
}
.segment-subhead:first-child { margin-top: 0; }
.segment-subhead-blue { color: #0067AC; }
.segment-text {
   font-size: 16px;
  line-height: 21px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0 0 10px;
}

/* Market-share stats */
.segment-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 40px;
  margin: 18px 0 6px;
}
.segment-stat { min-width: 0; }
.segment-stat-val {
  font-size: 34px;
  line-height: 38px;
  font-family: roboto-bold;
  margin: 0 0 4px;
}
.segment-stat-unit { font-size: 18px; }
.segment-zinc      .segment-stat-val { color: #f29200; }
.segment-aluminium .segment-stat-val { color: #7cbf45; }
.segment-power     .segment-stat-val { color: #29ABE2; }
.segment-oil       .segment-stat-val { color: #00a89c; }
.segment-iron      .segment-stat-val { color: #a98a6a; }
.segment-steel     .segment-stat-val { color: #8a9aa3; }
.segment-facor     .segment-stat-val { color: #9a9c92; }
.segment-copper    .segment-stat-val { color: #d99323; }
.segment-stat-label {
  font-size: 14px;
  line-height: 18px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0;
}

/* Asset-highlight bullets */
.segment-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}
.segment-list li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  line-height: 21px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin-bottom: 10px;
}
.segment-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  background: #000000;
}
.esg-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.esg-pillar-title {
  font-size: 16px;
  line-height: 21px;
  font-family: roboto-bold;
  margin: 0 0 12px;
}
.esg-pillar-title.esg-blue { color: #0067AC; }
.esg-pillar-title.esg-green { color: #72BF44; }
.esg-pillar-title.esg-dark { color: #000000; }
.esg-aims {
  list-style: none;
  margin: 0;
  padding: 0;
}
.esg-aims li {
  font-size: 14px;
  line-height: 20px;
  color: #000000;
  font-family: roboto-regular;
  margin-bottom: 14px;
}
.esg-aims li:last-child { margin-bottom: 0; }
.esg-aims strong { font-family: roboto-bold; }
/* Planet pillar: only the "Aim 4/5/6:" labels are green */
.esg-aims-green strong { color: #72BF44; }

/* ---- Objectives / KPIs blocks (blue head + 3-col green-bullet list) ---- */
.spd-block {
  padding: 22px 24px;
  border-bottom: 1px solid #000000;
}
.spd-block-title {
  font-size: 16px;
  line-height: 22px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 16px;
}
.gb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  column-count: 3;
  column-gap: 40px;
}
.gb-list li {
  break-inside: avoid;
  position: relative;
  padding-left: 18px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 21px;
  color: #000000;
  font-family: roboto-regular;
}
.gb-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  background: #000000;
}
.gb-list strong { color: #000000; font-family: roboto-regular; font-weight: normal; }
/* KPIs that should stack in a single (left) column like the report */
.gb-list.gb-3col { column-count: 1; max-width: calc(33.333% - 27px); }

/* ---- Impact row: capitals / SDGs / material matters / risks ---- */
.spd-impact {
  margin-top: 28px;
  background: #eaf2fb;
  padding: 22px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px 50px;
}
.spd-impact-title {
  font-size: 16px;
  line-height: 20px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 16px;
}
/* TEMP placeholder boxes for capital / SDG icons (remove once real icons added) */
.spd-impact-icons { display: flex; flex-wrap: wrap; gap: 12px; max-width: 156px; }
.spd-impact-sdgs { display: grid; grid-template-columns: repeat(3, 44px); gap: 8px; }
.ii-box {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c9ced6;
  background: #ffffff;
  border-radius: 4px;
}
.ii-box img { width: 44px; height: 44px; object-fit: contain; display: none; }
.strategic-priorities-page .spd-impact-icons,
.strategic-priorities-page .spd-impact-sdgs {
  display: block;
  max-width: 310px;
}
.spd-photo{
  margin-top: 30px;
}
/* .strategic-priorities-page .spd-impact-icons img,
.strategic-priorities-page .spd-impact-sdgs img {
  display: block;
  width: 100%;
  height: auto;
} */
.strategic-priorities-page .ii-box {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  border-radius: 0;
}
.strategic-priorities-page .ii-box img {
  display: block;
  width: 100%;
  height: auto;
}
/* material matters (green) and risk (blue) labelled tiles */
.mm-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 44px);
  gap: 8px;
}
.risk-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mm-tiles li,
.risk-tiles li {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  color: #ffffff;
  font-family: roboto-bold;
}
.mm-tiles li { background: #72BF44; }
.risk-tiles li { width: 44px; background: #0067AC; }

/* "Related risks" descriptive notes (S3) */
.risk-notes {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.risk-notes li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 21px;
  color: #000000;
  font-family: roboto-regular;
}
.risk-notes li:last-child { margin-bottom: 0; }
.risk-notes li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #000000;
}

/* ---- S2: multi-column business-unit content ---- */
.spd-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 40px;
}
.spd-sub {
  font-size: 16px;
  line-height: 20px;
  color: #ED8B00;
  font-family: roboto-bold;
  margin: 0 0 10px;
}
.spd-col > .spd-sub:not(:first-child) { margin-top: 18px; }
/* per-business sub-heading colours */
.spd-sub.c-zinc     { color: #F18903; }  /* Hindustan Zinc / Zinc India */
.spd-sub.c-iron     { color: #B8923E; }  /* Iron ore */
.spd-sub.c-alu      { color: #72BF44; }  /* Aluminium */
.spd-sub.c-oil      { color: #00A99D; }  /* Oil and Gas */
.spd-sub.c-facor    { color: #74879A; }  /* FACOR */
.spd-sub.c-zint     { color: #F18903; }  /* Zinc International (same as Hindustan Zinc) */
.spd-sub.c-power    { color: #0095DA; }  /* Power */
.spd-sub.c-critical { color: #000000; }  /* Critical minerals */
/* spacing above the secondary headings (Objectives / KPIs) */
.spd-blist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.spd-blist li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 19px;
  color: #000000;
  font-family: roboto-regular;
}
.spd-blist li:last-child { margin-bottom: 0; }
.spd-blist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  background: #000000;
}
/* =====================================================================
   END CSS: Strategic Priority detail S1 (strategic-priorities)
   ===================================================================== */

/* =====================================================================
   START CSS: Risk frameworks (risk-management)
   ===================================================================== */
.rm-frameworks .row { align-items: flex-start; }
.rm-fw { height: 100%; }
.rm-fw-title {
  font-size: 18px;
  line-height: 24px;
  color: #0067AC;
  font-family: roboto-bold;
  text-align: center;
  margin: 0 0 24px;
}
.rm-fw-title--center { margin-bottom: 30px; }

/* ---- Diagram 1: vertical governance flow ---- */
.rm-gov {
  border: 2px solid #0067AC;
  border-radius: 4px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rm-gov-node { width: 100%; text-align: center; }
.rm-gov-node span {
  display: inline-block;
  min-width: 190px;
  max-width: 230px;
  padding: 0 6px 8px;
  border-bottom: 1px solid #000000;
  font-size: 16px;
  line-height: 19px;
  color: #000000;
  font-family: roboto-bold;
}
.rm-gov-node sup { font-size: 9px; }
.rm-gov-pair {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 28px;
}
.rm-gov-pair .rm-gov-node { width: auto; }
.rm-gov-pair .rm-gov-node span { min-width: 110px; }
/* green down chevron */
.rm-gov-arrow {
  display: block;
  width: 12px;
  height: 12px;
  margin: 14px auto;
  border-right: 3px solid #72BF44;
  border-bottom: 3px solid #72BF44;
  transform: rotate(45deg);
}
.rm-fw-note {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 16px;
  color: #000000;
  font-family: roboto-regular;
  font-style: italic;
}

/* ---- Diagram 2: PDCA-style cycle ---- */
.rm-cycle {
  position: relative;
  width: 340px;
  height: 320px;
  max-width: 100%;
  margin: 0 auto;
}
.rm-cycle-loop {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  border: 6px solid #0067AC;
  border-radius: 14px;
}
.rm-cycle-box {
  position: absolute;
  width: 124px;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border: 1px solid #c9ced6;
  text-align: center;
  padding: 9px 6px;
}
.rm-cycle-box--top    { left: 170px; top: 60px; }
.rm-cycle-box--bottom { left: 170px; top: 260px; }
.rm-cycle-box--left   { left: 70px;  top: 160px; }
.rm-cycle-box--right  { left: 270px; top: 160px; }
.rm-cycle-label {
  display: block;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .4px;
  color: #72BF44;
  font-family: roboto-bold;
}
.rm-cycle-val {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-top: 1px dashed #b3b3b3;
  border-bottom: 1px solid #b3b3b3;
  font-size: 16px;
  line-height: 1;
  color: #000000;
  font-family: roboto-bold;
}
/* =====================================================================
   END CSS: Risk frameworks (risk-management)
   ===================================================================== */

/* =====================================================================
   START CSS: Enterprise Risk Management (risk-management)
   ===================================================================== */
   .rm-frameworks,.rm-erm,.rm-process{
    padding: 0 0 40px;
   }
.rm-erm-title {
  font-size: 18px;
  line-height: 24px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 14px;
}
.rm-erm-text {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 36px;
}
.rm-heat-title {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-bold;
  margin: 0 0 18px;
}
.rm-heat-img { margin: 0 0 22px; }
.rm-heat-img img { width: 100%; height: auto; display: block; }
.rm-heat-caption {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-bold;
  margin: 0 0 12px;
}
.rm-changes-title {
  font-size: 16px;
  line-height: 24px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 12px;
}
.rm-changes-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rm-change;
}
.rm-changes-list li {
  counter-increment: rm-change;
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 23px;
  color: #000000;
  font-family: roboto-regular;
}
.rm-changes-list li:last-child { margin-bottom: 0; }
.rm-changes-list li::before {
  content: counter(rm-change) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: #000000;
  font-family: roboto-bold;
}
/* =====================================================================
   END CSS: Enterprise Risk Management (risk-management)
   ===================================================================== */

/* =====================================================================
   START CSS: Risk management process (risk-management)
   ===================================================================== */
/* content sits as plain tags inside the col-12; everything is styled from
   the parent .rm-process class via descendant selectors (no flex / no grid) */
.rm-process h3 {
  font-size: 16px;
  line-height: 21px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 26px 0 10px;
}
.rm-process h3:first-child { margin-top: 0; }
.rm-process h4 {
  font-size: 16px;
  line-height: 20px;
  color: #000000;
  font-family: roboto-bold;
  margin: 20px 0 8px;
}
.rm-process p {
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 10px;
}
.rm-process ul {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.rm-process ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 21px;
  color: #000000;
  font-family: roboto-regular;
}
.rm-process ul li:last-child { margin-bottom: 0; }
.rm-process ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  background: #000000;
}
.es-list--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }

/* Board composition */
.es-board {
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 44px;
}
.es-board-bar {
  background: #0067AC;
  color: #ffffff;
  font-family: roboto-bold;
   font-size: 16px;
  text-align: center;
  padding: 12px;
}
.es-board-role {
  padding: 24px 30px;
  border-bottom: 1px solid #eee;
  text-align: center;
}
.es-board-role:last-child { border-bottom: 0; text-align: left; }
.es-board-role-label {
  display: inline-block;
  background: #72BF44;
  color: #ffffff;
  font-family: roboto-bold;
  font-size: 13px;
  padding: 5px 16px;
  margin-bottom: 14px;
}
.es-board-role h4 { font-size: 16px; line-height: 22px; font-family: roboto-bold; color: #000000; }
.es-board-role p { font-size: 14px; line-height: 19px; color: #4e5055; }
.es-board-members { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 50px; }

/* Issues that mattered to the Board — blue panel */
.es-issues {
  background: #0067AC;
  padding: 30px 36px 34px;
  margin-top: 14px;
}
.es-issues-title {
  color: #ffffff;
  font-family: roboto-bold;
   font-size: 18px;
  line-height: 24px;
  margin: 0;
  padding-bottom: 24px;
}
.es-issue-row {
  display: flex;
  gap: 36px;
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,0.28);
}
.es-issue-row:last-child { padding-bottom: 4px; }

/* left category card */
.es-issue-side {
  flex: 0 0 140px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #8ed8f8;
  border-radius: 10px;
  padding: 22px 14px 18px;
}
.es-issue-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.es-issue-icon img { width: 40px; height: 40px; object-fit: contain; }
.es-issue-label {
  color: #0d3b66;
  font-family: roboto-bold;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 14px;
}

/* right body: two topic columns */
.es-issue-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 44px;
  align-content: start;
}
.es-issue-topic {
  color: #8ed8f8;
  font-family: roboto-bold;
  font-size: 16px;
  line-height: 20px;
  margin: 0 0 10px;
}
.es-issue-col .es-list { margin-bottom: 20px; }
.es-issue-col .es-list:last-child { margin-bottom: 0; }
.es-issue-col .es-list li { color: #8ed8f8; font-size: 14px; line-height: 18px; }
.es-issue-col .es-list li::before { background: #ffff; top: 6px; }

/* Blue bar + centred notes */
.es-bar {
  background: #0067AC;
  color: #ffffff;
  font-family: roboto-bold;
  font-size: 16px;
  line-height: 22px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 14px 20px;
  border-radius: 4px;
  margin-top: 36px;
}
.es-center-note { text-align: center; font-size: 13px; line-height: 18px; color: #4e5055; margin: 14px 0 26px; }

/* Three-level architecture */
.es-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.es-level { border-top: 3px solid #0067AC; padding-top: 16px; }
.es-level-no { font-size: 14px; line-height: 18px; color: #4e5055; font-family: roboto-bold; }
.es-stat { font-size: 48px; line-height: 1; color: #0067AC; font-family: roboto-bold; margin: 8px 0; }
.es-level-title { font-size: 16px; line-height: 22px; font-family: roboto-bold; color: #0067AC; padding-bottom: 8px; }
.es-level p { font-size: 14px; line-height: 20px; color: #000000; }
.es-levels-note { font-size: 13px; line-height: 18px; color: #4e5055; background: #eef1f5; padding: 12px 16px; margin-top: 20px; text-align: center; }

/* ESG Governance diagram */
.es-gov { margin-top: 24px; }
.es-gov-tier { margin-bottom: 22px; }
.es-gov-tier-label {
  display: inline-block;
  background: #0067AC;
  color: #ffffff;
  font-family: roboto-bold;
  font-size: 14px;
  padding: 8px 18px;
  margin-bottom: 14px;
}
.es-gov-box {
  border: 1px solid #e2e2e2;
  border-left: 4px solid #0067AC;
  border-radius: 4px;
  padding: 18px 22px;
  margin-bottom: 14px;
}
.es-gov-box h4 { font-size: 16px; line-height: 22px; font-family: roboto-bold; color: #0067AC; padding-bottom: 6px; }
.es-gov-box p { font-size: 14px; line-height: 20px; color: #000000; }
.es-gov-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.es-gov-tags span { background: #eef1f5; color: #0067AC; font-size: 12px; font-family: roboto-medium; padding: 4px 12px; border-radius: 3px; }
.es-gov-foot { background: #eef1f5; text-align: center; font-family: roboto-bold; font-size: 14px; padding: 12px; }

/* --- ESG Strategy: scorecard tables --- */
.es-sc-group {
  font-size: 18px;
  line-height: 24px;
  font-style: italic;
  font-family: roboto-bold;
  color: #000000;
  margin: 36px 0 8px;
}
.es-sc-aim {
  font-size: 16px;
  line-height: 22px;
  font-family: roboto-bold;
  color: #0067AC;
  margin: 22px 0 10px;
}
.es-table-wrap { overflow-x: auto; margin-bottom: 40px; }
.es-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 940px;
}
.es-table th {
  background: #e7f2de;
  color: #000000;
  font-family: roboto-bold;
  font-size: 14px;
  line-height: 16px;
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border: 0;
  border-top: 2px solid #0067AC;
  border-bottom: 2px solid #c9d2db;
}
.es-table td {
  font-size: 14px;
  line-height: 18px;
  color: #000000;
  vertical-align: top;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid #e2e2e2;
}
.es-table td:first-child { font-family: roboto-bold; }
/* FY 2025-26 progress column (5th) in blue */
.es-table td:nth-child(5) { color: #000000; }
/* last row closes with a blue bottom border */
.es-table tbody tr:last-child td { border-bottom: 2px solid #0067AC; }
/* keep bottom space below the final scorecard table (overrides last-child margin reset) */
.es-section .container > .es-table-wrap:last-child { margin-bottom: 50px; }

/* ESG Strategy: board composition image */
.es-board-img { margin-bottom: 44px; max-width: 850px; margin-left:auto; margin-right:auto; }
.es-board-img img { width: 100%; height: auto; display: block; }

/* ESG Strategy: full diagram placeholders */
.esg-diagram {
 background: #F1FAFE ; 
  padding:0 50px 30px;
}
.es-link{
  color: #0067AC;
  cursor: pointer;
  text-decoration: underline;
  font-family: roboto-bold;
  font-size: 14px;
  line-height: 18px;

}
.es-diagram-img {
 
  margin: 24px auto 0px; 
  max-width: 820px;}
.es-diagram-img img { width: 100%; height: auto; display: block; }
.es-diagram-img--full { width: 100%; margin: 30px 0; max-width:100%; }

.hm-keysec .offset-xl-7 
{
  position: relative;
}
.strategic-pr h2 
{
  font-size: 24px;
}
.strategic-pr h2 span 
{
  display: block;
  font-size: 35px;
}
.vd-top-img
{
  display: none;
}

/* EBITDA */
.segment-ebitda-label {
   font-size: 16px;
  line-height: 20px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 8px;
}
.segment-ebitda-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}
.segment-ebitda-val {
  font-size: 26px;
  line-height: 30px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 0;
}
.segment-cur {  font-size: 18px; margin-right: 2px; }
.segment-ebitda-unit {  font-size: 16px; font-family: roboto-medium; }
.segment-ebitda-tag {
  display: block;
  font-size: 14px;
  line-height: 18px;
  color: #4e5055;
  font-family: roboto-regular;
}

.segment-divider {
  border: 0;
  border-top: 1px solid #b9b6b3;
  margin: 22px 0;
}

/* Production volume */
.segment-prod-group {
   font-size: 16px;
  line-height: 20px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 14px 0 8px;
}
.segment-prod-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 6px;
}
.segment-prod { min-width: 0; }
.segment-prod-val {
  font-size: 26px;
  line-height: 30px;
  font-family: roboto-bold;
  margin: 0 0 2px;
}
.segment-prod-unit {  font-size: 16px; }
.segment-zinc      .segment-prod-val { color: #f29200; }
.segment-aluminium .segment-prod-val { color: #7cbf45; }

/* =====================================================================
   START CSS: Segment Review (segment-review)
   ===================================================================== */
.alumininum-segement {
  padding: 60px 0px 40px;
}

.sr-alu-mark {
  width: 62px;
  margin-bottom: 14px;
}
.sr-alu-mark img {
  width: 100%;
  height: auto;
  display: block;
}
.sr-alu-title {
  font-size: 24px;
  line-height: 30px;
  color: #72bf44;
  font-family: roboto-bold;
  margin: 0 0 15px;
}
.sr-alu-subtitle {
  font-size: 18px;
  line-height: 24px;
  color: #0067ac;
  font-family: roboto-bold;
  margin: 0 0 8px;
}
.alumininum-segement p {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 18px;
}

.sr-alu-media {
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: 30px;
}
.sr-alu-media img {
  width: 100%;
  height: auto;
  display: block;
}
.sr-segment-block {
  padding: 0 0 40px;
}

.sr-sector-mark {
  width: 62px;
  margin-bottom: 14px;
}

.sr-sector-title {
  font-size: 24px;
  line-height: 30px;
  font-family: roboto-bold;
  margin: 0 0 15px;
}
.sr-sector--facor{
  padding-bottom: 40px;
}
.sr-sector--facor .sr-sector-title {
  color: #a99a74;
}
.sr-sector--oil{
  padding-bottom: 40px;
}
.sr-sector--oil .sr-sector-title {
  color: #00b6b1;
}
.sr-sector--power{
  padding-bottom: 40px;
}
.sr-sector--power .sr-sector-title {
  color: #19a8e8;
}
.sr-sector--zinc{
  padding-bottom: 40px;
}
.sr-sector--zinc .sr-sector-title {
  color: #f29a18;
}
.sr-sector--lead{
  padding-bottom: 40px;
}
.sr-sector--lead .sr-sector-title {
  color: #f29a18;
}
.sr-sector--silver{
  padding-bottom: 40px;
}
.sr-sector--silver .sr-sector-title {
  color: #f29a18;
}
.sr-sector--iron{
  padding-bottom: 40px;
}
.sr-sector--iron .sr-sector-title {
  color: #a98a6a;
}
.sr-sector--steel{
  padding-bottom: 0px;
}
.sr-sector--steel .sr-sector-title {
  color: #8a9aa3;
}
.sr-sector-subtitle {
  font-size: 18px;
  line-height: 24px;
  color: #0067ac;
  font-family: roboto-bold;
  margin: 0 0 8px;
}
.sr-segment-block p{
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 18px;
}
.sr-sector-list {
  margin: 0 0 18px;
  padding-left: 22px;
}
.sr-sector-list li {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 12px;
}
.sr-sector-list li:last-child {
  margin-bottom: 0;
}
.sr-sector-media{
  padding: 0px 0px 20px;
  margin: 0 auto;
  text-align: center;
}

/* =====================================================================
   END CSS: Segment Review (segment-review)
   ===================================================================== */
.segment-power     .segment-prod-val { color: #29ABE2; }
.segment-oil       .segment-prod-val { color: #00a89c; }
.segment-iron      .segment-prod-val { color: #a98a6a; }
.segment-steel     .segment-prod-val { color: #8a9aa3; }
.segment-facor     .segment-prod-val { color: #9a9c92; }
.segment-copper    .segment-prod-val { color: #d99323; }

/* EBITDA value matches each segment's number colour */
.segment-zinc      .segment-ebitda-val { color: #f29200; }
.segment-aluminium .segment-ebitda-val { color: #7cbf45; }
.segment-power     .segment-ebitda-val { color: #29ABE2; }
.segment-oil       .segment-ebitda-val { color: #00a89c; }
.segment-iron      .segment-ebitda-val { color: #a98a6a; }
.segment-steel     .segment-ebitda-val { color: #8a9aa3; }
.segment-facor     .segment-ebitda-val { color: #9a9c92; }
.segment-copper    .segment-ebitda-val { color: #d99323; }
.segment-prod-label {
  font-size: 14px;
  line-height: 18px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0;
}

/* =========================================================
   Investment Case — value timeline + asset base
   ========================================================= */

/* ---------- Delivering Sustainable Value (dark timeline) ---------- */
.ic-value {
  background: #0067AC;
  padding: 70px 0 80px;
}
.ic-value-heading {
  font-size: 24px;
  line-height: 32px;
  color: #ffffff;
  font-family: roboto-bold;
  text-transform: uppercase;
  text-align: center;
  max-width: 520px;
  margin: 0 auto 50px;
}

/* Center-line timeline */
.ic-timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}
.ic-timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, .45);
  transform: translateX(-50%);
}

/* Each point sits on one side of the line */
.ic-tl-item {
  position: relative;
  width: 50%;
  padding: 0 50px 60px;
  box-sizing: border-box;
  /* Scroll-in animation start state */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease, transform .7s ease;
}
.ic-tl-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ic-tl-left {
  margin-right: 50%;
  text-align: right;
}
.ic-tl-right {
  margin-left: 50%;
  text-align: left;
}
.ic-tl-text {
  font-size: 19px;
  line-height: 27px;
  color: #ffffff;
  font-family: roboto-regular;
  margin: 0 0 22px;
}

/* Green bar with a soft drop shadow */
.ic-tl-bar {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 8px;
  background: #72BF44;
  box-shadow: 0 12px 16px -4px rgba(0, 0, 0, .35);
}
.ic-tl-left .ic-tl-bar { margin-left: auto; }

/* ---------- Asset base ---------- */
.ic-asset {
  padding: 0px 0 50px;
}

.ic-asset-banner {
  position: relative;
  font-size: 20px;
  line-height: 28px;
  color: #0067AC;
  font-family: roboto-bold;
  background: #ffffff;
  padding: 15px 20px;
  margin: 18px 0 44px;
  /* solid grey shadow angled toward the bottom-left */
  box-shadow: -10px 10px 0 0 #e3e3e3;
}
/* Thin horizontal line above the box */
.ic-asset-banner::before {
  content: "";
  position: absolute;
  left: 0;
  top: -8px;
  width: 100%;
  height: 1px;
  background: #cccccc;
}

/* FY risk-trend legend (icons replaced with real arrows later) */
.rm-trend-item { 
  margin-bottom: 12px; 
max-width: 260px;
border-bottom: 1px solid #000000;
padding-bottom: 10px;
}
.rm-trend-item:last-child { margin-bottom: 0; }
.rm-trend-item img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 12px;
}
.rm-trend-item span {
  vertical-align: middle;
  font-size: 16px;
  line-height: 20px;
  color: #000000;
  font-family: roboto-medium;
}
/* =====================================================================
   END CSS: Risk management process (risk-management)
   ===================================================================== */

/* =====================================================================
   START CSS: Managing our risks (risk-management)
   ===================================================================== */
.rm-risks { padding: 0 0 40px; }
.rm-risks-title {
  font-size: 18px;
  line-height: 26px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 12px;
}
.rm-risks-intro {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 28px;
}

/* ---- risk card ---- */
.risk-card {
  position: relative;
  margin: 30px 0 20px;
}
.risk-card:last-child { margin-bottom: 0; }

/* top (white) row */
.risk-card-head {
  position: absolute;
  top: -20px;
  right: 0;
  z-index: 2;
  height: 60px;
  width: 95%;
  padding-left: 120px;
  display: flex;
  align-items: center;
  background: #ffffff;
  border-top: 1px solid #000000;
  box-shadow: 0px 20px 15px 10px rgba(0, 0, 0, 0.1);
}
.risk-tag {
  position: absolute;
  left: 0;
    top: -8px;
    z-index: 3;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 10px 10px;
    color: #ffffff;
    font-size: 16px;
    line-height: 20px;
    /* letter-spacing: .4px; */
    text-transform: uppercase;
    font-family: roboto-bold;
}
.risk-tag--sustainability { background: #72BF44; }
.risk-tag--strategic      { background: #0067AC; }
.risk-tag--operational    { background: #ED8B00; }
.risk-tag--financial      { background: #74879A; }
.risk-code {
  flex-shrink: 0;
  padding: 0 18px 0 22px;
  font-size: 40px;
  line-height: 1;
  color: #0067AC;
  font-family: roboto-light;
}
.risk-divider {
  flex-shrink: 0;
  width: 1px;
  height: 40px;
  background: #cfd6e0;
}
.risk-name {
  padding: 0 20px;
  margin: 0;
  font-size: 18px;
  line-height: 22px;
  color: #0067AC;
  font-family: roboto-bold;
}
.risk-trend {
  margin-left: 14px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
}
.risk-trend img { width: 26px; height: 18px; object-fit: contain; }

/* bottom (blue) row */
.risk-card-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px 64px;
  background: #0067AC;
  padding: 80px 70px 14px;
}
.risk-meta {
  display: flex;
  align-items: center;
  gap: 18px;
}
.risk-meta-label {
  color: #ffffff;
  font-size: 16px;
  line-height: 18px;
  font-family: roboto-medium;
}
.risk-caps {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.risk-caps img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  /* render coloured capital icons white, then thicken strokes with stacked shadows */
  filter:
    brightness(0) invert(1)
    drop-shadow(0.5px 0 0 #ffffff)
    drop-shadow(-0.5px 0 0 #ffffff)
    drop-shadow(0 0.5px 0 #ffffff)
    drop-shadow(0 -0.5px 0 #ffffff);
}
.risk-strats {
  color: #ffffff;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 1px;
  font-family: roboto-bold;
}
/* =====================================================================
   END CSS: Managing our risks (risk-management)
   ===================================================================== */

/* =====================================================================
   START CSS: Risk detail (impact / mitigation) (risk-management)
   ===================================================================== */
.risk-detail { margin-top: 26px; }
/* black headings (Potential impact / Mitigating actions) */
.risk-detail h5 {
  font-size: 16px;
  line-height: 20px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 22px 0 8px;
}
.risk-detail h5:first-child { margin-top: 0; }
/* blue headings / sub-headings (Prioritising HSE / Sustainability / Climate) */
.risk-detail h6 {
  font-size: 16px;
  line-height: 20px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 22px 0 8px;
}
.risk-detail h6:first-child { margin-top: 0; }
.risk-detail h5 + h6 { margin-top: 0; }
.risk-detail p {
  font-size: 16px;
  line-height: 21px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 16px;
}
.risk-detail ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.risk-detail ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 9px;
  font-size: 16px;
  line-height: 20px;
  color: #000000;
  font-family: roboto-regular;
}
.risk-detail ul li:last-child { margin-bottom: 0; }
.risk-detail ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  background: #000000;
}
/* =====================================================================
   END CSS: Risk detail (impact / mitigation) (risk-management)
   ===================================================================== */

/* =====================================================================
   START CSS: Risk card head padding variants (risk-management)
   R1 keeps the base .risk-card-head padding-left (sustainability badge).
   ===================================================================== */
/* no category badge -> code sits at the far left, full-width head */
.risk-card--no-tag .risk-card-head { padding-left: 0; }
/* shorter badges -> less left padding to clear them */
.risk-card--tag-comp .risk-card-head { padding-left: 95px; }
.risk-card--tag-fin  .risk-card-head { padding-left: 88px; }
/* =====================================================================
   END CSS: Risk card head padding variants (risk-management)
   ===================================================================== */

/* =====================================================================
   START CSS: Board of Directors (board-of-directors)
   ===================================================================== */
.bod-section { padding: 40px 0 40px; }
.bod-section .row { row-gap: 34px; }
.bod-card {
  cursor: pointer;
  height: 100%;
  box-shadow: 0px 3px 6px #00000029;
}
.bod-photo {
  position: relative;
  overflow: hidden;
}
.bod-photo img {
  width: 100%;
  display: block;
  /* aspect-ratio: 1 / 1.2; */
  object-fit: cover;
}
.bod-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 103, 172, 0);
  transition: background .25s ease;
}
.bod-info { padding: 16px; }
.bod-name {
  font-size: 18px;
  line-height: 21px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 4px;
}
.bod-role {
  font-size: 16px;
  line-height: 18px;
  color: #000000;
  font-family: roboto-medium;
  margin: 0 0 12px;
  min-height: 36px;
}
/* committee membership numbers on a connecting line */
.bod-committee {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  margin: 0 0 14px;
}
.bod-committee::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 1px;
  background: #b9b6b3;
}
.ic-asset-intro {
  font-size: 16px;
  line-height: 24px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0 0 16px;
}
.ic-asset-points {
  list-style: none;
  padding: 0;
}
.ic-asset-points li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 23px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin-bottom: 18px;
}
.ic-asset-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  background: #6d6e71;
}
.ic-asset-base-title {
  font-size: 18px;
  line-height: 24px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 0 0 26px;
}

/* One commodity group */
.ic-asset-group {
  margin-bottom: 34px;
}
.ic-asset-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.ic-asset-icon {
  flex-shrink: 0;
  line-height: 0;
}
.ic-asset-icon img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}
.ic-asset-tag {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 22px;
  color: #ffffff;
  font-family: roboto-bold;
  padding: 6px 16px;
}
.ic-tag-aluminium { background: #7cbf45; }
.ic-tag-zinc      { background: #f4a01c; }
.ic-tag-iron      { background: #a08160; }
.ic-tag-power     { background: #29ABE2; }
.ic-tag-oil       { background: #00a89c; }
.ic-tag-copper    { background: #f4a01c; }

/* =====================================================================
   START CSS: Finance Review (finance-review)
   ===================================================================== */
.fr-topsection {
  padding: 60px 0px 40px;
}

.fr-title {
  font-size: 18px;
  line-height: 26px;
  color: #0067ac;
  font-family: roboto-bold;
  margin: 0 0 10px;
}
.fr-block-title {
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  font-family: roboto-bold;
  margin: 0 0 10px;
}
.fr-topsection p {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 18px;
}
.fr-inline-head {
  color: #0067ac;
  font-family: roboto-bold;
}
.fr-topsection p.fr-note {
  font-size: 14px;
  line-height: 20px;
  color: #000000;
  font-family: roboto-light;
  font-style: italic;
}
.fr-visual-card {
  margin-bottom: 26px;
}

.fr-visual-note {
  font-size: 14px;
  line-height: 21px;
  color: #000000;
  margin-bottom: 12px;
  font-family: roboto-regular;
}
.fr-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.fr-table-wrap--small {
  max-width: 100%;
}
.fr-data-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border-bottom: 2px solid #7fa4bf;
}
.fr-data-table th,
.fr-data-table td {
  padding: 8px 12px;
  font-size: 16px;
  line-height: 18px;
  border: 1px solid #cbd4dd;
}
.fr-data-table th {
  font-family: roboto-bold;
  color: #000000;
  background: #e7f2de;
  text-align: center;
  vertical-align: middle;
}
.fr-data-table td {
  font-family: roboto-regular;
  color: #1a1a1a;
  vertical-align: middle;
  background: #ffffff;
}
.fr-data-table td:first-child {
  text-align: left;
}
.fr-data-table td:not(:first-child) {
  text-align: right;
}
.fr-data-table--ebitda th:first-child {
  text-align: left;
}
.fr-data-table--ebitda th:nth-child(2) {
  background: #0f6faf;
  color: #ffffff;
}
.fr-data-table--ebitda tbody td:first-child { background: #ffffff; }
.fr-data-table--ebitda tbody td:nth-child(2) { background: #e7f2de; }
.fr-data-table--ebitda tbody td:nth-child(3),
.fr-data-table--ebitda tbody td:nth-child(4) { background: #ffffff; }
.fr-subrow {
  padding-left: 26px !important;
}
.fr-total-row td {
  font-family: roboto-bold;
  background: #ffffff !important;
  border-top: 2px solid #0f6faf;
  border-bottom: 2px solid #0f6faf;
}
.fr-bridge-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 10px;
}
.fr-bridge-unit {
  font-size: 14px;
  line-height: 18px;
  color: #000000;
  font-family: roboto-regular;
}
.fr-data-table--bridge td {
  border-left: 0;
  border-right: 0;
  padding: 7px 0;
}
.fr-data-table--bridge tr:first-child td {
  border-top: 2px solid #0f6faf;
}
.fr-data-table--bridge tr:last-child td {
  border-bottom: 2px solid #0f6faf;
}
.fr-data-table--bridge td:first-child {
  text-align: left;
}
.fr-data-table--bridge td:last-child {
  width: 120px;
  text-align: right;
}
.fr-bridge-group td {
  font-family: roboto-bold;
  color: #000000;
  padding-top: 10px;
}
.fr-bridge-total td {
  font-family: roboto-bold;
  color: #000000;
}
.fr-data-table--fx th:first-child {
  text-align: left;
  background: #e7f2de;
}
.fr-data-table--fx th:nth-child(2),
.fr-data-table--fx th:nth-child(5) {
  background: #0f6faf;
  color: #ffffff;
}
.fr-data-table--fx td:first-child {
  background: #ffffff;
  font-family: roboto-medium;
}
.fr-data-table--fx td:nth-child(2),
.fr-data-table--fx td:nth-child(5) {
  background: #e7f2de;
}
.fr-data-table--fx td:nth-child(3),
.fr-data-table--fx td:nth-child(4),
.fr-data-table--fx td:nth-child(6) {
  background: #ffffff;
}
.fr-data-table--statement th:first-child {
  text-align: left;
}
.fr-data-table--statement th:nth-child(2) {
  background: #0f6faf;
  color: #ffffff;
}
.fr-data-table--statement tbody td:first-child {
  background: #ffffff;
}
.fr-data-table--statement tbody td:nth-child(2) {
  background: #e7f2de;
}
.fr-detail-block--statement {
  margin-top: 30px;
}
.fr-detail-block--statement-old {
  display: none;
}
.fr-footnotes {
  margin: 18px 0 0;
  padding-left: 22px;
}
.fr-footnotes li {
  font-size: 14px;
  line-height: 20px;
  color: #000000;
  font-family: roboto-light;
  font-style: italic;
  margin: 0 0 8px;
}
.fr-footnotes li:last-child {
  margin-bottom: 0;
}
.fr-analysis-section {
  margin-top: 34px;
}
.fr-analysis-block {
  margin-bottom: 26px;
}
.fr-analysis-block .fr-block-title {
  margin-bottom: 8px;
}
.fr-analysis-block p {
  margin-bottom: 18px;
}
.fr-analysis-block p:last-child {
  margin-bottom: 0;
}
.fr-inline-note {
  font-size: 14px !important;
  line-height: 20px !important;
  color: #000000 !important;
  font-family: roboto-light !important;
  font-style: italic;
}

.fr-list {
  padding-left: 22px;
}
.fr-list li {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 12px;
}
.fr-list li:last-child {
  margin-bottom: 0;
}
/* =====================================================================
   END CSS: Finance Review (finance-review)
   ===================================================================== */

.ic-tag-facor     { background: #9a9c92; }
.ic-asset-rule {
  flex: 1;
  height: 1px;
  background: #c2bfbf;
}

/* Metric columns */
.ic-asset-metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px 24px;
  padding-left: 70px;
  align-items: start;
}
.ic-asset-metrics-2 { grid-template-columns: repeat(2, 1fr); }
/* Reserve space for the optional category heading on EVERY metric so the
   value numbers (1.14, 17, 654, 325...) line up on a common baseline,
   whether or not a metric has a category label. */
.ic-metric {
  min-width: 0;
  padding-top: 26px;
  position: relative;
}
.ic-metric-cat {
  position: absolute;
  top: 0;
  left: 0;
   font-size: 16px;
  line-height: 20px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 0;
}
.ic-metric-val {
  font-size: 24px;
  line-height: 28px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 4px;
}
.bod-comm-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #72BF44;
  color: #ffffff;
  font-size: 14px;
  line-height: 1;
  border-radius: 2px;
}
.bod-exp-title {
  font-size: 16px;
  line-height: 18px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 4px 0 12px;
}
.bod-exp-icons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px 6px;
  max-width: 300px;
  justify-items: center;
  align-items: center;
}
.bod-exp-icons img { width: 30px; object-fit: contain; }

/* ---- modal ---- */
.bod-modal .modal-content {
  border: none;
  border-radius: 6px;
}
.bod-modal .modal-body { padding: 32px; }
.bod-modal-x {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
}
.bod-modal-top {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.bod-modal-left { flex: 0 0 200px; max-width: 200px; }
.bod-modal-photo { margin-bottom: 14px; }
.bod-modal-photo img { width: 100%; display: block; border-radius: 4px; }
.bod-modal-right { flex: 1 1 auto; min-width: 0; }
.bod-modal-right .bod-committee { margin: 0 0 12px; }
.bod-modal-right .bod-exp-title { margin: 2px 0 10px; }
.bod-modal-name {
  font-size: 18px;
  line-height: 24px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 4px;
}
.ic-metric-val-text {
  font-size: 20px;
  line-height: 26px;
}
.ic-metric-unit { font-size: 16px; }
.ic-metric-label {
  font-size: 14px;
  line-height: 19px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0;
}
.ic-metric-sublist {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.ic-metric-sublist li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  line-height: 19px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin-bottom: 3px;
}
.ic-metric-sublist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  background: #6d6e71;
}
.bod-modal-role {
  font-size: 16px;
  line-height: 20px;
  color: #000000;
  font-family: roboto-medium;
  margin: 0 0 14px;
}
.bod-modal-right p:not(.bod-modal-role) {
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0;
}
.bod-modal-rest p {
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 14px;
}
.bod-modal-rest p:last-child { margin-bottom: 0; }
.bod-modal-legend {
  display: flex;
  gap: 34px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e2e6ec;
}
.bod-legend-committees { flex: 0 0 42%; max-width: 42%; }
.bod-legend-list { list-style: none; margin: 0 0 14px; padding: 0; }
.bod-legend-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 18px;
  color: #1a1a1a;
  font-family: roboto-regular;
}
.bod-legend-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid #9aa6b3;
  font-size: 11px;
  line-height: 1;
  color: #1a1a1a;
  font-family: roboto-bold;
}
.bod-legend-key { display: flex; gap: 24px; }
.bod-legend-key-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 18px;
  color: #1a1a1a;
  font-family: roboto-regular;
}
.bod-legend-sw { width: 16px; height: 16px; flex: 0 0 auto; }
.bod-legend-sw--member { background: #0067AC; }
.bod-legend-sw--chair { background: #72BF44; }
.bod-legend-expertise {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 12px;
  align-content: start;
}
.bod-legend-exp { text-align: center; }
.bod-legend-exp img { width: 30px; display: block; margin: 0 auto 7px; }
.bod-legend-exp span {
  display: block;
  font-size: 14px;
  line-height: 14px;
  color: #1a1a1a;
  font-family: roboto-regular;
}
/* =====================================================================
   END CSS: Board of Directors (board-of-directors)
   ===================================================================== */

/* =====================================================================
   START CSS: Board of Directors - committee member colour + legend tweak
   ===================================================================== */
/* committee badge: green = Chairperson (default), blue = Member */
.bod-comm-num--member { background: #0067AC; }
/* =====================================================================
   END CSS: Board of Directors - committee member colour + legend tweak
   ===================================================================== */

/* =====================================================================
   START CSS: Board diversity & tenure charts (board-of-directors)
   ===================================================================== */
.bod-charts { padding: 6px 0 50px; }
.bod-charts-title {
  font-size: 18px;
  line-height: 26px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 0 0 18px;
}
.bod-charts-title--blue { color: #0067AC; }
.bod-charts-row { margin-bottom: 30px; row-gap: 24px; }
.bod-charts-row:last-child { margin-bottom: 0; }
.bod-chart img{
  max-width: 450px;
}
/* =====================================================================
   END CSS: Board diversity & tenure charts (board-of-directors)
   ===================================================================== */

/* =====================================================================
   START CSS: Board legend (standalone, above charts)
   ===================================================================== */
.bod-legend-section { padding: 8px 0 34px; }
.bod-legend-standalone {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin: 0;
  padding: 22px 26px;
  border: none;
  border-radius: 4px;
  background: #f4f6f9;
}
.bod-legend-standalone .bod-legend-committees {
  flex: 0 0 330px;
}
.bod-legend-standalone .bod-legend-expertise {
  flex: 1 1 auto;
  width: auto;
  margin-left: 0;
  padding-left: 28px;
  border-left: 1px solid #d8dee7;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* =====================================================================
   END CSS: Board legend (standalone, above charts)
   ===================================================================== */

/* =====================================================================
   START CSS: Management Committee (management-committee)
   ===================================================================== */
.mc-section { padding: 40px 0 40px; }
.mc-section .row { row-gap: 34px; }
.mc-section .row > [class*="col-"] {
  display: flex;
}
.mc-photo {
  position: relative;
  overflow: hidden;
}
.mc-card{
  box-shadow: 0px 3px 6px #00000029;
  border: 1px solid #e5e5e5;
  border-bottom: 3px solid #0067AC;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.mc-photo img {
  width: 100%;
  display: block;
  /* aspect-ratio: 1 / 1.08; */
  object-fit: cover;
}
.mangeneme {
  padding: 16px;
  flex: 1 1 auto;
}
.mc-name {
  font-size: 18px;
  line-height: 21px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 3px;
}
.mc-role {
  font-size: 16px;
  line-height: 18px;
  color: #000000;
  font-family: roboto-medium;
  margin: 0;
}
/* =====================================================================
   END CSS: Management Committee (management-committee)
   ===================================================================== */

/* =====================================================================
   START CSS: Double Materiality Assessment (double-materiality-assessment)
   ===================================================================== */
   .dma-section{
    padding: 0 0 40px;
   }
.dma-intro-row { row-gap: 30px; margin-bottom: 30px; }
/* main headings = 18px */
.dma-h {
  font-size: 18px;
  line-height: 24px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 12px;
}
/* body text = 16px */
.dma-text {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0;
}

/* ---- 5-step process ---- */
.dma-step { margin-bottom: 26px; }
.dma-step:last-child { margin-bottom: 0; }
.dma-step-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.dma-step-num {
  flex: 0 0 auto;
  font-size: 42px;
  line-height: 1;
  color: #5a9e3f;
  font-family: roboto-light;
}
/* sub-heading = 16px bold */
.dma-step-title {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 22px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 0;
}
.dma-step-rule {
  flex: 1 1 auto;
  height: 1px;
  background: #cfd6e0;
}
.dma-step-text {
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0;
}
/* =====================================================================
   END CSS: Double Materiality Assessment (double-materiality-assessment)
   ===================================================================== */

/* =====================================================================
   START CSS: Double Materiality Matrix (double-materiality-assessment)
   ===================================================================== */
.dma-matrix { padding: 0 0 40px; }
.dma-matrix-img { margin: 0 0 30px; max-width: 750px; }
.dma-cat-row { row-gap: 28px; }
/* category header: coloured tag sitting on a coloured rule */
.dma-cat-head {
  margin: 0 0 16px;
  border-bottom: 2px solid;
  font-size: 0;
}
.dma-cat-head span {
  display: inline-block;
  vertical-align: bottom;
  padding: 5px 14px;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.3;
  font-family: roboto-bold;
}
.dma-cat-head--env { border-color: #5a9e3f; }
.dma-cat-head--env span { background: #5a9e3f; }
.dma-cat-head--soc { border-color: #ED8B00; }
.dma-cat-head--soc span { background: #ED8B00; }
.dma-cat-head--gov { border-color: #0067AC; }
.dma-cat-head--gov span { background: #0067AC; }
/* numbered topic lists (number coloured by category) */
.dma-cat-list { margin: 0; padding-left: 24px; }
.dma-cat-list li {
  padding-left: 6px;
  margin-bottom: 9px;
  font-size: 16px;
  line-height: 19px;
  color: #1a1a1a;
  font-family: roboto-regular;
}
.dma-cat-list li:last-child { margin-bottom: 0; }
.dma-cat-list li::marker { font-family: roboto-bold; }
.dma-cat-list--env li::marker { color: #5a9e3f; }
.dma-cat-list--soc li::marker { color: #ED8B00; }
.dma-cat-list--gov li::marker { color: #0067AC; }
/* =====================================================================
   END CSS: Double Materiality Matrix (double-materiality-assessment)
   ===================================================================== */

/* =====================================================================
   START CSS: dmstopsec intro overrides (double-materiality-assessment)
   ===================================================================== */
.riskmangetopsection p, .dmstopsec p {
  padding-bottom: 20px;
  margin-bottom: 0;
}
.riskmangetopsection p:last-child, .dmstopsec p:last-child {
  padding-bottom: 0;
  margin-bottom: 40px;
}
.dmstopsec h6 {
  font-size: 16px;
  font-family: roboto-bold;
  color: #000000;
  margin: 0 0 14px;
}
/* =====================================================================
   END CSS: dmstopsec intro overrides (double-materiality-assessment)
   ===================================================================== */

/* =====================================================================
   START CSS: Translating materiality into strategy (double-materiality-assessment)
   ===================================================================== */
.dma-strategy { margin-top: 36px; }
.dma-strategy .dma-h { margin-bottom: 12px; }
.dma-strategy p { margin-bottom: 16px; }
.dma-strategy p:last-child { margin-bottom: 0; }
.dma-strategy strong { font-family: roboto-bold; font-weight: normal; }
/* =====================================================================
   END CSS: Translating materiality into strategy (double-materiality-assessment)
   ===================================================================== */

/* =====================================================================
   START CSS: Addressing our material issues (double-materiality-assessment)
   ===================================================================== */
.mi-section { padding: 6px 0 20px; }

/* ---- card head: green base bar + raised white box (top:-50px) ---- */
.mi-card { position: relative; margin: 60px 0 30px; }
.mi-card-bar {
  position: relative;
  background-color: #73BF44;
  padding: 50px 24px 14px;
  border-radius: 2px;
}
.mi-cat { color: #ffffff; font-size: 16px; line-height: 1; font-family: roboto-medium; }
.mi-card-head {
  position: absolute;
  top: -30px;
  left: 30px;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 10px 24px;
  background: #ffffff;
  border-top: 1px solid #000000;
  box-shadow: 0px 20px 15px 10px rgba(0, 0, 0, 0.1);
}
.mi-title { font-size: 18px; line-height: 22px; color: #1a1a1a; font-family: roboto-bold; margin: 0; }
.mi-priority { flex: 0 0 auto; font-size: 16px; color: #0067AC; }

/* ---- 4-column content ---- */
.mi-cols { row-gap: 24px; margin-bottom: 30px; padding: 0 20px; }
.mi-col-title { font-size: 16px; line-height: 21px; color: #0067AC; font-family: roboto-bold; margin: 0 0 10px; }
.mi-col-text { font-size: 16px; line-height: 21px; color: #000000; font-family: roboto-regular; margin: 0; }
.mi-list { list-style: none; margin: 0; padding: 0; }
.mi-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 9px;
  font-size: 16px;
  line-height: 20px;
  color: #000000;
  font-family: roboto-regular;
}
.mi-list li:last-child { margin-bottom: 0; }
.mi-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  background: #6d6e71;
}

/* Copper + Facor two-up row */
.ic-asset-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
.ic-asset-duo .ic-asset-group { margin-bottom: 0; }

/* =========================================================
   Investment Case — India growth + track record charts
   ========================================================= */

/* Intro + Key advantages (2-col) */
.ic-india-top {
  margin-bottom: 44px;
}
.ic-india-intro { margin-bottom: 28px; }
.ic-india-adv { margin-bottom: 0; }
.ic-india-intro p {
  font-size: 16px;
  line-height: 24px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0;
}
.ic-india-adv-title {
  font-size: 18px;
  line-height: 24px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 0 0 16px;
}
.ic-india-adv-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ic-india-adv-list li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 23px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin-bottom: 18px;
}
.ic-india-adv-list li:last-child { margin-bottom: 0; }
.ic-india-adv-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  background: #0067AC;
}
.ic-india-adv-list strong {
  color: #0067AC;
  font-family: roboto-bold;
}

/* Charts */
.ic-chart { line-height: 0; }
.ic-chart {
  max-width: 90%;
  margin: 0 auto;
  width: 100%;
  padding: 40px 0;
}
.ic-chart img {
  display: block;
  width: 100%;
  height: auto;
}
/* .ic-chart-wide {
  margin-bottom: 6px;
  padding-top: 10px;
 
} */
/* Small consumption / growth charts (4-up) */
.investment-case-mini-graph-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin: 30px 0;
}
.investment-case-mini-graph {
 line-height: 0;
    max-width: 80%;
    margin: 0 auto;
    width: 100%;
}
.investment-case-mini-graph img {
  display: block;
  width: 100%;
  height: auto;
}
.ic-chart-source {
  font-size: 13px;
  line-height: 18px;
  color: #4e5055;
  font-family: roboto-regular;
  margin: 6px 0 40px;
}

.ic-india-growth-title {
  font-size: 20px;
  line-height: 26px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 0 0 18px;
}

/* India mineral reserves (green box) */
.ic-reserves {
  background: #e8f2dd;
  padding: 34px 36px;
  margin-top: 16px;
}
.ic-reserves-title {
  font-size: 18px;
  line-height: 24px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 0 0 24px;
}
.ic-reserves-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 24px;
}
.ic-reserve-rank {
  font-size: 28px;
  line-height: 32px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 10px;
}
.ic-reserve-rank sup { font-size: 16px; }
.ic-reserve-label {
  font-size: 14px;
  line-height: 19px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0 0 2px;
}
.ic-reserve-val {
   font-size: 16px;
  line-height: 20px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 0;
}
.ic-reserves-source {
  font-size: 13px;
  line-height: 18px;
  color: #4e5055;
  font-family: roboto-regular;
  margin: 0;
}

/* Track record */
.ic-track-intro {
  font-size: 16px;
  line-height: 24px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0 0 36px;
}
.ic-track-chart-title {
  font-size: 18px;
  line-height: 24px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 0 0 16px;
}
.ic-track .ic-chart-wide {
  border-top: 0;
  padding-top: 0;
  max-width: 720px;
  margin: 0 auto;
}
.ic-track-note {
  font-size: 13px;
  line-height: 18px;
  color: #4e5055;
  font-family: roboto-regular;
  margin: 24px 0 0;
}

/* =========================================================
   Investment Case — capital allocation + ESG layouts
   ========================================================= */

/* Disciplined capital allocation: text + diamond diagram */
.ic-capital-row {
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 50px;
  align-items: center;
}
.ic-capital-intro p {
  font-size: 16px;
  line-height: 24px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0;
}

/* Green "Capital Allocation" header with connector rules */
.ic-capital-header {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 4px;
}
.ic-capital-header-line {
  flex: 1;
  height: 2px;
  background: #72BF44;
}
.ic-capital-header-pill {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 26px;
  color: #ffffff;
  font-family: roboto-bold;
  background: #72BF44;
  padding: 10px 30px;
}
.ic-capital-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ESG single-column (straight) bullet layout */
.ic-esg-row {
  display: block;
}
.ic-esg-row .ic-asset-points {
  margin-bottom: 14px;
}
.ic-esg-col:last-child .ic-asset-points {
  margin-bottom: 0;
}

/* =========================================================
   Investment Case — intro paragraph (full width)
   ========================================================= */
.investment-case-intro-section {
  padding: 55px 0 50px;
}
.investment-case-intro-text {
   font-size: 18px;
  line-height: 26px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0 0 18px;
}
.investment-case-intro-text:last-child {
  margin-bottom: 0;
}

/* =========================================================
   Our Reporting Suite — performance hero + results
   ========================================================= */
.reporting-performance-section {
  padding: 0 0 60px;
}

/* Hero image with overlaid text */
.reporting-performance-hero {
  position: relative;
  margin-bottom: 50px;
}
.reporting-performance-hero-img {
  display: block;
  width: 100%;
  height: auto;
  /* max-height: 520px; */
  object-fit: cover;
}


.reporting-performance-hero .container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 2;
}
.reporting-performance-hero-title {
  font-size: 56px;
  line-height: 62px;
  color: #ffffff;
  font-family: roboto-bold;
  margin: 0;
}

/* Results dashboard (below the image) */
.reporting-results-block {
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid #c2bfbf;
}
.reporting-results-block:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.reporting-results-title {
  font-size: 18px;
  line-height: 28px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 26px;
}

/* Metric grid — 5-up; the Historic block wraps to 3 + 2 */
.reporting-results-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px 24px;
}
/* Historic Best block — 3 across, so 5 metrics wrap to 3 + 2 */
.reporting-results-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Minimal metric card */
.reporting-result {
  position: relative;
  padding: 22px 22px 24px;
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  transition: none;
  will-change: auto;
}
.reporting-result::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: #0067AC;
  border-radius: 0 0 10px 10px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: none;
}
.reporting-result:hover {
  transform: none;
  box-shadow: none;
  border-color: #e3e3e3;
}
.reporting-result:hover::after {
  transform: scaleX(0);
}
.reporting-result:hover .reporting-result-val {
  color: inherit;
}
.reporting-result-val {
  transition: none;
  font-size: 34px;
  line-height: 40px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 0;
}
.reporting-result-cur { font-size: 22px; margin-right: 2px; }
.reporting-result-unit {
  font-size: 18px;
  font-family: roboto-medium;
}
.reporting-result-label {
   font-size: 16px;
  line-height: 20px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 6px 0 0;
}
.reporting-result-yoy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 22px;
  font-family: roboto-bold;
  color: #1a1a1a;
  margin-top: 12px;
}
.reporting-result-yoy::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: no-repeat center / 11px;
  flex-shrink: 0;
}
.reporting-result-up::before {
  background-image: url(../images/capital/green-arrow.svg);
}
.reporting-result-down::before {
  background-image: url(../images/capital/gray-arrow.svg);
}
.reporting-results-note {
  font-size: 14px;
  line-height: 19px;
  font-style: italic;
  color: #4e5055;
  font-family: roboto-regular;
  margin: 24px 0 0;
}

/* =========================================================
   Chairman's Message — full-width single-column letter
   (fonts/colours match vedanta-at-a-glance.php)
   ========================================================= */
.chairman-message-letter {
  padding-bottom: 60px;
}
.first-message{
  font-size: 20px;
  line-height: 26px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0 0 22px;
}
.chairman-message-lead {
  font-size: 24px;
  line-height: 32px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 26px;
}

/* Salutation */
.chairman-message-salutation {
  font-size: 52px;
  line-height: 1.05;
  color: #1a1a1a;
  font-family: "Allura", cursive;
  font-weight: 400;
  margin: 40px 0 24px;
}

/* Section sub-heads */
.chairman-message-subhead {
  font-size: 18px;
  line-height: 24px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 36px 0 8px;
}

/* Body paragraphs — regular weight (NOT bold) */
.chairman-message-text {
  font-size: 16px;
  line-height: 26px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0 0 22px;
}

/* Stat callouts */
.chairman-message-stats {
  display: flex;
  gap: 60px;
  margin: 36px 0 14px;
  flex-wrap: wrap;
}
.chairman-message-stat {
  min-width: 270px;
}
.chairman-message-stat-value {
  display: block;
  font-size: 44px;
  line-height: 1;
  color: #0067AC;
  font-family: roboto-bold;
  margin-bottom: 8px;
}
.chairman-message-stat-cur {
  font-size: 32px;
}
.chairman-message-stat-unit {
  font-size: 22px;
}
.chairman-message-stat-label {
  display: block;
   font-size: 16px;
  line-height: 20px;
  color: #1a1a1a;
  font-family: roboto-bold;
  padding-bottom: 12px;
  border-bottom: 1px solid #d4d4d4;
}

/* Inline figure + green highlight caption */
.chairman-message-figure {
  margin: 40px 0;
}
.chairman-message-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.chairman-message-highlight {
  font-size: 20px;
  line-height: 28px;
  color: #579842;
  font-family: roboto-bold;
  margin: 22px 0 0;
}
.chairman-message-highlight::after {
  content: "";
  display: block;
  width: 40px;
  height: 5px;
  background: #579842;
  margin-top: 18px;
}
/* Full-width green highlight sitting below a two-column block */
.chairman-message-highlight-block {
  margin: 36px 0 10px;
}

/* Two-column split: image + text, equal heights */
.chairman-message-split {
  display: flex;
  align-items: stretch;
  gap: 50px;
  margin: 40px 0;
}
.chairman-message-split-media,
.chairman-message-split-body {
  flex: 1 1 0;
  min-width: 0;
}
.chairman-message-split-media {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.chairman-message-split-media img {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
}
.chairman-message-split-media .chairman-message-highlight {
  flex: 0 0 auto;
}
.chairman-message-split-body .chairman-message-text:last-child {
  margin-bottom: 0;
}
.chairman-message-split-body .chairman-message-subhead {
  margin-top: 0;
}

@media (max-width: 767px) {
  .chairman-message-split {
    flex-direction: column;
    gap: 24px;
  }
  .chairman-message-split-media img {
    height: auto;
  }
}

/* Signature */
.chairman-message-sign {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}
.chairman-message-sign-rule {
  display: block;
  width: 40px;
  height: 5px;
  background: #939598;
  margin-bottom: 18px;
}
.chairman-message-sign-name {
  font-size: 18px;
  line-height: 24px;
  color: #0067AC;
  font-family: roboto-bold;
}
.chairman-message-sign-role {
  font-size: 14px;
  line-height: 20px;
  color: #4e5055;
  font-family: roboto-regular;
}

@media (max-width: 991px) {
  .chairman-message-salutation {
    font-size: 42px;
  }
  .chairman-message-stats {
    gap: 32px;
  }
}

/* =========================================================
   Management Speak — alternating person quote blocks
   ========================================================= */
.management-speak {
  padding-top: 40px;
  padding-bottom: 60px;
}
.management-speak-row {
  display: flex;
  align-items: stretch;
  gap: 50px;
  margin-bottom: 50px;
}
.management-speak-row:last-child {
  margin-bottom: 0;
}
.management-speak-body,
.management-speak-media {
  flex: 1 1 0;
  min-width: 0;
}

/* Text column */
.management-speak-body {
  display: flex;
  flex-direction: column;
}
.management-speak-icon {
  display: inline-block;
  line-height: 0;
  margin-bottom: 18px;
}
.management-speak-icon img {
  width: 40px;
  height: auto;
}
.management-speak-text {
  font-size: 16px;
  line-height: 26px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0 0 18px;
}
.management-speak-meta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
}
.management-speak-name {
  font-size: 16px;
  line-height: 22px;
  color: #1a1a1a;
  font-family: roboto-bold;
}
.management-speak-role {
  font-size: 14px;
  line-height: 20px;
  color: #4e5055;
  font-family: roboto-regular;
  margin-bottom: 14px;
}
.management-speak-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: #1a1a1a;
}

/* Image column — equal height with text */
.management-speak-media {
  margin: 0;
  overflow: hidden;
  max-width: 30%;
}
.management-speak-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 767px) {
  .management-speak-row {
    flex-direction: column;
    gap: 22px;
  }
  /* keep image after text on mobile for both blocks */
  .management-speak-media-left {
    order: 2;
  }
  .management-speak-media img {
    height: auto;
  }
}

/* =========================================================
   Management Q&A — interview format, single full-width column
   ========================================================= */
.management-qa {
  padding-bottom: 60px;
}
.management-qa-item {
  margin-bottom: 36px;
}
.management-qa-item:last-child {
  margin-bottom: 0;
}

/* Question line */
.management-qa-question {
   font-size: 18px;
  line-height: 24px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 0 0 14px;
}
.management-qa-q {
  color: #579842;
  font-family: roboto-bold;
  margin-right: 6px;
}

/* Answer: A marker + body */
.management-qa-answer {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.management-qa-a {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 26px;
  color: #579842;
  font-family: roboto-bold;
}
.management-qa-answer-body {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
.management-qa-text {
  font-size: 16px;
  line-height: 26px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0 0 18px;
}
.management-qa-list {
  margin: 0 0 18px;
  padding-left: 20px;
  list-style: none;
}
.management-qa-list li {
  position: relative;
  font-size: 16px;
  line-height: 26px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin-bottom: 12px;
  padding-left: 4px;
}
.management-qa-list li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 10px;
  width: 6px;
  height: 6px;
  background: #579842;
  border-radius: 50%;
}

/* Coloured business sub-heads */
.management-qa-subhead {
  font-size: 16px;
  line-height: 22px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 24px 0 8px;
}
/* Business colour theme — matched to asset-overview.php segment colours */
.management-qa-subhead-aluminium { color: #7cbf45; }
.management-qa-subhead-zinc      { color: #f29200; }
.management-qa-subhead-power     { color: #29ABE2; }
.management-qa-subhead-oil        { color: #00a89c; }
.management-qa-subhead-iron      { color: #a98a6a; }
.management-qa-subhead-steel     { color: #8a9aa3; }
.management-qa-subhead-facor     { color: #9a9c92; }
.management-qa-subhead-copper    { color: #f29200; }

/* Q&A image split: image sized to its own content, not stretched */
.management-qa .chairman-message-split {
  align-items: flex-start;
}
.management-qa .chairman-message-split-media img {
  height: auto;
  flex: 0 0 auto;
}

/* Q&A floated image (right) — text wraps around, no empty space */
.management-qa-figure-right {
  float: right;
  width: 42%;
  max-width: 380px;
  margin: 4px 0 24px 40px;
}
.management-qa-figure-right img {
  display: block;
  width: 100%;
  height: auto;
}
.management-qa-figure-right .chairman-message-highlight {
  font-size: 18px;
  line-height: 25px;
}
@media (max-width: 767px) {
  .management-qa-figure-right {
    float: none;
    width: 100%;
    max-width: none;
    margin: 20px 0;
  }
}

/* =========================================================
   Key Performance Indicators — chart cards in a 2-col grid
   ========================================================= */
.kpi-section {
  padding-bottom: 60px;
}
.kpi-page-title {
  font-size: 30px;
  line-height: 36px;
  color: #1a1a1a;
  font-family: roboto-bold;
  text-transform: uppercase;
  margin: 0 0 30px;
}

/* Coloured group titles */
.kpi-group-title {
  font-size: 22px;
  line-height: 28px;
  font-family: roboto-bold;
  margin: 36px 0 24px;
}
.kpi-group-blue { color: #0067AC; }
.kpi-group-green { color: #6fb33b; }
.kpi-group-cyan { color: #0093d0; }

/* 2-column grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 60px;
  row-gap: 40px;
}

/* 3-column grid (Long-term value rows): chart on top, text below */
.kpi-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
  row-gap: 40px;
}
.kpi-card-stacked .kpi-card-chart {
  margin: 14px 0 16px;
  max-width: 40%;
}

/* R&R sub-group intro */
.kpi-subgroup-title {
  font-size: 18px;
  line-height: 24px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 40px 0 8px;
}
.kpi-subgroup-text {
  font-size: 16px;
  line-height: 19px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0 0 28px;
  max-width: 640px;
}
.kpi-subgroup-text strong { font-family: roboto-bold; }

.kpi-card {
  display: flex;
  flex-direction: column;
}
.kpi-card-title {
   font-size: 18px;
  line-height: 22px;
  color: #1a1a1a;
  font-family: roboto-bold;
  margin: 0 0 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #c2bfbf;
}
.kpi-card-unit {
  font-family: roboto-regular;
  color: #4e5055;
  font-size: 14px;
}
/* Card body: chart left, text right */
.kpi-card-body {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-top: 14px;
}
.kpi-card-media {
  flex: 0 0 42%;
  max-width: 32%;
}
.kpi-card-info {
  flex: 1 1 0;
  min-width: 0;
}
.kpi-card-chart {
  margin: 0;
}
/* All graph SVGs share a viewBox height of 350, so sizing every chart to the
   SAME rendered height (with width: auto) makes the bars and the year baseline
   line up across all graphs, regardless of each graph's width. */
.kpi-card-chart img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 300px;
}
/* Colour legend rendered OUTSIDE the fixed-height chart, so it never affects
   the graph height or the year-baseline alignment across cards. */
.kpi-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 20px;
}
.kpi-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  line-height: 16px;
  color: #4e5055;
  font-family: roboto-regular;
}
/* Two-tone swatch: light shade (left) + darker shade (right), matching the chart bars */
.kpi-legend-swatch {
  width: 16px;
  height: 14px;
  flex-shrink: 0;
}
.kpi-legend-swatch--green {
  background: linear-gradient(to right, #d8e1cd 0 40%, #579842 40% 100%);
}
.kpi-legend-swatch--grey {
  background: linear-gradient(to right, #d1d3d4 0 40%, #939598 40% 100%);
}
.kpi-card-text {
  font-size: 16px;
  line-height: 22px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0 0 20px;
}
.kpi-card-text strong {
  font-family: roboto-bold;
}
.kpi-card-list {
  margin: 0 0 12px;
  padding-left: 18px;
}
.kpi-card-list li {
  font-size: 16px;
  line-height: 19px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin-bottom: 8px;
}
.kpi-footnote {
  font-size: 12px;
  line-height: 17px;
  font-style: italic;
  color: #4e5055;
  font-family: roboto-regular;
  margin: 18px 0 0;
}

@media (max-width: 767px) {
  .kpi-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .kpi-page-title {
    font-size: 24px;
    line-height: 30px;
  }
  .kpi-card-body {
    flex-direction: column;
    gap: 14px;
  }
  .kpi-card-media {
    flex-basis: auto;
    max-width: 60%;
  }
  .kpi-grid-3 {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .kpi-card-stacked .kpi-card-chart {
    max-width: 40%;
  }
  /* Shrink all graphs together so bars/baseline stay aligned on small screens */
  .kpi-card-chart img {
    height: 240px;
  }
}

@media (max-width: 480px) {
  .kpi-card-chart img {
    height: 200px;
  }
}

/* ESG Strategy: full diagram placeholders */
.es-diagram-img { margin: 24px auto 0px; max-width: 820px;}
.es-diagram-img img { width: 100%; height: auto; display: block; }
.es-diagram-img--full { width: 100%; margin: 30px auto; max-width:820px; }
.es-diagram-img--gap { margin-bottom: 24px; }
/* =========================================================
   Case Study — green hero shadow box + approach/way-forward
   ========================================================= */
.cs-hero {
  padding-bottom: 60px;
}

/* Green full-width shadow box: text left, image right */
.cs-hero-box {
  display: flex;
  align-items: stretch;
  background: #6fb33b;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .18);
}
.cs-hero-content {
  flex: 1 1 58%;
  padding: 50px 50px 50px;
}
.cs-hero-media {
  flex: 1 1 42%;
  margin: 0;
  overflow: hidden;
}
.cs-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cs-hero-lead {
  font-size: 22px;
  line-height: 32px;
  color: #ffffff;
  font-family: roboto-bold;
  margin: 0 0 36px;
}

/* Impact statement callout */
.cs-impact {
  margin-top: 10px;
}
.cs-impact-label {
  display: inline-block;
  background: #0067AC;
  color: #ffffff;
   font-size: 16px;
  line-height: 20px;
  font-family: roboto-bold;
  padding: 8px 16px;
  margin-bottom: 14px;
}
.cs-impact-text {
   font-size: 16px;
  line-height: 22px;
  color: #eaf3e1;
  font-family: roboto-regular;
  margin: 0;
  /* max-width: 460px; */
}

/* Our approach / Way forward sections */
.cs-section {
  padding-bottom: 50px;
}
.cs-tag {
  display: inline-block;
  background: #6fb33b;
  color: #ffffff;
   font-size: 16px;
  line-height: 20px;
  font-family: roboto-bold;
  padding: 8px 16px;
  margin-bottom: 26px;
}
.cs-cols {

  column-gap: 60px;
  align-items: start;
}
.cs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cs-list li {
  position: relative;
  font-size: 16px;
  line-height: 24px;
  color: #1a1a1a;
  font-family: roboto-regular;
  padding-left: 20px;
  margin-bottom: 22px;
}
.cs-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: #6fb33b;
 
}
.cs-text {
  font-size: 16px;
  line-height: 24px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0;
}

/* Milestones stat grid (case study 3) */
.cs-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 60px;
  row-gap: 36px;
  margin-bottom: 30px;
}
.cs-stat-val {
  font-size: 32px;
  line-height: 1;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 8px;
}
.cs-stat-unit {
  font-size: 18px;
}
.cs-stat-label {
   font-size: 16px;
  line-height: 21px;
  color: #1a1a1a;
  font-family: roboto-regular;
  margin: 0;
  max-width: 320px;
}
.cs-stat-inline {
  margin-top: 30px;
}
.cs-milestone-note {
  margin-top: 6px;
}
.cs-milestone-head {
  font-size: 22px;
  line-height: 28px;
  color: #0067AC;
  font-family: roboto-bold;
  margin: 0 0 4px;
}
.cs-milestone-note .cs-text {
  display: inline;
}

/* Hero impact number (e.g. 599 kt) */
.case-study-number {
  font-size: 40px;
  line-height: 1;
  color: #ffffff;
  font-family: roboto-bold;
  margin: 0 0 10px;
}
.case-study-number span {
  font-size: 30px;
}

@media (max-width: 767px) {
  .cs-stats-grid {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
}
.case-study-title {
  max-width: 540px;
}
@media (max-width: 767px) {
  .cs-hero-box {
    flex-direction: column;
  }
  .cs-hero-content {
    padding: 30px 24px;
  }
  .cs-hero-media {
    order: -1;
  }
  .cs-hero-media img {
    height: auto;
  }
  .cs-hero-lead {
    font-size: 18px;
    line-height: 26px;
  }
  .cs-cols {
    grid-template-columns: 1fr;
    row-gap: 22px;
  }
}

/* =====================================================================
   TRANSFORMING COMMUNITIES (inside page)
   ===================================================================== */
.es-subhead--italic { font-style: italic; }
.tc-bu-list.tc-bu-list--dark li strong { color: #000000; }
/* Genuinely bold + black inline emphasis for product names (e.g. Restora, EcoZen) */
.tc-bu-list li strong.tc-bold-black {
  display: inline;
  color: #000000;
  font-family: roboto-bold;
  font-weight: 700;
  margin-bottom: 0;
}
.es-text p.tc-emph { font-family: roboto-bold; }
.es-text p.tc-emph::after {
    content: "";
    display: block;
    width:50px;
    height: 8px;
    background: #72BF44;
    margin-top: 8px;
}

/* Intro: three columns, last one a callout */
.tc-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-bottom: 44px;
}
.tc-intro-grid p { font-size: 16px; line-height: 22px; color: #000000; }
.tc-callout-head { font-family: roboto-bold; color: #000000; margin-bottom: 12px; }

/* Four strategic levers (2x2 text blocks) */
.tc-levers-title {
  grid-column: 1 / -1;
  margin: 0;
  /* color: #0067AC; */
  font-weight: 100;
  font-size: 18px;
  line-height: 26px;
}
.tc-levers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 48px;
  margin-bottom: 44px;
  background: #eef6e3;
  padding: 30px 34px;
}
.tc-levers p { font-size: 16px; line-height: 22px; color: #000000; }
.tc-levers .tc-block-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 10px;
}
.tc-levers .tc-block-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #72BF44;
}

/* Stat sub-line (under the big number) */
.tc-stat-sub { font-size: 14px; line-height: 18px; color: #000; margin: 2px 0 0; }

/* Section tag labels */
.tc-tag {
  display: inline-block;
  background: #0067AC;
  color: #ffffff;
  font-family: roboto-bold;
  font-size: 16px;
  line-height: 18px;
  padding: 8px 20px;
  margin-bottom: 22px;
}
.tc-tag--green { background: #72BF44; }
.tc-tag--plain {
  font-size: 16px; background: none; color: #000000; padding: 8px 0; }

/* Strategic focus areas */
.tc-focus {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 46px;
}
.tc-focus-item {
  padding: 18px 28px;
  border-right: 1px solid #cdd5de;
  border-bottom: 1px solid #cdd5de;
  font-size: 16px;
  line-height: 22px;
  color: #000000;
}
.tc-focus-item:nth-child(3n+1) { padding-left: 0; }
.tc-focus-item:nth-child(3n) { border-right: 0; }
.tc-focus-item:last-child { border-right: 0; }

/* Stat grids — divided cells (vertical + horizontal rules) */
.tc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.tc-stat {
  padding: 20px 28px;
  border-right: 1px solid #cdd5de;
  border-bottom: 1px solid #cdd5de;
}
.tc-stat:nth-child(3n+1) { padding-left: 0; }
.tc-stat:nth-child(3n) { border-right: 0; }
.tc-stat:last-child { border-right: 0; }
.tc-stat-label { font-size: 16px; line-height: 22px; color: #000000; margin: 0; }
.tc-stat-label strong { font-family: roboto-bold; }
.tc-stat-num {
  font-family: roboto-bold;
  font-size: 30px;
  line-height: 36px;
  color: #72BF44;
  margin: 8px 0 4px;
}
.tc-stat-num span { font-size: 16px; font-family: roboto-medium; }
.tc-stat-num--sm { font-size: 18px; line-height: 26px; color: #72BF44; font-family: roboto-light; font-weight: 300; }
.tc-stat-emph { font-family: roboto-bold; font-weight: 700; }

/* Business-unit lists: bold lead becomes a blue heading, no bullets */
.tc-bu-list { list-style: none; margin: 4px 0 6px; padding: 0; }
.tc-bu-list li { margin-bottom: 18px; font-size: 16px; line-height: 22px; color: #000000; }
.tc-bu-list li:last-child { margin-bottom: 0; }
.tc-bu-list li strong {
  display: block;
  color: #0067AC;
  font-family: roboto-medium;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 5px;
}

/* Impact heading — black text, no background, full-width bottom rule */
.tc-impact-head {
  font-family: roboto-bold;
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  padding-bottom: 14px;
  border-bottom: 1px solid #000;
  margin: 0 0 15px;
}

/* Impact grid variant — clean spacing, no dividers */
.tc-stats--4 { gap: 34px 30px; }
.tc-stats--4 .tc-stat { padding: 0; border: 0; }
.tc-stats--4 .tc-stat-label { font-size: 14px; line-height: 20px; }

/* Aim header bar */
.tc-aim {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  background: #ffffff;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.12);
  padding: 10px 36px;
  margin: 4px 0 44px;
  margin-left: 50px;
  scroll-margin-top: 100px;
}
.tc-aim::after {
    content: "";
    position: absolute;
    left: -50px;
    top: 0px;
    width: 100%;
    height: 80px;
    background: #0067AC;
    z-index: -1;
}
.tc-aim-no {
  font-family: roboto-light;
  font-size: 46px;
  line-height: 1;
  color: #000;
  white-space: nowrap;
}
.tc-aim-title {
  padding-left: 30px;
  border-left: 1px solid #cdd5de;
  color: #0067AC;
  font-family: roboto-bold;
  font-size: 18px;
  line-height: 24px;
}

/* Aim / two-column detail blocks */
.tc-aim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 48px;
  margin-bottom: 40px;
}
.tc-aim-col p { font-size: 16px; line-height: 22px; color: #000000; margin-bottom: 14px; }
.tc-block-head {
  font-family: roboto-bold;
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  margin: 22px 0 8px;
}
.tc-aim-col > .tc-block-head:first-child { margin-top: 0; }

/* 50/50 text + image split */
.tc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  margin-top: 8px;
}
.tc-split--2-1 { grid-template-columns: 2fr 1fr; }
.tc-split-text > .tc-block-head:first-child { margin-top: 0; }
.tc-split-text p { font-size: 16px; line-height: 22px; color: #000000; margin-bottom: 14px; }
.tc-split-text p:last-child { margin-bottom: 0; }
.tc-split-img img { width: 100%; height: auto; display: block; }
/* Image fills its column and matches the text column height (text drives the height).
   Left columns carry enough content that little to no cropping is needed. */
.tc-split--fill { align-items: stretch; }
.tc-split--fill .tc-split-img { position: relative; }
.tc-split--fill .tc-split-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tc-aim-col .tc-mat-label { color: #0067AC; font-family: roboto-bold; font-size: 14px; line-height: 20px; margin-bottom: 4px !important; }

/* Our social engagement and management strategy */
.tc-strategy { margin: 36px 0 10px; 
border-top: 1px solid #000;
padding-top: 20px;
}
.tc-strategy-head { text-align: center; margin-bottom: 32px; }
.tc-strategy-title {
  color: #0067AC;
  font-family: roboto-bold;
  font-size: 16px;
  line-height: 22px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 6px;
}
.tc-strategy-sub {
  color: #000;
   font-size: 16px;
  line-height: 21px;
  margin: 0;
}
.tc-strategy-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 30px;
}
.tc-strategy-tab {
  border-top: 1px solid #cfd6dd;
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.09);
  text-align: left;
  padding: 15px 18px;
  margin-bottom: 22px;
  font-family: roboto-bold;
   font-size: 16px;
  line-height: 20px;
  color: #000000;
  text-transform: uppercase;
}
.tc-strategy-col .es-list li { font-size: 14px; line-height: 20px; color: #000000; }
.tc-strategy-note {
  background: #f6f7f9;
  color: #000000;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  padding: 14px 22px;
  margin: 0;
}

/* UNSDG items */
.tc-sdg { display: flex; flex-wrap: wrap; gap: 22px 30px; }
.tc-sdg-item { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 18px; color: #000000; }
.tc-sdg-item img { width: 60px; height: 60px; object-fit: contain; }

/* Strategy and oversight model */
.tc-oversight {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 34px;
  background: #eef6e3;
  padding: 8px 28px 26px;
  margin-bottom: 14px;
}
.tc-ov-head {
  font-family: roboto-bold;
   font-size: 16px;
  line-height: 20px;
  color: #000000;
  border-top: 2px solid #8cbf5a;
  padding-top: 16px;
  margin: 18px 0 0;
}
.tc-ov-item {
  font-size: 14px;
  line-height: 18px;
  color: #000000;
  padding: 13px 0;
  margin: 0;
  border-bottom: 1px solid #cfe0b8;
}
.tc-ov-item--noline { border-bottom: 0; }

/* Case study */
.tc-case-tag {
  display: inline-block;
  background: #72BF44;
  color: #ffffff;
  font-family: roboto-medium;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 6px 16px;
}
.tc-case-title {
  color: #0067AC;
  font-family: roboto-bold;
  font-size: 22px;
  line-height: 30px;
  margin: 16px 0 18px;
}
.tc-case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 54px;
  margin-bottom: 26px;
   font-size: 16px;
  color: #000000;
  position: relative;
}
.tc-case-meta> div 
{
  padding-bottom: 20px;
}
.tc-case-meta:after
{
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  background-color: #72BF44;
  width: 80px;
  height: 10px;
}
.tc-case-metalabel {
  display: block;
  font-family: roboto-bold;
  font-size: 14px;
  color: #000;
  margin-bottom: 4px;
}
/* Body full-width on top; image + outcome side-by-side (50/50) below */
.tc-case-grid { display: block; }
.tc-case-body p { font-size: 16px; line-height: 22px; color: #000000; margin-bottom: 14px; }
.tc-case-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
  margin-top: 28px;
}
.tc-case-side--full { grid-template-columns: 1fr; }
.tc-case-side--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.tc-case-side .es-diagram-img { margin: 0; height: 100%; }
.tc-case-side .es-diagram-img img { width: 100%; height: 100%; object-fit: cover; }
.tc-case-outcome { background: #eef3ea; padding: 24px; }
.tc-case-outcome--grey { background: #f1f1f1; }
.tc-case-outcome p { font-size: 14px; line-height: 20px; color: #000000; margin: 14px 0 0; }
@media (max-width: 767px) {
  .tc-case-side { grid-template-columns: 1fr; }
  .tc-case-side--split { grid-template-columns: 1fr; }
}

.vd-top-img
{
  display: none;
}
.es-text
{
  margin-top: 30px;
}
.im-boredr
{
  border-bottom: 1px solid #000;
  padding-bottom: 30px;
}
.es-list1 li::before
{
background: #72BF44;
}
.tc-case-outcome1
{
  background-color: #fff0e2;
}
.tc-case-meta1:after
{
  background-color:#f7921e;
}
.tc-case-meta2:after
{
  background-color:#989684;
}
.tc-case-outcome2
{
  background-color: #ebf5ea;
}
.es-list2 li:before 
{
  background: #000000;
}

/* =====================================================================
   TRANSFORMING THE WORKPLACE (inside page)
   ===================================================================== */
/* Safety Performance — three critical focus areas */
.tc-safety { margin: 30px 0 10px; }
.tc-safety-head { background: #0067AC; color: #ffffff; padding: 16px 24px; text-align: center; }
.tc-safety-title { color: #ffffff; font-family: roboto-bold; font-size: 18px; line-height: 24px; margin: 0 0 4px; }
.tc-safety-sub { color: #ffffff; font-size: 14px; line-height: 20px; margin: 0; }
.tc-safety-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.tc-safety-col { position: relative; padding: 26px 24px; border-bottom: 2px solid #0067AC; }
.tc-safety-col:last-child { border-right: 0; }
.tc-safety-no { display: block; font-family: roboto-light; font-size: 40px; line-height: 1; color: #72BF44; margin-bottom: 8px; }
.tc-safety-col .tc-block-head { margin-top: 0; }
.tc-safety-col .tc-mat-label { color: #0067AC; font-family: roboto-bold; font-size: 14px; margin-bottom: 12px; }
.tc-safety-col .es-list li { font-size: 14px; line-height: 20px; }
.tc-safety-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid #cfe0b8; }
.tc-safety-stat { display: block; font-family: roboto-medium; font-size: 22px; line-height: 26px; color: #72BF44; }

/* Rating performance table */
.tc-rating { width: 100%; border-collapse: collapse; min-width: 760px; }
.tc-rating th { background: #e7f2de; color: #000000; font-family: roboto-bold; font-size: 14px; text-align: left; padding: 12px 16px; border: 0; border-top: 2px solid #0067AC; border-bottom: 2px solid #c9d2db; }
.tc-rating td { font-size: 14px; color: #000000; padding: 12px 16px; border: 0; border-bottom: 1px solid #e2e2e2; }
.tc-rating td:first-child { font-family: roboto-bold; }
.tc-rating tbody tr:last-child td { border-bottom: 2px solid #0067AC; }

/* CSA rankings lead text */
.tc-csa-lead { color: #0067AC;font-family: roboto-regular; font-size: 18px; line-height: 26px; margin: 0 0 14px; }
.tc-csa-lead strong { font-family: roboto-bold; font-weight: normal; }

/* Strategic focus areas: 4-column, no bottom border (Transforming the Workplace) */
.tc-focus--4 { grid-template-columns: repeat(4, 1fr); }
.tc-focus.tc-focus--4 .tc-focus-item { border-bottom: 0; border-right: 1px solid #cdd5de; padding-left: 28px; }
.tc-focus.tc-focus--4 .tc-focus-item:nth-child(4n+1) { padding-left: 0; }
.tc-focus.tc-focus--4 .tc-focus-item:nth-child(4n) { border-right: 0; }
.tc-focus.tc-focus--4 .tc-focus-item:last-child { border-right: 0; }

/* BU-list with green dots (blue leads kept) */
.tc-bu-list--dots li { position: relative; padding-left: 18px; }
.tc-bu-list--dots li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: #72BF44; }
.tc-bu-list--dots li strong 
{
  display: inline;
}
/* Rating table: logo column + FY 2025-26 highlight */
.tc-rating th.tc-rating-hl { background: #0067AC; color: #ffffff; border-top-color: #0067AC; }
.tc-rating td.tc-rating-hl { background: #eef6e3; }
.tc-rating tbody tr:last-child td.tc-rating-hl { border-bottom: 2px solid #0067AC; }
.tc-rating-logo { width: 96px; text-align: center; vertical-align: middle; }
.tc-rating-logo img { max-width: 74px; height: auto; display: inline-block; }
.tc-rating td:first-child { font-family: roboto-regular; }

/* Aim 9 statutory committees list */
.tc-committees { margin-top: 14px; }
.tc-committees li { font-size: 14px; line-height: 20px; }
.tc-committees li::before { background: #000000; }

/* Related-links dark cards */
.tc-navcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 60px !important}
.tc-navcard { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #0067AC; border-radius: 8px; padding: 20px 28px; text-decoration: none; transition: transform 0.2s ease, background 0.2s ease; }
.tc-navcard:hover { transform: translateY(-3px); background: #00538a; }
.tc-navcard-title { color: #ffffff; font-family: roboto-bold; font-size: 16px; line-height: 22px; text-transform: uppercase; letter-spacing: 0.5px; }
.tc-navcard-arrow { flex-shrink: 0; }
.tc-navcard-arrow svg { width: 22px; height: 22px; display: block; }

/* Water stewardship note (above diagram, top rule) */
.tc-water-note { font-size: 14px; line-height: 20px; color: #000000; margin: 30px 0 24px; padding-top: 18px; border-top: 1px solid #cdd5de; }
.tc-water-note strong { font-family: roboto-bold; }
.mi-list strong { color: #1a1a1a; font-family: roboto-bold; font-weight: normal; }

/* ---- info band ---- */
.mi-band { background: #f1fafe; padding: 0  24px 16px; }
.mi-band-r {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid #000000;
}
.mi-band-r--head { border-top: 1px solid #000000; }
.mi-bc {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 15px ;
  margin-bottom: 15px;
  padding: 0 18px 0 0;
  min-width: 0;
}
.mi-bc--2 { grid-column: span 2; }
.mi-bc + .mi-bc { border-left: 1px solid #000000; padding-left: 24px; }
.mi-bc-h,
.mi-bc-label { font-size: 16px; line-height: 19px; color: #1a1a1a; font-family: roboto-bold; }
.mi-icons { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mi-icons img { width: auto; max-width: 100%; height: 38px; object-fit: contain; }
.mi-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 30px;
  padding: 0 8px;
  font-size: 16px;
  line-height: 1;
  font-family: roboto-bold;
}
.mi-tile--s { border: 1px solid #b9c2cf; color: #0067AC;  }
.mi-tile--r { background: #0067AC; color: #ffffff; }
.mi-note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 18px;
  color: #000000;
  font-family: roboto-italic;
}
.mi-note-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #5a9e3f;
  color: #5a9e3f;
  font-size: 16px;
  font-family: roboto-regular;
  margin-right: 6px;
}
.mi-note .mi-note-link {
  color: #0067ac;
  font-family: roboto-medium;
  font-style: normal;
  text-decoration: underline !important;
  transition: color 0.25s ease, opacity 0.25s ease;
}
.mi-note .mi-note-link:hover {
  color: #72bf44;
  opacity: 0.9;
  text-decoration: underline !important;
}
/* =====================================================================
   END CSS: Addressing our material issues (double-materiality-assessment)
   ===================================================================== */

/* =====================================================================
   START CSS: Market Review (market-review)
   ===================================================================== */
.mr-section {
  padding: 60px 0px 40px;
}

.mr-title {
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-bold;
  padding-bottom: 10px;
}
.mr-title--blue {
  color: #0067AC;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 10px;
}
.mr-subtitle {
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  font-family: roboto-bold;
  margin: 0 0 15px;
}
.mr-content-block p {
  font-size: 16px;
  line-height: 25px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 18px;
}


.mr-graphimg {
  padding: 30px 0px;
}

.mr-media-card {
  margin: 30px 0px;
}
.mr-list {
  margin: 0;
  padding-left: 22px;
}
.mr-list li {
  font-size: 16px;
  line-height: 25px;
  color: #000000;
  font-family: roboto-regular;
  margin: 0 0 14px;
}

/* =====================================================================
   END CSS: Market Review (market-review)
   ===================================================================== */

/* =====================================================================
   START CSS: Material issues - column dividers (double-materiality-assessment)
   ===================================================================== */
.mi-cols > [class*="col-"] { position: relative; }
.mi-cols > [class*="col-"]:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: #000000;
}
/* =====================================================================
   END CSS: Material issues - column dividers (double-materiality-assessment)
   ===================================================================== */

/* photo after the material-issues section */
.mi-photo { margin-top: 34px; }
.mi-photo{
  margin-bottom: 30px;
}

/* =====================================================================
   ZINC INDIA (operational review inside page)
   ===================================================================== */
.zi-banner-title { display: flex; align-items: center; gap: 18px; margin-top:10px; }
.zi-banner-icon { width: 70px; height: 70px; flex-shrink: 0; }
.zi-banner-title .it-heading { margin: 0; }

/* Callout / pull-quote */
.zi-callout {
  margin: 30px 0 30px;
  padding: 0;
  border: 0;
  background: none;
  font-family: roboto-medium;
  font-size: 16px;
  line-height: 24px;
  color: #000;
}
.zi-callout::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  background: #f7921e;
  margin-top: 16px;
}

/* Data tables */
.zi-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.zi-table th {
  background: #e7f2de;
  color: #000000;
  font-family: roboto-bold;
  font-size: 14px;
  line-height: 18px;
  text-align: left;
  padding: 12px 16px;
  border: 0;
  border-bottom: 2px solid #0067AC;
}
.zi-table th.zi-hl { background: #0067AC; color: #ffffff; }
.zi-table td {
  font-size: 14px;
  line-height: 20px;
  color: #000000;
  padding: 11px 16px;
  border: 0;
  border-bottom: 1px solid #e2e2e2;
}
.zi-table td.zi-hl { background: #e7f2de; }
.zi-table td:not(:first-child) { text-align: right; }
.zi-table th:not(:first-child) { text-align: right; }
.zi-table .zi-subrow {  background: #e7f2de; }
.zi-table tbody tr:last-child td { border-bottom: 2px solid #0067AC; }
.zi-footnote { font-size: 12px; line-height: 17px; color: #4e5055; margin: 10px 0 30px; font-style:italic; }
.zi-footnote--right { text-align: right; margin-bottom:5px; }

/* Awards lists: two columns on desktop */
.zi-awards-list { columns: 2; column-gap: 44px; }
.zi-awards-list li { break-inside: avoid; -webkit-column-break-inside: avoid; }

/* Section heading with leading icon */
.zi-head-icon { display: flex; align-items: center; gap: 14px; }
.zi-head-icon img { width: 50px; height: 50px; flex-shrink: 0; }
.zi-head-icon::after { content: ""; flex: 1; height: 2px; background: #f7921e; }
.zi-head-icon--ore::after { background: #a47a57; }

/* Projects tag + note */
.zi-projects { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 14px 0 18px; }
.zi-tag {
  display: inline-block;
  background: #f7921e;
  color: #ffffff;
  font-family: roboto-bold;
  font-size: 16px;
  padding: 10px 22px;
}
.zi-tag-note { font-family: roboto-bold; font-size: 16px; line-height: 22px; color: #000000; margin: 0; flex: 1; min-width: 240px; }
.zi-note { background: #f4f6f8; border-left: 4px solid #ED8B00; padding: 16px 22px; font-size: 14px; line-height: 20px; color: #000000; margin: 4px 0 30px; }
.zi-banner-title h1 
{
  font-size: 35px;
}

/* The year in brief box */
.zi-brief { background: #f7921e; padding: 30px 34px; margin-bottom: 30px; }
.zi-brief .es-subhead { color: #ffffff; margin-top: 0; }
.zi-brief p { color: #ffffff; margin-bottom: 0; padding-bottom:15px; }

.zi-blackdots li::before { background: #000000; }
.es-table-wrap1
{
  margin-bottom: 0px;
}

/* Projects cream box */
.zi-projects-box { background: #fff0e2; padding: 26px 30px; margin: 30px 0 30px; }
.zi-projects-box .zi-projects { margin: 0 0 18px; padding-bottom: 16px; border-bottom: 2px solid #f7921e; }
.zi-projects-box .zi-awards-list { margin-bottom: 0; }
.zi-projects-box .zi-note { background: none; border: 0; border-top: 1px solid #f0c8a2; padding: 16px 0 0; margin: 18px 0 0; }

.tc-split-text .es-subhead { color: #0067AC; font-family: roboto-bold; font-size: 18px; line-height: 24px; }

.zi-projects-box p.zi-p { font-size: 16px; line-height: 22px; color: #000000; margin: 0 0 14px; }
.zi-projects-box .tc-block-head { margin-top: 22px; }
.zi-projects-box .tc-block-head:first-of-type { margin-top: 6px; }

/* ensure --dark beats the later .es-subhead redefinition */
.es-subhead.es-subhead--dark { color: #000000; }

.zi-projhead { border-bottom: 2px solid #f7921e; padding-bottom: 12px; margin-bottom: 20px; }

.zi-sublist { margin: 8px 0 6px 10px; }
.zi-projects-box p.tc-mat-label { margin-top: 16px; }
.oil-brief, .zi-tag-oil
{
  background-color: #00b9ad;
}
.zi-projects-box-oil
{
background-color: #e9f5f3;
}
.zi-projects-box-oil .zi-projects, .zi-projects-box-al .zi-projects {
    border-bottom:none;
}
.tbh
{
  border-bottom: 1px solid #00b9ad;
  padding-bottom: 8px;
}
.zi-projects-box p.tc-mat-label.zi-mat-line { color: #0067AC; border-bottom: 1px solid #00b9ad; padding-bottom: 8px; margin-bottom:15px; }

.zi-olist { list-style: lower-roman; margin: 0 0 16px 22px; padding: 0; }
.zi-olist li { font-size: 16px; line-height: 22px; color: #000000; margin-bottom: 6px; padding-left: 6px; }
.zi-brief-al
{
  background-color: #4eb857;
}
.tc-bu-list-al li strong
{
  display: inline;
}
.zi-projects-box-al 
{
  background-color: #ebf5ea;
}
.zi-projects-box-al .zi-tag
{
  background-color: #4eb857;
}
.lan 
{
border-bottom: 1px solid #4eb857; padding-bottom: 8px;
margin-bottom: 10px;  
}

.al-hed-icon::after
{
    background:#4eb857;
}
.zi-projects-box-al p.tc-mat-label { color: #0067AC; border-bottom: 1px solid #4eb857; padding-bottom: 8px; margin-bottom:15px; }

.zi-assetbox { border: 1px solid #00aeef; background: none; box-shadow: 0 8px 24px rgba(0,174,239,0.28); padding: 24px 28px; margin: 16px 0 28px; }
.zi-assetbox .tc-bu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; border-bottom: 1px solid #00aeef; padding-bottom: 16px; margin: 0 0 18px; }
.zi-assetbox .tc-bu-list li { margin-bottom: 0; }
.zi-brief-power
{
  background-color: #00aeef;
}

.zi-assetbox p { font-size: 16px; line-height: 22px; color: #000000; margin: 0 0 14px; }
.zi-assetbox p:last-child { margin-bottom: 0; }
.zi-brief-ore
{
  background-color: #a47a57;
}
.zi-table-ore .zi-subrow
{
font-family: roboto-bold;
background: #ffffff;
}
/* Keep the FY 2025-26 green highlight running continuously down the whole column */
.zi-table-ore td.zi-hl {
  background: #e7f2de;
}
.zi-projects-box-ore
{
  background-color: #f3eae3;
}
.zi-projects-box-ore .zi-tag
{
  background-color: #a47a57;
}
.ore-bottom-img
{
  margin-top: 30px;
}

/* Iron Ore Project Update */
.zi-projects-box-ore .zi-projects { border-bottom: none; margin-bottom: 6px; padding-bottom: 0; }
.zi-projects-box-ore p.tc-mat-label { font-family: roboto-bold; font-size: 16px; line-height: 22px; margin: 20px 0 10px; border-bottom:1px solid #a47a57; padding-bottom:8px; }
.zi-brief-steel { background-color: #7c95a2; }

/* Ferrochrome accents */
.zi-brief-ferro { background-color: #989684; }
.zi-projects-box-ferro { background-color: #f0eeec; }
.zi-projects-box-ferro .zi-tag { background-color: #989684; }
.zi-projects-box-ferro .zi-projects { border-bottom: none; margin-bottom: 6px; padding-bottom: 0; }
.zi-projects-box-ferro p.tc-mat-label { font-family: roboto-bold; font-size: 16px; line-height: 22px; margin: 20px 0 10px; border-bottom:1px solid #989684; padding-bottom: 8px;}
.zi-projects-box-ferro p.zi-p { color: #000000; }
.ferr:after 
{
  background: #989684;
}
.ore-bottom-fullimg { padding-top: 40px; }
.es-fullimg { display: block; width: 100%; height: auto; }

/* Copper India / Australia accents */
.zi-brief-copper { background-color: #d79224; }
.zi-projects-box-copper { background-color: #f9efe1; }
.zi-projects-box-copper .zi-tag { background-color: #d79224; }
.zi-projects-box-copper .zi-projects { border-bottom: none; margin-bottom: 6px; padding-bottom: 0; }
.zi-projects-box-copper p.zi-p { color: #000000; }
.cpper-bd:after 
{
  background: #d79224;
}
.tc-split-copper
{
  margin-bottom: 30px;
}

/* Port Business accents */
.zi-brief-port { background-color: #585aa8; }
.zi-awards-list li { break-inside: avoid; }
.zi-dashlist { list-style: none; margin: 8px 0 10px 4px; padding: 0; }
.zi-dashlist li { position: relative; padding-left: 18px; font-family: roboto-regular; font-size: 16px; line-height: 22px; color: #000000; margin-bottom: 6px; }
.zi-dashlist li::before { content: "–"; position: absolute; left: 0; top: 0; color: #000000; background: none; width: auto; height: auto; border-radius: 0; margin: 0; }
.port-bd:after
{
background:#585aa8;
}

/* Nicomet accent */
.zi-brief-nicomet { background-color: #929292; }

.mtbtm0riskheat{
  margin-bottom: 0;
}
.zi-banner-icon--zinc { background-color: #c97117; border-radius: 0px; padding:8px; }
.es-table-wrap--noscroll { overflow-x: visible; }
.es-table-wrap--noscroll .zi-table { width: 100%; min-width: 0; }
.tc-split-text, .tc-split-img { min-width: 0; }
.zi-banner-icon--port { background-color: #484a8b; padding:12px; }
.zi-banner-icon--nicomet { background-color: #777879; padding:12px;}


.pc-content{
  padding: 40px 0px;
}
.mobbannerImg{
  display: none;
}

/* Small-screen fixes */
@media (max-width: 767px) {
  /* tc-split: stack columns so image doesn't overlap/merge with text below */
  .tc-split,
  .tc-split--2-1 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* --fill uses absolute-positioned image; revert to normal flow when stacked */
  .tc-split--fill { align-items: start; }
  .tc-split--fill .tc-split-img { position: static; }
  .tc-split--fill .tc-split-img img {
    position: static;
    inset: auto;
    height: auto;
    object-fit: contain;
  }
}