/* =====================================================================
   Lifting Legend — Responsive overrides
   Mobile-first lite — main rules cascade down by breakpoint.
   ===================================================================== */

@media (max-width: 1024px) {
  .hero-inner       { grid-template-columns: 1fr; gap: 40px; }
  .hero-card        { max-width: 540px; margin: 0 auto; width: 100%; }
  .intro-grid       { grid-template-columns: 1fr; gap: 36px; }
  .about-grid       { grid-template-columns: 1fr; }
  .rating-badge     { position: static; margin-top: 16px; display: inline-flex; }
  .footer-grid      { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-col-brand { grid-column: 1 / -1; max-width: 100%; }
  .benefits-grid    { grid-template-columns: repeat(2, 1fr); }
  .review-grid      { grid-template-columns: repeat(2, 1fr); }
  .process-grid     { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
  .areas-grid       { grid-template-columns: repeat(2, 1fr); }
  .grid-4           { grid-template-columns: repeat(2, 1fr); }
  .grid-3           { grid-template-columns: repeat(2, 1fr); }
  .values-grid      { grid-template-columns: repeat(2, 1fr); }
  .stats-grid       { grid-template-columns: repeat(4, 1fr); }
  .about-numbers    { grid-template-columns: repeat(2, 1fr); }
  .quote-grid       { grid-template-columns: 1fr; }
  .quote-side       { position: static; }
  .contact-grid     { grid-template-columns: 1fr; }
  .contact-channels { position: static; grid-template-columns: repeat(2, 1fr); }
  .area-contact-grid{ grid-template-columns: 1fr; gap: 32px; }
  .service-detail   { grid-template-columns: 80px 1fr; gap: 24px; }
}

@media (max-width: 768px) {
  body { font-size: 16px; }
  .section { padding: 64px 0; }
  .container { padding: 0 18px; }

  /* Header — drop backdrop-filter on mobile because it creates a
     containing block for fixed descendants (Safari/Chrome quirk),
     which would otherwise clip the slide-out menu inside the header. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #ffffff;
  }
  .site-header.scrolled { background: #ffffff; }
  .header-inner { height: 64px; gap: 12px; }
  .brand-tag    { display: none; }
  .brand-mark   { width: 38px; height: 38px; }
  .brand-name   { font-size: 1rem; }
  .nav-toggle   { display: flex; }

  .primary-nav {
    display: flex;
    position: fixed;
    top: 64px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px); /* dvh = dynamic viewport height (mobile) */
    max-height: -webkit-fill-available;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 20px 22px 32px;
    gap: 4px;
    transform: translateX(100%);
    transition: transform var(--t-slow);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 95;
    box-shadow: 0 12px 32px rgba(10,37,64,.16);
  }
  .primary-nav.open { transform: translateX(0); }
  .primary-nav .nav-link {
    padding: 16px 4px;
    border-bottom: 1px solid var(--gray-100);
    font-size: 1.05rem;
    color: var(--text);
  }
  .primary-nav .nav-link.active { color: var(--accent); }
  .primary-nav .nav-link.active::after { display: none; }
  .primary-nav .nav-cta,
  .primary-nav .nav-cta-phone {
    margin-top: 10px;
    justify-content: center;
    padding: 14px;
    font-size: 15px;
    border: 0;
  }
  .primary-nav .nav-cta-phone { background: var(--gray-50); }
  /* Lock body scroll when the menu is open */
  body.nav-open { overflow: hidden; touch-action: none; }

  /* Hero */
  .hero { padding: 56px 0 48px; }
  .hero-card { padding: 22px; }
  .hero-card-head h2 { font-size: 1.15rem; }
  .hero-form .field-row { grid-template-columns: 1fr; }
  .hero-trust { gap: 12px; }

  /* Sections */
  .section-head { margin-bottom: 40px; }
  .stats        { padding: 36px 0; }
  .stats-grid   { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .benefits-grid, .review-grid, .process-grid, .areas-grid,
  .grid-4, .grid-3, .grid-2, .values-grid { grid-template-columns: 1fr; }
  .about-numbers { grid-template-columns: repeat(2, 1fr); padding: 28px; }

  .process-step .step-num { font-size: 4.5rem; top: -16px; }

  /* Service detail */
  .service-detail { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
  .service-detail-icon { width: 64px; height: 64px; }
  .service-detail-icon svg { width: 30px; height: 30px; }

  /* Forms */
  .form-row     { grid-template-columns: 1fr; gap: 0; }
  .form-card    { padding: 24px; }
  .form-title   { font-size: 1.25rem; }

  /* Pricing */
  .price-card-feature { transform: none; }

  /* Contact */
  .contact-channels { grid-template-columns: 1fr; }
  .contact-channel { padding: 18px; }
  .contact-channel p { font-size: 1.05rem; }

  /* CTA & footer */
  .cta-band { padding: 48px 0; }
  .cta-band p { font-size: 1rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-col-brand { max-width: 100%; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }

  /* Page header */
  .page-header { padding: 60px 0 48px; }

  /* Thank you */
  .thanks-hero { padding: 64px 0; }
  .thanks-card { padding: 24px; }
  .error-code { font-size: 6rem; }
}

@media (max-width: 480px) {
  .container       { padding: 0 16px; }
  .hero-actions    { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .cta-band-actions { flex-direction: column; width: 100%; }
  .cta-band-actions .btn { width: 100%; }
  .thanks-actions  { flex-direction: column; }
  .thanks-actions .btn { width: 100%; }
  .btn-lg          { padding: 14px 22px; font-size: 15px; }
  .hero-card-head h2 { font-size: 1.1rem; }
  .stats-grid      { grid-template-columns: 1fr 1fr; }
  .about-numbers   { grid-template-columns: 1fr; }
  .stat-item .stat-num { font-size: 1.9rem; }
}

/* Show the sticky mobile CTA bar on phones, and lift content so it
   doesn't sit under the bar. */
@media (max-width: 768px) {
  .mobile-cta-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  body { padding-bottom: 84px; }   /* reserve space for the bar */
  body.nav-open .mobile-cta-bar { display: none; }
  /* Lift the WhatsApp FAB above the sticky bar on mobile */
  .whatsapp-fab {
    bottom: calc(94px + env(safe-area-inset-bottom));
    right: 16px;
    width: 54px; height: 54px;
  }
  .whatsapp-fab svg { width: 26px; height: 26px; }
}

/* Disable hover transforms on touch devices */
@media (hover: none) {
  .card:hover,
  .service-card:hover,
  .btn:hover,
  .social-link:hover { transform: none; }
  .whatsapp-fab::before { animation: none; }
}