/* ============================================================
   ABOUT — page-specific layout: lead, values.
   ============================================================ */

.about-lead {
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.5;
  color: var(--dark);
  max-width: 820px;
  font-weight: 300;
}
.about-lead em { font-style: italic; color: var(--navy); }

/* tighten the gap between the lead and values sections */
.about-lead-section { padding-bottom: 48px; }
.about-values-section { padding-top: 48px; }

/* ── VALUES ── */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.value-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 36px 32px;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.value-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px -16px rgba(0,20,50,0.16); }

.value-card-num {
  font-family: 'Anton', sans-serif;
  font-size: 20px;
  color: var(--cyan);
  margin-bottom: 18px;
}

.value-card h3 { font-size: 19px; color: var(--dark); margin-bottom: 12px; }
.value-card p { font-size: 14px; line-height: 1.65; color: var(--mid); }

@media (max-width: 900px) {
  .values-grid { grid-template-columns: 1fr; }
}