/* Mobile-first — progressive enhancement upward */

/* Mobile nav drawer below 900px */
@media (max-width: 899px) {
  .nav__burger { display: block; }

  .nav__menu {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-3) var(--gutter) var(--s-4);
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 18px 40px rgba(11, 11, 12, 0.09);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility var(--dur-fast) linear;
  }
  .nav__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--rule-soft); }

  .nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 0.95rem 0;
    font-size: var(--fs-sm);
  }
  .nav__link::after { display: none; }

  /* Second level collapses inline on mobile */
  .subnav {
    position: static;
    min-width: 0;
    left: auto;
    padding: 0 0 0.5rem 0.25rem;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__item.has-sub.is-open .subnav { display: block; }
  .subnav a { padding: 0.6rem 0.5rem; color: var(--ink-3); }

  .nav__cta { margin-top: var(--s-3); width: 100%; }
}

/* 768px — two-column figures and cards */
@media (min-width: 768px) {
  .strip__list { grid-template-columns: repeat(4, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(3, 1fr); gap: 1px; }
  .tile { padding: var(--s-3) var(--s-3) 0 0; }
  .contact__row { grid-template-columns: 120px 1fr; gap: var(--s-3); align-items: baseline; }
  .viz { padding: var(--s-4) var(--s-5); }
  .footer__inner { gap: var(--s-5); }
}

/* 900px — restore desktop nav, split layouts engage */
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--s-6); }
  .hero { padding-top: calc(var(--nav-h) + var(--s-7)); }

  .split { grid-template-columns: 1fr 1.1fr; gap: var(--s-6); }
  .split__media { order: 1; }
  .split__copy { order: 2; }
  .split--reverse .split__media { order: 2; }
  .split--reverse .split__copy { order: 1; }

  .dev__grid { grid-template-columns: 1fr 1.15fr; gap: var(--s-6); }
  .contact__grid { grid-template-columns: 1fr 1.15fr; gap: var(--s-6); }

  .footer__inner {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .footer__legal { grid-column: 1 / -1; }
}

/* 1120px — four-up card grid */
@media (min-width: 1120px) {
  .cards { grid-template-columns: repeat(4, 1fr); }
  .card { padding: var(--s-5) var(--s-4); }
}

/* Coarse pointers get no spotlight */
@media (hover: none) {
  .spotlight { display: none; }
}

/* Forced-colors fallback */
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .chart .line--base { stroke-dasharray: 5 4; }
}