/* Shared phone layout and navigation */
.mobile-menu-toggle,.mobile-menu{display:none}
.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:90;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:9px 17px 9px 10px;border:2px solid #f5b400;background:#f5b400;color:#101010;font:900 12px/1 Arial,Helvetica,sans-serif;letter-spacing:.7px;box-shadow:0 13px 28px #0006;transition:transform .18s ease,box-shadow .18s ease}
.whatsapp-float:hover,.whatsapp-float:focus-visible{transform:translateY(-3px);box-shadow:0 17px 32px #0008}
.whatsapp-float:focus-visible{outline:3px solid #fff;outline-offset:3px}
.whatsapp-float-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#101010;color:#f5b400;font-size:10px;letter-spacing:0}

@media(max-width:760px){
  .whatsapp-float{right:14px;bottom:14px;min-height:48px;padding-right:14px;font-size:11px}
  html,body{overflow-x:hidden}
  .top,.topbar{min-height:40px!important;padding-left:4%!important;padding-right:4%!important;font-size:10px!important;white-space:nowrap}
  .top>span:last-child,.topbar>span:last-child{display:none!important}
  .nav,.site-nav{height:76px!important;min-height:76px!important;padding-left:4%!important;padding-right:4%!important;gap:9px!important;background:linear-gradient(90deg,#090909,#151515)!important}
  .navlinks,.nav-links{display:none!important}
  .logo,.brand{width:145px!important;max-width:43vw!important}
  .mobile-menu-toggle{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;margin-left:auto;border:1px solid #4a4a4a;background:#121212;color:#fff;font:900 0/1 Arial,Helvetica,sans-serif;cursor:pointer}
  .mobile-menu-toggle::before{content:'☰';font-size:23px;line-height:1}
  .mobile-menu-toggle[aria-expanded="true"]::before{content:'×';font-size:30px;font-weight:400}
  .quote,.quote-link{flex:0 0 auto;padding:12px!important;font-size:0!important;line-height:1!important}
  .quote::after,.quote-link::after{content:'QUOTE';font-size:11px;line-height:1;white-space:nowrap}
  .mobile-menu{position:fixed;top:116px;right:0;left:0;z-index:100;display:block;max-height:calc(100dvh - 116px);overflow:auto;background:#090909;border-top:1px solid #3d3d3d;border-bottom:3px solid #f5b400;box-shadow:0 22px 40px #000a}
  .mobile-menu[hidden]{display:none!important}
  .mobile-menu a,.mobile-menu summary{display:flex;align-items:center;min-height:52px;padding:14px 6%;border-bottom:1px solid #292929;color:#fff;font-size:14px;font-weight:900;letter-spacing:.2px}
  .mobile-menu a:hover,.mobile-menu a:focus-visible,.mobile-menu summary:hover,.mobile-menu summary:focus-visible{background:#171717;color:#f5b400}
  .mobile-menu summary{justify-content:space-between;cursor:pointer;list-style:none}
  .mobile-menu summary::-webkit-details-marker{display:none}
  .mobile-menu summary::after{content:'+';color:#f5b400;font-size:23px;font-weight:400}
  .mobile-menu details[open] summary::after{content:'−'}
  .mobile-menu .mobile-product-links{padding:4px 0 9px;background:#111}
  .mobile-menu .mobile-product-links a{min-height:45px;padding:11px 9% 11px 11%;color:#ddd;font-size:12px}
  .mobile-menu-contact{color:#f5b400!important}

  .hero{min-height:650px!important}
  .hero-copy{padding-right:7%!important;padding-left:7%!important}
  .hero h1{font-size:clamp(42px,12.5vw,50px)!important;letter-spacing:-2.5px!important}
  .hero p{font-size:16px!important}
  .buttons{width:100%}
  .button{min-height:48px;padding:15px 19px!important;text-align:center}
  .features{padding:18px 7%!important}
  .feature{padding:13px 12px!important}
  .products,.trailer,.why{padding:55px 7%!important}
  .products .head h2,.head h2{font-size:34px!important;line-height:1.05}
  .trailer{padding-top:55px!important;padding-bottom:55px!important}
  .trailer h2{font-size:36px!important;line-height:1!important}
  .trailer img{height:auto!important;aspect-ratio:4/3}
  .card-info{padding:65px 20px 18px!important}
  .cta{padding:25px 7%!important}

  .product-hero{min-height:600px!important}
  .product-hero:after{background:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.62) 65%,rgba(0,0,0,.18))!important}
  .product-hero>img.portrait-product-image{transform:scale(1.04)!important}
  .hero-content{padding:94px 7% 48px!important}
  .hero-content h1{font-size:clamp(40px,12vw,52px)!important;letter-spacing:-2px!important}
  .hero-content p{font-size:16px!important}
  .trust-strip{padding-right:7%!important;padding-left:7%!important}
  .quote-band{padding:26px 7%!important}

  .about-hero{min-height:450px!important}
  .about-hero .hero-copy{padding:76px 7% 64px!important}
  .about-hero .hero-copy h1{font-size:clamp(38px,11vw,46px)!important;letter-spacing:-2px!important}
  .about-hero .hero-copy>p:last-child{font-size:16px!important}
  .quality-grid article{padding:28px 24px!important}
  .statement{padding:55px 7%!important}

  .quote-main{padding:50px 5%!important}
  .quote-aside,.quote-form-wrap{padding:23px!important}
  .quote-product-row{grid-template-columns:1fr!important;gap:12px!important;padding:14px!important}
  .quote-product-quantity{grid-template-columns:auto 92px!important;justify-content:space-between}
  .quote-product-quantity input{width:92px}
  .quote-submit button{width:100%;min-height:50px}
  .footergrid,.footer-grid{grid-template-columns:1fr!important}
}

@media(max-width:360px){
  .logo,.brand{width:126px!important}
  .mobile-menu-toggle{flex-basis:39px;width:39px;height:39px}
  .quote,.quote-link{padding:10px!important}
  .quote::after,.quote-link::after{font-size:10px}
  .hero h1{font-size:41px!important}
}
