/* ===================================================================
   ESG OVERVIEW — page-specific styles
   =================================================================== */

/* ===================================================================
   SECTION 1 — Hero
   =================================================================== */
.esg-hero { background: #edf5ec; }
.esg-hero .src-hero__text { color: var(--brand); }

/* ===================================================================
   SECTION 2 — CAMS-BRSR Journey
   =================================================================== */
.esg-brsr {
  background: #f5f9f4;
  border-top: 1px solid #dce8da;
}
.esg-brsr__wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px clamp(20px, 4vw, 56px);
}
.esg-brsr__diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.esg-brsr__label--top {
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.5;
  color: var(--ink);
  text-align: center;
  max-width: 220px;
  margin-bottom: 12px;
}
.esg-brsr__mid {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.esg-brsr__label--left,
.esg-brsr__label--right {
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 200px;
}
.esg-brsr__label--left { text-align: right; }
.esg-brsr__label--right { text-align: left; }
.esg-brsr__svg {
  width: clamp(200px, 28vw, 340px);
  height: auto;
  display: block;
  flex-shrink: 0;
}
.esg-brsr__svg-mobile {
  display: none;
  width: 100%;
  height: auto;
}

/* ===================================================================
   SECTION 3 — ESG Ratings + BRSR Roadmap (2-col)
   =================================================================== */
.esg-content {
  background: #ffffff;
}
.esg-content__wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 72px clamp(20px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.esg-content__heading {
  font-size: 25px;
  font-weight: 700;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.esg-content__p {
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.78;
  color: var(--ink);
  margin-bottom: 16px;
}
.esg-content__p:last-child { margin-bottom: 0; }
.esg-ratings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
  margin-top: 28px;
}
.esg-ratings-grid__item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.esg-ratings-grid__star {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.esg-ratings-grid__label {
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.45;
  color: var(--azure);
  font-weight: 500;
}
.esg-roadmap__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.esg-roadmap__list li {
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.72;
  color: var(--ink);
  padding: 10px 0 10px 20px;
  border-bottom: 1px solid #e8eef5;
  position: relative;
}
.esg-roadmap__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--azure);
}
.esg-roadmap__list li:last-child { border-bottom: none; }

/* ===================================================================
   SECTION 4 — BRSR Core Reporting (full-width)
   =================================================================== */
.esg-brsr-core {
  background: #f7f9fc;
  border-top: 1px solid #e2eaf3;
}
.esg-brsr-core__wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 72px clamp(20px, 4vw, 56px);
}
.esg-brsr-core__heading {
  font-size: 25px;
  font-weight: 700;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
}
.esg-brsr-core__p {
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.78;
  color: var(--ink);
  margin-bottom: 48px;
}
.esg-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 48px;
}
.esg-icon-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.esg-icon-item__img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}
.esg-icon-item__label {
  font-size: clamp(13px, 0.95vw, 14px);
  line-height: 1.55;
  color: var(--ink);
  padding-top: 4px;
}

/* ===================================================================
   SECTION 5 — ESG Initiatives
   =================================================================== */
.esg-init {
  background: #ffffff;
}
.esg-init__wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 72px clamp(20px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.esg-init__heading {
  font-size: 25px;
  font-weight: 700;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 24px;
}
.esg-init__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: init-counter;
}
.esg-init__list li {
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.72;
  color: var(--ink);
  padding: 12px 0 12px 36px;
  border-bottom: 1px solid #e8eef5;
  position: relative;
  counter-increment: init-counter;
}
.esg-init__list li::before {
  content: counter(init-counter) ".";
  position: absolute;
  left: 0;
  top: 12px;
  font-weight: 700;
  color: var(--azure);
  font-size: clamp(13px, 0.95vw, 14px);
}
.esg-init__list li:last-child { border-bottom: none; }
.esg-init__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 900px) {
  .esg-content__wrap,
  .esg-init__wrap { grid-template-columns: 1fr; }
  .esg-icon-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .esg-brsr__diagram--desktop { display: none; }
  .esg-brsr__svg-mobile { display: block; }
  .esg-icon-grid { grid-template-columns: 1fr; }
}

/* ===== Tablet (max 1024px) ===== */
@media (max-width: 1024px) {
  .src-hero__title { font-size: 32px; }
  .esg-content__heading, .esg-brsr-core__heading, .esg-init__heading { font-size: 20px; }
}

/* ===== Mobile (max 768px) ===== */
@media (max-width: 768px) {
  .src-hero__wrap { padding: 0 20px 28px; margin-top: -30px; }
  .src-hero__inner { padding-top: 24px; }
  .src-hero__breadcrumb { margin-bottom: 16px; font-size: 11px; }
  .src-hero__title { font-size: 24px; line-height: 1.25; }
  .src-hero__eye-label { font-size: 12px; }
  .esg-brsr__wrap { padding: 28px 20px; }
  .esg-brsr__mid { gap: 16px; flex-direction: column; }
  .esg-brsr__label--left, .esg-brsr__label--right { text-align: center; max-width: 100%; font-size: 13px; }
  .esg-brsr__diagram--desktop { display: none; }
  .esg-brsr__svg-mobile { display: block; }
  .esg-content__wrap { padding: 28px 20px; grid-template-columns: 1fr; gap: 28px; }
  .esg-content__heading { font-size: 18px; margin-bottom: 12px; }
  .esg-content__p { font-size: 13px; }
  .esg-ratings-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
  .esg-ratings-grid__star { width: 40px; height: 40px; }
  .esg-roadmap__list li { font-size: 13px; padding: 8px 0 8px 18px; }
  .esg-brsr-core__wrap { padding: 28px 20px; }
  .esg-brsr-core__heading { font-size: 18px; margin-bottom: 12px; }
  .esg-brsr-core__p { font-size: 13px; margin-bottom: 24px; }
  .esg-icon-grid { grid-template-columns: 1fr; gap: 20px; }
  .esg-icon-item__img { width: 40px; height: 40px; }
  .esg-icon-item__label { font-size: 13px; }
  .esg-init__wrap { padding: 28px 20px; grid-template-columns: 1fr; gap: 24px; }
  .esg-init__heading { font-size: 18px; margin-bottom: 16px; }
  .esg-init__list li { font-size: 13px; padding: 8px 0 8px 28px; }
}

/* ===== Small Mobile (max 480px) ===== */
@media (max-width: 480px) {
  .src-hero__title { font-size: 20px; }
  .esg-content__heading, .esg-brsr-core__heading, .esg-init__heading { font-size: 16px; }
}