/* ========================================================================== Compact phone layout (SWITCHED ON, chosen by Lorenzo) Makes the page ~28% shorter on phones (8.9 screens instead of 12.4): 2-column services, 2-column "Doing the job properly", shorter About photo, tighter spacing. Desktop is unaffected. To switch it off: comment out the mobile-compact.css line in index.html . ========================================================================== */ @media (max-width: 560px) { .section { padding: 44px 0; } .section-head { margin-bottom: 26px; } .section-head p:last-child { font-size: .95rem; } h2 { font-size: 1.6rem; } .hero { padding: 32px 0 44px; } .hero-logo { width: 210px; margin-bottom: 14px; } .lead { font-size: 1.05rem; } .hero-actions { margin: 20px 0 18px; gap: 10px; } .hero-card { padding: 20px; } .hero-card .avatar { width: 72px; height: 72px; margin-bottom: 10px; } .hero-card-hello { font-size: 1.25rem; } .hero-card-text { font-size: .95rem; } /* Services: compact 2-column grid */ .card-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .card { padding: 16px 14px; border-radius: 14px; } .card-icon { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 10px; } .card-icon svg { width: 22px; height: 22px; } .card h3 { font-size: .98rem; margin-bottom: .35em; } .card p { font-size: .86rem; line-height: 1.5; } /* Why choose me: 2 columns */ .why-grid { grid-template-columns: 1fr 1fr; gap: 18px 14px; } .why-grid li { padding-top: 12px; } .why-grid h3 { font-size: 1rem; } .why-grid p { font-size: .88rem; line-height: 1.5; } /* About: shorter photo */ .about { gap: 26px; } .about-photo img { aspect-ratio: 5 / 4; box-shadow: 10px 10px 0 var(--accent-soft); } .badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; } .badge { padding: 10px; font-size: .9rem; } .badge span { font-size: .78rem; } .areas { gap: 22px; } .county-list { gap: 12px; } .county { padding: 18px 16px; } .county-icon { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px; } .county-icon svg { width: 22px; height: 22px; } .county h3 { font-size: 1.4rem; } .county p { font-size: .84rem; } .faq summary { font-size: 1rem; padding: 15px 30px 15px 0; } .faq details { padding: 0 16px; } .contact { gap: 24px; } .contact-list { gap: 10px; } .contact-item { padding: 12px 14px; font-size: 1rem; gap: 14px; } .contact-icon { width: 40px; height: 40px; } .site-footer { padding: 36px 0 20px; } .footer-legal { margin-top: 22px; } }