/* Mobile-first: tighten layout below 1080px, collapse sidebar below 880px */

@media (max-width: 1180px) {
  :root {
    --sidebar-w: 232px;
  }
  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .card-grid--asym {
    grid-template-columns: 1fr 1fr;
  }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--border); }
}

@media (max-width: 960px) {
  .section-head {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .talent {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .contact {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .foot-inner {
    grid-template-columns: 1fr 1fr;
  }
  .hero__index { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
}

@media (max-width: 880px) {
  .app {
    grid-template-columns: 1fr;
  }
  .main { grid-column: 1; padding-top: 64px; }

  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
    width: min(320px, 86vw);
    box-shadow: 0 8px 40px rgba(42, 40, 37, 0.18);
  }
  .sidebar.is-open { transform: translateX(0); }

  .nav-toggle { display: flex; }

  /* Collapse hero spacing on mobile */
  .hero { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
  .section { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }

  .shape--ring { width: 140px; height: 140px; right: -30px; top: 40px; opacity: 0.6; }
  .shape--bar { display: none; }

  .card-grid--3 { grid-template-columns: 1fr; }
  .card-grid--4 { grid-template-columns: 1fr; }
  .card-grid--asym { grid-template-columns: 1fr; }

  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0 !important; border-bottom: 1px solid var(--border); }
  .stat:last-child { border-bottom: 0; }

  .foot-inner { grid-template-columns: 1fr; gap: var(--sp-5); }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  :root {
    --content-pad: 20px;
  }
  .hero__statement { font-size: clamp(36px, 9vw, 56px); }
  .hero__index { grid-template-columns: 1fr 1fr; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
  .contact-line { grid-template-columns: 1fr; }
  .role { grid-template-columns: 1fr auto; gap: var(--sp-3); }
}

/* Print */
@media print {
  .sidebar, .nav-toggle, .nav-backdrop { display: none; }
  .main { grid-column: 1; }
  .card { break-inside: avoid; }
}