Wagtail

You are designing the site for a pet-care business dogs drag their owners toward. Build a complete one-page site for a fictional service called Wagtail ("Walks, stays, and good-boy days."). Write all copy — playful but competent (owners are trusting you with family), no baby-talk overload, no lorem ipsum.

ART DIRECTION — biscuit warmth. Cream #FFF8EE, warm ink #33291E, biscuit-orange #E8823C as primary, sky blue #4E86C6 as the secondary accent. Everything rounded (20px+); cards with 2px ink borders and a slightly hand-drawn feel. A simple CSS paw mark (one circle + three toe dots) as the logo; tiny bone and tennis-ball inline-SVG icons. Fonts via Google Fonts: "Nunito" 800 for headings, "Inter" for body. Mood: golden-hour walk energy.

LAYOUT, top to bottom:
1. Nav — paw mark + wordmark, Services / Meet us anchors, an orange "Book a walk" pill.
2. Hero — headline with one word underlined by a hand-drawn SVG squiggle, one sentence, "Book a walk" CTA + "Meet & greet first" ghost, and a proof line ("2,400 walks — every dog came back happier").
3. Services — four rounded cards: Walks, Daycare, Overnights, Puppy visits — each with a one-liner, duration, price, and a tiny icon. One card wears a "most popular" collar-tag badge.
4. How it works — three steps (Meet & greet, Book in two taps, Get photo updates) — the photo-updates step is the emotional seller; give it a mini CSS phone-notification mockup.
5. The pack — three staff cards with gradient avatar circles, names, and one genuinely funny-but-competent line each.
6. Trust strip — insured, background-checked, GPS-tracked walks, treats-with-permission — four chips with icons.
7. Happy tails — three short owner quotes with pet names ("— Marge, on behalf of Biscuit").
8. Booking — labeled form (your name, pet's name, service select, dates) with the orange CTA; honest note it needs connecting.
9. Footer — service area, hours, a paw-print sign-off.

MOTION: tail-wag energy, controlled. The paw mark does one happy 8deg wiggle on load; hero pops in with a tiny overshoot; the squiggle draws itself after 500ms; cards tilt ±1.5deg alternately as they reveal; the notification mockup slides in once when its step appears; buttons squish 0.97 on press. Respect prefers-reduced-motion: no wiggles, plain fades.

RULES: responsive at 375 / 768 / 1280. Semantic HTML, labeled form fields, focus states, body contrast at least 4.5:1 (orange never carries body text). All art is CSS and inline SVG — no photos, no libraries. Complete without JavaScript.