/* ============================================================
   Studio Olivieri WP — Responsive
   ============================================================ */

@media (max-width: 767px) {
  .hamburger { display: flex; }
  .main-nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: var(--color-white); display: none; flex-direction: column;
    padding: 24px; overflow-y: auto; border-top: 1px solid var(--color-border);
    box-shadow: 0 8px 32px rgba(0,0,0,.16); z-index: 999;
  }
  .main-nav.open { display: flex; }
  .main-nav ul   { flex-direction: column; gap: 4px; width: 100%; }
  .main-nav a    { padding: 12px 16px; font-size: 17px; }
  .main-nav .menu-cta { margin-top: 12px; text-align: center; }

  .hero { padding: 64px 0 48px; }
  .hero h1 { font-size: 28px; }
  .hero p  { font-size: 16px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { text-align: center; justify-content: center; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stat-number { font-size: 36px; }

  .services-grid    { grid-template-columns: 1fr; }
  .team-grid        { grid-template-columns: 1fr; }
  .values-grid      { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .jobs-grid        { grid-template-columns: 1fr; }

  .why-grid { grid-template-columns: 1fr; gap: 32px; }

  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .blog-layout    { grid-template-columns: 1fr; }
  .blog-grid      { grid-template-columns: 1fr; }
  .two-col-intro  { grid-template-columns: 1fr; gap: 32px; }
  .two-col-intro img { order: -1; }

  .footer-grid  { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom-links { justify-content: center; }

  .section-pad    { padding: 48px 0; }
  .section-pad-sm { padding: 36px 0; }
  .page-hero { padding: 40px 0 32px; }
  .page-hero h1 { font-size: 24px; }
  .cta-banner { padding: 40px 0; }
  .cert-grid { flex-direction: column; align-items: stretch; }
  .blog-layout .sidebar { order: -1; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hamburger { display: flex; }
  .main-nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: var(--color-white); display: none; flex-direction: column;
    padding: 24px; overflow-y: auto; border-top: 1px solid var(--color-border);
    box-shadow: 0 8px 32px rgba(0,0,0,.16); z-index: 999;
  }
  .main-nav.open { display: flex; }
  .main-nav ul   { flex-direction: column; gap: 4px; width: 100%; }
  .main-nav a    { padding: 12px 16px; font-size: 16px; }

  .services-grid    { grid-template-columns: repeat(2, 1fr); }
  .team-grid        { grid-template-columns: repeat(2, 1fr); }
  .values-grid      { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .jobs-grid        { grid-template-columns: repeat(2, 1fr); }
  .stats-grid       { grid-template-columns: repeat(2, 1fr); }
  .why-grid         { grid-template-columns: 1fr; gap: 40px; }
  .contact-layout   { grid-template-columns: 1fr; gap: 40px; }
  .blog-layout      { grid-template-columns: 1fr; }
  .blog-grid        { grid-template-columns: repeat(2, 1fr); }
  .two-col-intro    { gap: 40px; }
  .footer-grid      { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand     { grid-column: 1 / -1; }
}

@media (min-width: 1280px) {
  .container { padding: 0 40px; }
  .hero { padding: 120px 0 100px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}