/* ============================================================
   csr.css — Beyond J.C. Group OPC | CSR Page
   Compact page header (no full-screen hero)
   Matches site design system: Fraunces/DM Sans, green & yellow accents
   ============================================================ */

:root {
  --csr-green:        #0d542b;
  --csr-green-hover:  #0a4322;
  --csr-green-light:  #dcfce7;
  --csr-yellow:       #eab308;
  --csr-yellow-hover: #ca8a04;
  --csr-yellow-light: #fef9c3;
  --csr-ink:          #111111;
  --csr-ink-mid:      #444444;
  --csr-ink-light:    #888888;
  --csr-white:        #ffffff;
  --csr-off-white:    #f8f8f8;
  --csr-border:       #efefef;
  --csr-border-dark:  #e2e2e2;
  --csr-font-display: sans-serif;
  --csr-font-body:    sans-serif;
  --csr-max-w:        1380px;
  --csr-px:           clamp(20px, 5vw, 80px);
  --csr-r-card:       20px;
  --csr-r-pill:       9999px;
  --csr-sh-card:      0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);
  --csr-sh-hover:     0 8px 28px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.04);
  --csr-t-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --csr-t-fast:       .18s ease;
  --navbar-h:         80px;
}

/* ── Scroll reveal ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .52s ease, transform .52s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* ── 1. PAGE HEADER — compact, not full-screen ────────────── */
.csr-page-header {
  background: var(--csr-white);
  padding: calc(var(--navbar-h) + 52px) var(--csr-px) 48px;
  border-bottom: 1px solid var(--csr-border);
}
.csr-page-header__inner {
  max-width: var(--csr-max-w);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.csr-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--csr-font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--csr-green);
  margin-bottom: 14px;
}
.csr-eyebrow-dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--csr-green);
  border-radius: 50%;
  animation: csrDotPulse 2.5s ease infinite;
}

.csr-page-header__title {
  font-family: var(--csr-font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.0;
  color: var(--csr-ink);
  letter-spacing: -2px;
  margin-bottom: 16px;
}
.csr-page-header__title em {
  font-style: italic;
  color: var(--csr-green);
}

.csr-page-header__sub {
  font-family: var(--csr-font-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--csr-ink-light);
  line-height: 1.75;
  max-width: 560px;
}

/* Stats row */
.csr-page-header__stat-row {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.csr-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 40px 0 0;
}
.csr-stat:first-child { padding-left: 0; }

.csr-stat__num {
  font-family: var(--csr-font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--csr-green);
  letter-spacing: -1px;
  line-height: 1;
}

.csr-stat__label {
  font-family: var(--csr-font-body);
  font-size: 12px;
  font-weight: 300;
  color: var(--csr-ink-light);
  text-transform: uppercase;
  letter-spacing: .8px;
}

.csr-stat__divider {
  width: 1px;
  height: 40px;
  background: var(--csr-border-dark);
  margin: 0 40px 0 0;
  flex-shrink: 0;
}

/* ── 2. IMPACT CALLOUT BAR ────────────────────────────────── */
.csr-callout {
  background: var(--csr-green);
  padding: 20px var(--csr-px);
  margin-top: 70px;
}
.csr-callout__inner {
  max-width: var(--csr-max-w);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.csr-callout__icon {
  width: 48px; height: 48px;
  background: rgba(255,255,255,.12);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--csr-yellow);
  flex-shrink: 0;
}

.csr-callout__text {
  font-family: var(--csr-font-body);
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,.85);
  line-height: 1.6;
  flex: 1;
}
.csr-callout__text strong {
  font-weight: 600;
  color: var(--csr-white);
}

.csr-callout__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--csr-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--csr-yellow);
  text-decoration: none;
  white-space: nowrap;
  transition: gap var(--csr-t-fast), color var(--csr-t-fast);
}
.csr-callout__link:hover {
  gap: 10px;
  color: #fef9c3;
}

/* ── 3. SECTION CHROME ────────────────────────────────────── */
.csr-section-header {
  text-align: center;
  margin-bottom: 48px;
}
.csr-section-header .csr-eyebrow {
  justify-content: center;
  margin-bottom: 10px;
}
.csr-section-title {
  font-family: var(--csr-font-display);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 600;
  color: var(--csr-ink);
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin-bottom: 12px;
}
.csr-section-sub {
  font-family: var(--csr-font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--csr-ink-light);
  line-height: 1.7;
  max-width: 500px;
  margin-inline: auto;
}

/* ── 4. INITIATIVE CARDS ──────────────────────────────────── */
.csr-initiatives {
  background: var(--csr-off-white);
  padding: 80px 0 88px;
}
.csr-initiatives__inner {
  max-width: var(--csr-max-w);
  margin-inline: auto;
  padding-inline: var(--csr-px);
}

.csr-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.csr-card {
  background: var(--csr-white);
  border-radius: var(--csr-r-card);
  overflow: hidden;
  box-shadow: var(--csr-sh-card);
  border: 1px solid var(--csr-border);
  display: flex;
  flex-direction: column;
  transition: transform .28s var(--csr-t-spring), box-shadow .28s;
}
.csr-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--csr-sh-hover);
}

/* Accent stripe */
.csr-card--green  { border-top: 4px solid var(--csr-green); }
.csr-card--yellow { border-top: 4px solid var(--csr-yellow); }

/* Image area */
.csr-card__img-wrap {
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: var(--csr-off-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.csr-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.csr-card:hover .csr-card__img { transform: scale(1.04); }

/* Body */
.csr-card__body {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.csr-card__tag {
  display: inline-block;
  font-family: var(--csr-font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 4px 12px;
  border-radius: var(--csr-r-pill);
  margin-bottom: 16px;
  width: fit-content;
  background: var(--csr-green-light);
  color: var(--csr-green);
}
.csr-card__tag--yellow {
  background: var(--csr-yellow-light);
  color: #854d0e;
}

.csr-card__title {
  font-family: var(--csr-font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  color: var(--csr-ink);
  letter-spacing: -.7px;
  line-height: 1.2;
  margin-bottom: 14px;
}

.csr-card__desc {
  font-family: var(--csr-font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--csr-ink-mid);
  line-height: 1.75;
  flex: 1;
  margin-bottom: 24px;
}

.csr-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--csr-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--csr-green);
  text-decoration: none;
  border-top: 1px solid var(--csr-border);
  padding-top: 20px;
  transition: gap var(--csr-t-fast), color var(--csr-t-fast);
}
.csr-card__link:hover {
  gap: 10px;
  color: var(--csr-green-hover);
}

/* ── 5. GALLERY ───────────────────────────────────────────── */
.csr-gallery {
  background: var(--csr-white);
  padding: 80px 0 88px;
}
.csr-gallery__inner {
  max-width: var(--csr-max-w);
  margin-inline: auto;
  padding-inline: var(--csr-px);
}

/* Masonry-style fixed grid */
.csr-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 12px;
}

.csr-gallery__item {
  border-radius: 12px;
  overflow: hidden;
  background: var(--csr-off-white);
  aspect-ratio: 4/3;
}
.csr-gallery__item--tall {
  aspect-ratio: 3/4;
  grid-row: span 2;
}

.csr-gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.csr-gallery__item:hover img { transform: scale(1.04); }

/* ── 6. CTA BAND ──────────────────────────────────────────── */
.csr-cta {
  background: var(--csr-ink);
  padding: 88px var(--csr-px);
  text-align: center;
}
.csr-cta__inner { max-width: 580px; margin-inline: auto; }

.csr-cta__title {
  font-family: var(--csr-font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 600;
  color: var(--csr-white);
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 16px;
}

.csr-cta__sub {
  font-family: var(--csr-font-body);
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,.55);
  line-height: 1.75;
  margin-bottom: 36px;
}

.csr-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--csr-yellow);
  color: var(--csr-ink);
  font-family: var(--csr-font-body);
  font-size: 14px;
  font-weight: 700;
  padding: 14px 36px;
  border-radius: var(--csr-r-pill);
  text-decoration: none;
  transition: transform .22s var(--csr-t-spring), box-shadow .22s, background .18s;
}
.csr-cta__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(234,179,8,.35);
  background: var(--csr-yellow-hover);
  color: var(--csr-white);
}

/* ── 7. ANIMATIONS ────────────────────────────────────────── */
@keyframes csrDotPulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.6); opacity: .5; }
}

/* ── 8. RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1100px) {
  .csr-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .csr-cards { grid-template-columns: 1fr; }
  .csr-page-header__stat-row { gap: 24px; }
  .csr-stat { padding-right: 24px; }
  .csr-stat__divider { margin-right: 24px; }
  .csr-callout__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 540px) {
  .csr-gallery__grid { grid-template-columns: 1fr; }
  .csr-gallery__item--tall { aspect-ratio: 4/3; grid-row: span 1; }
  .csr-page-header__stat-row { flex-direction: column; align-items: flex-start; }
  .csr-stat__divider { width: 40px; height: 1px; margin: 4px 0; }
}