/* Mobile-only additions. Nothing here applies above 768px except .nav-toggle{display:none}, which hides a mobile-only element on desktop. */
.nav-toggle{display:none}

@media(max-width:768px){
html,body{overflow-x:hidden}
.wrap,section,header.site,footer.site{max-width:100%}

/* nav -> hamburger */
.nav-row{flex-wrap:wrap;gap:12px;position:relative}
.brand{flex-shrink:0}
.nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 10px;background:transparent;border:0;cursor:pointer;flex-shrink:0;order:3}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
header.site.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.site.nav-open .nav-toggle span:nth-child(2){opacity:0}
header.site.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
nav.main-nav{display:none}
header.site.nav-open nav.main-nav{display:flex;order:4;flex:0 0 100%;width:100%;flex-direction:column;align-items:stretch;gap:0;justify-content:flex-start;padding:8px 0 4px;border-top:1px solid var(--line);margin-top:14px}
header.site.nav-open nav.main-nav a{padding:15px 2px;font-size:17px;border-bottom:1px solid var(--line)}
header.site.nav-open nav.main-nav a::after{display:none}
.nav-cta{display:none}
header.site.nav-open .nav-cta{display:flex;order:5;flex:0 0 100%;width:100%;margin-top:16px}
header.site.nav-open .nav-cta .btn{width:100%}

/* stack every multi-column grid */
.grid-3,.grid-2,.value-list,.service-block,.service-block.reverse,.about-grid,.contact-grid,.form-row,.branch-grid,.footer-grid{grid-template-columns:1fr}
.footer-bottom{flex-direction:column;gap:8px}

.cta-band .wrap{flex-direction:column;align-items:flex-start}

/* let fixed-width blocks fit the screen */
.wrap>*,section>*{max-width:100%}
a.cat-card,.eq-card,.contact-card,.reach-list,.video-feature{width:auto!important;max-width:100%}
.hero-inner,.page-hero .hero-inner{padding-left:20px;padding-right:20px}
.hero h1,.page-hero h1,.hero-inner h1{width:auto!important;height:auto!important;max-width:100%}
.hero-actions{flex-direction:column;align-items:stretch}
.hero-actions .btn{width:100%}
.inv-filter-row{flex-direction:column;align-items:stretch}
.inv-filter-row input[type="text"],.inv-filter-row select{width:100%;min-width:0}
.img-col>img,.about-grid>img{height:auto;max-height:60vh}

/* absolutely-placed collage panels flow into the column */
#about-collage-1,#about-collage-2,#about-collage-3{position:relative!important;left:auto!important;top:auto!important;width:100%!important;margin-top:20px}

/* photo frames keep desktop proportions instead of locking desktop pixel height */
.eq-card image-slot{height:auto!important;aspect-ratio:256/196}
#about-collage-1{height:auto!important;aspect-ratio:268/265}
#about-collage-2,#about-collage-3{height:auto!important;aspect-ratio:268/189}
#repairs-img{height:auto!important;aspect-ratio:386/420}
#parts-img{height:auto!important;aspect-ratio:386/435}
#financing-img{height:auto!important;aspect-ratio:386/304}

/* inner-page hero headings flush left so they line up with the content below */
.page-hero .hero-inner,.page-hero .eyebrow,.page-hero h1{text-align:left}

/* brand logos: centred column, uniform scale, no cropping */
.brand-strip{flex-direction:column;justify-content:center;align-items:center;gap:22px}
.brand-strip img{width:184px!important;height:84px!important;max-width:184px;max-height:84px!important;object-fit:contain!important;object-position:center!important;aspect-ratio:auto!important;margin:0 auto}
.brand-strip img[src*="foton"]{height:102px!important;max-height:102px!important}
.brand-strip img[src*="shantui"]{height:126px!important;max-height:126px!important}

/* category cards: identical box on mobile (inline desktop aspect-ratios made them uneven) */
.cat-card{width:100%!important;max-width:100%!important;aspect-ratio:auto!important;height:255px!important}


/* every hero shows its whole image on mobile, letterboxed on the dark hero colour */
.hero,.page-hero,.hero-slide{background-size:contain!important;background-repeat:no-repeat!important;background-position:center center!important;background-color:#161311!important}

/* home hero: image sits in a band at the top, text starts below it */
.hero{align-items:flex-start!important;min-height:0!important;padding:0 0 36px!important}
.hero .hero-slide{background-position:center top!important}
.hero .hero-inner{padding-top:275px!important}
.hero h1{font-size:30px!important;line-height:1.12!important}
.hero-inner p{font-size:15px!important;margin-top:12px!important}
.hero-actions{margin-top:18px!important}
}