/* Breakpoint: 900px is the single hard line — desktop chrome (Lenis, hover nav)
   above it, native mobile behaviour below it. */

@media (max-width: 900px) {
  section { padding-block: var(--sp-6); }

  .nav-links { display: none; }
  .lang-switch { display: none; }
  .nav-drawer .lang-switch { display: flex; }
  .nav-toggle { display: flex; }

  .hero-wordmark { font-size: clamp(3rem, 20vw, 6rem); }
  .hero-headline-parallax { bottom: var(--sp-6); width: min(760px, calc(100% - var(--sp-4) * 2)); }
  .hero-headline-ctas { flex-direction: column; align-items: stretch; }
  .hero-headline-ctas .btn { justify-content: center; }
  .hero-meta { display: none; }

  .why-grid { grid-template-columns: 1fr; gap: var(--sp-4); }

  .rfq-grid { grid-template-columns: 1fr; }
  .form-row-2 { grid-template-columns: 1fr; }

  .section-head h2 { font-size: 26px; }

  .footer-grid { flex-direction: column; }
}

@media (min-width: 901px) {
  .nav-drawer, .nav-scrim { display: none; }
}

/* source showcase: below this width there isn't room to show the big
   centre card and its four side cards on one line without shrinking
   them past readable — drop to a clean equal-width column instead. */
@media (max-width: 1000px) {
  .source-arc-wrap { padding-top: var(--sp-4); }
  .source-arc-lines { display: none; }
  .source-arc {
    flex-direction: column;
    align-items: stretch;
  }
  .source-card {
    flex: none;
    width: 100%;
    min-width: 0;
    margin-top: 0;
  }
  .source-arc.is-hover-active .source-card:not(.is-hover-target) .showcase-card {
    opacity: 1;
    filter: none;
    transform: none;
  }
  .glow-path--brass { display: none; }
  .glow-path--cyan { opacity: .2; }
}

/* how-it-works process circle: below this width there isn't room for the
   ring, its 5 node labels and their panels without collision — drop to
   a plain vertical list with descriptions always visible. Uses the
   same 900px hard line as the rest of the site. */
@media (max-width: 900px) {
  .process-wrap { display: block; padding-block: var(--sp-2) 0; }
  .process-circle { display: none; }
  .process-rfq-slot { display: none; }
  .process-list { display: flex; flex-direction: column; width: 100%; }
}