/* ============================================================
   Gemisa Studio V3 — Responsive
   ============================================================ */

@media (max-width: 1024px) {
  :root { --px: 36px; --section-gap: 68px; }

  .nav { padding: 16px var(--px); }
  .nav.scrolled { padding: 10px 20px; }

  .hero-title { font-size: clamp(44px, 7vw, 72px); }

  .team-card--center { margin-top: -24px; }

  .portfolio-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .portfolio-card--main { grid-column: 1 / 3; grid-row: 1; }
  .portfolio-card--main .portfolio-card-bg { min-height: 320px; }

  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / 3; }
}

@media (max-width: 768px) {
  :root { --px: 24px; --section-gap: 52px; }

  .services-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .services-head-desc { max-width: 100%; }
  .services-grid { grid-template-columns: 1fr; }

  .nav { padding: 14px var(--px); }
  .nav.scrolled { padding: 9px 18px; }
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }

  .hero { padding: 100px 0; min-height: auto; }
  .hero-inner { padding: 0 var(--px); }
  .hero-title { font-size: clamp(36px, 9vw, 56px); }
  .hero-sub { font-size: 16px; }

  .hero-bg-logo { font-size: 26vw; letter-spacing: 0.07em; transform: translateX(-2.5vw); }

  .section-head { flex-direction: column; align-items: flex-start; margin-bottom: 44px; }
  .section-head .btn { display: none; }

  .team-grid { grid-template-columns: 1fr; gap: 16px; }
  .team-card--center { margin-top: 0; }
  .team-photo-wrap { aspect-ratio: 4/3; }
  .team-header { margin-bottom: 52px; }

  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-card--main { grid-column: 1; grid-row: auto; }
  .portfolio-card--main .portfolio-card-bg { min-height: 260px; }
  .portfolio-card-bg { min-height: 200px; }

  .proof-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }

  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-brand { grid-column: 1; }
  .footer-bottom { flex-direction: column; gap: 18px; text-align: center; }

  .mobile-nav { padding: 80px var(--px); }
  .cta-banner { padding: 80px 0; }
}