Team Grid Section

# Team Grid — About Page Section

## Goal
Build a team section: heading, role filter pills, responsive portrait grid, and a final 'join us' card. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Header row: 'The humans' headline left; filter pills right (All / Design / Engineering / Ops) — active pill solid, others ghost.
- Cards (4-col → 2 → 1): portrait 4:5 rounded-xl grayscale-[0.3], name semibold, role muted 13px, tiny social icon pair appearing on hover.
- Hover: portrait desaturation lifts to full color + scale 1.03; a hand-written style tag rotates in at a corner (pre-made per person, e.g. 'ships fast', 'plant parent') — personality without silliness overload.
- Last card: dashed border, plus icon, 'This could be you — 4 open roles' linking to careers.
- Filter transition: non-matching cards animate out (scale 0.95 + fade), grid reflows with layout animation.

## Motion Spec
- Grid uses FLIP/layout animations on filter change — cards glide to new positions, 350ms.
- Initial reveal: rows stagger 80ms.
- Corner tag springs in with slight overshoot rotation (−8°→3°→0°).
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- `<TeamGrid people={Person[]} roles={string[]} />`; `Person = { name, role, dept, img, tag?, socials? }`

## Quality Bar
- TypeScript strict, zero `any`. Tailwind only — no external CSS files.
- Works on mobile: touch targets ≥ 44px, no hover-only affordances.
- 60fps: animate only `transform` and `opacity`; use `will-change` sparingly.
- Accessible: correct roles/aria, keyboard operable, focus-visible styles.