/* =============================================================
   About page styles (css/pages/about.css)
   Loaded after css/main.css. Page-specific only.
   ============================================================= */

/* ---------- Hero ----------
   Was a split image/text hero (.about-hero + .about-hero-img). Now the
   shared .hero + .hero-service overlay hero from css/main.css, the same
   component the four service pages use. Nothing page-specific is left. */

/* ---------- Story (editorial narrow column) ---------- */
.story h2 { margin-bottom: 1.5rem; }
.story p { max-width: 65ch; }
.story p + p { margin-top: 1.25rem; }
.story-open {
  font-size: 1.1875rem;
  color: var(--ink);
}
.story-fig { margin: 2.75rem 0 0; }
.story-fig img { border-radius: var(--radius-card); }

/* ---------- Values (plain, hairline separators, no cards) ---------- */
.values-list { display: grid; gap: 2rem; }
.values-list li {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}
.values-list h3 { margin-bottom: .375rem; }
.values-list p { font-size: .9875rem; }
@media (min-width: 900px) {
  .values-list { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}

/* ---------- What we do (compact service links row) ---------- */
.what-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .what-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .what-grid { grid-template-columns: repeat(4, 1fr); } }
.what-link {
  display: flex;
  align-items: center;
  gap: .875rem;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
}
.what-link img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-card);
  flex-shrink: 0;
}
.what-link svg {
  width: 15px;
  height: 15px;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--navy-600);
  transition: transform .25s var(--ease-out);
}
.what-link:hover,
.what-link:focus-visible { color: var(--navy-600); text-decoration: none; }
.what-link:hover svg,
.what-link:focus-visible svg { transform: translateX(4px); }