/* mobile-fixes.css - loaded ONLY by the Framer SSR pages (/works, /apps, /contact-us, /privacy-policy, /terms-and-conditions, /404). Those pages are generated output whose markup must not be edited by hand: the bundle re-renders the root on any hydration mismatch and reverts an HTML-only change. A stylesheet is the one safe lever - it lives in , which React never hydrates, and it changes no DOM the bundle compares. Scoped to phone widths on purpose, so the desktop rendering is left exactly as the bundle produces it. */ @media(max-width:780px){ /* Contact links in the Framer footer rendered 74x32 and 160x26, under the 44px minimum. `!important` is not laziness here: Framer emits multi-class selectors (`.framer-LtXVz.framer-xnsnrx`) that outrank any attribute selector, and those class names are content hashes that change on every publish, so matching them by name would be the fragile option. */ a[href^="mailto:"], a[href^="tel:"], a[href*="linkedin.com"]{ min-height:44px !important; display:flex !important; align-items:center !important; } }