/* V28 – responsive refinements, loaded after existing CSS. No database changes. */
html{scroll-padding-top:76px}
body{overflow-x:clip}
img,svg,video{max-width:100%}
.shell{max-width:1320px}
/* Reviews: one line on mobile with fluid typography and no overflow. */
.testimonials .testimonials-title{max-width:none!important;letter-spacing:-.025em}
@media(max-width:760px){
 .shell{width:calc(100% - 32px)!important}
 .testimonials .testimonials-title{
   display:block;width:100%;max-width:100%!important;
   white-space:nowrap!important;word-break:normal!important;
   overflow-wrap:normal!important;hyphens:none!important;
   font-size:clamp(11px,3.05vw,19px)!important;
   line-height:1.4!important;letter-spacing:-.035em!important;
   margin:0 auto 19px!important;text-align:center!important;
 }
 .testimonials .kicker{font-size:11px;letter-spacing:.06em}
 /* Photo first. Headline and CTA remain; extra copy hidden only on phones. */
 .hero{height:min(670px,calc(100svh - 66px));min-height:470px}
 .hero-overlay{align-items:flex-end!important;padding-bottom:67px!important}
 .hero-copy{max-width:100%!important;width:100%;padding:0!important}
 .hero-copy>.kicker{font-size:10px!important;margin:0 0 10px!important;letter-spacing:.09em}
 .hero h1{font-size:clamp(26px,7.4vw,39px)!important;line-height:1.09!important;letter-spacing:-.035em!important;margin:0 0 13px!important}
 .hero .tagline{font-size:12px!important;letter-spacing:.08em!important;margin:0 0 18px!important}
 .hero .lead{display:none!important}
 .hero .btnrow{display:flex;gap:8px;flex-wrap:wrap}
 .hero .btnrow .btn{min-height:42px;max-width:100%;padding:10px 12px!important;font-size:10px!important;line-height:1.3}
 .slide{background-position:56% center!important}
 .hero::before{background:linear-gradient(0deg,rgba(2,13,29,.89) 0%,rgba(2,13,29,.35) 52%,rgba(2,13,29,.08) 90%)!important}
 .section-title{font-size:clamp(21px,5.7vw,28px)!important;line-height:1.19}
 .about h2,.business h2,.care h2{font-size:clamp(23px,6.2vw,30px)!important;line-height:1.13}
 .contact-overlay-content h2{font-size:clamp(24px,6.1vw,32px)!important;line-height:1.13}
 .vehicle-grid,.models-grid,.review-grid{grid-template-columns:minmax(0,1fr)!important}
 .vehicle-card,.reason,.review-card,.contact-form-card{min-width:0}
 .footer-grid{gap:25px}
 .footer-bottom-v22 .footer-bottom-inner{grid-template-columns:minmax(0,1fr)!important}
 .footer-center-stack{grid-column:1!important;min-width:0}
 .floating-whatsapp{right:17px}
}
@media(max-width:390px){
 .hero h1{font-size:clamp(24px,7vw,30px)!important}
 .hero .btnrow .btn{font-size:9px!important;padding:9px 10px!important}
 .testimonials .testimonials-title{font-size:clamp(10px,3vw,12px)!important}
 .brand{gap:6px;min-width:0}
 .brand strong{font-size:14px!important}
 .brand small{font-size:7px!important}
 .menu-toggle{padding:7px 9px!important}
}
@media(max-width:340px){
 .hero .btnrow{flex-direction:column;align-items:flex-start}
 .hero .btnrow .btn{width:auto}
 .testimonials .testimonials-title{font-size:9.5px!important}
 .hero h1{font-size:23px!important}
}
@media(min-width:761px) and (max-width:1100px){
 .shell{width:calc(100% - 48px)}
 .headrow{gap:16px}
 .headrow nav{gap:12px}
 .about{gap:30px}
 .value-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .vehicle-grid,.models-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .contact-grid{gap:24px}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:950px){
 .hero{min-height:370px;height:calc(100vh - 66px)}
 .hero-overlay{padding-bottom:42px!important}
 .hero h1{font-size:clamp(23px,4vw,31px)!important}
 .hero .tagline{margin-bottom:12px!important}
 .slide-controls{bottom:8px}
}
@media(prefers-reduced-motion:reduce){.review-track,.slide{transition:none!important}}