/* ============================================================ mobile-fix.css — Clean Slate LI Comprehensive mobile override for all 6 pages Injected as in each page ============================================================ */ /* ── GLOBAL SAFETY NET ─────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: hidden; max-width: 100%; } img, video, iframe, embed { max-width: 100%; height: auto; } /* ============================================================ ≤ 768px — PRIMARY MOBILE BREAKPOINT ============================================================ */ @media (max-width: 768px) { /* ── GLOBAL SECTION PADDING ─── */ section { padding: 48px 20px !important; } /* ── PAGE HERO (about, portfolio, services, contact, onboarding) ─── */ .page-hero { padding: 100px 20px 48px !important; } .page-hero-inner { text-align: center; } .page-hero h1 { font-size: clamp(28px, 8vw, 42px) !important; line-height: 1.15 !important; } .page-hero-sub { font-size: 15px !important; max-width: 100%; } /* ── TRUST BAR ─── */ .trust-bar { padding: 10px 16px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } .trust-inner { flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 20px !important; min-width: max-content !important; padding-bottom: 2px !important; } .trust-item { white-space: nowrap !important; font-size: 11px !important; } .trust-dot { display: none !important; } /* ── INTRO / ABOUT SPLIT ─── */ .intro-inner { grid-template-columns: 1fr !important; gap: 32px !important; } .intro-img { display: none !important; } .intro-badge { position: static !important; transform: none !important; margin-top: 16px !important; } /* ── INDEX SERVICES GRID (3-col → 1-col) ─── */ .services-grid { grid-template-columns: 1fr !important; gap: 1px !important; } .service-card { padding: 32px 20px !important; } /* ── INDEX MOSAIC GALLERY ─── */ .mosaic { grid-template-columns: 1fr !important; grid-template-rows: auto !important; } .mosaic-item { height: 220px !important; } .mosaic-item:first-child { grid-area: auto !important; height: 260px !important; } /* ── STEPS ROW (5-col → 1-col) ─── */ .steps-row { grid-template-columns: 1fr !important; gap: 28px !important; } .steps-row::before { display: none !important; } .step { flex-direction: row !important; align-items: flex-start !important; gap: 16px !important; text-align: left !important; } /* ── WHY CARDS (2-col → 1-col) ─── */ .why-cards { grid-template-columns: 1fr !important; gap: 12px !important; } .why-inner { grid-template-columns: 1fr !important; gap: 32px !important; } /* ── AREAS GRID (5-col → 3-col) ─── */ .areas-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } /* ── FOOTER ─── */ .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .footer-brand { text-align: center !important; } .footer-brand img { margin: 0 auto !important; } /* ══════════════════════════════════════════════════════ PORTFOLIO / GALLERY PAGE ══════════════════════════════════════════════════════ */ /* Hero gallery grid (2fr 1fr 1fr with fixed rows → stack) */ .gallery-hero-grid { grid-template-columns: 1fr !important; grid-template-rows: auto !important; } .gallery-item { height: 240px !important; } .gallery-item:first-child { grid-row: auto !important; grid-column: auto !important; height: 280px !important; } /* Full-width gallery strip */ .gallery-full { padding: 4px !important; } .gallery-full-item { height: 220px !important; } /* Results grid (4-col → 2-col) */ .results-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; } /* ══════════════════════════════════════════════════════ SERVICES PAGE ══════════════════════════════════════════════════════ */ .service-section { padding: 60px 20px !important; } /* Service section 2-col split → stack */ .service-section-wrap { grid-template-columns: 1fr !important; gap: 40px !important; direction: ltr !important; } .service-section-wrap.reverse { direction: ltr !important; } .service-section-wrap.reverse > * { direction: ltr !important; } /* Service image badge */ .service-section-wrap .service-img-wrap { order: -1 !important; } .service-section-wrap .service-img { max-height: 280px !important; width: 100% !important; object-fit: cover !important; } /* Pricing grid (3-col → 1-col) */ .pricing-grid { grid-template-columns: 1fr !important; gap: 20px !important; max-width: 480px !important; margin-left: auto !important; margin-right: auto !important; } .pricing-card.featured { transform: none !important; } /* FAQ */ .faq-item { padding: 20px !important; } .faq-question { font-size: 15px !important; } /* ══════════════════════════════════════════════════════ ABOUT PAGE ══════════════════════════════════════════════════════ */ /* Values grid (5-col → 2-col) */ .values-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; } /* Quote block */ .quote-block { padding: 32px 20px !important; font-size: 17px !important; } /* Reasons grid */ .reasons-grid { grid-template-columns: 1fr !important; gap: 20px !important; } /* ══════════════════════════════════════════════════════ CONTACT PAGE ══════════════════════════════════════════════════════ */ /* Contact 2-col layout → stack */ .contact-inner { grid-template-columns: 1fr !important; gap: 40px !important; padding-top: 40px !important; } /* Form two-col row → single col */ .field.two-col { grid-template-columns: 1fr !important; gap: 0 !important; } /* Photo strip (3-col) → hide or reduce height */ .photo-strip { grid-template-columns: repeat(3, 1fr) !important; height: 160px !important; } /* Info cards */ .info-card { padding: 20px !important; } /* ══════════════════════════════════════════════════════ ONBOARDING / FREE QUOTE PAGE ══════════════════════════════════════════════════════ */ /* Form header 2-col → stack */ .form-header-inner { grid-template-columns: 1fr !important; gap: 32px !important; text-align: center !important; } .form-header-right { display: none !important; } .form-header h1 { font-size: clamp(26px, 7vw, 40px) !important; } /* Form body */ .form-body-inner { padding: 0 4px !important; } /* Section headings */ .section-heading { font-size: clamp(24px, 7vw, 36px) !important; } .section-script { font-size: clamp(24px, 7vw, 36px) !important; } .body-text { font-size: 16px !important; } } /* ============================================================ ≤ 480px — SMALL PHONE BREAKPOINT ============================================================ */ @media (max-width: 480px) { /* Areas grid → 2-col on small phones */ .areas-grid { grid-template-columns: 1fr 1fr !important; } /* Values → 1-col on tiny screens */ .values-grid { grid-template-columns: 1fr 1fr !important; } /* Results grid → 1-col */ .results-grid { grid-template-columns: 1fr !important; } /* Buttons full width */ .btn-primary, .btn-ghost, .btn-white, .nav-btn { width: 100% !important; text-align: center !important; padding: 16px 20px !important; box-sizing: border-box !important; } .hero-btns { flex-direction: column !important; align-items: stretch !important; padding: 0 20px !important; gap: 10px !important; max-width: 100% !important; } /* Photo strip → hide on tiny phones */ .photo-strip { display: none !important; } /* Mosaic reduce height further */ .mosaic-item { height: 180px !important; } .mosaic-item:first-child { height: 200px !important; } /* Gallery item height */ .gallery-item { height: 200px !important; } .gallery-full-item { height: 180px !important; } /* Font size tweaks */ .page-hero h1 { font-size: 28px !important; } .section-heading { font-size: 24px !important; } .section-script { font-size: 24px !important; } }