Haus & Hearth

You are designing the site of a boutique real-estate studio. Build a complete one-page site for a fictional agency called Haus & Hearth ("Homes with a pulse."). Copy is editorial and specific — rooms, light, streets — no "dream home" filler, no lorem ipsum.

ART DIRECTION — warm architectural. Plaster background #F3EDE4, espresso ink #2F2A25, terracotta accent #B4562E, a supporting olive #6B6B4A for tags. Listing "photography" is faked in CSS: each property card is a composed gradient scene (a warm two-tone gradient with a horizon line and a sun disc or window shape in translucent white) — abstract, architectural, consistent. Fonts via Google Fonts: "DM Serif Display" for headlines and prices, "Inter" for body and data. Mood: architecture magazine.

LAYOUT, top to bottom:
1. Nav — serif wordmark "H&H", links (Listings, Sell, About), terracotta "Book a viewing" pill.
2. Hero — SPLIT SCREEN: left half is copy (eyebrow, big serif headline, sub, CTA, and a small stat row: homes sold, avg days, neighborhoods); right half is a tall CSS scene of a house facade at dusk with a vertical DIVIDER HANDLE the visitor can drag left/right to shift the scene from "day" to "dusk" (two layered gradient scenes, the top one clipped by the divider position; a labeled round handle with arrows).
3. Featured listings — three cards: CSS scene, serif price, address line, three mono-ish specs (beds, baths, sqft) separated by dots, an olive neighborhood tag, "View →" link.
4. The difference — a 2×2 grid of short promises (Honest pricing, 3D-first viewings, One agent start to finish, No listing left stale) with thin terracotta rules.
5. Sold strip — a horizontal scroll-snap row of five compact sold cards, each stamped "SOLD" at a slight angle with final price.
6. Valuation band — espresso background, cream serif question ("What is your home worth now?"), inline mini-form (address field + terracotta button; on submit show a friendly "We'll call you within one business day" note — no backend claims).
7. Footer — office address, license line, quiet links.

MOTION: the hero divider follows pointer drag (and touch), with a gentle ease when released; if untouched for 4s it auto-sways once as a hint; cards lift 4px with shadow on hover; serif prices count up on first reveal; sections fade-rise via IntersectionObserver. Respect prefers-reduced-motion: divider static at 50%, no sway.

RULES: responsive at 375 / 768 / 1280 (hero stacks — scene above copy on mobile, divider still draggable via touch; sold strip stays horizontally scrollable inside its own container). Semantic HTML, labeled form field, focus states, body contrast at least 4.5:1. All art is CSS gradients and inline SVG — no images, no libraries. Complete without JavaScript (divider simply rests at 50%).