/* ============================================================ Big Helpers — Mobile optimisation overlay (v2) Loaded LAST in , wins via document order. v2 changes: nav-cta pulled out of collapsed menu; sticky-wa hidden on mobile to prevent overlap with footer WA buttons. ============================================================ */ /* ----- Universal safety: kill horizontal scroll ----- */ html, body { overflow-x: hidden !important; max-width: 100vw; } * { box-sizing: border-box; } img, svg, video, iframe, picture { max-width: 100%; height: auto; } table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } pre, code { white-space: pre-wrap; word-wrap: break-word; max-width: 100%; } /* ============================================================ NAV FIX — applies at site mobile breakpoint (≤980px) Pull .nav-cta (with WhatsApp button) OUT of the collapsed .nav-menu so the WA button is always visible at the top. ============================================================ */ @media (max-width: 980px) { .nav-in { position: relative; min-height: 56px; } /* Lift the entire .nav-cta block to the top-right of the nav, anchored to the nav-in container, before the hamburger. */ .nav .nav-cta { position: absolute !important; top: 50% !important; right: 56px !important; /* leave 56px clear for the hamburger */ transform: translateY(-50%); width: auto !important; margin: 0 !important; padding: 0 !important; border-top: 0 !important; background: transparent !important; z-index: 5; display: flex !important; } .nav .nav-cta .nav-calc { display: none !important; } /* secondary calc link — drop on mobile */ .nav .nav-cta .btn, .nav .nav-cta .btn-whatsapp { flex: 0 0 auto !important; padding: 7px 12px !important; font-size: 12.5px !important; min-height: 36px !important; border-radius: 8px !important; } .nav .nav-cta .btn svg { width: 14px !important; height: 14px !important; } /* Make sure the hamburger sits to the far right */ .nav-toggle { margin-left: 0 !important; position: relative; z-index: 6; } } /* ============================================================ MAIN MOBILE PASS — viewport ≤768px ============================================================ */ @media (max-width: 768px) { /* HIDE floating WhatsApp button on mobile. Reason: top-nav WA is now always visible, plus content has multiple WA CTAs (hero, calc, contact section). Floating one overlaps with bottom CTA. Cleaner without it. */ .bh-sticky-wa { display: none !important; } /* Hero */ .hero { padding: 64px 0 48px !important; } .hero h1 { font-size: 34px !important; line-height: 1.05 !important; letter-spacing: -0.8px !important; } .hero-tagline { font-size: 16px !important; line-height: 1.45 !important; } .hero-lede { font-size: 14.5px !important; line-height: 1.5 !important; margin-bottom: 28px !important; } .hero-illustration { display: none !important; } .hero-trust { display: none !important; } .hero-eyebrow { font-size: 11px !important; padding: 5px 12px !important; margin-bottom: 16px !important; } .hero-cta { flex-direction: column; gap: 10px !important; align-items: stretch !important; } .hero-cta .btn { padding: 14px 22px !important; font-size: 14px !important; width: 100%; justify-content: center; } .hero-card { display: none !important; } /* Trust bar / strip */ .trust-bar { padding: 6px 8px !important; } .trust-bar-in { font-size: 11.5px !important; gap: 8px !important; } .trust-bar-in .sep { display: none !important; } .trust-strip { padding: 20px 0 !important; } .trust-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; } .trust-item .ic { font-size: 22px !important; } .trust-item .v { font-size: 15px !important; } .trust-item .l { font-size: 11px !important; } /* Sections */ .section { padding: 48px 0 !important; } .section-title { font-size: 26px !important; line-height: 1.15 !important; margin-bottom: 12px !important; letter-spacing: -0.5px !important; } .section-sub { font-size: 15px !important; margin-bottom: 28px !important; line-height: 1.5 !important; } .eyebrow { font-size: 11px !important; margin-bottom: 12px !important; } /* Single-column grids */ .services-grid, .why-grid, .proj-grid, .industries-grid, .featured-case-grid, .cards-2, .hub-grid, .related-grid { grid-template-columns: 1fr !important; gap: 14px !important; } /* Hide non-essential sections on mobile */ .calc-bg, .pricing-bg, #segments, .compare-table, .live-counter, .tech-strip, .nav-secondary, .footer-extras { display: none !important; } /* Buttons */ .btn { padding: 12px 20px !important; min-height: 44px !important; box-sizing: border-box; } /* Wraps */ .wrap, .wrap-wide { padding: 0 16px !important; } /* Profile card stack */ .profile-card { grid-template-columns: 1fr !important; padding: 24px !important; gap: 20px !important; text-align: center; } .profile-info p { text-align: left; } .bio-bullets li { grid-template-columns: 110px 1fr !important; } } /* ============================================================ SMALL PHONES ≤480px ============================================================ */ @media (max-width: 480px) { .hero h1 { font-size: 28px !important; letter-spacing: -0.6px !important; } .hero-tagline { font-size: 15px !important; } .hero-cta .btn { font-size: 13px !important; padding: 12px 18px !important; } .section-title { font-size: 22px !important; } .section-sub { font-size: 14px !important; } .trust-bar { display: none !important; } .trust-strip { display: none !important; } .row, .contact-row, .hero-cta { flex-wrap: wrap !important; } footer { font-size: 12.5px !important; padding: 24px 16px !important; } /* Even tighter top-nav on small phones */ .nav .nav-cta .btn { padding: 6px 10px !important; font-size: 12px !important; } .nav .nav-cta .btn svg { display: none !important; } /* drop the icon, keep "WhatsApp" label */ } /* ----- Reading-mode tweaks ----- */ @media (max-width: 768px) { article p, .body p, .lede { font-size: 16px; line-height: 1.65; } article h2 { font-size: 22px !important; margin-top: 28px !important; } article h3 { font-size: 18px !important; margin-top: 20px !important; } }