## ADDED Requirements

### Requirement: Nav renders logo linking to homepage
The navigation bar SHALL display the Qumo wordmark logo (`logo-wide.svg` inlined as SVG) on the left side, wrapped in an `<a>` tag linking to the locale-appropriate homepage (`/` for EN, `/nl` for NL). The logo fill SHALL use `currentColor` so it inherits the Snow text color on the Midnight nav background.

#### Scenario: Logo is visible on dark background
- **WHEN** the page renders with `Nav.astro` included
- **THEN** the logo SVG SHALL have `class="text-snow"` (or equivalent) so its paths render as Snow (`#F3F3F3`) on the Midnight background

#### Scenario: Logo links to locale homepage
- **WHEN** the user is on an English page and clicks the logo
- **THEN** the browser SHALL navigate to `/`

#### Scenario: Logo links to NL homepage on Dutch pages
- **WHEN** the user is on a Dutch page (`/nl/...`) and clicks the logo
- **THEN** the browser SHALL navigate to `/nl`

---

### Requirement: Nav renders three page links
The navigation bar SHALL render three links: **Services** (→ `/#services`), **AI Launchpad** (→ `/ai-launchpad`), **About** (→ `/about`). Label text SHALL come from the `nav.links` array in the locale content JSON. On Dutch pages, links SHALL point to `/nl#services`, `/nl/ai-launchpad`, `/nl/about`.

#### Scenario: EN nav links render with correct hrefs
- **WHEN** the page locale is `en`
- **THEN** the three links SHALL have `href` values `/#services`, `/ai-launchpad`, `/about` with labels "Services", "AI Launchpad", "About"

#### Scenario: NL nav links render with correct hrefs
- **WHEN** the page locale is `nl`
- **THEN** the three links SHALL have `href` values `/nl#services`, `/nl/ai-launchpad`, `/nl/about` with labels "Diensten", "AI Launchpad", "Over Ons"

---

### Requirement: Nav renders Connect CTA button
The navigation bar SHALL render a "Connect" CTA button on the right side linking to `/contact` (EN) or `/nl/contact` (NL), with the `wum-arrow.svg` chevron icon inline. The button SHALL be styled distinctly from nav links (border or background treatment matching the staging site).

#### Scenario: Connect button links to contact page
- **WHEN** the page locale is `en`
- **THEN** a button or link with label "Connect" and `href="/contact"` SHALL be present in the nav

#### Scenario: NL Connect button uses Dutch label and NL href
- **WHEN** the page locale is `nl`
- **THEN** the CTA SHALL display "Verbind" and link to `/nl/contact`

---

### Requirement: Nav renders language switcher
The navigation bar SHALL render a language switcher that links to the alternate locale version of the current page. The current locale SHALL be shown as active/non-linked; the alternate SHALL be a clickable link.

#### Scenario: EN page shows NL as switchable link
- **WHEN** the current page is `/about`
- **THEN** the language switcher SHALL show "EN" (active, non-linked) and "NL" linking to `/nl/about`

#### Scenario: NL page shows EN as switchable link
- **WHEN** the current page is `/nl/ai-launchpad`
- **THEN** the language switcher SHALL show "NL" (active, non-linked) and "EN" linking to `/ai-launchpad`

---

### Requirement: Nav is fixed and transitions background on scroll
The `<nav>` element SHALL be `position: fixed` at the top of the viewport with `z-index` above page content. On page load it SHALL have a transparent background. After the user scrolls more than 20px, it SHALL transition to a solid Midnight (`#102022`) background. The transition SHALL be smooth (CSS `transition-colors`).

#### Scenario: Nav is transparent on page load
- **WHEN** a page loads and `window.scrollY` is 0
- **THEN** the nav background SHALL be transparent

#### Scenario: Nav becomes solid after scrolling
- **WHEN** the user scrolls more than 20px down the page
- **THEN** the nav background SHALL be `bg-midnight` (solid `#102022`)

#### Scenario: Nav returns to transparent when scrolled back to top
- **WHEN** the user scrolls back to within 20px of the top
- **THEN** the nav background SHALL return to transparent

---

### Requirement: Nav collapses to hamburger menu on mobile
On viewports below `md` breakpoint (768px), the three nav links, language switcher, and Connect CTA SHALL be hidden. A hamburger button SHALL be shown. Clicking the hamburger SHALL reveal a full-width slide-in mobile menu containing all nav links, the language switcher, and the Connect CTA.

#### Scenario: Desktop nav links are hidden on mobile
- **WHEN** viewport width is below 768px
- **THEN** the desktop nav links SHALL have `class` including `hidden` (or equivalent responsive class)

#### Scenario: Hamburger button opens mobile menu
- **WHEN** the hamburger button is clicked
- **THEN** the mobile menu panel SHALL become visible and `aria-expanded="true"` SHALL be set on the button

#### Scenario: Hamburger button closes mobile menu
- **WHEN** the mobile menu is open and the hamburger button is clicked again
- **THEN** the mobile menu SHALL close and `aria-expanded="false"` SHALL be set on the button

#### Scenario: Mobile menu contains all nav items
- **WHEN** the mobile menu is open
- **THEN** it SHALL contain all three page links, the language switcher, and the Connect CTA
