/* /about-us only (loaded after service-page.css): the three plain facts and the leadership cards.
   Same tokens as .sp (navy, white, grey, ONE blue). No shadows heavier than a hairline. */
.about-facts { display: grid; gap: 14px; margin-top: 40px; }
.about-facts li { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.about-facts b { font-size: 2.2rem; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; color: var(--blue); }
.about-facts span { font-size: 16px; color: var(--ink); font-weight: 600; line-height: 1.4; }
.about-how .sp-card h3 { margin-top: 0; }
.team-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.team-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 22px 30px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 3px rgba(10,19,45,.05); }
/* Swap point for a real photo: put an <img> in here instead of the <svg>. */
.team-avatar { width: 112px; height: 112px; margin-bottom: 20px; border-radius: 50%; overflow: hidden; flex: none; background: var(--blue-tint); }
.team-avatar :is(svg, img) { width: 100%; height: 100%; object-fit: cover; }
.sp .team-card h3 { font-size: 20px; line-height: 1.25; margin-bottom: 6px; }
.team-role { font-size: 15px; font-weight: 700; color: var(--blue-dark); line-height: 1.35; margin-bottom: 12px; }
.team-focus { font-size: 16px; color: var(--muted); line-height: 1.55; }
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(2, 1fr); } .about-facts { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .team-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } .about-facts { gap: 20px; } }
@media (min-width: 720px) { .about-how.sp-grid { grid-template-columns: repeat(2, 1fr); } .about-how > :last-child:nth-child(odd) { grid-column: auto; } }
@media (min-width: 960px) { .about-how.sp-grid { grid-template-columns: repeat(4, 1fr); } .about-how > *, .about-how > :last-child:nth-child(3n+1) { grid-column: auto; } }