/* Phone/tablet readability floor.
   The theme sets html { font-size: 81.25% } under 768px and several page stylesheets scale
   their own text down again, which left form labels at ~10.5px and badges under 10px.
   Page stylesheets load later and use !important, hence the specificity and !important here. */
@media (max-width: 768px) {
    /* Forms: readable labels; 16px inputs stop iOS Safari zooming the page on focus. */
    html body .form-group label,
    html body .label-text { font-size: 13px !important; }
    html body input.form-control,
    html body textarea.form-control,
    html body select.form-control { font-size: 16px !important; }

    /* Small UI text: never below 12px. */
    html body .hero-badge,
    html body .hours-day,
    html body .hours-time,
    html body .ai-trust-item,
    html body .ab-mod-visual__badge-text,
    html body .ab-mod-visual__chip-text,
    html body .ab-mod-eyebrow { font-size: 12px !important; }
    html body .address-header h3 { font-size: 14px !important; }
    html body .hero-section .hero-badge,
    html body .contact-section label,
    html body .contact-form label,
    html body .cap-pill,
    html body .stat-label,
    html body .years-text,
    html body .contact-label { font-size: 12px !important; }

    /* Tap targets: footer and inline links get comfortable spacing. */
    html body .atom-footer__links a { display: inline-block; padding: 4px 0; }
}

/* Contact page: contact.css forces info + form side by side below 992px. That works on
   tablets but crushes the form to ~140px on phones - stack them there instead. */
@media (max-width: 600px) {
    html body .contact-section .row { grid-template-columns: 1fr !important; }
}