/* ============================================================ Ingxolo (Pty) Ltd — site-wide responsive safety net Local stylesheet (no CDN). Loaded last so it reinforces, never overrides brand styling. Keeps every page from overflowing on small screens and keeps media fluid. ============================================================ */ /* Predictable box model everywhere */ *,*::before,*::after{ box-sizing:border-box; } /* Nothing escapes the viewport horizontally. NB: use overflow-x:clip (NOT hidden) — `hidden` turns into a scroll container and silently breaks the sticky header, letting the hero bleed through on anchor landings. `clip` prevents horizontal scroll without creating a scroll context, so position:sticky keeps working. */ html,body{ max-width:100%; overflow-x:clip; } /* All media scales down, never distorts or overflows */ img,svg,video,picture,canvas{ max-width:100%; height:auto; } /* Let flex/grid children shrink below their content width (kills hidden overflow) */ *{ min-width:0; } /* Long words / URLs wrap instead of pushing the layout wide */ p,li,a,h1,h2,h3,h4,figcaption{ overflow-wrap:break-word; } /* Touch-friendly primary targets on phones/tablets */ @media (max-width:768px){ a.btn,.btn,.cta,button,.backbtn,.navlinks a{ min-height:44px; } } /* ------------------------------------------------------------ Equal-height two-column text sections (About, service detail): stretch both columns to the taller one and drop the shorter column's closing paragraph to the bottom so both end level. Only affects side-by-side layout; on stacked mobile it is inert. ------------------------------------------------------------ */ .about-grid,.svc-detail{ align-items:stretch; } .about-grid > *,.svc-detail > *{ display:flex; flex-direction:column; } .about-grid > * > p:last-child, .svc-detail > * > p:last-child{ margin-top:auto; }