/* =====================================
   ABOUT PAGE
===================================== */

.about-hero {

  padding-block: var(--space-10) var(--space-9);

  text-align: center;

}

.about-hero h1 {

  margin-block: var(--space-4);

  font-size: 40px;

}

.about-lead {

  max-width: 60ch;

  margin-inline: auto;

  color: var(--text-secondary);

  line-height: 1.9;

}

.about-values {

  padding-bottom: var(--space-10);

}

.values-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: var(--space-6);

}

.value-card {

  padding: var(--space-7);

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  text-align: center;

}

.value-card h3 {

  margin-bottom: var(--space-3);

  color: var(--primary);

}

.value-card p {

  color: var(--text-secondary);

  line-height: 1.8;

}

@media (max-width: 768px) {

  .values-grid {

    grid-template-columns: 1fr;

  }

}