Torque

You are designing the site for an auto shop people recommend to their parents. Build a complete one-page site for a fictional shop called Torque ("Fixed right. Explained plainly."). Write all copy — straight, technical-but-translated, zero scare tactics, no lorem ipsum.

ART DIRECTION — gunmetal garage. Background #141619, steel text #E8EAED, muted steel #9BA3AD, gauge-orange #E6641E for the primary CTA and needle accents. Panels #1C1F24 with 1px #2A2E35 borders and chamfered 8px corners. A subtle diagonal-line texture strip (CSS repeating-linear-gradient) as a section divider, like tread plate. Fonts via Google Fonts: "Archivo" 700/800 for display (uppercase, tight), "Inter" for body and prices. Small inline-SVG icons (wrench, gauge, shield-check). Mood: a shop floor you could eat off.

LAYOUT, top to bottom:
1. Utility bar — thin strip: phone + "Mon–Sat 8–6" left, "Loaner cars available" right.
2. Nav — wordmark, Services / Pricing / Reviews anchors, orange "Book a service" button.
3. Hero — split: left, display headline, one plain sentence ("We show you the part before we replace it"), CTA + tel: link, three proof chips (ASE certified · 12-month warranty · Photos with every job); right, a CSS gauge cluster — two circular gauges with orange needles at believable angles, odometer-style numbers.
4. Services — six panels: Oil & fluids, Brakes, Diagnostics, Tires, Detailing, Pre-purchase inspection — each with a one-liner and an honest "from $X".
5. The Torque promise — three numbered commitments (Photo proof before work, Written quote — no drift, You approve every dollar) with two sentences each.
6. Status updates — a mini CSS phone mockup showing two SMS bubbles ("Your brake pads: 2mm left — photo attached", "Approved ✓ ready by 4pm") — the differentiator, give it room.
7. Reviews — three quotes with first names and vehicle ("— Dana, '18 Outback").
8. Booking — labeled form (name, phone, vehicle year/make, what's it doing — textarea) with the orange CTA; note it needs connecting; phone repeated.
9. Footer — address, hours, warranty line.

MOTION: mechanical precision. Gauge needles sweep to position once on reveal (800ms ease-out); hero elements slide up 20px fast; panels reveal in a quick left-right cascade; the SMS bubbles pop in sequentially when visible; hovers brighten borders. Respect prefers-reduced-motion: needles pre-set, plain fades.

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