@media (max-width: 1060px) {
  .site-nav {
    gap: 12px;
    font-size: 12px;
  }

  .hero-grid,
  .ecosystem,
  .about,
  .contact {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 520px;
  }

  .core-card {
    width: min(340px, 76vw);
  }

  .chip-1 { top: 2%; left: 6%; }
  .chip-2 { top: 2%; right: 6%; }
  .chip-3 { top: 18%; left: 2%; }
  .chip-4 { top: 64%; right: 0; }
  .chip-5 { bottom: 1%; left: 10%; }
  .chip-6 { bottom: 1%; right: 10%; }
  .chip-7,
  .chip-8 {
    display: none;
  }

  .timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .division-grid,
  .needs-grid,
  .industry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .benefits-lead {
    position: relative;
    top: auto;
    min-height: auto;
  }
}

@media (max-width: 860px) {
  .menu-toggle {
    display: block;
  }

  .site-nav {
    position: fixed;
    inset: 76px 16px auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    max-height: calc(100vh - 96px);
    overflow: auto;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius);
    background: rgba(7, 13, 27, 0.96);
    box-shadow: var(--shadow);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    padding: 10px 0;
  }

  .nav-cta {
    margin-top: 8px;
  }

  .hero-grid {
    gap: 28px;
    padding-top: 118px;
  }

  .hero {
    background-position: center, center, 62% center, center;
  }

  .wide-cta {
    align-items: flex-start;
    flex-direction: column;
  }

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

@media (max-width: 620px) {
  .brand img {
    width: 106px;
  }

  .hero-grid,
  .section,
  .wide-cta {
    width: min(100% - 30px, var(--max));
  }

  h1 {
    font-size: 42px;
  }

  .hero {
    background:
      linear-gradient(180deg, rgba(3, 8, 22, 0.96) 0%, rgba(3, 8, 22, 0.78) 54%, rgba(3, 8, 22, 0.52) 100%),
      url("../assets/images/hero-ccbh-background.jpg"),
      linear-gradient(135deg, #050814 0%, #081a33 46%, #120c2d 100%);
    background-size: cover, cover, cover;
    background-position: center, 64% center, center;
  }

  h2 {
    font-size: 34px;
  }

  .hero-text {
    font-size: 17px;
  }

  .hero-visual {
    min-height: 500px;
  }

  .core-card {
    width: min(320px, 86vw);
    padding: 24px;
  }

  .core-card strong {
    font-size: 26px;
  }

  .float-chip {
    font-size: 12px;
    min-height: 34px;
    padding: 8px 11px;
  }

  .chip-1 { top: 0; left: 2%; }
  .chip-2 { top: 0; right: 2%; }
  .chip-3 { top: 16%; left: 4%; }
  .chip-4 { top: 72%; right: 0; }
  .chip-5 { bottom: 0; left: 7%; }
  .chip-6 { bottom: 0; right: 7%; }

  .division-grid,
  .benefit-grid,
  .needs-grid,
  .industry-grid,
  .timeline {
    grid-template-columns: 1fr;
  }

  .division-card,
  .benefit-card,
  .need-card,
  .timeline-step {
    min-height: auto;
  }

  .division-media {
    height: 150px;
  }

  .need-card img {
    aspect-ratio: 16 / 8;
  }

  .division-card a {
    position: static;
    margin-top: 24px;
    display: inline-flex;
  }

  .ecosystem-visual img {
    min-height: 360px;
  }

  .contact-actions {
    flex-direction: column;
  }

  .button {
    width: 100%;
  }
}