Act as a senior front-end engineer. Make the site header for {{business_name}} sticky and have it shrink on scroll. Links: {{key_pages}}. Style: {{visual_style}}. Edit the existing header component; don't rebuild the nav. Sizes: at 360 and 768, 64px tall at the top and 56px scrolled; at 1280, 80px shrinking to 60px. Logo scales to about 0.85. Gutters 16 / 24 / 32px. How: - toggle a scrolled state from an IntersectionObserver on a 1px sentinel at the top, not a scroll listener - animate transform and opacity where you can; if height must change, use one 200ms ease-out transition and keep it off the main content's layout - add hysteresis (enter at 24px, leave at 8px) so it doesn't flicker at the threshold - optional hide on scroll down, reveal on scroll up, after 8px of travel; never hide while focus is inside the header or a menu is open Visual: transparent over the hero at the top, then the surface token with a 1px bottom border once scrolled; check text contrast at 4.5:1 in both states and over every hero image. Accessibility: - skip link as the first focusable element - scroll-padding-top equal to the scrolled header height, so anchor targets and focused elements are never hidden under it (WCAG 2.2 focus not obscured) - current page marked with aria-current="page" - 44px targets; nav labels 15 to 16px, weight 500 States: hover underline offset 4px, focus-visible ring, active link; long link labels in other languages don't wrap into two rows (collapse to the menu button earlier instead). Motion: 200ms ease-out; under prefers-reduced-motion the states switch instantly. Avoid: a frosted-glass header that makes text unreadable over busy images, a heavy drop shadow, a header taller than 80px, a jump in page content when it becomes sticky. Tell me the threshold values you chose and why.