/**
 * About - Values Grid (icon cards)
 *
 * Plain white cards, mirroring .service-card's surface treatment (border,
 * radius, shadow, hover lift) without the accent bar or alternating shade.
 * With five cards the grid fills 3 + 2, left aligned, cards keeping one width.
 */

.values-grid-section {
  padding: var(--space-section) 0;
  background: var(--color-surface);
}

.values-intro {
  max-width: 680px;
  margin: 0 auto var(--space-intro-bottom);
  text-align: center;
}

.values-heading {
  margin-bottom: 14px;
}

.values-lead {
  font-size: var(--font-small);
  color: var(--color-ink-muted);
  line-height: 1.7;
  margin: 0;
}

/* Flex rather than grid so the short final row centres instead of sitting
   left-aligned under the first. Cards keep a fixed third-width basis, so a
   centred row of two matches the width of a full row of three. */
.values-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.value-card {
  flex: 0 0 calc((100% - 40px) / 3);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(70, 130, 180, 0.5);
}

.value-card-icon {
  margin-bottom: 16px;
  line-height: 1;
}

.value-card-icon i {
  font-size: 22px;
  color: var(--color-sky-blue-400);
}

.value-card .card-title {
  color: var(--color-navy);
}

.value-card p {
  font-size: 14px;
  color: var(--color-ink-muted);
  line-height: 1.6;
}
.value-card p:not(:last-child) {
	margin-bottom: 15px;
}
/* Same wrap points the existing services grid uses. */
@media (max-width: 1060px) {
  .value-card {
    flex-basis: calc((100% - 20px) / 2);
  }
}

@media (max-width: 700px) {
  .value-card {
    flex-basis: 100%;
  }
}