Meridian

Build a professional-services company website using the "Meridian" theme — Navy-and-gold corporate site that reads as competent before you read a word.

## Art direction
Institutional confidence, not flash. A cool grey canvas, white cards, and navy type that is nearly black. The gold accent is a rule under an eyebrow, a button fill, and a link underline — nothing more. Corners are 4px, shadows are a single tight 1px-blur hairline, and the grid is visibly regular. Photography is real people in real offices, colour-graded cool.

## Colour palette (use these exact values)
- Background: #F6F7F9
- Surface / cards: #FFFFFF
- Primary text: #0E1B2E
- Secondary text: #5A6B80
- Accent (buttons, links, active state): #B8892B
- Text on accent: #FFFFFF
- Borders / dividers: #DCE2EA
Use exactly one accent. Everything that needs emphasis earns it through weight, scale or space instead of a second colour.

## Typography
- Headings: "Libre Franklin", "Helvetica Neue", Arial, sans-serif
- Body: "Libre Franklin", "Helvetica Neue", Arial, sans-serif
- Restrained and even: 48px/600 headlines at -0.02em, 17/1.7 body, and section eyebrows at 12px uppercase in accent with +0.14em tracking. Never exceed three type sizes in one section.

## Page structure
1. Utility bar: locations, phone number and a language switcher in 12px muted.
2. Header: wordmark left, six nav items with dropdown mega-menus, and a 'Talk to us' accent button right.
3. Hero split 50/50: an eyebrow, a headline naming the outcome, two sentences, a primary and a text CTA, and a photograph on the right in a 4:3 frame.
4. Credibility strip: six client wordmarks in monochrome on a white band.
5. Practice areas: a six-tile grid, each with an accent rule, a title, two lines and a 'Learn more' arrow link.
6. Case study feature: a full-width navy band with a white pull-quote, three outcome metrics, and a client logo.
7. People: a four-column team grid with portraits, names, titles and LinkedIn links.
8. Insights: three latest articles with a category eyebrow, a title and a date.
9. Contact: a two-column split — a five-field form on the left, and offices with addresses on the right.
10. Footer: five link columns, regulatory/registration text, and legal links.

## Components and detailing
Buttons are 46px with a 4px radius; primary is solid accent, secondary is a navy 1px outline. Cards are white with a 1px `#DCE2EA` border, no shadow, and a top accent rule that appears on hover. Form fields are 48px with visible labels above them — never placeholder-only. The mega-menu is a white panel with three columns and a hairline top border.

## Motion
Conservative. 200ms fades on menu open, a 1px border colour change on card hover, and nothing on scroll except a sticky header that condenses after 80px. No parallax and no counters that animate.

## Copy and imagery
Outcome-first and evidence-heavy: name the client problem, the work, and the measurable result. Use real titles and credentials for people. Avoid the words 'solutions', 'synergy' and 'best-in-class'; a sentence a client could repeat to their board is the bar.

## 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.