/* ============================================
   CCS Group — Sustainability Page
   ============================================ */

/* ---------- HERO (override) ---------- */
.esg-hero { height: 460px; background: #1A3A2A; }
.esg-hero .hero__overlay {
  background: linear-gradient(to top, #0A1628e8 0%, #0A1628aa 45%, #0A162830 100%);
}
.esg-hero .hero__title { font-size: 34px; }
.esg-hero .hero__sub { font-size: 13px; }
.esg-hero .hero__bg img { object-position: center center; }

/* ---------- CHAIRMAN QUOTE ---------- */
.quote-section {
  display: flex; flex-direction: column; gap: 20px;
  padding: 48px var(--pad); background: var(--navy-light);
}
.quote-section__text {
  font-family: var(--serif); font-size: 22px; line-height: 1.35; max-width: 310px;
  order: 1;
}
.quote-section__text-ext { display: none; }
.quote-section__attr { display: flex; flex-direction: column; gap: 3px; order: 2; }
.quote-section__line { width: 40px; height: 2px; background: var(--gold); order: 0; }
.quote-section__line--desktop { display: none; }
.quote-section__name { font-size: 12px; font-weight: 600; }
.quote-section__title { font-size: 11px; color: var(--muted); }
.quote-title-desktop { display: none; }
.quote-title-mobile { display: inline; }

/* ---------- ESG FRAMEWORK ---------- */
.framework { padding: 48px var(--pad); background: var(--navy); }
.framework .section-tag { padding-bottom: 24px; }
.framework__pillars { display: flex; flex-direction: column; }
.framework__pillar {
  padding: 24px 0;
  border-bottom: 1px solid rgba(245,240,232,.06);
}
.framework__pillar:last-child { border-bottom: none; }
/* Mobile: letter + title inline */
.framework__big-letter { display: none; }
.framework__pillar-name { display: none; }
.framework__bar { display: none; }
.fw-desc-desktop { display: none; }
.fw-desc-mobile { display: inline; }
.framework__pillar-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.framework__letter { font-family: var(--serif); font-size: 32px; }
.framework__letter--e { color: #4A9B6F; }
.framework__letter--s { color: var(--gold); }
.framework__letter--g { color: #6B9EC9; }
.framework__pillar-title { font-size: 15px; font-weight: 600; }
.framework__pillar-desc { font-size: 12px; color: var(--muted); line-height: 1.6; max-width: 320px; }

/* ---------- ENV KPIs ---------- */
.env-section { padding: 48px var(--pad); background: var(--navy); }
.env-section__left { margin-bottom: 32px; }
.section-tag--green .section-tag__line { background: #4A9B6F; }
.section-tag--green .section-tag__text { color: #4A9B6F; }
.section-tag--gold .section-tag__line { background: var(--gold); }
.section-tag--gold .section-tag__text { color: var(--gold); }
.section-tag--blue .section-tag__line { background: #6B9EC9; }
.section-tag--blue .section-tag__text { color: #6B9EC9; }
.env-section__title {
  font-family: var(--serif); font-size: 26px; line-height: 1.2; margin: 16px 0 0;
}
.env-section__desc { display: none; }
.env-section__kpis { display: flex; flex-direction: column; gap: 24px; }
.kpi__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.kpi__label { font-size: 12px; font-weight: 500; }
.kpi__pct { font-size: 11px; color: var(--muted); }
.kpi__bar { width: 100%; height: 6px; background: var(--navy-card); border-radius: 3px; overflow: hidden; }
.kpi__fill { height: 100%; border-radius: 3px; transition: width 1s ease; }
.kpi__fill--green { background: #4A9B6F; }
.kpi__fill--gold { background: var(--gold); }

/* ---------- SOCIAL ---------- */
.social-section { padding: 48px var(--pad); background: var(--navy-light); }
.social-section__title {
  font-family: var(--serif); font-size: 26px; line-height: 1.2; margin: 24px 0;
}
.social-section__stats { display: flex; }
.social-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 20px 0;
  border-right: 1px solid rgba(201,169,110,.13);
}
.social-stat:last-child { border-right: none; }
.social-stat__val { font-family: var(--serif); font-size: 26px; }
.social-stat__label { font-size: 8px; font-weight: 600; letter-spacing: 1.5px; color: var(--gold); }

/* ---------- GOVERNANCE ---------- */
.gov-section { padding: 48px var(--pad); background: var(--navy); }
.gov-section__title {
  font-family: var(--serif); font-size: 26px; line-height: 1.2; margin: 24px 0;
}
.gov-section__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gov-card {
  padding: 20px 16px; background: var(--navy-light);
  border: 1px solid rgba(107,158,201,.13);
  display: flex; flex-direction: column; gap: 4px;
}
.gov-card__val { font-family: var(--serif); font-size: 24px; }
.gov-card__label { font-size: 10px; color: var(--muted); }

/* ---------- REPORTS ---------- */
.reports-section { padding: 48px var(--pad); background: var(--navy-light); }
.reports-section__title {
  font-family: var(--serif); font-size: 26px; line-height: 1.2; margin: 20px 0;
}
.reports-section__cards { display: flex; flex-direction: column; gap: 16px; }
.report-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px; background: var(--navy-card);
  border: 1px solid rgba(201,169,110,.13);
}
.report-card__info { display: flex; flex-direction: column; gap: 4px; }
.report-card__year { font-size: 9px; font-weight: 600; letter-spacing: 1.5px; color: var(--gold); }
.report-card__name { font-size: 14px; font-weight: 600; }
.report-card__desc { font-size: 11px; color: var(--muted); }
.report-card__btn { font-size: 11px; font-weight: 600; color: var(--gold); white-space: nowrap; }

/* ---------- ROADMAP ---------- */
.roadmap-section { padding: 48px var(--pad); background: var(--navy); }
.roadmap-section__title {
  font-family: var(--serif); font-size: 26px; line-height: 1.2;
  padding-bottom: 32px; margin-bottom: 0;
}
.roadmap__items { display: flex; flex-direction: column; }
.roadmap__item {
  display: flex; gap: 20px; padding: 24px 0;
  border-bottom: 1px solid rgba(245,240,232,.06);
}
.roadmap__item:first-child { padding-top: 0; }
.roadmap__item:last-child { border-bottom: none; }
.roadmap__year-col {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 52px; flex-shrink: 0;
}
.roadmap__year { font-family: var(--serif); font-size: 16px; color: var(--gold); }
.roadmap__year--final { color: var(--cream); }
.roadmap__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.roadmap__dot--dim { background: rgba(245,240,232,.13); }
.roadmap__text { font-size: 12px; color: var(--muted); line-height: 1.6; max-width: 250px; }

/* ---------- ESG CTA (override) ---------- */
.esg-cta .cta-strip__title { font-size: 26px; }

/* ==========================================
   DESKTOP (1024px+)
   ========================================== */
@media (min-width: 1024px) {
  /* Hero */
  .esg-hero { height: 560px; background: #1A3A2A; }
  .esg-hero .hero__overlay {
    background: linear-gradient(to right, #0A1628e0 0%, #0A162840 45%, #0A162800 70%);
  }
  .esg-hero .hero__title { font-size: 64px; max-width: 640px; }
  .esg-hero .hero__sub { font-size: 15px; max-width: 520px; }
  .esg-hero .hero__content { padding: 0 var(--pad-desk) 80px; gap: 20px; max-width: 760px; }

  /* Quote — 2 columns */
  .quote-section {
    flex-direction: row; align-items: center; gap: 80px;
    padding: 72px var(--pad-desk);
  }
  .quote-section > .quote-section__line { display: none; }
  .quote-section__line--desktop { display: block !important; }
  .quote-section__attr { width: 280px; flex-shrink: 0; gap: 16px; order: -1; }
  .quote-section__text { order: 0; }
  .quote-section__line { width: 48px; height: 3px; }
  .quote-section__name { font-size: 14px; }
  .quote-section__title { font-size: 12px; line-height: 1.6; }
  .quote-title-desktop { display: inline; }
  .quote-title-mobile { display: none; }
  .quote-section__text { font-size: 26px; line-height: 1.45; max-width: 820px; }
  .quote-section__text-ext { display: inline; }

  /* Framework — 3 columns (desktop design) */
  .framework { padding: var(--pad-desk); }
  .framework .section-tag { padding-bottom: 48px; }
  .framework__pillars {
    flex-direction: row; gap: 1px;
    background: rgba(245,240,232,.03);
  }
  .framework__pillar {
    flex: 1; padding: 40px; border-bottom: none;
    background: var(--navy); gap: 20px;
    display: flex; flex-direction: column;
  }
  /* Hide mobile head, show desktop elements */
  .framework__pillar-head { display: none; }
  .framework__big-letter { display: block; font-family: var(--serif); font-size: 52px; }
  .framework__big-letter--e { color: rgba(74,155,111,.2); }
  .framework__big-letter--s { color: rgba(201,169,110,.2); }
  .framework__big-letter--g { color: rgba(107,158,201,.2); }
  .framework__pillar-name { display: block; font-family: var(--serif); font-size: 28px; }
  .framework__pillar-desc { font-size: 13px; line-height: 1.7; max-width: 340px; }
  .fw-desc-desktop { display: inline; }
  .fw-desc-mobile { display: none; }
  .framework__bar { display: block; width: 40px; height: 2px; }
  .framework__bar--e { background: #4A9B6F; }
  .framework__bar--s { background: var(--gold); }
  .framework__bar--g { background: #6B9EC9; }

  /* Env KPIs — left title + right KPIs (2-col) */
  .env-section {
    padding: var(--pad-desk); display: flex; gap: 80px;
    background: var(--navy-light);
  }
  .env-section__left { width: 320px; flex-shrink: 0; margin-bottom: 0; display: flex; flex-direction: column; gap: 16px; }
  .env-section__title { font-size: 36px; max-width: 300px; margin: 0; }
  .env-section__desc { display: block; font-size: 13px; color: var(--muted); line-height: 1.7; max-width: 300px; margin: 0; }
  .env-section__kpis { gap: 28px; }
  .kpi__header { margin-bottom: 12px; }
  .kpi__label { font-size: 14px; }
  .kpi__pct { font-size: 13px; }
  .env-section__kpis { flex: 1; gap: 28px; }

  /* Social + Governance — side by side with 1px gap */
  .socgov-wrapper {
    display: flex; gap: 1px;
    background: rgba(245,240,232,.03);
  }
  .social-section {
    flex: 1; padding: 72px var(--pad-desk);
    background: var(--navy);
  }
  .social-section__title { font-size: 36px; }
  .social-stat__val { font-size: 32px; }
  .social-section__stats { gap: 32px; }

  .gov-section {
    flex: 1; padding: 72px var(--pad-desk);
    background: var(--navy-light);
  }
  .gov-section__title { font-size: 36px; }
  .gov-section__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .gov-card { padding: 24px 20px; background: var(--navy-card); }
  .gov-card__val { font-size: 28px; }

  /* Reports */
  .reports-section { padding: var(--pad-desk); }
  .reports-section__title { font-size: 40px; margin: 24px 0 40px; }
  .reports-section__cards { flex-direction: row; gap: 20px; }
  .report-card { flex: 1; padding: 32px 40px; }
  .report-card__name { font-size: 16px; }
  .report-card__btn {
    padding: 12px 24px; border: 1px solid rgba(201,169,110,.4);
    white-space: nowrap;
  }

  /* Roadmap — horizontal 4 columns */
  .roadmap-section { padding: var(--pad-desk); background: var(--navy-light); }
  .roadmap-section__title { font-size: 44px; padding-bottom: 48px; }
  .roadmap__items {
    flex-direction: row; gap: 0;
    position: relative; padding-top: 20px;
  }
  .roadmap__items::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 2px; background: rgba(201,169,110,.13);
  }
  .roadmap__items::after {
    content: ''; position: absolute; top: 0; left: 0;
    width: 30%; height: 2px; background: var(--gold);
  }
  .roadmap__item {
    flex: 1; flex-direction: column; gap: 12px;
    padding: 0 20px 0 0; border-bottom: none;
    border-right: 1px solid rgba(245,240,232,.03);
  }
  .roadmap__item:first-child { padding-top: 0; }
  .roadmap__item:last-child { border-right: none; padding-right: 0; padding-left: 20px; }
  .roadmap__year-col { flex-direction: column; width: auto; gap: 12px; align-items: flex-start; }
  .roadmap__year { font-size: 24px; }
  .roadmap__dot { width: 10px; height: 10px; }
  .roadmap__text { max-width: 260px; font-size: 13px; line-height: 1.6; }

  /* CTA */
  .esg-cta { padding: 72px var(--pad-desk); }
  .esg-cta .cta-strip__title { font-size: 44px; max-width: 560px; }
  .esg-cta .cta-strip__sub { font-size: 15px; max-width: 480px; }
  .esg-cta .btn--dark { padding: 16px 36px; font-size: 14px; }
}

@media (min-width: 1600px) {
  .esg-hero { height: 640px; }
}