/* ============================================================ MOBILE FIXES — The Chief Suite Loaded LAST in so it overrides inline styles + page CSS. Desktop (>=901px) is NOT touched. Tested at: 375 / 414 / 768 px. ============================================================ */ /* ---------- TABLET + PHONE ( ≤ 900px ) ---------- */ @media (max-width: 900px) { /* ---- NAV: show links as a wrapped second row under logo + button ---- */ .nav-inner { flex-wrap: wrap !important; gap: 12px 12px !important; padding: 14px 0 12px !important; } .nav-inner > .logo { order: 1; flex: 1 1 auto; } .nav-inner > .btn { order: 2; flex: 0 0 auto; } .nav-links { display: flex !important; order: 3; width: 100%; flex-wrap: wrap; justify-content: center; gap: 4px 18px; padding-top: 10px; border-top: 1px solid rgba(0, 29, 71, 0.12); } .nav-links a { font-size: 12px !important; padding: 8px 2px !important; opacity: 0.85; } .nav-links a::after { display: none; } /* underline animation looks off when wrapped */ .logo { font-size: 19px; gap: 7px; } /* ---- NAV BOOK-A-CHAT button: compact + min tap target ---- */ nav .btn-primary { padding: 11px 16px !important; font-size: 11px !important; letter-spacing: 0.14em !important; min-height: 40px; } /* ---- HERO: restore breathing room (base rule uses !important) ---- */ .hero { padding: 36px 0 56px !important; } .hero-single { text-align: center; } .hero-eyebrow { margin-bottom: 22px; font-size: 9px; letter-spacing: 0.32em; } /* ---- PRICING TIERS: defeat inline 3-column grid ---- */ .tiers-grid { grid-template-columns: 1fr !important; gap: 20px !important; margin-top: 36px !important; } .tier-card { padding: 32px 24px !important; box-shadow: 0 8px 24px rgba(0, 29, 71, 0.08) !important; } .tier-card:hover { transform: none !important; } /* no hover-lift on touch */ .tier-best { min-height: 0 !important; } /* no reserved empty space */ .tier-name { font-size: 30px !important; } .tier-price { font-size: 44px !important; } .tier-price sup { font-size: 20px !important; top: 8px !important; } .tier-feature { font-size: 13px !important; padding: 9px 0 9px 22px !important; } .tier-card.tier-featured::before { width: 280px; height: 280px; } /* ---- WORK / PORTFOLIO CARDS ---- */ .work-grid { gap: 24px !important; } .work-card { padding: 28px 22px 32px !important; min-height: auto !important; } .work-card:hover { transform: none !important; } .work-card::before { width: 320px !important; height: 320px !important; top: -25% !important; right: -20% !important; } .work-name { font-size: 24px !important; } .work-desc { font-size: 13.5px !important; } .work-meta { flex-wrap: wrap; gap: 10px 14px; } /* ---- BUTTONS: ensure 44px tap target everywhere ---- */ .btn { min-height: 44px; } .tier-cta { min-height: 48px; padding: 14px !important; } } /* ---------- PHONE ( ≤ 480px ) ---------- */ @media (max-width: 480px) { /* Tighter container so hero text breathes */ .container { padding: 0 20px !important; } /* Hero typography sized for narrow viewport */ h1 { font-size: 42px !important; line-height: 1.02 !important; margin-bottom: 24px !important; } .hero-sub { font-size: 16px !important; line-height: 1.55; } .section-title { font-size: 30px !important; line-height: 1.1 !important; } .final-title { font-size: 34px !important; line-height: 1.1 !important; } /* Hero CTAs: stack full-width — easier to tap */ .hero-ctas { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } .hero-ctas .btn { width: 100%; justify-content: center; } /* Logo a touch smaller so nav button has room */ .logo { font-size: 17px !important; letter-spacing: 0.06em !important; } nav .btn-primary { padding: 10px 14px !important; font-size: 10px !important; letter-spacing: 0.12em !important; } /* Tier cards more compact */ .tier-card { padding: 28px 22px !important; } .tier-name { font-size: 26px !important; } .tier-price { font-size: 40px !important; } .tier-best { font-size: 13px !important; } /* Work cards more compact */ .work-card { padding: 26px 20px 30px !important; } .work-name { font-size: 22px !important; } .work-desc { font-size: 13px !important; } /* Section padding reasonable */ section { padding: 64px 0 !important; } .how, .faq, .final-cta, .about, .tiers-section { padding: 72px 0 !important; } } /* ---------- SMALL PHONE ( ≤ 380px ) ---------- */ @media (max-width: 380px) { h1 { font-size: 36px !important; } .section-title { font-size: 26px !important; } .final-title { font-size: 30px !important; } .nav-links { gap: 2px 14px; } .nav-links a { font-size: 11px !important; } .tier-price { font-size: 36px !important; } } /* ---------- Prevent any horizontal scroll on phones ---------- */ @media (max-width: 900px) { html, body { overflow-x: hidden; } img, svg { max-width: 100%; height: auto; } }