@media (max-width: 1024px) {
  :root { --section-padding: 80px 0; }
  .about-grid { gap: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .mission-section { padding: 100px 0; }
}

@media (max-width: 768px) {
  :root {
    --font-size-4xl: 2.25rem; --font-size-3xl: 2rem;
    --font-size-2xl: 1.5rem; --header-height: 64px;
    --section-padding: 64px 0;
  }
  .nav-desktop { display: none; }
  .hamburger { display: flex; }
  .nav-overlay { display: flex; }

  .hero-title { font-size: clamp(2rem, 8vw, 3.5rem); }
  .hero-subtitle { font-size: var(--font-size-base); }
  .hero-content { padding: 0 24px; }
  .hero-deco { font-size: clamp(2.5rem, 12vw, 5rem); }

  .mission-section { padding: 80px 0; }
  .mission-title { font-size: var(--font-size-xl); }
  .mission-text { font-size: var(--font-size-base); }

  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-image { order: -1; }
  .image-reveal-wrap img { height: 280px; }

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

  /* Service → vertical stack on mobile */
  .svc-section { height: auto !important; }
  .svc-pin { flex-direction: column; height: auto; padding: 64px 24px; gap: 32px; }
  .svc-left { width: 100%; text-align: center; }
  .svc-nav { display: none; }
  .svc-right { min-height: auto; }
  .svc-card { position: static; transform: none; opacity: 1; visibility: visible; margin-bottom: 24px; }
  .svc-card.is-active { transform: none; }

  .recruit-item:hover { transform: none; box-shadow: none; }

  .parallax-text { font-size: 3rem; }
  .parallax-text--outline { font-size: 3rem; }

  .recruit-item-header { flex-direction: column; gap: 4px; }
  .recruit-heading { font-size: var(--font-size-base); }

  .company-table th { width: 120px; }
  .company-table th, .company-table td { padding: 16px 12px; font-size: var(--font-size-sm); }

  .news-item { flex-direction: column; gap: 8px; padding: 24px 0; }
  .news-item:hover { transform: none; }

  .form-row { grid-template-columns: 1fr; gap: 0; }

  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .footer-large-brand span { font-size: clamp(2.5rem, 15vw, 5rem); }
  .footer-large-brand { margin-top: 48px; }

  .marquee-track span { font-size: 0.8rem; padding: 0 16px; }
}

@media (max-width: 480px) {
  :root { --font-size-4xl: 1.75rem; --container-padding: 0 16px; }
  .hero-cta { padding: 14px 36px; }
  .submit-button { width: 100%; padding: 16px; }
}