Cornerstone

Build a real-estate agency or property listing site using the "Cornerstone" theme — Quiet stone-and-teal property site built around the listing card.

## Art direction
Understated so the properties photograph well. Stone-grey canvas, white cards, 10px radii, hairline borders, and teal for the search action, saved state and status pills. The listing card is the design system: one 4:3 photo, a status pill on the image, price, address, three specs, and an agent line. Everything else on the site is arranged around that card.

## Colour palette (use these exact values)
- Background: #F5F4F2
- Surface / cards: #FFFFFF
- Primary text: #1C1E22
- Secondary text: #6A6E76
- Accent (buttons, links, active state): #2F6F6B
- Text on accent: #FFFFFF
- Borders / dividers: #E1E0DD
Use exactly one accent. Everything that needs emphasis earns it through weight, scale or space instead of a second colour.

## Typography
- Headings: "Inter", system-ui, sans-serif
- Body: "Inter", system-ui, sans-serif
- Neutral and dense where it counts: 42px/600 page titles, 18px/600 listing prices, 14px muted for specs. Address lines are 15px/500. Keep tracking at 0 — this is a data surface wearing a nice coat.

## Page structure
1. Header: wordmark, nav for Buy, Rent, New homes, About, plus a 'Book a valuation' teal button.
2. Hero with a search panel over a wide photograph: a location input, type and price-range selects, and a teal Search button.
3. Featured listings: a three-column grid of listing cards with a 'View all' link.
4. A saved-search prompt band with one input and a subscribe button.
5. Browse by area: six area tiles with a photo, area name and property count.
6. Listing detail template: a gallery with a large image plus a thumbnail strip, price and address, a spec row (beds, baths, area, EPC), a description, a features list in two columns, a CSS-drawn map block, and a sticky agent contact card on the right.
7. Meet the team: a four-column grid with portraits, names, patch and phone numbers.
8. Valuation CTA band with a short three-field form.
9. Footer: offices, links, regulatory and ombudsman notices.

## Components and detailing
The listing card: white, 10px radius, 1px `#E1E0DD` border, a 4:3 image with a status pill top-left ('New', 'Under offer', 'Sold STC') and a save heart top-right; below it price at 18/600, address at 15/500, and a three-icon spec row in muted. The sticky agent card carries a portrait, a phone number, a 'Request viewing' button and an enquiry form. Selects are 44px with a 8px radius and visible labels.

## Motion
Restrained: cards raise their shadow slightly at 150ms on hover, the gallery cross-fades at 200ms, and the save heart fills with a small scale pop. The map does not animate on scroll.

## Copy and imagery
Every listing needs a price (or an honest 'Guide price'), a full address to street level, and the three headline specs. Descriptions are factual and room-by-room. Never publish a listing card without a status; stale 'Sold' cards should be filtered, not left ambiguous.

## Non-negotiables
- Responsive from 360px through desktop — no horizontal scrolling at any width.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.