/* ===== NARRATIVE SECTION ===== */
.narrative-section {
  background-color: #ffffff;
  padding: 6rem 0; /* 96px = 6rem */
}

/* ===== GRID LAYOUT ===== */
.narrative-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6.25rem; /* 100px = 6.25rem */
  align-items: center;
}

/* ===========================
   LEFT: IMAGE
   =========================== */
.narrative-img-wrapper {
  width: 100%;
}

.narrative-img-placeholder {
  width: 100%;
  height: 32rem; /* 512px */
  background-color: #b5c9b7;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0px 25px 50px -12px #00000040;
}

.narrative-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* Show face not feet */
  display: block;
  border-radius: 1rem;
}

/* ===========================
   RIGHT: CONTENT
   =========================== */
.narrative-content {
  display: flex;
  flex-direction: column;
}

/* ===== HEADING ===== */
.narrative-heading {
  font-size: 3rem; /* 48px */
  line-height: 125%;
  font-weight: 700;
  color: #181c20;
  margin: 0 0 2rem 0; /* 32px */
  display: flex;
  flex-direction: column; /* Stack black and green on separate lines */
}

.narrative-heading-green {
  color: #006e25;
  display: block; /* Forces green text to new line */
}

/* ===== PARAGRAPHS ===== */
.narrative-desc {
  font-size: 1.125rem; /* 18px */
  line-height: 150%;
  color: #3e4a3c;
  margin: 0 0 1.5rem 0; /* 24px gap between paragraphs */
}

/* Last p tag has bigger margin before stats */
.narrative-desc-last {
  margin-bottom: 2rem; /* 32px before stats */
}

/* ===== STATS ROW ===== */
.narrative-stats {
  display: flex;
  align-items: flex-start;
  gap: 2rem; /* 32px between stats */
}

/* ===== SINGLE STAT ===== */
.narrative-stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 50%;
}

/* Stat Number */
.narrative-stat-number {
  font-size: 2.25rem; /* 36px */
  line-height: 125%;
  font-weight: 700;
  color: #006e25;
  display: block;
  margin-bottom: 0.25rem; /* 4px */
}

/* Stat Label */
.narrative-stat-label {
  font-family: "Inter", sans-serif;
  font-size: 0.75rem; /* 12px */
  line-height: 100%;
  font-weight: 600;
  color: #475569;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  display: block;
}

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 1100px) {
  .narrative-grid {
    gap: 4rem;
  }

  .narrative-heading {
    font-size: 2.5rem;
  }

  .narrative-img-placeholder {
    height: 28rem;
  }
}

@media (max-width: 992px) {
  .narrative-section {
    padding: 5rem 0;
  }

  /* Stack on tablet */
  .narrative-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .narrative-img-placeholder {
    height: 26rem;
    max-width: 520px;
    margin: 0 auto;
  }

  .narrative-heading {
    font-size: 2.25rem;
  }

  .narrative-desc {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .narrative-section {
    padding: 3.75rem 0; /* 60px */
  }

  .narrative-heading {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }

  .narrative-img-placeholder {
    height: 22rem;
  }

  .narrative-stat-number {
    font-size: 1.875rem;
  }

  .narrative-desc {
    font-size: 0.9375rem;
  }
}

@media (max-width: 480px) {
  .narrative-section {
    padding: 3rem 0; /* 48px */
  }

  .narrative-heading {
    font-size: 1.75rem;
  }

  .narrative-img-placeholder {
    height: 18rem;
  }

  .narrative-stats {
    gap: 1.5rem;
  }

  .narrative-stat-number {
    font-size: 1.75rem;
  }

  .narrative-stat-label {
    font-size: 0.6875rem;
    letter-spacing: 1.5px;
  }
}