/* Cross-browser + small-device compatibility layer. Loaded LAST on every page so it wins on equal specificity. Everything here is a fallback or a mobile correction — no new design. */ /* iOS inflates text in landscape unless this is pinned. */ html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } /* iOS Safari cannot honour background-attachment:fixed — it either ignores it or repaints the whole gradient every frame. Scroll it on touch devices. */ @media (hover:none), (max-width:900px){ body{ background-attachment:scroll !important; } } /* 100vh on iOS includes the address bar, so full-height sections overflow and cut their own content off. svh is the stable visible height; unlike dvh it does not resize mid-scroll, which matters for the GSAP-pinned sections. */ @supports (height:100svh){ #hero{ min-height:100svh; } .horizons-pin, .horizons-track, .horizon, .story-pin{ height:100svh; } } /* The scrim under .svc .photo existed for photographic art. Every service row is now a flat illustration, so it is switched off unconditionally instead of via :has(), which needs Safari 15.4+. */ .svc .photo::after, .svc.flip .photo::after{ display:none !important; } /* Form controls: strip the iOS/Safari native chrome that overrides our styling, and keep the 16px floor that stops iOS zooming the page on focus. */ input, select, textarea, button{ -webkit-appearance:none; appearance:none; border-radius:0; } input, select, textarea{ font-size:16px; } input, select, textarea, button{ -webkit-tap-highlight-color:transparent; } select{ background-image:none; } /* Safari applies its own inner shadow to inputs on iOS. */ input, textarea{ -webkit-background-clip:padding-box; background-clip:padding-box; } /* Safari needed the prefix for sticky in older versions — but this MUST stay inside the desktop range. Unmediated (and loading last) it overrode the `@media (max-width:980px){ .fs-card{ position:static } }` fallback in neo-styles.css and broke the stacked-card layout on phones. */ /* Both breakpoints now declare the -webkit- prefix themselves, so this only needs to cover the desktop rule. */ @media (min-width:981px){ .fs-card{ position:-webkit-sticky; position:sticky; } } /* Nothing may push a horizontal scrollbar on small screens. NOT on : overflow-x:hidden there turns the root into a scroll container, which makes every `position:sticky` resolve against it instead of the viewport — that silently killed the services card stack. body already carries overflow-x in neo-styles.css; `clip` is used here because, unlike `hidden`, it does not create a scroll container. */ body{ max-width:100%; }@supports (overflow-x:clip){ body{ overflow-x:clip; }} img, svg, video, canvas, iframe{ max-width:100%; } /* ── Small-device layout guards ─────────────────────────────────── */ @media (max-width:600px){ .wrap{ padding-left:20px; padding-right:20px; } h1.hero-h, h1.page-h{ font-size:clamp(30px,9vw,44px); } .fs-h, .section-head h2, .split h2, .final-cta h2, h2.section-h2{ font-size:clamp(26px,7.5vw,36px); } section{ padding-top:64px; padding-bottom:64px; } .stat-grid{ grid-template-columns:1fr 1fr; } .hero-ctas{ flex-direction:column; align-items:stretch; } .hero-ctas .btn{ justify-content:center; } /* Tap targets: 44px minimum. */ .btn, nav.top a, .seg button, .why-pill{ min-height:44px; display:inline-flex; align-items:center; } } /* ── Footer link alignment ────────────────────────────────────── `.ft-col a` is display:block in neo-footer.css so each link owns a line. The tap-target rule above used to include it and set display:inline-flex, which is an INLINE box — every link in a column collapsed onto one running line ("About Us Leadership Careers Blog"). display:flex keeps the 44px box while staying block-level, so the column reads as a column again. Applied to 900px, not 600px: the footer already collapses to two columns at 900 and tablets are touch devices, so the links between 601-900px need the same 44px floor. .ft-legal and .ft-kv were never covered at all — they sat at 17-19px, the smallest targets on the page. */ @media (max-width:900px){ .ft-col a{ display:flex; align-items:center; width:auto; min-height:44px; padding:4px 0; } .ft-legal{ gap:8px 26px; } .ft-legal a, .ft-kv a{ display:inline-flex; align-items:center; min-height:44px; } /* Long addresses must be allowed to break rather than force a scrollbar. */ .ft-kv a{ word-break:break-word; } } /* At the narrowest sizes nowrap on the copyright and the legal links is what pushes the bottom bar past the viewport. Let both wrap. */ @media (max-width:420px){ .ft-bottom > span, .ft-legal a{ white-space:normal; } .ft-legal{ flex-direction:column; gap:0; } }@media (max-width:380px){ .stat-grid, .ft-grid{ grid-template-columns:1fr; } .wrap{ padding-left:16px; padding-right:16px; }} /* Respect the OS "reduce motion" setting — required for accessibility and it also spares low-end devices the pinned-scroll and globe work. */ @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .reveal{ opacity:1 !important; transform:none !important; } } /* Print: the site is a dark theme; make a printed page legible. */ @media print{ nav.top, .nav-mark, #scroll-progress, #globe-canvas, .h-progress{ display:none !important; } body{ background:#fff !important; color:#111 !important; } } /* ── Mobile navigation ──────────────────────────────────────────── */ .nav-burger{ display:none; } /* 980px, not 900: neo-styles.css collapses .nav-links at 980, and the burger must appear at the SAME point or 901–980px (iPad portrait, small laptops) has no nav control at all. 980 is the widest of the three collapse points in the project (neo-page.css 900, Services/Contact inline 820), so it is the safe single one. */ @media (max-width:980px){ .nav-links{ display:none !important; } /* With .nav-links hidden, an auto margin on the burger absorbed ALL free space, so justify-content:space-between had nothing to distribute and the logo and .nav-right collapsed together at the left. The auto margin belongs here. */ nav.top .nav-right{ margin-left:auto; } .nav-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0 10px; margin-left:12px; background:transparent; border:0; cursor:pointer; z-index:120; position:relative; /* The bars are background:currentColor, and