/* =============================================================================

   7-about.css — About section (#about): story, stat pillars, team photo

   Two-column grid and image crop are in layout.css.

   ============================================================================= */



/* ---------- Default — section shell ---------- */



/* Green band behind the white curved panel */

.about {

  background-color: var(--color-primary);

}



/* White curved panel */

.about__bg {

  background-color: var(--color-panel);

}



/* ---------- Default — text column ---------- */



.about__data {

  min-width: 0;

}



/* “Our Story” paragraph */

.about__description {

  margin: 0 0 2rem;

  color: var(--color-text-muted);

  overflow-wrap: break-word;

}



/* ---------- Default — stat pillars (Locally owned, Cape roots, …) ---------- */



.about__stat {

  border: none;

  padding: 0;

  min-width: 0;

}



/* Pillar title — e.g. “Locally owned” */

.about__stat-value {

  display: block;

  font-family: var(--font-heading);

  font-size: var(--text-h2);

  font-weight: var(--weight-regular);

  line-height: 1.2;

  color: var(--color-primary);

}



/* Line under the pillar title */

.about__stat-label {

  display: block;

  font-size: var(--text-small);

  color: var(--color-text-muted);

  line-height: 1.35;

}



/* ---------- Default — photo ---------- */



.about__media {

  margin: 0;

}



/* Team on site image — rounded corners (size in layout.css) */

.about__media .section-photo {

  border-radius: 1rem;

}



/* ---------- Responsive — max-width 479px ---------- */



@media (max-width: 479px) {

  .about__stats {

    grid-template-columns: 1fr;

    text-align: center;

  }

}