/* ==========================================================================
   Busy Beavers Moving and Cleaning Ltd — Responsive Stylesheet
   All media queries, mobile-first adjustments from 320px upwards.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large tablets and small desktops
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .main-nav ul { gap: 20px; }

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

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

  .step::after { display: none; }

  .hero__inner {
    gap: 36px;
    padding: 64px 0 110px;
  }
}

/* --------------------------------------------------------------------------
   Tablets
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .main-nav { display: none; }

  .menu-toggle { display: inline-flex; }

  .mobile-menu { display: block; visibility: hidden; pointer-events: none; }

  .mobile-menu.is-open {
    visibility: visible;
    pointer-events: auto;
  }

  .header-actions .btn--primary { display: none; }

  .hero__inner {
    grid-template-columns: 1fr;
    padding: 52px 0 104px;
  }

  .hero__media { max-width: 560px; }

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

  .split {
    grid-template-columns: 1fr;
    gap: 34px;
  }

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

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

  .service-detail__cols { grid-template-columns: 1fr; }

  .area-band {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    padding: 34px 26px;
  }
}

/* --------------------------------------------------------------------------
   Large phones
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
  .section { padding: 54px 0; }

  .grid--3,
  .grid--2,
  .grid--4 { grid-template-columns: 1fr; }

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

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

  .topbar__inner {
    justify-content: center;
  }

  .topbar__location { display: none; }

  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); }

  .hero__badge {
    left: 12px;
    bottom: 14px;
    padding: 10px 14px;
    font-size: 0.8rem;
  }

  .quote-form { padding: 26px 20px; }

  .service-detail { padding: 26px 20px; }

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

  .hero__actions .btn { width: 100%; }

  /* Show the mobile action bar and keep content clear of it */
  .mobile-bar { display: block; }

  body { padding-bottom: 62px; }

  .site-footer { padding-bottom: 8px; }
}

/* --------------------------------------------------------------------------
   Small phones (down to 320px)
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .container { padding: 0 14px; }

  .wordmark__name { font-size: 1.08rem; }

  .wordmark__badge { width: 40px; height: 40px; }

  .topbar__group {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
  }

  .topbar { font-size: 0.78rem; }

  .btn { padding: 13px 20px; font-size: 0.94rem; }

  .card { padding: 24px 18px; }

  .audience { padding: 28px 20px; }
}