/* ==========================================================
   responsive.css — tablet & mobile adjustments
   ========================================================== */

/* ----- Tablet ----- */
@media (min-width: 768px) and (max-width: 1023px) {
  .global-nav__list {
    gap: 18px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ----- Mobile ----- */
@media (max-width: 767px) {
  :root {
    --fs-hero: clamp(2.25rem, 10.2vw, 2.6rem);
  }

  .site-header__logo img {
    height: 26px;
  }

  /* Global nav becomes overlay */
  .nav-toggle {
    display: block;
  }

  /* A filtered header becomes the containing block for fixed descendants.
     Disable it only while the full-screen menu is open. */
  .site-header:has(.global-nav.is-open) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .global-nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-nav-overlay);
    background-color: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: grid;
    place-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base),
      visibility var(--transition-base);
  }

  .global-nav.is-open {
    opacity: 1;
    visibility: visible;
  }

  .global-nav__list {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .global-nav__link {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 600;
    padding: 12px 16px;
  }

  .global-nav__cta {
    margin-top: 20px;
  }

  .site-header a.site-header__cta {
    display: inline-flex;
    min-height: 44px;
    padding: 0.4em 1.2em;
    font-size: 0.875rem;
  }

  /* Grids collapse to one column */
  .check-list,
  .price-grid {
    grid-template-columns: 1fr;
  }

  /* Service rows stack; arrow moves to the corner */
  .service-row__link {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding-inline: 0.25rem;
  }

  .service-row__link:hover {
    padding-left: 0.25rem;
  }

  .service-row__arrow {
    position: absolute;
    top: clamp(1.75rem, 3.5vw, 2.75rem);
    right: 0.5rem;
  }

  .service-row__num {
    font-size: 1.25rem;
  }

  .step {
    grid-template-columns: 56px 1fr;
  }

  .step__marker {
    width: 56px;
    height: 56px;
  }

  .step__marker strong {
    font-size: 1.0625rem;
  }

  .step:not(:last-child)::before {
    left: 27px;
    top: 68px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-band__actions .btn {
    width: 100%;
  }
}