@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");

body {
  font-family: "Manrope", sans-serif;
  background: #fff;
}

.font-manrope {
  font-family: "Manrope", sans-serif;
}

/* ================================================
   SECTION 1: MAIN BANNER AREA
   ================================================ */
.main-banner-area {
  position: relative;
  min-height: 100vh;
  /* background-image: url("../images/esg-2026/esg-banner.webp"); */
  background-size: cover;
  background-position: center top;
  display: flex;
  flex-direction: column;
  padding-bottom: 100px;
}

.home-banner-video-bg {
  position: absolute;
  inset: 0; /* spans full height of BOTH sections */
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover; /* the video equivalent of background-size: cover */
  object-position: center;
}

@media screen and (max-width: 767px) {
  .home-banner-video-bg {
    display: none;
  }

  .main-banner-area {
    background-image: url("../images/esg-2026/esg-banner.webp");
  }
}

.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0.42) 55%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 0;
}

/* ---- Sub Navigation (Floating / Sticky) ---- */
.esg-sub-nav {
  position: relative;
  /* top: 20vh; */
  /* z-index: 100; */
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(5.199999809265137px);
  width: max-content;
  margin: 130px auto 40px auto;
  border-radius: 10px;
  overflow: hidden;
}

.esg-sub-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.esg-sub-nav-list li a {
  display: block;
  padding: 10px 30px;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  position: relative;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.esg-sub-nav-list li a:hover {
  color: #ffffff;
  text-decoration: none;
}

.esg-sub-nav-list li.active > a {
  color: #ffffff;
}

.esg-sub-nav-list li.active > a::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #f47920;
  border-radius: 2px 2px 0 0;
}

/* ---- Banner Content ---- */
.banner-inner-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 0 50px;
}

.banner-text-wrap {
  height: 60vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.banner-text-wrap .banner-upper-section,
.banner-text-wrap .banner-bottom-section {
  width: 100%;
}

.banner-eyebrow {
  /* color: #ffa400;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 25px;
  line-height: normal;
  margin-bottom: 0.75rem;

  padding: 14px 34px;
  width: max-content;
  margin-left: auto;
  margin-right: auto;

  background: rgba(140, 62, 8, 0.1);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);

  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 40px;

  box-shadow: 0px 26px 100px rgba(0, 0, 0, 0.06); */
}

.banner-eyebrow {
  color: #ffa400;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 25px;
  line-height: normal;
  margin-bottom: 0.75rem;

  padding: 14px 34px;
  width: max-content;
  margin-left: auto;
  margin-right: auto;

  /* Keeping your original background tint */
  background: rgba(140, 62, 8, 0.1);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);

  border-radius: 100px; /* fuller pill shape like the reference */
  position: relative;

  box-shadow: 0px 26px 100px rgba(0, 0, 0, 0.06);
}

/* The reflective glass rim */
.banner-eyebrow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px; /* controls the border thickness */
  /* background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.4) 30%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0.4) 82%,
    rgba(255, 255, 255, 0.1) 100%
  ); */
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(255, 255, 255, 0.5) 0deg,
    /* top */ rgba(255, 255, 255, 0.4) 55deg,
    rgba(255, 255, 255, 0.4) 90deg,
    /* right end — glow */ rgba(255, 255, 255, 0.2) 150deg,
    rgba(255, 255, 255, 0.2) 200deg,
    /* bottom — dim */ rgba(255, 255, 255, 0.3) 260deg,
    /* bottom-left — dimmest */ rgba(255, 255, 255, 0.4) 315deg,
    /* top-left arc — bright */ rgba(255, 255, 255, 0.5) 360deg
      /* back to top */
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.banner-headline {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.22;
  color: #ffffff;
  margin-bottom: 22px;
}

.banner-desc {
  font-size: 15px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 34px;
}

.btn-esg-download,
.btn-esg-download:hover {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background-color: #f47920;
  background: linear-gradient(
    96.94deg,
    #9d1d96 -180.89%,
    #ffa400 -37.48%,
    #ff6b00 120.41%
  );
  /* box-shadow: 0px 14px 20px 0px rgba(0, 0, 0, 0.25); */

  color: #ffffff;
  padding: 13px 30px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    transform 0.2s ease;
}

/* .btn-esg-download:hover {
  background-color: #d9660e;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-2px);
} */

.btn-esg-download svg {
  flex-shrink: 0;
}

/* ================================================
   SECTION 2: ESG STATS (OVERLAPPING)
   ================================================ */
.esg-stats-section {
  position: relative;
  z-index: 2;
  margin-top: -20px;
  padding-bottom: 70px;
}

.esg-stats-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  /* background: rgba(16, 22, 32, 0.55);
  border: 1px solid rgba(150, 195, 230, 0.5);
  border-radius: 16px;
  padding: 30px 20px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); */
}

/* Decorative corner brackets */
/* .esg-stats-wrapper::before,
.esg-stats-wrapper::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: rgba(150, 205, 240, 0.9);
  border-style: solid;
}

.esg-stats-wrapper::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
  border-top-left-radius: 16px;
}

.esg-stats-wrapper::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
  border-bottom-right-radius: 16px;
} */

.esg-stat-item {
  flex: 1;
  text-align: center;
  padding: 0 24px;
}

.esg-stat-divider {
  flex-shrink: 0;
  width: 0;
  height: 90px;
  border-left: 1px dashed rgba(255, 255, 255, 0.28);
}

.stat-number {
  font-size: 38px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: 9px;
}

.stat-sup {
  font-size: 58%;
  font-weight: 600;
  /* vertical-align: super; */
}

.stat-mw {
  font-size: 28px;
  font-weight: 700;
}

.stat-dc {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  /* vertical-align: super; */
  margin-left: 2px;
}

.stat-star {
  font-size: 24px;
  font-weight: 600;
}

.stat-unit-sm {
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
  font-weight: 400;
  letter-spacing: 0.2px;
  margin: 0;
  line-height: 1.5;
}

/* ================================================
   SECTION 3: CEO QUOTE
   ================================================ */
.esg-ceo-section {
  /* background: linear-gradient(to bottom, #b7bce8 0%, #cdc4e6 42%, #dccfe4 100%); */
  padding: 60px 0;
}

.ceo-card {
  /* overflow: hidden; */
  position: relative;
}

.ceo-card-content {
  /* background: linear-gradient(93.22deg, #911d82 15.86%, #5b215f 106.78%); */
  /* background: linear-gradient(93.22deg, #bd26a9 15.86%, #93369a 106.78%); */
  /* background: linear-gradient(180deg, rgba(255, 223, 242, 0.8) 0%, rgba(255, 197, 229, 0.48) 100%); */
  background: #ab7caa;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
  padding: 10px;
  min-height: 450px;
}

.ceo-leaf-1 {
  position: absolute;
  left: -50px;
  bottom: -50px;
  z-index: 2;
}
.ceo-leaf-2 {
  position: absolute;
  right: -50px;
  top: -50px;
  z-index: 2;
}

.ceo-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding: 40px;
  border-radius: 10px;
}

.ceo-quote-title {
  font-size: 30px;
  /* line-height: 1.78; */
  color: #000;
  margin: 0 0 20px;
  font-weight: 600;
}

.ceo-quote-text {
  font-size: 23px;
  line-height: 1.78;
  color: #000;
  margin: 0 0 28px;
  font-weight: 400;
}

.ceo-quote-text strong {
  font-weight: 700;
}

.ceo-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;

  max-width: 90%;
}

.ceo-card-footer .btn-know-more,
.ceo-card-footer .btn-know-more:hover {
  /* box-shadow: 0px 14px 20px 0px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 1); */
  background: #ffffff;
  color: #000000;
  display: flex;
  align-items: center;
  gap: 5px;
  /* border-radius: 10px; */
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  padding: 10px 20px;
  font-weight: 600;
}

.ceo-meta {
  text-align: right;
  flex-shrink: 0;
}

.ceo-name {
  font-size: 14px;
  font-weight: 600;
  color: #2c2038;
  margin: 0 0 3px;
}

.ceo-designation {
  font-size: 12px;
  color: #342c3e;
  margin: 0;
  line-height: 1.45;
}

.ceo-card-photo-wrap {
  width: 320px;
  flex-shrink: 0;
  border-radius: 10px;
  /* position: relative; */
}

.ceo-portrait {
  width: 470px;
  height: auto;
  object-fit: contain;
  object-position: bottom right;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
}

/* Ornamental Divider */
.ceo-section-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 34px 0;
  max-width: 280px;
  margin: 0 auto;
}

.divider-line {
  flex: 1;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(140, 105, 175, 0.55) 0px,
    rgba(140, 105, 175, 0.55) 4px,
    transparent 4px,
    transparent 10px
  );
}

.divider-icon {
  font-size: 14px;
  color: #8a6ab0;
  flex-shrink: 0;
  line-height: 1;
}

/* ================================================
   SECTION 4: ESG PILLARS
   ================================================ */
.esg-pillars-section {
  /* background: linear-gradient(to bottom, #dccfe4 0%, #e6d3dc 55%, #eed7d8 100%); */
  padding: 0 0 80px;
  position: relative;
  z-index: 2;
}

.pillars-heading {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.68;
  color: #2c2038;
  text-align: center;
  margin-bottom: 44px;
  padding-top: 4px;
  position: relative;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

.pillars-heading::before {
  content: url("../images/esg-2026/sustainability-heading-icon.png");
  position: absolute;
  left: -30px;
  top: -10px;
}

.pillars-sparkle {
  color: #8b5cf6;
  font-size: 15px;
  margin-right: 4px;
  vertical-align: middle;
}

.hl-design {
  color: #7d1fa2;
  font-weight: 600;
}
.hl-operate {
  color: #7d1fa2;
  font-weight: 600;
}
.hl-grow {
  color: #d61f8c;
  font-weight: 600;
}
.hl-ten {
  color: #d61f8c;
  font-weight: 600;
}

/* Pillar Grid */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pillar-card {
  background: rgba(250, 236, 240, 0.74);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* border: 1px solid rgba(255, 255, 255, 0.62); */
  border-radius: 20px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pillar-card.pillar-env {
  background: rgba(125, 31, 162, 0.1);
}

.pillar-card.pillar-social {
  background: rgba(214, 31, 140, 0.1);
}

.pillar-card.pillar-gov {
  background: rgba(234, 0, 41, 0.1);
}

.pillar-card .pillar-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.pillar-icon-wrap {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

/* Environment: green */
.pillar-env .pillar-icon-wrap {
  color: #3e8e5a;
}
.pillar-env .pillar-title {
  color: rgba(125, 31, 162, 1);
}

/* Social: magenta */
.pillar-social .pillar-icon-wrap {
  color: #b84a8a;
}
.pillar-social .pillar-title {
  color: rgba(214, 31, 140, 1);
}

/* Governance: orange-red */
.pillar-gov .pillar-icon-wrap {
  color: #c0503a;
}
.pillar-gov .pillar-title {
  color: rgba(234, 0, 41, 1);
}

.pillar-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.pillar-desc {
  font-size: 15px;
  line-height: 1.68;
  color: rgba(0, 0, 0, 0.8);
  margin: 0;
  flex: 1;
}

.btn-pillar-more {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.45);
  width: max-content;
  font-weight: 600;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.pillar-env .btn-pillar-more,
.pillar-env .btn-pillar-more svg {
  color: rgba(0, 0, 0, 0.8);
}
.pillar-social .btn-pillar-more,
.pillar-social .btn-pillar-more svg {
  color: rgba(0, 0, 0, 0.8);
}
.pillar-gov .btn-pillar-more,
.pillar-gov .btn-pillar-more svg {
  color: rgba(0, 0, 0, 0.8);
}

/* .btn-pillar-more:hover {
  background: rgba(80, 55, 110, 0.08);
  border-color: rgba(80, 55, 110, 0.55);
  color: #2a1840;
  text-decoration: none;
} */

.btn-arrow {
  font-size: 16px;
  line-height: 1;
}

.section-wrapper {
  position: relative;
  /* background: linear-gradient(
    to bottom,
    rgba(30, 32, 33, 0) 0%,
    rgba(30, 32, 33, 0.25) 10%,
    rgba(30, 32, 33, 0.55) 10%,
    rgba(30, 32, 33, 0.75) 15%,
    rgba(30, 32, 33, 0.9) 20%,
    #a88260 30%,
    #c09a70 38%,
    #c8a678 46%,
    #d4b285 55%,
    #dcc0a0 66%,
    #e8d0b8 78%,
    #f0e0cc 88%,
    #f6eadc 96%,
    #faf0e6 100%
  ); */

  background: linear-gradient(
    180deg,
    rgba(32, 41, 45, 0) 0%,
    #26353d 8.99%,
    rgba(205, 176, 144, 0.8) 52.4%,
    rgba(205, 176, 144, 0.2) 100%
  );
  /* transform: rotate(180deg); */
  padding-top: 250px;
  margin-top: -255px;
  /* max-width: 1920px; */
}

/* ================================================
   SECTIONS 5 & 6: SHARED "NATURE" WRAPPER
   Provides the single light base colour that the jungle
   backdrop fades into and that the slider sits on, so the
   two sections read as one continuous surface.
   NOTE: the wrapper must NOT set overflow/transform — that
   would break ScrollTrigger's pin (it pins with position:
   fixed) and reintroduce the jump.
   ================================================ */
.esg-nature {
  position: relative;
  isolation: isolate;
  background-color: #f5eef4; /* light base shared by both sections */
  /* background-image: url("../images/esg-2026/highlight-section-full-bg.webp");
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat; */
}

/* ================================================
   SECTION 5: STATIC KEY HIGHLIGHTS (InTENtion)
   ================================================ */
.esg-highlights-section {
  position: relative;
  z-index: 1; /* above its backdrop */
  background: transparent;
  padding: 120px 0 60px;
}

/* Key Highlights backdrop — the UPPER part of the beach aerial. Scrolls with
   the section and bleeds up over the section above. `object-position` frames
   which slice shows; keep its bottom edge on sand so it meets the slider's
   backdrop cleanly. */
.esg-highlights-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../images/esg-2026/highlight-section-full-bg.webp");
  background-size: 100%;
  background-position: left top;
  background-repeat: no-repeat;
  top: -200px;
}

.esg-highlights-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Frosted card that holds the stats grid — sits on the aerial */
.esg-highlights-card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
  padding: 52px 56px;
}

/* ================================================
   SECTION 6: GSAP CARD SLIDER
   Headings sit outside the animated track; the section is pinned while the
   track translates horizontally. Full 100vh so pinning causes NO height change
   (no jump). Its aerial backdrop is a CHILD (.esg-slider-bg), so GSAP pins it
   together with the section — the background stays frozen while cards slide.
   ================================================ */
.esg-slider-section {
  /* Shared page gutter so the heading and the first card line up, and the
     last card leaves a matching gap on the right. */
  --slider-gutter: max(24px, calc((100vw - 1140px) / 2));
  position: relative;
  z-index: 1;
  background: transparent;
  /* min-height: 100vh; */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* heading sits high, over the aerial; cards below */
  padding: clamp(60px, 10vh, 150px) 0 60px;
  overflow: hidden; /* clip the off-screen cards of the horizontal track */
  /* max-height: 720px !important;; */
}

/* Large screens (pinned slider): fill the viewport and center the
   heading + card strip vertically so the leftover height is split evenly
   instead of collecting at the bottom while the section is pinned. */
@media (min-width: 992px) {
  .esg-slider-section {
    min-height: 100vh;
    justify-content: center;
  }
}

/* Slider backdrop — the LOWER part of the beach aerial. As a child of the
   pinned section it is frozen during the horizontal slide (no vertical pan).
   `object-position: center` shows the light sand behind the heading; nudge it
   to reframe. The bottom fades into the light base for a clean lower edge. */
.esg-slider-bg {
  position: absolute;
  inset: 0;
  z-index: 0; /* behind the content */
  overflow: hidden;
  pointer-events: none;
}

.esg-slider-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.esg-slider-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(245, 238, 244, 0) 0%, #f5eef4 100%);
}

/* Keep the content above the backdrop */
.esg-slider-head,
.esg-slider-viewport {
  position: relative;
  z-index: 1;
}

/* Light halo behind the heading/description text so it stays legible over the
   aerial, and nudge the muted description a touch darker. */
/* .esg-slider-head .pp-tagline,
.esg-slider-head .pp-heading,
.esg-slider-head .pp-overview-desc {
  text-shadow:
    0 1px 14px rgba(245, 238, 244, 0.95),
    0 0 3px rgba(245, 238, 244, 0.85);
} */

.esg-slider-head .pp-overview-desc {
  color: rgba(0, 0, 0, 0.87);
}

/* Headings — static, NOT animated */
.esg-slider-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  padding: 0 var(--slider-gutter);
  margin-bottom: 34px;
}

.esg-slider-head-left {
  flex: 0 0 auto;
  max-width: 420px;
  position: relative;
}

.pp-sparkle {
  position: absolute;
  top: -20px;
  left: -25px;
}

.esg-slider-head-desc {
  flex: 1;
  max-width: 520px;
}

/* Viewport clips the track; the track is the element GSAP translates */
.esg-slider-viewport {
  width: 100%;
  overflow: visible;
}

.esg-slider-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 28px;
  width: max-content;
  padding: 0 var(--slider-gutter);
  will-change: transform;
}

/* Each card in the track = one slide */
.esg-slide {
  flex: 0 0 auto;
  width: min(1000px, 90vw);
}

/* ---- Slide 1: InTENtion ------------------------------------------ */

.intention-heading {
  font-size: 26px;
  font-weight: 400;
  color: #2c2038;
  text-align: left;
  margin-bottom: 30px;
  line-height: 1.35;
  /* Normal text flow (not flex) so the line wraps; width fits the content on
     wide screens but is capped to the container so it wraps on narrow ones. */
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.intention-heading::before {
  content: url(../images/esg-2026/inten-icon.png);
  position: absolute;
  left: -30px;
  top: -10px;
}

.intention-sparkle {
  width: 22px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  margin-top: -4px;
}

.hl-ten-gold {
  color: #d61f8c;
  font-weight: 700;
}

.intention-stats-grid {
  width: 100%;
}

.intention-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 26px 0;
}

/* Row separators kept subtle to match the clean look of Screenshot 1 */
/* .irow-divider {
  width: 100%;
  height: 1px;
  background: rgba(44, 32, 56, 0.08);
} */

.intention-stat {
  text-align: center;
  padding: 0 24px;
}

.is-value {
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 8px;
}

.is-pct {
  /* font-size: 30px;
  font-weight: 600; */
}

.is-unit-sm {
  /* font-size: 24px; */
  /* font-weight: 600; */
}

.is-label {
  font-size: 14px;
  /* font-weight: 600; */
  letter-spacing: 0.8px;
  color: rgba(0, 0, 0, 0.87);
  margin: 0;
  line-height: 1.5;
}

.is-label.uppercase {
  text-transform: uppercase;
}

/* Row value colours — match established pillar palette */
.irow-env .is-value {
  color: #7d1fa2;
}
.irow-social .is-value {
  color: #d61f8c;
}
.irow-gov .is-value {
  color: #ea0029;
}

/* ---- Slide 2+: Pillar Deep-Dive panels ----------------------------- */

.pp-top-row {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  margin-bottom: 30px;
}

.pp-intro {
  flex: 0 0 280px;
}

.pp-sparkle {
  display: block;
  margin-bottom: 10px;
}

.pp-tagline {
  font-size: 35px;
  font-weight: 400;
  color: #2c2038;
  margin: 0 0 4px;
  line-height: 1.3;
}

.pp-heading {
  font-size: 33px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

.env-pillar-hl {
  color: #7d1fa2;
}

.pp-overview-desc {
  flex: 1;
  font-size: 15px;
  line-height: 1.78;
  color: rgba(0, 0, 0, 0.87);
  margin: 0;
  padding-top: 6px;
}

/* Detail card */
.pp-detail-card {
  display: flex;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* border: 1px solid rgba(255, 255, 255, 0.55); */
  border-radius: 16px;
  overflow: hidden;
}

.pp-card-img-wrap {
  width: 550px;
  flex-shrink: 0;
  overflow: hidden;
  max-height: 360px;
}

@media (min-width: 1500px) {
  .pp-detail-card {
    min-height: 50vh;
  }

  .pp-card-img-wrap {
    max-height: none;
  }
}

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

.pp-card-body {
  flex: 1;
  padding: 26px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: url("../images/esg-2026/gsap-bg.png") no-repeat top right;
  background-size: 100px;
  /* width: 350px; */
}

/* Metrics row inside card */
.pp-card-metrics {
  display: flex;
  align-items: start;
}

.pp-metric {
  flex: 1;
  text-align: start;
}

.pp-metric-sep {
  flex-shrink: 0;
  width: 1px;
  height: 40px;
  background: rgba(44, 32, 56, 0.12);
}

.pp-metric-val {
  font-size: 30px;
  font-weight: 500;
  color: #7d1fa2;
  line-height: 1.1;
  margin-bottom: 4px;
}

.ppm-mw {
  font-size: 20px;
  font-weight: 500;
}
.ppm-dc {
  font-size: 11px;
  font-weight: 500;
  /* vertical-align: super; */
}
.ppm-pct {
  /* font-size: 20px; */
  font-weight: 500;
}

.pp-metric-lbl {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(0, 0, 0, 0.87);
  margin-top: 10px;
}

.pp-card-desc {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(26, 10, 46, 0.8);
  margin: 0;
  flex: 1;
}

.btn-pp-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* padding: 8px 18px; */
  /* border: 1px solid rgba(125, 31, 162, 0.38); */
  /* border-radius: 50px; */
  font-size: 15px;
  font-weight: 600;
  /* color: #7d1fa2; */
  color: rgba(0, 0, 0, 0.6);
  /* box-shadow: 0px 14px 20px 0px rgba(0, 0, 0, 0.25); */
  text-decoration: none;
  align-self: flex-start;
  /* transition:
    background-color 0.2s ease,
    border-color 0.2s ease; */
}

.btn-pp-more:hover {
  /* background: rgba(125, 31, 162, 0.08); */
  /* border-color: rgba(125, 31, 162, 0.55); */
  color: rgba(0, 0, 0, 0.6);
  /* box-shadow: 0px 14px 20px 0px rgba(0, 0, 0, 0.25); */

  text-decoration: none;
}

/* ---- Slide 3: Social pillar colour overrides ---- */
/* .social-pillar-hl {
  color: #d61f8c;
}
.social-metric {
  color: #d61f8c;
} */

/* .btn-pp-more.social-btn {
  border-color: rgba(214, 31, 140, 0.38);
  color: #d61f8c;
}
.btn-pp-more.social-btn:hover {
  background: rgba(214, 31, 140, 0.08);
  border-color: rgba(214, 31, 140, 0.55);
  color: #9a1060;
} */

/* ---- Slide 4: Governance pillar colour overrides ---- */
/* .gov-pillar-hl {
  color: #ea0029;
}
.gov-metric {
  color: #ea0029;
} */

/* .btn-pp-more.gov-btn {
  border-color: rgba(234, 0, 41, 0.38);
  color: #ea0029;
}
.btn-pp-more.gov-btn:hover {
  background: rgba(234, 0, 41, 0.08);
  border-color: rgba(234, 0, 41, 0.55);
  color: #a80020;
} */

/* ================================================
   SECTIONS 5 & 6 — RESPONSIVE FALLBACK
   Below 992px gsap.matchMedia reverts the pin, so the
   card track becomes a normal horizontal swipe strip and
   the headings stack above it.
   ================================================ */
@media (max-width: 991px) {
  .esg-highlights-section {
    padding: 80px 0 40px;
  }

  .esg-highlights-bg {
    top: -90px;
  }

  .esg-highlights-card {
    padding: 36px 24px;
  }

  .esg-slider-section {
    --slider-gutter: 20px;
    /* Pin is off on mobile — collapse the full-height so the swipe strip
       reads as a normal-flow block. */
    min-height: 0;
    display: block;
    padding: 56px 0 70px;
  }

  /* Backdrop covers the shorter mobile block instead of a full-height section */
  .esg-slider-bg {
    height: auto;
    bottom: 0;
  }

  .esg-slider-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
  }

  .esg-slider-head-left,
  .esg-slider-head-desc {
    max-width: 100%;
  }

  /* Pin is off — the JS swipe slider (initSwipeSlider) moves the track via a
     GSAP transform, so the viewport just clips and the track owns horizontal
     gestures while vertical page scroll still passes through (pan-y). */
  .esg-slider-viewport {
    overflow: hidden;
  }

  .esg-slider-track {
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }

  .esg-slider-viewport.is-dragging .esg-slider-track {
    cursor: grabbing;
  }

  .pp-detail-card {
    flex-direction: column;
  }

  .pp-card-img-wrap {
    width: 100%;
    height: 220px;
  }
}

@media (max-width: 767px) {
  .intention-heading {
    font-size: 21px;
  }

  .intention-row {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
    padding: 18px 0;
  }

  .intention-stat {
    padding: 0;
  }

  .is-value {
    font-size: 36px;
  }

  .esg-slide {
    width: 86vw;
  }

  .pp-card-metrics {
    flex-wrap: wrap;
    gap: 16px;
  }

  .ceo-portrait {
    position: relative;
    width: 100%;
    height: 100%;
    right: auto;
  }

  .ceo-leaf-2 {
    right: -25px;
    top: -25px;
    z-index: 2;
    width: 50px;
    height: 50px;
  }
  
  .ceo-leaf-1 {
    left: -25px;
    border-bottom: -25px;
    z-index: 2;
    width: 50px;
    height: 50px;
  }
}

/* ================================================
   SECTION 7: PEOPLE AT THE HEART (pinned GSAP scroll slider)
   Same mechanism as SECTION 6: the section pins full-height and vertical
   scroll drives the cards horizontally (one card per snap) before releasing
   to the next section. Full 100vh so pinning causes no layout jump.
   Heading + description sit high over the dry-field aerial; the card strip
   rides low over the green grass.
   ================================================ */
.people-at-heart {
  --slider-gutter: max(24px, calc((100vw - 1140px) / 2));
  position: relative;
  background: url("../images/esg-2026/high-angle-shot-field-with-partially-gone-dry-because-changes-weather 1920.webp");
  background-size: cover;
  background-position: top center;
  /* height: 100vh; fixed so the pinned content is sized to fit the viewport */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(44px, 7vh, 90px) 0 clamp(28px, 4vh, 56px);
  overflow: hidden; /* clip the off-screen cards of the horizontal track */
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

.people-at-heart-slider-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  padding: 0 var(--slider-gutter);
  margin-bottom: 28px;
}

.people-at-heart-slider-head-left {
  flex: 0 0 auto;
  max-width: 420px;
  position: relative;
}

.people-at-heart-slider-head-desc {
  flex: 1;
  max-width: 360px;
  color: rgba(0, 0, 0, 0.87);
}

/* "heart of everything." — social/people pink to match the pillar palette */
.pah-heading-hl {
  color: #d61f8c;
}

/* ---- Slider viewport + track ----
   The viewport fills the remaining height of the pinned section so each card
   can stretch to that height and stay fully visible (no bottom clipping). */
.pah-viewport {
  position: relative;
  overflow: hidden; /* clip the off-screen cards of the horizontal track */
  flex: 1 1 auto;
  min-height: 0; /* allow the flex child to actually shrink to fit */
  display: flex;
  /* Vertical breathing room so the cards' drop shadow isn't clipped. */
  padding: 6px 0 60px;
}

.pah-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 24px;
  width: max-content;
  height: 100%;
  padding: 0 var(--slider-gutter);
  will-change: transform;
}

.pah-card {
  flex: 0 0 auto;
  width: 360px;
  height: 100%; /* fill the viewport height → whole card always visible */
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(20, 10, 30, 0.14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pah-card-img-wrap {
  position: relative;
  overflow: hidden;
  /* flex: 1 1 auto; image takes the leftover space above the fixed body */
  height: 200px;
  /* margin-bottom: 10px; */
}

.pah-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.pah-card:hover .pah-card-img {
  transform: scale(1.05);
}

/* Category pill overlapping the top-left of the image */
.pah-card-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  color: #d61f8c;
}

/* .pah-card-tag.tag-pink {
  color: #d61f8c;
}
.pah-card-tag.tag-green {
  color: #3e8e5a;
}
.pah-card-tag.tag-blue {
  color: #2563a8;
}
.pah-card-tag.tag-orange {
  color: #f47920;
} */

.pah-card-body {
  padding: 25px 25px 25px 25px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1; /* keep its natural height; the image flexes instead */
}

.pah-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #2c2038;
  margin: 0;
  line-height: 1.3;
}

.pah-card-desc {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(90, 69, 112, 1);
  margin: 0;
  /* Clamp so the body height stays bounded and nothing overflows the card */
  display: -webkit-box;
  /* -webkit-line-clamp: 3; */
  /* line-clamp: 3; */
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.pah-card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  /* color: #f47920; */
  color: rgba(0, 0, 0, 0.6);
  /* box-shadow: 0px 14px 20px 0px rgba(0, 0, 0, 0.25); */

  text-decoration: none;
  align-self: flex-start;
  transition:
    gap 0.2s ease,
    color 0.2s ease;
}

.pah-card-link:hover {
  color: #d9660e;
  gap: 9px;
  text-decoration: none;
  font-weight: 600;
}

@media (max-width: 991px) {
  .people-at-heart {
    --slider-gutter: 20px;
    /* Pin is off on mobile — collapse full-height so the swipe strip reads as a
       normal-flow block. */
    height: auto;
    min-height: 0;
    display: block;
    padding: 64px 0 70px;
  }

  .people-at-heart-slider-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 32px;
  }

  .people-at-heart-slider-head-left,
  .people-at-heart-slider-head-desc {
    max-width: 100%;
  }

  /* Pin is off — the JS swipe slider (initSwipeSlider) moves the track via a
     GSAP transform; the viewport just clips and the track owns horizontal
     gestures while vertical page scroll passes through (pan-y). */
  .pah-viewport {
    overflow: hidden;
  }

  .pah-track {
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }

  .pah-viewport.is-dragging .pah-track {
    cursor: grabbing;
  }

  /* Cards revert to a natural height with a fixed-height image (the flex-fill
     sizing only makes sense inside the pinned full-height viewport). */
  .pah-card {
    height: auto;
  }

  .pah-card-img-wrap {
    flex: 0 0 auto;
    height: 200px;
    min-height: 0;
  }
}

@media (max-width: 767px) {
  .pah-card {
    width: 260px;
  }
}

/* ================================================
   SECTION 8: GOVERNANCE — Accountable. Transparent. Trusted.
   ================================================ */
.gov-lead-section {
  position: relative;
  background: #ffffff;
  /* padding: clamp(50px, 8vh, 90px) 0 clamp(50px, 8vh, 90px); */
  padding: 50px 0 0 0;
}

.gov-lead-section .gov-btn {
  color: rgba(0, 0, 0, 0.6);
  margin-left: auto;
  border: 1px solid rgba(248, 248, 248, 1);
  box-shadow: 0px 14px 20px 0px rgba(0, 0, 0, 0.06);
  padding: 10px 14px;
  border-radius: 10px;
}

/* Heading (left) + description & CTA (right) */
.gov-lead-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 40px;
}

.gov-lead-head-left {
  flex: 0 0 auto;
  max-width: 460px;
  position: relative;
}

.gov-lead-head-right {
  flex: 1;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  padding-top: 6px;
}

.gov-lead-desc {
  text-align: left;
}

/* "Transparent." red, "Trusted." a softer muted red */
.gov-lead-hl {
  color: #ea0029;
}

.gov-lead-hl-soft {
  color: rgba(234, 0, 41, 0.8);
}

/* ---- Governance stat cards ---- */
.gov-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

.gov-stat-card {
  border-radius: 16px;
  padding: 26px 26px 24px;
  min-height: 128px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  backdrop-filter: blur(7.599999904632568px);
}

.gov-stat-val {
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
}

.gsc-unit {
  /* font-size: 26px; */
  font-weight: 600;
  margin-left: 1px;
}

.gov-stat-lbl {
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: rgba(0, 0, 0, 0.87);
  margin: 0;
  line-height: 1.5;
}

/* Palette per card — matches the established pillar colours */
.gsc-purple {
  background: rgba(125, 31, 162, 0.1);
}
.gsc-purple .gov-stat-val {
  color: #7d1fa2;
}

.gsc-pink {
  background: rgba(247, 148, 29, 0.1);
}
.gsc-pink .gov-stat-val {
  color: rgba(247, 148, 29, 1);
}

.gsc-red {
  background: rgba(214, 31, 140, 0.1);
}
.gsc-red .gov-stat-val {
  color: rgba(214, 31, 140, 1);
}

.gsc-orange {
  background: rgba(255, 105, 0, 0.1);
}
.gsc-orange .gov-stat-val {
  color: rgba(255, 105, 0, 1);
}

/* ---- Leadership team photo ---- */
.gov-lead-photo {
  /* border-radius: 20px; */
  margin-top: -50px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

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

/* ================================================
   SECTION 9: RECOGNITION — Asia's leading sustainability platforms
   ================================================ */
.esg-recognition {
  /* background: #ffffff; */
  padding: clamp(50px, 8vh, 90px) 0 clamp(50px, 8vh, 90px);
}

/* ---- Heading ---- */
.rec-head {
  text-align: center;
  margin-bottom: clamp(34px, 5vh, 54px);
}

.rec-title {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 400;
  line-height: 1.32;
  color: #2c2038;
  margin: 0 0 14px;
}

.rec-title-hl {
  color: #7d1fa2;
}

.rec-desc {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(4, 4, 4, 0.8);
  margin: 0 auto;
  /* max-width: 520px; */
}

/* ---- Infinite logo marquee ---- */
.rec-marquee {
  position: relative;
  overflow: hidden;
  margin-bottom: clamp(40px, 6vh, 64px);
  /* Fade the strip's edges so logos ease in/out instead of hard-cutting */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 7%,
    #000 93%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 7%,
    #000 93%,
    transparent 100%
  );
}

.rec-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: recMarquee 32s linear infinite;
}

/* Pause on hover so a user can look at a logo */
.rec-marquee:hover .rec-marquee-track {
  /* animation-play-state: paused; */
}

.rec-logo {
  flex: 0 0 auto;
  /* Uniform side margins (incl. the wrap boundary) keep the -50% loop seamless */
  margin: 0 clamp(24px, 4vw, 50px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rec-logo img {
  max-height: 80px;
  width: auto;
  display: block;
  object-fit: contain;
  /* Design shows muted/monochrome marks; drop this filter for full-colour logos */
  /* filter: grayscale(1); */
  /* opacity: 0.85; */
  /* transition:
    filter 0.3s ease,
    opacity 0.3s ease; */
}

/* .rec-logo img:hover {
  filter: grayscale(0);
  opacity: 1;
} */

/* Two identical sets in the track → shift exactly one set for a seamless loop */
@keyframes recMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

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

/* ---- CTA banner (gradient replaced with a solid colour for now) ---- */
.rec-cta {
  /* background: #8a1a86; */
  background: url("../images/esg-2026/recognize-section-bg.png") no-repeat
    center center;
  border-radius: 22px;
  padding: clamp(34px, 5vw, 52px) clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  overflow: hidden;
  background-size: 100%;
}

.rec-cta-title {
  font-size: clamp(21px, 2.8vw, 32px);
  font-weight: 400;
  line-height: 1.3;
  color: #ffffff;
  margin: 0;
}

.rec-cta-hl {
  color: #f7a12b;
}

.rec-cta-btn,
.rec-cta-btn:hover {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* background-color: #f47920; */
  background: linear-gradient(
    96.94deg,
    #9d1d96 -180.89%,
    #ffa400 -37.48%,
    #ff6b00 120.41%
  );

  /* box-shadow: 0px 14px 20px 0px rgba(0, 0, 0, 0.25); */

  color: #ffffff;
  padding: 13px 26px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    transform 0.2s ease;
}

/* .rec-cta-btn:hover {
  background-color: #d9660e;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-2px);
} */

.rec-cta-btn svg {
  flex-shrink: 0;
}

/* ================================================
   GLOBAL RESPONSIVE PASS
   Auto-responsive rules for every section (no dedicated mobile design).
   Section-specific slider rules already live in the media queries above;
   these cover the banner, stats, CEO card, pillars and governance sections.
   ================================================ */

/* ---------- Tablet & below (<= 991px) ---------- */
@media (max-width: 991px) {
  /* Banner */
  .main-banner-area {
    min-height: auto;
    padding-bottom: 60px;
  }

  .esg-sub-nav {
    margin: 130px auto 16px;
    max-width: 92%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .esg-sub-nav-list {
    width: max-content;
  }

  .esg-sub-nav-list li a {
    padding: 10px 20px;
    font-size: 13px;
  }

  .banner-text-wrap {
    height: auto;
    gap: 40px;
    padding: 10px 0 20px;
  }

  .banner-headline {
    font-size: 32px;
  }

  .banner-headline br,
  .banner-desc br {
    display: none;
  }

  /* Stats → wrap to two per row, drop the vertical dividers */
  .esg-stats-wrapper {
    flex-wrap: wrap;
    row-gap: 30px;
  }

  .esg-stat-item {
    flex: 0 0 50%;
  }

  .esg-stat-divider {
    display: none;
  }

  /* CEO card → stack body over photo */
  .ceo-card-content {
    flex-direction: column-reverse;
  }

  .ceo-card-photo-wrap {
    width: 100%;
    height: 300px;
  }

  .ceo-card-body {
    padding: 30px 28px 26px;
  }

  /* Pillars → two columns */
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pillars-heading {
    font-size: 19px;
    line-height: 1.6;
    width: 100%;
  }

  /* Governance → heading stacks, stats to two per row */
  .gov-lead-head {
    flex-direction: column;
    gap: 22px;
  }

  .gov-lead-head-left,
  .gov-lead-head-right {
    max-width: 100%;
  }

  .gov-lead-head-right {
    align-items: flex-start;
  }

  .gov-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

/* ---------- Mobile (<= 767px) ---------- */
@media (max-width: 767px) {
  .banner-eyebrow {
    font-size: 17px;
    letter-spacing: 2px;
    width: 100%;
  }

  .banner-headline {
    font-size: 26px;
  }

  .banner-desc {
    font-size: 14px;
  }

  /* Stats → single column */
  .esg-stat-item {
    flex: 0 0 100%;
  }

  .stat-number {
    font-size: 32px;
  }

  /* CEO card footer stacks */
  .ceo-card-footer {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 16px;
  }

  .ceo-meta {
    text-align: left;
  }

  .ceo-quote-text {
    font-size: 15px;
  }

  /* Pillars → single column */
  .pillars-grid {
    grid-template-columns: 1fr;
  }

  .pillars-heading::before {
    left: -4px;
    top: -30px;
  }

  /* Section rhythm */
  .esg-ceo-section {
    padding: 40px 0;
  }

  .esg-pillars-section {
    padding: 0 0 50px;
  }

  .gov-lead-section {
    padding: 44px 0;
  }

  .gov-stat-val {
    font-size: 32px;
  }

  .gsc-unit {
    font-size: 21px;
  }

  .gov-lead-photo {
    border-radius: 14px;
  }

  /* Recognition */
  .esg-recognition {
    padding: 44px 0;
  }

  .rec-logo {
    margin: 0 22px;
  }

  .rec-logo img {
    height: 46px;
  }

  .rec-cta {
    border-radius: 16px;
    background-size: cover;
  }

  .pp-sparkle {
    top: -30px;
    left: -10px;
  }

  .people-at-heart {
    background-position: left top;
  }
}

/* ---------- Small phones (<= 480px) ---------- */
@media (max-width: 480px) {
  .banner-headline {
    font-size: 23px;
    line-height: 3rem;
  }

  /* Governance stats → single column */
  /* .gov-stats-grid {
    grid-template-columns: 1fr 1fr;
  } */

  .pillars-heading::before {
    display: none;
  }
}

/* ================================================
   SECTION 10: A DECADE OF HAPPYNESS (timeline carousel)
   Cards live inside .container, so the first card lines up with the heading
   (no extra gutter needed). The dashed line behind the cards reads as a
   timeline; it shows through the gaps between the white cards.
   ================================================ */
.decade-section {
  position: relative;
  /* background: url("../images/esg-2026/happyness-section-bg.png"); */
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;

  overflow-x: clip; /* guard against sub-pixel bleed from the full-width track */
}

.decade-section-p {
  padding: clamp(50px, 8vh, 90px) 0 clamp(70px, 14vh, 170px);
}

.decade-section-bg {
  position: absolute;
  /* bottom: !important; */
  z-index: -1;
  left: 0;
  /* background: url("../images/"); */
  /* height: 100vh; */
  /* inset: 0; */
  /* background-size: cover; */
  bottom: 0;
}
.decade-section-bg img {
  width: 100%;
}

/* Heading (left) + description (right) */
.decade-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 40px;
}

.decade-head-left {
  flex: 0 0 auto;
  max-width: 380px;
  position: relative;
}

.decade-title-1,
.decade-title-2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 400;
  line-height: 1.12;
  color: #2c2038;
  margin: 0;
}

.decade-hl {
  color: #7d1fa2;
}

.decade-desc {
  flex: 1;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(0, 0, 0, 0.87);
  margin: 0;
  padding-top: 8px;
}

/* ---- Carousel ---- */
.decade-slider {
  position: relative;
}

.decade-viewport {
  position: relative;
  overflow: hidden; /* clip off-screen cards at the screen edges */
  margin: 12px 0 28px;
  padding-bottom: 40px;
  /* Full-bleed to BOTH screen edges so cards run off-screen on either side
     while scrolling. The track's gutter padding (set from the container width
     in JS) keeps the first card on the heading line and the last card on the
     container's right line. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* Dashed timeline line behind the cards (visible in the gaps) */
/* .decade-viewport::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px dashed rgba(86, 150, 214, 0.5);
  z-index: 0;
} */

.decade-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 28px;
  width: max-content;
  /* Gutter = distance from screen edge to the container edge (set in JS so the
     first/last cards line up with the container). Fallback until JS runs. */
  padding: 0 var(--decade-gutter, 24px);
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  position: relative;
  z-index: 1;
}

.decade-viewport.is-dragging .decade-track {
  cursor: grabbing;
}

.decade-track img {
  -webkit-user-drag: none;
}

.decade-card {
  flex: 0 0 auto;
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  /* box-shadow: 0 24px 60px rgba(20, 10, 30, 0.12); */
  box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  overflow: hidden;
  max-width: 1000px;
}

.decade-card-img {
  /* flex: 0 0 44%; */
  width: 50%;
  overflow: hidden;
}

.decade-card-img img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
  display: block;
}

.decade-card-body {
  flex: 1;
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.decade-year {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  /* background: linear-gradient(90deg, #b06bd6 0%, #d61f8c 100%); */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* color: transparent;
  border: 1px solid rgba(125, 31, 162, 1) */
  color: transparent; /* no fill */
  -webkit-text-stroke: 1px rgba(125, 31, 162, 1);
}

.decade-card-subtitle {
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(0, 0, 0, 0.87);
  margin: 0;
  line-height: 1.4;
}

.decade-card-desc {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
  flex: 1;
  /* margin-bottom: 30px; */
}

.decade-card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
  align-self: flex-start;
  transition:
    gap 0.2s ease,
    color 0.2s ease;
}

.decade-card-link:hover {
  color: rgba(0, 0, 0, 0.6);
  gap: 9px;
  text-decoration: none;
}

/* ---- Nav: prev · dots · next ---- */
.decade-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}

.decade-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid #f47920;
  background: transparent;
  color: #f47920;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}

.decade-arrow:hover {
  background: #f47920;
  color: #ffffff;
}

.decade-arrow:hover svg {
  color: #ffffff;
}

.decade-arrow:disabled {
  opacity: 0.4;
  cursor: default;
  background: transparent;
  color: #f47920;
}

.decade-arrow-ico {
  font-size: 24px;
  line-height: 1;
  margin-top: -2px;
}

.decade-dots {
  display: flex;
  align-items: center;
  gap: 9px;
}

.decade-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(44, 32, 56, 0.22);
  cursor: pointer;
  transition:
    background 0.25s ease,
    width 0.25s ease;
}

.decade-dot.is-active {
  background: #f47920;
}

/* ---- Decade responsive ---- */
@media (max-width: 991px) {
  .decade-head {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 30px;
  }

  .decade-head-left,
  .decade-desc {
    max-width: 100%;
  }

  .decade-card {
    width: 68vw;
  }
}

@media (max-width: 767px) {
  .decade-section {
    padding: 44px 0 90px;
  }

  /* Stack image over body on small screens */
  .decade-card {
    width: 84vw;
    flex-direction: column;
  }

  .decade-card-img {
    flex: 0 0 auto;
    height: 190px;
    width: 100%;
  }

  .intention-heading {
    width: 100%;
  }

  .decade-card-img img {
    min-height: 0;
  }

  /* Line through the middle of a stacked card looks odd — hide it */
  .decade-viewport::before {
    display: none;
  }

  .section-wrapper {
    padding-top: 540px;
    margin-top: -620px;
  }
}

/* ================================================
   MOBILE SWIPE-SLIDER ARROWS
   Injected by initSwipeSlider() (mobile only) for the Section 6 and
   People-at-Heart sliders, so users can step card-by-card with a tap.
   ================================================ */
.mslider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
}

.mslider-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid #f47920;
  background: #ffffff;
  color: #f47920;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}

.mslider-arrow:hover {
  background: #f47920;
  color: #ffffff;
}

.mslider-arrow:disabled {
  opacity: 0.4;
  cursor: default;
  background: #ffffff;
  color: #f47920;
}

.mslider-arrow-ico {
  font-size: 24px;
  line-height: 1;
  margin-top: -2px;
}

/* ================================================
   MOBILE: match every section's side padding to the FOOTER (calc(5% + 1em))
   Scoped to the ESG sections so the shared header/footer are untouched.
   Container-based sections get it directly; the sliders inherit it through
   their --slider-gutter variable; the Decade track reads the container's
   padding in JS, so it follows automatically.
   ================================================ */
@media (max-width: 767px) {
  .main-banner-area .container,
  .esg-stats-section .container,
  .esg-ceo-section .container,
  .esg-pillars-section .container,
  .esg-highlights-section .container,
  .gov-lead-section .container,
  .esg-recognition .container,
  .decade-section .container {
    max-width: 100%;
    padding-left: calc(5% + 1em);
    padding-right: calc(5% + 1em);
  }

  .esg-slider-section,
  .people-at-heart {
    --slider-gutter: calc(5% + 1em);
  }

  .decade-section-bg img {
    min-height: 500px;
    object-fit: cover;
  }
}

@media (min-width: 1800px) {
  .esg-highlights-bg {
    top: -260px;
  }

  .esg-slider-section {
    margin-top: 15vh;
  }
}