/* ════════════════════════════════════════════════════════
   RESPONSIVE — covers all devices
   Desktop  > 1024px  (no overrides needed — base styles)
   Tablet     768–1024px
   Mobile     480–768px
   Small      < 480px  (iPhone SE, Galaxy A series, etc.)
   ════════════════════════════════════════════════════════ */

/* ── TABLET (768–1024px) ─────────────────────────────── */
@media (max-width: 1024px) {
  /* Services*/
  .services-grid { grid-template-columns: 1fr 1fr; }

  /* Process step*/
  .process-step {
    grid-template-columns: clamp(80px,12vw,140px) 1fr;
    gap: clamp(16px,3vw,32px);
  }
}

/* ── HAMBURGER appears ── */
@media (max-width: 900px) {
  .nav-links  { display: none; }
  .hamburger  { display: flex; }
}

/* ── MOBILE ── */
@media (max-width: 768px) {

  /* Section padding — less horizontal breathing room */
  section { padding: clamp(60px,8vw,100px) clamp(16px,4vw,32px); }

  /* Hero*/
  .hero-grid {
    grid-template-columns: 1fr;
    min-height: unset;
    gap: clamp(24px,5vw,40px);
  }
  .hero-image-wrap {
    order: -1;       
    aspect-ratio: 4/3;
    max-height: 320px;
  }
  #hero h3 { font-size: clamp(1.4rem,5.5vw,2rem); }
  .hero-sub { font-size: clamp(0.88rem,3.5vw,1rem); max-width: 100%; }

  /* About */
  .about-grid {
    grid-template-columns: 1fr;
    gap: clamp(16px,4vw,24px);
  }

  /*  2Services */
  .services-grid { grid-template-columns: 1fr 1fr; }

  /* Process heading smaller */
  #process h2,
  #services h2,
  #contact h2 {
    font-size: clamp(2.2rem,8vw,5rem);
  }

  /* Process step */
  .process-step {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .ps-label { gap: 10px; }
  .ps-num   { font-size: clamp(2rem,7vw,3.5rem); }

  /* Contact items */
  .contact-details { flex-direction: column; align-items: center; }

  /* Footer */
  footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
  }
}

/* ── SMALL MOBILE ── */
@media (max-width: 480px) {

  /* Nav */
  nav { padding: 12px 16px; }
  .nav-logo { font-size: 0.95rem; }

  /* Section*/
  section { padding: clamp(48px,10vw,80px) 16px; }

  /* Hero */
  .hero-image-wrap {
    aspect-ratio: 1/1;
    max-height: 260px;
    border-radius: 16px;
  }
  #hero h3 { font-size: clamp(1.25rem,6vw,1.7rem); }
  .hero-sub { font-size: 0.875rem; margin-bottom: 24px; }
  .btn-secondary {
    font-size: 0.75rem;
    padding: 10px 22px;
  }

  /* About heading */
  #about h2 { font-size: clamp(1.5rem,7vw,2.5rem); }

  /* Services: single column */
  .services-grid { grid-template-columns: 1fr; }
  #services h2   { font-size: clamp(2rem,9vw,3.5rem); }

  /* Process */
  #process h2 { font-size: clamp(2rem,9vw,3.5rem); }
  .process-step { padding: 18px 0; }
  .ps-num { font-size: 2.2rem; }
  .ps-label { font-size: 0.9rem; }
  .ps-desc  { font-size: 0.85rem; }

  /* Contact */
  #contact h2  { font-size: clamp(2rem,9vw,3.5rem); }
  #contact .sub { font-size: 0.875rem; }
  .contact-item { font-size: 0.82rem; padding: 8px 16px; }

  /* Drawer top offset matches nav height */
  .nav-drawer { top: 56px; }
}

/* ── EXTRA SMALL── */
@media (max-width: 360px) {
  .nav-logo { font-size: 0.85rem; }
  #hero h3  { font-size: 1.15rem; }
  .hero-image-wrap { max-height: 220px; }
}