/* ============================================================
   TECHYSYNC — RESPONSIVE STYLES
   ============================================================ */

/* ---- 1440px+ Large Desktop ---- */
@media (min-width: 1440px) {
  :root { --container-max: 1320px; }
}

/* ---- <1024px Tablet / Medium Screen ---- */
@media (max-width: 1024px) {
  .nav__links { gap: var(--space-4); font-size: var(--text-sm); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---- <992px Compact Tablet / Medium Viewport ---- */
@media (max-width: 991px) {
  :root {
    --nav-height: 64px;
  }

  /* Switch nav to mobile drawer mode on compact tablet */
  .nav__links { display: none; }
  .nav__cta.desktop-only { display: none; }
  .nav__hamburger { display: flex; }

  /* Hero Grid Stacking */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    text-align: center;
  }

  .hero-text-col {
    max-width: 680px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-text-col .hero-anim-1 {
    justify-content: center;
  }

  .hero-text-col h1 {
    text-align: center;
  }

  .hero-text-col p {
    margin-inline: auto;
    text-align: center;
  }

  .hero-text-col .hero-anim-4 {
    justify-content: center;
  }

  .hero-visual-deck {
    max-width: 440px !important;
    margin-inline: auto !important;
  }

  .about-summary-grid {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }

  .commercial-delivery-grid {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
}

/* ---- <768px Mobile ---- */
@media (max-width: 768px) {
  :root {
    --nav-height: 60px;
  }

  .section { padding-block: var(--space-16); }
  .section--sm { padding-block: var(--space-10); }

  /* Hero */
  .hero__content { text-align: center; }
  .hero__actions { justify-content: center; }

  /* Grids */
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }

  /* Footer */
  .footer__top { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 1rem; }

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

  /* Portfolio */
  .portfolio-grid { grid-template-columns: 1fr !important; }

  /* Team */
  .team-grid { grid-template-columns: 1fr 1fr !important; }

  /* Page hero */
  .page-hero { padding-top: calc(var(--nav-height) + var(--space-12)); padding-bottom: var(--space-12); }

  /* Approach section */
  .approach-grid { grid-template-columns: 1fr !important; }
  .approach-connector { display: none; }

  /* Home hero layout */
  .hero--split { flex-direction: column; }
  .hero-visual { max-width: 300px; margin-top: var(--space-10); }
}

/* ---- <480px Small Mobile ---- */
@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr !important; }

  .btn { padding: 0.65rem 1.25rem; font-size: var(--text-xs); }

  .footer__legal { flex-direction: column; gap: var(--space-2); }

  .hero__actions { flex-direction: column; align-items: center; }

  .section-header p { font-size: var(--text-base); }

  .pillars-grid { grid-template-columns: 1fr !important; }
  .metrics-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }

  .hero-anim-4 { flex-direction: column; width: 100%; }
  .hero-anim-4 .btn { width: 100%; text-align: center; justify-content: center; }

  .hero-visual-deck { max-width: 280px !important; }
  .hero-orbit-system { transform: translate(-50%, -50%) scale(0.62) !important; }
  .hero-floating-pill { font-size: 0.7rem !important; padding: 0.35rem 0.7rem !important; }
  .pill-1 { top: -5px !important; left: 0 !important; }
  .pill-2 { bottom: -10px !important; right: 0 !important; }

  .project-card { flex: 1 1 100% !important; max-width: 100% !important; }
  .hp-project-card { width: 100% !important; }
}

/* ---- 375px Smallest ---- */
@media (max-width: 375px) {
  :root { --container-pad: 1rem; }
  .hero-visual-deck { max-width: 250px !important; }
  .hero-orbit-system { transform: translate(-50%, -50%) scale(0.55) !important; }
}

/* ============================================================
   PAGE-SPECIFIC RESPONSIVE OVERRIDES
   ============================================================ */

/* Global container and layout safety */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Form 2-column to 1-column responsive grid */
.form-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 640px) {
  .form-row-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* Services page */
@media (max-width: 900px) {
  .service-category { margin-bottom: var(--space-12); }
}

/* Contact page */
@media (max-width: 768px) {
  .contact-layout { grid-template-columns: 1fr !important; }
  .contact-info { order: 2; }
  .contact-form-wrap { order: 1; }

  .form-step-indicators { gap: var(--space-4); }

  .service-checkboxes { grid-template-columns: 1fr !important; }
  .goal-options       { grid-template-columns: 1fr !important; }
  .contact-options    { grid-template-columns: 1fr 1fr !important; }
}

/* About page */
@media (max-width: 768px) {
  .about-split { flex-direction: column !important; }
  .vision-grid { grid-template-columns: 1fr !important; }
}