## Overview
Mainline Plumbing — a residential plumbing, drain & sewer, and water-quality landing page. Cobalt blue primary on a cream canvas with deep navy secondary surfaces. Calmer and more "established trade" than the HVAC sibling — less urgency, more reassurance. Hand-rolled `_components/`.
## Colors
- **`--background`** (cream `#FAF8F2`): Page canvas — slightly warm to read as "honest, residential".
- **`--foreground`** (navy `#0F2540`): Body text and headlines.
- **`--primary`** (cobalt blue `#0052CC`): The "call now" blue. Buttons, highlights, headline accents. Reads "water" and "trustworthy".
- **`--primary-foreground`** (white): Text on cobalt surfaces.
- **`--secondary`** (navy): Hero overlay, stats strip, footer, financing card.
- **`--secondary-foreground`** (cream): Text on navy surfaces.
- **`--muted`** (pale blue `#EEF4FB`): Why-us and reviews section backgrounds.
- **`--accent`** (copper `#D97706`): Star ratings — copper plays the "pipes" angle and pops on the cool palette.
## Typography
- **Headline Font**: Bebas Neue (Google) — tall condensed display sans, single weight (400) but reads as poster-bold. Classic trade-storefront vibe.
- **Body Font**: DM Sans (Google) — humanist sans with a touch of warmth, balances the bold headline.
## Components
All hand-rolled in `_components/`. Same nine sections, plumbing-specific copy and icons (Droplet, Wrench, Waves, ShowerHead, PipeFitting analogies via Lucide).
1. **Navbar** — Mainline Plumbing wordmark, six service links, phone, blue "Schedule visit" pill.
2. **Hero** — "Leak detected. / Help dispatched." Star pill, leak emergency promise, two CTAs.
3. **ServiceAreas** — four neighborhood cards with plumbing hooks.
4. **WhyUs** — three features (camera-scope diagnosis, no surprise pricing, lifetime workmanship warranty).
5. **Stats** — same shape, plumbing numbers (leaks fixed, years in business, etc.).
6. **Services** — six plumbing service cards (leak repair, water heaters, drain & sewer, re-pipes, water filtration, fixture install).
7. **Reviews** — three plumbing-specific testimonials.
8. **Financing** — water heater financing CTA.
9. **Footer** — wordmark, two location offices, license number, social.
## Do's and Don'ts
- Do reserve `--primary` cobalt for clickable affordances and headline accents.
- Do lean into the cream canvas — it's the "calm" anchor, don't overwhelm with navy panels.
- Don't pull from `@repo/design-system/blocks` — this template is custom.
- Don't use thin or light font weights.