/* responsive.css – Mobile-first responsive overrides */

/* ── Tablet ≤ 1024px ────────────────────────── */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }

  .intro-strip {
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid .footer-brand {
    grid-column: 1 / -1;
  }

  .cta-strip {
    flex-direction: column;
    text-align: center;
  }

}

/* ── Mobile ≤ 768px ─────────────────────────── */
@media (max-width: 768px) {
  /* Nav: hide desktop links, show hamburger */
  .nav-links  { display: none; }
  .nav-hamburger { display: flex; }

  /* Hero + inner page covers (same mobile treatment) */
  .hero,
  .about-hero,
  .services-hero,
  .portfolio-hero,
  .contact-hero {
    min-height: 100svh;
    background-position: 70% center;
    align-items: center;
    padding-bottom: 0;
  }

  .hero::before,
  .about-hero::before,
  .services-hero::before,
  .portfolio-hero::before,
  .contact-hero::before {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.85) 0%,
      rgba(0,0,0,0.70) 100%
    );
  }

  .hero-title  { font-size: clamp(3.5rem, 14vw, 5rem); }
  .hero-actions { flex-direction: column; align-items: flex-start; }

  /* Pillars */
  .pillars-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-md);
  }

  .pillar:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--sp-md);
  }

  .pillar { padding: 0; }

  /* Grids */
  .grid-2,
  .grid-3 { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }

  .footer-bottom {
    flex-direction: column;
    gap: var(--sp-xs);
    text-align: center;
  }

  /* Team */
  .team-split {
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
  }

  .team-split-axis { display: none; }

  /* Section padding reduction */
  .section    { padding: var(--sp-2xl) 0; }
  .section-sm { padding: var(--sp-xl) 0; }
}

/* ── Small mobile ≤ 480px ───────────────────── */
@media (max-width: 480px) {
  .hero-title { font-size: 3rem; }
  .btn { width: 100%; justify-content: center; }
  .hero-actions { width: 100%; }

  .cta-strip { padding: var(--sp-xl) var(--sp-md); }
}