/* ============================================================
   Responsive rules — mobile first overrides
   ============================================================ */

@media (max-width: 1100px){
  .footer-grid{ grid-template-columns: 1fr 1fr; row-gap:40px; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:440px; }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .stats-bar{ grid-template-columns: repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 900px){
  .main-nav{ display:none; }
  .menu-toggle{ display:flex; }
  .header-actions .icon-btn.call span,
  .header-actions .icon-btn.wa span{ display:none; }
  .icon-btn{ padding:10px; }
  .site-header.mobile-open .main-nav{
    display:flex; flex-direction:column; align-items:flex-start;
    position:absolute; top:100%; left:0; right:0; background:#fff;
    padding:20px 24px 28px; border-bottom:1px solid var(--line); box-shadow: var(--shadow-md); gap:18px;
  }
  .split, .split.reverse{ grid-template-columns:1fr; direction:ltr; }
  .split.reverse > *{ direction:ltr; }
  .art-frame{ order:-1; }
  .process{ grid-template-columns: 1fr 1fr; gap:32px 0; }
  .process::before{ display:none; }
  .industry-row, .industry-row.reverse{ grid-template-columns:1fr; direction:ltr; gap:28px; }
  .industry-row.reverse > *{ direction:ltr; }
  .industry-row .art-frame{ order:-1; }
  .cta-band{ flex-direction:column; text-align:center; padding:44px 28px; }
  .cta-actions{ justify-content:center; }
}

@media (max-width: 700px){
  .section{ padding:64px 0; }
  .grid-4, .grid-3, .grid-2{ grid-template-columns: 1fr; }
  .stats-bar{ grid-template-columns: 1fr 1fr; padding:36px 20px; gap:28px; }
  .form-row{ grid-template-columns:1fr; }
  .form-card{ padding:26px 20px; }
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows:130px; }
  .gallery-item.wide{ grid-column: span 2; }
  .hero{ padding:90px 0 100px; }
  .hero-stats{ gap:24px; }
  .brand-text strong{ font-size:14px; }
  .brand img{ height:42px; }
  .fab{ width:50px; height:50px; }
  .fab svg{ width:20px; height:20px; }
}