Stilte.

# Build a website in the "Stilte" 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 work, Practice, Material, Contact footer) and rename each section for this business

## Design: Stilte (architecture)
A dark, quiet, monumental site for an architecture studio, with a thin sans headline over a concrete interior divided into three columns.

The hero is a full-bleed concrete interior under a dark scrim, split by hairlines into three columns labelled Material, Form and Light. A tall, ultra-light headline and two sharp rectangular buttons sit below. Contrast does all the work: warm off-white on near-black, no colour accent.

Theme: dark. Palette: background #11100e, text #ece8e1, secondary text #a39c91, accent #ece8e1. Typefaces: Inter Tight + IBM Plex Mono.

Mood: monumental, silent, precise. Warm near-black page, off-white type, hairlines instead of boxes, sharp corners everywhere (no radius). There is no accent colour: the only emphasis is contrast between #ece8e1 and the muted #a39c91.

Palette: background #11100e, raised panel #181613, text #ece8e1, muted #a39c91, hairlines rgba(236,232,225,.18).

Type: Inter Tight for everything readable, weight 200 for display (tight tracking -.03 to -.04em, line-height about 1), 300 for body at 18px, 400 for small headings. IBM Plex Mono at 13px, uppercase, .12 to .3em tracking for every label, nav item, year, location and button. Display sizes: hero clamp(46px, 7.4vw, 124px) limited to 11ch, section headings clamp(38px, 5vw, 76px), manifesto clamp(32px, 4.9vw, 78px).

Hero: 100vh, concrete interior photo with a vertical dark gradient (about .7 to .96 opacity toward the bottom) so text passes contrast. Three equal columns divided by 1px hairlines run the full height; each carries a vertical mono label (Material / Form / Light) set with writing-mode vertical-rl at the top edge. Wordmark is a spaced light uppercase "STILTE" top-left, mono nav top-right. Headline bottom-left, one paragraph below, and two buttons at the bottom-right joined edge to edge: "The archive" outlined, "Start a project" filled off-white. Buttons invert on hover in 400ms.

Selected work: two columns (5fr / 6fr). Left, a sticky 4:5 project photo with a mono caption. Right, a big heading and a ruled index (year, title, location). Hovering or focusing a row indents it, tints it with the raised panel colour, reveals a one-line description (max-height and opacity, 700ms), swaps the caption and shifts the photo crop and zooms it slowly (1.8s). On touch devices descriptions are always visible.

Practice: raised-panel band with a large manifesto (second sentence in muted), then a four-column stat row divided by hairlines with 72px light numerals.

Material: square photo left (slow hover zoom), right a heading and three numbered principles (Roman numerals in mono) separated by hairlines.

Contact footer: giant "Start a project" left, underline-only inputs right, filled submit button, inline confirmation. Legal row in mono.

Motion: hero columns fade in, then headline, paragraph and buttons rise 34px with 140ms stagger, 1.1s, cubic-bezier(.22,1,.36,1). All other motion is hover. Reduced motion disables it.

Responsive: below 1000px columns stack and the photo unsticks; below 820px the nav becomes a Menu button opening a full-screen panel of large light links, and hero buttons stack full width.

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