/* ===========================================================================
   Marroquin Markedsføring — responsive.css
   60rem = layout collapse. 48rem = tablet/phone. 40rem = phone.
   Non-negotiables: no horizontal scroll, no wrapping CTAs, 44px hit targets.
   =========================================================================== */

/* ---- Laptop & desktop: render the whole page at 80% scale ---------------
   Makes the layout feel less oversized on laptop screens, as if the browser
   were zoomed to 80%. Phones/tablets (< 64rem) stay at 100%. */
@media (min-width: 64rem) {
  :root { zoom: 0.8; }
  /* Zoom compensation: 125svh × 0.8 paints as exactly one full viewport,
     so the hero commands the whole first screen on laptops/desktops. */
  .hero { min-height: 125svh; }
}

/* ---- ≤ 60rem (~960px) --------------------------------------------------- */
@media (max-width: 60rem) {
  .hero__grid,
  .split,
  .about,
  .sechead,
  .case,
  .band-blue__grid,
  .band-blue__row,
  .contact__grid,
  .footer__top { grid-template-columns: 1fr; }

  .sechead { align-items: start; gap: var(--space-md); margin-bottom: var(--space-xl); }
  .band-blue__row .btn { justify-self: start; }
  .case__col .link-cta { margin-top: 0; padding-top: var(--space-lg); margin-bottom: var(--space-xl); }

  /* Stacked hero: copy first, orbit animation below */
  .hero__viz { width: 100%; }
  .orbit { width: min(100%, 22rem); }

  .about__media { max-width: 24rem; }

  .band-blue__grid { gap: var(--space-lg); }
  .band-blue__action { justify-self: start; }

  .split__claim--sticky { position: static; }
  .contact__aside { order: -1; }

  /* Nav → logo + hamburger */
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__toggle {
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: var(--radius-pill);
    color: var(--color-ink);
  }
}

/* ---- ≤ 48rem (~768px) --------------------------------------------------- */
@media (max-width: 48rem) {
  .principles { grid-template-columns: 1fr; gap: var(--space-lg); }
  .principles--stack { gap: 0; }

  /* Stat strip 4 → 2 */
  .statstrip { grid-template-columns: 1fr 1fr; }
  .statstrip__item { padding-inline: var(--space-md) var(--space-md); }
  .statstrip__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .statstrip__item:nth-child(n+3) { margin-top: var(--space-md); }
}

/* ---- ≤ 40rem (~640px) --------------------------------------------------- */
@media (max-width: 40rem) {
  :root { --text-display: clamp(2.2rem, 8.5vw + 0.4rem, 3rem); }

  .section { padding-block: var(--space-2xl); }
  .hero { padding-block: calc(var(--nav-height) + var(--space-2xl)) var(--space-xl); }

  .hero__actions .btn { flex: 1 1 auto; }

  .svc__row { grid-template-columns: 3rem minmax(0, 1fr); gap: 0.25rem 1rem; padding-block: 1.4rem; }
  .svc__desc { grid-column: 2; }

  /* Orbit: tighter, smaller chips, room for chips outside the outer ring */
  .orbit { width: min(calc(100% - 4.5rem), 17.5rem); }
  .orbit__chip { font-size: var(--text-xs); padding: 0.32rem 0.7rem; }
  .orbit__label { font-size: var(--text-base); }

  /* Stacked principles collapse to single column */
  .principles--stack .principle { grid-template-columns: 1fr; }
  .principles--stack .principle__k { grid-row: auto; padding-top: 0; }
  .principles--stack .principle__t,
  .principles--stack .principle__d { grid-column: auto; }
  .case__step { grid-template-columns: 1fr; gap: 0.15rem; }
  .case__step .case__k { padding-top: 0; }

  .footer__bar { justify-content: flex-start; }
  .contact__link { min-height: 44px; }
  .nav__cta { min-height: 44px; }
}

/* ---- ≤ 30rem (~480px) --------------------------------------------------- */
@media (max-width: 30rem) {
  .statstrip { grid-template-columns: 1fr; }
  .statstrip__item { border-left: 0; padding-left: 0; margin-top: var(--space-md); }
  .statstrip__item:first-child { margin-top: 0; }
}