/* ============================================================ responsive.css — shared responsive layer for every page Linked after colors_and_type.css in all HTML files. Uses !important so it reliably overrides inline grid/size styles. Breakpoint ladder: ≤1024 (small laptop) · ≤960 (tablet) · ≤720 (large phone) · ≤600 (phone) · ≤400 (small phone) ============================================================ */ /* ---- Global safety: no horizontal scroll, media never overflows ---- */ /* `overflow-x: clip` on BODY only — clips horizontal overflow without making body a scroll container (clip doesn't force overflow-y:auto) and leaves the root as the normal vertical scroller, so window.scrollTo still works. */ html { max-width: 100%; } body { max-width: 100%; overflow-x: clip; } img, svg, iframe, video, canvas { max-width: 100%; } * { min-width: 0; } /* let flex/grid children shrink instead of overflowing */ /* ---- Hide the visible scrollbar site-wide (scrolling still works) ---- */ html { scrollbar-width: none; -ms-overflow-style: none; } /* Firefox / old Edge */ html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; } /* WebKit */ /* ---- Justify body paragraphs site-wide ---- */ .body { text-align: justify; text-justify: inter-word; } /* keep the last line natural and avoid ugly gaps on very short lines */ .body { text-align-last: left; } /* ---- Fluid hero headlines on every page (overrides fixed px) ---- */ header h1 { font-size: clamp(1.9rem, 1.1rem + 4.1vw, 3.5rem) !important; line-height: 1.1 !important; min-height: 0 !important; } /* Fluid hero lead text */ header .lead { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem) !important; } /* ---- Small laptop (≤1024px): ease the densest 4-up rows ---- */ @media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(4, 1fr) !important; } } /* ---- Tablet (≤960px) ---- */ @media (max-width: 960px) { .nav-links, .nav-cta { display: none !important; } .nav-burger { display: block !important; } .hero-grid, .why-grid, .testi-grid, .contact-grid { grid-template-columns: 1fr !important; } .hero-grid { gap: 36px !important; } .why-grid, .testi-grid, .contact-grid { gap: 36px !important; } .svc-grid, .post-grid { grid-template-columns: repeat(2, 1fr) !important; } .stats-grid { grid-template-columns: repeat(2, 1fr) !important; } .values-grid { grid-template-columns: repeat(3, 1fr) !important; } .footer-grid { grid-template-columns: 1fr 1fr !important; } } /* ---- Large phone (≤720px): stack the compliance calendar body ---- */ @media (max-width: 720px) { .cal-row-body { grid-template-columns: 1fr !important; gap: 7px !important; } .cal-who { justify-self: start !important; } .post-grid { grid-template-columns: 1fr !important; } /* contact methods, deliverables, related */ .values-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ---- Phone (≤600px) ---- */ @media (max-width: 600px) { .svc-grid, .post-grid, .why-cards, .stats-grid, .footer-grid, .cover-grid, .cform-grid, .values-grid { grid-template-columns: 1fr !important; } .stats-grid > div { border-left: 0 !important; padding-left: 0 !important; } .stats-grid { gap: 20px !important; } } /* ---- Small phone (≤400px) ---- */ @media (max-width: 400px) { :root { --gutter: 18px; } } /* ---- Compact CTA band: stack + full-width button on small screens ---- */ @media (max-width: 600px) { .cta-band { flex-direction: column; align-items: flex-start !important; text-align: left; } .cta-band a { width: 100%; } }