# Implementation Summary

## Tech Stack
- **Vite 6** + Vanilla HTML/CSS/JS (no framework)
- **Archivo** (Google Fonts, expanded width, weight 900) for headlines
- **Inter** (Google Fonts, weight 400) for body text

## Project Structure
```
├── index.html              # Single page with all 5 screens
├── package.json
├── vite.config.js
├── public/
├── src/
│   ├── main.js             # Scroll reveal, smooth scroll, header scroll
│   ├── style.css            # Master @import file
│   ├── css/
│   │   ├── reset.css        # Modern CSS reset
│   │   ├── tokens.css       # Design tokens (colors, type, spacing, grid)
│   │   ├── base.css         # Typography classes (.h1, .h2, .h3)
│   │   ├── grid.css         # 12-col grid + utilities
│   │   ├── components.css   # Buttons, annotations, hairlines
│   │   ├── header.css       # Sticky header
│   │   ├── hero.css         # Screen 1
│   │   ├── manifest.css     # Screen 2
│   │   ├── journal.css      # Screen 3
│   │   ├── cases.css        # Screen 4
│   │   ├── services.css     # Screen 5 (accordion)
│   │   ├── footer.css
│   │   └── animations.css   # Scroll-driven + IntersectionObserver fallback
│   └── assets/
```

## Running
- `npm run dev` — development server with HMR
- `npm run build` — production build to `dist/`
- `npm run preview` — preview production build

## Design Decisions
- Native `<details name="accordion">` for one-at-a-time accordion (zero JS)
- CSS `animation-timeline: view()` with IntersectionObserver fallback
- Colored placeholder blocks instead of images (swap with `<img>` later)
- BEM-lite class naming