Act as a mobile-first web designer and engineer. Build the mobile menu for my site, with these links: {{key_pages}}, and this main action: {{call_to_action}}. Style: {{visual_style}}. Change only the header and menu components. The toggle: a real button labeled "Menu" (text or visually hidden), 44 by 44px, with aria-expanded and aria-controls; its label changes to "Close" when open. The sheet: - slides in from the right, or up from the bottom if the menu is short, covering at least 85% of the width - behaves as a modal: focus moves to the first link, stays inside, Escape closes, focus returns to the toggle, the page behind is inert - body scroll locked without a jump; overscroll-behavior: contain - closes on route change and on backdrop tap Content: links at 20px with 52px rows; current page marked with aria-current and a visible indicator; nested groups as disclosure buttons with aria-expanded, not hover; the main action as a full-width 48px button pinned to the bottom, padded by env(safe-area-inset-bottom) so it clears the home bar; secondary items (account, language, phone) grouped at the bottom in 15px text. Breakpoint: test at 360 and 768; switch to inline links at the width where they actually fit, measured from the real labels; don't put a hamburger on desktop when everything fits. States: hover and pressed backgrounds, focus-visible rings inside the sheet; long labels wrap rather than truncate; 3 links or 20 links both look intended (group if more than 8). Motion: sheet 240ms cubic-bezier(0.32, 0.72, 0, 1), backdrop fade 200ms; under prefers-reduced-motion, fade only. No staggered link animations. Avoid: a tiny X in the corner, a full-screen gradient overlay, the page scrolling behind the menu, the main action buried at the top where the thumb can't reach. Return the change list with reasons.