*,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background: #0a1628;
      color: #ffffff;
      font-family: "proxima-nova", "Proxima Nova", Arial, sans-serif;
      overflow-x: hidden;
    }

    /* ══════════════════════════════════════
       ENV STICKY SUBNAV
    ══════════════════════════════════════ */
    .env-subnav {
      position: fixed !important;
      top: 114px;
      /* default: utility(38) + nav(76) */
      left: 0 !important;
      width: 100% !important;
      z-index: 998 !important;
      background: #0a1628;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      display: block !important;
      transition: top 0.3s ease;
    }

    /* ── Subnav progress line ── */
    .env-subnav__progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 3px;
      width: 0%;
      background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%);
      transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
    }

    .env-subnav__inner {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(1rem, 3vw, 3rem);
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      user-select: none;
      -webkit-user-select: none;
    }

    .env-subnav__item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 10px 14px;
      font-size: 11.5px;
      font-weight: 600;
      line-height: 1.35;
      color: rgba(255, 255, 255, 0.75);
      text-decoration: none;
      letter-spacing: 0;
      border-right: 1px solid rgba(255, 255, 255, 0.18);
      cursor: pointer;
      transition: color 0.2s ease, background 0.2s ease;
      background: transparent;
      border-top: none;
      border-bottom: none;
      border-left: none;
      text-align: left;
    }

    .env-subnav__item:last-child {
      border-right: none;
    }

    .env-subnav__item:hover,
    .env-subnav__item.active {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.12);
    }

    .env-subnav__item.active {
      font-weight: 700;
    }

    @media (max-width: 1024px) {
      .env-subnav__item {
        font-size: 10px;
        padding: 10px 10px;
      }
    }

    @media (max-width: 768px) {

      /* On mobile utility bar is hidden → header = nav bar only (~76px) */
      .env-subnav {
        top: 76px;
      }

      .env-subnav__inner {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        gap: 0;
        padding: 0;
        /* Hide scrollbar */
        scrollbar-width: none;
      }

      .env-subnav__inner::-webkit-scrollbar {
        display: none;
      }

      .env-subnav__item {
        flex: 0 0 auto;
        min-width: 120px;
        max-width: 140px;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.3;
        padding: 8px 12px;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        white-space: normal;
      }
    }

    @media (max-width: 480px) {
      .env-subnav {
        top: 70px;
      }

      .env-subnav__item {
        min-width: 100px;
        max-width: 120px;
        font-size: 9.5px;
        padding: 7px 10px;
      }
    }

    @media (max-width: 360px) {
      .env-subnav {
        top: 62px;
      }

      .env-subnav__item {
        min-width: 90px;
        max-width: 110px;
        font-size: 9px;
        padding: 6px 8px;
      }
    }

    /* ── Severity image — bigger on mobile ── */
    @media (max-width: 768px) {
      #severityImg {
        width: 100% !important;
      }

      #pg201Img {
        width: 98vw !important;
        max-width: 100% !important;
      }

      #pg203Img1 {
        width: 98vw !important;
        max-width: 100% !important;
      }
    }

    /* ── Both logos always visible on mobile ── */
    .nav-bar__inner .brand__logo--vedanta,
    .nav-bar__inner .brand__divider {
      display: block !important;
    }

    /* ── Show READ + Energy Saver on mobile ── */
    .nav-actions .tts-toggle,
    .nav-actions .saver-toggle {
      display: flex !important;
    }

    /* ── Shrink logos slightly on small screens ── */
    @media (max-width: 480px) {
      .brand__logo--vedanta {
        width: 80px !important;
      }

      .brand__logo--hzl {
        width: 85px !important;
        height: auto !important;
      }

      .brand__divider {
        height: 28px !important;
      }

      .tts-toggle {
        font-size: 11px !important;
      }

      .saver-toggle__label {
        display: none !important;
      }
    }

    @media (max-width: 360px) {
      .brand__logo--vedanta {
        width: 65px !important;
      }

      .brand__logo--hzl {
        width: 70px !important;
      }
    }

    /* ── Header always fixed — never hide on scroll ── */
    .site-header {
      position: fixed !important;
      top: 0 !important;
      transform: translateY(0) !important;
    }

    /* ── Header always solid on inner pages ── */
    .site-header .nav-bar {
      background: var(--navy-glass, rgba(4, 14, 32, 0.96)) !important;
      -webkit-backdrop-filter: blur(16px) saturate(120%);
      backdrop-filter: blur(16px) saturate(120%);
      box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.55);
    }

    .site-header .utility-bar {
      background: rgba(4, 14, 26, 0.92) !important;
    }

    /* ── Page wrapper ── */
    .env-page {
      padding-top: 62px;
      padding-bottom: 40px;
      position: relative;
    }

    /* ── Breadcrumb ── */
    .env-breadcrumb {
      position: absolute;
      top: calc(38px + 76px + 8px);
      left: 0;
      width: 100%;
      z-index: 89;
      background: transparent;
      border: none;
      pointer-events: none;
    }

    .env-breadcrumb__inner {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 48px;
      display: flex;
      align-items: center;
      pointer-events: auto;
    }

    .env-breadcrumb__item {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.45);
      text-decoration: none;
      transition: color 0.2s ease;
      white-space: nowrap;
    }

    .env-breadcrumb__item:hover {
      color: #7fb942;
    }

    .env-breadcrumb__sep {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.25);
      padding: 0 12px;
      user-select: none;
    }

    .env-breadcrumb__item--active {
      color: rgba(255, 255, 255, 0.75);
      pointer-events: none;
    }

    /* ══════════════════════════════════════
       HERO BANNER
    ══════════════════════════════════════ */
    .env-hero {
      position: relative;
      height: auto;
      overflow: hidden;
      background: #061525;
    }

    .env-hero__bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      min-height: 100%;
      object-fit: cover;
      object-position: center center;
    }

    .env-hero__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg,
          rgba(6, 21, 37, 0.90) 0%,
          rgba(6, 21, 37, 0.60) 50%,
          rgba(6, 21, 37, 0.75) 100%),
        linear-gradient(to bottom, rgba(6, 21, 37, 0.2) 0%, rgba(6, 21, 37, 0.85) 100%);
    }


    /* Scroll reveal */
    .scroll-reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 2s cubic-bezier(0.22, 1, 0.36, 1), transform 2s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .scroll-reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Banner animations */
    @keyframes envSlideLeft {
      0% {
        opacity: 0;
        transform: translateX(-80px);
      }

      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes envSlideRight {
      0% {
        opacity: 0;
        transform: translateX(80px);
      }

      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Banner inner layout — text left, image right */
    .env-hero__inner {
      position: relative;
      z-index: 2;
      max-width: 1440px;
      margin: 0 auto;
      width: 100%;
      display: grid;
      grid-template-columns: 58% 1fr;
      grid-template-rows: auto auto;
      grid-template-areas:
        "headline image"
        "takeaway image";
      padding: 142px clamp(2rem, 8vw, 7rem) 20px;
      gap: 28px 48px;
    }

    /* Takeaway + image row — vertically centered to each other */
    .env-hero__row {
      display: contents;
    }

    /* Heading (top) */
    .env-banner-text {
      grid-area: headline;
      display: flex;
      flex-direction: column;
      gap: 20px;
      animation: envSlideLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
    }

    /* Icon + "Environmental" on one row */
    .env-banner-text__row {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .env-banner-icon {
      width: 56px;
      height: 56px;
      display: block;
      flex: none;
    }

    /* Key takeaway — centered against the image via the row's align-items */
    .env-takeaway-outer {
      grid-area: takeaway;
    }

    .env-banner-text__top {
      display: block;
      font-family: 'League Gothic', sans-serif;
      font-size: 28px;
      font-weight: 400;
      line-height: 0.95;
      letter-spacing: 0;
      text-transform: uppercase;
      color: #ffffff;
    }

    .env-banner-text__main {
      display: block;
      font-family: 'League Gothic', sans-serif;
      font-size: 35px;
      font-weight: 400;
      line-height: 0.95;
      letter-spacing: -0.01em;
      text-transform: uppercase;
      /* Brand title gradient (#0069aa → #72bf44) — same system as env chapter titles */
      background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: #0069aa;
      /* fallback */
      margin-bottom: 19px;
      white-space: nowrap;
    }

    /* Right: image */
    .env-hero__img-wrap {
          grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    width: 100%;
    position: relative;
    animation: envSlideRight 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
    }

    .env-hero__img-wrap picture {
      display: block;
      width: 100%;
      height: 100%;
    }

    .env-hero__img-wrap.faded {
      opacity: 0;
      transition: opacity 0.3s;
    }

    .env-hero__video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    /* ══════════════════════════════════════
       INTRO TEXT SECTION
    ══════════════════════════════════════ */
    /* ── Scroll Image Reveal ── */
    .env-img-reveal {
      position: relative;
      height: 250vh;
      background: #061525;
    }

    .env-img-reveal__sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      overflow: hidden;
      background: #061525;
    }

    .env-img-reveal__wrap {
      position: absolute;
      top: 180px;
      right: clamp(1.25rem, 4vw, 3.5rem);
      width: 38vw;
      height: 55vh;
      overflow: hidden;
      border-radius: 12px;
    }

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

    .env-beams-section {
      position: relative;
      width: 100%;
      background: transparent;
      padding: 0;
      margin: -10px 0 -45px;
    }

    .env-beams-content {
      position: relative;
      z-index: 10;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(2rem, 8vw, 7rem);
      text-align: left;
    }

    .env-beams-text {
      font-size: 22px;
      font-weight: 700;
      line-height: 1.4;
      color: #ffffff;
    }

    .env-beams-text p {
      margin: 0 0 28px 0;
    }

    .env-beams-text p:last-child {
      margin-bottom: 0;
    }

    /* Word spans — dim by default, light up on scroll */
    .env-word {
      display: inline;
      opacity: 0.10;
      transition: opacity 0.25s ease;
    }

    .env-word.lit {
      opacity: 1;
    }

    /* ══════════════════════════════════════
       KEY TAKEAWAY
    ══════════════════════════════════════ */
    .env-takeaway-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(2rem, 8vw, 7rem) 80px;
    }

    /* Outer wrapper for layered depth */
    .env-takeaway-outer {
      position: relative;
      display: block;
    }

    /* Offset gradient panel behind main card */
    .env-takeaway-shadow {
      position: absolute;
      inset: 0;
      transform: translate(7px, 7px);
      border-radius: 0;
      background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%);
      opacity: 0.30;
      z-index: 0;
    }

    /* Main card */
    .env-takeaway {
      padding: 36px 40px;
      background: #081C33;
      border-radius: 0;
      width: 100%;
      position: relative;
      z-index: 1;
      border: none;
      box-shadow:
        0 0 0 1.5px transparent,
        inset 0 0 0 1.5px transparent;
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-takeaway:hover {
      transform: translateY(-10px) scale(1.015);
      box-shadow: 0 24px 60px rgba(0, 105, 170, 0.25), 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    /* Gradient border using pseudo-element */
    .env-takeaway::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 0;
      padding: 1.5px;
      background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%);
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    /* Heading */
    .env-takeaway__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      padding-bottom: 18px;
      position: relative;
    }

    /* Gradient divider line — full width edge to edge */
    .env-takeaway__header::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: -40px;
      right: -40px;
      height: 1.5px;
      background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%);
    }

    .env-takeaway__heading {
      font-family: 'League Gothic', sans-serif;
      font-size: clamp(19px, 1.55vw, 28px);
      font-weight: 400;
      letter-spacing: 0;
      text-transform: uppercase;
      background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .env-takeaway__icon {
      color: #72bf44;
      flex-shrink: 0;
      margin-left: 12px;
    }

    .env-takeaway__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .env-takeaway__list li {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.7;
      color: rgba(232, 237, 242, 0.90);
      padding-left: 0;
      position: relative;
      letter-spacing: 0;
    }

    .env-takeaway__list li::before {
      content: none;
      position: absolute;
      left: 0;
      top: 10px;
      width: 5px;
      height: 5px;
      background: #7fb942;
      border-radius: 50%;
    }

    /* paragraph-style takeaway (e.g. communities) */
    .env-takeaway__text p {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.7;
      color: rgba(232, 237, 242, 0.90);
      margin: 0;
    }
    .env-takeaway__text p + p {
      margin-top: 14px;
    }
    .env-takeaway__hl {
      color: #ffffff;
    }

    @media (max-width: 768px) {
      .env-takeaway {
        padding: 20px 22px;
        max-width: 100%;
      }
    }

    @media (max-width: 480px) {
      .env-takeaway-wrap {
        padding-bottom: 50px;
      }
    }

    /* ══════════════════════════════════════
       META INFO SECTION
    ══════════════════════════════════════ */
    .env-meta-wrap {
      max-width: 1440px;
      margin: 30px auto 0;
      padding: 0 clamp(2rem, 8vw, 7rem) 20px;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    /* Rows use an identical 3-column grid (1fr | divider | 1fr | divider | 1fr)
       so the vertical dividers land at the same x in every row. */
    .env-meta-top-row,
    .env-meta-bottom-row {
      display: grid;
      grid-template-columns: 1fr 1px 1fr 1px 1fr;
      align-items: start;
    }

    .env-meta-top-row {
      padding: 0 0 28px;
    }

    .env-meta-bottom-row {
      padding: 28px 0;
    }

    .env-meta-col {
      min-width: 0;
      padding: 0 24px;
    }

    .env-meta-col:first-child {
      padding-left: 0;
    }

    .env-meta-col:last-child {
      padding-right: 0;
    }

    /* UN SDGs spans the last two cells (covers the 2nd divider track) */
    .env-meta-col--wide {
      grid-column: 3 / 6;
      padding-right: 0;
    }

    .env-meta-vsep--full {
      width: 1px;
      align-self: stretch;
      background: rgba(255, 255, 255, 0.12);
    }

    .env-meta-block {
      padding: 20px 0;
    }

    .env-meta-divider {
      width: 100%;
      height: 1px;
      background: rgba(255, 255, 255, 0.12);
    }

    @media (max-width: 768px) {

      .env-meta-top-row,
      .env-meta-bottom-row {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 0;
      }

      .env-meta-vsep--full {
        width: 100%;
        height: 1px;
        align-self: auto;
      }

      .env-meta-col,
      .env-meta-col--wide {
        grid-column: auto;
        padding: 0;
      }
    }

    .env-meta-title {
      font-size: clamp(19px, 1.55vw, 28px);
      font-weight: 700;
      letter-spacing: 0;
      text-transform: none;
      color: #6c3f99;
      margin-bottom: 14px;
    }
    body.energy-saver .env-meta-title,
    body.energy-saver .env-climate-reveal.revealed .env-meta-title,
    body.cinematic .env-meta-title,
    body.cinematic .env-climate-reveal.revealed .env-meta-title,
    body.is-saver .env-meta-title,
    body.is-saver .env-climate-reveal.revealed .env-meta-title,
    html.is-saver .env-meta-title,
    html.is-saver .env-climate-reveal.revealed .env-meta-title {
      color: #6c3f99 !important;
    }

    .env-meta-title--green {
      color: #6c3f99;
    }

    /* Badges — M2, M3 etc */
    .env-meta-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .env-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0;
      padding: 6px 14px;
      border-radius: 0;
    }

    .env-badge--teal {
      background: rgba(79, 224, 207, 0.15);
      color: #4fe0cf;
      border: 1px solid rgba(79, 224, 207, 0.35);
    }

    .env-badge--green {
      background: rgba(127, 185, 66, 0.15);
      color: #7fb942;
      border: 1px solid rgba(127, 185, 66, 0.4);
      font-size: 13px;
      padding: 5px 14px;
    }

    /* solid purple circular badge (e.g. communities material topics / strategy) */
    .env-badge--purple {
      background: #6c3f99;
      color: #ffffff;
      border: none;
      width: 46px;
      height: 46px;
      padding: 0;
      border-radius: 50%;
      font-size: 15px;
    }

    /* Single icon-strip placeholder (replace later) — responsive */
    .env-meta-ph {
      width: 100%;
      max-width: 420px;
      height: auto;
      display: block;
    }

    /* Real combined meta icons — sized by height, never overflow the column */
    .env-meta-real-icon {
      max-height: 78px;
      max-width: 100%;
      width: auto;
      height: auto;
      display: block;
    }

    .env-meta-real-icon--stake {
      max-height: 40px;
    }

    .env-meta-real-icon--sdg {
      max-height: 100px;
    }

    /* Icon images */
    .env-meta-icons {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .env-meta-icon {
      height: 40px;
      width: auto;
      display: block;
    }

    .env-meta-icon--lg {
      height: 100px;
    }

    .env-meta-icon--sdg {
      height: 150px;
      width: auto;
    }

    /* Policy links */
    .env-meta-links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .env-meta-links li {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      font-size: 14px;
      line-height: 1.5;
    }

    .env-meta-arrow {
      color: #0069aa;
      font-size: 16px;
      line-height: 1.4;
      flex-shrink: 0;
    }

    .env-meta-links a {
      color: #0069aa;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s;
    }

    .env-meta-links a:hover {
      color: #ffffff;
    }

    /* ICMM Principles */
    .env-meta-principles {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 48px;
    }

    .env-meta-principle {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .env-meta-principle__num {
      font-size: 14px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.90);
    }

    .env-meta-principle__label {
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.65);
    }

    /* ── Meta + Takeaway Responsive ── */

    /* Tablet (≤1024px) */
    @media (max-width: 1024px) {
      .env-takeaway-wrap {
        padding-bottom: 48px;
      }

      .env-meta-col {
        padding: 0 16px;
      }

      .env-meta-top-row,
      .env-meta-bottom-row {
        padding: 20px 0;
      }
    }

    /* Tablet portrait (≤768px) */
    @media (max-width: 768px) {

      /* Key Takeaway */
      .env-takeaway-wrap {
        padding: 0 20px 48px;
      }

      .env-takeaway {
        padding: 20px 18px;
      }

      /* Meta rows — stack vertically */
      .env-meta-wrap {
        padding: 0 20px 20px;
      }

      .env-meta-top-row,
      .env-meta-bottom-row {
        grid-template-columns: 1fr;
        padding: 0;
      }

      .env-meta-vsep--full {
        width: 100%;
        height: 1px;
        align-self: auto;
        margin: 0;
      }

      .env-meta-col {
        padding: 16px 0 !important;
        width: 100%;
      }

      .env-meta-col--wide {
        grid-column: auto;
        width: 100%;
      }

      .env-meta-title {
        margin-bottom: 10px;
      }

      .env-meta-icon {
        height: 50px;
      }

      .env-meta-icon--lg {
        height: 80px;
      }

      .env-meta-icon--sdg {
        height: 100px;
      }

      .env-meta-principle__num,
      .env-badge {
        font-size: 13px;
        padding: 5px 10px;
      }
    }

    /* Mobile (≤480px) */
    @media (max-width: 480px) {
      .env-takeaway-wrap {
        padding: 0 16px 40px;
      }

      .env-meta-badges {
        gap: 6px;
      }

      .env-badge {
        font-size: 12px;
        padding: 4px 8px;
      }

      .env-meta-icon--sdg {
        height: 80px;
      }
    }

    /* ══════════════════════════════════════
       ENVIRONMENTAL PERFORMANCE SLIDER
    ══════════════════════════════════════ */
    .env-perf-wrap {
      position: relative;
      width: 100%;
    }

    .env-perf-inner {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(2rem, 8vw, 7rem) 40px;
      position: relative;
      z-index: 2;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    /* Mesh gradient background */
    .env-perf-mesh {
      position: absolute;
      inset: 0;
      z-index: 0;
      opacity: 0.5;
      overflow: hidden;
    }

    @keyframes blob1 {

      0%,
      100% {
        transform: translate(0%, 0%) scale(1);
      }

      33% {
        transform: translate(20%, -15%) scale(1.15);
      }

      66% {
        transform: translate(-10%, 20%) scale(0.9);
      }
    }

    @keyframes blob2 {

      0%,
      100% {
        transform: translate(0%, 0%) scale(1);
      }

      33% {
        transform: translate(-25%, 10%) scale(0.85);
      }

      66% {
        transform: translate(15%, -20%) scale(1.1);
      }
    }

    @keyframes blob3 {

      0%,
      100% {
        transform: translate(0%, 0%) scale(1);
      }

      50% {
        transform: translate(10%, 25%) scale(1.2);
      }
    }

    @keyframes blob4 {

      0%,
      100% {
        transform: translate(0%, 0%) scale(1);
      }

      40% {
        transform: translate(-15%, -20%) scale(1.1);
      }

      80% {
        transform: translate(20%, 10%) scale(0.88);
      }
    }

    .env-perf-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
    }

    .env-perf-blob--1 {
      width: 60%;
      height: 70%;
      top: -10%;
      left: -10%;
      background: hsl(216, 90%, 27%);
      animation: blob1 8s ease-in-out infinite;
    }

    .env-perf-blob--2 {
      width: 55%;
      height: 65%;
      top: 20%;
      right: -10%;
      background: hsl(243, 68%, 36%);
      animation: blob2 10s ease-in-out infinite;
    }

    .env-perf-blob--3 {
      width: 50%;
      height: 60%;
      bottom: -10%;
      left: 20%;
      background: hsl(205, 91%, 64%);
      animation: blob3 9s ease-in-out infinite;
    }

    .env-perf-blob--4 {
      width: 45%;
      height: 55%;
      top: 10%;
      left: 35%;
      background: hsl(211, 61%, 57%);
      animation: blob4 11s ease-in-out infinite;
    }

    /* ── Dots + Counter nav row ── */
    .env-perf-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 20px 0;
      width: 100%;
    }

    .env-perf-dots {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .env-perf-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.25);
      border: 1px solid rgba(255, 255, 255, 0.35);
      transition: all 0.35s ease;
      cursor: pointer;
    }

    .env-perf-dot.active {
      width: 28px;
      border-radius: 4px;
      background: #7fb942;
      border-color: #7fb942;
      box-shadow: 0 0 8px rgba(127, 185, 66, 0.55);
    }

    .env-perf-counter {
      font-size: 18px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.85);
      letter-spacing: 0;
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .env-perf-counter span:first-child {
      font-size: 26px;
      color: #ffffff;
    }

    .env-perf-counter__sep {
      font-size: 18px !important;
      color: rgba(255, 255, 255, 0.40) !important;
      margin: 0 2px;
    }

    .env-perf-counter span:last-child {
      font-size: 18px !important;
      color: rgba(255, 255, 255, 0.50) !important;
    }

    .env-perf-heading {
      font-size: clamp(24px, 2.5vw, 42px);
      font-weight: 700;
      color: #ffffff;
      padding-top: 10vh;
      margin-bottom: 48px;
      letter-spacing: 0;
      text-align: center;
    }

    /* Horizontal scroll container */
    .env-perf-hscroll {
      width: 100%;
      overflow: hidden;
    }

    @media (max-width: 768px) {


      .env-perf-hscroll {
        width: 100%;
      }

      .env-perf-card-h {
        padding: 36px 20px;
      }

      .env-perf-inner {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
      }
    }

    @media (max-width: 480px) {
      .env-perf-card-h {
        width: 90vw;
        padding: 32px 24px;
        margin: 0 5vw;
        border-radius: 20px;
      }

      .env-perf-heading {
        padding-top: 6vh;
        margin-bottom: 28px;
      }
    }

    @media (max-width: 360px) {
      .env-perf-card-h {
        width: 92vw;
        padding: 22px 14px;
      }
    }

    .env-perf-htrack {
      display: flex;
      gap: 0;
      width: max-content;
      padding: 0;
      align-items: stretch;
      will-change: transform;
    }

    /* Each card — 1/3 of viewport */
    .env-perf-card-h {
      flex-shrink: 0;
      width: calc(100vw / 3);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 50px 36px;
      scroll-snap-align: start;
      /* Glass effect */
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 20px;
      margin: 0 10px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }

    .env-perf-card-h:hover {
      background: rgba(255, 255, 255, 0.10);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    @media (max-width: 1024px) {
      .env-perf-card-h {
        width: 50vw;
      }
    }

    @media (max-width: 768px) {
      .env-perf-card-h {
        width: 90vw;
        margin: 0 5vw;
        border-radius: 20px;
        /* Top-align the card content so the big numbers line up across cards. */
        justify-content: flex-start;
      }
    }

    @media (max-width: 600px) {
      .env-perf-card-h {
        width: 90vw;
        margin: 0 5vw;
        border-radius: 20px;
      }
    }

    .env-perf-num {
      font-size: clamp(40px, 4vw, 66px);
      font-weight: 900;
      color: #ffffff;
      line-height: 1.0;
      margin-bottom: 8px;
      letter-spacing: -0.02em;
    }

    .env-perf-num-unit {
      display: block;
      font-size: 22px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.75);
      margin-bottom: 20px;
      letter-spacing: 0;
    }

    .env-perf-label {
      font-size: 18px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.80);
      line-height: 1.55;
      max-width: 320px;
      text-align: center;
    }

    @media (max-width: 1024px) {
      .env-perf-num-unit {
        font-size: 18px;
      }

      .env-perf-label {
        font-size: 16px;
      }
    }

    @media (max-width: 768px) {
      .env-perf-num-unit {
        font-size: 15px;
      }

      .env-perf-label {
        font-size: 15px;
      }

      .env-perf-card-h {
        padding: 36px 24px;
      }
    }

    @media (max-width: 480px) {
      .env-perf-num-unit {
        font-size: 13px;
      }

      .env-perf-label {
        font-size: 13px;
      }
    }

    /* ── Bento Slider ── */
    .env-bento-slider {
      position: relative;
      width: 100%;
    }

    .env-bento-slide {
      display: none;
      opacity: 0;
      transform: translateX(40px);
      transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-bento-slide.active {
      display: block;
      opacity: 1;
      transform: translateX(0);
    }

    .env-bento-slide.slide-in-left {
      display: block;
      animation: bentoSlideInLeft 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .env-bento-slide.slide-in-right {
      display: block;
      animation: bentoSlideInRight 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes bentoSlideInLeft {
      from {
        opacity: 0;
        transform: translateX(-60px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes bentoSlideInRight {
      from {
        opacity: 0;
        transform: translateX(60px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Bottom nav: dots left, arrows right */
    .env-bento-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
      padding: 0 2px;
      position: relative;
      z-index: 20;
    }

    .env-bento-dots {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .env-bento-dot {
      width: 28px;
      height: 8px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.2);
      transition: background 0.3s, width 0.3s;
      cursor: pointer;
    }

    .env-bento-dot.active {
      background: #0069aa;
      width: 40px;
    }

    .env-bento-arrows {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .env-bento-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #ffffff;
      cursor: pointer;
      transition: background 0.25s, border-color 0.25s, transform 0.2s;
    }

    .env-bento-arrow:hover {
      background: rgba(0, 105, 170, 0.3);
      border-color: #0069aa;
      transform: scale(1.08);
    }

    .env-bento-arrow:disabled {
      opacity: 0.3;
      cursor: not-allowed;
      transform: none;
    }

    /* ── Bento Mosaic Grid ── */
    .env-bento {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      width: 100%;
      padding: 0 0 20px;
    }

    .env-bento-card {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 20px;
      padding: 20px 22px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: relative;
      overflow: hidden;
      transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
      min-height: 150px;
    }

    .env-bento-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(ellipse at top left, rgba(114, 191, 68, 0.08) 0%, transparent 65%);
      pointer-events: none;
    }

    .env-bento-card:hover {
      background: rgba(255, 255, 255, 0.08);
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
    }

    .env-bento-card--wide {
      grid-column: span 2;
    }

    .env-bento-card--full {
      grid-column: span 3;
    }

    .env-bento-card--energy {
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s;
    }

    .env-bento-card--energy:hover {
      transform: translateY(-10px) scale(1.015);
      box-shadow: 0 24px 60px rgba(0, 105, 170, 0.25), 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    .env-bento-card--energy::before {
      background: radial-gradient(ellipse at top left, rgba(0, 105, 170, 0.18) 0%, transparent 65%);
    }

    .env-bento-card--ghg::before {
      background: radial-gradient(ellipse at top right, rgba(114, 191, 68, 0.12) 0%, transparent 65%);
    }

    .env-bento-card--accent {
      background: linear-gradient(135deg, rgba(0, 105, 170, 0.18) 0%, rgba(114, 191, 68, 0.12) 100%);
      border-color: rgba(114, 191, 68, 0.25);
    }

    .env-bento-label {
      font-size: 13px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.55);
      line-height: 1.5;
      margin-top: 10px;
      text-transform: none;
      letter-spacing: 0;
    }

    .env-bento-num {
      font-family: 'League Gothic', sans-serif;
      font-size: clamp(40px, 4vw, 66px);
      font-weight: 400;
      color: #ffffff;
      line-height: 0.95;
      letter-spacing: -0.01em;
      display: flex;
      align-items: baseline;
      gap: 8px;
    }

    .env-bento-prefix {
      margin-right: -8px;
    }

    .env-bento-card--wide .env-bento-num {
      font-size: clamp(40px, 4vw, 66px);
    }

    .env-perf-inner.is1 .env-bento-num,
    .env-perf-inner.is1 .env-bento-label,
    .env-perf-inner.is1 .env-bento-unit,
    .env-perf-inner.is1 .env-bento-prefix,
    .env-perf-inner.is1 .env-hri-pct {
      color: #ffffff !important;
    }

    body.energy-saver .env-perf-inner.is1 .env-bento-num,
    body.energy-saver .env-perf-inner.is1 .env-bento-label,
    body.energy-saver .env-perf-inner.is1 .env-bento-unit,
    body.energy-saver .env-perf-inner.is1 .env-bento-prefix,
    body.energy-saver .env-perf-inner.is1 .env-hri-pct,
    body.cinematic .env-perf-inner.is1 .env-bento-num,
    body.cinematic .env-perf-inner.is1 .env-bento-label,
    body.cinematic .env-perf-inner.is1 .env-bento-unit,
    body.cinematic .env-perf-inner.is1 .env-bento-prefix,
    body.cinematic .env-perf-inner.is1 .env-hri-pct,
    body.is-saver .env-perf-inner.is1 .env-bento-num,
    body.is-saver .env-perf-inner.is1 .env-bento-label,
    body.is-saver .env-perf-inner.is1 .env-bento-unit,
    body.is-saver .env-perf-inner.is1 .env-bento-prefix,
    body.is-saver .env-perf-inner.is1 .env-hri-pct,
    html.is-saver .env-perf-inner.is1 .env-bento-num,
    html.is-saver .env-perf-inner.is1 .env-bento-label,
    html.is-saver .env-perf-inner.is1 .env-bento-unit,
    html.is-saver .env-perf-inner.is1 .env-bento-prefix,
    html.is-saver .env-perf-inner.is1 .env-hri-pct {
      color: #ffffff !important;
    }

    .env-bento-unit {
      font-size: 16px;
      font-weight: 600;
      color: #72bf44;
      letter-spacing: 0;
      text-transform: uppercase;
      line-height: 1;
    }

    @media (max-width: 1024px) {}

    @media (max-width: 600px) {
      .env-bento {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }

      .env-bento-card {
        min-height: 160px;
        padding: 20px 16px;
      }
    }

    @media (max-width: 768px) {
      .env-perf-arrow {
        width: 40px;
        height: 40px;
      }

      .env-perf-slide {
        padding: 40px 20px;
      }

      .env-perf-label {
        font-size: 16px;
      }
    }

    @media (max-width: 480px) {
      .env-perf-slider {
        gap: 12px;
      }

      .env-perf-arrow {
        width: 36px;
        height: 36px;
      }

      .env-perf-arrow svg {
        width: 18px;
        height: 18px;
      }
    }

    /* ══════════════════════════════════════
       ENVIRONMENTAL PERFORMANCE VIDEO
    ══════════════════════════════════════ */
    .env-perf-video-wrap {
      width: 100%;
      line-height: 0;
    }

    .env-perf-video {
      width: 100%;
      height: 662px;
      display: block;
      object-fit: cover;
    }

    /* ══════════════════════════════════════
       ENV BODY TEXT
    ══════════════════════════════════════ */
    .env-body-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 30px clamp(2rem, 8vw, 7rem) 25px;
    }

    .env-body-text p {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.75;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 28px;
      opacity: 0.10;
      transform: translateX(-60px);
      transition: opacity 1s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-body-text p strong {
      font-weight: 700;
      color: #ffffff;
    }

    .env-body-text p.revealed {
      opacity: 1;
      transform: translateX(0);
    }

    .env-body-link {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px !important;
    }

    .env-body-link__icon {
      color: #7fb942;
      font-size: 14px;
      flex-shrink: 0;
    }

    .env-body-link a {
      color: #6c3f99 ;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s;
    }

    .env-body-link a:hover {
      color: #ffffff;
    }

    /* Climate content */
    .env-climate-content {
      margin-top: 40px;
    }

    .env-climate-head {
      font-size: clamp(19px, 1.55vw, 28px);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0;
      margin-top: 16px;
      margin-bottom: 10px;
    }

    .env-climate-head--blue {
      color: #0069aa;
    }

    .env-climate-head--green {
      color: #7fb942;
    }

    .env-climate-head--orange {
      color: #f7931d;
    }
    body.energy-saver .env-climate-head--orange,
    body.energy-saver .env-climate-reveal.revealed.env-climate-head--orange,
    body.cinematic .env-climate-head--orange,
    body.cinematic .env-climate-reveal.revealed.env-climate-head--orange,
    body.is-saver .env-climate-head--orange,
    body.is-saver .env-climate-reveal.revealed.env-climate-head--orange,
    html.is-saver .env-climate-head--orange,
    html.is-saver .env-climate-reveal.revealed.env-climate-head--orange {
      color: #f7931d !important;
    }

    /* League Gothic + indigo heading */
    .env-climate-head--lg-indigo {
      color: #25247b;
      font-size: 24px;
    }

    /* gradient (blue → green) heading text */
    .env-climate-head--grad {
      font-family: 'League Gothic', sans-serif;
      width: fit-content;
      max-width: 100%;
      background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
    /* gradient heading reversed (green → blue) */
    .env-climate-head--grad-rev {
      background: linear-gradient(90deg, #72bf44 0%, #0069aa 100%);
    }

    /* "Thematic Areas" category heading */
    .env-thematic-head {
      font-family: 'League Gothic', sans-serif;
      font-size: clamp(22px, 2.1vw, 30px);
      font-weight: 400;
      color: #f7931d;
      line-height: 1.2;
      margin: 36px 0 14px;
    }
    body.energy-saver .env-thematic-head,
    body.energy-saver .env-climate-reveal.revealed.env-thematic-head,
    body.cinematic .env-thematic-head,
    body.cinematic .env-climate-reveal.revealed.env-thematic-head,
    body.is-saver .env-thematic-head,
    body.is-saver .env-climate-reveal.revealed.env-thematic-head,
    html.is-saver .env-thematic-head,
    html.is-saver .env-climate-reveal.revealed.env-thematic-head {
      color: #f7931d !important;
    }

    /* ── Stat glance grid (3-column big numbers + descriptions) ── */
    .env-glance-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 36px 50px;
      margin-top: 24px;
    }
    .env-glance__num {
      font-family: 'League Gothic', sans-serif;
      font-size: clamp(34px, 3.6vw, 50px);
      font-weight: 400;
      color: #0069aa;
      line-height: 1;
      margin-bottom: 10px;
    }
    .env-glance__unit {
      font-size: 0.42em;
      color: inherit;
    }
    body.energy-saver .env-glance__unit,
    body.energy-saver .env-climate-reveal.revealed .env-glance__unit,
    body.cinematic .env-glance__unit,
    body.cinematic .env-climate-reveal.revealed .env-glance__unit,
    body.is-saver .env-glance__unit,
    body.is-saver .env-climate-reveal.revealed .env-glance__unit,
    html.is-saver .env-glance__unit,
    html.is-saver .env-climate-reveal.revealed .env-glance__unit {
      color: inherit !important;
    }
    /* smaller numbers/titles for text-heavy glance items */
    .env-glance-grid--sm .env-glance__num {
      font-size: clamp(22px, 2.2vw, 30px);
    }
    .env-glance__desc {
      font-size: 13px;
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.78);
      margin: 0;
    }
    .env-glance__desc strong {
      color: #ffffff;
      font-weight: 700;
    }
    @media (max-width: 980px) {
      .env-glance-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 40px;
      }
    }
    @media (max-width: 600px) {
      .env-glance-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }
    }

    /* orange top+right L-border stat box (orange numbers) */
    .env-glance-box {
      border: 2px solid #f7931d;
      padding: 38px 44px 34px;
      margin-top: 36px;
    }
    .env-glance-box .env-glance-grid {
      margin-top: 0;
    }
    .env-glance-box .env-glance__num {
      color: #f7931d;
    }
    @media (max-width: 768px) {
      .env-glance-box {
        padding: 28px 22px 26px;
      }
    }

    /* ── Brand logos + QR row (2 columns) ── */
    .env-logos-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px 56px;
      align-items: center;
      margin-top: 36px;
    }
    .env-logos {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      align-items: center;
    }
    .env-logo-ph {
      height: 72px;
      background-color: #ffffff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.4);
      font-size: 12px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    .env-qr {
      display: flex;
      align-items: center;
      gap: 26px;
    }
    .env-qr__text {
      font-size: 15px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.4;
      margin: 0;
    }
    .env-qr__code {
      width: 112px;
      height: 112px;
      flex-shrink: 0;
      background-color: #ffffff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.4);
      font-size: 12px;
      letter-spacing: 1px;
      text-align: center;
    }
    @media (max-width: 768px) {
      .env-logos-row {
        grid-template-columns: 1fr;
        gap: 28px;
      }
    }

    /* ── Orange stat box + Success Stories side by side ── */
    .env-success-row {
      display: grid;
      grid-template-columns: 0.9fr 1.5fr;
      gap: 28px;
      margin-top: 36px;
      align-items: stretch;
    }
    .env-success-row .env-glance-box {
      margin-top: 0;
      display: flex;
      align-items: center;
    }
    .env-success {
      border: 1px solid rgba(114, 191, 68, 0.35);
      border-radius: 8px;
      overflow: hidden;
      background: rgba(114, 191, 68, 0.06);
    }
    .env-success__head {
      display: inline-block;
      background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%);
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
      padding: 9px 24px;
      border-bottom-right-radius: 10px;
    }
    .env-success__list {
      list-style: none;
      margin: 0;
      padding: 16px 26px 22px;
      display: flex;
      flex-direction: column;
      gap: 13px;
    }
    .env-success__list li {
      position: relative;
      padding-left: 18px;
      font-size: 13px;
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.82);
    }
    .env-success__list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 6px;
      width: 7px;
      height: 7px;
      background: #f7931d;
    }
    @media (max-width: 768px) {
      .env-success-row {
        grid-template-columns: 1fr;
        gap: 22px;
      }
    }

    /* ── Community projects glance (labelled sub-sections) ── */
    .env-cproj {
      margin-top: 34px;
    }
    .env-cproj__head {
      display: flex;
      align-items: center;
      margin-bottom: 6px;
    }
    .env-cproj__head span {
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
      padding: 9px 22px;
    }
    .env-cproj__head::after {
      content: '';
      flex: 1;
      height: 2px;
      min-width: 30px;
    }
    .env-cproj__head--green span {
      background: #72bf44;
    }
    .env-cproj__head--green::after {
      background: rgba(114, 191, 68, 0.45);
    }
    .env-cproj__head--purple span {
      background: #6c3f99;
    }
    .env-cproj__head--purple::after {
      background: rgba(108, 63, 153, 0.45);
    }
    .env-cproj__head--orange span {
      background: #f7931d;
    }
    .env-cproj__head--orange::after {
      background: rgba(247, 147, 29, 0.45);
    }
    body.energy-saver .env-cproj__head span,
    body.energy-saver .env-climate-reveal.revealed .env-cproj__head span,
    body.cinematic .env-cproj__head span,
    body.cinematic .env-climate-reveal.revealed .env-cproj__head span,
    body.is-saver .env-cproj__head span,
    body.is-saver .env-climate-reveal.revealed .env-cproj__head span,
    html.is-saver .env-cproj__head span,
    html.is-saver .env-climate-reveal.revealed .env-cproj__head span {
      color: #ffffff !important;
    }
    body.energy-saver .env-cproj__head--orange span,
    body.energy-saver .env-climate-reveal.revealed .env-cproj__head--orange span,
    body.cinematic .env-cproj__head--orange span,
    body.cinematic .env-climate-reveal.revealed .env-cproj__head--orange span,
    body.is-saver .env-cproj__head--orange span,
    body.is-saver .env-climate-reveal.revealed .env-cproj__head--orange span,
    html.is-saver .env-cproj__head--orange span,
    html.is-saver .env-climate-reveal.revealed .env-cproj__head--orange span {
      background: #f7931d !important;
    }
    body.energy-saver .env-cproj__head--orange::after,
    body.energy-saver .env-climate-reveal.revealed .env-cproj__head--orange::after,
    body.cinematic .env-cproj__head--orange::after,
    body.cinematic .env-climate-reveal.revealed .env-cproj__head--orange::after,
    body.is-saver .env-cproj__head--orange::after,
    body.is-saver .env-climate-reveal.revealed .env-cproj__head--orange::after,
    html.is-saver .env-cproj__head--orange::after,
    html.is-saver .env-climate-reveal.revealed .env-cproj__head--orange::after {
      background: rgba(247, 147, 29, 0.45) !important;
    }
    .env-cproj .env-glance-grid {
      margin-top: 18px;
    }
    /* per-sub-section stat-title colours */
    .env-cproj--green .env-glance__num {
      color: #72bf44;
    }
    .env-cproj--purple .env-glance__num {
      color: #6c3f99;
    }
    .env-cproj--orange .env-glance__num,
    .env-cproj__final .env-glance__num {
      color: #f7931d;
    }
    .env-cproj__grid2 {
      grid-template-columns: 1fr 1fr;
    }
    .env-cproj__final {
      margin-top: 36px;
    }
    /* blue border around the whole community-projects block */
    .env-cproj-box {
      border: 2px solid #0069aa;
      padding: 32px 40px 38px;
      margin-top: 24px;
    }
    .env-cproj-box > .env-cproj:first-child {
      margin-top: 0;
    }
    @media (max-width: 768px) {
      .env-cproj__grid2 {
        grid-template-columns: 1fr;
      }
      .env-cproj__head span {
        font-size: 12px;
        padding: 8px 14px;
      }
      .env-cproj-box {
        padding: 24px 20px 28px;
      }
    }

    /* ── Environment and safety (community safety | environment) ── */
    .env-envsafe {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 0 56px;
      margin-top: 22px;
      align-items: start;
    }
    .env-envsafe__1col {
      grid-template-columns: 1fr;
    }
    .env-envsafe__final {
      text-align: left;
      margin-top: 38px;
    }
    .env-envsafe__final .env-glance__num {
      color: #f7931d;
    }
    .env-envsafe__sub {
      font-size: 22px;
      font-weight: 700;
      color: #f7931d;
      line-height: 1.3;
      margin-bottom: 10px;
    }
    body.energy-saver .env-envsafe__sub,
    body.energy-saver .env-climate-reveal.revealed .env-envsafe__sub,
    body.cinematic .env-envsafe__sub,
    body.cinematic .env-climate-reveal.revealed .env-envsafe__sub,
    body.is-saver .env-envsafe__sub,
    body.is-saver .env-climate-reveal.revealed .env-envsafe__sub,
    html.is-saver .env-envsafe__sub,
    html.is-saver .env-climate-reveal.revealed .env-envsafe__sub {
      color: #f7931d !important;
    }
    @media (max-width: 768px) {
      .env-envsafe {
        grid-template-columns: 1fr;
        gap: 30px;
      }
    }

    /* ── Sustainability & CSR initiatives — gradient multi-column box ── */
    .env-susbox {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 44px;
      background: linear-gradient(135deg, rgba(114, 191, 68, 0.12) 0%, rgba(0, 147, 196, 0.12) 100%);
      padding: 32px 38px;
      margin-top: 22px;
      align-items: start;
    }
    .env-susbox__head {
      color: #0069aa;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.3;
      margin: 0 0 8px;
    }
    body.energy-saver .env-susbox__head,
    body.energy-saver .env-climate-reveal.revealed .env-susbox__head,
    body.cinematic .env-susbox__head,
    body.cinematic .env-climate-reveal.revealed .env-susbox__head,
    body.is-saver .env-susbox__head,
    body.is-saver .env-climate-reveal.revealed .env-susbox__head,
    html.is-saver .env-susbox__head,
    html.is-saver .env-climate-reveal.revealed .env-susbox__head {
      color: #0069aa !important;
    }
    .env-susbox__head--mt {
      margin-top: 22px;
    }
    .env-susbox__sub {
      color: #f7931d;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.3;
      margin: 16px 0 6px;
    }
    body.energy-saver .env-susbox__sub,
    body.energy-saver .env-climate-reveal.revealed .env-susbox__sub,
    body.cinematic .env-susbox__sub,
    body.cinematic .env-climate-reveal.revealed .env-susbox__sub,
    body.is-saver .env-susbox__sub,
    body.is-saver .env-climate-reveal.revealed .env-susbox__sub,
    html.is-saver .env-susbox__sub,
    html.is-saver .env-climate-reveal.revealed .env-susbox__sub {
      color: #f7931d !important;
    }
    .env-susbox__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .env-susbox__list li {
      position: relative;
      padding-left: 14px;
      margin-bottom: 8px;
      font-size: 12.5px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.82);
    }
    .env-susbox__list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 6px;
      width: 5px;
      height: 5px;
      background: #0069aa;
    }
    .env-susbox__list strong {
      color: #ffffff;
      font-weight: 700;
    }
    @media (max-width: 768px) {
      .env-susbox {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 24px 22px;
      }
    }

    /* ── Numbered items with rich body (digitalisation) ── */
    .env-dignum {
      display: grid;
      grid-template-columns: 26px 1fr;
      gap: 16px;
      align-items: start;
      margin-top: 24px;
    }
    .env-dignum__num {
      background: #f7931d;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      width: 26px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
    }
    @media (max-width: 768px) {
      .env-dignum {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }

    /* ── Orange sub-heading with square marker ── */
    .env-rs-head {
      position: relative;
      padding-left: 16px;
      font-size: 15px;
      font-weight: 700;
      color: #2e2c74;
      line-height: 1.3;
      margin-bottom: 10px;
    }
    body.energy-saver .env-rs-head,
    body.energy-saver .env-climate-reveal.revealed .env-rs-head,
    body.cinematic .env-rs-head,
    body.cinematic .env-climate-reveal.revealed .env-rs-head,
    body.is-saver .env-rs-head,
    body.is-saver .env-climate-reveal.revealed .env-rs-head,
    html.is-saver .env-rs-head,
    html.is-saver .env-climate-reveal.revealed .env-rs-head {
      color: #2e2c74 !important;
    }
    .env-rs-head::before {
      content: '';
      position: absolute;
      left: 0;
      top: 2px;
      width: 4px;
      height: 18px;
      background: #f7931d;
    }
    .env-tier__list.env-tier__list--blue li::before {
      background: #0069aa;
    }

    /* ── Key highlights of the programme (big number + insights box) ── */
    .env-khp {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 24px;
      margin-top: 24px;
      align-items: start;
    }
    .env-khp__num {
      font-family: 'League Gothic', sans-serif;
      font-size: 56px;
      font-weight: 400;
      color: #ffffff;
      background: linear-gradient(160deg, #0093c4 0%, #72bf44 100%);
      width: 72px;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .env-khp__box {
      border-right: 1px solid #0069aa;
      border-bottom: 1px solid #0069aa;
      border-top: 1px solid #0069aa;
      padding:0px 24px 30px 0px;
    }
    .env-khp__insights {
      background: #e1efde;
      overflow: hidden;
      margin-top: 22px;
    }
    .env-khp__insights-head {
      display: inline-block;
      background: #f7931d;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
      padding: 9px 22px;
      border-bottom-right-radius: 10px;
    }
    .env-khp__insights-list {
      list-style: none;
      margin: 0;
      padding: 14px 26px 20px;
    }
    .env-khp__insights-list li {
      position: relative;
      padding-left: 16px;
      margin-bottom: 8px;
      font-size: 13px;
      line-height: 1.5;
      color: rgba(0, 0, 0, 0.85);
    }
    .env-khp__insights-list li:last-child {
      margin-bottom: 0;
    }
    .env-khp__insights-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 6px;
      width: 6px;
      height: 6px;
      background: #0093c4;
    }
    @media (max-width: 768px) {
      .env-khp {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }

    /* ── Numbered list (orange square badges) ── */
    .env-numlist {
      list-style: none;
      margin: 14px 0 0;
      padding: 0;
    }
    .env-numlist li {
      display: grid;
      grid-template-columns: 26px 1fr;
      gap: 14px;
      align-items: start;
      margin-bottom: 12px;
    }
    .env-numlist li:last-child {
      margin-bottom: 0;
    }
    .env-numlist__num {
      background: #f7931d;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      width: 26px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
    }
    .env-numlist__txt {
      font-size: 13px;
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.82);
      padding-top: 3px;
    }
    .env-numlist--blue .env-numlist__num {
      background: #00adef;
    }

    /* ── Supplier ESG programme (gradient box + SVG) ── */
    .env-esg-prog {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      margin-top: 24px;
      align-items: stretch;
    }
    .env-esg-prog__box {
      background: linear-gradient(160deg, #6c3f99 0%, #0093c4 52%, #72bf44 100%);
      border-radius: 4px;
      padding: 32px 34px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .env-esg-prog__box h3 {
      font-size: 18px;
      font-weight: 700;
      color: #ffffff;
      text-transform: uppercase;
      line-height: 1.25;
      margin: 0 0 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    }
    .env-esg-prog__box p {
      font-size: 14px;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.92);
      margin: 0;
    }
    body.energy-saver .env-esg-prog__box h3,
    body.energy-saver .env-climate-reveal.revealed .env-esg-prog__box h3,
    body.cinematic .env-esg-prog__box h3,
    body.cinematic .env-climate-reveal.revealed .env-esg-prog__box h3,
    body.is-saver .env-esg-prog__box h3,
    body.is-saver .env-climate-reveal.revealed .env-esg-prog__box h3,
    html.is-saver .env-esg-prog__box h3,
    html.is-saver .env-climate-reveal.revealed .env-esg-prog__box h3 {
      color: #ffffff !important;
      border-bottom-color: rgba(255, 255, 255, 0.4) !important;
    }
    body.energy-saver .env-esg-prog__box p,
    body.energy-saver .env-climate-reveal.revealed .env-esg-prog__box p,
    body.cinematic .env-esg-prog__box p,
    body.cinematic .env-climate-reveal.revealed .env-esg-prog__box p,
    body.is-saver .env-esg-prog__box p,
    body.is-saver .env-climate-reveal.revealed .env-esg-prog__box p,
    html.is-saver .env-esg-prog__box p,
    html.is-saver .env-climate-reveal.revealed .env-esg-prog__box p {
      color: rgba(255, 255, 255, 0.92) !important;
    }
    .env-esg-prog__svg {
      display:block;
      align-items: center;
      justify-content: center;
    }
    .env-esg-prog__svg img {
      width: 100%;
      height: auto;
      display: block;
    }
    @media (max-width: 768px) {
      .env-esg-prog {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }

    /* ── Supplier onboarding flowchart ── */
    .env-flow {
      margin-top: 24px;
    }
    .env-flow__row {
      display: flex;
      align-items: stretch;
      margin-bottom: 22px;
    }
    .env-flow__row:last-child {
      margin-bottom: 0;
    }
    .env-flow__box {
      flex: 1;
      border: 1.5px solid #1a4d6e;
      background: rgba(255, 255, 255, 0.02);
      box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.28);
      padding: 16px 18px;
    }
    .env-flow__head {
      font-size: 14px;
      font-weight: 700;
      color: #ffffff;
      line-height: 1.25;
      margin: 0 0 10px;
    }
    .env-flow__head--purple {
      color: #ffffff;
    }
    .env-flow__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .env-flow__list li {
      position: relative;
      padding-left: 13px;
      margin-bottom: 6px;
      font-size: 14px;
      line-height: 1.4;
      color: #ffffff;
    }
    .env-flow__list li:last-child {
      margin-bottom: 0;
    }
    .env-flow__list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 5px;
      width: 5px;
      height: 5px;
      background: #0093c4;
    }
    .env-flow__arrow {
      flex: 0 0 66px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }
    .env-flow__arrow span {
      font-size: 10.5px;
      font-weight: 600;
      color: #ffffff;
      text-align: center;
      line-height: 1.2;
    }
    .env-flow__arrow::after {
      content: '';
      width: 0;
      height: 0;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      border-left: 12px solid #f7931d;
    }
    .env-flow__arrow--left::after {
      border-left: none;
      border-right: 12px solid #f7931d;
    }
    @media (max-width: 768px) {
      .env-flow__row {
        flex-direction: column;
        gap: 10px;
      }
      .env-flow__arrow {
        flex: none;
      }
      .env-flow__arrow::after {
        transform: rotate(90deg);
      }
    }

    /* ── Governance & oversight tiers ── */
    .env-tier-intro {
      background: linear-gradient(135deg, #6c3f99 0%, #0069aa 100%);
      border-radius: 14px;
      padding: 28px 34px;
      margin-top: 24px;
    }
    .env-tier-intro__head {
      font-family: 'League Gothic', sans-serif;
      font-size: clamp(22px, 2.4vw, 32px);
      font-weight: 400;
      text-transform: uppercase;
      color: #ffffff;
      line-height: 1.05;
      margin: 0 0 10px;
    }
    .env-tier-intro p {
      font-size: 14px;
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.9);
      margin: 0;
    }
    .env-tiers {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 18px;
    }
    .env-tier {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 26px;
      align-items: start;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-left: 4px solid #f7931d;
      border-radius: 12px;
      padding: 24px 28px;
    }
    .env-tier__badge {
      background: #f7931d;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1px;
      padding: 8px 16px;
      border-radius: 6px;
      white-space: nowrap;
    }
    .env-tier__lead {
      font-size: 14px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.82);
      margin: 0 0 10px;
    }
    .env-tier__lead:last-child {
      margin-bottom: 0;
    }
    .env-tier__name {
      color: #0069aa;
      font-weight: 700;
    }
    .env-tier__list {
      list-style: none;
      margin: 6px 0 0;
      padding: 0px 0px 0px 20px;
    }
    .env-tier__list li {
      position: relative;
      padding-left: 16px;
      margin-bottom: 8px;
      font-size: 13px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.8);
    }
    .env-tier__list li:last-child {
      margin-bottom: 0;
    }
    .env-tier__list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 6px;
      width: 6px;
      height: 6px;
      background: #f7931d;
    }
    @media (max-width: 768px) {
      .env-tier {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }

    /* ── CSR partners logo grid ── */
    /* ── CSR Partners: fully responsive logo grid ── */
    .env-partners {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
      margin-top: 24px;
    }
    .env-partner-ph {
      background: #ffffff;
      border: 1px solid #dcdcdc;
      border-radius: 4px;
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
      box-sizing: border-box;
      overflow: hidden;
    }
    .env-partner-ph img {
      display: block;
      /* fit the full logo inside the padded tile — never crop, any shape */
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
    }
    /* 1440px+ keeps 5 across; step the columns down with the viewport */
    @media (max-width: 1100px) {
      .env-partners { grid-template-columns: repeat(4, 1fr); }
    }
    @media (max-width: 860px) {
      .env-partners { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 600px) {
      .env-partners {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }
      .env-partner-ph { padding: 10px; }
    }

    /* ── ZFA at a glance (2-column with orange-marker items) ── */
    .env-zfa {
      display: grid;
      grid-template-columns: 1fr;   /* full width — columns stack one below the other */
      gap: 36px;
      margin-top: 20px;
      align-items: start;
    }
    .env-zfa__items {
      display: grid;
      grid-template-columns: 1fr;   /* items stack one below the other */
      gap: 12px;
      margin-top: 14px;
    }
    .env-zfa__item {
      position: relative;
      padding-left: 18px;
      font-size: 13px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.82);
    }
    body.energy-saver .env-zfa__item,
    body.energy-saver .env-climate-reveal.revealed .env-zfa__item,
    body.energy-saver .env-zfa.env-climate-reveal.revealed .env-zfa__item {
      color: #000000 !important;
    }
    .env-zfa__item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 5px;
      width: 8px;
      height: 8px;
      background: #f7931d;
    }
    .env-zfa__item--wide {
      grid-column: 1 / -1;
    }
    @media (max-width: 768px) {
      .env-zfa {
        grid-template-columns: 1fr;
        gap: 30px;
      }
      .env-zfa__items {
        grid-template-columns: 1fr;
      }
    }

    /* ── Impact graphs (purple lead + placeholders) ── */
    .env-graph-lead {
      font-size: 16px;
      font-weight: 700;
      color: #6c3f99;
      line-height: 1.4;
      margin: 0px 0 26px;
    }
    .env-graph-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 420px));
      justify-content: center;
      gap: 36px 50px;
    }
    .env-graph {
      display: flex;
      justify-content: center;
    }
    .env-graph .env-graph-img {
      max-width: 100%;
    }
    .env-graph__title {
      font-size: 15px;
      font-weight: 700;
      color: #0069aa;
      line-height: 1.35;
      margin: 0 0 16px;
    }
    .env-graph__ph {
      border: 2px dashed rgba(255, 255, 255, 0.22);
      border-radius: 8px;
      min-height: 230px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.4);
      font-size: 13px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }
    @media (max-width: 768px) {
      .env-graph-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }
    }

    /* ── Microenterprises box (two item rows + centre pills) ── */
    .env-micro {
      border:2px solid #0069aa;
      padding: 40px 44px;
      margin-top: 36px;
    }
    .env-micro__row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px 46px;
    }
    .env-micro__item {
      position: relative;
      padding-left: 16px;
    }
    .env-micro__item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 2px;
      width: 4px;
      height: 18px;
      background: #f7931d;
    }
    .env-micro__head {
      font-family: 'League Gothic', sans-serif;
      font-size: 22px;
      font-weight: 400;
      color: #0069aa;
      line-height: 1.2;
      margin: 0 0 6px;
    }
    body.energy-saver .env-micro__head,
    body.energy-saver .env-climate-reveal.revealed .env-micro__head,
    body.cinematic .env-micro__head,
    body.cinematic .env-climate-reveal.revealed .env-micro__head,
    body.is-saver .env-micro__head,
    body.is-saver .env-climate-reveal.revealed .env-micro__head,
    html.is-saver .env-micro__head,
    html.is-saver .env-climate-reveal.revealed .env-micro__head {
      color: #0069aa !important;
    }
    .env-micro__desc {
      font-size: 13px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.78);
      margin: 0;
    }
    .env-micro__pills {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      margin: 30px 0;
    }
    .env-micro__pill {
      padding: 11px 32px;
      border-radius: 999px;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      max-width: 100%;
    }
    .env-micro__pill--blue {
      background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%);
    }
    .env-micro__pill--orange {
      background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%);
    }
    /* Pills always sit on the blue→green gradient, so keep the text white in
       BOTH modes (override the broad cinematic dark-text rule). */
    body.energy-saver .env-micro__pill { color: #ffffff !important; }
    @media (max-width: 768px) {
      .env-micro {
        padding: 28px 22px;
      }
      .env-micro__row {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .env-micro__pill {
        font-size: 12px;
        padding: 10px 18px;
      }
    }

    /* ── Image with overlay card (e.g. Samadhan) ── */
    .env-overlay-wrap {
      position: relative;
    }
    .env-overlay-card {
      position: absolute;
      top: 26px;
      left: 26px;
      width: 290px;
      max-width: 58%;
    }
    /* card anchored to the bottom-left instead of top-left */
    .env-overlay-card--bottom {
      top: auto;
      bottom: 26px;
    }
    .env-overlay-card__head {
      background: #f7931d;
      color: #ffffff;
      font-size: 19px;
      font-weight: 700;
      padding: 13px 22px;
    }
    .env-overlay-card__body {
      background: #ffffff;
      padding: 18px 22px;
    }
    .env-overlay-card__body p {
      margin: 0;
      color: #000000;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
    }
    @media (max-width: 768px) {
      .env-overlay-card {
        top: 14px;
        left: 14px;
        width: 200px;
      }
      .env-overlay-card--bottom {
        top: auto;
        bottom: 14px;
      }
      .env-overlay-card__head {
        font-size: 15px;
        padding: 10px 16px;
      }
      .env-overlay-card__body {
        padding: 12px 16px;
      }
      .env-overlay-card__body p {
        font-size: 12px;
      }
    }

    /* ── Overlay card: stack below the image on small screens ──
       New modifier (does not touch the base .env-overlay-card rules). On desktop
       the card stays absolutely positioned over the image; below 768px it drops
       out of overlay and sits as a full-width block directly beneath the image
       with balanced padding. */
    @media (max-width: 768px) {
      .env-overlay-card--stack-mobile {
        position: static !important;
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 14px !important;
      }
      .env-overlay-card--stack-mobile .env-overlay-card__head {
        padding: 12px 18px !important;
      }
      .env-overlay-card--stack-mobile .env-overlay-card__body {
        padding: 16px 18px !important;
      }
    }

    .env-climate-p {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.75;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 18px;
      /* padding-top: 10px; */
    }

    /* Left-to-right scroll reveal */
    .env-climate-reveal {
      opacity: 0;
      transform: translateX(-60px);
      transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-climate-reveal.revealed {
      opacity: 1;
      transform: translateX(0);
    }

    /* Two column layout */
    .env-climate-two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      margin-top: 28px;
      align-items: start;
    }

    /* Climate Action Report card — Key Takeaway style */
    .env-car-outer {
      position: relative;
      display: block;
    }

    .env-car-shadow {
      position: absolute;
      inset: 0;
      transform: translate(7px, 7px);
      border-radius: 0;
      background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%);
      opacity: 0.30;
      z-index: 0;
    }

    .env-car-card {
      padding: 28px 32px;
      background: #081C33;
      border-radius: 0;
      width: 100%;
      position: relative;
      z-index: 1;
      border: none;
      box-sizing: border-box;
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-car-card:hover {
      transform: translateY(-10px) scale(1.015);
      box-shadow: 0 24px 60px rgba(0, 105, 170, 0.25), 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    .env-car-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 0;
      padding: 1.5px;
      background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    .env-car-card__heading {
      font-size: clamp(19px, 1.55vw, 28px);
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 14px;
    }

    .env-car-card__text {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.82);
      margin-bottom: 18px;
    }
    .env-car-card__text.is5,
    body.energy-saver .env-car-card__text.is5,
    body.is-saver .env-car-card__text.is5,
    html.is-saver .env-car-card__text.is5 {
      color: #ffffff !important;
    }
    .env-car-card__text.is15 em,
    body.energy-saver .env-car-card__text.is15 em,
    body.energy-saver .env-climate-reveal.revealed .env-car-card__text.is15 em,
    body.cinematic .env-car-card__text.is15 em,
    body.cinematic .env-climate-reveal.revealed .env-car-card__text.is15 em,
    body.is-saver .env-car-card__text.is15 em,
    body.is-saver .env-climate-reveal.revealed .env-car-card__text.is15 em,
    html.is-saver .env-car-card__text.is15 em,
    html.is-saver .env-climate-reveal.revealed .env-car-card__text.is15 em {
      color: #ffffff !important;
    }
    .env-car-card__text.is21 strong,
    .env-car-card__text.is21 strong.is22,
    body.energy-saver .env-car-card__text.is21 strong,
    body.energy-saver .env-car-card__text.is21 strong.is22,
    body.energy-saver .env-climate-reveal.revealed .env-car-card__text.is21 strong,
    body.energy-saver .env-climate-reveal.revealed .env-car-card__text.is21 strong.is22,
    body.cinematic .env-car-card__text.is21 strong,
    body.cinematic .env-car-card__text.is21 strong.is22,
    body.cinematic .env-climate-reveal.revealed .env-car-card__text.is21 strong,
    body.cinematic .env-climate-reveal.revealed .env-car-card__text.is21 strong.is22,
    body.is-saver .env-car-card__text.is21 strong,
    body.is-saver .env-car-card__text.is21 strong.is22,
    body.is-saver .env-climate-reveal.revealed .env-car-card__text.is21 strong,
    body.is-saver .env-climate-reveal.revealed .env-car-card__text.is21 strong.is22,
    html.is-saver .env-car-card__text.is21 strong,
    html.is-saver .env-car-card__text.is21 strong.is22,
    html.is-saver .env-climate-reveal.revealed .env-car-card__text.is21 strong,
    html.is-saver .env-climate-reveal.revealed .env-car-card__text.is21 strong.is22 {
      color: #ffffff !important;
    }
    .env-car-card__text:last-child {
      margin-bottom: 0;
    }

    /* light left-to-right gradient panel (green → blue) inside the dark card —
       bleeds to the card edges; dark text for readability */
    .env-car-illu {
      background: linear-gradient(90deg, #d5ecc7 0%, #bcd6e7 100%);
      margin: 18px -32px -28px;
      padding: 22px 32px 26px;
    }
    .env-car-illu .env-osub {
      margin-top: 0;
    }
    .env-car-illu .env-car-card__text {
      color: #081C33;
    }
    .env-car-illu .env-hr-list li {
      color: #081C33;
    }
    .env-car-illu--white-copy .env-car-card__text,
    .env-car-illu--white-copy .env-hr-list li {
      color: #081C33 !important;
    }

    /* numbered-badge heading (teal→green square + blue uppercase head) */
    .env-nbhead {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
    }
    .env-nbhead__num {
      flex: 0 0 auto;
      width: 30px;
      height: 30px;
      border-radius: 6px;
      background: #f7931d;
      color: #ffffff;
      font-family: 'proxima-nova', sans-serif;
      font-weight: 800;
      font-size: 15px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .env-nbhead__text {
      font-family: 'proxima-nova', sans-serif;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      color: #0069aa !important;
      margin: 0;
    }

    /* white heading inside the gradient-border card */
    .env-car-card__head {
      font-size: 16px;
      font-weight: 700;
      color: #ffffff;
      line-height: 1.3;
      margin: 0 0 14px;
    }

    .env-car-card__link {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 500;
      color: #7fb942;
      text-decoration: none;
      transition: color 0.2s;
    }

    .env-car-card__link:hover {
      color: #ffffff;
    }
    body.energy-saver .env-car-card__heading,
    body.energy-saver .env-climate-reveal.revealed .env-car-card__heading,
    body.cinematic .env-car-card__heading,
    body.cinematic .env-climate-reveal.revealed .env-car-card__heading,
    body.is-saver .env-car-card__heading,
    body.is-saver .env-climate-reveal.revealed .env-car-card__heading,
    html.is-saver .env-car-card__heading,
    html.is-saver .env-climate-reveal.revealed .env-car-card__heading {
      color: #ffffff !important;
    }
    body.energy-saver .env-car-card__text,
    body.energy-saver .env-climate-reveal.revealed .env-car-card__text,
    body.cinematic .env-car-card__text,
    body.cinematic .env-climate-reveal.revealed .env-car-card__text,
    body.is-saver .env-car-card__text,
    body.is-saver .env-climate-reveal.revealed .env-car-card__text,
    html.is-saver .env-car-card__text,
    html.is-saver .env-climate-reveal.revealed .env-car-card__text {
      color: rgba(255, 255, 255, 0.82) !important;
    }
    body.energy-saver .env-car-card__link,
    body.energy-saver .env-climate-reveal.revealed .env-car-card__link,
    body.cinematic .env-car-card__link,
    body.cinematic .env-climate-reveal.revealed .env-car-card__link,
    body.is-saver .env-car-card__link,
    body.is-saver .env-climate-reveal.revealed .env-car-card__link,
    html.is-saver .env-car-card__link,
    html.is-saver .env-climate-reveal.revealed .env-car-card__link {
      color: #7fb942 !important;
    }
    body.energy-saver .env-car-card__link:hover,
    body.energy-saver .env-climate-reveal.revealed .env-car-card__link:hover,
    body.cinematic .env-car-card__link:hover,
    body.cinematic .env-climate-reveal.revealed .env-car-card__link:hover,
    body.is-saver .env-car-card__link:hover,
    body.is-saver .env-climate-reveal.revealed .env-car-card__link:hover,
    html.is-saver .env-car-card__link:hover,
    html.is-saver .env-climate-reveal.revealed .env-car-card__link:hover {
      color: #ffffff !important;
    }

    /* Bullet list */
    .env-climate-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .env-climate-list li {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.85);
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .env-climate-list li strong {
      white-space: nowrap;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.85);
    }

    .env-climate-list li::before {
      content: '';
      width: 7px;
      height: 7px;
      min-width: 7px;
      background: #0069aa;
      border-radius: 50%;
      margin-top: 8px;
      flex-shrink: 0;
    }

    @media (max-width: 768px) {
      .env-climate-two-col {
        grid-template-columns: 1fr;
        gap: 28px;
      }
    }

    @media (max-width: 480px) {
      .env-car-card {
        padding: 20px 16px;
      }
    }

    /* ── HR / Key-focus section ── */
    .env-hr-section {
      max-width: 1440px;
      margin: 0 auto;
      padding: 10px clamp(2rem, 8vw, 7rem) 80px;
    }

    .env-hr-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
      align-items: start;
    }

    .env-hr-head {
      font-size: 18px;
      font-weight: 700;
      color: #6c3f99;
      /* purple sub-heading */
      letter-spacing: 0;
      line-height: 1.3;
      margin-bottom: 10px;
    }

    body.energy-saver .env-hr-head,
    body.energy-saver .env-climate-reveal.revealed .env-hr-head,
    body.cinematic .env-hr-head,
    body.cinematic .env-climate-reveal.revealed .env-hr-head,
    body.is-saver .env-hr-head,
    body.is-saver .env-climate-reveal.revealed .env-hr-head,
    html.is-saver .env-hr-head,
    html.is-saver .env-climate-reveal.revealed .env-hr-head {
      color: #6c3f99 !important;
    }

    .env-hr-head--mt {
      margin-top: 34px;
    }

    .env-hr-p {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.75;
      color: rgba(255, 255, 255, 0.85);
      margin: 0;
    }

    .env-hr-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .env-hr-list li {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.85);
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .env-hr-list li::before {
      content: '';
      width: 8px;
      height: 8px;
      min-width: 8px;
      background: #0069aa;
      /* square blue bullet */
      border-radius: 0;
      margin-top: 6px;
      flex-shrink: 0;
    }

    /* Light / Energy Saver mode: the HR "Key focus areas" list + HR Vision /
       HR Philosophy paragraphs are white by default — recolour them dark so
       they stay visible on the white background. */
    body.energy-saver .env-hr-p,
    html.energy-saver .env-hr-p,
    body.is-saver .env-hr-p,
    html.is-saver .env-hr-p,
    body.energy-saver .env-hr-list li,
    html.energy-saver .env-hr-list li,
    body.is-saver .env-hr-list li,
    html.is-saver .env-hr-list li {
      color: #0c2340 !important;
    }

    @media (max-width: 768px) {
      .env-hr-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .env-hr-section {
        padding: 10px 20px 56px;
      }
    }

    @media (max-width: 480px) {
      .env-hr-section {
        padding: 10px 16px 44px;
      }
    }

    /* ── HR impact FY2026 — stat cards (env performance-FY style) ── */
    .env-hri-section {
      max-width: 1440px;
      margin: 0 auto;
      padding: 20px clamp(2rem, 8vw, 7rem) 90px;
    }

    .env-hri-heading {
      font-size: clamp(22px, 2.2vw, 34px);
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 0;
      margin-bottom: 34px;
    }

    .env-hri-pct {
      font-size: 0.55em;
    }

    /* smaller % to match the source */
    @media (max-width: 600px) {
      .env-hri-section {
        padding: 10px 20px 60px;
      }
    }

    /* ── Women development — purple heading + 2-column orange-line list ── */
    .env-women-head {
      font-size: 18px;
      font-weight: 700;
      color: #6c3f99;
      /* purple heading */
      letter-spacing: 0;
      line-height: 1.3;
      margin: 0 0 10px;
    }

    body.energy-saver .env-women-head,
    body.energy-saver .env-climate-reveal.revealed .env-women-head,
    body.cinematic .env-women-head,
    body.cinematic .env-climate-reveal.revealed .env-women-head,
    body.is-saver .env-women-head,
    body.is-saver .env-climate-reveal.revealed .env-women-head,
    html.is-saver .env-women-head,
    html.is-saver .env-climate-reveal.revealed .env-women-head,
    body.energy-saver .env-women-head.is5,
    body.energy-saver .env-climate-reveal.revealed .env-women-head.is5,
    body.cinematic .env-women-head.is5,
    body.cinematic .env-climate-reveal.revealed .env-women-head.is5,
    body.is-saver .env-women-head.is5,
    body.is-saver .env-climate-reveal.revealed .env-women-head.is5,
    html.is-saver .env-women-head.is5,
    html.is-saver .env-climate-reveal.revealed .env-women-head.is5 {
      color: #6c3f99 !important;
    }

    .env-women-list {
      list-style: none;
      margin: 16px 0 0;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px 56px;
    }

    .env-women-list li {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.85);
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }

    .env-women-list li::before {
      content: '';
      width: 3px;
      height: 20px;
      min-width: 3px;
      background: #f7931d;
      /* orange line on the left */
      margin-top: 2px;
      flex-shrink: 0;
    }

    @media (max-width: 768px) {
      .env-women-list {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }

    /* ── Zinclusion two-column section ── */
    .env-zinc-section {
      max-width: 1440px;
      margin: 0 auto;
      padding: 10px clamp(2rem, 8vw, 7rem) 0px !important;
    }

    .env-zinc-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
      align-items: start;
      padding: 0 40px 10px 0;
      border-right: 2px solid #f7931d;
      border-bottom: 2px solid #f7931d;
    }
    .zincgridgap0{
      gap: 0;
    }

    .env-zinc-head {
      font-family: 'League Gothic', sans-serif;
      font-size: clamp(26px, 2.4vw, 36px);
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0;
      line-height: 1.05;
      color: #f7931d;
      /* orange heading */
      margin-bottom: 16px;
    }

    body.energy-saver .env-zinc-head,
    body.energy-saver .env-climate-reveal.revealed .env-zinc-head,
    body.cinematic .env-zinc-head,
    body.cinematic .env-climate-reveal.revealed .env-zinc-head,
    body.is-saver .env-zinc-head,
    body.is-saver .env-climate-reveal.revealed .env-zinc-head,
    html.is-saver .env-zinc-head,
    html.is-saver .env-climate-reveal.revealed .env-zinc-head {
      color: #f7931d !important;
    }

    .env-zinc-accent {
      display: block;
      width: 220px;
      height: 4px;
      background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%);
      border-radius: 2px;
      margin: 0 0 20px;
    }

    .env-zinc-subhead {
      font-size: 18px;
      font-weight: 700;
      color: #6c3f99;
      /* purple sub-heading */
      letter-spacing: 0;
      margin: 12px 0 10px;
    }

    body.energy-saver .env-zinc-subhead,
    body.energy-saver .env-climate-reveal.revealed .env-zinc-subhead,
    body.cinematic .env-zinc-subhead,
    body.cinematic .env-climate-reveal.revealed .env-zinc-subhead,
    body.is-saver .env-zinc-subhead,
    body.is-saver .env-climate-reveal.revealed .env-zinc-subhead,
    html.is-saver .env-zinc-subhead,
    html.is-saver .env-climate-reveal.revealed .env-zinc-subhead {
      color: #6c3f99 !important;
    }

    .env-zinc-num {
      font-family: 'League Gothic', sans-serif;
      font-size: clamp(56px, 6vw, 92px);
      font-weight: 400;
      line-height: 0.9;
      letter-spacing: -0.01em;
      color: #0069aa;
      margin-bottom: 10px;
    }

    @media (max-width: 768px) {
      .env-zinc-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .env-zinc-section {
        padding: 10px 20px 56px;
      }
    }

    /* ── TEJASWINI — single-column variant of the Zinclusion style ── */
    .env-tej-section {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(2rem, 8vw, 7rem);
    }

    @media (max-width: 768px) {
      .env-tej-section {
        padding: 0 20px;
      }
    }

    .env-tej-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      align-items: start;
      padding: 0 40px 28px 0;
      border-right: 2px solid #f7931d;
      border-bottom: 2px solid #f7931d;
    }

    .env-tej-full {
      grid-column: 1 / -1;
    }

    

    /* ── Diversity pie charts — 3-column ── */
    .env-diversity-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      align-items: start;
      margin-top: 40px;
    }

    .env-diversity-chart {
      width: 100%;
      height: auto;
      max-width: 340px;
      margin: 0 auto;
      display: block;
    }

    @media (max-width: 768px) {
      .env-diversity-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }
    }

    /* ── Talent management — left text | centre graphic | right text ── */
    .env-talent-grid {
      display: grid;
      grid-template-columns: 1fr 300px 1fr;
      gap: 32px;
      align-items: center;
      margin-top: 30px;
    }

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

    .env-talent-head {
      font-size: 16px;
      font-weight: 700;
      color: #6c3f99;
      /* purple heading */
      line-height: 1.3;
      margin: 0 0 10px;
    }

    body.energy-saver .env-talent-head,
    body.energy-saver .env-climate-reveal.revealed .env-talent-head,
    body.cinematic .env-talent-head,
    body.cinematic .env-climate-reveal.revealed .env-talent-head,
    body.is-saver .env-talent-head,
    body.is-saver .env-climate-reveal.revealed .env-talent-head,
    html.is-saver .env-talent-head,
    html.is-saver .env-climate-reveal.revealed .env-talent-head {
      color: #6c3f99 !important;
    }

    .env-talent-p {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.85);
      margin: 0;
    }

    @media (max-width: 768px) {
      .env-talent-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .env-talent-img {
        max-width: 260px;
        margin: 0 auto;
        order: -1;
      }
    }

    /* ── Leadership bench / talent management — full-width text ── */
    .env-lead-head {
      font-size: 18px;
      font-weight: 700;
      color: #0093b8;
      /* teal main heading (per screenshot) */
      letter-spacing: 0;
      line-height: 1.3;
      margin: 36px 0 14px;
    }

    body.energy-saver .env-lead-head,
    body.energy-saver .env-climate-reveal.revealed .env-lead-head,
    body.cinematic .env-lead-head,
    body.cinematic .env-climate-reveal.revealed .env-lead-head,
    body.is-saver .env-lead-head,
    body.is-saver .env-climate-reveal.revealed .env-lead-head,
    html.is-saver .env-lead-head,
    html.is-saver .env-climate-reveal.revealed .env-lead-head {
      color: #0093b8 !important;
    }

    .env-lead-head:first-child {
      margin-top: 0;
    }

    .env-lead-head--purple {
      color: #6c3f99;
    }

    body.energy-saver .env-lead-head--purple,
    body.energy-saver .env-climate-reveal.revealed .env-lead-head--purple,
    body.cinematic .env-lead-head--purple,
    body.cinematic .env-climate-reveal.revealed .env-lead-head--purple,
    body.is-saver .env-lead-head--purple,
    body.is-saver .env-climate-reveal.revealed .env-lead-head--purple,
    html.is-saver .env-lead-head--purple,
    html.is-saver .env-climate-reveal.revealed .env-lead-head--purple,
    body.energy-saver .env-lead-head.env-lead-head--purple.is5,
    body.energy-saver .env-climate-reveal.revealed .env-lead-head.env-lead-head--purple.is5,
    body.cinematic .env-lead-head.env-lead-head--purple.is5,
    body.cinematic .env-climate-reveal.revealed .env-lead-head.env-lead-head--purple.is5,
    body.is-saver .env-lead-head.env-lead-head--purple.is5,
    body.is-saver .env-climate-reveal.revealed .env-lead-head.env-lead-head--purple.is5,
    html.is-saver .env-lead-head.env-lead-head--purple.is5,
    html.is-saver .env-climate-reveal.revealed .env-lead-head.env-lead-head--purple.is5 {
      color: #6c3f99 !important;
    }

    /* purple main heading */
    .env-lead-subhead {
      font-size: 15px;
      font-weight: 700;
      color: #0069aa;
      /* blue sub-heading */
      letter-spacing: 0;
      margin: 16px 0 8px;
    }

    body.energy-saver .env-lead-subhead,
    body.energy-saver .env-climate-reveal.revealed .env-lead-subhead,
    body.cinematic .env-lead-subhead,
    body.cinematic .env-climate-reveal.revealed .env-lead-subhead,
    body.is-saver .env-lead-subhead,
    body.is-saver .env-climate-reveal.revealed .env-lead-subhead,
    html.is-saver .env-lead-subhead,
    html.is-saver .env-climate-reveal.revealed .env-lead-subhead,
    body.energy-saver .env-lead-subhead.is11,
    body.energy-saver .env-climate-reveal.revealed .env-lead-subhead.is11,
    body.cinematic .env-lead-subhead.is11,
    body.cinematic .env-climate-reveal.revealed .env-lead-subhead.is11,
    body.is-saver .env-lead-subhead.is11,
    body.is-saver .env-climate-reveal.revealed .env-lead-subhead.is11,
    html.is-saver .env-lead-subhead.is11,
    html.is-saver .env-climate-reveal.revealed .env-lead-subhead.is11 {
      color: #0069aa !important;
    }

    .env-lead-p {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.75;
      color: rgba(255, 255, 255, 0.85);
      margin: 0 0 14px;
    }

    /* ── Continuous learning — 2-column (text + stat card) ── */
    .env-learn-section {
      max-width: 1440px;
      margin: 0 auto;
      padding: 30px clamp(2rem, 8vw, 7rem);
      padding-bottom: 30px !important;
    }

    .env-learn-grid {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 48px;
      align-items: center;
    }

    .env-learn-num {
      font-family: 'League Gothic', sans-serif;
      font-size: clamp(48px, 5vw, 78px);
      font-weight: 400;
      color: #ffffff;
      line-height: 0.95;
      letter-spacing: -0.01em;
      margin-bottom: 16px;
    }

    .env-learn-unit {
      font-size: 0.46em;
    }

    body.energy-saver .env-learn-unit,
    body.energy-saver .env-climate-reveal.revealed .env-learn-unit,
    body.cinematic .env-learn-unit,
    body.cinematic .env-climate-reveal.revealed .env-learn-unit,
    body.is-saver .env-learn-unit,
    body.is-saver .env-climate-reveal.revealed .env-learn-unit,
    html.is-saver .env-learn-unit,
    html.is-saver .env-climate-reveal.revealed .env-learn-unit {
      color: inherit !important;
    }

    .env-learn-caption {
      font-size: 15px;
      font-weight: 400;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.85);
      margin: 0;
    }

    body.energy-saver .env-learn-caption,
    body.energy-saver .env-climate-reveal.revealed .env-learn-caption,
    body.cinematic .env-learn-caption,
    body.cinematic .env-climate-reveal.revealed .env-learn-caption,
    body.is-saver .env-learn-caption,
    body.is-saver .env-climate-reveal.revealed .env-learn-caption,
    html.is-saver .env-learn-caption,
    html.is-saver .env-climate-reveal.revealed .env-learn-caption {
      color: rgba(255, 255, 255, 0.85) !important;
    }

    @media (max-width: 768px) {
      .env-learn-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .env-learn-section {
        padding: 40px 20px;
      }
    }

    /* ── SAKSHAM learning pathways — numbered single-column list ── */
    .env-pathway-list {
      display: flex;
      flex-direction: column;
      gap: 28px;
      margin-top: 12px;
    }

    .env-pathway-item {
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }

    .env-pathway-num {
      flex: none;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'League Gothic', sans-serif;
      font-size: 22px;
      line-height: 1;
      color: #ffffff;
      background: linear-gradient(
    90deg,
    #75C044 0%,
    #0065A8 100%
);
      /* background: linear-gradient(140deg, #72bf44 0%, #0093c4 100%); */
      /* gradient badge */
      /* border-radius: 6px; */
    }

    .env-pathway-head {
      font-size: 16px;
      font-weight: 700;
      color: #6c3f99;
      /* purple heading */
      letter-spacing: 0;
      line-height: 1.3;
      margin: 4px 0 6px;
    }

    body.energy-saver .env-pathway-head,
    body.energy-saver .env-climate-reveal.revealed .env-pathway-head,
    body.cinematic .env-pathway-head,
    body.cinematic .env-climate-reveal.revealed .env-pathway-head,
    body.is-saver .env-pathway-head,
    body.is-saver .env-climate-reveal.revealed .env-pathway-head,
    html.is-saver .env-pathway-head,
    html.is-saver .env-climate-reveal.revealed .env-pathway-head {
      color: #6c3f99 !important;
    }

    .env-pathway-p {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.85);
      margin: 0;
    }

    .env-pathway-bullets {
      list-style: none;
      margin: 10px 0 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .env-pathway-bullets li {
      font-size: 14px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.85);
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .env-pathway-bullets li::before {
      content: '';
      width: 7px;
      height: 7px;
      min-width: 7px;
      background: #0069aa;
      margin-top: 6px;
      flex-shrink: 0;
    }

    /* ── Remuneration governance — full-width purple heading + 3-col blue items ── */
    .env-remun-section {
      max-width: 1440px;
      margin: 0 auto;
      padding: 20px clamp(2rem, 8vw, 7rem);
    }

    .env-perfrev {
      margin-bottom: 30px;
    }
    .is3.is3pdbtmtop30{
      padding: 30px 0px;
    }
    .pdbtm20readmr{
      padding-bottom: 20px;
    }

    .env-perfrev__subhead {
      margin: 14px 0 18px;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.35;
      color: #7a46b3;
    }

    /* .env-perfrev__grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 28px 34px;
      align-items: start;
    } */

    .env-perfrev__col {
      min-width: 0;
    }

    .env-perfrev__head {
      margin: 0 0 10px;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.35;
      color: #0069aa;
    }

    .env-perfrev__text {
      margin: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.85);
    }

    .env-perfrev__text + .env-perfrev__text {
      margin-top: 18px;
    }

    .env-perfrev__pill {
      display: inline-block;
      margin: 16px 0 12px;
      padding: 4px 12px;
      background: #f7931d;
      color: #ffffff;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.1;
    }

    body.energy-saver .env-perfrev__subhead,
    body.energy-saver .env-climate-reveal.revealed .env-perfrev__subhead,
    body.cinematic .env-perfrev__subhead,
    body.cinematic .env-climate-reveal.revealed .env-perfrev__subhead,
    body.is-saver .env-perfrev__subhead,
    body.is-saver .env-climate-reveal.revealed .env-perfrev__subhead,
    html.is-saver .env-perfrev__subhead,
    html.is-saver .env-climate-reveal.revealed .env-perfrev__subhead {
      color: #7a46b3 !important;
    }

    body.energy-saver .env-perfrev__head,
    body.energy-saver .env-climate-reveal.revealed .env-perfrev__head,
    body.cinematic .env-perfrev__head,
    body.cinematic .env-climate-reveal.revealed .env-perfrev__head,
    body.is-saver .env-perfrev__head,
    body.is-saver .env-climate-reveal.revealed .env-perfrev__head,
    html.is-saver .env-perfrev__head,
    html.is-saver .env-climate-reveal.revealed .env-perfrev__head {
      color: #0069aa !important;
    }

    .env-remun-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px 44px;
      margin-top: 32px;
    }

    .env-remun-subhead {
      font-size: 16px;
      font-weight: 700;
      color: #0069aa;
      /* blue heading */
      border-left: 3px solid #f7931d;
      /* orange left border */
      padding-left: 12px;
      line-height: 1.35;
      margin: 0 0 10px;
    }

    body.energy-saver .env-remun-subhead,
    body.energy-saver .env-climate-reveal.revealed .env-remun-subhead,
    body.cinematic .env-remun-subhead,
    body.cinematic .env-climate-reveal.revealed .env-remun-subhead,
    body.is-saver .env-remun-subhead,
    body.is-saver .env-climate-reveal.revealed .env-remun-subhead,
    html.is-saver .env-remun-subhead,
    html.is-saver .env-climate-reveal.revealed .env-remun-subhead {
      color: #0069aa !important;
    }

    .env-remun-p {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.85);
      margin: 0;
      padding-left: 15px;
      /* align with heading text */
    }

    @media (max-width: 768px) {

      .env-perfrev {
        margin-bottom: 34px;
      }

      .env-remun-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .env-remun-section {
        padding: 40px 20px;
      }
    }

    /* ── Human Rights & Labour Relations ── */
    .env-hr2-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 28px;
      margin-top: 22px;
    }

    .env-hr2-subhead {
      font-size: 16px;
      font-weight: 700;
      color: #0069aa;
      margin: 0 0 10px;
    }

    body.energy-saver .env-hr2-subhead,
    body.energy-saver .env-climate-reveal.revealed .env-hr2-subhead,
    body.cinematic .env-hr2-subhead,
    body.cinematic .env-climate-reveal.revealed .env-hr2-subhead,
    body.is-saver .env-hr2-subhead,
    body.is-saver .env-climate-reveal.revealed .env-hr2-subhead,
    html.is-saver .env-hr2-subhead,
    html.is-saver .env-climate-reveal.revealed .env-hr2-subhead {
      color: #0069aa !important;
    }

    .env-hr2-link {
      display: inline-block;
      margin-top: 12px;
      font-size: 13px;
      font-style: italic;
      color: #7fb942;
      text-decoration: none;
    }

    .env-hr2-link:hover {
      color: #ffffff;
    }

    /* Key actions for human rights protection */
    .env-ka-wrap {
      display: grid;
      grid-template-columns: 230px 1fr;
      gap: 44px;
      align-items: center;
      margin-top: 30px;
    }

    .env-ka-img {
      width: 100%;
      max-width: 230px;
      height: auto;
      display: block;
    }

    .env-ka-items {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
    }

    .env-ka-item {
      font-size: 14px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.85);
      display: flex;
      gap: 12px;
      padding: 16px 26px;
    }

    .env-ka-item::before {
      content: '';
      width: 3px;
      height: 18px;
      min-width: 3px;
      background: #f7931d;
      /* orange line marker */
      margin-top: 2px;
      flex-shrink: 0;
    }

    /* purple horizontal divider between the two rows */
    .env-ka-items>.env-ka-item:nth-child(1),
    .env-ka-items>.env-ka-item:nth-child(2) {
      border-bottom: 1px solid #6c3f99;
    }

    @media (max-width: 768px) {
      .env-ka-wrap {
        grid-template-columns: 1fr;
        gap: 28px;
        justify-items: center;
      }

      .env-ka-items {
        grid-template-columns: 1fr;
      }
    }

    /* Business & human rights practices */
    .env-bhr-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px 48px;
      margin-top: 22px;
    }

    .env-bhr-head {
      font-size: 15px;
      font-weight: 700;
      color: #0069aa;
      /* blue heading */
      margin: 0 0 6px;
      display: flex;
      align-items: center;
      gap: 9px;
    }

    body.energy-saver .env-bhr-head,
    body.energy-saver .env-climate-reveal.revealed .env-bhr-head,
    body.cinematic .env-bhr-head,
    body.cinematic .env-climate-reveal.revealed .env-bhr-head,
    body.is-saver .env-bhr-head,
    body.is-saver .env-climate-reveal.revealed .env-bhr-head,
    html.is-saver .env-bhr-head,
    html.is-saver .env-climate-reveal.revealed .env-bhr-head {
      color: #0069aa !important;
    }

    .env-bhr-head::before {
      /* orange right-pointing arrow */
      content: '';
      width: 0;
      height: 0;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 8px solid #f7931d;
      flex-shrink: 0;
    }

    .env-bhr-p {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.85);
      margin: 0;
      padding-left: 17px;
      /* align with the heading text (past the arrow) */
    }

    @media (max-width: 768px) {

      .env-hr2-grid,
      .env-bhr-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }
    }

    /* ── Employee well-being — L-border section ── */
    .env-wb-section {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(2rem, 8vw, 7rem) 60px;
    }

    .env-wb-inner {
      padding: 0 40px 10px 0;
      border-right: 2px solid #f7931d;
      border-bottom: 2px solid #f7931d;
    }

    .env-qol-inner {
      padding: 0 40px 44px 0;
      border-right: 2px solid #6c3f99;
      /* purple L-border */
      border-bottom: 2px solid #6c3f99;
    }

    @media (max-width: 768px) {
      .env-qol-inner {
        padding: 0 18px 26px 0;
      }
    }

    .env-wb-img {
      margin-top: 32px;
    }

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

    @media (max-width: 768px) {
      .env-wb-section {
        padding: 40px 20px;
      }

      .env-wb-inner {
        padding: 0 18px 10px 0;
      }

      .env-wb-img {
        max-width: 100%;
      }
    }

    .env-section-heading {
      font-size: clamp(24px, 2.5vw, 42px);
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
      margin-top: 40px;
      background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    @media (max-width: 768px) {
      .env-body-wrap {
        padding: 50px 20px;
      }
    }

    @media (max-width: 480px) {
      .env-body-wrap {
        padding: 10px 16px;
      }
    }

    /* ══════════════════════════════════════
       PILLAR 1 SECTION
    ══════════════════════════════════════ */
    .env-pillar-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 20px clamp(2rem, 8vw, 7rem) 80px;
    }

    .env-pillar-tag {
      font-size: clamp(19px, 1.55vw, 28px);
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
      color: #7fb942;
      margin-bottom: 10px;
      position: relative;
      top: 7px;
    }

    .env-pillar-subhead {
      font-size: clamp(19px, 1.55vw, 28px);
      font-weight: 700;
      color: #0069aa;
      margin-bottom: 20px;
    }

    /* Key Highlights — green outline box with right glow */
    .env-highlights-box {
      margin-top: 32px;
      border: 1.5px solid #72bf44;
      border-radius: 0;
      padding: 32px 36px;
      position: relative;
      overflow: visible;
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-highlights-box:hover {
      transform: translateY(-10px) scale(1.015);
      box-shadow: 0 24px 60px rgba(0, 105, 170, 0.25), 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    .env-highlights-box__heading {
      font-size: clamp(16px, 1.3vw, 20px);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0;
      color: #0069aa;
      margin-bottom: 24px;
      padding-bottom: 12px;
      margin-left: -36px;
      margin-right: -36px;
      padding-left: 36px;
      padding-right: 36px;
      border-bottom: 1px solid #72bf44;
      position: relative;
    }

    .env-highlights-box__heading::after {
      display: none;
    }

    .env-highlights-box__grid {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    /* Stats list — no green border */
    .env-highlights-stats {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .env-highlights-stats li {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.82);
    }

    .env-highlights-stats li strong {
      color: rgba(255, 255, 255, 0.82);
      font-weight: 400;
    }

    /* Sub-sections stacked vertically */
    .env-highlights-right {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .env-highlights-subhead {
      font-size: clamp(16px, 1.3vw, 20px);
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
      color: #0069aa;
      margin-bottom: 10px;
    }

    .env-highlights-p {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.82);
    }

    @media (max-width: 768px) {
      .env-pillar-wrap {
        padding: 50px 20px 60px;
      }
    }

    @media (max-width: 480px) {
      .env-pillar-wrap {
        padding: 40px 16px 50px;
      }
    }

    /* Pillar 4 — stacked single column, left-to-right reveal */
    .env-p4-grid {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 24px;
    }

    .env-p4-col {
      opacity: 0;
      transform: translateX(-80px);
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      padding: 8px 0;
    }

    .env-p4-col.revealed {
      opacity: 1;
      transform: translateX(0);
    }

    /* Stat box — stacked below, same left-to-right */
    .env-p4-stat {
      opacity: 0;
      transform: translateX(-80px);
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      background: rgba(127, 185, 66, 0.07);
      border: 1.5px solid #72bf44;
      border-radius: 0;
      padding: 28px 24px;
      margin-top: 8px;
      width: 100%;
      box-sizing: border-box;
    }

    .env-p4-stat.revealed {
      opacity: 1;
      transform: translateX(0);
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-p4-stat.revealed:hover {
      transform: translateY(-10px) scale(1.015);
      box-shadow: 0 24px 60px rgba(0, 105, 170, 0.25), 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    .env-p4-stat__num {
      font-size: clamp(34px, 3.3vw, 52px);
      font-weight: 900;
      color: #ffffff;
      line-height: 1.1;
      margin-bottom: 14px;
      letter-spacing: -0.02em;
    }

    .env-p4-stat__num span {
      font-size: 28px;
      font-weight: 700;
      color: #7fb942;
    }

    .env-p4-stat__text {
      font-size: 15px;
      font-weight: 400;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.82);
    }

    /* ══ EMISSION GRAPHS SLIDER ══ */
    .env-egraph-section {
      position: relative;
      max-width: 1440px;
      margin: 60px auto 80px;
      padding: 0 clamp(2rem, 8vw, 7rem);
    }

    .env-egraph-viewport {
      overflow: hidden;
      width: 100%;
    }

    .env-egraph-track {
      display: flex;
      transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
    }

    /* Each slide = 50% width → 2 visible at a time */
    .env-egraph-slide {
      flex-shrink: 0;
      width: 50%;
      padding: 0 12px;
    }

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

    /* Bottom nav row */
    .env-egraph-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
      padding: 0 2px;
      position: relative;
      z-index: 20;
    }

    /* Dots — left */
    .env-egraph-dots {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .env-egraph-dot {
      width: 28px;
      height: 8px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.2);
      cursor: pointer;
      transition: background 0.3s, width 0.3s;
    }

    .env-egraph-dot.active {
      background: #0069aa;
      width: 40px;
    }

    /* Arrows — right */
    .env-egraph-arrows {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .env-egraph-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #ffffff;
      cursor: pointer;
      transition: background 0.25s, border-color 0.25s, transform 0.2s;
    }

    .env-egraph-arrow:hover {
      background: rgba(0, 105, 170, 0.3);
      border-color: #0069aa;
      transform: scale(1.08);
    }

    .env-egraph-arrow:disabled {
      opacity: 0.3;
      cursor: not-allowed;
      transform: none;
    }

    @media (max-width: 768px) {
      .env-egraph-slide {
        width: 100%;
      }
    }

    /* ══ ENERGY GRAPHS SECTION ══ */
    .env-graphs-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 10px clamp(2rem, 8vw, 7rem) 80px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: start;
    }

    @media (max-width: 768px) {
      .env-graphs-wrap {
        grid-template-columns: 1fr;
        padding: 40px 20px 60px;
      }
    }

    .env-graph-card {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .env-graph-card--left {
      opacity: 0;
      transform: translateX(-80px);
      transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-graph-card--right {
      opacity: 0;
      transform: translateX(80px);
      transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: 0.18s;
    }

    .env-graph-card--left.revealed,
    .env-graph-card--right.revealed {
      opacity: 1;
      transform: translateX(0);
    }

    .env-graph-card__label {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
      color: #7fb942;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(127, 185, 66, 0.25);
    }

    .env-graph-anim-wrap {
      position: relative;
      border-radius: 0;
      overflow: hidden;
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
    }

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

    /* Wipe overlay — covers graph, slides up on trigger */
    .env-graph-wipe {
      position: absolute;
      inset: 0;
      background: #0a1628;
      transform-origin: bottom center;
      transform: scaleY(1);
      transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-graph-anim-wrap.play .env-graph-wipe {
      transform: scaleY(0);
    }

    /* ══ LCA KEY APPLICATIONS ══ */
    .env-lca-app-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(2rem, 8vw, 7rem) 80px;
    }

    .env-lca-app-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: stretch;
    }

    .env-lca-app-left {
      opacity: 0;
      transform: translateX(-70px);
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-lca-app-right {
      opacity: 0;
      transform: translateX(70px);
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-lca-app-left.revealed,
    .env-lca-app-right.revealed {
      opacity: 1;
      transform: translateX(0);
    }

    .env-lca-app-subhead {
      font-size: clamp(19px, 1.55vw, 28px);
      font-weight: 700;
      color: #0069aa;
      margin-bottom: 16px;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .env-lca-app-right {
      position: relative;
      overflow: hidden;
      align-self: stretch;
      min-height: 0;
    }

    .env-lca-app-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      display: block;
      border-radius: 0;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    @media (max-width: 768px) {
      .env-lca-app-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .env-lca-app-right {
        transform: translateX(-70px);
      }
    }

    /* ══ KEY LEVERS ══ */
    .env-levers-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 20px clamp(2rem, 8vw, 7rem) 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 36px;
      transform: scale(1.05);
      transform-origin: top center;
      margin-top: 20px;
    }

    .env-levers-cloud {
      opacity: 0;
      transform: translateY(-30px);
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-levers-cloud.revealed {
      opacity: 1;
      transform: translateY(0);
    }

    .env-levers-cloud-img {
      width: 220px;
      height: auto;
      display: block;
    }

    .env-levers-row {
      display: flex;
      gap: 32px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
    }

    .env-levers-row--4 {
      max-width: 960px;
    }

    .env-levers-row--3 {
      max-width: 720px;
    }

    .env-lever-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      flex: 0 0 calc(25% - 24px);
      opacity: 0;
      transform: translateX(-60px);
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-levers-row--3 .env-lever-item {
      flex: 0 0 calc(33.33% - 22px);
    }

    .env-lever-item.revealed {
      opacity: 1;
      transform: translateX(0);
    }

    .env-lever-box {
      flex-shrink: 0;
      width: 18px;
      height: 40px;
      border-radius: 0;
      background: linear-gradient(180deg, #4fd8e8 0%, #0080c8 100%);
      display: block;
    }

    .env-lever-text {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.90);
      padding-top: 4px;
    }

    @media (max-width: 1024px) {

      .env-lever-item,
      .env-levers-row--3 .env-lever-item {
        flex: 0 0 calc(33.33% - 22px);
      }

      .env-levers-wrap {
        padding: 16px clamp(1.5rem, 4vw, 4rem) 60px;
        gap: 28px;
      }
    }

    @media (max-width: 768px) {

      .env-lever-item,
      .env-levers-row--3 .env-lever-item {
        flex: 0 0 calc(50% - 16px);
      }

      .env-levers-wrap {
        padding: 16px 20px 50px;
        gap: 20px;
        align-items: center;
      }

      .env-levers-row {
        justify-content: center;
      }

      .env-lever-item {
        justify-content: flex-start;
        text-align: left;
      }
    }

    @media (max-width: 480px) {

      .env-lever-item,
      .env-levers-row--3 .env-lever-item {
        flex: 0 0 auto;
        width: 260px;
      }

      .env-levers-wrap {
        padding: 12px 16px 40px;
        gap: 16px;
        align-items: center;
      }

      .env-levers-row {
        flex-direction: column;
        align-items: center;
        width: 100%;
      }

      .env-lever-item {
        justify-content: flex-start;
        text-align: left;
      }
    }

    /* ══ GEOTECHNICAL + COMMITMENT ══ */
    .env-geo-bullets-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
    }

    @media (max-width: 768px) {
      .env-geo-bullets-grid {
        grid-template-columns: 1fr;
      }
    }

    .env-geo-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(2rem, 8vw, 7rem) 80px;
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .env-geo-section {}

    /* ══ MANAGING TSF ══ */
    .env-mtsf-wrap {
      max-width: 1440px;
      margin: 30px auto 0;
      padding: 0 clamp(2rem, 8vw, 7rem) 80px;
    }

    /* ══ TSF GOVERNANCE ══ */
    .env-tsf-wrap {
      max-width: 1440px;
      margin: 30px auto 0;
      padding: 0 clamp(2rem, 8vw, 7rem) 80px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .env-tsf-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
    }

    @media (max-width: 768px) {
      .env-tsf-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }

    /* ══ TAILINGS MANAGEMENT ══ */
    .env-tailings-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 30px clamp(2rem, 8vw, 7rem) 60px;
      margin-top: -30px;
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .env-tailings-heading {
      font-size: clamp(24px, 2.5vw, 42px);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0;
      background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      background-clip: text !important;
      color: transparent !important;
      margin-bottom: 8px;
    }

    .env-tailings-section {}

    .env-tailings-goal-box {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      border: 1.5px solid #7fb942;
      border-radius: 0;
      padding: 20px 24px;
      background: rgba(127, 185, 66, 0.05);
    }

    .env-tailings-goal-tag {
      flex-shrink: 0;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0;
      color: #ffffff;
      background: linear-gradient(135deg, #0069aa 0%, #4fe0cf 100%);
      padding: 10px 14px;
      border-radius: 4px;
      text-align: center;
      line-height: 1.4;
    }

    /* ══ SMELTING RESIDUES ══ */
    .env-smelt-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 40px clamp(2rem, 8vw, 7rem) 80px;
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .env-smelt-main-heading {
      font-size: clamp(24px, 2.5vw, 42px);
      font-weight: 700;
      color: rgba(255, 255, 255, 0.90);
      margin-bottom: 8px;
      line-height: 1.3;
    }

    .env-smelt-section {}

    /* ══ CIRCULAR ECONOMY OUTCOMES ══ */
    .env-ceo-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(2rem, 8vw, 7rem) 80px;
      display: flex;
      flex-direction: column;
      gap: 36px;
    }

    .env-ceo-section {}

    .env-ceo-heading {
      font-size: clamp(16px, 1.3vw, 20px);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0;
      color: #0069aa;
      margin-bottom: 16px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(0, 105, 170, 0.25);
    }

    .env-ceo-heading--gradient {
      font-size: clamp(19px, 1.55vw, 28px);
      color: #0069aa;
      -webkit-text-fill-color: #0069aa;
      border-bottom: 1px solid rgba(0, 105, 170, 0.2);
    }

    /* ══ CIRCULAR ECONOMY LEVERS IMAGE ══ */
    .env-clevers-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(2rem, 8vw, 7rem) 80px;
    }

    .env-clevers-img-box {
      position: relative;
      overflow: hidden;
      opacity: 0;
      transform: translateY(50px) scale(0.96);
      transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-clevers-img-box.revealed {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* Shimmer sweep on reveal */
    .env-clevers-img-box::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg,
          transparent 30%,
          rgba(255, 255, 255, 0.18) 50%,
          transparent 70%);
      transform: translateX(-100%);
      transition: transform 0s;
    }

    .env-clevers-img-box.revealed::after {
      transform: translateX(200%);
      transition: transform 1s ease 0.4s;
    }

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

    /* ══ CIRCLE IMAGES SCROLL ANIMATION ══ */
    .env-circles-pin-wrap {
      position: relative;
      height: 400vh;
    }

    .env-circles-sticky {
      position: sticky;
      top: 110px;
      width: 100%;
      height: calc(100vh - 110px);
      display: flex;
      align-items: center;
      overflow: hidden;
      background: #0a1628;
    }

    .env-circles-row {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      padding-left: 2px;
    }

    /* Each circle — absolute, overlapping */
    .env-circle-img {
      position: absolute;
      width: 480px;
      height: 480px;
      object-fit: cover;
      display: block;
      flex-shrink: 0;
      /* Start: off screen right */
      transform: translateX(100vw);
      transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /*
      Total span = 3×300 + 480 = 1380px
      Center offset = (100vw - 1380px) / 2
    */
    #circleImg1 {
      left: calc((100vw - 1380px) / 2 - 3px);
      z-index: 1;
    }

    #circleImg2 {
      left: calc((100vw - 1380px) / 2 + 300px - 3px);
      z-index: 2;
    }

    #circleImg3 {
      left: calc((100vw - 1380px) / 2 + 600px - 3px);
      z-index: 3;
    }

    #circleImg4 {
      left: calc((100vw - 1380px) / 2 + 900px - 3px);
      z-index: 4;
    }

    .env-circle-img.show {
      transform: translateX(0);
    }

    /* 1400px — circle 400px, overlap 250px → total span = 3×250+400 = 1150px */
    @media (max-width: 1440px) {
      .env-circle-img {
        width: 400px;
        height: 400px;
      }

      #circleImg1 {
        left: calc((100vw - 1150px) / 2);
      }

      #circleImg2 {
        left: calc((100vw - 1150px) / 2 + 250px);
      }

      #circleImg3 {
        left: calc((100vw - 1150px) / 2 + 500px);
      }

      #circleImg4 {
        left: calc((100vw - 1150px) / 2 + 750px);
      }
    }

    /* 1024px — circle 320px, overlap 200px → total span = 3×200+320 = 920px */
    @media (max-width: 1024px) {
      .env-circle-img {
        width: 320px;
        height: 320px;
      }

      #circleImg1 {
        left: calc((100vw - 920px) / 2);
      }

      #circleImg2 {
        left: calc((100vw - 920px) / 2 + 200px);
      }

      #circleImg3 {
        left: calc((100vw - 920px) / 2 + 400px);
      }

      #circleImg4 {
        left: calc((100vw - 920px) / 2 + 600px);
      }
    }

    /* ── MOBILE: Auto Slider (no scroll pin) ── */
    @media (max-width: 768px) {
      .env-circles-pin-wrap {
        height: auto !important;
        min-height: 320px;
      }

      .env-circles-sticky {
        position: relative !important;
        top: 0 !important;
        height: 320px;
        overflow: hidden;
      }

      .env-circles-row {
        width: max-content;
        transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
      }

      .env-circle-img {
        position: relative !important;
        left: auto !important;
        width: 242px !important;
        height: 242px !important;
        transform: translateX(0) !important;
        opacity: 1 !important;
        flex-shrink: 0;
        margin: 0 calc((100vw - 242px) / 2);
      }
    }

    @media (max-width: 480px) {
      .env-circles-sticky {
        height: 280px;
      }

      .env-circle-img {
        width: 220px !important;
        height: 220px !important;
        margin: 0 calc((100vw - 220px) / 2);
      }
    }

    @media (max-width: 360px) {
      .env-circles-sticky {
        height: 240px;
      }

      .env-circle-img {
        width: 190px !important;
        height: 190px !important;
        margin: 0 calc((100vw - 190px) / 2);
      }
    }

    /* ══ CIRCULAR ECONOMY APPROACH ══ */
    .env-circular-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 40px clamp(2rem, 8vw, 7rem) 80px;
    }

    .env-circular-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: stretch;
    }

    .env-circular-left {
      opacity: 0;
      transform: translateX(-70px);
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-circular-right {
      opacity: 0;
      transform: translateX(70px);
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      position: relative;
      overflow: hidden;
    }

    .env-circular-left.revealed,
    .env-circular-right.revealed {
      opacity: 1;
      transform: translateX(0);
    }

    .env-circular-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      display: block;
    }

    @media (max-width: 768px) {
      .env-circular-grid {
        grid-template-columns: 1fr;
      }

      .env-circular-right {
        position: relative;
        min-height: 300px;
      }
    }

    /* ══ ENVIRONMENTAL INCIDENT MANAGEMENT ══ */
    .env-eim-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 20px clamp(2rem, 8vw, 7rem) 80px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* ══ AIR QUALITY ══ */
    .env-airq-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(2rem, 8vw, 7rem) 80px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .env-airq-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      margin-top: 8px;
    }

    @media (max-width: 768px) {
      .env-airq-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ══ AIR EMISSIONS ══ */
    .env-air-wrap {
      max-width: 1440px;
      margin: -40px auto 0;
      padding: 20px clamp(2rem, 8vw, 7rem) 80px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .env-air-section {}

    /* ══ CLOSURE CARDS ══ */
    .env-closure-cards-wrap {
      max-width: 1440px;
      margin: 10px auto 0;
      padding: 0 clamp(2rem, 8vw, 7rem) 80px;
    }

    .env-closure-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    @media (max-width: 1024px) {
      .env-closure-cards-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 640px) {
      .env-closure-cards-grid {
        grid-template-columns: 1fr;
      }
    }

    .env-closure-card {
      background: #ffffff;
      border-radius: 0;
      padding: 28px 24px 32px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
      transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .env-closure-card:hover {
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
      transform: translateY(-4px);
    }

    .env-closure-card__accent {
      width: 48px;
      height: 4px;
      background: linear-gradient(90deg, #0069aa 0%, #4fe0cf 100%);
      border-radius: 2px;
      margin-bottom: 16px;
    }

    .env-closure-card__heading {
      font-size: clamp(19px, 1.55vw, 28px);
      font-weight: 700;
      color: #0069aa;
      margin-bottom: 16px;
      line-height: 1.4;
    }

    .env-closure-card__list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .env-closure-card__list li {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.65;
      color: #2d3748;
      padding-left: 14px;
      position: relative;
    }

    .env-closure-card__list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 8px;
      width: 5px;
      height: 5px;
      background: #0069aa;
      border-radius: 50%;
    }

    /* Closure stat box */
    .env-closure-stat-box {
      display: flex;
      align-items: center;
      gap: 24px;
      margin-top: 28px;
      border: 1.5px solid #7fb942;
      border-radius: 0;
      padding: 20px 28px;
      background: rgba(127, 185, 66, 0.04);
      max-width: 100%;
    }

    .env-closure-stat-num {
      font-size: clamp(34px, 3.3vw, 52px);
      font-weight: 900;
      color: #0069aa;
      line-height: 1;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .env-closure-stat-text {
      font-size: 15px;
      font-weight: 400;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.85);
    }

    /* Card slide-up animation */
    .env-ccard-anim {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-ccard-anim.in-view {
      opacity: 1;
      transform: translateY(0);
    }

    /* ══ CLOSURE PLANNING ══ */
    .env-closure-wrap {
      max-width: 1440px;
      margin: 20px auto 0;
      padding: 0 clamp(2rem, 8vw, 7rem) 80px;
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .env-closure-sec {}

    /* Green Belt 2-col */
    .env-green-two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
    }

    @media (max-width: 768px) {
      .env-green-two-col {
        grid-template-columns: 1fr;
      }
    }

    /* ══ BIODIVERSITY SECTIONS ══ */
    .env-bio-sections-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 20px clamp(2rem, 8vw, 7rem) 80px;
      display: flex;
      flex-direction: column;
      gap: 36px;
    }

    .env-bio-sec {}

    .env-bio-stat-box {
      background: rgba(127, 185, 66, 0.07);
      border: 1px solid rgba(127, 185, 66, 0.25);
      border-radius: 0;
      padding: 20px 24px;
      width: 100% !important;
      max-width: none !important;
      box-sizing: border-box;
      max-width: 400px;
    }

    /* ══ BIODIVERSITY CONTENT ══ */
    .env-bio-content-wrap {
      max-width: 1440px;
      margin: 10px auto 0;
      padding: 0 clamp(2rem, 8vw, 7rem) 60px;
    }

    .env-bio-content {
      max-width: 55%;
    }

    @media (max-width: 768px) {
      .env-bio-content {
        max-width: 100%;
      }
    }

    /* ══ BIODIVERSITY ══ */
    .env-bio-wrap {
      max-width: 1440px;
      margin: 20px auto 0;
      padding: 0 clamp(2rem, 8vw, 7rem) 40px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 48px;
    }

    .env-bio-left {
      flex: 1;
      opacity: 0;
      transform: translateX(-70px);
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-bio-left.revealed {
      opacity: 1;
      transform: translateX(0);
    }

    .env-bio-right {
      flex-shrink: 0;
      opacity: 0;
      transform: translateX(70px);
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-bio-right.revealed {
      opacity: 1;
      transform: translateX(0);
    }

    .env-bio-video {
      width: 467px;
      height: 457px;
      display: block;
      object-fit: cover;
    }

    @media (max-width: 768px) {
      .env-bio-wrap {
        flex-direction: column;
        margin-top: 0;
      }

      .env-bio-video {
        width: 100%;
        height: auto;
        max-height: 300px;
      }

      .env-geo-wrap {
        padding-bottom: 20px;
      }
    }

    /* ══ WASTE MANAGEMENT HEADING ══ */
    .env-waste-heading-wrap {
      max-width: 1440px;
      margin: 40px auto 0;
      padding: 0 clamp(2rem, 8vw, 7rem);
    }

    .env-waste-main-heading {
      font-size: clamp(24px, 2.5vw, 42px);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0;
      line-height: 1.2;
      background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      background-clip: text !important;
      color: transparent !important;
    }

    .env-waste-main-heading span {
      background: inherit;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* ══ CAPACITY DOUBLING ══ */
    .env-capacity-wrap {
      max-width: 1440px;
      margin: -30px auto 0;
      padding: 20px clamp(2rem, 8vw, 7rem) 80px;
    }

    .env-capacity-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      margin-top: 20px;
    }

    @media (max-width: 768px) {
      .env-capacity-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ══ WATER RISK MANAGEMENT ══ */
    .env-wrisk-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 30px clamp(2rem, 8vw, 7rem) 80px;
      margin-top: -30px;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .env-wrisk-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      margin-top: 20px;
    }

    @media (max-width: 768px) {
      .env-wrisk-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }

    .env-wstrategy-box {
      padding: 0;
      background: none;
      border: none;
    }

    .env-wstrategy-heading {
      font-size: clamp(16px, 1.3vw, 20px);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0;
      color: #0069aa;
      margin-bottom: 14px;
    }

    /* ══ WATER TAILING + COMMUNITY ══ */
    .env-wtail-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 60px clamp(2rem, 8vw, 7rem) 80px;
      display: flex;
      flex-direction: column;
      gap: 48px;
    }

    .env-wtail-section {}

    .env-wstat-num {
      font-size: clamp(34px, 3.3vw, 52px);
      font-weight: 900;
      color: #ffffff;
      line-height: 1.1;
      margin-bottom: 4px;
      letter-spacing: -0.02em;
    }

    .env-wstat-label {
      font-size: 15px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.75);
      margin-bottom: 8px;
    }

    /* ══ WATER ALIGNMENT SECTIONS ══ */
    .env-walign-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(2rem, 8vw, 7rem) 80px;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    /* Section 1 — white box, right-side green glow */
    .env-walign-outer {
      position: relative;
      display: block;
    }

    .env-walign-shadow {
      display: none;
    }

    .env-walign-box {
      background: transparent;
      border: 1.5px solid #72bf44;
      border-radius: 0;
      padding: 36px 40px 32px;
      position: relative;
      z-index: 1;
      box-shadow: none;
      overflow: visible;
    }

    .env-walign-box::after {
      display: none;
    }

    .env-walign-heading {
      font-size: clamp(16px, 1.3vw, 20px);
      font-weight: 700;
      color: #0069aa;
      margin-bottom: 14px;
      text-transform: none;
      letter-spacing: 0;
    }

    .env-walign-box .env-climate-p {
      color: rgba(232, 237, 242, 0.88);
      font-size: 14px;
      line-height: 1.7;
    }

    .env-walign-items {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 20px;
    }

    @media (max-width: 768px) {
      .env-walign-items {
        grid-template-columns: 1fr;
      }
    }

    .env-walign-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .env-walign-box-icon {
      flex-shrink: 0;
      width: 16px;
      height: 40px;
      background: linear-gradient(180deg, #f5a623 0%, #e07b00 100%);
      display: block;
    }

    .env-walign-item-text {
      font-size: 14px;
      font-weight: 500;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.85);
      padding-top: 4px;
    }

    /* Section 2 — Water Circularity */
    .env-wcircular-wrap {}

    .env-wcircular-heading {
      font-size: clamp(19px, 1.55vw, 28px);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0;
      color: #0069aa;
      margin-bottom: 16px;
    }

    /* Section 3 — Key Highlights box */
    .env-whighlights-box {
      border: 1.5px solid #0069aa;
      border-radius: 0;
      padding: 28px 32px;
      background: rgba(0, 105, 170, 0.05);
    }

    .env-whighlights-heading {
      font-size: clamp(16px, 1.3vw, 20px);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0;
      color: #0069aa;
      margin-bottom: 20px;
      padding-bottom: 12px;
      margin-left: -32px;
      margin-right: -32px;
      padding-left: 32px;
      padding-right: 32px;
      border-bottom: 1px solid #0069aa;
      position: relative;
    }

    .env-whighlights-heading::after {
      display: none;
    }

    .env-whighlights-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }

    @media (max-width: 768px) {
      .env-whighlights-grid {
        grid-template-columns: 1fr;
      }
    }

    .env-whighlights-subhead {
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0;
      color: #ffffff;
      margin-bottom: 10px;
    }

    /* ══ WATER MANAGEMENT STRATEGY ══ */
    .env-wms-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 20px clamp(2rem, 8vw, 7rem) 80px;
      text-align: center;
    }

    .env-wms-top {
      font-size: clamp(16px, 1.3vw, 20px);
      font-weight: 400;
      color: rgba(255, 255, 255, 0.70);
      margin-bottom: 6px;
    }

    .env-wms-heading {
      font-size: clamp(24px, 2.5vw, 42px);
      font-weight: 700;
      text-transform: capitalize;
      letter-spacing: 0;
      margin-bottom: 40px;
      background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      background-clip: text !important;
      color: transparent !important;
    }

    .env-wms-img-wrap {
      width: 100%;
    }

    .env-wms-img {
      width: 85%;
      height: auto;
      display: block;
      margin: 0 auto;
    }

    @media (max-width: 768px) {
      .env-wms-img {
        width: 100%;
      }
    }

    /* ══ WATER STEWARDSHIP ══ */
    .env-water-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 70px clamp(2rem, 8vw, 7rem) 80px;
    }

    .env-water-heading {
      font-size: clamp(24px, 2.5vw, 42px);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0;
      margin-bottom: 32px;
      line-height: 1.2;
      background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      background-clip: text !important;
      color: transparent !important;
    }

    .env-water-heading__plain {
      background: inherit;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .env-water-subhead {
      font-size: clamp(16px, 1.3vw, 20px);
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
      color: #0069aa;
      margin-bottom: 24px;
    }

    .env-water-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
    }

    @media (max-width: 1024px) {
      .env-water-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 768px) {
      .env-water-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }

    /* Scaling Growth */
    .env-scaling-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 20px clamp(2rem, 8vw, 7rem) 20px;
      opacity: 0;
      transform: translateX(-70px);
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-scaling-wrap.revealed {
      opacity: 1;
      transform: translateX(0);
    }

    .env-scaling-heading {
      font-size: clamp(24px, 2.5vw, 42px);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0;
      color: #ffffff;
      margin-bottom: 20px;
      line-height: 1.25;
      background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* LCA BRSR Reference */
    .env-lca-ref-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(2rem, 8vw, 7rem) 60px;
      margin-top: -5%;
      margin-bottom: 0;
      opacity: 0;
      transform: translateX(-70px);
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-lca-ref-wrap.revealed {
      opacity: 1;
      transform: translateX(0);
    }

    /* LCA Continuous Improvement */
    .env-lca-ci-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(2rem, 8vw, 7rem) 80px;
      opacity: 0;
      transform: translateX(-70px);
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-lca-ci-wrap.revealed {
      opacity: 1;
      transform: translateX(0);
    }

    /* ══ IMPACT STORY ══ */
    .env-impact-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 70px clamp(2rem, 8vw, 7rem) 80px;
    }

    /* Header bar */
    .env-impact-header {
      display: flex;
      align-items: center;
      gap: 24px;
      margin-bottom: 48px;
      padding-bottom: 18px;
      border-bottom: 1.5px solid rgba(0, 105, 170, 0.35);
    }

    .env-impact-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
      color: #ffffff;
      background: linear-gradient(135deg, #7fb942 0%, #0069aa 100%);
      padding: 10px 20px;
      border-radius: 0;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .env-impact-header__title {
      font-size: clamp(19px, 1.55vw, 28px);
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
      color: #0069aa;
    }

    /* Two-column grid */
    .env-impact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: start;
    }

    @media (max-width: 768px) {
      .env-impact-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }
    }

    .env-impact-left,
    .env-impact-right {
      opacity: 0;
      transform: translateX(-70px);
      transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .env-impact-right {
      transform: translateX(70px);
    }

    .env-impact-left.revealed,
    .env-impact-right.revealed {
      opacity: 1;
      transform: translateX(0);
    }

    .env-impact-subhead {
      font-size: clamp(16px, 1.3vw, 20px);
      font-weight: 700;
      color: #0069aa;
      margin: 24px 0 12px;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .env-impact-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .env-impact-list li {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.82);
      padding-left: 20px;
      position: relative;
    }

    .env-impact-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 10px;
      width: 6px;
      height: 6px;
      background: #0069aa;
      border-radius: 0;
    }

    /* Pillar 3 — stacked single column, left-to-right reveal */
    .env-p3-grid {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 24px;
    }

    .env-p3-para {
      opacity: 0;
      transform: translateX(-80px);
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      padding: 8px 0;
    }

    .env-p3-para:nth-child(2) {
      transition-delay: 0.18s;
    }

    .env-p3-para.revealed {
      opacity: 1;
      transform: translateX(0);
    }

    /* Pillar 2 — stacked single column, left-to-right reveal */
    .env-p2-grid {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 24px;
    }

    .env-p2-grid .env-climate-p {
      opacity: 0;
      transform: translateX(-80px);
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      padding: 8px 0;
      margin-bottom: 0;
    }

    .env-p2-grid .env-climate-p.revealed {
      opacity: 1;
      transform: translateX(0);
    }

    /* ══════════════════════════════════════
       NET ZERO TRANSITION IMAGE + HOTSPOTS
    ══════════════════════════════════════ */
    .env-nzt-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(2rem, 8vw, 7rem) 20px;
    }

    .env-nzt-hotspot-wrap {
      position: relative;
      width: 70%;
      margin: 0 auto;
    }

    .env-nzt-img {
      width: 100%;
      height: auto;
      display: block;
      animation: nztGlow 4s ease-in-out infinite;
    }

    @keyframes nztGlow {

      0%,
      100% {
        filter: drop-shadow(0 0 18px rgba(114, 191, 68, 0.35)) drop-shadow(0 0 40px rgba(0, 105, 170, 0.2));
      }

      50% {
        filter: drop-shadow(0 0 32px rgba(114, 191, 68, 0.65)) drop-shadow(0 0 70px rgba(0, 105, 170, 0.4));
      }
    }

    .env-nzt-shine {
      display: none;
    }

    /* Hotspot buttons */
    .env-nzt-hotspot {
      position: absolute;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(127, 185, 66, 0.25);
      border: 2px solid #7fb942;
      cursor: pointer;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s, transform 0.3s;
      z-index: 10;
    }

    .env-nzt-hotspot:hover {
      background: rgba(127, 185, 66, 0.55);
      transform: translate(-50%, -50%) scale(1.2);
    }

    /* Pulsing ring */
    .env-nzt-hotspot__pulse {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 2px solid #7fb942;
      animation: hotspotPulse 2s ease-out infinite;
    }

    @keyframes hotspotPulse {
      0% {
        transform: scale(1);
        opacity: 0.8;
      }

      100% {
        transform: scale(2.2);
        opacity: 0;
      }
    }

    /* Pillar hotspot positions — on PILLAR label boxes */
    .env-nzt-hotspot--p1 {
      left: 8%;
      top: 13%;
    }

    .env-nzt-hotspot--p2 {
      left: 8%;
      top: 60%;
    }

    .env-nzt-hotspot--p3 {
      left: 86%;
      top: 13%;
    }

    .env-nzt-hotspot--p4 {
      left: 86%;
      top: 60%;
    }

    /* ══════════════════════════════════════
       PILLAR MODALS
    ══════════════════════════════════════ */
    .env-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }

    .env-modal.open {
      opacity: 1;
      pointer-events: all;
    }

    .env-modal__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(4, 14, 32, 0.85);
      backdrop-filter: blur(6px);
      cursor: pointer;
    }

    .env-modal__box {
      position: relative;
      z-index: 2;
      background: linear-gradient(135deg, rgba(8, 22, 48, 0.99) 0%, rgba(6, 18, 34, 0.99) 100%);
      border: 1px solid rgba(127, 185, 66, 0.3);
      border-radius: 20px;
      width: 92vw;
      max-width: 1100px;
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transform: translateY(40px) scale(0.96);
      transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
      box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(127, 185, 66, 0.12);
    }

    .env-modal.open .env-modal__box {
      transform: translateY(0) scale(1);
    }

    /* Media strip — top */
    .env-modal__media {
      position: relative;
      width: 100%;
      height: 320px;
      flex-shrink: 0;
      overflow: hidden;
      background: #000;
    }

    .env-modal__media-video,
    .env-modal__media-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .env-modal__media-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 50%, rgba(8, 22, 48, 0.95) 100%);
      pointer-events: none;
    }

    /* Tag on media */
    .env-modal__tag {
      position: absolute;
      bottom: 20px;
      left: 28px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
      color: #7fb942;
      background: rgba(127, 185, 66, 0.15);
      border: 1px solid rgba(127, 185, 66, 0.4);
      border-radius: 20px;
      padding: 5px 16px;
      z-index: 2;
    }

    /* Heading on media */
    .env-modal__heading {
      position: absolute;
      bottom: 52px;
      left: 28px;
      right: 28px;
      font-size: clamp(19px, 1.55vw, 28px);
      font-weight: 700;
      color: #0069aa;
      line-height: 1.3;
      z-index: 2;
    }

    /* Close button */
    .env-modal__close {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 20;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s;
    }

    .env-modal__close:hover {
      background: rgba(0, 0, 0, 0.75);
    }

    /* Scrollable content area */
    .env-modal__body {
      flex: 1;
      overflow-y: auto;
      padding: 28px 32px 32px;
      scrollbar-width: thin;
      scrollbar-color: rgba(127, 185, 66, 0.3) transparent;
    }

    .env-modal__body p {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.78;
      color: rgba(255, 255, 255, 0.82);
      margin-bottom: 16px;
    }

    .env-modal__subhead {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
      color: #4fe0cf;
      margin: 22px 0 10px;
    }

    .env-modal__list {
      list-style: none;
      padding: 0;
      margin: 0 0 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .env-modal__list li {
      font-size: 14px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.82);
      padding-left: 18px;
      position: relative;
    }

    .env-modal__list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 9px;
      width: 7px;
      height: 7px;
      background: #7fb942;
      border-radius: 50%;
    }

    .env-modal__ref {
      font-size: 14px !important;
      color: #7fb942 !important;
      font-style: italic;
    }

    .env-modal__stat {
      margin-top: 20px;
      background: rgba(127, 185, 66, 0.07);
      border: 1px solid rgba(127, 185, 66, 0.25);
      border-radius: 0;
      padding: 20px 24px;
    }

    .env-modal__stat-num {
      display: block;
      font-size: clamp(34px, 3.3vw, 52px);
      font-weight: 900;
      color: #ffffff;
      line-height: 1.1;
      margin-bottom: 10px;
    }

    .env-modal__stat-num em {
      font-size: 22px;
      font-style: normal;
      color: #7fb942;
    }

    .env-modal__stat p {
      margin: 0 !important;
    }

    @media (max-width: 768px) {
      .env-modal__box {
        width: 96vw;
        max-height: 90vh;
      }

      .env-modal__media {
        height: 220px;
      }

      .env-modal__heading {
        bottom: 48px;
        left: 18px;
        right: 18px;
      }

      .env-modal__tag {
        left: 18px;
        bottom: 16px;
      }

      .env-modal__body {
        padding: 20px 18px 24px;
      }

      .env-nzt-hotspot-wrap {
        width: 100%;
      }
    }

    /* ══════════════════════════════════════
       BODY CONTENT (placeholder)
    ══════════════════════════════════════ */
    .env-content {
      max-width: 1440px;
      margin: 0 auto;
      padding: 8px clamp(2rem, 8vw, 7rem) 8px;
    }

    /* ── Section responsive ── */
    @media (max-width: 768px) {
      .env-beams-section {
        padding: 30px 0;
      }

      .env-beams-text {
        line-height: 1.75;
      }
    }

    @media (max-width: 480px) {
      .env-beams-section {
        padding: 20px 0;
      }

      .env-beams-text {
        line-height: 1.7;
      }

      .env-beams-text p {
        margin-bottom: 20px;
      }
    }

    /* ══════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════ */
    /* ══════════════════════════════════════
       RESPONSIVE BREAKPOINTS
    ══════════════════════════════════════ */

    /* ── Large desktop (≥1440px) ── */
    @media (min-width: 1440px) {}

    /* ── Small desktop / large tablet (≤1280px) ── */
    

    /* ── Tablet landscape (≤1024px) ── */
    @media (max-width: 1024px) {
      .env-content {
        padding: 56px 40px 16px;
      }

    }

    /* ── Tablet portrait (≤768px) ── */
    @media (max-width: 768px) {
      /* Social inner pages (body.env-topic): drop the hero banner image on mobile
         and collapse the tall hero so the heading flows straight into the content
         below — no oversized empty band. Overview pages aren't .env-topic, so they
         keep their banner. */
      body.env-topic .env-hero {
        min-height: 0 !important;
      }
      body.env-topic .env-hero__row {
        display: none !important;
      }
      body.env-topic .env-hero__inner {
        padding-top: 24px !important;
        padding-bottom: 12px !important;
      }
      body.env-topic .env-banner-text {
        top: 0 !important;
      }

      .env-takeaway__header::after {
        left: 0px;
        right: 0px;
      }

      .env-takeaway__list {
        text-align: left;
      }

      .env-page {
        padding-top: 60px;
        padding-bottom: 40px;
      }

      .env-breadcrumb {
        position: absolute;
        top: calc(23px + 42px + 10px);
        /* header(76) + subnav(~42) + 10px gap */
        left: 0;
        width: 100%;
        z-index: 89;
        background: rgba(4, 14, 32, 0.75);
        padding: 6px 0;
        pointer-events: auto;
      }

      .env-breadcrumb__inner {
        padding: 0 16px;
      }

      .env-breadcrumb__item {
        font-size: 10px;
        letter-spacing: 0;
      }

      .env-breadcrumb__sep {
        padding: 0 6px;
      }

      .env-hero__inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 190px 24px 20px;
        gap: 0;
        /* text-align: center; */
      }

      .env-hero__row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        width: 100%;
        justify-items: flex-start;
      }

      .env-banner-text {
        max-width: 100%;
        align-items: center;
        position: relative;
        top: -40px;
      }

      .env-banner-text__row {
        justify-content: center;
      }

      .env-banner-text__main {
        line-height: 1.2;
        white-space: normal;
        margin-bottom: 0;
      }

      .env-hero__img-wrap {
        width: 95%;
        max-width: 454px;
        height: auto;
        margin-top: -20px;
      }

      .env-takeaway-outer {
        grid-area: auto;
      }

      .env-hero__video {
        width: 100%;
        height: auto;
        max-height: 434px;
        object-fit: cover;
      }

      .env-content {
        padding: 40px 20px 16px;
      }
    }

    /* ── Mobile (≤480px) ── */
    @media (max-width: 480px) {
      .env-page {
        padding-top: 50px;
        padding-bottom: 40px;
      }

      .env-hero {
        min-height: 100svh;
      }

      .env-hero__inner {
        padding: 175px 16px 40px;
        gap: 20px;
      }

      .env-banner-text__top {
        letter-spacing: 0;
      }

      .env-banner-text__main {
        line-height: 1.25;
      }

      .env-hero__img-wrap {
        max-width: 362px;
        margin-top: -20px;
      }

      .env-hero__video {
        max-height: 358px;
      }

      .env-content {
        padding: 32px 16px 12px;
      }
    }

    /* ── Small mobile (≤360px) ── */
    @media (max-width: 360px) {
      .env-hero__inner {
        padding: 88px 14px 36px;
      }

      .env-hero__img-wrap {
        max-width: 302px;
        margin-top: -20px;
      }

      .env-hero__video {
        max-height: 312px;
      }

      .env-content {
        padding: 24px 14px 12px;
      }
    }

    /* ══════════════════════════════════════
       RESPONSIVE — NEW ELEMENTS (session)
    ══════════════════════════════════════ */

    /* Tablet (≤1024px) */
    @media (max-width: 1024px) {

      /* Images with fixed height */
      .env-bio-video,
      [src*="environmental-performance-img"],
      [src*="pillar3-img"],
      [src*="pillar4-img"],
      [src*="road-img"],
      [src*="pg-196"] {
        height: 480px !important;
      }

      /* Walign box */
      .env-walign-box {
        padding: 28px 24px;
      }

      .env-walign-items {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }

      /* Highlights box */
      .env-highlights-box {
        padding: 24px 28px;
      }

      .env-highlights-box__heading {
        margin-left: -28px;
        margin-right: -28px;
        padding-left: 28px;
        padding-right: 28px;
      }

      /* Whighlights box */
      .env-whighlights-box {
        padding: 22px 24px;
      }

      .env-whighlights-heading {
        margin-left: -24px;
        margin-right: -24px;
        padding-left: 24px;
        padding-right: 24px;
      }

      /* Car card */
      .env-car-outer {
        margin: 0;
      }
    }

    /* Tablet portrait (≤768px) */
    @media (max-width: 768px) {
      .env-beams-content {
        padding: 0px 15px;
      }

      /* Images */
      .env-bio-video,
      [src*="environmental-performance-img"],
      [src*="pillar3-img"],
      [src*="pillar4-img"],
      [src*="road-img"],
      [src*="pg-196"] {
        height: 360px !important;
      }

      /* Walign 3-col → 1-col */
      .env-walign-items {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .env-walign-box {
        padding: 24px 20px;
      }

      /* Highlights */
      .env-highlights-box {
        padding: 20px;
      }

      .env-highlights-box__heading {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
      }

      /* Whighlights */
      .env-whighlights-box {
        padding: 20px;
      }

      .env-whighlights-heading {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
      }

      /* Bio stat box */
      .env-bio-stat-box {
        padding: 16px 20px;
      }

      /* Back to top */
      #backToTopBtn {
        font-size: 12px;
        padding: 9px 16px;
      }
    }

    /* Mobile (≤480px) */
    @media (max-width: 480px) {

      /* Images */
      .env-bio-video,
      [src*="environmental-performance-img"],
      [src*="pillar3-img"],
      [src*="pillar4-img"],
      [src*="road-img"],
      [src*="pg-196"] {
        height: 240px !important;
      }

      /* Walign */
      .env-walign-box {
        padding: 20px 16px;
      }

      /* Highlights */
      .env-highlights-box {
        padding: 16px;
      }

      .env-highlights-box__heading {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
      }

      /* Whighlights */
      .env-whighlights-box {
        padding: 16px;
      }

      .env-whighlights-heading {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
      }

      /* Takeaway */
      .env-takeaway {
        padding: 24px 20px;
      }

      /* Car card */
      .env-car-card {
        padding: 20px 16px;
      }

      /* p4 stat box */
      .env-p4-stat {
        padding: 20px 16px;
      }

      /* Back to top */
      #backToTopBtn {
        font-size: 11px;
        padding: 8px 14px;
      }
    }

    .env-secnav {
      max-width: 1440px;
      margin: 0 auto 60px;
      padding: 0 clamp(2rem, 8vw, 7rem);
    }

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

    .env-secnav__card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 22px 24px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.25s, border-color 0.25s, transform 0.25s;
    }

    .env-secnav__card:hover {
      background: rgba(255, 255, 255, 0.07);
      border-color: rgba(114, 191, 68, 0.5);
      transform: translateY(-3px);
    }

    .env-secnav__card--active {
      border-color: #72bf44;
      background: rgba(114, 191, 68, 0.06);
    }

    .env-secnav__label {
      font-family: "proxima-nova", "Proxima Nova", Arial, sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
      color: #ffffff;
      line-height: 1.3;
    }

    .env-secnav__arrow {
      flex-shrink: 0;
      color: #72bf44;
      font-size: 18px;
      line-height: 1;
    }

    @media (max-width: 900px) {
      .env-secnav__grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 560px) {
      .env-secnav__grid {
        grid-template-columns: 1fr;
      }
    }

    /* ── Inline-style utilities (moved from inline style="" attributes) ── */
    .is1 {
      padding: 60px clamp(2rem, 8vw, 7rem) 90px;
    }

    .is2 {
      width: 100%;
      box-sizing: border-box;
      padding: 0 clamp(2rem, 8vw, 7rem);
      margin-top: 30px;
    }

    .is3 {
      max-width: 1229.78px;
      margin: 0 auto;
    }

    .is4 {
      width: 100%;
      height: auto;
      display: block;
      /* padding-bottom: 30px; */
    }

    

    .is6 {
      width: 100%;
      box-sizing: border-box;
      padding: 0 clamp(2rem, 8vw, 7rem);
      margin: 0 0 30px;
    }

    .is7 {
      max-width: 1100px;
      margin: 0 auto;
    }

    .is8 {
      padding-top: 0;
    }

    .is9 {
      /* padding-top: 30px; */
      padding-bottom: 10px;
    }

    .is10 {
      width: 100%;
      box-sizing: border-box;
      padding: 0 clamp(2rem, 8vw, 7rem);
      margin-top: 40px;
    }

    .is11 {
      margin-top: 0;
      font-size: 16px;
    }

    .is12 {
      padding-top: 20px;
    }

    .is13 {
      padding: 36px 40px;
    }

    .is14 {
      margin-bottom: 14px;
      color: #ffffff;
    }

    .is15 {
      margin-bottom: 0;
    }

    .is16 {
      margin-top: 36px;
    }

    .is17 {
      margin-top: 40px;
    }

    .is18 {
      margin-top: 24px;
      font-size: 16px;
    }

    .is19 {
      margin-top: 18px;
    }

    .is20 {
      padding: 34px 40px;
    }

    .is21 {
      margin-bottom: 0;
      font-size: 15px;
    }

    .is22 {
      color: #ffffff;
    }

    .is23 {
      padding-top: 12px;
    }

    .is24 {
      margin-bottom: 16px;
    }

    .is25 {
      margin-top: 36px;
      font-size: 16px;
    }

    .is26 {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(2rem, 5vw, 5rem) 28px;
      display: flex;
      justify-content: flex-end;
    }

    .is27 {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      border: 1.5px solid #72bf44;
      color: #72bf44;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
      padding: 10px 22px;
      cursor: pointer;
      border-radius: 0;
      transition: background 0.2s, color 0.2s;
    }

    /* ── Reduce section bottom padding on mobile (overrides arc-nav.css) ── */
    @media (max-width: 768px) {

      main>section:not(.env-hero):not(.env-beams-section),
      .site-main>section:not(.env-hero):not(.env-beams-section),
      body>section:not(.env-hero):not(.env-beams-section) {
        padding-top: 0 !important;
        padding-bottom: 20px !important;
      }

      .is2,
      .is6,
      .is10 {
        padding: 0px 15px;
      }
    }

    /* ── Health & Safety page only — extra space below the hero title ── */
    #social-health-and-safety .env-banner-text {
      margin-bottom: 28px;
    }

    /* ── Meta "Policies" link ── */
    .env-meta-policy {
      font-size: 14px;
      font-weight: 700;
      color: #0069aa;
      text-decoration: none;
      line-height: 1.5;
    }

    .env-meta-policy:hover {
      color: #72bf44;
    }

    /* ── ICMM "Principle 05" sub-line (normal body copy) ── */
    .env-hr-principle {
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.75;
      margin: 6px 0 0;
    }

    /* ── Consistent H&S content section wrapper (40px top gap) ── */
    .hs-section {
      max-width: 1440px;
      margin: 0 auto;
      padding: 60px clamp(2rem, 8vw, 7rem) 0;
    }

    /* remove the section top padding (when the first heading already adds its own) */
    .hs-section--notop {
      padding-top: 10px;
      padding-bottom: 30px !important;
    }
    .env-text-white-fixed,
    .env-text-white-fixed li,
    .env-text-white-fixed strong,
    .env-text-white-fixed span {
      color: rgba(255, 255, 255, 0.92) !important;
    }
    .env-car-card--vendor-white .env-osub,
    .env-car-card--vendor-white .env-car-card__text,
    .env-car-card--vendor-white .env-hr-list li,
    .env-car-card--vendor-white .env-car-card__text strong {
      color: rgba(255, 255, 255, 0.92) !important;
    }
    .env-car-card--actions-white .env-hr-list li {
      color: rgba(255, 255, 255, 0.92) !important;
    }
    /* Cinematic: white card; list text black (heading stays purple via .env-osub) */
    body.energy-saver .env-car-card--actions-white {
      background: #ffffff !important;
    }
    /* New class: forces list text black in cinematic (higher specificity than the
       shared is-saver white rule in home-header.css, which loads later) */
    body.energy-saver .env-car-card--actions-white .env-hr-list--cine-dark li,
    body.cinematic .env-car-card--actions-white .env-hr-list--cine-dark li,
    body.is-saver .env-car-card--actions-white .env-hr-list--cine-dark li,
    html.is-saver .env-car-card--actions-white .env-hr-list--cine-dark li {
      color: #0c2340 !important;
    }

    @media (max-width: 768px) {
      .hs-section {
        padding: 30px 20px 0;
      }
    }

    /* ── Inline teal reference link inside body copy ── */
    .env-ilink {
      color: #0093c4;
      text-decoration: none;
      transition: color 0.2s;
    }
    body.energy-saver .env-ilink,
    body.energy-saver .env-climate-reveal.revealed .env-ilink,
    body.cinematic .env-ilink,
    body.cinematic .env-climate-reveal.revealed .env-ilink,
    body.is-saver .env-ilink,
    body.is-saver .env-climate-reveal.revealed .env-ilink,
    html.is-saver .env-ilink,
    html.is-saver .env-climate-reveal.revealed .env-ilink {
      color: #0093c4 !important;
    }

    .env-ilink:hover {
      color: #ffffff;
    }

    /* ── Inline white-highlighted term inside body copy ── */
    .env-wtext {
      color: #ffffff;
    }

    /* ── Inline orange-highlighted term ── */
    .env-otext {
      color: #f7931d;
    }

    /* ── CSR accountability architecture (telescoping bordered boxes) ── */
    .env-gov {
      max-width: 1040px;
      margin: 34px auto 0;
    }
    .env-gov__box {
      position: relative;
      border: 2px solid;
      border-radius: 26px;
      background: #061525;
      box-sizing: border-box;
    }
    .env-gov__box--green {
      border-color: #7fb942;
      width: 100%;
      padding: 40px 44px 66px;
      z-index: 1;
    }
    /* .mtbtm0quality{
      margin-bottom: 0;
    } */
    .is9.is9pdtop0,.pdtop0humanrgt{
      padding-top: 0;
    }
    .is8.is8pdbtm0,.is4.is4btm0{
      padding-bottom: 0;
    }
    .env-gov__box--orange {
      border-color: #f7931d;
      width: 90%;
      margin: -24px auto 0;
      padding: 44px 44px 60px;
      z-index: 2;
    }
    .env-gov__box--blue {
      border-color: #0069aa;
      width: 100%;
      margin: -24px auto 0;
      padding: 44px 44px 36px;
      z-index: 3;
    }
    .env-gov__pill {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 9px 30px;
      border-radius: 999px;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
      z-index: 4;
    }
    .env-gov__pill--blue {
      background: #0069aa;
    }
    .env-gov__pill--orange {
      background: #f7931d;
    }
    .env-gov__pill--teal {
      background: #0093c4;
    }
    .env-gov__lead {
      text-align: center;
      color: rgba(255, 255, 255, 0.9);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
      margin: 0;
    }
    .env-gov__cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 44px;
      align-items: start;
    }
    .env-gov__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .env-gov__list li {
      position: relative;
      padding-left: 18px;
      margin-bottom: 12px;
      color: rgba(255, 255, 255, 0.85);
      font-size: 13px;
      line-height: 1.5;
    }
    .env-gov__list li:last-child {
      margin-bottom: 0;
    }
    .env-gov__list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 6px;
      width: 7px;
      height: 7px;
      background: #0069aa;
    }
    .env-gov__list--center {
      max-width: 820px;
      margin: 0 auto;
    }
    .env-gov.env-climate-reveal,
    .env-gov.env-climate-reveal.revealed,
    .env-gov.env-climate-reveal .env-gov__pill,
    .env-gov.env-climate-reveal .env-gov__lead,
    .env-gov.env-climate-reveal .env-gov__list li {
      color: #ffffff !important;
    }
    @media (max-width: 768px) {
      .env-gov__box--orange,
      .env-gov__box--blue {
        width: 100%;
      }
      .env-gov__box {
        padding-left: 22px;
        padding-right: 22px;
      }
      .env-gov__cols {
        grid-template-columns: 1fr;
        gap: 0;
      }
      .env-gov__pill {
        font-size: 12px;
        padding: 8px 18px;
        white-space: normal;
        text-align: center;
        width: max-content;
        max-width: 90%;
      }
    }

    /* ── "Did you know?" gradient feature banner ── */
    .env-dyk {
      position: relative;
      width: 100%;
      box-sizing: border-box;
      background: url('../assets/health/youknowbg.webp') center / cover no-repeat !important;
      padding: 48px clamp(2rem, 6vw, 6rem) 56px;
      margin-top: 40px;
      overflow: hidden;
    }
    .env-dyk__label {
      font-size: 18px;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin: 0 0 28px;
    }
    .env-dyk__grid {
      display: grid;
      grid-template-columns: 44% 1fr;
      gap: 44px;
      align-items: start;
    }
    .env-dyk__img {
      width: 100%;
      height: auto;
      display: block;
      border: 4px solid #ffffff;
    }
    .env-dyk__united {
      font-family: 'League Gothic', sans-serif;
      font-size: clamp(24px, 2.6vw, 34px);
      text-transform: uppercase;
      color: #422a78;
      line-height: 1.05;
      letter-spacing: 0.5px;
      margin-top: 28px;
    }
    .env-dyk__box {
      border: 1px solid rgba(255, 255, 255, 0.7);
      padding: 20px 24px;
      color: #422a78;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.45;
      max-width: 360px;
      margin-left: auto;
    }
    .env-dyk__big {
      font-family: 'League Gothic', sans-serif;
      font-size: clamp(26px, 3vw, 42px);
      text-transform: uppercase;
      color: #422a78;
      line-height: 1.08;
      letter-spacing: 0.5px;
      margin: 56px 0 0;
    }
    @media (max-width: 768px) {
      .env-dyk {
        padding: 34px 20px 40px;
      }
      .env-dyk__grid {
        grid-template-columns: 1fr;
        gap: 26px;
      }
      .env-dyk__box {
        max-width: 100%;
        margin-left: 0;
      }
      .env-dyk__big {
        margin-top: 24px;
      }
    }

    /* ── Blue L-border (top + right) wrapper ── */
    .env-cas-border {
      border-top: 2px solid #0069aa;
      border-right: 2px solid #0069aa;
      padding: 30px 40px 40px 0;
      margin-top: 36px;
    }
    @media (max-width: 768px) {
      .env-cas-border {
        padding: 24px 18px 0 0;
      }
    }
    /* L-border on the bottom + right instead of top + right */
    .env-cas-border--btm {
      border-top: none;
      border-bottom: 2px solid #0069aa;
      padding: 0 40px 30px 0;
    }
    @media (max-width: 768px) {
      .env-cas-border--btm {
        padding: 0 18px 24px 0;
      }
    }

    /* ── Two-column text grid (e.g. collision avoidance) ── */
    .env-cas-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px 56px;
      margin-top: 16px;
      align-items: start;
    }
    @media (max-width: 768px) {
      .env-cas-grid {
        grid-template-columns: 1fr;
        gap: 26px;
      }
    }

    /* ── Data table (safety performance) ── */
    .env-table-wrap {
      width: 100%;
      overflow-x: auto;
      margin-top: 14px;
    }
    .env-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      min-width: 640px;
    }
    .env-table th,
    .env-table td {
      padding: 13px 18px;
      text-align: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      white-space: nowrap;
    }
    .env-table th:first-child,
    .env-table td:first-child {
      text-align: left;
      white-space: normal;
    }
    .env-table thead th {
      color: #ffffff;
      font-weight: 700;
      border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }
    .env-table tbody td {
      color: rgba(255, 255, 255, 0.85);
    }
    .env-table tbody td:first-child {
      color: #ffffff;
      font-weight: 700;
    }
    .env-table__hl {
      background: rgba(0, 147, 196, 0.14);
    }
    .env-table thead .env-table__hl {
      color: #0069aa;
    }
    .env-table__note {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.55);
      line-height: 1.5;
      margin-top: 10px;
    }
    .env-table__note--first {
      margin-top: 16px;
    }

    body.energy-saver .env-table thead th,
    body.energy-saver .env-climate-reveal.revealed .env-table thead th {
      color: #0c2340 !important;
      border-bottom-color: rgba(12, 35, 64, 0.18) !important;
    }

    body.energy-saver .env-table tbody td,
    body.energy-saver .env-climate-reveal.revealed .env-table tbody td {
      color: rgba(12, 35, 64, 0.85) !important;
      border-bottom-color: rgba(12, 35, 64, 0.1) !important;
    }

    body.energy-saver .env-table tbody td:first-child,
    body.energy-saver .env-climate-reveal.revealed .env-table tbody td:first-child,
    body.energy-saver .env-table__note,
    body.energy-saver .env-climate-reveal.revealed .env-table__note {
      color: #0c2340 !important;
    }

    /* ── Advancing psychological safety — purple arrow banner + 2x2 items ── */
    .env-aps {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 44px;
      align-items: center;
      margin-top: 40px;
    }
    /* arrow banner — orange outline, purple text, no fill */
    .env-aps__banner {
      position: relative;
      align-self: stretch;
      display: flex;
      align-items: center;
      background: #f7931d;
      color: #6c3f99;
      font-family: 'League Gothic', sans-serif;
      font-size: clamp(22px, 2.2vw, 30px);
      font-weight: 400;
      text-transform: uppercase;
      line-height: 1.1;
      letter-spacing: 0.5px;
      padding: 40px 46px 40px 30px;
      clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
    }
    .env-aps__banner::before {
      content: '';
      position: absolute;
      inset: 2px;
      background: #061525;
      clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
    }
    .env-aps__banner span {
      position: relative;
      z-index: 1;
    }
    body.energy-saver .env-aps__banner,
    body.energy-saver .env-climate-reveal.revealed .env-aps__banner,
    body.cinematic .env-aps__banner,
    body.cinematic .env-climate-reveal.revealed .env-aps__banner,
    body.is-saver .env-aps__banner,
    body.is-saver .env-climate-reveal.revealed .env-aps__banner,
    html.is-saver .env-aps__banner,
    html.is-saver .env-climate-reveal.revealed .env-aps__banner,
    body.energy-saver .env-aps__banner span,
    body.energy-saver .env-climate-reveal.revealed .env-aps__banner span,
    body.cinematic .env-aps__banner span,
    body.cinematic .env-climate-reveal.revealed .env-aps__banner span,
    body.is-saver .env-aps__banner span,
    body.is-saver .env-climate-reveal.revealed .env-aps__banner span,
    html.is-saver .env-aps__banner span,
    html.is-saver .env-climate-reveal.revealed .env-aps__banner span {
      color: #6c3f99 !important;
    }
    .env-aps__items {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 26px 44px;
    }
    /* full-width orange divider between the two rows */
    .env-aps__divider {
      grid-column: 1 / -1;
      height: 1px;
      background: #f7931d;
    }
    .env-aps__item {
      position: relative;
      padding-left: 16px;
    }
    /* orange vertical line on the left of the heading */
    .env-aps__item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 2px;
      width: 4px;
      height: 18px;
      background: #f7931d;
    }
    .env-aps__head {
      font-size: 14px;
      font-weight: 700;
      color: #0069aa;
      line-height: 1.3;
      margin: 0 0 5px;
    }
    body.energy-saver .env-aps__head,
    body.energy-saver .env-climate-reveal.revealed .env-aps__head,
    body.cinematic .env-aps__head,
    body.cinematic .env-climate-reveal.revealed .env-aps__head,
    body.is-saver .env-aps__head,
    body.is-saver .env-climate-reveal.revealed .env-aps__head,
    html.is-saver .env-aps__head,
    html.is-saver .env-climate-reveal.revealed .env-aps__head {
      color: #0069aa !important;
    }
    .env-aps__desc {
      font-size: 13px;
      font-weight: 400;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.8);
      margin: 0;
    }
    @media (max-width: 768px) {
      .env-aps {
        grid-template-columns: 1fr;
        gap: 28px;
      }
      .env-aps__banner {
        clip-path: none;
        padding: 28px 24px;
        justify-content: center;
        text-align: center;
      }
      .env-aps__banner::before {
        clip-path: none;
      }
      .env-aps__items {
        grid-template-columns: 1fr;
        gap: 22px;
      }
      .env-aps__divider {
        display: none;
      }
    }

    /* ── Sub-heading (purple) ── */
    .env-osub {
      font-size: 16px;
      font-weight: 700;
      color: #6c3f99;
      line-height: 1.3;
      margin-bottom: 10px;
      /* text-transform: uppercase; */
    }
    body.energy-saver .env-osub,
    body.energy-saver .env-climate-reveal.revealed.env-osub,
    body.cinematic .env-osub,
    body.cinematic .env-climate-reveal.revealed.env-osub,
    body.is-saver .env-osub,
    body.is-saver .env-climate-reveal.revealed.env-osub,
    html.is-saver .env-osub,
    html.is-saver .env-climate-reveal.revealed.env-osub {
      color: #6c3f99 !important;
    }
    .env-osub--orange {
      color: #f7931d;
    }
    body.energy-saver .env-osub--orange,
    body.energy-saver .env-climate-reveal.revealed.env-osub--orange,
    body.cinematic .env-osub--orange,
    body.cinematic .env-climate-reveal.revealed.env-osub--orange,
    body.is-saver .env-osub--orange,
    body.is-saver .env-climate-reveal.revealed.env-osub--orange,
    html.is-saver .env-osub--orange,
    html.is-saver .env-climate-reveal.revealed.env-osub--orange {
      color: #f7931d !important;
    }

    /* ── Sub-heading (blue) ── */
    .env-bsub {
      font-size: 16px;
      font-weight: 700;
      color: #0069aa;
      line-height: 1.3;
      margin-bottom: 10px;
    }
    body.energy-saver .env-bsub,
    body.energy-saver .env-climate-reveal.revealed.env-bsub,
    body.cinematic .env-bsub,
    body.cinematic .env-climate-reveal.revealed.env-bsub,
    body.is-saver .env-bsub,
    body.is-saver .env-climate-reveal.revealed.env-bsub,
    html.is-saver .env-bsub,
    html.is-saver .env-climate-reveal.revealed.env-bsub {
      color: #0069aa !important;
    }
    .env-bsub--lt {
      color: #00adef;
    }
    .env-bsub--indigo {
      color: #25247b;
      background-color: #0a1628;
      position: absolute;
      top:-10px;
      display: inline;
      padding-right:20px;
    }
    body.energy-saver .env-bsub--indigo,
    body.energy-saver .env-climate-reveal.revealed .env-bsub--indigo,
    body.cinematic .env-bsub--indigo,
    body.cinematic .env-climate-reveal.revealed .env-bsub--indigo,
    body.is-saver .env-bsub--indigo,
    body.is-saver .env-climate-reveal.revealed .env-bsub--indigo,
    html.is-saver .env-bsub--indigo,
    html.is-saver .env-climate-reveal.revealed .env-bsub--indigo {
      color: #25247b !important;
    }
    body.energy-saver .env-bsub--indigo,
    body.energy-saver .env-climate-reveal.revealed .env-bsub--indigo {
      background-color: #ffffff !important;
    }

    /* ── Integrated-systems box: purple heading panel + body ── */
    .env-intbox {
      display: grid;
      grid-template-columns: 32% 1fr;
      border: 1px solid #6c3f99;
    }

    .env-intbox__head {
      background: #6c3f99;
      color: #ffffff;
      font-size: 17px;
      font-weight: 700;
      line-height: 1.4;
      padding: 34px 30px;
      display: flex;
      align-items: center;
    }

    .env-intbox__body {
      padding: 30px 36px;
      display: flex;
      align-items: center;
    }

    .env-intbox__body p {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.85);
      margin: 0;
    }

    @media (max-width: 768px) {
      .env-intbox {
        grid-template-columns: 1fr;
      }

      .env-intbox__head {
        padding: 24px 22px;
      }

      .env-intbox__body {
        padding: 24px 22px;
      }
    }

    /* ── Safety pillars — radial layout (3 left | centre | 3 right) ── */
    .env-pillars {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 24px 40px;
      align-items: center;
      max-width: 1120px;
      margin: 30px auto 0px;
      background-color: #ffffff;
      padding: 30px;
    }

    .env-pillars__side {
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .env-pillars__img {
      width: 100%;
      max-width: 300px;
      height: auto;
      display: block;
    }

    .env-pillar {
      position: relative;
      padding-left: 16px;
      flex-shrink: 0;
    }

    .env-pillar::before {
      content: '';
      position: absolute;
      left: 0;
      top: 3px;
      width: 4px;
      height: 18px;
      background: #f7931d;
    }

    .env-pillar--right {
      padding-left: 0;
      padding-right: 16px;
      text-align: right;
    }

    .env-pillar--right::before {
      left: auto;
      right: 0;
    }

    .env-pillar__head {
      font-size: 15px;
      font-weight: 700;
      color: #0069aa;
      line-height: 1.3;
      margin: 0 0 6px;
    }

    .env-pillar__desc {
      font-size: 13px;
      font-weight: 400;
      line-height: 1.5;
      color: rgba(0, 0, 0, 0.8);
      margin: 0;
    }

    @media (max-width: 768px) {
      .env-pillars {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 0;
      }

      .env-pillars__img {
        max-width: 240px;
        margin: 0 auto;
        order: -1;
      }
      .env-meta-wrap{
        margin: 0;
      }
      .env-khp__num{
        margin-top: 25px;
      }
      .env-climate-p{
        margin-bottom: 5px;
      }
      .env-car-illu{
        margin: 0;
      }

      .env-pillar--right {
        padding-left: 16px;
        padding-right: 0;
        text-align: left;
      }

      .env-pillar--right::before {
        left: 0;
        right: auto;
      }
    }

    /* ── Governance flow: 3 columns + orange arrows, orange border ── */
    .env-govflow {
      border: 2px solid #f7931d;
      padding: 34px 40px;
      margin-top: 30px;
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      gap: 0 26px;
      align-items: start;
    }

    .env-govflow__head {
      font-size: 15px;
      font-weight: 700;
      color: #6c3f99;
      line-height: 1.3;
      margin: 0;
    }
 

    body.energy-saver .env-govflow__head,
    body.energy-saver .env-climate-reveal.revealed .env-govflow__head,
    body.cinematic .env-govflow__head,
    body.cinematic .env-climate-reveal.revealed .env-govflow__head,
    body.is-saver .env-govflow__head,
    body.is-saver .env-climate-reveal.revealed .env-govflow__head,
    html.is-saver .env-govflow__head,
    html.is-saver .env-climate-reveal.revealed .env-govflow__head {
      color: #6c3f99 !important;
    }

.env-govflow__head::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #f7931d;
  margin: 10px auto 14px;
  margin: 10px auto;
}

    .env-govflow__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .env-govflow__list li {
      position: relative;
      padding-left: 18px;
      font-size: 13.5px;
      line-height: 1.5;
      color: #ffffff;
    }

    .env-govflow__list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 6px;
      width: 8px;
      height: 8px;
      background: #0069aa;
    }

    .env-govflow__arrow {
      align-self: center;
      width: 0;
      height: 0;
      border-top: 26px solid transparent;
      border-bottom: 26px solid transparent;
      border-left: 22px solid #f7931d;
    }

    @media (max-width: 768px) {
      .env-govflow {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 26px 22px;
      }

      .env-govflow__arrow {
        justify-self: center;
        border-left: 13px solid transparent;
        border-right: 13px solid transparent;
        border-top: 18px solid #f7931d;
        border-bottom: 0;
      }
    }

    /* ── CRM stat box — full-width, 2-column, orange border ── */
    .env-crmbox {
      background: #081c33;
      border: 2px solid #f7931d;
      border-radius: 0;
      padding: 34px 44px;
      margin-top: 40px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px 56px;
    }

    .env-crmbox__num {
      font-family: 'League Gothic', sans-serif;
      font-size: clamp(36px, 4.2vw, 50px);
      font-weight: 400;
      color: #0069aa;
      line-height: 1;
      letter-spacing: 0;
    }

    .env-crmbox__cur {
      color: #0069aa;
    }

    body.energy-saver .env-crmbox__cur,
    body.energy-saver .env-climate-reveal.revealed .env-crmbox__cur,
    body.cinematic .env-crmbox__cur,
    body.cinematic .env-climate-reveal.revealed .env-crmbox__cur,
    body.is-saver .env-crmbox__cur,
    body.is-saver .env-climate-reveal.revealed .env-crmbox__cur,
    html.is-saver .env-crmbox__cur,
    html.is-saver .env-climate-reveal.revealed .env-crmbox__cur {
      color: #0069aa !important;
    }

    .env-crmbox__unit {
      color: #0069aa;
      font-size: 0.62em;
    }

    body.energy-saver .env-crmbox__unit,
    body.energy-saver .env-climate-reveal.revealed .env-crmbox__unit,
    body.cinematic .env-crmbox__unit,
    body.cinematic .env-climate-reveal.revealed .env-crmbox__unit,
    body.is-saver .env-crmbox__unit,
    body.is-saver .env-climate-reveal.revealed .env-crmbox__unit,
    html.is-saver .env-crmbox__unit,
    html.is-saver .env-climate-reveal.revealed .env-crmbox__unit {
      color: #0069aa !important;
    }

    .env-crmbox__label {
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      line-height: 1.5;
      margin-top: 6px;
    }

    @media (max-width: 768px) {
      .env-crmbox {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 26px 22px;
      }
    }

    /* smaller descriptive unit + bold labels variant */
    .env-crmbox--stack .env-crmbox__unit {
      font-size: 0.44em;
    }

    .env-crmbox--stack .env-crmbox__label {
      font-weight: 700;
    }

    /* ── "For more details refer …" line (icon + right-aligned) ── */
    .env-refer {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.6);
      margin-top: 18px;
    }

    .env-refer__icon {
      flex-shrink: 0;
      display: flex;
    }

    .env-refer__icon img {
      width: 20px;
      height: 20px;
      display: block;
    }

    /* ── Consistent full-width image spacing (H&S page) ── */
    .hs-fullimg {
      width: 100%;
      box-sizing: border-box;
      padding: 0 clamp(2rem, 8vw, 7rem);
      margin-top: 0;
    }

    /* full-width image with its own top gap (after a no-bottom-padding section) */
    .hs-fullimg--mt {
      margin-top: 0px;
    }

    /* narrower centred inner (e.g. the five-phase diagram) */
    /* .hs-img-1150 {
      max-width: 1150px;
      margin: 36px auto 0;
      background-color: #fff;
      padding: 30px;
    } */

    @media (max-width: 768px) {
      .hs-fullimg {
        padding: 0 15px;
      }
    }

    /* ── 2030 Goals — left graphic + right statement ── */
    .env-goals-section {
      max-width: 1440px;
      margin: 0 auto;
      padding: 60px clamp(2rem, 8vw, 7rem) 40px;
    }

    .env-goals-wrap {
      display: grid;
      grid-template-columns: 300px 1fr;
      gap: 30px;
      align-items: center;
      max-width: 880px;
      margin: 0 auto;
      background-color: #ffffff;
    }

    .env-goals-img {
      width: 100%;
      max-width: 300px;
      height: auto;
      display: block;
    }

    .env-goals-text {
      font-family: 'League Gothic', sans-serif;
      font-size: clamp(20px, 2.2vw, 30px);
      font-weight: 400;
      color: #6c3f99;
      text-transform: uppercase;
      line-height: 1.15;
      letter-spacing: 0.5px;
      margin: 0;
    }

    @media (max-width: 768px) {
      .env-goals-section {
        padding: 30px 20px 50px;
      }

      .env-goals-wrap {
        grid-template-columns: 1fr;
        gap: 24px;
        justify-items: center;
        text-align: center;
      }

      .env-goals-img {
        max-width: 240px;
      }
    }

    /* ── 3-column variant of the HR/key-focus grid (H&S page) ── */
    .env-hr-grid--3col {
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
    }

    .env-hr-grid--mt {
      margin-top: 40px;
    }

    @media (max-width: 768px) {
      .env-hr-grid--3col {
        grid-template-columns: 1fr;
      }
    }

    .env-crmbox1 {
      margin-top: 0px;
    }

.heath-cap-icon
{
  max-height: 42px;
}
.health-icon-sdg
{
  max-height: 70px;
}
.emp-white-bg
{
  /* background-color: #ffffff; */
  /* padding: 30px; */
}
.emp-white-bg1
{
  background-color: #ffffff;
  /* padding: 0px 30px; */
}
.emp-white-bg1 .env-talent-p,
.emp-white-bg1 .env-ka-item
{
color:rgba(0, 0, 0, 0.85);
}
.mb-0
{
  margin-bottom: 0px !important;
}
.pd-30
{
  padding-bottom: 30px !important;
}
 .mt-0
 {
  margin-top: 0px !important;
 }
 .pt-20
 {
  padding-top: 20px;
 }
 .cap-comicon img 
 {
  max-height: 42px;
 }
 .stk-comicon img 
 {
  max-height: 48px;
 }
 .sdg-comicon img 
 {
  max-height: 150px;
 }
 .env-graph
 {
  background-color: #ffffff;
  padding: 20px;
  max-width: 350px;
 }
 .srs-capicon img 
 {
  max-height: 42px;
 }
body.energy-saver .env-meta-vsep--full, body.energy-saver .env-meta-divider{
  background: #0c2340;
}
body.energy-saver .env-bento-card{
  background: #0c2340;
}

@media (max-width: 767px) {
  .env-secnav {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .env-secnav__grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .env-secnav__card {
    padding: 18px 16px !important;
    align-items: flex-start !important;
  }

  .env-graph-grid {
    gap: 18px !important;
    justify-content: stretch !important;
  }

  .env-graph-grid .env-graph {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  .hzg__val {
    font-size: 12px !important;
    white-space: normal !important;
    width: max-content;
    max-width: 84px;
    text-align: center;
    line-height: 1.2;
  }

  .hzg__x {
    font-size: 12px !important;
  }

  .hs-fullimg {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hs-fullimg img[src*="thematic-Priorities"] {
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .env-graph {
    padding: 16px !important;
  }

  .hzg__plot {
    height: 200px !important;
  }

  .hzg__bar {
    width: 10px !important;
  }

  .hzg__val {
    max-width: 72px;
    font-size: 11px !important;
    margin-bottom: 8px !important;
  }

  .hzg__x {
    font-size: 11px !important;
  }

  .env-secnav__card {
    padding: 16px 14px !important;
  }
}

/* env-pathway-num: number sits on a coloured gradient badge — keep it white in
   both dark and cinematic/light modes (override the global light-mode dark text). */
body.energy-saver .env-pathway-num {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* quality-of-life award card (.qol-flat): in cinematic/light mode drop the dark
   card background + gradient shadow and make the text dark, so it blends into
   the light page. (Scoped via .qol-flat — only that one card.) */
body.energy-saver .qol-flat .env-car-card { background: transparent !important; }
body.energy-saver .qol-flat .env-car-shadow { display: none !important; }
body.energy-saver .qol-flat .env-car-card__text,
body.energy-saver .qol-flat .env-car-card__text strong {
  color: #0c2340 !important;
  -webkit-text-fill-color: #0c2340 !important;
}

/* social-responsible-sourcing (.srs-page): in cinematic mode, flatten the
   env-car cards — no background, no gradient shadow, dark body text — while
   keeping the blue links (.env-ilink) and purple sub-headings (.env-osub) the
   same in both modes. Scoped to this page via .srs-page. */
body.energy-saver .srs-page .env-car-card { background: transparent !important; }
body.energy-saver .srs-page .env-car-shadow { display: none !important; }
body.energy-saver .srs-page .env-car-card__text,
body.energy-saver .srs-page .env-car-card__text.is5 {
  color: #0c2340 !important;
}
body.energy-saver .srs-page .env-osub { color: #6c3f99 !important; }

/* social-responsible-sourcing: the "white-fixed" text should also go dark in
   cinematic on this page (links stay blue — not targeted; headings stay purple). */
body.energy-saver .srs-page .env-text-white-fixed,
body.energy-saver .srs-page .env-text-white-fixed li,
body.energy-saver .srs-page .env-text-white-fixed strong,
body.energy-saver .srs-page .env-text-white-fixed span {
  color: #0c2340 !important;
}

/* social-responsible-sourcing: p + li INSIDE the env-car cards go dark in
   cinematic (scoped to the cards only, so it can't affect other sections).
   Purple headings (.env-osub = h5) and blue links (.env-ilink = a) are not
   p/li, so they remain unchanged in both modes. */
body.energy-saver .srs-page .env-car-card p,
body.energy-saver .srs-page .env-car-card li {
  color: #0c2340 !important;
}

/* social-responsible-sourcing: the env-climate-reveal ".revealed" rules force
   the card text white at higher specificity once the card animates in. Match
   that specificity (scoped to .srs-page) so the text stays dark in cinematic. */
body.energy-saver .srs-page .env-climate-reveal.revealed .env-car-card p,
body.energy-saver .srs-page .env-climate-reveal.revealed .env-car-card li,
body.energy-saver .srs-page .env-climate-reveal.revealed .env-car-card__text,
body.energy-saver .srs-page .env-climate-reveal.revealed .env-text-white-fixed,
body.energy-saver .srs-page .env-climate-reveal.revealed .env-text-white-fixed li,
body.energy-saver .srs-page .env-climate-reveal.revealed .env-text-white-fixed strong,
body.energy-saver .srs-page .env-climate-reveal.revealed .env-text-white-fixed span {
  color: #0c2340 !important;
}

/* saksham-learning-pathways: in dark (energy-saver) mode the .emp-white-bg1
   white box is removed (transparent) and its text turned light so it stays
   readable on the dark page. Light/cinematic mode keeps the white box.
   Scoped to .saksham-page. */
body.cinematic .saksham-page .emp-white-bg1 { background-color: transparent !important; }
body.cinematic .saksham-page .emp-white-bg1 .env-talent-p,
body.cinematic .saksham-page .emp-white-bg1 .env-ka-item {
  color: rgba(255,255,255,0.88) !important;
}

/* tejaswini: in dark (energy-saver) mode remove the .emp-white-bg1 white box
   and turn its text white so it reads on the dark page. Cinematic keeps the
   white box + black text. Scoped to .tej-page. */
body.cinematic .tej-page .emp-white-bg1 { background-color: transparent !important; }
body.cinematic .tej-page .emp-white-bg1 .env-talent-p,
body.cinematic .tej-page .emp-white-bg1 .env-ka-item,
body.cinematic .tej-page .emp-white-bg1 .env-talent-grid,
body.cinematic .tej-page .emp-white-bg1 p,
body.cinematic .tej-page .emp-white-bg1 li {
  color: rgba(255,255,255,0.88) !important;
}