/* ==========================================================================
   Arthur Labs — how we build, about, social proof (ART-301)
   ========================================================================== */

.principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.principle__icon { color: var(--color-accent); }

.about {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  justify-items: start;
}
.about__photo {
  width: 160px; height: 160px;
  object-fit: cover;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
}
.about__copy { display: grid; gap: var(--space-4); justify-items: start; max-width: 62ch; }
.about__copy h2, .about__copy p { margin: 0; }
.about__copy p { color: var(--color-text-muted); }

@media (min-width: 640px) {
  .about { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-12); }
}

.metrics {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 0;
}
.metric {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.metric dd { margin: 0; font-size: var(--text-3xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.metric dt { color: var(--color-text-muted); font-size: var(--text-sm); order: 2; }

.section[hidden] { display: none; }