/* Redeploy trigger: verifying mobile nav fix is live */ /* responsive-fixes.css GLOBAL, defensive responsive layer. Goal: no text or image should ever overflow the viewport width, on phone, tablet or laptop. Works alongside existing styles — uses only safe, universal selectors and does not remove/override colors, fonts, or layout choices already in place. Note: carousel/grid item sizing is intentionally NOT handled here — that layout (including .masonry, .release-grid, .press-grid and .carousel-arrow) is fully owned and injected at runtime by assets/js/cms-loader.js (see its #cms-carousel-style block) to avoid conflicting overrides between two competing stylesheets. Load this LAST in , after all other stylesheets, so it can act as a final safety net without being overridden by earlier rules. */ html, body { max-width: 100%; overflow-x: hidden; } * { max-width: 100%; } h1 { font-size: clamp(1.75rem, 8vw, 4rem); line-height: 1.15; overflow-wrap: break-word; word-break: break-word; hyphens: auto; } h2 { font-size: clamp(1.4rem, 5vw, 2.75rem); line-height: 1.2; overflow-wrap: break-word; word-break: break-word; } h3 { font-size: clamp(1.15rem, 3.5vw, 1.9rem); line-height: 1.25; overflow-wrap: break-word; word-break: break-word; } p, li, span, a, blockquote { overflow-wrap: break-word; word-break: break-word; } [style*="vw"] { max-width: 100%; overflow-wrap: break-word; word-break: break-word; } img, video, svg, picture, canvas { max-width: 100%; height: auto; display: block; } section, header, footer, main, article, div { max-width: 100%; } @media (max-width: 375px) { h1 { font-size: clamp(1.5rem, 9vw, 3rem); } } /* --- Targeted hero title fix --- Overrides the inline