Act as a designer for service businesses. Build a grid of case study cards for {{business_name}}'s work page, for {{target_audience}}. Style: {{visual_style}}. Reuse the existing card and image components. Each card: - the outcome as the headline, specific and time-bound: "Cut quote turnaround from 3 days to 4 hours in 8 weeks", not "Increased efficiency" - client name and industry; skip clients under NDA unless they've approved being named - one line on the problem - a thumbnail of the real work, fixed at 4:3 with object-fit cover and a set focal point - up to 3 service tags, plain text - the whole card clickable through a stretched link on the title, so there's one tab stop and nested links still work Layout: 360: 1 column; 768: 2; 1280: 3, with the newest or strongest card featured across 2 columns with a larger image. Gap 24 / 24 / 32px. Filters by industry or service only if there are more than 6 cards, as links that update the URL. Type: outcome 20 / 22 / 24px weight 650, line height 1.25, max 3 lines; numbers in tabular-nums; client 14px weight 600; problem 15px at 4.5:1. States: - hover: image scales to 1.03 inside its frame over 300ms and the title underlines - focus-visible: a ring around the whole card via focus-within - missing image: a brand-pattern tile with the client's initial, same ratio - long client names wrap to 2 lines; a filter with no matches shows Clear filters - 1 case study: one wide feature row instead of a lonely grid Motion: hover only; none under prefers-reduced-motion. Avoid: results with no time frame, percentages without a baseline, identical cards with icons and three bullets, mockups standing in for shipped work. Ask me for the outcome numbers rather than estimating them.