/* ════════════════════════════════════════════════════════════════
   Responsive — mobile-first overrides
   (Loaded LAST so these win over everything else)
   ════════════════════════════════════════════════════════════════ */

/* ─── Tablet & small desktop (≤ 1024px) ─── */
@media (max-width: 1024px) {
  :root {
    --space-3xl: 4rem;
    --space-4xl: 5rem;
  }

  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }

  .hero-content {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    text-align: center;
    padding-top: 110px;
  }

  .hero-text { order: 2; }
  .hero-visual { order: 1; }
  .hero-eyebrow { justify-content: center; }
  .hero-description { margin-inline: auto; }
  .hero-cta { justify-content: center; }

  .hero-floating-tag {
    bottom: -6%;
    inset-inline-end: 50%;
    transform: translateX(50%);
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .about-image-wrapper {
    max-width: 500px;
    margin: 0 auto;
    aspect-ratio: 4/3;
  }

  .about-values { grid-template-columns: repeat(3, 1fr); }

  .services-header {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .services-list { grid-template-columns: 1fr; }
  .service-row { border-inline: none !important; }

  .counter-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .features-grid { grid-template-columns: repeat(2, 1fr); }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .contact-map { min-height: 400px; }
  .contact-map iframe { min-height: 400px; }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }

  .side-indicator { display: none; }
}

/* ─── Mobile (≤ 768px) ─── */
@media (max-width: 768px) {
  :root {
    --space-3xl: 3.5rem;
    --space-4xl: 4.5rem;
  }

  .container { padding-inline: var(--space-md); }

  /* Body padding to avoid hiding behind bottom nav */
  body { padding-bottom: 70px; }

  /* Show bottom nav on mobile */
  .mobile-bottom-nav { display: flex; }

  /* Hero */
  .hero-content {
    padding-top: 100px;
    padding-bottom: 60px;
  }

  .hero-cta {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta .btn { width: 100%; justify-content: center; }

  .hero-bottom-strip {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
    padding: var(--space-md);
  }

  .hero-tagline-mini {
    font-size: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
  }

  /* About */
  .about-values { grid-template-columns: 1fr; gap: var(--space-sm); }
  .about-badge {
    bottom: -16px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    min-width: 130px;
  }

  /* Services */
  .service-row { padding: var(--space-xl) var(--space-md); }
  .service-row-number { font-size: 4rem; top: var(--space-sm); inset-inline-end: var(--space-md); }

  /* Counter */
  .counter-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
  .counter-item { padding: var(--space-lg) var(--space-xs); }
  .slot-counter { font-size: 3rem; }
  .counter-label { font-size: 1rem; }

  /* Portfolio */
  .portfolio-slide {
    width: 85vw;
    height: 60vh;
  }
  .portfolio-slide-info { padding: var(--space-md); }
  .portfolio-slide-meta { gap: var(--space-sm); font-size: 0.75rem; }
  .portfolio-progress { width: 100px; }

  /* Why-Us */
  .features-grid { grid-template-columns: 1fr; gap: var(--space-md); }

  /* Contact */
  .contact-card { padding: var(--space-md); }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    text-align: center;
  }
  .footer-social { justify-content: center; }
  .footer-contact li { justify-content: center; }
  .footer-brand .footer-logo { margin-inline: auto; }
}

/* ─── Small mobile (≤ 480px) ─── */
@media (max-width: 480px) {
  .hero-title-main { font-size: clamp(2.25rem, 12vw, 3rem); }
  .counter-grid { grid-template-columns: 1fr; }
  .nav-logo img { width: 130px; }
  .mobile-menu-logo img { width: 120px; }
  .section-watermark { font-size: clamp(10rem, 35vw, 18rem); }
}

/* ─── Print styles (basic) ─── */
@media print {
  .header, .footer, .preloader, .fab-container,
  .float-btn, .cursor, .side-indicator,
  .mobile-bottom-nav, .marquee-bar { display: none !important; }
  body { background: white; color: black; }
}