/* ═══════════════════════════════════════════════════════════════ RESPONSIVE — all @media overrides, kept in original source order Rebuilt 2026-10-01 — see css/tokens.css header for context. ═══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* Phone number: the old icon-only-at-1400px tier was removed (ARAUK-3) -- it's now fully subsumed by the 1700px burger breakpoint below, which already hides .nav__phone span at every width it covers (1400 < 1700, so the old rule never had an effect left to add). Burger breakpoint moved from 1020px to 1300px (bug report: header links overflowing, clipping "Hire Talent"). Root cause: merging the utility links into .nav__right (6 primary nav links + 2 utility links + phone + 2 buttons) made the full desktop row genuinely require ~1280px of content width even with the phone number reduced to icon-only — measured `.nav.scrollWidth` vs `.clientWidth` across the old 1020-1280px band (e.g. 1244 vs 1024 at 1024px, still 25px over even at 1250px) before picking a new threshold, rather than guessing one. 1300px is the first round value confirmed overflow-free from there up. Below it, the burger/mobile panel takes over exactly as before — a clean mobile menu beats a desktop row that silently clips its last button. 1300 -> 1540 (spacing/responsive audit, this pass): a later pass added a 7th link ("Meet Us") to .nav__links without re-measuring this threshold, which silently reintroduced the same overflow this comment describes fixing -- reconfirmed the same way: nav.scrollWidth vs clientWidth with max-width removed, swept from 1300px up in ~30-50px steps. Still ~50-55px over at 1310-1450px, only reaching 0 right around 1513-1521px depending on viewport (the content width isn't perfectly flat because some gaps are clamp(...,vw,...) and haven't hit their max yet in that band). 1540 is the first round number with real margin above that, confirmed overflow-free. Everything below it still gets the same clean burger/mobile panel as before -- this only changes the exact width where the switch happens. 1540 -> 1700 (ARAUK-3, header/IA rebuild): see the matching .nav max-width comment in sections.css -- the longer mega-menu trigger labels need ~130-150px more room even after the old nav__utility row was removed; re-measured the same way (nav.scrollWidth vs clientWidth) before picking the new value. 1700 -> split into a compact tier + 1365 (client feedback in chat, 2026-10-21, with a screenshot of staging at an ordinary desktop width showing nothing but the burger): the 1700px threshold hid the whole nav -- categories, mega-dropdowns, sub-category links, all of it -- on every normal desktop/laptop screen, not just narrow ones. Ask was to show all of it in the header instead of collapsing it. No text changed, this is spacing only: below 1700px the phone number drops to icon-only and the secondary "Post a Vacancy" button hides (compact tier, directly below), which frees enough room to keep the full nav + dropdowns showing much further down than before. Re-measured the same way as every threshold above -- nav.scrollWidth vs clientWidth, .nav max-width cap removed, compact-tier rules applied -- swept down from 1440px: still 0px overflow at 1366px, 1300px and 1280px, then a jump to 60px over at 1200px once the gap clamps bottom out, so the real floor sits around 1260-1270px. 1365px is the first round, recognisable number (one below 1366, the single most common laptop/desktop width, so 1366 itself still gets the full nav) with genuine margin -- ~90-100px -- above that floor, not a bare-minimum fit. Below it, the same clean burger/mobile panel takes over exactly as before. 1365 -> split further, burger now 1179 (client feedback, same day, after confirming in DevTools it wasn't an emulation artefact): the client's own real desktop still showed the burger after the 1365px fix. Likely cause -- not reproducible directly, client is on a real device, not this environment -- is OS display scaling: a common 1920x1080 laptop at 125-150% Windows scaling reports an effective CSS viewport of roughly 1200-1360px despite looking full-width on screen, which 1365px didn't cover. Rather than keep guessing the exact number, added a second, deeper compact tier (1180-1365px) -- smaller nav font (.9rem -> .82rem), smaller dropdown chevrons, a smaller "Soon" badge, a slightly smaller logo, and tighter header-only side padding (.site-header .wrap, NOT the sitewide .wrap component used elsewhere on every page) -- to free up enough room to push the burger breakpoint down much further. Still no text changed, spacing/sizing only. Re-measured the same way again with this tier's rules applied: 0px overflow at 1152px and 1120px, 35px over at 1080px, so the real floor is ~1110-1120px. 1179px is the first round number with real margin (~60-70px) above that. This covers the scaled-laptop range above and leaves genuine tablet/phone widths (<=1179px) on the same burger/mobile panel as always. 1699 -> 1799 (client feedback 2026-10-21, Reed.co.uk reference: links read bold/thin, "fix empty space and increase font size... bold" -- see sections.css's .nav__links a comment for the matching font-size/weight bump, .9rem/600 -> 1rem/700): a bigger, bolder nav font needs more horizontal room, so the uncompacted "full" tier above this threshold -- phone number text and the "Post a Vacancy" button both showing, no gap/font reduction -- stopped fitting at its old 1700px floor. .nav's own max-width:1700px cap doesn't help here: it only stops the row growing past 1700px on very wide screens, it provides no minimum width, so between 1700px and wherever the new floor actually sits the uncompacted row overflowed regardless of viewport. Re-measured the same way as every threshold in this file (getBoundingClientRect on the rightmost nav element -- the Hire Talent button -- cap removed, swept upward): +54px over at 1700px, +8px at 1750px, clean at 1775px (-17px), so the real floor is ~1760-1765px. 1799 is the first round number with real margin (~35-40px) above that. .nav's own cap raised to match (1700px -> 1800px, same comment below) so the full tier isn't needlessly narrower than what it now actually needs. ARAUK-78 (2026-11-03): the phone number moved out of .nav__links entirely into the new .util-bar above the header, so the `.nav__phone span{ display:none }` rule this tier used to carry is dead -- removed with its HTML. "Post a Vacancy" (the only `.nav__right .btn--outline.btn--sm` this tier used to hide below the full 1800px tier) was removed too; that selector would otherwise now silently hide the new "Contact Us" button instead, which must stay visible at every desktop width -- removed rather than left to catch an element it was never meant to target. */ @media (max-width: 1799px){ .nav{ gap:clamp(.85rem,1.6vw,1.75rem); } .nav__links{ gap:clamp(.7rem,1vw,1.25rem); } } @media (max-width: 1365px){ .nav{ gap:clamp(.6rem,1.2vw,1.75rem); padding-block:.7rem; } .site-header .wrap.nav{ padding-inline:1rem; } .nav__links{ gap:clamp(.5rem,.8vw,1.25rem); } .nav__links a{ font-size:.82rem; } .nav__links svg{ width:8px; height:8px; } .nav__logo img{ height:28px; } .nav__right{ gap:.6rem; } } @media (max-width: 1179px){ .nav__links{ display:none; } .nav__burger{ display:flex; } .mob-panel{ display:block; } } /* ARAUK-78 (2026-11-03): phone-width overflow fix. .nav__right's new "Contact Us" button (added alongside Hire Talent + the burger) pushed the row's fixed content width to 458px -- measured via getBoundingClientRect on .nav__right with the browser tool: 0px overflow at 480px, 38px over at 420px, 83px over at 375px/360px (the exact widths this suite's "no horizontal overflow" tests check on every page). Hiding the Contact Us button below 480px removes exactly that much width and measures 0px overflow at both 375px and 360px; the mobile nav drawer already carries its own "Contact Us" link, so nothing is lost. */ @media (max-width: 480px){ .nav__right .btn--outline.btn--sm{ display:none; } } @media (max-width:900px){ /* narrower column = less room for a diagonal reveal to read cleanly, so the mobile scrim stays close to fully opaque across the whole width instead of clearing on the right — same "opaque much longer than you'd expect" lesson from the measurement, taken further */ .hero{ min-height:0; padding-block:0; } .hero__content{ padding-block:clamp(3rem,14vw,4rem); max-width:none; } /* spacing/responsive audit: this is the one eyebrow pill on the page long enough ("UK · Local & Global Recruitment", 32 chars) to wrap onto a second line below ~900px -- every other eyebrow on the page, including the even-longer "Certifications & Achievements", fits on one line at this width because .hero__content's own padding narrows its column more than other sections'. A wrapped pill badge reads as broken (the rounded shape stops looking like a pill once its content is two lines), so this scales the font/padding down just enough to keep it on one line at 360-390px -- verified empirically (36px single-line height) rather than guessed. Text itself is unchanged. */ .hero .eyebrow{ white-space:nowrap; font-size:.75rem; padding:.5rem .9rem .5rem .7rem; gap:.45rem; } .hero__img{ object-position:70% 22%; } .hero__scrim{ background: linear-gradient(100deg, rgba(var(--surface-dark-rgb),.97) 0%, rgba(var(--surface-dark-rgb),.9) 55%, rgba(var(--surface-dark-rgb),.62) 100%), linear-gradient(0deg, rgba(var(--surface-dark-rgb),.55) 0%, rgba(var(--surface-dark-rgb),0) 30%); } } @media (max-width:1100px){ .industry-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .industry-grid{ grid-template-columns:1fr; } .industry-banner{ flex-direction:column; align-items:flex-start; } } @media (max-width:1000px){ .resources-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .resources-grid{ grid-template-columns:1fr; } } @media (max-width: 900px){ .tabpanel__grid{ grid-template-columns:1fr; } .collage{ margin-top:1rem; } /* spacing/responsive audit: this used to jump straight from 3 columns to a single full- width column at exactly the width (iPad portrait, ~768-900px) where there's clearly room for 2 -- each card only holds a short icon+heading+1-2 line description, so a full-viewport-wide card at this breakpoint was mostly empty horizontal space, and stacking all three full-width ate a lot of extra scroll. .stats right below already does the sensible 2-up-at-tablet/1-up-at-phone step; pillars just hadn't been given the same treatment. Third card spans both columns so it doesn't sit alone, off-centre. */ .why__pillars{ grid-template-columns:1fr 1fr; } .why__pillars .pillar:last-child{ grid-column:1 / -1; } .footer__grid{ grid-template-columns:1fr 1fr; } .stats{ grid-template-columns:1fr 1fr; } } @media (max-width: 560px){ .stats{ grid-template-columns:1fr; } .why__pillars{ grid-template-columns:1fr; } .footer__grid{ grid-template-columns:1fr; } .tabpanel__roles{ grid-template-columns:1fr; } .totop{ right:1rem; bottom:1rem; width:42px; height:42px; } } @media (max-width:760px){ .visit__img{ object-position:70% 30%; } .visit__scrim{ background: linear-gradient(100deg, rgba(var(--surface-dark-rgb),.97) 0%, rgba(var(--surface-dark-rgb),.9) 55%, rgba(var(--surface-dark-rgb),.62) 100%), linear-gradient(0deg, rgba(var(--surface-dark-rgb),.6) 0%, rgba(var(--surface-dark-rgb),0) 28%); } } @media (max-width:460px){ .visit-row{ grid-template-columns:1fr; } } @media (max-width:900px){ .salary-calc{ grid-template-columns:1fr; } } @media (max-width:900px){ .cert-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:480px){ .cert-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:900px){ .expertise-grid{ grid-template-columns:1fr 1fr; } .ex-span-4,.ex-span-2,.ex-span-6{ grid-column:span 2; } } @media (max-width:640px){ .expertise-grid{ grid-template-columns:1fr; } .ex-span-4,.ex-span-2,.ex-span-6{ grid-column:span 1; } .calc-row{ flex-direction:column; } } @media (max-width:1100px){ .msg-grid, .video-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .msg-grid, .video-grid{ grid-template-columns:1fr; } } /* .video-grid--triple's own base rule (css/sections.css) is a compound selector (.video-grid.video-grid--triple) specifically so it beats the single-class rules above at every width -- which means those two rules above can't collapse it back down on narrower screens either. Matching compound selectors here, same breakpoints, so it still goes 3 -> 2 -> 1 columns like every other grid on this page. */ @media (max-width:1100px){ .video-grid.video-grid--triple{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .video-grid.video-grid--triple{ grid-template-columns:1fr; } } /* .case-grid (ARAUK-17): same 3 -> 2 -> 1 column collapse as every other card grid. */ @media (max-width:1100px){ .case-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .case-grid{ grid-template-columns:1fr; } } @media (max-width:640px){ .case-grid.case-grid--pair{ grid-template-columns:1fr; } }