Vibe Code a Veterinarian Website

Build a one-page veterinary clinic website as a single self-contained HTML
file (inline CSS and JS, no external dependencies except Google Fonts and
Unsplash images via their CDN).

═══════════════════════════════════════════════════════════════
BUSINESS DETAILS
═══════════════════════════════════════════════════════════════
- Clinic name: [CLINIC NAME]
- Lead vet: [NAME, DVM]
- Animals handled: dogs, cats, plus exotics (birds / rabbits / reptiles)
- Address: [FULL ADDRESS]
- Phone: [PHONE]
- After-hours line: [PHONE]
- Email: [EMAIL]
- Hours: [WEEKDAY / SAT / SUN]
- Specialties: wellness, vaccinations, dental, surgery, diagnostics,
 boarding, grooming, exotic pets
- Booking: form + click-to-call
- Nearest emergency animal hospital (always show address + phone)

═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: warm beige (#ead8c4), leaf green (#5a8f4a), gentle navy
 (#163046), peach accent (#f0987d). Override if user provides; derive
 variants for AA contrast on body.

═══════════════════════════════════════════════════════════════
DESIGN DIRECTION
═══════════════════════════════════════════════════════════════
- Warm, soft, calm. Pet-owner friendly. NOT cutesy-cartoon, NOT
 clinical-cold.
- Type pairing: rounded humanist sans for headings (Sora, Nunito, Outfit)
 + Inter for body. ONE italic accent in italic serif (Fraunces italic).
 NO script fonts.
- Eyebrow labels: uppercase, tracked .18em, leaf green, prefixed by a
 24px CSS ::before line in peach.
- Headlines: warm with ONE italic accent ("Compassionate care for *every
 pet*, *every visit*."). Italic words in peach.
- Soft rounded corners (16-32px), generous padding, gentle shadows.
- Icon system: 24x24 line icons, fill="none", stroke="currentColor",
 stroke-width 1.6, round caps. Cover: paw (geometric SVG, NOT emoji),
 bone-shape (line drawing), heart-line, shield, syringe, stethoscope,
 bird-line, rabbit-line, calendar, clock, pin, phone, mail, check, star.
- Icon containers: 48x48 rounded squares with leaf-tinted bg, flip to
 filled leaf with cream icon on hover.
- Motion: soft scroll fade-ins, gentle hover lifts (4px). No bouncing
 cartoon paws.

═══════════════════════════════════════════════════════════════
SECTIONS (in this exact order)
═══════════════════════════════════════════════════════════════

1. EMERGENCY BAR (top, dismissible)
 - Peach background, navy text
 - "After-hours emergency: [PHONE]" with click-to-call + small "Nearest
 ER hospital →" link
 - Dismissible × on the right (state persisted in sessionStorage)

2. FIXED NAV (glass beige translucent + backdrop blur)
 - Wordmark left | nav links | "Book a visit" peach pill CTA right

3. HERO
 - Two-column: text left, photo right (Unsplash: "vet examining golden
 retriever" or "cat on exam table") rounded 28px with peach gradient
 overlay bottom-right
 - Left: eyebrow with line marker, headline ("Compassionate care for
 *every pet*, *every visit*."), 2-line subhead, primary "Book a visit"
 CTA + secondary "After-hours line"
 - Floating pill on photo: "Accepting new pets, dogs, cats, and exotics"

4. SERVICES
 - Eyebrow + headline ("Caring for *every life stage*")
 - Auto-fit grid (minmax 280px) of 8 service cards
 - Each: 48x48 leaf-tinted icon badge + service name (sans display) +
 2-line description in prose + small uppercase tag chip (Wellness,
 Surgery, Boarding, etc.)

5. SPECIES STRIP
 - Eyebrow + headline ("We treat *who you love*")
 - 4-card horizontal row (stack mobile): Dogs / Cats / Exotic Pets /
 Wildlife (if applicable)
 - Each: 48x48 leaf-outline icon badge + species name + 1-line on what
 care looks like for that species

6. MEET THE VETS
 - Eyebrow + headline
 - 3 vet cards in grid
 - Each: portrait photo (rounded 20px), name (sans display), credentials
 "DVM" + specialty (Cardiology / Dermatology / Exotics, small chip),
 years in practice, 2-sentence warm bio
 - Real Unsplash veterinary portraits, natural, NOT staged with a perfect
 puppy in arms

7. NEW PATIENT WELCOME
 - Two-column: image left (clean exam room), text right
 - Right: eyebrow, headline, 4-step checklist with check-circle icons
 (call or book online → fill new-patient forms → bring records + ID →
 arrive 10 min early)
 - "Download new-pet packet (PDF)" anchor link

8. PRICING TRANSPARENCY
 - Eyebrow + headline ("Pricing *we'll never hide*")
 - 2-column list (single mobile) of typical costs
 - Each row: service name (sans) + price range in monospace gold ("$45 -
 $80")
 - 8-10 common items (annual exam, vaccinations bundle, dental cleaning,
 spay/neuter, X-rays, bloodwork)
 - Below list: "Estimates always provided before any procedure"

9. TESTIMONIALS
 - 3 quote cards in grid
 - Each: oversized opening quotation in muted leaf, quote body (specific
 pet name + species + situation, "Diagnosed Luna's lymphoma we'd
 missed for months", varied lengths), 5 peach SVG stars, separator,
 gradient-circle initials avatar + pet owner first name + last initial
 + pet name + species ("Sarah K., Luna, Border Collie")

10. AFTER-HOURS CARD
 - Peach-tinted card, navy text, calm not alarming
 - Eyebrow "WHEN TO CALL FOR HELP", headline
 - 4-item list with shield icons: signs of poisoning, severe breathing,
 bloat, prolonged seizure
 - Below: "Nearest 24/7 ER: [HOSPITAL NAME], [ADDRESS], [PHONE]" +
 click-to-call

11. PET HEALTH LIBRARY
 - Eyebrow + headline ("Resources for *every paw*")
 - 6-card grid of article previews (stack mobile)
 - Each: small thumbnail, category tag, title, 2-line excerpt, "Read →"
 link
 - Topics: heartworm, dental health, vaccine schedule, exotic pet diet,
 senior pet care, pet emergency kit

12. BOOKING FORM
 - Two-column: pitch left, form right
 - Left: eyebrow, headline ("Schedule in *under a minute*"), 3-bullet
 reassurance
 - Right: beige card with leaf border
 • Fields: pet name, species (select), breed, age, owner full name,
 owner email, owner phone, reason for visit (select: Wellness /
 Sick / Surgery / Exotic / Other), urgency (Routine / Soon /
 Urgent, call instead), preferred date
 • Submit peach button, full-width
 • Inline JS success message (preventDefault)

13. HOURS + MAP
 - Two-column: hours table left + after-hours info, Google Maps embed
 right (rounded 24px)
 - Map iframe via Google Maps embed URL (no API key)
 - Floating overlay: clinic name, address, "Get directions →"

14. FAQ
 - 6 collapsible <details>: "Do you take exotic pets?", "What if my
 pet has anxiety?", "Do you do payment plans?", "Are you AAHA
 accredited?", "Do you board pets?", "Can I switch from another vet?"

15. NEWSLETTER
 - Centered card on beige, leaf radial blob accents
 - Eyebrow "PET HEALTH NOTES", headline ("Monthly tips, *paw-tested*"),
 inline email input + peach submit + inline success

16. FOOTER (gentle navy)
 - Centered wordmark beige
 - Italic serif tagline (NOT handwritten, e.g., "Caring vets for [CITY]
 since [YEAR]")
 - Social row: peach-bordered glass circles (Facebook + Instagram if
 user provides)
 - Bottom: address + hours + after-hours line + AAHA-accredited typeset
 + copyright

═══════════════════════════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════════════════════════
- Single index.html, no build step
- JSON-LD `VeterinaryCare` schema in <head> with name, address, telephone,
 openingHours, medicalSpecialty: "Veterinary"
- CSS custom properties for palette at top
- Smooth scroll with scroll-padding-top to clear emergency bar + nav
- Real Unsplash images via CDN with ?w=900&q=80&auto=format&fit=crop
- Hero loading="eager", everything else "lazy"
- tel:/mailto: links throughout
- After-hours info accessible from every screen (sticky button or
 prominent header link)
- Responsive at 900px and 500px breakpoints
- WCAG AA contrast on body text
- Favicon: inline SVG data URI (paw mark, geometric, not emoji)

═══════════════════════════════════════════════════════════════
COPY VOICE
═══════════════════════════════════════════════════════════════
Warm, plain-language, never patronizing. Pets are family, write that way.
Specific over generic ("We see chinchillas, parrots, and bearded dragons - 
not just cats and dogs", not "we love all animals"). Avoid medical jargon
unless immediately defined. Testimonials should feel like real Google
reviews from pet parents, specific pet name + situation, varied lengths.

═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis (including paws / dogs / hearts emojis)
- No cartoon mascot vets or animated walking puppies
- No script/handwritten fonts (no Comic Sans)
- No fake stock photos of overly-bright-smiling vets holding perfect puppies
- No alarming red EMERGENCY banners
- No real AAHA / pet insurance logos, typeset names
- No "we love your pet" / "passion for pets" filler
- No exclamation marks in body copy
- No bullet lists in card copy (write as prose)


═══════════════════════════════════════════════════════════════
SEO & DISCOVERABILITY
═══════════════════════════════════════════════════════════════
Implement all of the following so the page ships production-ready for search
engines and social sharing. This is not optional; treat it as part of the
build, not an afterthought.

DO NOT INVENT DATA: never fabricate business names, addresses, phone or email, license or certification numbers, coordinates, prices, reviews or ratings, team members, photos, press mentions, or results and stats. If a detail is not provided, leave a clearly labeled {{TODO: ...}} placeholder — never a plausible-looking fake. Any form must POST to a real endpoint (Formspree, Web3Forms, Basin, or similar) or fall back to a mailto:/tel: link — never show a fake "success" message with no backend. Wrap every motion effect in @media (prefers-reduced-motion: reduce), and make sure any accent color used for text, links, or prices meets WCAG 2.2 AA contrast against its background.

1. TITLE TAG & META DESCRIPTION
   - <title> tag: "[Business Name] - [Primary Service] in [City]" (under 60 chars)
   - <meta name="description"> 150-160 chars, include the city/area, primary
     service, and a call to action (e.g., "Book online" / "Call now")
   - <meta name="robots" content="index, follow">

2. OPEN GRAPH & TWITTER CARDS
   - og:title, og:description, og:image (hero image), og:url, og:type=website
   - twitter:card=summary_large_image, twitter:title, twitter:description,
     twitter:image
   - Place all OG/Twitter meta in <head>

3. STRUCTURED DATA (JSON-LD)
   - Insert a <script type="application/ld+json"> block in <head> with
     @type: "VeterinaryCare" schema
   - Include: name, description, url, telephone, email, address
     (streetAddress, addressLocality, addressRegion, postalCode,
     addressCountry), image. Add geo, openingHoursSpecification, and priceRange ONLY when the user supplied real values — never invent them; and do NOT output aggregateRating or Review markup unless the user provides real, verifiable reviews (fabricated ratings violate Google's structured-data spam policy)
   - Add BreadcrumbList schema: Home > [Category] > [Business Name]
   - If the page has a FAQ section, add FAQPage schema with every Q&A pair

4. HEADING HIERARCHY FOR SEO
   - Exactly ONE <h1> per page — use the real, human headline the design calls for; put keywords in the <title> and meta, not the visible H1
   - Logical H2 > H3 nesting for every section; never skip a level
   - Section headings should include secondary keywords naturally
     (keep the section's real, human label; put keywords in the title and meta, not stuffed into headings)

5. IMAGE SEO
   - Every <img> must have a descriptive alt attribute that includes
     relevant keywords (NOT just "image1.jpg")
   - Format: alt="[what the image shows] - [Business Name] in [City]"
   - Use the client's own images, or neutral solid/gradient placeholders with a visible "replace with your photo" note — never hardcode Unsplash photo IDs (they often resolve to the wrong or trademarked image). Always set width + height (or aspect-ratio) to prevent layout shift

6. LOCAL SEO SIGNALS
   - Include full NAP (Name, Address, Phone) in the footer, matching the
     schema data exactly
   - Add a link to Google Maps with the business address
   - Use location-specific keywords in at least 3 section headings
   - If the page has testimonials, include the reviewer's city/area

7. TECHNICAL SEO
   - Canonical tag: <link rel="canonical" href="[PAGE URL]">
   - Language: <html lang="en">
   - Charset: <meta charset="UTF-8"> + viewport meta (already required)
   - All internal anchor links use descriptive text (not "click here")
   - Loading performance: critical CSS inline, fonts via display=swap,
     hero image eager, everything else lazy
   - Keep the CSS and JS readable and editable — do NOT minify (this file is meant to be customized by the owner)

8. CONTENT SEO SIGNALS
   - Write real, useful body copy (not just headings and bullet points).
     Each major section should have at least one paragraph of 2-3 sentences
     that describes the offering in natural language a search engine can parse.
   - Use the primary keyword once or twice where it reads naturally; keep the rest in the title tag and meta description, never stuffed into copy.
   - Include a clear call-to-action with anchor text that includes the
     service keyword (e.g., "Book your appointment" not "Click here").

═══════════════════════════════════════════════════════════════
DELIVERABLE
═══════════════════════════════════════════════════════════════
One polished HTML file (~70-80KB), production-ready. Include JSON-LD
schema. Show the file as a single code block and briefly summarize the
design decisions made.