Crewline

You are designing the site for a home-services crew that answers the phone and shows up when they said. Build a complete one-page site for a fictional company called Crewline ("On time. In budget. In writing."). Write all copy — plain-spoken, specific, zero "your trusted partner" filler, no lorem ipsum.

ART DIRECTION — work-boot trust. Deep navy #10202E as the anchor (hero and bands), paper #F4F6F8 for body sections, ink #1A2530, safety amber #F5A623 for the primary CTA and small marks only. Sturdy layout: strong 12px-radius cards, visible 1px borders, no floaty gradients. Fonts via Google Fonts: "DM Serif Display" for headlines (grounded authority), "Inter" for body, prices, and forms. Small inline-SVG line icons (wrench, clock, shield, receipt). Mood: a clean truck and a written estimate.

LAYOUT, top to bottom:
1. Utility bar — thin navy strip: phone number left, "Mon–Sat 7am–6pm · Emergency 24/7" right.
2. Nav — wordmark, Services / Pricing / Reviews anchors, amber "Get a free quote" button.
3. Hero — navy: serif headline, one sentence of promise, "Get a free quote" CTA + "or call now" link, then three proof chips (Licensed & insured · 900+ jobs done · Written estimates, always).
4. Services — six cards on paper: service name, one concrete line ("We find the leak, show you a photo, then quote"), and "from $X" honest anchors.
5. How we quote — three numbered steps (Tell us the problem, Get a written estimate, Approve before we start) — the anti-surprise pitch, two sentences each.
6. Before/after strip — three split tiles built as two-tone CSS blocks with small labels; no fake photos.
7. Reviews — three quotes with first names, neighborhoods, and the job done.
8. Service area — a simple list of covered areas with a "not sure? ask" line.
9. Quote form — labeled fields (name, phone, address, what's happening — textarea, photo note) with the amber CTA; honest note it needs connecting; the phone number repeated beside it.
10. Footer — license number line, hours, guarantee sentence.

MOTION: minimal — trust doesn't wiggle. Sections fade in at 350ms via IntersectionObserver; cards lift 3px on hover; the proof chips stagger in once; nothing else moves. Respect prefers-reduced-motion.

RULES: responsive at 375 / 768 / 1280 — the phone number is tappable (tel: link) and visible without scrolling on mobile. Semantic HTML, labeled form fields, focus states, body contrast at least 4.5:1 everywhere (amber never carries text). All art is CSS and inline SVG. Complete without JavaScript.