/* ==========================================================================
   about.html — page-specific rules (tokens only, no new colours / radius / shadows)
   ========================================================================== */

/* Team: 8 people, 4 per row inside the full 4-column canvas */
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 60px var(--gap); }

/* Outlined card codes (01 / LON …): style.css sets color:transparent + stroke currentColor, which cancels
   itself out and renders nothing — pin the stroke colour so the outline actually shows */
.card__num { -webkit-text-stroke-color: var(--black); }
.card--dark .card__num { -webkit-text-stroke-color: var(--white); }

/* Numbers: second row of stat brackets needs breathing room once the grid collapses */
.numbers__more { margin-top: 0; }

/* Office cards: address lines stacked tight, hours on their own line */
.office__lines { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; color: var(--ink); }
.office__lines b { font-weight: 700; color: var(--black); }
.office__hours { font-size: 14px; line-height: 1.4; color: var(--ink-70); }

@media (max-width: 1023px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--gap); }
  .numbers__more { margin-top: 20px; }
}

@media (max-width: 639px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gap); }
  .person__name { font-size: 14px; }
  .person__role { font-size: 13px; }
}
