## Overview
Editorial light landing based on the Mach1Capital Figma (which is itself a rebuild of plat4m.com). The hero is the whole personality: a 130px split-colour display headline where "We make it" is muted gray and the final word of each line is near-black, followed by two rounded 32px photo cards with a floating dark pill CTA sitting on their seam. Below the hero the template still leans on Feature13 (eight numbered services) and Cta3 (closing card) to give the page its full shape.
## Colors
Light canvas, dark typographic foreground, with the Figma's gray muted foreground pulled in verbatim.
- **`--background`** (`#FFFFFF`): Pure white canvas.
- **`--foreground`** (`#09090A`): Near-black — the emphasized half of the headline, body copy, and the CTA pill itself.
- **`--muted-foreground`** (`#7E8087`): The Figma's exact gray. Powers the muted "We make it" half of each headline line and Feature13's supporting copy.
- **`--primary`** (`#09090A`): Collapsed onto the foreground so Cta3's closing card lands on near-black with white type.
- **`--accent`** (`#DD2F20`): Red accent, reserved for future highlights.
- **`--muted`** (`#F5F5F5`): Subtle off-white for card bg placeholders before images load.
- **`--border`** (`#E5E5E5`): Hairline separators used by Feature13's service rows.
## Typography
- **Heading font**: `ppMori` — Pangram Pangram's PP Mori variable (weight 200–800). Display at weight 700 (Bold).
- **Body font**: `ppMori` as well.
- **Display sizing**: `text-[clamp(48px,9vw,140px)]`, `leading-[1.04]`. No custom tracking — PP Mori's native metrics do the work, per the "no tight tracking on display headings" rule.
- **Split-colour treatment**: `<span className="block">` rows where the lead ("We make it") inherits `text-muted-foreground` and the emphasised word is wrapped in an inline `<span className="text-foreground">`.
## Components
Hand-rolled hero + two blocks.
1. **`_components/hero.tsx`** — Three-line split-colour headline, a 2-up photo card grid (`aspect-[820/630]`, `rounded-[32px]`), and a floating shadcn `Button` pill absolutely positioned at the cards' midpoint. The pill uses `asChild` → `<a>` so the Lucide `Menu` icon inside a sub-pill wrapper isn't a direct child of the Button (sidestepping the `has-[>svg]:px-N` padding gotcha).
2. **Feature13** — "Your product team, ready in days." Eight numbered services with the "Instead of…" framing, rendered on the light canvas.
3. **Cta3** — Closing manifesto card. With `--primary` collapsed onto near-black, the Cta3 surface reads as a dark band at the bottom of a light page.
## Assets
- `public/projects/agencies/assets/card-wink.jpg` — B&W portrait with framing hands (from the Figma asset endpoint, node 9:65).
- `public/projects/agencies/assets/card-phone.jpg` — phone mockup on red fabric (from the Figma asset endpoint, node 9:63).
## Do's and don'ts
- Do keep the headline split: gray lead + black emphasised word, three stacked lines.
- Do keep Feature13 and Cta3 on the same light palette — if they ever drift dark again, the split-colour headline above stops making sense.
- Don't use `tracking-tight` or `tracking-tighter` on the display headline.
- Don't swap the hand-rolled hero back to `Hero2` — no block supports the split-colour treatment or the floating pill overlap.
- Don't put the Lucide icon as a direct child of `<Button>`; wrap it in a span so the `has-[>svg]:px-N` auto-shrink rule doesn't collapse the left padding.