/* ==========================================================================
   Responsive layer.

   The original design was authored desktop-first with inline grids and only a
   handful of breakpoints (gallery, services accordion, process stepper, hero
   diagram). Those original breakpoints are preserved in sections/*.css.

   This file adds what the export did not have: a mobile menu and stacking
   rules for the multi-column grids, so the site works on tablets and phones
   without changing the desktop layout at all (nothing here applies above
   1100px).
   ========================================================================== */

/* ---------- Tablet landscape: 4-up -> 2-up ---------------------------------- */
@media (max-width: 1100px) {
  .packages-grid,
  .process-grid,
  .ladder-grid,
  .complete-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* ---------- Mobile menu (replaces the row of links) ------------------------- */
@media (max-width: 960px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    background: transparent;
    border: 2px solid var(--color-text);
    color: var(--color-text);
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
  }

  .nav-toggle:hover {
    background: var(--color-accent-100);
  }

  .nav-toggle-bars {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
  }

  .nav-toggle-bars i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease, top .3s cubic-bezier(.16,1,.3,1);
  }

  .nav-toggle-bars i:nth-child(1) { top: 0; }
  .nav-toggle-bars i:nth-child(2) { top: 6px; }
  .nav-toggle-bars i:nth-child(3) { top: 12px; }

  .atlas-nav.is-open .nav-toggle {
    background: var(--color-text);
    color: var(--color-bg);
  }

  .atlas-nav.is-open .nav-toggle-bars i:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .atlas-nav.is-open .nav-toggle-bars i:nth-child(2) { opacity: 0; }
  .atlas-nav.is-open .nav-toggle-bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

  .nav-inner {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    padding: 6px clamp(20px,5vw,72px) 26px;
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-text);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }

  .atlas-nav.is-open .nav-inner {
    display: flex;
  }

  .nav-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: 20px;
    font-weight: 800;
    font-family: var(--font-heading);
    letter-spacing: -.01em;
  }

  .nav-row .atlas-navlink {
    display: block;
    padding: 16px 0;
    border-bottom: 2px solid var(--color-divider);
  }

  .nav-row .atlas-navlink::after {
    display: none;
  }

  .nav-row .atlas-navlink[data-active] {
    color: var(--color-accent);
  }

  .nav-inner .nav-cta {
    justify-content: flex-start;
  }

  /* keep the page from scrolling behind the open menu */
  html.atlas-menu-open {
    overflow: hidden;
  }
}

/* ---------- Tablet portrait: two-column layouts stack ----------------------- */
@media (max-width: 900px) {
  .hero-grid,
  .shift-grid,
  .why-inner,
  .intro-inner,
  .who-inner,
  .reach-inner,
  .signup-grid,
  .featured-link,
  .packages-page-hero-grid,
  .services-page-hero-grid,
  .terms-grid,
  .cards-inner,
  .beliefs-grid,
  .connect-grid,
  .services-compliance-grid,
  .packages-compliance-grid,
  .starts-grid,
  .principles-grid,
  .cases-card,
  .prevnext-inner,
  .stats-inner {
    grid-template-columns: 1fr;
  }

  .hero-grid { gap: 28px; }
  .shift-grid { gap: 40px; }
  .why-inner { gap: 40px; }
  .why-inner .grayscale { max-width: 520px; }

  .stats-inner > div {
    border-right: 0 !important;
    border-bottom: 2px solid rgba(243,242,242,.4);
  }

  .stats-inner > div:last-child {
    border-bottom: 0;
  }

  .cases-box,
  .cases-box--flip {
    order: 0;
    border-right: 0;
    border-bottom: 2px solid var(--color-text);
    min-height: 260px;
  }

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

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

  /* wide comparison table scrolls sideways instead of squashing */
  .compare-box {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .compare-box .table {
    min-width: 640px;
  }

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

  .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }
}

/* ---------- Phones ----------------------------------------------------------- */
@media (max-width: 600px) {
  .packages-grid,
  .process-grid,
  .ladder-grid,
  .complete-grid,
  .posts-grid,
  .build-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid { gap: 36px; }

  .nav-logo,
  .nav-logo--sub { width: auto; height: 38px; }

  .atlas-footer { padding-top: 48px; }

  /* home hero growth panel: give the overlaid chips room instead of a 16:7 box */
  .growth-box-2 {
    aspect-ratio: auto;
    min-height: 380px;
  }

  .growth-box-6 {
    flex-wrap: wrap;
  }

  .growth-box-6 > div {
    flex: 1 1 50%;
    border-bottom: 2px solid var(--color-divider);
  }

  .testimonials-row {
    align-items: flex-start;
  }
}

/* ---------- Gallery tiles when the row stacks (<= 760px) ---------------------------
   The original stacked the row but left flex-basis at 0, which collapsed the tiles
   to nothing in a column. Give each tile its 200px height back. */
@media (max-width: 760px) {
  .gal-tile {
    flex: 0 0 200px;
  }
}