Sonde One.

# Build a website in the "Sonde One" 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, Features, In the case, Specs, Reserve, Footer) and rename each section for this business

## Design: Sonde One (audio)
A light studio product page where you drag the headphones to rotate them and swap finishes live.

A warm-grey page with the product floating in a framed studio box. Drag the box and the image pans and turns in perspective while ROT and TILT readouts count along. Three finish swatches retint the product and update the FINISH readout.

Theme: light. Palette: background #eceae6, text #151515, secondary text #5f5b55, accent #9a5228. Typefaces: Archivo (expanded 125 width, 800) + Space Mono.

Light studio product page, warm grey, HUD readouts, one draggable device.

Palette: page #eceae6, raised surface #f6f5f2, ink #151515, muted #5f5b55, copper accent #9a5228 (passes AA as text on the page; white on copper buttons passes). Hairlines rgba(21,21,21,.16). Reserve panel is inverted: #151515 with #f3f1ed text and #bcb7ae secondary.

Type: Archivo variable with the width axis. Display is width 125, weight 800, uppercase, letter-spacing -0.01em. Hero h1 clamp(2.4rem, 4.7vw, 4.6rem), line-height 0.98, two lines "SOUND, / REIMAGINED." with a copper full stop. Section h2 clamp(1.9rem, 3.6vw, 3.4rem). Body Archivo 17px, lead 18px muted. Space Mono 14px uppercase, tracking 0.06em, for meta, readouts, eyebrows and swatch labels.

Hero (100svh): fixed 72px header with wordmark left and text nav plus a copper Reserve pill right. Top-left meta ("Sonde One / Studio view 360"), top-right readout table (ROT, TILT, FINISH) with hairline rows. Centre: a 4:3 framed box (radius 22px, corner tick marks, soft long shadow), width min(56vw, (100svh - 300px) x 1.333), holding the product photo scaled to 1.14. A black "Drag to explore" pill straddles its bottom edge. Headline sits bottom-left below the frame, and bottom-right holds a short paragraph plus three radio swatch pills (Titan, Copper, Graphite).

Device: pointer drag on the frame updates an unwrapped rotation angle. Image transform is translate3d(sin(a) x 4.5%), rotateY(sin(a) x 16deg), rotateX(tilt x -0.6deg), with inertia decaying by 0.93 per frame and tilt easing to zero. ROT shows the angle modulo 360, TILT the vertical drag, clamped to 18. Arrow keys work when the frame is focused. Swatches set a CSS filter on the image (none, sepia and hue shift for copper, greyscale for graphite) with a 600ms transition and rewrite FINISH.

Sections: Features is a two-column split, square detail photo left, copy right with a 2 x 2 grid of big expanded numerals (42 mm, 38 h, 46 dB, 268 g) each with a copper unit and a hairline above. In the case mirrors it: text and a three-row lettered list left, a 4:5 portrait photo right. Specs sits on the #f6f5f2 surface with a two-column definition list, mono labels left. Reserve is a rounded 28px black panel with headline left and a two-field underline form right; submit is prevented and shows an inline confirmation with a pair number.

Motion: hero entrance staggers meta, readouts, frame, headline, copy (1000ms, cubic-bezier(.22,1,.36,1), 110ms steps, 22px rise). Photos zoom 4% on hover over 1.2s. Pills lift 2px on hover. No scroll reveals. prefers-reduced-motion removes the entrance, inertia and transitions.

Responsive: under 960px the header collapses to a Menu button opening a full-width sheet, and the hero becomes a single column in order: meta, three-up readouts, square frame, headline, copy and swatches. Splits and the reserve panel stack; the spec list becomes one column. Sections use padding clamp(72px, 10vw, 150px) with side gutter clamp(20px, 3.4vw, 48px).

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