/* ========================================================================== Responsive refinements Base styles are mobile-first (see main.css / assessment.css). This file layers in tweaks that don't fit cleanly beside their component. ========================================================================== */ /* Small phones */ @media (max-width: 380px) { .btn { padding: 13px 20px; font-size: .92rem; } h1 { font-size: 2rem; } .assess-card { padding: 24px 16px; } } /* Large phones / small tablets: buttons already stack full-width via main.css .hero__actions — no extra override needed here. */ /* Tablet */ @media (min-width: 768px) and (max-width: 1023px) { .career-grid { grid-template-columns: 1fr 1fr; } .footer-cols { grid-template-columns: repeat(3, 1fr); } } /* Ultra-wide */ @media (min-width: 1600px) { :root { --container: 1320px; } } /* Prevent any accidental horizontal scroll. NOTE: overflow-x must stay on only — putting it on as well breaks position:sticky for the site header (it makes body its own scroll container), so the header used to scroll away instead of staying pinned to the top. */ html { max-width: 100%; overflow-x: hidden; } body { max-width: 100%; }