:root {
  --navy-deep: #07172b;
  --navy-mid: #0c2340;
  --navy-light: #102d50;
  --panel: #0e1b2e;
  --panel-raise: #122339;
  --metal: #1fa6de;
  --metal-bright: #5ac6ee;
  --metal-deep: #005fa1;
  --metal-glow: rgba(31, 166, 222, 0.14);
  --metal-border: rgba(31, 166, 222, 0.34);
  --eco-green: #7fb942;
  --eco-green-bright: #9bcf5f;
  --eco-border: rgba(127, 185, 66, 0.4);
  --eco-glow: rgba(127, 185, 66, 0.16);
  --brand-blue: #1fa6de;
  --brand-blue-deep: #005fa1;
  --brand-green: #7fb942;
  --brand-gradient: linear-gradient(105deg, #7fb942 0%, #18b0c9 35%, #1e73c8 66%, #6b4fb0 100%);
  --cream: #f4efe4;
  --ink-90: rgba(244, 239, 228, 0.92);
  --ink-72: rgba(244, 239, 228, 0.72);
  --ink-50: rgba(244, 239, 228, 0.5);
  --ink-38: rgba(244, 239, 228, 0.38);
  --hair: rgba(244, 239, 228, 0.1);
  --hair-soft: rgba(244, 239, 228, 0.06);
  --zinc-green: #7fb942;
  --zinc-bright: #9bcf5f;
  --gold: #e8b84b;
  --white: #ffffff;
  --white-70: rgba(255, 255, 255, 0.7);
  --white-45: rgba(255, 255, 255, 0.45);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-08: rgba(255, 255, 255, 0.08);
  --white-04: rgba(255, 255, 255, 0.04);
  --green-glow: rgba(127, 185, 66, 0.16);
  --green-border: rgba(127, 185, 66, 0.35);
  --sans: "proxima-nova", "Mulish", system-ui, sans-serif;
  --display: "League Gothic", "proxima-nova", sans-serif;
  --serif: "proxima-nova", "Mulish", system-ui, sans-serif;
  --header-h: 76px;
  --ink-d: #0c2340;
  --ink-d-70: rgba(12, 35, 64, 0.72);
  --ink-d-45: rgba(12, 35, 64, 0.5);
  --hair-d: rgba(12, 35, 64, 0.12);
}

header.site-header[data-header],
[data-partial="header"],
.nav-scrim[data-nav-scrim],
.search-overlay[data-search],
.mobile-drawer[data-drawer],
.drawer-scrim[data-drawer-scrim] {
  display: none;
}

body > .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid var(--hair-d);
  transition:
    transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

body > .site-header.is-scrolled {
  background: #ffffff;
  box-shadow: 0 2px 18px rgba(7, 23, 43, 0.1);
  border-bottom-color: var(--hair-d);
}

body > .site-header.is-hidden {
  transform: translateY(-100%);
}

body > .site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 clamp(20px, 4vw, 56px);
}

body > .site-header .logo-link {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  flex-shrink: 0;
  padding: 6px;
  margin-left: -6px;
  border-radius: 8px;
  transition: opacity 0.2s;
}

body > .site-header .logo-link:hover {
  opacity: 0.85;
}

body > .site-header .logo-link:focus-visible {
  outline: 2px solid var(--metal);
  outline-offset: 3px;
}

body > .site-header .logo-hzl {
  height: 38px;
  width: auto;
  display: block;
}

body > .site-header .logo-divider {
  width: 1px;
  height: 30px;
  background: rgba(12, 35, 64, 0.30);
  flex-shrink: 0;
}

body > .site-header .logo-vedanta {
  height: 22px;
  width: auto;
  display: block;
  opacity: 0.96;
}

body > .site-header .header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

body > .site-header a,
body > .site-header button,
body > .nav-menu a,
body > .nav-menu button {
  font-family: var(--sans);
}

body > .site-header .search-btn {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--hair-d);
  background: #fff;
  color: var(--ink-d);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

body > .site-header .search-btn:hover {
  border-color: var(--metal);
  color: var(--metal);
  box-shadow: 0 4px 14px rgba(31, 166, 222, 0.18);
}

body > .site-header .search-btn:focus-visible {
  outline: 2px solid var(--metal);
  outline-offset: 3px;
}

body > .site-header .search-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

body > .site-header .speak-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  height: 36px;
  padding: 3px 15px 3px 3px;
  border-radius: 999px;
  border: 1px solid var(--hair-d);
  cursor: pointer;
  background: #fff;
  color: var(--ink-d);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body > .site-header .speak-btn:hover {
  border-color: var(--eco-green);
  box-shadow: 0 4px 14px rgba(127, 185, 66, 0.2);
}

body > .site-header .speak-btn:focus-visible {
  outline: 2px solid var(--eco-green);
  outline-offset: 3px;
}

body > .site-header .speak-ic {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--eco-green);
  color: #0c2a06;
  display: grid;
  place-items: center;
}

body > .site-header .speak-ic svg {
  width: 13px;
  height: 13px;
  display: block;
}

body > .site-header .speak-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body > .site-header .speak-btn .ic-stop {
  display: none;
}

body > .site-header .speak-btn.is-speaking .ic-play {
  display: none;
}

body > .site-header .speak-btn.is-speaking .ic-stop {
  display: block;
}

body > .site-header .speak-btn.is-speaking .speak-ic {
  background: var(--eco-green-bright);
  animation: speakPulse 1.7s ease-in-out infinite;
}

@keyframes speakPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(127, 185, 66, 0.5);
  }

  50% {
    box-shadow: 0 0 0 9px rgba(127, 185, 66, 0);
  }
}

body > .site-header .mode-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  height: 36px;
  padding: 0 15px 0 4px;
  border-radius: 999px;
  border: 1px solid var(--hair-d);
  cursor: pointer;
  background: #fff;
  color: var(--ink-d);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body > .site-header .mode-toggle:hover {
  border-color: var(--eco-green);
  box-shadow: 0 4px 14px rgba(127, 185, 66, 0.2);
}

body > .site-header .mode-toggle:focus-visible {
  outline: 2px solid var(--metal);
  outline-offset: 3px;
}

body > .site-header .mode-switch {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: #cfd6dd;
  transition: background 0.25s ease;
}

body > .site-header .mode-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(7, 23, 43, 0.3);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

body > .site-header .mode-toggle[aria-checked="true"] .mode-switch {
  background: var(--eco-green);
}

body > .site-header .mode-toggle[aria-checked="true"] .mode-knob {
  transform: translateX(18px);
}

body > .site-header .mode-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  min-width: 126px;
  text-align: left;
}

body > .site-header .mode-tip {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 5;
  width: clamp(240px, 22vw, 300px);
  padding: 14px 16px;
  border-radius: 12px;
  background:
    linear-gradient(125deg, rgba(127, 185, 66, 0.18) 0%, rgba(24, 176, 201, 0.12) 40%, rgba(30, 115, 200, 0.12) 70%, rgba(107, 79, 176, 0.2) 100%),
    #ffffff;
  border: 1px solid rgba(12, 35, 64, 0.1);
  box-shadow: 0 12px 34px rgba(7, 23, 43, 0.16);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(12, 35, 64, 0.82);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

body > .site-header .mode-tip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 26px;
  border: 7px solid transparent;
  border-bottom-color: rgba(238, 245, 238, 0.96);
}

body.energy-saver > .site-header .mode-toggle:hover .mode-tip,
body.energy-saver > .site-header .mode-toggle:focus-visible .mode-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Eco behaviour stays on Energy Saver (now the light mode): pause looping animations */
body.energy-saver *,
body.energy-saver *::before,
body.energy-saver *::after {
  animation-duration: 1ms;
  animation-delay: -1ms;
  animation-iteration-count: 1;
}

body.energy-saver {
  background: #ffffff;
  color: #0c2340;
}

body.energy-saver main,
body.energy-saver .env-page,
body.energy-saver .op-page,
body.energy-saver .bod-page,
body.energy-saver .gov-page,
body.energy-saver .bed-page,
body.energy-saver .sustainability-page,
body.energy-saver .story-page,
body.energy-saver .product-page,
body.energy-saver .mine-page {
  background: #ffffff;
  color: #0c2340;
}

body.energy-saver main section,
body.energy-saver main article,
body.energy-saver main aside,
body.energy-saver .env-breadcrumb,
body.energy-saver .op-breadcrumb,
body.energy-saver .env-subnav,
body.energy-saver .op-platform,
body.energy-saver .op-highlight,
body.energy-saver .op-hero,
body.energy-saver .op-intro,
body.energy-saver .env-hero,
body.energy-saver .env-beams-section,
body.energy-saver .env-dark-band,
body.energy-saver .env-section,
body.energy-saver .gov-hero,
body.energy-saver .gov-section,
body.energy-saver .bed-hero,
body.energy-saver .bed-section,
body.energy-saver .story-section,
body.energy-saver .mine-section,
body.energy-saver .product-section {
  background: #ffffff;
  color: #0c2340;
}

body .env-hero {
  padding-bottom: 40px !important;
}

.env-hero {
  padding-bottom: 40px;
}
/* Match BED hero: no bottom padding on small screens (≤767px). Shared, so it
   applies consistently across all env-* folders (environmental, mines, social,
   governance, operational-performance, product, stories, sustainability). */
@media (max-width: 767px) {
  body .env-hero { padding-bottom: 15px !important; }
}

.env-beams-section {
  padding: 0 0;
}

body.energy-saver main :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, small, strong, em, span),
body.energy-saver .env-breadcrumb__item,
body.energy-saver .op-breadcrumb__item,
body.energy-saver .env-breadcrumb__sep,
body.energy-saver .op-breadcrumb__sep,
body.energy-saver .env-banner-text__top,
body.energy-saver .env-banner-text__main,
body.energy-saver .op-banner-text__top,
body.energy-saver .op-banner-text__main,
body.energy-saver .bed-banner-text__top,
body.energy-saver .bed-banner-text__main,
body.energy-saver .env-takeaway__heading,
body.energy-saver .op-takeaway__heading,
body.energy-saver .bed-takeaway__heading,
body.energy-saver .env-takeaway__list li,
body.energy-saver .op-takeaway__list li,
body.energy-saver .bed-takeaway__list li,
body.energy-saver .env-beams-text,
body.energy-saver .op-intro__copy,
body.energy-saver .gov-intro,
body.energy-saver .story-intro,
body.energy-saver .mine-intro,
body.energy-saver .product-intro {
  color: #0c2340;
}

body.energy-saver main a:not(.btn-download):not(.menu-foot-download):not(.pane-links a):not(.env-back-btn):not(.bed-back-btn):not(.op-back-btn) {
  color: blue;
}

/* Breadcrumb links: black in light / cinematic mode across all folders
   (board-of-directors, business-excellence-drivers, governance, key-performance-indicators,
    mines, operational, product, social, stories, sustainability) */
body.energy-saver .bed-breadcrumb__item,     
body.energy-saver .bm-breadcrumb__item,    
body.energy-saver .bod-breadcrumb__item,  
body.energy-saver .env-breadcrumb__item,    
body.energy-saver .op-breadcrumb__item{
  color: #000000 !important;
}


body.energy-saver main :is(.env-card, .op-card, .bed-card, .gov-card, .mine-card, .product-card, .story-card, .env-takeaway, .op-takeaway, .bed-takeaway, .env-overlay-card, .env-intbox, .op-capability, .op-scale__impact, .bed-tech-block, .bed-rdcollab, .env-modal__body) {
  background: #ffffff;
  color: #0c2340;
  border-color: rgba(12, 35, 64, 0.12);
}

body.energy-saver .bed-hero__overlay {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.75) 100%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.85) 100%);
}

body.energy-saver .env-hero__overlay {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.75) 100%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.85) 100%);
}

body.energy-saver .bed-hzl2-slide .bed-hzl2-desc {
  color: #0c2340;
}

body.energy-saver .bed-hzl2-nav {
  color: #0c2340;
}

body.energy-saver .bed-hzl2-dot {
  background: rgba(12, 35, 64, 0.18);
}

body.energy-saver .bed-hzl2-dot.active {
  background: #0069aa;
}

body.energy-saver .bed-hzl2-arrow {
  background: rgba(12, 35, 64, 0.06);
  border-color: rgba(12, 35, 64, 0.15);
  color: #0c2340;
}

body.energy-saver .bed-hzl2-arrow:hover:not(:disabled) {
  background: rgba(0, 105, 170, 0.12);
  border-color: #0069aa;
  color: #0069aa;
}

body.energy-saver .bed-benefit-group,
body.energy-saver .bed-leveraged-grid > .bed-benefit-group {
  border-bottom-color: rgba(12, 35, 64, 0.15);
}

body.energy-saver .bed-benefit-group__label,
body.energy-saver .bed-tech-block__body,
body.energy-saver .bed-tech-block__body p,
body.energy-saver .bed-benefit-block__sub {
  color: #0c2340;
}

body.energy-saver .bed-secnav__card {
  background: rgba(12, 35, 64, 0.03);
  border-color: rgba(12, 35, 64, 0.12);
}

body.energy-saver .bed-secnav__card:hover {
  background: rgba(12, 35, 64, 0.06);
  border-color: rgba(114, 191, 68, 0.5);
}

body.energy-saver .bed-secnav__card--active {
  border-color: #72bf44;
  background: rgba(114, 191, 68, 0.08);
}

body.energy-saver .bed-secnav__label,
body.energy-saver .bed-secnav__arrow {
  color: #0c2340;
}

body.energy-saver .env-secnav__card {
  background: rgba(12, 35, 64, 0.03);
  border-color: rgba(12, 35, 64, 0.12);
}

body.energy-saver .env-secnav__card:hover {
  background: rgba(12, 35, 64, 0.06);
  border-color: rgba(114, 191, 68, 0.5);
}

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

body.energy-saver .env-secnav__label {
  color: #0c2340;
}

body.energy-saver .env-secnav__arrow,
body.cinematic .env-secnav__arrow {
  color: #72bf44;
}

body.energy-saver .bed-kpi {
  background: rgba(12, 35, 64, 0.03);
  border-color: rgba(12, 35, 64, 0.12);
}

body.energy-saver .bed-kpi__label {
  color: #0c2340;
}

body.energy-saver .ram-hero-stats__value {
  color: #0c2340;
}

body.energy-saver .ram-hero-stats__label {
  color: rgba(12, 35, 64, 0.76);
}

body.energy-saver .ram-card__notch {
  background: #ffffff;
}

body.energy-saver :is(.op-platform__title, .op-platform__title.env-climate-reveal, .op-platform__title.scroll-reveal.visible.revealed),
body.energy-saver .env-climate-reveal.revealed .op-platform__title,
body.energy-saver .scroll-reveal.visible.revealed .op-platform__title {
  color: #0c2340 !important;
}

body.energy-saver :is(.op-milestones__title, .op-milestones__title.env-climate-reveal, .op-milestones__title.scroll-reveal.visible.revealed),
body.energy-saver .env-climate-reveal.revealed .op-milestones__title,
body.energy-saver .scroll-reveal.visible.revealed .op-milestones__title {
  color: #0c2340 !important;
}

body.energy-saver .lead-outlook__frame {
  border-color: rgba(12, 35, 64, 0.12);
}

body.energy-saver .bed-table-wrap {
  border-color: rgba(12, 35, 64, 0.12);
}

body.energy-saver .bed-table th {
  background: rgba(0, 105, 170, 0.1);
  color: #0c2340;
  border-bottom-color: rgba(12, 35, 64, 0.12);
}

body.energy-saver .bed-table td {
  color: #0c2340;
  border-bottom-color: rgba(12, 35, 64, 0.08);
}

body.energy-saver .bed-table td:first-child {
  color: #0c2340;
}

body.energy-saver .bed-stat-card__num {
  color: #0c2340;
}

body.energy-saver .bed-head--blue,
body.energy-saver .bed-reveal.revealed .bed-head--blue {
  color: #0069aa;
}

body.energy-saver .bed-head--purple,
body.energy-saver .bed-reveal.revealed .bed-head--purple {
  color: #6c3f99;
}

body.energy-saver .bed-tech-block__head,
body.energy-saver .bed-reveal.revealed .bed-tech-block__head {
  color: #6c3f99;
}

body.energy-saver .bed-init-subhead,
body.energy-saver .bed-reveal.revealed .bed-init-subhead {
  color: #6c3f99;
}

body.energy-saver :is(.bed-head--blue, .bed-hzl2-head, .bed-benefit-block__title, .bed-benefit-block__stat),
body.energy-saver .bed-reveal.revealed :is(.bed-head--blue, .bed-hzl2-head, .bed-benefit-block__title, .bed-benefit-block__stat),
body.energy-saver .bed-initbox__heading,
body.energy-saver .bed-reveal.revealed .bed-initbox__heading {
  color: #0069aa;
}

body.energy-saver .lead-flow-head,
body.energy-saver .bed-reveal.revealed .lead-flow-head,
body.energy-saver main .lead-flow-head,
body.energy-saver main .bed-reveal.revealed .lead-flow-head,
body.energy-saver .env-body-wrap .lead-flow-head {
  color: #6c3f99;
}

body.energy-saver :is(.env-climate-head, .env-climate-head--blue),
body.energy-saver .env-climate-reveal.revealed :is(.env-climate-head, .env-climate-head--blue),
body.cinematic :is(.env-climate-head, .env-climate-head--blue),
body.cinematic .env-climate-reveal.revealed :is(.env-climate-head, .env-climate-head--blue) {
  color: #0069aa;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

body.energy-saver .env-hr-list li,
body.energy-saver .env-climate-reveal.revealed .env-hr-list li,
body.energy-saver .env-car-illu .env-hr-list li,
body.energy-saver .env-climate-reveal.revealed .env-car-illu .env-hr-list li,
html.cinematic .env-hr-list li {
  color: #0c2340 !important;
}

body.cinematic .env-hr-list li,
body.cinematic .env-climate-reveal.revealed .env-hr-list li {
  color: rgba(255, 255, 255, 0.85) !important;
}

body.energy-saver .env-car-illu .env-car-card__text,
body.energy-saver .env-climate-reveal.revealed .env-car-illu .env-car-card__text,
body.cinematic .env-car-illu .env-car-card__text,
body.cinematic .env-climate-reveal.revealed .env-car-illu .env-car-card__text,
body.is-saver .env-car-illu .env-car-card__text,
body.is-saver .env-climate-reveal.revealed .env-car-illu .env-car-card__text,
html.is-saver .env-car-illu .env-car-card__text,
html.is-saver .env-climate-reveal.revealed .env-car-illu .env-car-card__text,
body.energy-saver .env-car-illu .env-hr-list li,
body.energy-saver .env-climate-reveal.revealed .env-car-illu .env-hr-list li,
body.cinematic .env-car-illu .env-hr-list li,
body.cinematic .env-climate-reveal.revealed .env-car-illu .env-hr-list li,
body.is-saver .env-car-illu .env-hr-list li,
body.is-saver .env-climate-reveal.revealed .env-car-illu .env-hr-list li,
html.is-saver .env-car-illu .env-hr-list li,
html.is-saver .env-climate-reveal.revealed .env-car-illu .env-hr-list li {
  color: #081c33 !important;
}

body.energy-saver .env-car-illu--white-copy .env-car-card__text,
body.energy-saver .env-climate-reveal.revealed .env-car-illu--white-copy .env-car-card__text,
body.cinematic .env-car-illu--white-copy .env-car-card__text,
body.cinematic .env-climate-reveal.revealed .env-car-illu--white-copy .env-car-card__text,
body.is-saver .env-car-illu--white-copy .env-car-card__text,
body.is-saver .env-climate-reveal.revealed .env-car-illu--white-copy .env-car-card__text,
html.is-saver .env-car-illu--white-copy .env-car-card__text,
html.is-saver .env-climate-reveal.revealed .env-car-illu--white-copy .env-car-card__text,
body.energy-saver .env-car-illu--white-copy .env-hr-list li,
body.energy-saver .env-climate-reveal.revealed .env-car-illu--white-copy .env-hr-list li,
body.cinematic .env-car-illu--white-copy .env-hr-list li,
body.cinematic .env-climate-reveal.revealed .env-car-illu--white-copy .env-hr-list li,
body.is-saver .env-car-illu--white-copy .env-hr-list li,
body.is-saver .env-climate-reveal.revealed .env-car-illu--white-copy .env-hr-list li,
html.is-saver .env-car-illu--white-copy .env-hr-list li,
html.is-saver .env-climate-reveal.revealed .env-car-illu--white-copy .env-hr-list li {
  color: #081c33 !important;
}

body.energy-saver .env-text-white-fixed,
body.energy-saver .env-text-white-fixed li,
body.energy-saver .env-text-white-fixed strong,
body.energy-saver .env-text-white-fixed span,
body.energy-saver .env-climate-reveal.revealed .env-text-white-fixed,
body.energy-saver .env-climate-reveal.revealed .env-text-white-fixed li,
body.energy-saver .env-climate-reveal.revealed .env-text-white-fixed strong,
body.energy-saver .env-climate-reveal.revealed .env-text-white-fixed span,
body.cinematic .env-text-white-fixed,
body.cinematic .env-text-white-fixed li,
body.cinematic .env-text-white-fixed strong,
body.cinematic .env-text-white-fixed span,
body.cinematic .env-climate-reveal.revealed .env-text-white-fixed,
body.cinematic .env-climate-reveal.revealed .env-text-white-fixed li,
body.cinematic .env-climate-reveal.revealed .env-text-white-fixed strong,
body.cinematic .env-climate-reveal.revealed .env-text-white-fixed span,
body.is-saver .env-text-white-fixed,
body.is-saver .env-text-white-fixed li,
body.is-saver .env-text-white-fixed strong,
body.is-saver .env-text-white-fixed span,
body.is-saver .env-climate-reveal.revealed .env-text-white-fixed,
body.is-saver .env-climate-reveal.revealed .env-text-white-fixed li,
body.is-saver .env-climate-reveal.revealed .env-text-white-fixed strong,
body.is-saver .env-climate-reveal.revealed .env-text-white-fixed span,
html.is-saver .env-text-white-fixed,
html.is-saver .env-text-white-fixed li,
html.is-saver .env-text-white-fixed strong,
html.is-saver .env-text-white-fixed span,
html.is-saver .env-climate-reveal.revealed .env-text-white-fixed,
html.is-saver .env-climate-reveal.revealed .env-text-white-fixed li,
html.is-saver .env-climate-reveal.revealed .env-text-white-fixed strong,
html.is-saver .env-climate-reveal.revealed .env-text-white-fixed span {
  color: rgba(255, 255, 255, 0.92) !important;
}

body.energy-saver .env-car-card--vendor-white .env-osub,
body.energy-saver .env-car-card--vendor-white .env-car-card__text,
body.energy-saver .env-car-card--vendor-white .env-hr-list li,
body.energy-saver .env-car-card--vendor-white .env-car-card__text strong,
body.energy-saver .env-climate-reveal.revealed .env-car-card--vendor-white .env-osub,
body.energy-saver .env-climate-reveal.revealed .env-car-card--vendor-white .env-car-card__text,
body.energy-saver .env-climate-reveal.revealed .env-car-card--vendor-white .env-hr-list li,
body.energy-saver .env-climate-reveal.revealed .env-car-card--vendor-white .env-car-card__text strong,
body.cinematic .env-car-card--vendor-white .env-osub,
body.cinematic .env-car-card--vendor-white .env-car-card__text,
body.cinematic .env-car-card--vendor-white .env-hr-list li,
body.cinematic .env-car-card--vendor-white .env-car-card__text strong,
body.cinematic .env-climate-reveal.revealed .env-car-card--vendor-white .env-osub,
body.cinematic .env-climate-reveal.revealed .env-car-card--vendor-white .env-car-card__text,
body.cinematic .env-climate-reveal.revealed .env-car-card--vendor-white .env-hr-list li,
body.cinematic .env-climate-reveal.revealed .env-car-card--vendor-white .env-car-card__text strong,
body.is-saver .env-car-card--vendor-white .env-osub,
body.is-saver .env-car-card--vendor-white .env-car-card__text,
body.is-saver .env-car-card--vendor-white .env-hr-list li,
body.is-saver .env-car-card--vendor-white .env-car-card__text strong,
body.is-saver .env-climate-reveal.revealed .env-car-card--vendor-white .env-osub,
body.is-saver .env-climate-reveal.revealed .env-car-card--vendor-white .env-car-card__text,
body.is-saver .env-climate-reveal.revealed .env-car-card--vendor-white .env-hr-list li,
body.is-saver .env-climate-reveal.revealed .env-car-card--vendor-white .env-car-card__text strong,
html.is-saver .env-car-card--vendor-white .env-osub,
html.is-saver .env-car-card--vendor-white .env-car-card__text,
html.is-saver .env-car-card--vendor-white .env-hr-list li,
html.is-saver .env-car-card--vendor-white .env-car-card__text strong,
html.is-saver .env-climate-reveal.revealed .env-car-card--vendor-white .env-osub,
html.is-saver .env-climate-reveal.revealed .env-car-card--vendor-white .env-car-card__text,
html.is-saver .env-climate-reveal.revealed .env-car-card--vendor-white .env-hr-list li,
html.is-saver .env-climate-reveal.revealed .env-car-card--vendor-white .env-car-card__text strong {
  color: rgba(255, 255, 255, 0.92) !important;
}

body.energy-saver main .env-car-card--vendor-white :is(h5, p, li, strong, span),
body.energy-saver .env-climate-reveal.revealed .env-car-card--vendor-white :is(h5, p, li, strong, span) {
  color: rgba(255, 255, 255, 0.92) !important;
}

body.energy-saver .env-car-card--actions-white .env-hr-list li,
body.energy-saver .env-climate-reveal.revealed .env-car-card--actions-white .env-hr-list li,
body.cinematic .env-car-card--actions-white .env-hr-list li,
body.cinematic .env-climate-reveal.revealed .env-car-card--actions-white .env-hr-list li,
body.is-saver .env-car-card--actions-white .env-hr-list li,
body.is-saver .env-climate-reveal.revealed .env-car-card--actions-white .env-hr-list li,
html.is-saver .env-car-card--actions-white .env-hr-list li,
html.is-saver .env-climate-reveal.revealed .env-car-card--actions-white .env-hr-list li {
  color: rgba(255, 255, 255, 0.92) !important;
}

body.energy-saver .env-perf-inner.is1 :is(.env-bento-num, .env-bento-label, .env-bento-unit, .env-bento-prefix, .env-hri-pct),
body.energy-saver .env-climate-reveal.revealed.env-perf-inner.is1 :is(.env-bento-num, .env-bento-label, .env-bento-unit, .env-bento-prefix, .env-hri-pct),
body.cinematic .env-perf-inner.is1 :is(.env-bento-num, .env-bento-label, .env-bento-unit, .env-bento-prefix, .env-hri-pct),
body.cinematic .env-climate-reveal.revealed.env-perf-inner.is1 :is(.env-bento-num, .env-bento-label, .env-bento-unit, .env-bento-prefix, .env-hri-pct),
body.is-saver .env-perf-inner.is1 :is(.env-bento-num, .env-bento-label, .env-bento-unit, .env-bento-prefix, .env-hri-pct),
body.is-saver .env-climate-reveal.revealed.env-perf-inner.is1 :is(.env-bento-num, .env-bento-label, .env-bento-unit, .env-bento-prefix, .env-hri-pct),
html.is-saver .env-perf-inner.is1 :is(.env-bento-num, .env-bento-label, .env-bento-unit, .env-bento-prefix, .env-hri-pct),
html.is-saver .env-climate-reveal.revealed.env-perf-inner.is1 :is(.env-bento-num, .env-bento-label, .env-bento-unit, .env-bento-prefix, .env-hri-pct) {
  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-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;
}

body.energy-saver main :is(.env-card, .op-card, .bed-card, .gov-card, .mine-card, .product-card, .story-card, .env-takeaway, .op-takeaway, .bed-takeaway, .env-overlay-card, .env-intbox, .op-capability, .op-scale__impact, .bed-tech-block, .bed-rdcollab, .env-modal__body) :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, a) {
  color: #0c2340;
}

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;
}

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 {
  color: #ffffff !important;
  background: #f7931d !important;
}

body.energy-saver .env-zfa__item,
body.energy-saver .env-climate-reveal.revealed .env-zfa__item {
  color: #000000 !important;
}


body > .site-header .actions-divider {
  width: 1px;
  height: 26px;
  background: var(--hair-d);
  flex-shrink: 0;
}

body > .site-header .btn-download {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  background: transparent;
  color: var(--ink-d);
  border: 1px solid var(--metal-border);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 7px;
  white-space: nowrap;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

body > .site-header .btn-download:hover {
  background: var(--metal-glow);
  border-color: var(--metal);
  color: var(--metal-bright);
}

body > .site-header .btn-download:focus-visible {
  outline: 2px solid var(--metal);
  outline-offset: 3px;
}

body > .site-header .btn-download svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--metal-bright);
}

body > .site-header .menu-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 15px 0 16px;
  background: #1559a6;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

body > .site-header .menu-btn:hover {
  background: #11487f;
  box-shadow: 0 6px 20px rgba(21, 89, 166, 0.28);
}

body > .site-header .menu-btn:focus-visible {
  outline: 2px solid var(--metal);
  outline-offset: 3px;
}

body > .site-header .menu-btn-label-close {
  display: none;
}

body > .site-header .menu-btn[aria-expanded="true"] .menu-btn-label-open {
  display: none;
}

body > .site-header .menu-btn[aria-expanded="true"] .menu-btn-label-close {
  display: inline;
}

body > .site-header .menu-btn-bars {
  position: relative;
  width: 18px;
  height: 12px;
  flex-shrink: 0;
}

body > .site-header .menu-btn-bars span {
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
}

body > .site-header .menu-btn-bars span:nth-child(1) {
  top: 0;
}

body > .site-header .menu-btn-bars span:nth-child(2) {
  top: 5px;
}

body > .site-header .menu-btn-bars span:nth-child(3) {
  top: 10px;
}

body > .site-header .menu-btn[aria-expanded="true"] .menu-btn-bars span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

body > .site-header .menu-btn[aria-expanded="true"] .menu-btn-bars span:nth-child(2) {
  opacity: 0;
}

body > .site-header .menu-btn[aria-expanded="true"] .menu-btn-bars span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

body > .nav-menu {
  position: fixed;
  inset: 0;
  z-index: 1002;
  --panel: #ffffff;
  --cream: #0c2340;
  --ink-90: rgba(12, 35, 64, 0.92);
  --ink-72: rgba(12, 35, 64, 0.74);
  --ink-50: rgba(12, 35, 64, 0.52);
  --ink-38: rgba(12, 35, 64, 0.42);
  --hair: rgba(12, 35, 64, 0.12);
  --hair-soft: rgba(12, 35, 64, 0.05);
  --metal: #1e73c8;
  --metal-bright: #1fa6de;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s;
}

body > .nav-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body > .nav-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-gradient);
  z-index: 1;
}

body > .nav-menu .menu-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 clamp(20px, 4vw, 56px);
  border-bottom: 1px solid var(--hair);
  flex-shrink: 0;
}

body > .nav-menu .menu-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

body > .nav-menu .menu-logo img.dl-hzl {
  height: 36px;
  width: auto;
}

body > .nav-menu .menu-logo .dl-div {
  width: 1px;
  height: 28px;
  background: var(--hair);
}

body > .nav-menu .menu-logo img.dl-ved {
  height: 20px;
  width: auto;
}

body > .nav-menu .menu-close {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  background: #1559a6;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.2s ease;
}

body > .nav-menu .menu-close:hover {
  background: #1e73c8;
}

body > .nav-menu .menu-close:focus-visible {
  outline: 2px solid var(--metal);
  outline-offset: 3px;
}

body > .nav-menu .menu-close svg {
  width: 14px;
  height: 14px;
}

body > .nav-menu .menu-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

body > .nav-menu .menu-rail {
  width: clamp(320px, 38%, 540px);
  flex-shrink: 0;
  border-right: 1px solid var(--hair);
  padding: clamp(16px, 4vh, 48px) clamp(20px, 2.5vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  overflow-y: auto;
}

body > .nav-menu .cat {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 9px 16px;
  border-radius: 10px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s ease;
}

body > .nav-menu .cat-num {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--metal);
  width: 24px;
  flex-shrink: 0;
  transition: color 0.18s ease;
}

body > .nav-menu .cat-name {
  flex: 1;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 27px);
  line-height: 1.12;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: var(--ink-72);
  transition: color 0.18s ease;
}

body > .nav-menu .cat-arrow {
  width: 16px;
  height: 16px;
  color: var(--metal);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.18s ease;
  flex-shrink: 0;
}

body > .nav-menu .cat:hover,
body > .nav-menu .cat[aria-selected="true"] {
  background: var(--brand-gradient);
}

body > .nav-menu .cat:hover .cat-name,
body > .nav-menu .cat[aria-selected="true"] .cat-name {
  color: #fff;
}

body > .nav-menu .cat:hover .cat-num,
body > .nav-menu .cat[aria-selected="true"] .cat-num {
  color: rgba(255, 255, 255, 0.85);
}

body > .nav-menu .cat:hover .cat-arrow,
body > .nav-menu .cat[aria-selected="true"] .cat-arrow {
  color: #fff;
  opacity: 1;
  transform: translateX(0);
}

body > .nav-menu .cat:focus-visible {
  outline: 2px solid var(--metal);
  outline-offset: 2px;
}

body > .nav-menu .menu-panes {
  flex: 1;
  position: relative;
  min-width: 0;
  overflow-y: auto;
  padding: clamp(24px, 5vh, 60px) clamp(24px, 4vw, 72px);
}

body > .nav-menu .pane-back {
  display: none;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--metal-bright);
}

body > .nav-menu .pane-back svg {
  width: 14px;
  height: 14px;
}

body > .nav-menu .pane {
  display: none;
}

body > .nav-menu .pane.is-active {
  display: block;
  animation: paneIn 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes paneIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

body > .nav-menu .pane-eyebrow,
body > .nav-menu .pane-desc,
body > .nav-menu .as-desc {
  display: none;
}

body > .nav-menu .pane-title {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(22px, 2.3vw, 32px);
  font-weight: 400;
  color: #1559a6;
  line-height: 1;
  letter-spacing: 0.012em;
  margin: 0 0 26px;
}

body > .nav-menu .pane-links {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 32px;
  margin: 0;
  padding: 0;
}

body > .nav-menu .pane-links.one-col {
  grid-template-columns: 1fr;
  max-width: 640px;
}

body > .nav-menu .pane-links li a {
  display: block;
  padding: 12px 14px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--ink-d);
  transition: background 0.15s ease;
}

body > .nav-menu .pane-links li a:hover {
  background: var(--hair-soft);
}

body > .nav-menu .pane-links li a:focus-visible {
  outline: 2px solid var(--metal);
  outline-offset: -2px;
}

body > .nav-menu .pane-links li a.dl-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

body > .nav-menu .pane-links li a.dl-item .as-text {
  flex: 1;
  min-width: 0;
}

body > .nav-menu .as-label {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--ink-90);
}

body > .nav-menu .as-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-50);
}

body > .nav-menu .dl-ic {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  display: grid;
  place-items: center;
  color: var(--metal);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

body > .nav-menu .pane-links li a.dl-item:hover .dl-ic {
  background: var(--metal);
  border-color: var(--metal);
  color: #04121f;
  transform: translateY(-1px);
}

body > .nav-menu .menu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px clamp(20px, 4vw, 56px);
  border-top: 1px solid var(--hair);
  flex-shrink: 0;
}

body > .nav-menu .menu-foot-meta {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-38);
}

body > .nav-menu .menu-foot-meta strong {
  color: var(--ink-50);
  font-weight: 600;
}

body > .nav-menu .menu-foot-download {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  background: var(--brand-gradient);
  color: #fff;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  border-radius: 8px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body > .nav-menu .menu-foot-download:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

body > .nav-menu .menu-foot-download:focus-visible {
  outline: 2px solid var(--metal-bright);
  outline-offset: 3px;
}

body > .nav-menu .menu-foot-download svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 900px) {
  body > .nav-menu .menu-body {
    flex-direction: column;
  }

  body > .nav-menu .menu-rail {
    width: 100%;
    border-right: none;
    justify-content: flex-start;
    gap: 0;
    padding: 10px 14px;
  }

  body > .nav-menu .cat {
    padding: 14px 12px;
    border-bottom: 1px solid var(--hair-soft);
    border-radius: 0;
  }

  body > .nav-menu .cat-arrow {
    opacity: 0.5;
    transform: none;
    margin-left: auto;
  }

  body > .nav-menu .menu-panes {
    position: absolute;
    inset: var(--header-h) 0 0 0;
    background: var(--panel);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.36s;
    padding: 24px 20px;
  }

  body > .nav-menu.drill .menu-panes {
    transform: translateX(0);
    visibility: visible;
  }

  body > .nav-menu .pane-back {
    display: flex;
  }

  body > .nav-menu .pane-links {
    grid-template-columns: 1fr;
  }

  body > .nav-menu .menu-foot {
    display: none;
  }
}

@media (max-width: 1040px) {
  body > .site-header .mode-label {
    min-width: auto;
  }
}

@media (max-width: 768px) {
  .env-beams-section {
    padding: 0 0;
    padding-bottom: 0 !important;
    margin-bottom: 0;
  }
  body > .site-header .logo-link{
    gap: 5px !important;
  }
  body > .site-header .header-inner{
    padding-left: 10px !important;
  }
}

@media (max-width: 980px) {
  body > .site-header .mode-toggle {
    padding: 0 5px;
    gap: 0;
  }
}

@media (max-width: 880px) {
  body > .site-header .btn-download {
    display: none;
  }

  body > .site-header .actions-divider {
    display: none;
  }

  /* Keep the mode switch on EVERY screen (incl. mobile); just drop the
     long text label so it stays a compact pill that fits the header. */
  body > .site-header .mode-label {
    display: none;
  }

  body > .site-header .mode-toggle {
    padding: 0 5px;
    gap: 0;
  }
}

@media (max-width: 720px) {
  /* Keep BOTH logos visible on mobile (Vedanta + HZL) — search moves into the menu to free space */

  body > .site-header .speak-btn .speak-label {
    display: none;
  }

  body > .site-header .speak-btn {
    padding: 4px;
  }
}



@media (max-width: 600px) {
  :root {
    --header-h: 64px;
  }

  body > .site-header .logo-hzl {
    height: 32px;
  }

  body > .site-header .menu-btn {
    padding: 0 14px;
  }

  body > .site-header .menu-btn span.menu-btn-label-open,
  body > .site-header .menu-btn span.menu-btn-label-close {
    display: none;
  }

  body > .site-header .menu-btn[aria-expanded="true"] .menu-btn-label-close {
    display: none;
  }
}
body.energy-saver .env-car-card--actions-white .env-hr-list.env-hr-list--cine-dark.hs-keyaction-black li{
  color: #000000 !important;

}
/* ════════════════════════════════════════════════════════════
   Breadcrumb: in-flow (never absolute / never overlaps the hero)
   + responsive top hero section. Applies to all env-style pages
   (.env-page / .env-breadcrumb / .env-hero / .env-body-wrap),
   both the text and image-hero layouts. Loaded site-wide; only
   affects pages that actually use these classes.
   ════════════════════════════════════════════════════════════ */
.env-page { padding-top: calc(var(--header-h, 76px) + 16px) !important; }
.env-breadcrumb {
  position: static !important; top: auto !important; left: auto !important;
  width: 100%; z-index: auto; pointer-events: auto;
  background: transparent; border: none; margin-bottom: 6px;
}
.env-breadcrumb__inner {
  max-width: 1400px; margin: 0 auto; padding: 0 clamp(2rem, 8vw, 7rem);
  display: flex; flex-wrap: wrap; align-items: center;
}
/* these big top paddings only existed to clear the OLD absolute breadcrumb */
.env-body-wrap   { padding-top: 28px !important; }
.env-hero__inner { padding-top: clamp(28px, 5vh, 56px) !important; }

@media (max-width: 767px) {
  /* top hero section → items stack one below the other */
  .env-hero__inner,
  .env-hero__row { display: flex !important; flex-direction: column !important; }
  .env-hero__img-wrap { width: 100% !important; max-width: 100% !important; }
  /* breadcrumb aligns left, wraps, never overlaps */
  .env-breadcrumb__inner { padding-left: 16px !important; padding-right: 16px !important; }
  .env-body-wrap { padding-top: 18px !important; padding-bottom: 0 !important; }
}

/* ════════════════════════════════════════════════════════════
   SITE-WIDE CONSISTENCY + RESPONSIVE SAFETY-NET
   (loaded everywhere via home-header.css; rules only affect
   pages that actually use the targeted classes)
   ════════════════════════════════════════════════════════════ */

/* 1 ── Unified breadcrumb look across all families (size/weight/
        layout only — colours stay per-page so dark/light heros keep
        their theme). Makes every breadcrumb visually consistent. */
.env-breadcrumb__item, .ic-bc-item, .bed-breadcrumb__item, .bm-breadcrumb__item, .isc-bc-item {
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0 !important;
  text-transform: uppercase !important; text-decoration: none !important;
  white-space: normal; transition: color .2s ease;   /* long titles wrap instead of being cut off */
}
.env-breadcrumb__sep, .ic-bc-sep, .bed-breadcrumb__sep, .bm-breadcrumb__sep, .isc-bc-sep {
  font-size: 11px !important; padding: 0 12px !important; user-select: none;
}
.env-breadcrumb__inner, .ic-bc-inner, .bed-breadcrumb__inner, .bm-breadcrumb__inner, .isc-bc-inner {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important;
}

/* 2 ── Kill horizontal scroll on small screens + stack 2-col sections */
@media (max-width: 767px) {
  html, body { overflow-x: hidden !important; max-width: 100%; }
  /* media + tables never exceed the viewport */
  img, svg, video, canvas, iframe, table { max-width: 100% !important; height: auto; }

  /* breadcrumbs wrap & pad on mobile */
  .env-breadcrumb__inner, .ic-bc-inner, .bed-breadcrumb__inner, .bm-breadcrumb__inner, .isc-bc-inner {
    padding-left: 16px !important; padding-right: 16px !important;
  }

  /* every known 2-column hero/content grid → single stacked column */
  .ic-hero__inner, .bm-two-col, .env-two-col, .env-green-two-col, .env-climate-two-col,
  .env-proj-cols, .sp-cols, .cl-cols, .env-stat-row, .ei-sev-row {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
  }
  /* image halves of split heroes go full width when stacked */
  .ic-hero__img-wrap, .bm-two-col img, .env-two-col img { width: 100% !important; max-width: 100% !important; }
}

/* ── Common breadcrumb COLOURS + font (all families, ref: environmental/index.html)
   Makes every breadcrumb render identically regardless of page. Dark-hero default;
   light overrides under body.energy-saver. ── */
.env-breadcrumb__item, .ic-bc-item, .bed-breadcrumb__item, .bm-breadcrumb__item, .isc-bc-item {
  font-family: var(--sans, "Mulish", system-ui, -apple-system, sans-serif) !important;
  color: rgba(255,255,255,0.45) !important;
}
.env-breadcrumb__item:hover, .ic-bc-item:hover, .bed-breadcrumb__item:hover,
.bm-breadcrumb__item:hover, .isc-bc-item:hover { color: #7fb942 !important; }

.env-breadcrumb__item--active, .ic-bc-item--active, .bed-breadcrumb__item--active,
.bm-breadcrumb__item--active, .isc-bc-item--active {
  color: rgba(255,255,255,0.75) !important; pointer-events: none;
}
.env-breadcrumb__sep, .ic-bc-sep, .bed-breadcrumb__sep, .bm-breadcrumb__sep, .isc-bc-sep {
  color: rgba(255,255,255,0.25) !important;
}

/* light / cinematic hero variant */
body.energy-saver .env-breadcrumb__item, body.energy-saver .ic-bc-item, body.energy-saver .bed-breadcrumb__item,
body.energy-saver .bm-breadcrumb__item, body.energy-saver .isc-bc-item { color: rgba(12,35,64,0.5) !important; }
body.energy-saver .env-breadcrumb__item:hover, body.energy-saver .ic-bc-item:hover, body.energy-saver .bed-breadcrumb__item:hover,
body.energy-saver .bm-breadcrumb__item:hover, body.energy-saver .isc-bc-item:hover { color: #1559a6 !important; }
body.energy-saver .env-breadcrumb__item--active, body.energy-saver .ic-bc-item--active, body.energy-saver .bed-breadcrumb__item--active,
body.energy-saver .bm-breadcrumb__item--active, body.energy-saver .isc-bc-item--active { color: #0C2340 !important; }
body.energy-saver .env-breadcrumb__sep, body.energy-saver .ic-bc-sep, body.energy-saver .bed-breadcrumb__sep,
body.energy-saver .bm-breadcrumb__sep, body.energy-saver .isc-bc-sep { color: rgba(12,35,64,0.3) !important; }

/* ════════════════════════════════════════════════════════════
   Board (bod-) breadcrumb — same in-flow treatment as env-breadcrumb
   (was position:absolute + white-space:nowrap → clipped on mobile).
   Colours kept as-is (board uses its own .is-saver light theme).
   ════════════════════════════════════════════════════════════ */
.bod-page { padding-top: calc(var(--header-h, 76px) + 16px) !important; }
.bod-breadcrumb {
  position: static !important; top: auto !important; left: auto !important;
  width: 100%; z-index: auto; pointer-events: auto;
}
.bod-breadcrumb__inner {
  max-width: 1440px; margin: 0 auto; padding: 0 clamp(2rem, 8vw, 7rem);
  display: flex; flex-wrap: wrap; align-items: center; pointer-events: auto;
}
.bod-breadcrumb__item { white-space: normal !important; }   /* wrap, never cut */
.bod-hero__inner { padding-top: clamp(28px, 5vh, 56px) !important; }

/* ════════════════════════════════════════════════════════════
   Hero TOP SECTION on mobile (<=767): stack one-below-other,
   order = text → takeaway → image, with a gap. Fixes overlap and
   the "lone image with huge empty space" (kills oversized min-height).
   Covers env-hero + bod-hero + any env-hero__img-wrap--<page> variant.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .env-hero__inner, .bod-hero__inner {
    display: flex !important; flex-direction: column !important; gap: 22px !important;
  }
  .env-banner-text, .bod-banner-text { order: 0 !important; position: static !important; top: auto !important; max-width: 100% !important; }
  .env-takeaway-outer, .env-takeaway-wrap { order: 1 !important; position: relative !important; width: 100% !important; margin: 0 !important; }
  .env-hero__img-wrap, [class*="env-hero__img-wrap--"], .bod-hero__img-wrap {
    order: 2 !important; position: relative !important;
    width: 100% !important; max-width: 100% !important;
    min-height: 0 !important; height: auto !important; aspect-ratio: 16 / 10;
    margin: 0 !important; align-self: start !important;
  }
  .env-hero__img-wrap img, .env-hero__img-wrap picture, .env-hero__video,
  .bod-hero__img-wrap img, .bod-hero__img {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important; max-height: none !important;
    object-fit: cover !important;
  }
}

/* ════════════════════════════════════════════════════════════
   Hero headline consistency — give EVERY hero headline the same
   blue→green gradient text (env/mines/product/governance were plain
   white; op/stories/sustainability already had it). One rule = same
   look on all pages, in both dark and light modes.
   ════════════════════════════════════════════════════════════ */
.env-banner-text__main,
.op-banner-text__main,
.bed-banner-text__main,
.bod-banner-text__main,
.ic-title {
  background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ── env-meta dividers: dark in light/cinematic mode (white on dark hero,
   navy on the light cinematic background so they stay visible) ── */
body.energy-saver .env-meta-vsep,
body.energy-saver .env-meta-vsep--full,
body.energy-saver .env-meta-divider {
  background: rgba(12, 35, 64, 0.25) !important;
}

/* ── Environmental-performance bento slider in cinematic/light mode:
   keep the cards dark navy + numbers/labels white (like social pages) so
   they stay readable on the light background. Green accents are backgrounds,
   so they're untouched and remain green. ── */
body.energy-saver .env-bento-card { background: #0c2340; }
body.energy-saver .env-bento-card .env-bento-num,
body.energy-saver .env-bento-card .env-bento-num .env-counter,
body.energy-saver .env-bento-card .env-bento-label,
body.energy-saver .env-bento-card .env-bento-unit,
body.energy-saver .env-bento-card .env-bento-prefix {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── Bento slider nav (dots + arrows) in cinematic/light mode: dark so they're
   visible on the light background (they sit on the light wrap, not on the dark
   cards). Active dot + hover stay brand-blue. ── */
body.energy-saver .env-bento-dot { background: rgba(12,35,64,0.20); }
body.energy-saver .env-bento-dot.active { background: #0069aa; }
body.energy-saver .env-bento-arrow {
  background: rgba(12,35,64,0.05);
  border-color: rgba(12,35,64,0.20);
  color: #0c2340;
}
body.energy-saver .env-bento-arrow:hover {
  background: rgba(0,105,170,0.14);
  border-color: #0069aa;
}

/* ════════════════════════════════════════════════════════════
   DARK HEADER + MENU in energy-saver (dark) mode
   Header/menu were white in all modes; in dark mode make the bar
   #061525 with white text/icons, and the slide-out menu to match.
   ════════════════════════════════════════════════════════════ */
body.cinematic > .site-header {
  background: #061525 !important;
  border-bottom-color: rgba(255,255,255,0.12) !important;
}
body.cinematic > .site-header .logo-divider { background: rgba(255,255,255,0.22) !important; }

/* header pill buttons → dark surface, white text/icons */
body.cinematic > .site-header .search-btn,
body.cinematic > .site-header .speak-btn,
body.cinematic > .site-header .mode-toggle {
  background: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.22) !important;
}
body.cinematic > .site-header .search-btn svg { color: #ffffff !important; }
body.cinematic > .site-header .mode-label,
body.cinematic > .site-header .speak-label,
body.cinematic > .site-header .menu-btn-label-open,
body.cinematic > .site-header .menu-btn-label-close { color: #ffffff !important; }
body.cinematic > .site-header .menu-btn-bars span { background: #ffffff !important; }

/* slide-out menu → dark panel + white text (it's themed via these vars) */
body.cinematic > .nav-menu {
  --panel: #061525 !important;
  --cream: #ffffff !important;
  --ink-90: rgba(255,255,255,0.92) !important;
  --ink-72: rgba(255,255,255,0.72) !important;
  --ink-50: rgba(255,255,255,0.55) !important;
  --ink-38: rgba(255,255,255,0.42) !important;
  --hair: rgba(255,255,255,0.14) !important;
  --hair-soft: rgba(255,255,255,0.06) !important;
}
body.cinematic > .nav-menu,
body.cinematic > .nav-menu .menu-topbar,
body.cinematic > .nav-menu .menu-body,
body.cinematic > .nav-menu .menu-foot { background: #061525 !important; }

/* Download-PDF button in the header: white text + icon + lighter border in dark mode */
body.cinematic > .site-header .btn-download {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.28) !important;
}
body.cinematic > .site-header .btn-download svg { color: #ffffff !important; }

/* ════════════════════════════════════════════════════════════
   DARK FOOTER in energy-saver (dark) mode — matches the dark header.
   Light footer (#fcfdfe) → #061525 with light text; green accents kept.
   Cinematic (light) mode keeps the light footer.
   ════════════════════════════════════════════════════════════ */
body.cinematic .site-footer {
  background:
    linear-gradient(120deg, rgba(127,185,66,0.10) 0%, rgba(24,176,201,0.08) 38%, rgba(30,115,200,0.08) 68%, rgba(107,79,176,0.14) 100%),
    #061525 !important;
}
body.cinematic .site-footer .foot-tagline { color: #8cc63f !important; }
body.cinematic .site-footer .foot-about   { color: rgba(255,255,255,0.66) !important; }
body.cinematic .site-footer .foot-h        { color: rgba(255,255,255,0.55) !important; }
body.cinematic .site-footer .foot-link     { color: rgba(255,255,255,0.74) !important; }
body.cinematic .site-footer .foot-link:hover { color: #5ac6ee !important; }
body.cinematic .site-footer .foot-logos .f-div { background: rgba(255,255,255,0.20) !important; }
body.cinematic .site-footer .foot-soc { border-color: rgba(255,255,255,0.22) !important; color: rgba(255,255,255,0.80) !important; }
body.cinematic .site-footer .foot-pill { color: #8cc63f !important; border-color: rgba(127,185,66,0.55) !important; }

/* ════════════════════════════════════════════════════════════
   HZL wordmark → white variant in dark (Energy Saver) mode for the
   header, nav-menu and footer. Cinematic keeps the default wordmark.
   content:url() path is relative to THIS stylesheet (shared/), so it
   resolves correctly at any page depth.
   ════════════════════════════════════════════════════════════ */
body.cinematic .logo-hzl,
body.cinematic .dl-hzl,
body.cinematic .f-hzl,
body.cinematic .ft__logo--hzl {
  content: url("../assets/lighthindustan-logo-white.svg");
}

/* ════════════════════════════════════════════════════════════
   Floating Quick Links toolbar (replaces the old .ql-trigger /
   .ql-panel). Fixed bottom-left; hover the main green button to
   reveal the nested links; click it to scroll back to top.
   ════════════════════════════════════════════════════════════ */
.ql-trigger, .ql-panel { display: none !important; }   /* old quick-links removed */

.toolbar {
  position: fixed;
  left: 1.25rem;
  bottom: calc(1.25rem + 58px + 0.75rem);
  z-index: 500;
}
/* Cinematic shows the a11y widget below the toolbar, so the toolbar stays raised
   (base rule). Energy Saver hides the widget, so drop the toolbar to the bottom. */
body.cinematic .toolbar { bottom: 1.25rem; }
.toolbar ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 5px;
}
.toolbar ul li {
  display: table-row;
  margin-bottom: 5px;
  position: relative;
}
.toolbar li a {
  display: flex;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: #66b821;
  padding: 5px;
  margin: 5px 0 0;
  float: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(7, 23, 43, 0.18);
}
.toolbar li a span {
  display: none;
  font-size: 12px;
  color: #0b4092;
  line-height: 18px;
  font-family: "proxima-nova", "Proxima Nova", Arial, sans-serif;
  font-weight: 700;
  white-space: nowrap;
}
.toolbar li:hover a {
  transition: ease all 0.5s;
  width: auto;
  border-radius: 25px;
  padding: 5px 15px;
}
.toolbar li:hover a span {
  display: block;
  padding-right: 10px;
}
.toolbar li a img,
.toolbar li a svg {
  margin: auto;
  flex-shrink: 0;
}
.quickli ul { display: none; }
.quickli:hover ul { display: block; }
.quickli:hover ul li span { display: none; }
.quickli:hover ul li a {
  display: flex;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: #66b821;
  padding: 5px;
  margin: 5px 0 0;
  float: left;
}
.quickli:hover ul li:hover a {
  transition: ease all 0.5s;
  width: auto;
  border-radius: 25px;
  padding: 5px 15px;
}
.quickli:hover ul li:hover a span {
  display: block;
  padding-right: 10px;
}

/* Main Quick Links button (.backtopbtn) styled like the previous .ql-trigger:
   round 58px gradient circle with white border + shadow. It still expands to a
   pill on hover to reveal the "QUICK LINKS" label. */
.toolbar .backtopbtn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0060a3 0%, #7fb942 100%);
  border: 3px solid #ffffff;
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 96, 163, 0.45);
  padding: 0;
  justify-content: center;
}
.toolbar .backtopbtn span { color: #ffffff; }
.toolbar li:hover .backtopbtn {
  width: auto;
  border-radius: 29px;
  padding: 0 18px;
  gap: 8px;
}

/* Green-hosting badge (footer). Shown only in Energy Saver (light) mode;
   hidden in Cinematic. Lives here (not in site-footer.css) because some
   pages — performance.html, investment-case.html, heres-the-scoop.html,
   index1.html — don't load site-footer.css. */
.mt-15 { margin-top: 15px; }
body.cinematic .foot-green-badge { display: none !important; }

/* Cinematic (dark) mode: hide the accessibility widget.
   The Read-aloud button stays visible in BOTH modes on all inside pages
   (it is hidden only on the homepage, index2.html — see that file). */
body.cinematic .a11y-widget { display: none !important; }

/* Key Takeaway lists: items always left-aligned (never centred) on every page */
.bed-takeaway__list li,
.env-takeaway__list li,
.op-takeaway__list li,
.bed-takeaway li,
.env-takeaway li,
.op-takeaway li { text-align: left !important; }

/* ════════════════════════════════════════════════════════════════
   BED-consistent responsive for the shared env-* family
   (applies across environmental, mines, social, governance,
    operational-performance, product, sustainability — all load this file)
   ════════════════════════════════════════════════════════════════ */

/* Section navigator grid → 2 cols at ≤1100px, single col at ≤560px (like BED) */
@media (max-width: 1100px) { .env-secnav__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px)  { .env-secnav__grid { grid-template-columns: 1fr !important; } }

/* Key Takeaway box → tighter padding on mobile (matches BED bed-takeaway) */
@media (max-width: 768px) { .env-takeaway { padding: 20px 22px !important; } }

/* Hero top section (title + icon + headline) always LEFT-aligned on small
   screens — never centred — across all env-* pages (mines, social, etc.) */
@media (max-width: 900px) {
  .env-hero__inner      { align-items: flex-start !important; text-align: left !important; }
  .env-banner-text      { align-items: flex-start !important; }
  .env-banner-text__row { justify-content: flex-start !important; }
}

/* Key Takeaway divider line: match the reduced mobile padding (20px 22px above)
   so the green line ends at the box edge instead of overhanging it. */
@media (max-width: 768px) {
  .env-takeaway__header::after { left: -22px !important; right: -22px !important; }
}

/* ── Quick-links toolbar buttons sized to match the a11y-widget (58px desktop / 46px mobile) ── */
.toolbar li a,
.quickli:hover ul li a { width: 58px; height: 58px; border-radius: 50%; }
@media (max-width: 768px) {
  .toolbar li a,
  .quickli:hover ul li a { width: 46px; height: 46px; }
}

/* Toolbar button content sized like the a11y-widget icon (the 40px img otherwise overflows the round button) */
.toolbar li a,
.quickli:hover ul li a { box-sizing: border-box; }
.toolbar li a img,
.quickli:hover ul li a img { width: 34px; height: 34px; }
@media (max-width: 768px) {
  .toolbar li a img,
  .quickli:hover ul li a img { width: 28px; height: 28px; }
}

/* ── Mobile header tweaks: search moves into the menu (next to Close); menu logos removed ── */
/* Search button inside the menu top bar — hidden on desktop, shown on mobile */
body > .nav-menu .menu-search-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: var(--cream);
  border: 1px solid var(--hair);
  background: transparent;
  flex: none;
  cursor: pointer;
}
body > .nav-menu .menu-search-btn svg { width: 18px; height: 18px; }
body > .nav-menu .menu-search-btn:hover { border-color: var(--metal, #1e73c8); color: var(--metal, #1e73c8); }

@media (max-width: 720px) {
  /* Search button: out of the header, into the menu (right of Close) */
  body > .site-header .search-btn { display: none; }
  body > .nav-menu .menu-search-btn { display: inline-flex; }
  /* Remove the duplicate logos inside the menu (the header already shows both) */
  body > .nav-menu .menu-logo { display: none; }
  /* Group Close + Search on the right of the menu top bar */
  body > .nav-menu .menu-topbar { justify-content: flex-end; gap: 12px; }
}

/* ── Mobile header logo sizes (≤767px): shrink both logos so they + the menu button fit on screen ── */
@media (max-width: 767px) {
  body > .site-header .logo-hzl     { height: 22px; }
  body > .site-header .logo-vedanta { height: 18px; }
}