/* ==========================================================================
   responsive.css
   Breakpoint overrides. Mobile-first base styles live in style.css;
   this file narrows layouts down from desktop as the viewport shrinks.
   ========================================================================== */

/* ---- Large tablets / small laptops ---- */
@media (max-width: 1199.98px) {
  .why__grid,
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .trustbar__grid { grid-template-columns: repeat(2, 1fr); }
  .process__grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-8); }
  /* The connecting line assumes a 4-across row (left:12.5%/right:12.5%
     math only works for exactly 4 columns) — at 2 columns it renders as
     a short, misaligned stub, so it's removed rather than shown broken.
     Each step becomes a self-contained card instead, so the grouping is
     still clear without relying on a line. */
  .process__line-bg, .process__line-fill { display: none; }
  .process__step {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-5) var(--space-6);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  }
  .process__step:hover, .process__step:active {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-light);
  }
  /* Large faint step numeral watermark, contained safely within the card's
     own box (overflow:hidden above) — purely decorative, never able to
     bleed into neighbouring cards the way the old connecting line did. */
  .process__step::before {
    content: attr(data-step);
    position: absolute;
    top: -0.35em; right: var(--space-4);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--color-primary-50);
    z-index: -1;
  }
  .process__number {
    background: linear-gradient(135deg, var(--color-primary-50), var(--color-accent-50));
    border-color: var(--color-primary-light);
  }
  .process__number-index {
    display: inline-block;
    margin-top: 2px;
    padding: 0.2em 0.75em;
    border-radius: var(--radius-full);
    background: var(--color-primary-50);
    color: var(--color-primary);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
  }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Tablets ---- */
@media (max-width: 991.98px) {
  .nav-links, .header-actions .btn-outline-secondary { display: none; }
  .hamburger { display: flex; }

  .topbar__badges { display: none; }

  .hero { min-height: auto; padding-block: var(--space-12) var(--space-10); }
  .hero__visual { order: -1; max-width: 480px; margin-inline: auto; }

  .quote-panel { grid-template-columns: 1fr; }

  .about__grid { grid-template-columns: 1fr; }
  .about__stats { grid-template-columns: repeat(3, 1fr); }

  .checklist__grid { grid-template-columns: 1fr; }
  .checklist__layout { grid-template-columns: 1fr; }
  .checklist__side { position: static; order: -1; }
}

/* ---- Small tablets / large phones ---- */
@media (max-width: 767.98px) {
  .why__grid,
  .services__grid,
  .trustbar__grid { grid-template-columns: 1fr; }

  /* Stacked "How It Works" steps: no connecting line at all on narrow
     screens — a per-step connector never aligns cleanly against
     variable-length descriptions, so each step is a clean, self-contained
     card instead, with the step number still doing the job of showing
     progression (STEP 1 of 4, etc). */
  .process__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .process__step { padding: var(--space-7) var(--space-5) var(--space-6); }
  .process__step::before { font-size: 3.75rem; right: var(--space-3); }
  .process__number { width: 76px; height: 76px; }
  .process__number i { font-size: 1.15rem; }

  .footer__grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-8); }

  /* Final CTA's two-column layout (copy+buttons | stars+phone) has no
     room to breathe in one column, so it collapses to a single stacked
     column instead of squeezing both sides down to nothing. */
  .final-cta { grid-template-columns: 1fr; padding: var(--space-8) var(--space-5); text-align: center; }
  .final-cta__side { align-items: center; }
  .final-cta__actions { justify-content: center; }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }

  .quote-form__row { grid-template-columns: 1fr; }
}

/* ---- Phones ---- */
@media (max-width: 575.98px) {
  :root { --section-padding-y: 3rem; }

  .topbar { display: none; } /* reclaim space on very small screens */

  /* Keep all 3 stats on one row instead of 2+1 — a lone third stat
     stranded on its own row read as unfinished. Numbers shrink slightly
     to fit. */
  .about__stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .about__stat-num { font-size: 1.5rem; }
  .about__stat-label { font-size: 0.7rem; }
  .about__badge { position: static; margin-top: var(--space-4); }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: var(--space-3); text-align: center; }

  .floating-actions { right: var(--space-3); bottom: var(--space-3); }
  .floating-actions__btn { width: 48px; height: 48px; font-size: 1.05rem; }

  .quote-panel { padding: var(--space-5); }
}