## Overview
Keystone Locksmith — a 24/7 residential and commercial locksmith landing page. Caution-yellow primary on jet-black secondary surfaces, white canvas. Built around the "locked out, on the way in 30 minutes" promise. Hand-rolled `_components/`, mirrors the HVAC sibling structurally but every visual is locksmith-specific.
## Colors
- **`--background`** (white `#FFFFFF`): Page canvas and card surfaces.
- **`--foreground`** (jet black `#0A0A0A`): Body text and headlines.
- **`--primary`** (caution yellow `#FFC500`): The "call now" yellow. Buttons, highlights, headline accents. Industrial-warning yellow signals urgency without being alarmist.
- **`--primary-foreground`** (jet black): Text on yellow surfaces — yellow is too light for white text.
- **`--secondary`** (jet black): Hero overlay, stats strip, footer, financing card.
- **`--secondary-foreground`** (white): Text on black surfaces.
- **`--muted`** (`#F5F5F5`): Why-us and reviews section backgrounds.
- **`--accent`** (yellow): Star ratings.
## Typography
- **Headline Font**: Barlow Condensed (Google) — tall, narrow, military-precision display sans. Reads as "security and order".
- **Body Font**: Inter (Google) — neutral workhorse, pairs cleanly with the condensed headline.
## Components
All hand-rolled in `_components/`. Same nine sections as the HVAC sibling, locksmith-specific copy and icons throughout (Key, Lock, ShieldCheck, KeyRound, etc.).
1. **Navbar** — Keystone Locksmith wordmark, six service links, phone, yellow "Call now" pill.
2. **Hero** — "Locked out? / We're on the way." Star pill, 30-minute response promise, two CTAs.
3. **ServiceAreas** — four neighborhood cards with locksmith hooks.
4. **WhyUs** — three "why us" features (24/7 dispatch, licensed & bonded, written quotes).
5. **Stats** — 30 min response, 12 yrs in business, 4.9 rating, 24/7 dispatch.
6. **Services** — six locksmith service cards (lockouts, rekey, install, smart locks, safes, automotive).
7. **Reviews** — three testimonials with locksmith-specific scenarios.
8. **Financing** — commercial master-key program CTA.
9. **Footer** — wordmark, two location offices, license number, social.
## Do's and Don'ts
- Do reserve `--primary` yellow for clickable affordances and headline accents.
- Do alternate sections between white, muted grey, and jet black.
- Don't pull from `@repo/design-system/blocks` — this template is custom.
- Don't use thin or light font weights.