/* ===== RESPONSIVE BREAKPOINTS ===== */

@media (max-width: 1200px) {
  .container { padding: 0 1.5rem; }
  .header-inner { padding: 0 24px; }
  .footer-grid { padding: 0 2rem; }
  .footer-bottom { padding: 1.5rem 2rem 0; }
  .hero-content { padding: 0 2rem; }
  .process-steps { min-width: auto; overflow-x: auto; }
  .site-header { height: 80px; }
  .main-nav { gap: 1rem; margin-left: 2rem; }
  .main-nav a { font-size: 14px; }
  .logo-img { width: 200px; }
}

@media (max-width: 1024px) {
  :root { --section-padding: 4rem; }
  .container { padding: 0 1.5rem; }
  .display-lg { font-size: 48px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-section { height: 80vh; min-height: 500px; }
  .site-header { height: 78px; }
  .header-inner { padding: 0 24px; }
  .logo-img { width: 160px; }
  .main-nav { gap: 0.9rem; margin-left: 1.5rem; }
  .main-nav a { font-size: 13px; letter-spacing: 0.03em; }
  .site-header .btn-orange { height: 44px; padding: 0 1rem; font-size: 12px; }
}

@media (max-width: 768px) {
  :root {
    --section-padding: 3rem;
    --margin-desktop: 1rem;
  }

  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  .display-lg { font-size: 32px; }
  .headline-lg { font-size: 28px; }
  .headline-md { font-size: 24px; }

  .container { padding: 0 1rem; }
  .site-header { height: 72px; }
  .mobile-menu { top: 72px; height: calc(100vh - 72px); }
  .logo-img { width: 145px; }
  .header-inner { padding: 0 16px; }
  .site-header .btn-orange { height: 40px; padding: 0 0.75rem; font-size: 11px; border-radius: 6px; }
  .mobile-menu-btn { width: 36px; height: 36px; }
  .mobile-menu-btn .material-symbols-outlined { font-size: 26px; }

  .hero-section { height: 90vh; min-height: 450px; }
  .hero-content h1 { font-size: 28px; }
  .hero-content p { font-size: 15px; }
  .hero-buttons .btn { font-size: 12px; padding: 12px 20px; }

  .stats-grid .stat-number { font-size: 36px; }
  .highlights-bar { margin-top: -3rem; padding: 1.5rem; }
  .highlights-grid { gap: 1rem; }
  .highlight-item .number { font-size: 28px; }

  .services-grid { grid-template-columns: 1fr; }
  .service-card { padding: 1.5rem; }

  .project-card .card-image { height: 200px; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item img { height: 200px; }

  .timeline-item .content { width: calc(100% - 40px); margin-left: 40px; text-align: left; }
  .timeline-item .content.left { text-align: left; }
  .timeline-item .spacer { display: none; }

  .cta-content h2 { font-size: 28px; }
  .cta-content p { font-size: 15px; }
  .cta-buttons { flex-direction: column; align-items: center; }

  .contact-form { padding: 1.5rem; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full-width { grid-column: span 1; }

  .info-card { padding: 1rem; }

  .advantage-card { padding: 1.5rem; }
  .advantage-card h3 { font-size: 18px; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 1rem; }

  .section-header h2 { font-size: 24px; }

  .mission-card, .vision-card { padding: 1.5rem; }
  .value-card { padding: 1.5rem; }

  .leader-quote { max-width: 100%; margin-top: -2rem; margin-left: 1rem; margin-right: 1rem; }

  .cert-bar { gap: 1rem; }
  .cert-item { font-size: 11px; }

  .filter-tabs { overflow-x: auto; flex-wrap: nowrap; border-bottom: none; }
  .filter-tab { white-space: nowrap; }

  .faq-item { padding: 1rem; }

  .process-steps { min-width: 800px; }
}

@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .highlights-grid { grid-template-columns: repeat(2, 1fr); }
  .container { padding: 0 1rem; }
  .site-header { height: 68px; }
  .mobile-menu { top: 68px; height: calc(100vh - 68px); }
  .header-inner { padding: 0 16px; }
  .logo-img { width: 130px; }
  .site-header .btn-orange { height: 36px; padding: 0 0.6rem; font-size: 10px; }
  .mobile-menu-btn { width: 32px; height: 32px; }
  .mobile-menu-btn .material-symbols-outlined { font-size: 24px; }
  .hero-section { min-height: 400px; }
  .highlight-item .number { font-size: 24px; }
  .stats-grid .stat-number { font-size: 28px; }
}