/* ==========================================================================
   Responsive, mobile-first. Base styles in the other files target phones;
   this file only adds the wider layouts. One breakpoint for every page so
   the homepage and portfolio headers always switch together.
   ========================================================================== */

/* Stacked (single-column) layouts: text parallax pushes a heading and the
   paragraph under it into each other, so keep text still until columns
   appear. Background canvases keep their parallax. */
@media (max-width: 860px) {
  h2[data-par], .desc[data-par], .item[data-par] { translate: none !important; }
}

@media (min-width: 861px) {
  /* Header: full nav + store button, no Menu button */
  .hdr { grid-template-columns: 1fr auto 1fr; }
  .hdr nav { display: flex; }
  .hdr .pill-btn { display: inline-flex; }
  .menu-btn { display: none; }

  /* Two-column layouts */
  .split, .caps, .get-row { grid-template-columns: 1fr 1fr; }
  .cols { grid-template-columns: repeat(3, 1fr); margin-top: var(--xl6); }
  .foot-top { grid-template-columns: 1.4fr 2fr; }
  .foot-cols { grid-template-columns: repeat(3, 1fr); }

  .engine .inner { grid-template-columns: 1.3fr 1fr; }
  .terms-copy { grid-column: 2; }

  .hero { height: clamp(620px, 90vh, 880px); }
  .engine { min-height: 760px; }
}