/* ==========================================================================
   Header nav — 1024px and below
   Collapses to the hamburger before the desktop nav (5 links + phone + CTA)
   runs out of room, so it never wraps mid-word inside the header row.
   ========================================================================== */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .header-phone { display: none; }
  .nav-toggle { display: flex; }

  .mobile-nav {
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 95;
    padding: 96px 24px 32px;
    gap: 4px;
    overflow-y: auto;
    background: rgba(11, 13, 16, 0.98);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .mobile-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .mobile-nav a {
    color: var(--text-on-dark);
    font-size: 19px;
    font-weight: 600;
    padding: 16px 4px;
    border-bottom: 1px solid var(--color-border);
  }
  .mobile-nav .btn {
    margin-top: 24px;
  }
}

/* ==========================================================================
   Tablet — 1024px and below
   ========================================================================== */
@media (max-width: 1024px) {
  .section { padding: 96px 0; }

  .hero { padding: 140px 0 80px; }
  .hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .hero__content { max-width: none; }
  .hero__visual { order: -1; max-width: 460px; }

  .usp__rail { grid-template-columns: repeat(3, 1fr); }
  .usp__item:nth-child(3) { border-right: none; }
  .usp__item { border-bottom: 1px solid var(--color-border); }
  .usp__item:nth-child(4),
  .usp__item:nth-child(5),
  .usp__item:nth-child(6) { border-bottom: none; }

  .story__grid { grid-template-columns: 1fr; gap: 44px; }
  .story__media img,
  .story__media .img-placeholder { aspect-ratio: 16/10; }

  .benefits__grid { grid-template-columns: 1fr; }
  .benefits__feature { min-height: 360px; }
  .benefits { background: linear-gradient(180deg, var(--surface-dark) 0%, var(--surface-dark) 38%, var(--surface-light) 38%, var(--surface-light) 100%); }

  .who__grid { grid-template-columns: 1fr; gap: 40px; }
  .who__media { max-width: 420px; }
  .who__values { grid-template-columns: repeat(3, 1fr); }

  .services__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 260px; }
  .service-card--featured { grid-column: span 2; grid-row: span 1; min-height: 320px; }
  .service-card--photo,
  .service-card--icon { grid-column: span 1; }

  .section-head--row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .review-card { flex-basis: calc(50% - 12px); }

  .faq__grid { grid-template-columns: 1fr; gap: 30px; }
  .faq__intro { position: static; }

  .final-cta { padding: 110px 0; min-height: 420px; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ==========================================================================
   Mobile — 640px and below
   ========================================================================== */
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .section { padding: 72px 0; }
  .section--tight { padding: 56px 0; }

  .site-header { height: 72px; }
  .site-header.is-scrolled { height: 64px; }
  .header-actions .btn-primary span { display: none; }
  .header-actions .btn-primary { width: 48px; height: 48px; padding: 0; border-radius: 12px; }
  .header-actions .btn-primary .icon { margin: 0; }

  .hero { padding: 110px 0 96px; }
  .hero__title { font-size: clamp(36px, 9.5vw, 48px); }
  .hero__desc { font-size: 17px; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .hero__trust { gap: 16px 22px; }
  .hero__visual img,
  .hero__visual .img-placeholder { aspect-ratio: 4/5; }

  .usp__rail { grid-template-columns: repeat(2, 1fr); }
  .usp__item:nth-child(2n) { border-right: none; }
  .usp__item { padding: 26px 18px; }

  .section-heading { font-size: clamp(29px, 7.5vw, 38px); }

  .story__metrics { gap: 30px; flex-wrap: wrap; }

  .benefits__feature-content { padding: 26px; }
  .benefit-row { padding: 20px; }

  .who__values { grid-template-columns: 1fr 1fr; }
  .who__quote { font-size: 17px; }

  .services__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .service-card { min-height: 220px; grid-column: span 1 !important; grid-row: span 1 !important; }
  .service-card--featured { min-height: 280px; }

  .reviews-slider { margin-top: 36px; }
  .reviews-track { gap: 16px; }
  .review-card { flex-basis: 86%; padding: 24px; }

  .final-cta { padding: 90px 0; min-height: 380px; }
  .final-cta__actions { flex-direction: column; }
  .final-cta__actions .btn { width: 100%; }

  .footer__grid { grid-template-columns: 1fr; gap: 34px; padding-bottom: 40px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Sticky bottom conversion bar */
  .mobile-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    background: rgba(11,13,16,0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-border);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
  }
  .mobile-bar .btn { flex: 1; height: 50px; font-size: 15px; }
  body { padding-bottom: 74px; }
}

@media (min-width: 641px) {
  .mobile-bar { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}