/* ===== RESPONSIVE STYLES (Modern Premium) ===== */

/* --- TABLET / SMALL DESKTOP --- */
@media (max-width: 1100px) {
  /* Layouts to single column */
  .about-layout { grid-template-columns: 1fr; gap: 60px; }
  .transport-layout { grid-template-columns: 1fr; gap: 40px; }
  .contact-layout { grid-template-columns: 1fr; gap: 60px; }
  .footer-top { grid-template-columns: 1fr; gap: 48px; }
  .footer-links { justify-content: flex-start; gap: 48px; }
  
  /* Hero adjustments */
  .hero-card-grid { gap: 12px; }
  .hero-stat-card { padding: 24px 16px; }
  .hsc-num { font-size: 32px; }
}

/* --- MOBILE --- */
@media (max-width: 768px) {
  :root { --nav-h: 70px; }
  
  /* Navbar Mobile Menu */
  .nav-inner { padding: 0 24px; }
  .nav-links { 
    position: fixed; top: var(--nav-h); left: 0; right: 0; 
    background: rgba(11, 15, 25, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    flex-direction: column; padding: 32px 24px; gap: 24px; 
    transform: translateY(-110%); opacity: 0; 
    transition: transform 0.45s var(--easing), opacity 0.45s ease; 
    border-bottom: 1px solid rgba(212,160,23,0.2); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  }
  .nav-links.open { transform: translateY(0); opacity: 1; }
  .hamburger { display: flex; }
  
  /* Sections */
  .section { padding: 80px 0; }
  .container { padding: 0 24px; }
  .section-title { font-size: clamp(32px, 8vw, 40px); }
  
  /* Hero */
  .hero-inner { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 40px; }
  .hero-title { font-size: clamp(40px, 12vw, 64px); margin-bottom: 24px; }
  .hero-desc { font-size: 16px; margin-bottom: 40px; }
  .hero-ctas { flex-direction: column; width: 100%; gap: 16px; }
  .hero-ctas .btn-primary, .hero-ctas .btn-outline { width: 100%; justify-content: center; }
  
  /* Un-overlap hero stats on mobile so they don't block content */
  .hero-right { 
    position: relative; bottom: auto; 
    padding: 0 24px; margin-bottom: -40px; /* Slight overlap into next section padding */
    z-index: 20; 
  }
  .hero-card-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .hero-stat-card { padding: 24px 12px; }
  
  /* Services */
  .services-grid { grid-template-columns: 1fr; }
  
  /* Projects */
  .projects-grid { grid-template-columns: 1fr; }
  .photo-strip { height: 200px; } /* Smaller images on mobile */
  .project-name { font-size: 20px; }
  
  /* Contact */
  .form-row { grid-template-columns: 1fr; gap: 24px; }
  .contact-form { padding: 32px 24px; }
  
  /* About Highlights */
  .about-highlights { grid-template-columns: 1fr; }
  .owner-card { flex-direction: column; align-items: center; text-align: center; }
  
  /* Lightbox */
  .lb-prev { left: 10px; }
  .lb-next { right: 10px; }
  .lb-close { top: 20px; right: 20px; }
}

/* --- SMALL MOBILE --- */
@media (max-width: 480px) {
  /* Stack hero stats fully on very small screens */
  .hero-card-grid { grid-template-columns: 1fr; gap: 12px; }
  .transport-specs { grid-template-columns: 1fr; }
  .about-c7-badge { padding: 20px; }
  .c7-inner { flex-direction: column; text-align: center; gap: 16px; }
}