/* Responsive Styles */
.mobile-nav-drawer {
  display: none;
}

@media (min-width: 993px) {
  .mobile-nav-drawer {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    pointer-events: none !important;
  }
  .mobile-toggle {
    display: none !important;
  }
}

@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .work-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .case-meta-ribbon { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 992px) {
  .hero-grid,
  .about-overview-grid,
  .mockup-grid,
  .impact-grid,
  .contact-layout-grid,
  .contact-page-grid,
  .team-grid,
  .leader-card-row,
  .leader-card-row.reverse {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .leader-card-row.reverse .leader-info,
  .leader-card-row.reverse .leader-media {
    order: unset;
  }
  
  .nav-menu, .header-cta { 
    display: none !important; 
  }
  
  .mobile-toggle { 
    display: flex !important; 
  }
  
  .mobile-nav-drawer {
    display: flex !important;
    visibility: visible !important;
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background: var(--color-white);
    padding: 30px 24px;
    box-shadow: var(--shadow-xl);
    flex-direction: column;
    gap: 16px;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    overflow-y: auto;
  }
  
  .mobile-nav-drawer.open { 
    transform: translateX(0); 
  }
  
  .mobile-nav-link {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-slate-800);
    padding: 12px 0;
    border-bottom: 1px solid var(--color-slate-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .mobile-nav-link.active { 
    color: var(--color-cyan); 
  }
  
  .testimonials-track { 
    grid-template-columns: 1fr; 
  }

  .work-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .case-challenge-solution-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .case-features-container {
    grid-template-columns: 1fr;
  }

  .modal-info-grid {
    grid-template-columns: 1fr;
  }

  .modal-features-grid {
    grid-template-columns: 1fr;
  }

  .case-hero-title {
    font-size: 2.2rem;
  }
}

@media (max-width: 640px) {
  .section-title { font-size: 1.85rem; }
  .hero-title { font-size: 2.2rem; }
  .page-hero-title, .contact-mesh-title { font-size: 2.1rem; }
  .services-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-check-list, .form-row { grid-template-columns: 1fr; }
  .contact-form-card, .contact-form-panel, .mockup-form-card { padding: 24px 18px; }
  .stats-bar-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .leader-card { flex-direction: column; align-items: center; text-align: center; }
  .leader-socials { justify-content: center; }

  /* Mobile Portfolio & Case Study Styles */
  .work-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .work-img-wrapper {
    height: 200px;
  }

  .work-card-actions {
    flex-direction: column;
    width: 100%;
  }

  .btn-card-primary,
  .btn-card-secondary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .case-meta-ribbon {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }

  .case-hero {
    padding: 100px 0 50px;
  }

  .case-hero-title {
    font-size: 1.85rem;
  }

  .case-box {
    padding: 24px 18px;
  }

  .case-outcome-highlight {
    padding: 28px 20px;
    flex-direction: column;
    align-items: flex-start;
  }

  .project-modal-scroll {
    padding: 20px 16px;
  }

  .project-modal-title {
    font-size: 1.35rem;
  }

  .project-modal-footer {
    flex-direction: column;
    width: 100%;
  }

  .project-modal-footer .btn {
    width: 100%;
    justify-content: center;
  }
}