/* ============================================================
   L Brother — Responsive overrides
   Loaded last so these win over the component stylesheets.
   Breakpoints: 1080 (tablet / nav collapse), 860 (stack), 560 (phone).
   ============================================================ */

/* ------------------------------------------------------------
   1080px — collapse the nav, halve the process grid
   ------------------------------------------------------------ */

@media (max-width: 1080px) {
  .nav-links {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .burger {
    display: flex;
  }

  .steps {
    grid-template-columns: 1fr 1fr;
    gap: 32px 20px;
  }

  /* The connector rail only reads as a row on desktop */
  .step .dot-line {
    display: none;
  }
}

/* ------------------------------------------------------------
   860px — stack every two-column section
   ------------------------------------------------------------ */

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .constellation {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }

  .form-wrap {
    grid-template-columns: 1fr;
  }

  .form-deco {
    display: none;
  }

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

  /* Decorative only — dropped rather than shrunk */
  .dir-map {
    display: none;
  }

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

  .about-art {
    max-width: 380px;
  }

  .faq-wrap {
    grid-template-columns: 1fr;
  }

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

  .cta-band {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ------------------------------------------------------------
   560px — phone
   ------------------------------------------------------------ */

@media (max-width: 560px) {
  .field-row {
    grid-template-columns: 1fr;
  }

  .seg {
    flex-direction: column;
  }

  .trust {
    justify-content: flex-start;
    gap: 20px 28px;
  }

  .logo-frame .logo-word {
    font-size: 17px;
  }

  .lang button {
    padding: 7px 10px;
  }
}