@media(max-width:850px){
  html{scroll-padding-top:72px}
  body{overflow-x:hidden}
  header{height:72px}
  .brand{min-width:0}
  .brand span{white-space:nowrap}
  .brand img{flex:0 0 auto}
  nav{top:72px;max-height:calc(100dvh - 72px);overflow:auto;gap:0;padding:10px 18px 24px}
  nav a{min-height:52px;display:flex;align-items:center;border-bottom:1px solid #ffffff19;padding:0 8px}
  .navcta{margin-top:10px;justify-content:center}
  .hero{display:block;min-height:0;padding-top:46svh;background-color:#061221;background-image:url('/assets/hero-detailing.webp');background-position:67% top;background-size:auto 46svh;background-repeat:no-repeat;position:relative}
  .hero:after{content:'';position:absolute;left:0;right:0;top:calc(46svh - 72px);height:74px;background:linear-gradient(transparent,#061221);pointer-events:none}
  .hero-body{width:auto;padding:26px 20px 54px;background:#061221;position:relative;z-index:1}
  .hero h1{font-size:clamp(2.9rem,13vw,4.4rem);line-height:.98;letter-spacing:-.055em}
  .hero .lead{font-size:1.06rem;line-height:1.55}
  .facts{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .facts span{scroll-snap-align:start;padding:15px 22px}
  .section,.dark,.quote{padding-top:64px;padding-bottom:64px}
  .section h2,.dark h2,.quote h2{font-size:clamp(2.25rem,11vw,3.5rem)}
  .cards{margin-top:34px}
  .cards article{padding:26px}
  .cards article:before{margin-bottom:28px}
  .dark{gap:36px}
  .demo{padding:28px 22px}
  .locations{gap:32px}
  .fleet{margin-top:42px}
  .fleet .btn{width:100%}
  .quote{gap:34px}
  form{border-radius:2px}
  input,select,textarea{font-size:16px;min-height:48px}
  .wa{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));padding:12px 16px}
  footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .page{padding-top:64px}
}
@media(max-width:380px){
  header{padding-left:12px;padding-right:12px}
  .brand{font-size:.9rem;gap:7px}
  .brand img{width:38px;height:38px}
  .brand small{font-size:.56rem;letter-spacing:.1em}
  .menu{padding:8px 9px}
  .hero{padding-top:41svh;background-size:auto 41svh}
  .hero:after{top:calc(41svh - 62px)}
  .hero-body{padding-left:16px;padding-right:16px}
  .hero h1{font-size:2.75rem}
  .section,.dark,.quote{padding-left:16px;padding-right:16px}
  .quote form{margin-left:-2px;margin-right:-2px}
  .wa{font-size:.78rem}
}