/* ===== Responsive Design ===== */

/* Tablet / Medium Screens (980px and below) */
@media (max-width: 980px) {
  .hero .wrap,
  .intro-grid,
  .quote-layout,
  .cta,
  footer .wrap {
    grid-template-columns: 1fr;
  }

  .quote-aside {
    position: relative;
    top: auto;
  }

  .menu {
    display: none;
  }

  body.nav-open .menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 18px 24px;
    gap: 14px;
    align-items: stretch;
  }

  body.nav-open .selectors {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .selectors {
    display: none;
  }

  .selectors.in-mobile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 14px;
  }

  .selectors.in-mobile .dd-panel {
    position: static;
    box-shadow: none;
    border: none;
    padding: 4px 0;
    max-height: 200px;
  }

  .dd-panel {
    position: static;
    box-shadow: none;
    border: 1px solid var(--line);
    max-height: 200px;
    margin-top: 6px;
  }

  .menu-toggle {
    display: block;
  }

  .hero .wrap {
    padding-top: 56px;
  }

  .trust-row,
  .cards,
  .process,
  .faq {
    grid-template-columns: 1fr;
  }

  .types {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero:after {
    bottom: -260px;
  }

  .mini-panel {
    max-width: 620px;
  }

  .topbar .wrap {
    display: block;
  }

  .topbar span:last-child {
    display: none;
  }

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

  .wrap.footer-legal {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Mobile / Small Screens (640px and below) */
@media (max-width: 640px) {
  .wrap {
    padding: 0 18px;
  }

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

  .hero .wrap {
    padding-bottom: 110px;
  }

  .brand {
    font-size: 18px;
  }

  .mini-panel,
  .form-card,
  .quote-aside,
  .cta {
    border-radius: 22px;
    padding: 22px;
  }

  h1 {
    font-size: 43px;
  }

  .section {
    padding: 62px 0;
  }

  .hero-actions .btn,
  .form-actions .btn {
    width: 100%;
  }
}