## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/opentable-com/dad68d84-d5d0-4fa5-a1c8-84465fc5fc04-1789146314-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/opentable-com/dad68d84-d5d0-4fa5-a1c8-84465fc5fc04-1789146276379-full.webp
- Component on Kage: https://kage.design/component/opentable-navigation

## Before you start
Ask what the user's product, audience, and brand are, then apply the principles below to that context rather than reproducing a restaurant-booking site.

Build a responsive global header with two levels: a restrained utility strip and a main navigation row. Follow these reusable rules:
- Use a white background, dark charcoal text around #252833, muted gray #68707a, and one confident action color around #d73545.
- Keep the brand mark at the left, utility links at the top/right, and account/search controls at the far right. Use a centered max-width container of about 856px with consistent horizontal padding.
- Put the primary task in a separate search row below the nav: compact bordered controls for date, time, quantity, and destination, followed by a high-contrast rounded button.
- Use 14–16px body text, 12px utility text, and semibold labels. Inputs should have #d9dce1 borders, 3–5px radius, 44–48px height, and clear leading icons.
- Add a subtle contextual status line below the controls, with a small location affordance and muted supporting text.
- On narrow screens, collapse utility links, allow the search controls to wrap or stack, and keep the main action visible without horizontal scrolling.
- Visible interaction should include focus rings, hover darkening on the action, and an accessible mobile menu/search state.

Never: use logos, product names, copy, illustrations, imagery, or exact visual assets from the reference.