/* home.css -- the founders strip on the English home. Loaded after shell.css
   and solutions.css; uses their --sh-* tokens. */
.hm-founders { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--sh-line); }
.hm-founders .kicker { margin-bottom: 18px; color: var(--sh-muted); }
.hm-founders h2 { margin: 0 0 clamp(28px, 4vw, 48px); text-wrap: balance; font: 300 clamp(30px, 4.6vw, 56px)/1.03 var(--sh-display); letter-spacing: -.025em; }
.hm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.hm-card { display: block; height: 100%; text-decoration: none; color: inherit; }
.hm-card img { display: block; width: 100%; height: auto; max-width: 280px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; background: var(--sh-surface); filter: grayscale(1) contrast(1.06); transition: filter .6s var(--sh-ease); }
.hm-card:hover img, .hm-card:focus-visible img { filter: none; }
.hm-card:focus-visible { outline: 2px solid var(--sh-signal); outline-offset: 6px; }
.hm-card h3 { margin: 20px 0 0; font: 300 clamp(22px, 2.4vw, 28px)/1.1 var(--sh-display); letter-spacing: -.02em; }
.hm-role { margin: 8px 0 0; font: italic 300 18px/1.2 var(--sh-accent); color: var(--sh-paper); }
.hm-pull { margin: 14px 0 0; max-width: 34ch; color: var(--sh-slate); font-size: 15px; text-wrap: pretty; }

@media (max-width: 819px) {
  .hm-grid { grid-template-columns: 1fr; }
  .hm-card img { max-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-card img { transition: none; }
}