Studio Kilo

You are the creative director of a small, expensive design studio. Build a complete one-page site for a fictional agency called Studio Kilo ("We make brands impossible to ignore."). Copy is short, cocky, and specific. No lorem ipsum.

ART DIRECTION — dark stage. Background #0C0B09, warm cream text #F5E9D6, burnt-orange accent #E8542F. A faint warm spotlight (radial gradient) sits behind the hero. Fonts via Google Fonts: "Archivo" 800 (expanded feel, tight leading) for display, "Inter" for body. Case tiles use rich duotone gradients as stand-in art (each project a different pair — teal/ink, magenta/ink, gold/ink, blue/ink). Mood: theater, appetite, craft.

LAYOUT, top to bottom:
1. Nav — wordmark "K—" left, two links and a cream outline "Start a project" button right.
2. Hero — an enormous two-line statement (clamp 48–110px) with one italicized word in the accent, a single-sentence sub, and a small row of three client-type tags.
3. Full-bleed marquee — "branding — web — motion — strategy —" repeating in outlined (text-stroke) display type, scrolling continuously.
4. Selected cases — a 2×2 grid of large tiles (16:10). Each tile: duotone gradient field, project name in display type, category tag, and a one-line result ("+212% signups"). On hover the gradient pans, the tile lifts 6px, and a cream arrow slides in.
5. Capabilities — three columns (Brand, Digital, Motion) each with four mono-ish list items and a hairline top rule.
6. Numbers strip — four stats in display type (years, projects, awards, coffee) counting up on reveal.
7. Manifesto band — one long sentence set large across the width, key phrases in accent italic.
8. Footer — huge "NEW BUSINESS" mailto, socials, tiny copyright.

MOTION: marquee scrolls at a steady linear pace and pauses on hover; hero words rise with a 90ms stagger; tiles reveal on scroll with a slight 1.02 scale settle; gradient pans on tile hover run 600ms ease; stats count once when visible. Respect prefers-reduced-motion: static marquee, no pans.

RULES: responsive at 375 / 768 / 1280 (case grid goes single column, marquee type shrinks). Semantic HTML, visible focus states, contrast at least 4.5:1 for body copy. All art is CSS gradients — no images, no libraries. Full content without JavaScript.