How to build the Archistry hero.

Cinematic slow dolly forward along a wooden boardwalk toward a single-story modern glass pavilion house at dusk. Flat cantilevered dark roof, floor-to-ceiling glass on every wall, warm amber interior light showing a library wall and low sofas. A thin line of warm LED light runs along the boardwalk handrail. Reflecting pool and manicured lawn either side, mature autumn trees behind, deep blue-violet sky. No people, no text, no camera shake. Photoreal architectural film, 4K, shallow depth of field, seamless loop.

Build a single-page real estate agency landing site called "Archistry" as one self-contained index.html with inline CSS and minimal JS. No frameworks, no build step, no external dependencies except Google Fonts. It deploys as a static site to Cloudflare Pages.

HERO (the whole point of the page):
- Full-viewport (100dvh) hero with a muted, autoplaying, looping background video: assets/hero.mp4 with assets/hero.jpg as poster. object-fit: cover. If prefers-reduced-motion, show the poster only.
- A dark gradient scrim from the bottom-left corner (rgba(10,12,16,.75) → transparent at ~60%) so the text reads over the bright glass.
- Text block anchored bottom-left with a 56px gutter, max-width 560px:
  - eyebrow: a 6px dot + "Top Rated · Real Estate Agency", 12px, letter-spacing .12em, uppercase, white at 85%
  - h1: "A smarter way to sell your home", two lines, 64px on desktop / 40px mobile, weight 600, line-height 1.02, letter-spacing -0.02em, white
  - sub: "Helping real estate professionals promote listings and sell homes with confidence.", 17px, white at 80%, max 44ch
  - two actions side by side: a pill button "Contact us" (white at 14% background, 1px white-at-25% border, blur backdrop, white text) and a plain text link "What we do →"
- Navigation over the video, fixed, 72px tall, transparent with no border: logo mark + "Archistry" wordmark left; centered links About us · Properties · Agents · Services · Blogs at 14px white-at-85%; a "Contact us" pill on the right (same style as the hero button). On scroll past 40px the nav gains a rgba(10,12,16,.6) background with backdrop-filter blur(16px).

TYPE AND COLOR:
- Font: Inter (400/500/600) for everything. No serif. No decorative fonts.
- Palette: near-black #0B0D10 background below the hero, off-white #F5F4F0 text, warm amber accent #E8A24A used only for the eyebrow dot and hover states. Nothing else colored.

BELOW THE HERO (keep it quiet; the hero carries the page):
1. A one-line proof strip: three stats (homes sold, average days on market, client rating) as large numerals with small labels, separated by hairlines.
2. "Properties": a 3-column grid of 6 listing cards (image, price, address, beds/baths/sqft), images from assets/listings/01.jpg … 06.jpg, cards with 12px radius and no borders, hover lifts 4px.
3. "Agents": 4 portrait cards, name and role only.
4. "Services": three short columns (Marketing, Pricing, Negotiation), each a heading and two sentences.
5. Contact: a form with name, email, message and a submit button; the form posts to /api/contact (leave a TODO comment) and shows a "Sent" state client-side.
6. Footer: wordmark, the five nav links, © year.

QUALITY BAR:
- Responsive down to 360px; the hero text block becomes full-width with a 24px gutter; the nav links collapse into a "Menu" button that opens a full-screen overlay.
- Visible keyboard focus on every interactive element (2px #E8A24A outline, 3px offset).
- Lighthouse-clean: lazy-load every image below the hero, width/height on all images, preload the poster, video preload="metadata".
- No lorem ipsum: write real copy in a calm, specific, non-salesy voice (sentence case, active verbs, no exclamation marks).
- Use placeholder blocks with the exact asset filenames wherever an asset is missing, and list the required assets in a comment at the top of the file.