/* ============================================
   RESPONSIVE — Header / Hero / Projects
   Breakpoints: 1200 (laptop) / 900 (tablet) / 600 (mobile)
   ============================================ */

/* ---------- Laptop ---------- */
@media (max-width: 1200px){
  :root{ --container: 1080px; }

  .main-nav ul{ gap: 26px; }

  .services-panel{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }

  .process-steps{ grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .process-step::before{ display: none; }

  .about-inner{ grid-template-columns: minmax(0, 0.43fr) minmax(0, 1fr); }

  .contact-panel{ grid-template-columns: 1fr; text-align: left; }
  .contact-details{ flex-direction: row; flex-wrap: wrap; gap: 18px 28px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 900px){
  .main-nav{
    position: fixed;
    inset: 0;
    top: 0;
    background: rgba(5,7,13,0.98);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
    z-index: 90;
  }
  .main-nav.is-open{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .main-nav ul{
    flex-direction: column;
    gap: 32px;
  }
  .nav-link{ font-size: 22px; }

  .nav-toggle{ display: flex; }
  .header-actions .btn-outline{ display: none; }

  .hero{ padding-top: 96px; }
  .hero-inner{
    padding-left: clamp(28px, 5vw, 48px);
    padding-right: clamp(24px, 4vw, 40px);
  }
  .hero-copy{ width: 100%; max-width: 480px; }
  .hero-bg{ left: 38%; }
  .hero-bg-image{
    object-position: 85% center;
    filter: saturate(0.8) brightness(0.78);
  }
  .hero-bg-gradient{
    background:
      linear-gradient(90deg,
        rgba(5,7,13,0.88) 0%,
        rgba(5,7,13,0.6) 30%,
        rgba(5,7,13,0.3) 62%,
        rgba(5,7,13,0.15) 100%),
      linear-gradient(180deg,
        rgba(5,7,13,0.55) 0%,
        rgba(5,7,13,0.1) 22%,
        rgba(5,7,13,0.1) 72%,
        rgba(5,7,13,0.82) 100%),
      radial-gradient(120% 90% at 88% 12%, rgba(47,107,255,0.1), transparent 55%);
  }
  .hero::after{
    background: linear-gradient(90deg, var(--navy-950) 0%, var(--navy-950) 36%, transparent 60%);
  }
  .hero-footer{
    padding-left: clamp(28px, 5vw, 48px);
    padding-right: clamp(24px, 4vw, 40px);
  }

  /* Other projects: 2 columns (featured keeps its 2 + 2 + 1 layout) */
  .project-gallery--compact{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 24px;
  }

  .services-grid{ grid-template-columns: 1fr; gap: 24px; }
  .service-item{ border-left: none; border-top: 1px solid rgba(10,15,25,0.12); padding-left: 0; padding-top: 20px; }
  .service-item:first-child{ border-top: none; padding-top: 0; }

  .process-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }

  .about-inner{ grid-template-columns: 1fr; }
  .about-media{ max-width: 190px; margin-inline: auto; aspect-ratio: 1; }

  .footer-inner{ flex-direction: column; text-align: center; gap: 16px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px){
  :root{ --gutter: 20px; }

  .brand-word strong{ font-size: 12px; }
  .brand-word em{ font-size: 8px; }

  .hero{ padding-top: 92px; padding-bottom: 24px; }
  .hero-title{ font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .hero-sub{ font-size: 0.98rem; }

  .hero-ctas{
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
  }
  .hero-ctas .btn-primary{
    width: 100%;
    justify-content: center;
  }

  .hero-meta{ gap: 14px 20px; }
  .hero-meta li{ font-size: 12px; }

  .hero-inner{
    padding-left: clamp(20px, 6vw, 28px);
    padding-right: clamp(20px, 6vw, 28px);
  }
  .hero-copy{ width: 100%; max-width: 100%; }
  .hero-bg{ left: 15%; }
  .hero-bg-image{
    object-position: 82% center;
    filter: saturate(0.75) brightness(0.5);
  }
  .hero-bg-gradient{
    background:
      linear-gradient(180deg,
        rgba(5,7,13,0.65) 0%,
        rgba(5,7,13,0.5) 32%,
        rgba(5,7,13,0.65) 64%,
        rgba(5,7,13,0.95) 100%),
      linear-gradient(90deg,
        rgba(5,7,13,0.92) 0%,
        rgba(5,7,13,0.7) 30%,
        rgba(5,7,13,0.5) 65%,
        rgba(5,7,13,0.45) 100%);
  }
  .hero::after{
    background: linear-gradient(90deg, var(--navy-950) 0%, var(--navy-950) 14%, transparent 42%);
  }
  .hero-footer{
    padding-left: clamp(20px, 6vw, 28px);
    padding-right: clamp(20px, 6vw, 28px);
  }

  .hero-footer{
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .scroll-cue{ margin-left: 0; }

  .section-head-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  /* Projects: single column; reset the featured 2 + 2 + 1 placement */
  .project-gallery--featured,
  .project-gallery--compact{
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .project-gallery--featured .project-card:nth-child(n){ grid-column: auto; }
  .project-media{ margin-bottom: 16px; }

  .services-panel{ padding: 28px 22px; border-radius: 18px; }
  .services-title{ font-size: 1.5rem; }

  .process-steps{ grid-template-columns: 1fr; gap: 32px; }

  .about-capabilities{ gap: 16px; flex-direction: column; }

  .contact-panel{ padding: 28px 20px; border-radius: 18px; }
  .contact-details{ flex-direction: column; gap: 14px; }

  .contact-copy .btn-primary{ width: 100%; justify-content: center; }
  .contact-whatsapp-link{
    margin-left: 0;
    margin-top: 14px;
  }
}

/* allow "stand out." to wrap on any phone-width viewport where it would otherwise overflow */
@media (max-width: 600px){
  .hero-title .nowrap-unit{ white-space: normal; }
}

/* ---------- Small mobile ---------- */
@media (max-width: 380px){
  .hero-meta{ flex-direction: column; gap: 12px; }
}