/* ── Responsive · maxtimmerman.xyz ───────────────────────────── */

/* ── Tablet ≤ 980px ──────────────────────────────────────────── */
@media (max-width: 980px) {
  :root {
    --container-px: 28px;
  }

  .hero__profile { gap: 40px; }
  .hero__squircle { width: clamp(120px, 20vw, 180px); }

  .nav-cards__item { padding: 36px 32px; }

  .footer__grid {
    grid-template-columns: auto 1fr auto;
    gap: 32px 24px;
  }

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

/* ── Mobile nav ≤ 820px ──────────────────────────────────────── */
@media (max-width: 820px) {
  :root { --nav-px: 18px; }

  .nav__desktop   { display: none; }
  .nav__hamburger { display: inline-flex; margin-left: auto; }
}

/* ── Phone ≤ 720px ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .hero__display { font-size: clamp(38px, 9vw, 60px); }

  .footer__grid {
    grid-template-columns: auto 1fr auto;
    gap: 24px 16px;
  }

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

  .footer__grid > div:nth-child(3) {
    justify-self: center;
    width: fit-content;
  }

  .footer__col-list {
    word-break: break-word;
  }

  .footer__bottom {
    gap: 8px;
  }

  .services__item-num { color: var(--accent); }
}

/* ── Small phone ≤ 540px ─────────────────────────────────────── */
@media (max-width: 540px) {
  :root { --container-px: 18px; }

  .container--hero { padding-top: 64px; padding-bottom: 72px; }

  .hero__display { font-size: clamp(32px, 11vw, 48px); }

  .hero__story { font-size: 17px; }

  .hero__profile { gap: 24px; }
  .hero__squircle { width: clamp(80px, 22vw, 120px); }


  .nav-cards__card { flex-direction: column; }
  .nav-cards__divider { width: auto; height: 1px; }
  .nav-cards__item { padding: 32px 28px; }
  .nav-cards__link { font-size: clamp(26px, 7vw, 36px); }

  .cta-section__btns { flex-direction: column; }
  .cta-section__btns .btn { width: 100%; justify-content: center; }
}

/* ── Tiny phone ≤ 480px ──────────────────────────────────────── */
@media (max-width: 480px) {
  .hero__cta-group .btn--lg {
    width: 100%;
    justify-content: center;
  }
}