Hale & Marsh.

# Build a website in the "Hale & Marsh" design

You are a senior web designer and front-end engineer. Build one responsive, accessible landing page as a single self-contained HTML file (inline CSS and JavaScript, no frameworks, no build step; Google Fonts is the only allowed external request). Follow the design specification below closely: layout, type, palette, section structure and motion. Replace the demo brand with the business described here.

## The business
- Name: not given; invent a short, credible name and say so at the top of your reply
- What it offers: not given; ask one short question, or infer from the name
- Audience: not given; write for a smart, busy visitor
- Tone of voice: Confident and plain-spoken
- Sections: keep the design's own sequence (Hero sheet, Practice areas, Meet Elena Hale, How fees work, Testimonial, FAQ, Contact form, Footer) and rename each section for this business

## Design: Hale & Marsh (law)
A light, calm, trustworthy site for a small private-client law practice, built from rounded white sheets on a warm grey page.

The first screen is a rounded white sheet on a warm grey page, carrying a condensed serif headline that mixes roman and italic, a trust row of initials avatars with a 5.0 rating, and one clear call to book. A photograph of the meeting room sits in its own rounded frame beneath. Every section after it is a quiet card, list or accordion.

Theme: light. Palette: background #eeede9, text #1a1a18, secondary text #5c5a54, accent #7a5f28. Typefaces: Fraunces + Inter.

Mood: calm, human, unhurried. Warm grey page with white "sheets" that have generous padding and 24px radius. Nothing sharp, nothing loud. Serif for voice, sans for facts.

Palette: page #eeede9, surface #ffffff, text #1a1a18, muted #5c5a54, accent bronze #7a5f28 (used as text on light and for italic emphasis, 5:1 or better on both backgrounds), buttons #1a1a18 with white text, testimonial card #1a1a18 with #f3f1ec text. Hairlines rgba(26,26,24,.14).

Type: Fraunces with the optical size axis, weight 300 for display with tight tracking (-.03 to -.035em), line-height about 1, and italic 300 in bronze for the emphasised word ("actually", "fixed prices", "free call"). H1 clamp(44px, 5.9vw, 92px) with text-wrap balance; H2 clamp(36px, 4.6vw, 68px); list titles 26 to 36px at weight 400. Inter 400 to 600 for body at 17px to 18px and labels at 14px uppercase with .08em tracking in bronze.

Page: max width 1360px, 32px outer gutter (14px on phones).

Hero sheet: one white rounded sheet holds the header (serif wordmark with an italic bronze ampersand, text nav, black "Book a call" pill) and a two-column hero (1.4fr / 1fr). Left, the headline. Right, one muted paragraph, a trust row (four overlapping initials circles in soft tints, five bronze stars, "5.0 from 130 client reviews"), then a black pill "Book a free 15-minute call" and an underlined phone link. Beneath, the office photograph in a 24px frame at 21:9 with object-fit cover.

Practice areas: two columns, heading and short note left, a ruled list right (heavy top rule, hairline rows). Each row has a serif title, a one-line description and a serif fixed-fee price with a small caption. Rows slide 14px right on hover.

Meet Elena: white rounded card, portrait 4:5 in a 16px frame left, right a heading, two paragraphs, three serif figures (years, estates, average reply) and an italic bronze signature line.

How fees work: three white cards with a numbered circle, serif title, muted text and a bronze status line (Free, Agreed up front, Pay on completion). Cards lift 4px on hover.

Testimonial: desk photograph in a rounded frame beside a near-black rounded card with stars, a 36px serif quote and a citation. Text never sits on the photo.

FAQ: real details/summary elements, serif questions, a circular plus that rotates to a cross and turns black when open, muted answers.

Contact: white card, heading and phone left, form right with soft grey filled fields (14px radius), labels above, visible focus ring. Submit shows an inline thank you.

Motion: the hero staggers in (24px rise, 1s, 120ms apart, cubic-bezier(.22,1,.36,1)); everything else is hover, focus and the accordion. Reduced motion removes the entrance and transitions.

Responsive: below 1000px every two-column block stacks and the cards go single column; below 820px the nav collapses to a Menu pill opening a white dropdown card with large links (Esc closes).

## Images
The design uses full-bleed photography. Use placeholder <img> elements with descriptive alt text and file names under img/ (for example img/hero.jpg), sized with width and height attributes and object-fit: cover, and list every image you need at the end of the file in an HTML comment: file name, aspect ratio, and a one-line photo brief in the style of the design, so they can be shot or generated later.

## Requirements
- Copy: real, specific sentences for this business. No lorem ipsum. Short headlines, concrete claims, one clear call to action repeated at the end.
- Accessibility: WCAG AA contrast measured against the actual background (add a scrim under text on photos), body text at least 16px, visible keyboard focus, semantic landmarks, one h1, alt text, labelled form fields.
- Responsive: designed at 1440, 1024 and 390 pixels wide with no horizontal scrolling; the navigation collapses to a working menu button on small screens.
- Motion: one orchestrated hero entrance plus motion that answers the visitor; respect prefers-reduced-motion.
- Forms do not submit anywhere: prevent the default and show an inline confirmation.

## Before you answer
- Check the first screen at 1440x900 and 390x844 reads as a finished, premium page.
- Check every text colour against its background.
- Return the complete HTML file in one code block, then the image list, and nothing else.