/* ─────────────────────────────────────────────
   RESPONSIVE  ·  mobile-first
───────────────────────────────────────────── */

@media (max-width: 767px) {
  .top-nav {
    flex-wrap: wrap;
    padding: 12px 16px;
    gap: 8px;
  }
  .top-nav__brand   { flex: none; width: 100%; }
  .top-nav__links   { flex: none; width: 100%; gap: 12px; }

  .hero {
    padding: 96px 16px 16px;
  }
  .hero__text {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -.04em;
  }

  .mockup-fixed {
    width: 92vw;
  }

  .caption-fixed {
    width: 100%;
    padding: 12px 16px;
  }

  .about {
    padding: 60px 16px;
    gap: 24px;
  }
  .about__heading {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -.04em;
  }
  .about__link {
    font-size: 18px;
    line-height: 24px;
  }

  .dark-section { padding: 60px 0; gap: 48px; }
  .dark-section__intro {
    padding: 0 16px;
    font-size: 24px;
    line-height: 32px;
  }
  .thumb-row { flex-direction: column; }
  .thumb { width: 100%; }
  .dark-section__body { padding: 0 16px; gap: 40px; }
  .dark-section__copy {
    font-size: 24px;
    line-height: 32px;
  }
  .dark-section__cta { font-size: 24px; line-height: 32px; }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 16px;
    gap: 8px;
  }
  .site-footer__links { gap: 12px; }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .hero__text {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -.04em;
  }
  .about__heading,
  .dark-section__intro,
  .dark-section__copy,
  .dark-section__cta {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -.04em;
  }
  .thumb-row { flex-direction: row; }
}

@media (min-width: 1280px) {
  .hero__text {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -.04em;
  }
  .thumb-row { flex-direction: row; }
}