Kestrel 01.

# Build a website in the "Kestrel 01" 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, Engineering, Ride, Specs, Test ride, Footer) and rename each section for this business

## Design: Kestrel 01 (e-bike)
A dark telemetry-led product page with a centred bike and live drifting readouts.

An expanded-caps headline sits above a centred, edge-faded product photo, flanked by live readouts: a large speed number, power, assist modes, cadence, lean, range and a segmented battery. Values drift within realistic ranges and react to the assist mode buttons.

Theme: dark. Palette: background #0a0908, text #f1ece6, secondary text #a39b92, accent #ff6a2b. Typefaces: Syne (700, 800) + JetBrains Mono + Inter.

Dark, near-black product page with orange telemetry. One hero device: live readouts around a centred bike.

Palette: background #0a0908, raised panel #141210, text #f1ece6, muted #a39b92, single accent #ff6a2b (also the fill on pills, with #0a0908 text for contrast). Hairlines rgba(241,236,230,.14).

Type: Syne 800 uppercase for display (wide natural letterforms), Syne 700 for card titles and the pull quote, JetBrains Mono for all readouts, labels and numerals, Inter 17px body and 18px lead. Hero h1 clamp(2rem, 4.3vw, 4rem), two centred lines, second line in orange: "The road, / re-engineered". Labels are mono 13px uppercase with 0.1em tracking.

Hero (100svh, min 680px): fixed 72px header with wordmark and a "Test ride" orange pill. Headline centred at 96px from the top. The bike photo is centred and bottom-aligned, width min(100vw, (100svh - 150px) x 1.792), with a CSS mask that fades its left, right and top edges into the page so the dusk skyline dissolves into black. A 1px orange ground line with faded ends sits at 83.6% of the image height, under the wheels. Left telemetry column (270px, bottom 52px): SPEED label, huge mono number (clamp 3.4 to 5.6rem, tabular) with km/h, a POWER row, and three toggle buttons Eco / Sport / Boost. Right column (250px): hairline rows for CADENCE, LEAN, RANGE, BATTERY and ten segments that light in orange.

Live data: a 900ms tick moves each value toward a target with small noise. Speed drifts inside the mode band (Eco 15 to 22, Sport 15.5 to 31, Boost 22 to 38 km/h), power follows speed, cadence stays 84 to 97 rpm, lean swings about 9 degrees, battery drains slowly and range scales with it. Pressing a mode clamps values to its band immediately. With reduced motion the tick is off and values stay static.

Sections: Engineering is a two-column split, square carbon detail photo left, right an h2, a lead and a three-item numbered list (mono orange numerals, Syne titles, hairline dividers). Ride is a full-bleed photo (min-height min(86svh, 760px)) with a left-to-right dark gradient scrim and a pull quote in Syne 700 with attribution. Specs is a 3 x 2 grid of cells separated by 1px lines inside a rounded 16px border, each with a mono label, a large mono value with an orange unit and a muted caption. Test ride sits on the #141210 panel: intro left, form right (name, email, city select, rider height, orange submit). Submit is prevented and shows an inline confirmation.

Motion: hero entrance staggers headline, bike, left and right telemetry, 1100ms, cubic-bezier(.22,1,.36,1), 120ms steps, 24px rise. Photos scale 4% on hover. Pills lift 2px. No scroll reveals.

Responsive: under 960px the header becomes a Menu button with a dropdown sheet. The hero stacks: headline, then the bike at 130% width with edge fades, then the telemetry blocks as full-width hairline lists. Split, book and spec grids collapse to two columns then one under 520px.

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