/* ═══ NEEVIQ · MOBILE ═══════════════════════════════════════════════════════ ONE mobile layer for EVERY page. It used to live inside build-precon.py, so only the 7 generated pages had it — /ai (standalone) and / (built by build.mjs) had none, which is why Saras found the AI page "completely broken" on a phone while the service pages were fine. Desktop is LOCKED: nothing here applies above 1023px. Mobile is a SIMPLER page, not a squeezed desktop. */ @media (max-width:1023px){ /* ── ① SCROLL. The captures ship , so content scrolls INSIDE body and the window never moves — the stall on a real phone, and the reason scripted scrollTo() audits saw one frame. */ html,body{height:auto!important;min-height:100%!important; overflow-y:visible!important;overflow-x:hidden!important;max-width:100%!important} body > div.h-screen,body > div[class*="h-screen"]{height:auto!important;min-height:0!important} /* ── ② CHROME. 74px brandbar + 69px nav = 143px of a 915px screen, always on. Saras: "the nav and menu is taking too much space." Now ~96px. */ /* the bar is pinned by min-height:74px, not padding — and .nq-toggle--big is GONE by the time this applies: rail.js moves the toggle's children into #nqRail and removes it. Hiding #nqRail therefore deletes the VDC/AI switch and leaves an empty 74px bar. Shrink the rail instead. */ /* #nqRail is position:FIXED, so the bar must still reserve its height or the VDC/AI pills land on top of the logo. 44px fits the shrunken rail exactly. */ .nq-brandbar{min-height:44px!important;height:44px!important;padding:0!important} #nqRail{padding:3px!important} #nqRail a{padding:6px 13px!important} #nqRail .nq-tg__k{font-size:12px!important} #nqRail .nq-tg__cap,#nqRail .nq-tg__hd,#nqRail .nq-tg__d{display:none!important} #mainNav .nav-inner{padding-top:6px!important;padding-bottom:6px!important;min-height:0!important} #mainNav .nq-logo img,#mainNav .nav-logo img,.nq .nq-logo img{height:22px!important} .hamburger{padding:2px!important} .hamburger svg{width:20px!important;height:20px!important} /* ── ③ TYPE. Measured at 412px before this: h1 34–38, h2 40, h3 28. A 40px heading on a 412px screen is the "too zoomed in". */ h1,.nq-hero h1{font-size:26px!important;line-height:1.18!important;letter-spacing:-.4px!important} h2{font-size:21px!important;line-height:1.24!important;letter-spacing:-.3px!important} h3{font-size:17px!important;line-height:1.3!important} p,li,td,th{font-size:14px!important;line-height:1.55!important} .nq-hero p{font-size:14.5px!important} /* ── ④ HERO: photograph + words + buttons. Nothing else. */ .nq-panel{display:none!important} .nq-plate-front{display:none!important} .nq-hero{display:block!important;min-height:auto!important; padding-top:calc(var(--nq-chrome,96px) + 14px)!important;padding-bottom:24px!important} .nq-hero-copy{position:relative!important;z-index:10!important;left:auto!important;top:auto!important; max-width:100%!important;padding:0 20px!important} .nq-hero > div[class*="absolute"][class*="bottom-0"]{position:static!important;padding:20px 0 0!important} .nq-hero .nq-tools-label,.nq-hero .nq-tools{margin-left:0!important} /* ── ⑤ BUTTONS. Two side-by-side pills overflow a 412px column — the second one read "See what we resolv…" cut off at the edge. */ .nq-hero-actions,.nq-cta-row,.nq-hero .flex.flex-col.gap-3, .nq-hero div:has(> button + a),.nq-hero div:has(> a + button){ flex-direction:column!important;align-items:stretch!important;gap:10px!important;width:100%!important} .nq-hero button,.nq-hero a[href]{white-space:normal!important} .nq-hero .nq-cta-primary,.nq-hero .nq-cta-secondary{width:100%!important;justify-content:center!important} /* ── ⑥ STILL. Eight rAF/timer loops run forever; on a mid-range phone that is the jank. Marquee static, canvases gone, points all open. */ .nq-track{animation:none!important;transform:none!important;flex-wrap:wrap;width:auto!important} .nq-stack{mask-image:none!important;-webkit-mask-image:none!important;gap:6px!important} .nq-chip{font-size:12px!important;padding:7px 11px!important} canvas{display:none!important} div[style*="grid-template-rows"]{grid-template-rows:1fr!important} div[style*="grid-template-rows"] > div{overflow:visible!important;padding-top:2px!important} div[style*="grid-template-rows"] p{opacity:1!important;margin-top:4px!important} .flex.flex-col.pb-6{padding-bottom:14px!important} /* ── ⑦ MEDIA. The captures wrap media in an inline-block whose max-width is none, so the img obeyed 100% OF 668px. */ img,svg,video{max-width:100%!important;height:auto!important} span:has(> img),span:has(> canvas){max-width:100%!important;display:block!important;width:auto!important} [id^="cyc-"]{width:100%!important;height:auto!important;border-radius:10px} /* ── ⑧ ROOM + TAP TARGETS */ section,footer{padding-left:20px!important;padding-right:20px!important} #mainNav a,#mainNav button,.nq-mobmenu a,footer a{min-height:40px} /* The chrome ships TWO labels — .nav-cta-full and .nav-cta-short — and hides one by breakpoint. My earlier blanket `display:inline` on every child un-hid BOTH, so a 38px pill held "Talk to a VDC leadTalk" and rendered as an empty oval. Target the two labels explicitly, never the wildcard. */ #mainNav .nav-cta{padding:7px 13px!important;width:auto!important;min-width:0!important; display:inline-flex!important;align-items:center!important} #mainNav .nav-cta-full{display:none!important} #mainNav .nav-cta-short{display:inline!important;font-size:12.5px!important} #mainNav button span{font-size:12.5px!important} /* ── ⑨ anchored sections must clear the (now shorter) fixed chrome */ html{scroll-padding-top:104px!important} }