Build a single-page, full-viewport (non-scrolling on desktop) dark "Offices" landing page for a fictional studio called **Meridian**. Three files only: `index.html`, `styles.css`, `script.js` — no frameworks, no build step, no dependencies beyond Google Fonts. Vanilla JS in an IIFE. ## Document - ``, ``, viewport `width=device-width, initial-scale=1.0`. - `Meridian — Offices` - Fonts via Google Fonts, with `preconnect` to `https://fonts.googleapis.com` and `https://fonts.gstatic.com` (crossorigin), then: `https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Mono:wght@400;500&display=swap` - **Anton** = display face (headline + country names). **IBM Plex Mono** = everything else. Fallbacks: `"Anton", Impact, "Arial Narrow", sans-serif` and `"IBM Plex Mono", "Courier New", monospace`. ## Structure (exact) `
` containing three blocks in a vertical flex column: 1. `
` — flex, `justify-content: space-between`, `align-items: baseline`: - `

/ OFFICES

` - `EST. 2014 — WORLDWIDE →` (em dash, → arrow) 2. `
` — 2-col grid `minmax(0,1.15fr) minmax(0,0.85fr)`, `align-items: start`, gap `clamp(1rem, 3vw, 3.5rem)`: - `

` with hard `
` line breaks: `THREE TIME ZONES.` / `ONE STANDARD` / `OF WORK.` - `
` (`justify-self: end`, `max-width: 28rem`) with two `data-type` paragraphs: - "Meridian operates from three hubs across Europe and North America. Wherever you are, there's a team nearby." (curly apostrophe ’) - `

Hover a location for the office details.

` 3. `
` — 3 equal columns, fills remaining height (`flex: 1 1 auto; min-height: 0`), gap `clamp(0.65rem, 1.4vw, 1.2rem)`. Three `
` cards, each with a staggered `style="--appear-delay: …"`: - `france` — 0ms — name **FRANCE** - `uk` — 110ms — name **UNITED KINGDOM** - `usa` — 220ms — name **UNITED STATES** Each card contains, in order: - `