Agency Landing Page

Build a complete landing page for "Atelier North", an independent brand and digital design studio. Match my project's existing stack, conventions, and design tokens. If there are none, output a single HTML file with inline CSS and a few lines of JavaScript, with zero dependencies.

The goal: editorial confidence. Huge grotesk type, generous whitespace, a strict 12-column grid, and work that speaks first. One small orange accent used like a full stop. It should feel like a printed annual, not a template.

TOKENS
- Colors: bone #F2F0EB, ink #111110, muted #6B6A65, line rgba(17, 17, 16, 0.14), orange #FF4F00.
- Font: "Helvetica Neue", Helvetica, Arial, sans-serif for everything. Display weight 500, body weight 400. All numbers tabular.
- Page frame: max-width 1440px, centered, horizontal padding clamp(20px, 3vw, 40px). Grid: 12 columns, 24px gutter (16px under 760px).
- Links: ink, no underline; on hover a 1px orange underline grows from left to right (background-image linear-gradient(orange, orange), background-size 0 1px to 100% 1px, positioned bottom left, 300ms ease). Focus ring 2px orange, offset 4px.

1. HEADER (padding 24px 0, three columns on the grid)
- Columns 1 to 4: "Atelier North" 15px weight 500.
- Columns 5 to 8: "Copenhagen / New York" 15px muted.
- Columns 9 to 12, right aligned: nav links Work, Studio, Contact (15px, 24px gap), then 24px later a live clock "CPH 18:42" in 15px muted tabular numerals.
- The clock: JavaScript formats the current time in Europe/Copenhagen with Intl.DateTimeFormat (en-GB, hour and minute, 24-hour) and writes "CPH " plus the time with textContent, on load and every 15 seconds. If Intl or the time zone is unavailable, hide the clock. The element has aria-label "Current time in Copenhagen" and aria-live off.
- Under 760px: show only the name and the nav links.

2. HERO (padding 14vh 0 72px)
- h1 on two lines, each line wrapped in a span with overflow hidden so it can be revealed. Give each wrapper padding-bottom 0.2em and margin-bottom -0.2em so descenders (g, y) are never clipped by the tight line-height: "We design brands" / "that age well." clamp(56px, 11vw, 176px), weight 500, line-height 0.92, letter-spacing -0.055em, ink. The final period is orange.
- 64px below, on the grid:
  - Columns 1 to 4: label "Studio" (13px uppercase letter-spacing 0.12em muted), then 12px below "Independent brand and digital studio. Fourteen people, two cities, one standard." 18px line-height 1.45.
  - Columns 7 to 12: label "Services", then 12px below "Identity, Digital products, Packaging, Motion, Editorial" 18px line-height 1.45.
  - Under 760px both span all 12 columns, 32px apart.

3. SELECTED WORK (padding-top 48px)
- Label row: "Selected work" (15px weight 500) on the left, "2023 to 2026" (15px muted) on the right, then a 1px line, 16px below, and 32px of space before the grid.
- Four tiles on the grid with 64px row gap: A spans columns 1 to 7 with art aspect-ratio 4/3; B spans 8 to 12 with 4/5; C spans 1 to 5 with 4/5; D spans 6 to 12 with 4/3. Under 760px every tile spans 12 columns and uses 4/3.
- Each tile is one link. The art is a div with overflow hidden and an inner layer that scales to 1.03 on hover (700ms cubic-bezier(0.2, 0.7, 0.2, 1)). Below the art, 14px down, a caption row: project name (16px weight 500) on the left; discipline and year (15px muted) and a "↗" that fades in and shifts 3px up-right on hover, on the right.
- Art, built with CSS only (no images), each inner layer full size:
  - A "Halden Coffee", Identity, 2026: background #2B1D14. A 62%-wide cream (#EDE3D2) circle centered at 64% / 46%, a 9% orange circle at 30% / 70%, and the word "Halden" in Georgia italic, cream, clamp(36px, 5vw, 72px), positioned bottom-left at 6% / 8%.
  - B "Mercer Bank", Digital product, 2025: background #D9DEE3. Three overlapping rounded rectangles like cards in a wallet, each 26% tall with radius 18px: back #18243A at top 24%, left 19%, width 62%; middle #2E3F5E at top 31%, left 17%, width 66%; front #FFFFFF with a 1px rgba(24, 36, 58, 0.12) border at top 38%, left 15%, width 70%. On the front card, two 8px bars with radius 4px at left 8%: a 40%-wide #18243A bar at top 26% and a 22%-wide #C7CED6 bar at top 46% (percentages of the card).
  - C "Ostra Ceramics", Packaging, 2025: background #C9B8A4. Three arches along the bottom (border-radius 999px 999px 0 0), 26% wide each, heights 58%, 74%, 46%, colored #A0522D, #F2F0EB, #6B7A4A, 6% apart, centered as a group.
  - D "Field Studies", Editorial, 2024: background ink. "F/S" in bone, weight 500, font-size 34cqw (the art is a container: container-type inline-size), letter-spacing -0.06em, line-height 0.8, bottom-left at 5% / 4%. A 2px orange horizontal rule 30% wide at top 10%, left 5%.

4. CLIENTS (padding 120px 0 0)
- Label "Clients include" 13px uppercase letter-spacing 0.12em muted, 24px above the marquee.
- Marquee: one row, overflow hidden, with a 1px line above and below and 28px vertical padding. Inside, a track with the list rendered twice (the second copy aria-hidden="true"), animated translateX(0) to translateX(-50%) over 40s linear infinite. Items: Halden, Mercer, Ostra, Northwind, Lumen, Kite, Parallel, Oxide. Each clamp(28px, 4vw, 48px), weight 500, letter-spacing -0.03em, ink, followed by a muted "/" with 32px on each side.
- prefers-reduced-motion: no animation; the first copy wraps onto multiple lines instead, and the second copy is hidden.

5. NUMBERS (padding 120px 0 0)
- Label "The studio in numbers" (13px uppercase letter-spacing 0.12em muted), 32px above the columns.
- Three equal columns on the grid (each 4 columns; all 12 under 760px with 32px gap). Each: 1px line on top, 20px padding-top, number clamp(56px, 7vw, 96px) weight 500 letter-spacing -0.05em line-height 1, then 10px below a 15px muted label.
  "14" years independent / "120+" brands launched / "9" design awards.

6. CONTACT (padding 140px 0 0)
- Label "New business" 13px uppercase letter-spacing 0.12em muted.
- 20px below, a link "Start a project →" clamp(48px, 9vw, 140px), weight 500, letter-spacing -0.05em, line-height 0.95, ink, with the hover underline at 4px thickness instead of 1px, and the arrow shifting 8px right on hover (300ms).
- 56px below, on the grid: columns 1 to 4 "[email protected]" (18px, a mailto link); columns 7 to 9 "Copenhagen" label and "Bredgade 24, 1260 København K" (16px muted, two lines); columns 10 to 12 "New York" and "61 Greene St, New York, NY 10012". Under 760px each spans 12 columns, 24px apart.

7. FOOTER (padding 120px 0 32px)
- 1px line on top, 20px padding-top, flex, space-between, wrapping, 14px: "© 2026 Atelier North" muted; links Instagram, LinkedIn, Are.na (24px gap); "Back to top ↑" link.

MOTION
- Hero reveal: each h1 line slides up from translateY(125%) to 0 inside its overflow-hidden wrapper (125% so nothing peeks through the extra descender padding), 900ms cubic-bezier(0.2, 0.7, 0.2, 1), the second line 120ms after the first. The intro grid fades in at 500ms over 700ms.
- Work tiles fade in and rise 24px as one group at 700ms.
- Marquee as above. Hover effects as above.
- prefers-reduced-motion: no reveals, no marquee motion, no scale; hover underlines appear instantly.

ACCESSIBILITY
- One h1. "Selected work", "Clients include", "The studio in numbers", and "New business" are h2s (styled as described). Project names are h3s inside each tile link.
- Each art layer is decorative (aria-hidden="true"); the caption text names the project.
- The marquee's first copy is a real list; the duplicate is aria-hidden.
- Muted text passes 4.5:1 on bone.

NEVER
- Stock photos, mockup devices, gradients, drop shadows, or rounded cards around the work.
- Centered layouts, a hamburger menu at desktop widths, or more than one weight per text size.
- Orange anywhere except the h1 period, the hover underlines, the focus ring, and the two small marks in the art.
- Emoji, icons other than the two arrows, or lorem ipsum.