/* ===== RESPONSIVE STYLES ===== */

/* Prevent horizontal scrolling globally */
html, body {
  overflow-x: hidden;
}

/* ===== TABLET (max-width: 1024px) ===== */
@media (max-width: 1024px) {
  .hero-split {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    text-align: center;
  }
  .hero-content {
    max-width: 700px;
    margin: 0 auto;
  }
  .hero-actions {
    justify-content: center;
  }
  .hero-image {
    max-width: 600px;
    margin: 0 auto;
  }
  .hero-stats {
    justify-content: center;
  }

  .services-grid {
    grid-template-columns: 1fr 1fr;
  }

  .projects-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }
  .why-image img {
    min-height: 400px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }

  .responsive-grid-2 {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .calc-wrapper {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .svc-detail {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  .svc-detail.reverse .svc-img {
    order: unset;
  }

  .story-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .vm-grid {
    grid-template-columns: 1fr;
  }

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

  .team-grid {
    grid-template-columns: 1fr 1fr;
  }

  .process-grid {
    grid-template-columns: 1fr 1fr;
  }
  .process-step:nth-child(n) {
    margin-top: 0;
  }

  .stats-row {
    grid-template-columns: 1fr 1fr;
  }

  .testimonials-track {
    grid-template-columns: 1fr 1fr;
  }
  .testimonial-card:nth-child(n) {
    margin-top: 0;
  }

  .trust-grid {
    grid-template-columns: 1fr 1fr;
  }

  .benefits-grid {
    grid-template-columns: 1fr 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .inline-cta {
    flex-direction: column;
    text-align: center;
    padding: var(--sp-10);
  }

  .project-feature-card {
    grid-template-columns: 1fr;
  }
  .project-feature-card.reverse {
    grid-template-columns: 1fr;
  }
  .project-feature-card .project-img-wrap {
    min-height: 300px;
  }
  .project-feature-card.reverse .project-body { order: unset; }
  .project-feature-card.reverse .project-img-wrap { order: unset; }

  .service-feature-row {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  .service-feature-row.reverse .service-info { order: unset; }
  .service-feature-row.reverse .service-img { order: unset; }

  .team-card-horizontal {
    flex-direction: column;
    padding: 3rem;
  }

  /* ===== TABLET NAV (max-width: 1024px) ===== */
  .header {
    top: 8px;
    left: 3%;
    right: 3%;
    width: 94%;
    padding: var(--sp-1) var(--sp-4);
    border-radius: 16px;
  }
  .header.scrolled {
    backdrop-filter: none;
    background: #ffffff;
  }
  .logo-icon {
    height: 160px;
  }
  .header.scrolled .logo-icon {
    height: 42px;
  }
  .nav-menu {
    position: fixed;
    top: -16px; /* Over-cover top gap */
    right: -100vw;
    width: 320px; /* Wider to over-cover right gap */
    height: 110vh; /* Taller to over-cover bottom gap */
    background: #fff;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-6);
    padding: var(--sp-10);
    padding-top: 40px; /* Offset the negative top */
    box-shadow: -8px 0 40px rgba(0,0,0,0.15);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 300;
  }
  .nav-menu.active {
    right: -16px; /* Over-cover right gap */
  }
  .nav-close {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2.5rem;
    color: var(--clr-secondary);
    cursor: pointer;
    line-height: 1;
    padding: 10px;
    transition: color 0.3s var(--ease);
  }
  .nav-close:hover {
    color: var(--clr-primary);
  }
  .nav-link {
    font-size: 1.1rem;
  }
  .header-cta {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    gap: 1rem !important;
    margin-left: 0 !important;
    margin-top: 1rem;
  }
  .mobile-toggle {
    display: flex;
  }
  .mobile-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .mobile-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .mobile-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
}

/* ===== MOBILE (max-width: 768px) ===== */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--sp-5);
  }

  .section-padding {
    padding: var(--sp-16) 0;
  }
  .section-padding-lg {
    padding: var(--sp-20) 0;
  }



  /* Hero */
  .hero {
    padding: 120px 0 60px;
    min-height: auto;
  }
  .hero-image img {
    min-height: 280px;
  }

  /* Page Hero */
  .page-hero {
    padding: 130px 0 60px;
  }

  /* Services */
  .services-grid {
    grid-template-columns: 1fr;
  }
  .service-card {
    padding: var(--sp-8);
  }

  /* Projects */
  .projects-grid {
    grid-template-columns: 1fr !important;
  }
  .projects-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }
  .d-none-mobile {
    display: none !important;
  }
  .d-block-mobile {
    display: block !important;
  }

  /* Fix grids with fixed minmax causing overflow */
  [style*="minmax(380px"] {
    grid-template-columns: 1fr !important;
  }
  [style*="minmax(320px"] {
    grid-template-columns: 1fr !important;
  }
  [style*="minmax(300px"] {
    grid-template-columns: 1fr !important;
  }
  [style*="minmax(280px"] {
    grid-template-columns: 1fr !important;
  }
  [style*="minmax(240px"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Stack hero CTA buttons vertically */
  .hero-actions,
  [style*="display: flex"][style*="gap: 1rem"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero-actions .btn,
  .hero-actions a {
    width: 100% !important;
    text-align: center !important;
  }

  /* Prevent nowrap titles from overflowing */
  [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  /* Keep icon containers from pushing content */
  [style*="width: 100px; height: 100px"] {
    width: 72px !important;
    height: 72px !important;
  }
  [style*="width: 100px; height: 100px"] svg {
    width: 36px !important;
    height: 36px !important;
  }
  [style*="width: 100px; height: 100px"] img {
    width: 44px !important;
    height: 44px !important;
  }

  /* Footer CTA Mobile Fixes */
  #footer-cta {
    padding: 3rem 0 !important;
  }
  #footer-cta h2 {
    font-size: 1.7rem !important;
  }
  #footer-cta .btn {
    width: 100% !important;
    margin-bottom: 0.5rem;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  .footer-bottom {
    flex-direction: column;
    gap: var(--sp-4);
    text-align: center;
  }

  /* Values */
  .values-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  /* Process */
  .process-grid {
    grid-template-columns: 1fr;
  }
  .process-connector {
    display: none;
  }

  /* Stats */
  .stats-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }

  /* Testimonials */
  .testimonials-track {
    grid-template-columns: 1fr;
  }

  /* Trust Bar */
  .trust-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }

  /* Benefits */
  .benefits-grid {
    grid-template-columns: 1fr;
  }

  /* Feature Metrics */
  .feature-metrics {
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Modal */
  .modal-content {
    width: 95%;
  }
  .modal-close {
    top: -45px;
    right: 5px;
    font-size: 2rem;
  }

  /* Floating WhatsApp */
  .floating-whatsapp {
    width: 52px;
    height: 52px;
    bottom: 20px;
    right: 20px;
  }
  .floating-whatsapp .tooltip {
    display: none;
  }
}

/* ===== SMALL MOBILE (max-width: 480px) ===== */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.8rem;
  }
  .hero-sub {
    font-size: 0.95rem;
  }
  .btn-lg {
    padding: 14px 24px;
    font-size: 0.95rem;
  }

  .stat-card-custom h3 {
    font-size: 2rem;
  }

  .section-title {
    font-size: 1.6rem;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }

  .stats-row {
    grid-template-columns: 1fr;
  }

  .nav-menu {
    width: 100%;
  }

  /* Force all inline grids to single column */
  [style*="minmax(280px"] {
    grid-template-columns: 1fr !important;
  }
  [style*="minmax(240px"] {
    grid-template-columns: 1fr !important;
  }
}