Act as a senior web designer with a typographer's eye. Build a hero for {{business_name}} that works on type alone, in this style: {{visual_style}}. Fonts: {{brand_fonts}}. First read the existing tokens and components and tell me what you'll reuse; keep the current stack. Content: a headline of 4 to 9 words saying what we do and for whom, a one or two sentence subhead, one primary button ({{call_to_action}}) and one quiet text link. Write the real copy. Type: - headline sized with clamp(): about 44px at 360, 72px at 768, 112 to 128px at 1280; line height 0.95 to 1.05, letter-spacing -0.03em, weight 600 to 800, text-wrap: balance - subhead 18 to 22px, line height 1.5, max 60ch, muted token at 4.5:1 or better - one word may take the accent color or the italic cut; never a gradient fill Layout: left-aligned on 4 / 8 / 12 columns with 16 / 24 / 32px gutters; the headline spans 10 of 12 columns at 1280. Top padding 64 / 96 / 144px. The hero is as tall as its content, not 100vh, and the next section peeks above the fold. Long text: test a 14-word headline and a long German word; nothing overflows at 360px (hyphens: auto on headings). States: button hover one step darker, focus-visible 2px ring with 2px offset, active pressed by 1px, 44px targets. Motion: one line-by-line reveal, 500ms ease-out cubic-bezier(0.2, 0, 0, 1), 60ms stagger, removed under prefers-reduced-motion. The headline is visible without JavaScript and is the LCP element: preload only the heading weight, font-display swap, matched fallback metrics so nothing shifts. Avoid: an empty centered hero filling the screen, gradient text, floating blobs, a typewriter headline, "Unlock" or "Elevate" copy, Inter at one weight. Finish with a change list giving the reason for each decision.