/* =========================================================
   MODE — Responsive rules
   ========================================================= */

@media (max-width: 1080px) {
    .services { grid-template-columns: repeat(2, 1fr); }
    .process { grid-template-columns: repeat(2, 1fr); }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .form-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .nav { display: none; }
    .burger { display: inline-flex; }

    .hero { padding: 140px 0 60px; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-visual { max-width: 420px; margin: 20px auto 0; justify-self: center; }
    .hero-meta { gap: 28px; margin-top: 50px; }
    .hero-meta .stat b { font-size: 1.6rem; }

    .section-head { flex-direction: column; align-items: flex-start; margin-bottom: 40px; }
    .section-head p { max-width: 100%; }

    .services { grid-template-columns: 1fr; border-radius: var(--radius); }

    .pf-card, .pf-card:nth-child(even) { grid-template-columns: 1fr; }
    .pf-card:nth-child(even) .pf-visual { order: 0; }
    .pf-visual { aspect-ratio: 16/10; }

    .about-grid { grid-template-columns: 1fr; }
    .about-visual { max-width: 380px; }

    .form-row { grid-template-columns: 1fr; }
    .form-submit { flex-direction: column; align-items: stretch; }
    .form-submit .btn { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
    :root { --gutter: 20px; }
    .site-header { padding: 14px 0; }
    .logo { font-size: 18px; }
    .logo-mark { width: 200px; height: 45px; font-size: 14px; }

    .hero { padding: 120px 0 40px; }
    h1 { font-size: clamp(2.4rem, 10vw, 3.4rem); }
    .hero-actions .btn { flex: 1; justify-content: center; }
    .hero-meta { gap: 20px; }
    .hero-meta .stat b { font-size: 1.4rem; }

    .section { padding: 70px 0; }
    .process { grid-template-columns: 1fr; }

    .cta { padding: 40px 26px; }
    .cta h2 { font-size: 2rem; }

    .footer-top { grid-template-columns: 1fr; gap: 30px; margin-bottom: 40px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

    .mobile-nav a { font-size: 26px; }

    .about-values { grid-template-columns: 1fr; }

    .pf-body { padding: 30px 26px; }
    .form-card { padding: 26px 22px; }
}