/* ==========================================================================
   SINFMEDIA — Responsive rules
   Breakpoints tested: 350 / 375 / 390 / 414 / 480 / 768 / 820 / 1024 / 1280 / 1440 / 1920+
   ========================================================================== */

/* ---- Large desktop / ultra-wide: cap line-length, let container breathe ---- */
@media (min-width:1600px){
  .wrap{max-width:1280px;}
}

/* ---- Tablet and below: collapse multi-column grids, show hamburger nav ---- */
@media (max-width:900px){
  .about-grid, .services-grid, .approach-row, .why-grid, .diff-grid,
  .engage-grid, .system-grid, .contact-grid, .footer-top, .blog-grid,
  .related-grid{
    grid-template-columns:1fr !important;
  }
  .stats .wrap{flex-direction:column;}
  .approach-line{display:none;}
  .wrap{padding:0 22px;}
  section{padding:56px 0;}
  .cover{padding:88px 22px 64px;}

  /* Hamburger nav */
  .nav-toggle{display:inline-flex;}
  nav .wrap{padding:14px 22px; flex-wrap:wrap;}
  .nav-links{
    display:none;
    flex-direction:column;
    gap:0;
    width:100%;
    order:3;
    border-top:1px solid rgba(255,255,255,0.08);
    margin-top:14px;
    padding-top:10px;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 4px; width:100%; border-bottom:1px solid rgba(255,255,255,0.06);}
  .nav-links li:last-child a{border-bottom:none;}
  nav .cta-btn{order:2; font-size:13px; padding:10px 18px;}
}

/* ---- Small tablet / large phone ---- */
@media (max-width:640px){
  .services-grid, .why-grid, .diff-grid, .engage-grid, .system-grid,
  .blog-grid, .related-grid{
    grid-template-columns:1fr;
  }
  .cover-ctas{flex-direction:column; width:100%;}
  .cover-ctas a{width:100%; text-align:center;}
  .flow{margin-top:56px;}
  .flow-node{font-size:11.5px; padding:10px 16px;}
}

/* ---- Phones: 480px and down ---- */
@media (max-width:480px){
  .wrap{padding:0 18px;}
  section{padding:48px 0;}
  .cover{padding:76px 18px 52px; min-height:auto;}
  .cover h1{font-size:clamp(30px,8vw,44px);}
  .stat-num{font-size:36px;}
  .final-cta{padding:64px 18px;}
  .form-card{padding:22px;}
  .blog-post-body p, .blog-post-body ul{font-size:15.5px;}
  .map-card iframe{height:240px;}
}

/* ---- Small phones: 350–390px, guarantee no horizontal scroll ---- */
@media (max-width:390px){
  .wrap{padding:0 16px;}
  .logo-img{height:24px;}
  nav .cta-btn{padding:9px 14px; font-size:12.5px;}
  .cover h1{font-size:clamp(26px,8.5vw,36px);}
  .cover p.sub{font-size:15.5px;}
  .market-tag{font-size:11px; padding:6px 14px;}
  .approach-num{font-size:34px;}
  .stat-num{font-size:30px;}
  .final-cta::before{font-size:22vw;}
}