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

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

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

  /* Projects: 3 + 2 premium layout */
  .project-gallery{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .project-card:nth-child(1),
  .project-card:nth-child(2),
  .project-card:nth-child(3){ grid-column: span 2; }
  .project-card:nth-child(4),
  .project-card:nth-child(5){ grid-column: span 3; }

  .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;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: #050912;
    display: flex;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s var(--ease), visibility 0.35s;
    z-index: 9999;
  }
  .main-nav.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .main-nav ul{
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 32px;
    min-height: 100%;
    justify-content: center;
    align-items: center;
    padding: 96px 24px 48px;
    position: relative;
    z-index: 10000;
  }
  .nav-link{ font-size: 22px; }

  .nav-toggle{
    display: flex;
    padding-top: max(0px, env(safe-area-inset-top));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  .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);
  }

  /* Projects: 2-column gallery */
  .project-gallery{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
  }
  .project-card:nth-child(n){ grid-column: span 1; }

  .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, large full-width cards */
  .project-gallery{
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .project-media{ aspect-ratio: 4 / 3.2; margin-bottom: 16px; }

  .project-info-top{ align-items: flex-start; }
  .project-view{
    padding: 10px 18px;
    font-size: 11px;
  }

  .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; }
}