/* ==========================================================================
   ON VOUGA — apropos.css
   ========================================================================== */

.eyebrow-dark{ color: var(--green-600); font-weight: 600; font-size: 13px; display: block; margin-bottom: 10px; }

.mission{ padding: 88px 0; background: var(--white); }
.mission-grid{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.mission-art{ position: relative; }
.mission-art img{ width: 100%; max-width: 420px; margin: 0 auto; filter: drop-shadow(0 20px 40px rgba(10,14,35,.2)); }
.mission-copy h2{ font-size: clamp(24px, 3vw, 32px); margin-bottom: 18px; }
.mission-copy p{ color: var(--ink-soft); line-height: 1.75; margin-bottom: 14px; font-size: 15.5px; max-width: 560px; }
.mission-list{ margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.mission-list li{ position: relative; padding-left: 26px; font-size: 14.5px; color: var(--ink); }
.mission-list li::before{
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--green-600); font-weight: 800;
}
@media (max-width: 860px){ .mission-grid{ grid-template-columns: 1fr; } .mission-art img{ max-width: 260px; } }

.values{ background: var(--grey-100); padding: 84px 0; }
.values-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.value-card{ background: var(--white); border-radius: var(--radius-md); padding: 26px; box-shadow: var(--shadow-card); }
.value-icon{
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--tint) 14%, white); color: var(--tint);
}
.value-card h3{ font-size: 16px; margin-bottom: 8px; }
.value-card p{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
@media (max-width: 900px){ .values-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .values-grid{ grid-template-columns: 1fr; } }

.stats-band{ background: var(--navy-950); padding: 56px 0; }
.stats-band-grid{ display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; gap: 20px; }
.stats-band-grid .stat-num{ display: block; font-family: var(--font-display); font-weight: 800; font-size: 32px; color: var(--green-500); }
.stats-band-grid div:nth-child(1) .stat-num{ color: var(--yellow-500); }
.stats-band-grid div:nth-child(2) .stat-num{ color: var(--green-500); }
.stats-band-grid div:nth-child(3) .stat-num{ color: var(--blue-500); }
.stats-band-grid div:nth-child(4) .stat-num{ color: var(--pink-500); }
.stats-band-grid span:last-child{ font-size: 13px; color: rgba(255,255,255,.55); }
@media (max-width: 700px){ .stats-band-grid{ grid-template-columns: 1fr 1fr; } }

.team{ padding: 84px 0; background: var(--white); }
.team-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.team-card{ text-align: center; padding: 26px 16px; border-radius: var(--radius-md); background: var(--grey-100); }
.team-avatar{
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  background: color-mix(in srgb, var(--c) 20%, white); color: var(--c);
}
.team-card h3{ font-size: 15px; margin-bottom: 4px; }
.team-card p{ font-size: 13px; color: var(--ink-soft); }
@media (max-width: 900px){ .team-grid{ grid-template-columns: 1fr 1fr; } }

.cta-band{ background: linear-gradient(120deg, var(--green-500), var(--green-600)); padding: 52px 0; }
.cta-band-inner{ display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta-band-inner h2{ color: var(--navy-950); font-size: clamp(20px, 2.6vw, 26px); }
.cta-band-inner p{ color: rgba(10,14,35,.7); margin-top: 6px; }
.cta-band .btn-primary{ background: var(--navy-950); color: var(--white); box-shadow: none; }
.cta-band .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(10,14,35,.25); }