💄 Header - Mobile header flashes flag/Contact for one frame before hiding

Sub-issue of the AI for Business Leaders performance PBI. Highest blast radius of the set — schedule it last.

Description

CLS is 0.133 and the cause is already documented in the code. app/components/header-appearance.tsx carries this note:

client context → SSR shows full header for one frame before hiding flag/contact. Upgrade path if the flash matters: set x-pathname in middleware.ts and resolve appearance server-side in app/layout.tsx so the header renders correctly at SSR.

The header server-renders with the country flag and the Contact button present. After hydration, useMobileHeaderAppearance pushes the page's appearance into context and both are removed, reflowing the header and everything below it.

This page sets both flags in content/eventsv2/ai-for-business-leaders.json:

"appearance": { "hideFlag": true, "hideContactButton": true }

so it takes the full shift.

Proposed solution

Follow the upgrade path already written in the comment:

1. Set an x-pathname header in middleware.ts
2. Resolve the page's appearance server-side in app/layout.tsx and render the header correctly on the first paint
3. Keep the client context as the mechanism for client-side navigations

Because this touches middleware and the root layout, it affects every route — test broadly.

Acceptance criteria

1. The header renders in its final form on first paint, with no post-hydration flag/Contact removal
2. CLS on /events/ai-for-business-leaders is below 0.1
3. Client-side navigation between a page that hides the flag and one that doesn't still updates the header correctly
4. The homepage, consulting pages and event pages all render the correct header variant
5. No hydration mismatch warnings