/* ==========================================================================
   responsive.css — breakpoints (desktop → laptop → tablet → mobile)
   Loaded after style.css so these rules win.
   ========================================================================== */

/* --------------------------------------------------------------
   Large laptop  ≤ 1200px
   -------------------------------------------------------------- */
@media (max-width: 1200px) {
  :root { --gutter: 20px; }

  .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; }
  .footer__col--contact { grid-column: 1 / -1; }
  .footer__contact { grid-template-columns: repeat(2, 1fr); display: grid; }
}

/* --------------------------------------------------------------
   Laptop / small desktop  ≤ 1024px
   -------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --nav-h: 74px; }

  .nav__menu { gap: 0; }
  .nav__link { padding: 10px 12px; font-size: .9rem; }
  .brand__logo { width: 54px; height: 54px; }

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

  .process__track { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
  .process__track::before { display: none; }

  .hero { min-height: 620px; }
  .hero__content { max-width: 100%; }
}

/* --------------------------------------------------------------
   Tablet  ≤ 900px  — mobile navigation kicks in
   -------------------------------------------------------------- */
@media (max-width: 900px) {
  body { font-size: 16px; }

  /* --- Off-canvas navigation --- */
  .nav__toggle { display: inline-flex; }

  .nav__menu {
    position: fixed; top: 0; right: 0; z-index: 890;
    width: min(330px, 86vw);
    height: 100vh; height: 100dvh;   /* dvh accounts for mobile browser chrome; vh is the pre-2023-Safari fallback */
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 4px;
    padding: 24px 22px 32px;
    background: #fff;
    box-shadow: -18px 0 46px rgba(11, 42, 91, .18);
    transform: translateX(100%);
    transition: transform .4s var(--ease-out);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav__menu.is-open { transform: translateX(0); }

  /* Logo + name + close button, acting as the panel's own header — the site's
     real header sits behind the panel (fully covered) once it's open, so this
     replaces it rather than sitting below empty reserved space for it. */
  .nav__menu-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 0 0 20px; margin-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  .nav__menu-brand img { width: 44px; height: 44px; object-fit: contain; flex: none; }
  .nav__menu-brand span { flex: 1; min-width: 0; }
  .nav__menu-brand strong {
    display: block; font-family: var(--font-head); font-weight: 700;
    font-size: 1rem; color: var(--navy-800);
  }
  .nav__menu-brand small {
    display: block; margin-top: 2px; font-size: .68rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--orange-500);
  }
  .nav__menu-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex: none; padding: 0;
    border: 1px solid var(--line); border-radius: 50%;
    background: #fff; color: var(--ink-soft); cursor: pointer;
    transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  }
  .nav__menu-close svg { width: 17px; height: 17px; }
  .nav__menu-close:hover { background: var(--blue-50); color: var(--blue-600); border-color: var(--blue-500); }

  .nav__menu .nav__link {
    display: flex; align-items: center; gap: 14px;
    padding: 15px 16px; font-size: 1.02rem; border-radius: var(--r-sm);
    border-bottom: 1px solid var(--line);
  }
  .nav__menu .nav__link::after { display: none; }
  .nav__menu .nav__link.is-active { background: var(--blue-50); color: var(--blue-600); }

  .nav__link-icon {
    display: inline-flex; width: 20px; height: 20px; flex: none;
    color: var(--blue-500); transition: color .25s var(--ease);
  }
  .nav__menu .nav__link.is-active .nav__link-icon { color: var(--blue-600); }

  .nav__menu .nav__panel-cta { margin-top: 18px; border: 0; }
  .nav__menu .btn { width: 100%; }

  .nav__actions .btn--nav-cta { display: none; }

  /* Header call shortcut — always reachable without opening the menu */
  .nav__quick-action { display: inline-flex; align-items: center; justify-content: center; }

  /* Call / Directions / socials block at the foot of the off-canvas menu */
  .nav__panel-contact {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 18px; padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .nav__panel-contact .socials { justify-content: center; margin-top: 4px; }

  /* Touch-target floor (44px) for compact buttons once we're on touch screens */
  .btn--sm { padding: 14px 22px; }

  /* iOS Safari auto-zooms into any focused field smaller than 16px — this
     keeps every form (enquiry modal, blog review form) at native size on
     iPhone without changing the desktop look. */
  .field input, .field select, .field textarea { font-size: 16px; }

  /* --- Layout --- */
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--reverse .split__media { order: 0; }
  .media-frame::before { display: none; }

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

  .topbar__list--left { display: none; }
  .topbar__inner { justify-content: center; }

  /* --- Timeline becomes single column --- */
  .timeline::before { left: 11px; }
  .tl-item,
  .tl-item:nth-child(even) {
    width: 100%; margin-left: 0; padding: 0 0 32px 40px;
    transform: translateY(34px);
  }
  .tl-item__dot,
  .tl-item:nth-child(even) .tl-item__dot { left: 2px; right: auto; top: 20px; }

  /* --- Footer --- */
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .footer__col--about { grid-column: 1 / -1; }
  .footer__col--contact { grid-column: 1 / -1; }
  .footer__contact { grid-template-columns: repeat(2, 1fr); }
  .footer__bottom { justify-content: center; text-align: center; }

  /* --- Hero --- */
  .hero__bg { background-attachment: scroll; }
  .hero__scroll { display: none; }
}

/* --------------------------------------------------------------
   Large mobile  ≤ 720px
   -------------------------------------------------------------- */
@media (max-width: 720px) {
  :root { --section-y: clamp(38px, 9vw, 54px); }

  .grid, .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; gap: 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .assurance { grid-template-columns: 1fr; }
  .process__track { grid-template-columns: 1fr; gap: 30px; }

  .section-head { margin-bottom: 34px; }

  .quote { padding: 30px 24px; }
  .quote::after { font-size: 6rem; right: 16px; }

  .review-band { flex-direction: column; align-items: flex-start; text-align: left; padding: 24px; }

  .cta { border-radius: var(--r-lg); }
  .cta__actions .btn { width: 100%; }

  /* Sticky call/WhatsApp bar on phones, hide the floating stack duplicates */
  .mobile-bar { display: block; }
  .float-stack { bottom: 84px; right: 16px; }
  .float-stack .fab--wa,
  .float-stack .fab--call { display: none; }

  .footer { padding-bottom: 78px; }
}

/* --------------------------------------------------------------
   Small mobile  ≤ 520px
   -------------------------------------------------------------- */
@media (max-width: 520px) {
  :root { --gutter: 16px; }

  h1 { font-size: clamp(1.85rem, 8vw, 2.3rem); }
  h2 { font-size: clamp(1.45rem, 6.2vw, 1.9rem); }

  .brand__name { font-size: .92rem; }
  .brand__tag { font-size: .6rem; letter-spacing: .14em; }
  .brand__logo { width: 48px; height: 48px; }

  .hero { min-height: 560px; }
  .hero__inner { padding-block: 72px 60px; }
  .hero__actions { gap: 10px; }
  .hero__actions .btn { width: 100%; }
  /* The pill shape only works on one line — once "Doorstep in 1 Hour" and the
     "All brands supported…" text can't both fit, stack them instead of letting
     each wrap awkwardly inside a shape that's still trying to be a capsule. */
  .hero__badge {
    display: flex; width: fit-content; margin-left: auto; margin-right: auto;
    flex-direction: column; align-items: center; gap: 6px;
    border-radius: var(--r-md); padding: 12px 16px;
    font-size: .78rem; text-align: center;
  }
  .hero__badge b { font-size: .72rem; }
  .hero__points { gap: 10px 18px; }
  .hero__points li { font-size: .86rem; }

  .stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat { padding: 20px 12px; }

  /* Wrapping 3 items across 2 flex columns leaves the 3rd stranded alone with a
     big gap beside it — a clean single-column stack reads better at this width
     and avoids that lopsided orphan, whatever the item count. */
  .stat-inline { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .stat-inline > div { min-width: 0; }
  #intro .btn--primary { display: flex; width: fit-content; margin: 0 auto; }

  .card { padding: 26px 22px; }
  .service-card__photo { margin: -26px -22px 18px; }
  .form-card { padding: 24px 20px; }
  .modal__panel { padding: 24px 20px; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__contact { grid-template-columns: 1fr; }
  .footer__legal { flex-direction: column; gap: 8px; }

  .map-embed iframe { height: 320px; }

  .slider__slide { padding: 0 4px; }
}

/* --------------------------------------------------------------
   Extra-small mobile ≤ 380px (iPhone SE / Mini, small Android)
   Header keeps logo + one-tap call + hamburger, so the wordmark
   steps aside rather than wrapping or squeezing the touch targets.
   -------------------------------------------------------------- */
@media (max-width: 380px) {
  .brand__text { display: none; }
  .brand__logo { width: 44px; height: 44px; }
  .nav { gap: 10px; }
  .nav__actions { gap: 8px; }

  .hero__badge { font-size: .72rem; }
  .assurance { padding: 20px; }
  .review-band { padding: 20px; }
}

/* --------------------------------------------------------------
   Short / landscape phones — the hero's portrait-tuned min-height
   would otherwise force scrolling past a hero taller than the
   screen itself.
   -------------------------------------------------------------- */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; }
  .hero__inner { padding-block: 100px 64px; }
  .hero__scroll { display: none; }
  .nav__menu { padding-top: 24px; }
}

/* --------------------------------------------------------------
   Print
   -------------------------------------------------------------- */
@media print {
  .header, .topbar, .float-stack, .mobile-bar, .preloader,
  .hero__scroll, .modal, .nav__backdrop { display: none !important; }

  body { color: #000; background: #fff; }
  .section { padding-block: 18px; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}