@media (max-width: 767px) {
  :root { --mobile-gutter: 18px; }

  html, body { width:100%; max-width:100%; overflow-x:hidden; }

  .wrap, .bft-contact__container, .bft-cta__container {
    width: calc(100% - 36px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  header, .site-header { height:58px !important; }
  .nav {
    height:58px !important;
    width:calc(100% - 36px) !important;
    margin-inline:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
  }
  .nav nav, .topcta, .header-cta { display:none !important; }
  .menu, .mobile-menu-toggle {
    display:block !important;
    margin-left:auto !important;
    background:none !important;
    border:0 !important;
    color:#fff !important;
    font-size:27px !important;
  }

  .hero { padding-top:58px !important; min-height:0 !important; }
  .hero-bg {
    height:315px !important;
    background-image:url("assets/hero-truck-bg-v2.jpg") !important;
    background-image:-webkit-image-set(url("assets/hero-truck-bg-v2.webp") type("image/webp") 1x,url("assets/hero-truck-bg-v2.jpg") type("image/jpeg") 1x) !important;
    background-image:image-set(url("assets/hero-truck-bg-v2.webp") type("image/webp") 1x,url("assets/hero-truck-bg-v2.jpg") type("image/jpeg") 1x) !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-position:68% center !important;
    opacity:1 !important;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 74%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 74%,transparent 100%);
  }
  .hero-grid {
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    padding-top:0 !important;
  }
  .hero-grid > div:first-child { padding-top:248px !important; position:relative !important; z-index:2 !important; }
  .hero h1 { font-size:40px !important; line-height:.9 !important; margin-bottom:14px !important; }
  .hero .lead { font-size:13px !important; line-height:1.42 !important; max-width:none !important; }
  .actions { display:grid !important; grid-template-columns:1fr !important; gap:9px !important; max-width:none !important; }
  .actions .btn { width:100% !important; min-height:43px !important; }

  .benefits, .hero-benefits {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:13px !important;
    padding:20px 0 26px !important;
  }

  .two, .website-grid {
    display:flex !important;
    flex-direction:column !important;
    gap:22px !important;
  }
  .two > :nth-child(1), .website-grid > :nth-child(1) { order:2 !important; }
  .two > :nth-child(2), .website-grid > :nth-child(2) { order:1 !important; }
  .mock img, .device-art img {
    width:92% !important;
    max-width:360px !important;
    height:auto !important;
    object-fit:contain !important;
  }

  .cards { grid-template-columns:1fr !important; gap:12px !important; }

  .examplegrid {
    display:flex !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory !important;
    gap:14px !important;
    scrollbar-width:none !important;
  }
  .examplegrid::-webkit-scrollbar { display:none !important; }
  .examplegrid article {
    flex:0 0 88% !important;
    min-width:88% !important;
    scroll-snap-align:center !important;
  }
  .shot { height:150px !important; }

  .bft-contact__container {
    min-height:0 !important;
    padding-block:30px 48px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:22px !important;
  }
  .bft-contact__title { font-size:37px !important; line-height:.9 !important; }
  .bft-contact__copy { font-size:13px !important; line-height:1.42 !important; }
  .bft-contact__methods {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
  }
  .bft-contact__icon {
    width:42px !important;
    height:42px !important;
    flex-basis:42px !important;
  }
  .bft-contact__row--two { grid-template-columns:1fr !important; gap:0 !important; }
  .bft-contact__form { padding:15px !important; }
  .bft-contact__form input, .bft-contact__form select { height:38px !important; font-size:12px !important; }
  .bft-contact__form textarea { height:68px !important; font-size:12px !important; }
  .bft-contact__form button { height:42px !important; font-size:16px !important; }

  .bft-contact__nationwide { height:125px !important; }
  .bft-contact__nationwide-img {
    inset:auto !important;
    top:0 !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    width:230px !important;
    height:auto !important;
  }

  /* header is now 58px on mobile (see rule above) — keep the hamburger dropdown flush under it */
  .mobilenav { top:58px !important; }

  .cta { padding:26px 0 !important; }
  .ctain, .bft-cta__container {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
    text-align:center !important;
    justify-items:center !important;
    padding:0 !important;
  }
  .ctain > b { display:none !important; }
  .ctain p { display:none !important; }
  .ctain h2 { font-size:26px !important; line-height:1.1 !important; margin:0 !important; }
  .ctain .btn, .bft-cta__button { width:100% !important; }

  .footgrid, .footer-grid {
    display:grid !important;
    grid-template-columns:24fr 28fr 48fr !important;
    gap:22px 6px !important;
  }
  .footgrid > div:first-child, .footer-grid > div:first-child {
    grid-column:1 / -1 !important;
  }
  .footgrid h4 { font-size:11px !important; }
  .footgrid p, .footgrid a { font-size:10px !important; }
  .copy, .copyright {
    display:flex !important;
    flex-direction:row !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:8px !important;
    text-align:left !important;
    flex-wrap:wrap !important;
  }
}