/** * Prevents page-level horizontal scroll caused by intentional "full-bleed" * elements (sliders/carousels using width:calc(100% + Npx) with negative * margins to visually escape the content column, e.g. .seasky-team-members * and the homepage photo strip). Those components manage their OWN * horizontal scroll internally, but on narrow viewports the bleed amount * can still push an ancestor's scrollWidth past the viewport, dragging the * whole page (including sections below, like the footer) into a broken * horizontally-scrollable state. Clipping it here is a safety net, not a * substitute for fixing an individual component's bleed math. * * IMPORTANT: this must only touch , never . Setting `overflow` * (even just overflow-x) on turns it into its own scroll container * instead of the page using the viewport's root scroller, which silently * breaks `position: sticky` for every descendant (the sticky header included) * because its offset then resolves against the wrong scrolling box. * is exempt from that problem — the root element's overflow is handled * specially by browsers as the viewport's own scroll behaviour. */ html { overflow-x: hidden; width: 100%; max-width: 100vw; }