/* ==========================================================================
   About page — public/css/pages/about.css
   Only rules that exist nowhere else. .product-hero / .section / .prose
   live in global.css.
   ========================================================================== */

/* --- Two-column layout: sticky section nav + prose ------------------------ */
.about-layout { display: grid; grid-template-columns: 220px 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }

.about-nav { position: sticky; top: 96px; }
.about-nav ul { display: grid; gap: 4px; }
.about-nav a {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: var(--step--1); font-weight: 600; color: var(--body);
  transition: color .16s ease, background-color .16s ease;
}
.about-nav a:hover { color: var(--navy-700); background: var(--navy-050); }

@media (max-width: 860px) {
  .about-layout { grid-template-columns: 1fr; }
  .about-nav { position: static; margin-bottom: 8px; }
  .about-nav ul { display: flex; flex-wrap: wrap; gap: 8px; }
}