Fathom.

# Build a website in the "Fathom" 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, Selected projects, Services, Clients, Start a project, Footer) and rename each section for this business

## Design: Fathom (agency)
A creative-studio page where a huge condensed headline sits behind a portrait and an italic serif line crosses in front of it.

Enormous Big Shoulders caps run edge to edge behind a feathered, masked portrait, and a giant italic serif phrase crosses the lower third of the image, so the hero reads in three depth layers. Below it: offset project cards that tilt toward the cursor, a plain services list that floods cobalt on hover, and a client strip of italic names.

Theme: dark. Palette: background #0d0d0d, text #f2efe9, secondary text #a9a59e, accent #4d6bff. Typefaces: Big Shoulders Display + Instrument Serif + Inter.

Dark, huge type, one portrait doing the layering.

Palette
- Page #0d0d0d, text #f2efe9, muted #a9a59e, hairlines rgba(242,239,233,.16).
- Cobalt #4d6bff is a fill (CTA button, service hover flood) with black #000 text (4.8:1). Where cobalt is text use the lifted #8ea0ff.

Type
- Big Shoulders Display 900, uppercase, for the hero headline (clamp(120px, 23.5vw, 420px), line-height .8), section heads (clamp(64px, 10vw, 160px)) and service titles (up to 104px).
- Instrument Serif italic for the crossing phrase (clamp(70px, 12.5vw, 210px)), project titles (30 to 46px), client names (34 to 72px) and the cobalt tail word in each section head.
- Inter 400 to 600 at 17 to 18px for body and UI. Small caps labels 13px tracked .14em.

Hero (height max(100svh, 760px), three z-layers)
- Layer 1: "WE CREATE" across the top edge, centred, nearly full width.
- Layer 2: the portrait, height about the full hero, centred slightly left of the axis, with a CSS mask made of two radial gradients (one on the head, one on the shoulders) so its black background dissolves into the page and the letters stay visible around the head while the head covers the middle letters.
- Layer 3: "visual worlds" in giant italic serif crossing the lower third of the portrait.
- Fixed nav: wordmark left, two city clocks (Lisbon, New York, Intl.DateTimeFormat) centred, links and a white pill "Start a project" right. Bottom: one line of studio copy left, cobalt pill CTA right.
- Entrance: each letter of the headline rises from 40% with a 60ms stagger (1.1s), portrait fades in at .35s (1.4s), serif phrase rises at 1s, footer row at 1.3s, all cubic-bezier(.22,1,.36,1).

Sections
- Selected projects: 12-column grid, card 1 spans 7 columns, card 2 spans 5 and starts 9vw lower, card 3 spans columns 3 to 10. Each has a 4:3 image, mono-style index, italic title and right-aligned discipline lines. On fine pointers the image plane tilts up to 7 degrees toward the cursor (perspective 1100px, .7s ease), and the photo scales 1.04.
- Services: four ruled rows (number, huge caps title, short description). Hover or focus scales a cobalt layer up from the bottom (.6s), text turns black, row shifts 14px.
- Clients: wrapped italic serif names, cobalt on hover.
- Start a project: a giant two-line link (caps plus italic word) with an email line under it.
- Footer: three columns.

Responsive
- Under 900px: clocks hide, nav becomes a Menu button with a full-screen list in 64px caps. The headline stacks to two lines at 28vw, the portrait sits low at 64% height, the serif phrase sits above the copy, cards stack to one column, service rows become two columns.
- prefers-reduced-motion disables all animation and tilt.

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