Loudmouth Agency Website

Build a "Loudmouth Agency Website" React component.

CONCEPT: A portfolio site for a small, loud branding agency. It should feel like a printed protest poster that also works as a website.

LAYOUT & CONTENT:
- Top ticker strip: 'NOW BOOKING Q1 ✺ 9 PEOPLE ✺ GARAGE 4, FLORENTIN ✺' scrolling.
- Nav: logo 'LOUDMOUTH®' in a black box, links WORK / ABOUT / SHOP / CONTACT, a pink 'START A PROJECT' sticker button.
- Hero: headline 'WE MAKE BRANDS THAT TALK BACK.' at 8rem across the width, with a rotating starburst sticker 'OPEN FOR Q1'.
- Services: 4 full-width rows (Naming, Identity, Web, Campaigns) with number, name at 3rem, a one-liner and an arrow.
- Work: 2x2 grid of poster-like case tiles in flat colors, each with a giant outlined letter and one geometric shape, client name, year and disciplines.
- Clients: logo-like wordmarks row on white with black dividers.
- Footer: huge 'SAY HI →' link, email, address, socials.

INTERACTIONS & MOTION:
- Hero talks back: each headline word, on hover, scales 1.08, tilts ±4° and turns pink with a black outline (spring stiffness 400, damping 14); a white speech bubble with a hard shadow follows the cursor (springs 350/26) and swaps its quip ('oi.', 'careful.', 'hire us.') each time a new word is touched.
- Service rows: a pink fill sweeps in with clip-path inset (0.35s, cubic-bezier(0.77, 0, 0.175, 1)), the line swaps to a one-sentence case example and the arrow turns -45°.
- Ticker runs infinitely.
- Case tiles: whileHover translate -6,-6 and shadow grows; whileTap flattens.
- Starburst sticker rotates continuously; headline words drop in with springy rotation on load.

DESIGN SYSTEM — Neo-Brutalist:
- Acid yellow #FFE600, white, black #000; one hot accent #FF3EA5 used twice at most.
- 3px black borders, hard 8px 8px 0 #000 shadows, square corners, visible grid lines.
- Archivo Black for display, Space Mono for everything else.

CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring") for anything interactive; ease-out cubic-bezier(0.23, 1, 0.32, 1) for entrances, under 300ms for UI feedback, exits faster than entrances. Animate transform, opacity, clip-path and SVG attributes only. Respect prefers-reduced-motion via useReducedMotion() (loops and cursor effects become static).
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no claims the business cannot back up.
- Icons: lucide-react where icons are needed; illustrations are inline SVG or CSS, no external images.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes, tabular numerals for times and prices.

OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client". Load any Google Font it needs with next/font/google.