/* ===================================================================== FLYLAND — MOBILE QA POLISH --------------------------------------------------------------------- Loaded in LAST (after style.css, refinement.css, animations.css) so these overrides win. Mobile-only, presentation-only fixes derived from real device-emulated screenshots at 360/390/430px. Desktop styles are untouched (every rule is inside a max-width media query, except the harmless overflow safety-net). Audit verdict: no horizontal overflow anywhere, viewport meta correct, inputs already 16px, grids already collapse, hamburger works. The items below are the remaining polish issues found on screen. ===================================================================== */ /* Final overflow safety-net (none detected, but belt-and-braces). */ html, body { max-width: 100%; overflow-x: hidden; } @media (max-width: 767px) { /* ---- (1) HIGH: Contact form was 2-up on phones, truncating placeholders ("Phone Nun", "Email Addr"). Stack to one column. ---- */ .contact-form .cf-row { flex-direction: column; gap: 12px; } /* ---- (2) Tap targets -> >= 44px ------------------------------------ */ /* Testimonial pagination dots were 14x14. Keep the small visual dot but give each a 44x44 hit area (centred via ::after). */ .testi-dots { gap: 2px; } .testi-dots button, .testi-dots button.active { /* beat style.css .active background */ width: 44px; height: 44px; padding: 0; background: transparent; border-radius: 50%; position: relative; } .testi-dots button::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(14, 77, 112, .28); } .testi-dots button.active::after { background: var(--navy); } /* Team-card arrow button was 36x36. */ .team-card .team-btn { flex: 0 0 44px; width: 44px; height: 44px; } /* Secondary text links (breadcrumb + footer + contact) were ~24px tall. Give them a comfortable >=44px vertical tap zone, same appearance. */ .breadcrumb a { display: inline-block; padding: 11px 0; } .footer-col li { padding-bottom: 2px; } .footer-col li a { display: inline-block; padding: 12px 0; line-height: 1.3; } .footer-bottom ul a { display: inline-block; padding: 12px 6px; } .contact-left-foot .email, .contact-left-foot .contact-actions a { display: inline-block; padding: 12px 0; } /* ---- (3) Legibility: lift sub-14px text to >= 14px ----------------- */ .blog-meta { font-size: 14px; gap: 8px; } .blog-meta .dot { font-size: 14px; } .offer-badge, .pkg-tag { font-size: 14px; } }