/* ============================================================
   RESPONSIVE — all breakpoints live here, so mobile tweaks
   are made in one file. Must load LAST.
   ============================================================ */

/* ---------- Tablet & small laptop ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;gap:44px;}
  .services-grid{grid-template-columns:1fr;}
  .products-grid{grid-template-columns:1fr;}
  .training-grid{grid-template-columns:1fr;}
  .internship-note{flex-direction:column;align-items:flex-start;}
  .testi-grid{grid-template-columns:1fr;}
  .process-row{grid-template-columns:1fr 1fr;}
  .process-step{border-bottom:1px solid var(--line);}
  .contact-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
}

/* ---------- Phone: desktop nav swaps for the hamburger ---------- */
@media (max-width:720px){
  .nav-links,
  .nav-cta .btn-ghost{display:none;}
  .hamburger{display:flex;}

  section{padding:76px 0;}
  .hero{padding:130px 0 70px;}

  .form-row{grid-template-columns:1fr;}
  .process-row{grid-template-columns:1fr;}

  /* Careers: stack the Apply button under the role details */
  .job-card{flex-direction:column;align-items:flex-start;gap:20px;}
  .job-action,
  .job-action .btn{width:100%;}
  .apply-dialog{padding:30px 22px 24px;}
  .apply-foot{flex-direction:column-reverse;}
  .apply-foot .btn{width:100%;}
  .training-meta{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;gap:30px;}
}