/* ════════════════════════════════════════════════
   RESPONSIVE (MEDIA QUERIES)
   ════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Hero */
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-photo-wrap { order: -1; width: 200px; height: 200px; margin: 0 auto 1.5rem; }
  .hero-photo { width: 200px; height: 200px; }
  .hero-ctas, .hero-meta { justify-content: center; }
  .hero-stats { justify-content: center; gap: 2rem; }

  /* About */
  .about-inner { grid-template-columns: 1fr; text-align: center; gap: 3rem; }
  .about-photo-wrap { margin: 0 auto; }
  .about-text .section-label, .about-text h2 { text-align: center; }
  .about-text .section-label { justify-content: center; }
  .about-text .section-label::after { display: none; }
  .about-text .btn { margin: 1rem auto 0; display: inline-flex; }

  /* Experience Timeline */
  .timeline { padding-left: 1.5rem; }
  .timeline-marker { left: -1.85rem; }
  .timeline-header { grid-template-columns: 1fr; }
  .exp-period { text-align: left; width: fit-content; }

  /* Hamburger & Mobile Nav */
  .nav-links {
    display: none; position: fixed; top: 0; left: 0; right: 0; height: 100vh;
    background: var(--bg); flex-direction: column; 
    justify-content: center; align-items: center; gap: 2.5rem; 
    z-index: 999; padding: 2rem;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; text-align: center; }
  .nav-links li a { 
    display: inline-block; padding: 1rem; font-size: 1.5rem; 
    font-family: var(--font-head); font-weight: 700;
  }
  .hamburger { display: flex; z-index: 1001; }
}

@media (max-width: 680px) {
  section { padding: 5rem 5vw; }
  .hero-photo-wrap, .hero-photo { width: 160px; height: 160px; }
  .hero-stats { gap: 1.5rem; }

  /* Performance */
  .kpi-table { font-size: .78rem; min-width: 480px; }
  .kpi-table th, .kpi-table td { padding: .6rem .5rem; }
  .kpi-table th:last-child, .kpi-table td:last-child { display: none; }

  /* Client Results */
  .case-grid { grid-template-columns: 1fr; }
  .case-metrics { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(2.5rem, 12vw, 3.5rem); }
  .hero-stats { flex-wrap: wrap; }
  .stat-item { min-width: calc(50% - 1rem); }
  .education-grid, .services-grid { grid-template-columns: 1fr; }
}