/* =========================================================
   Responsive breakpoints
   ========================================================= */

/* Tablet ≥ 640px */
@media (min-width: 640px) {
  .hero { padding: 11rem 0 12rem; }
  .ribbon { padding: 1.75rem 0; }
  .portfolio-head, .services-head { flex-direction: row; align-items: flex-end; }
  .marquee span { font-size: 1.85rem; }
  .footer-meta { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ≥ 768px (md) */
@media (min-width: 768px) {
  .main-nav { display: inline-flex; }
  .menu-toggle { display: none; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card { padding: 2.5rem; }
  .service-card:nth-child(odd) { border-right: 1px solid var(--border) !important; }
  /* Restore bottom borders correctly on 2-col layout: the last two cards
     (in pairs) get no bottom border. There are 7 services so the last card sits alone. */
  .service-card:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .service-card:last-child { border-bottom: none; border-right: none; }

  .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
  .work-card.span-2 { grid-column: span 2; }
  .work-card.span-2-row { grid-column: span 2; grid-row: span 2; }

  .case { grid-template-columns: 1fr 1fr; padding: 2.5rem; }
  .case.reverse > :first-child { order: 2; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }

  .cta-card { padding: 7rem 4rem; }
  .contact-grid { grid-template-columns: 1.4fr 1fr; }
}

/* ≥ 1024px (lg) */
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.5fr 1fr; }
  .pillars { grid-template-columns: repeat(4, 1fr); }
  .about-grid { grid-template-columns: 1.1fr 1fr; align-items: center; }
  .process-list { grid-template-columns: repeat(5, 1fr); }
  .brand-statement h2, .section-head h2, .about h2, .cta-card h2 {
    font-size: 4rem;
  }
}

/* Large screens */
@media (min-width: 1280px) {
  .container, .container-wide { padding: 0 2rem; }
}