/* Consistent icons and content widths across desktop and touch screens. */
.ui-icon{display:inline-block;width:20px;height:20px;flex:0 0 20px;vertical-align:middle;pointer-events:none}
.text-link,.location-bar a,.footer-top>a:last-child{display:inline-flex;align-items:center;gap:10px}
.text-link>span,.phone-link>span,.button>span:not(.drive-label):not(.drive-stage){display:inline-flex;align-items:center;flex-shrink:0}
.drive-arrow .ui-icon{display:block}.drive-label{min-width:0;white-space:normal;text-align:left}
.button{max-width:100%}.button .drive-label{overflow-wrap:break-word}
.hero{grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr)}
.hero-line{display:block}.hero-copy,.hero-visual,.gallery-viewport,.photo-slide{min-width:0;max-width:100%}
.hero>*,.section-heading>*,.services-grid>*,.electric-grid>*,.booking-grid>*,.faq-layout>*,.form-grid>*,.steps>*{min-width:0}
.photo-slide{flex:0 0 100%}.photo-slide img{min-width:0;max-width:100%}
.gallery-controls>button{flex-shrink:0}.gallery-dots{min-width:0}
.form-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
input,textarea,select{max-width:100%}
.footer-bottom{justify-content:center;align-items:center;text-align:center;flex-wrap:wrap;column-gap:28px;row-gap:8px}
/* Draw FAQ indicators instead of asking an emoji font to render symbols. */
summary:before,summary:after{content:"";position:absolute;right:5px;top:30px;width:13px;height:1.5px;background:currentColor}
summary:after{transform:rotate(90deg);transition:transform .2s}details[open] summary:after{content:"";transform:rotate(0)}
@media(max-width:950px){
  .hero h1{font-size:clamp(42px,6.5vw,60px);letter-spacing:-.04em;line-height:1.04}
  .header nav{max-height:calc(100dvh - 145px);overflow-y:auto}
}
@media(max-width:760px){
  .hero{grid-template-columns:minmax(0,1fr);gap:30px;padding-block:36px 40px;align-items:start}
  .hero-copy{width:100%;text-align:left}
  .hero h1{font-size:clamp(44px,12vw,74px);line-height:1.04;letter-spacing:-.04em;margin:0 0 24px}
  .hero-copy .intro{max-width:36em;font-size:17px;line-height:1.6;margin-bottom:24px}
  .hero-visual.photo-gallery{width:100%;aspect-ratio:1 / 1.05}
  .services-grid,.section-heading,.electric-grid,.booking-grid,.faq-layout{grid-template-columns:minmax(0,1fr)}
  .section-heading{gap:22px}.electric-grid,.booking-grid{gap:30px}.faq-layout{gap:24px}
  .section-heading p:last-child{max-width:none}
  .electric-section h2{font-size:clamp(43px,10.5vw,60px)}
  .mobile-service{display:block}.mobile-service .button{margin-top:22px}
  .steps{grid-template-columns:minmax(0,1fr);gap:18px}
  .steps article{display:block}.steps h3{margin:0 0 12px}
  .footer-bottom{flex-direction:column;gap:8px}
}
@media(max-width:620px){
  html{scroll-padding-top:105px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .wrap{width:calc(100% - 40px)}
  .location-bar .wrap{flex-wrap:wrap;justify-content:flex-start;gap:3px 14px;padding-block:8px;font-size:11px;line-height:1.5}
  .location-bar .wrap>span{flex-basis:100%}.location-bar a{gap:5px}.location-bar .ui-icon{width:13px;height:13px;flex-basis:13px}
  .header .nav{gap:8px;padding:10px 12px;min-height:68px}.header .brand{min-width:0;flex-shrink:1;gap:5px}
  .header .brand>span{min-width:0}.header .brand strong{font-size:clamp(16px,4.7vw,20px);white-space:nowrap}
  .header .brand small{font-size:12px}.header .brand img{width:34px;height:40px;flex-shrink:0}
  .header .menu-toggle{min-width:44px;min-height:44px;padding:10px 6px;gap:7px}.header .menu-caption{font-size:11px}
  .nav-actions{flex-shrink:0}.header nav>a{font-size:20px;min-height:48px}
  .hero{padding-top:30px;gap:28px}.hero h1{font-size:clamp(43px,12vw,65px);margin-bottom:22px}
  .hero-copy .intro{font-size:16px;line-height:1.65;max-width:none}
  .hero .actions{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .hero .actions>.button{width:100%;min-height:54px;padding:15px 18px;font-size:15px;gap:12px}
  .hero .actions>.text-link{align-self:flex-start;min-height:44px;padding-block:8px}
  .hero-proof{gap:6px 14px;font-size:11px;line-height:1.5;margin-top:18px}
  .hero-proof span+span:before{display:none}
  .hero-visual.photo-gallery{aspect-ratio:1 / 1.16}
  .photo-slide figcaption{font-size:12px;padding:12px 14px;min-height:46px;height:auto;flex-basis:46px}
  .gallery-controls{height:64px;flex-basis:64px;padding:0 10px;gap:6px}
  .gallery-controls>button{width:40px;height:40px}.gallery-controls .ui-icon{width:18px;height:18px}
  .gallery-dots{gap:0}.gallery-dots button{position:relative;width:26px;height:40px;border:0;background:none;border-radius:0}
  .gallery-dots button:after{content:"";position:absolute;width:8px;height:8px;left:9px;top:16px;border:1px solid white;border-radius:50%}
  .gallery-dots button.active{background:none}.gallery-dots button.active:after{background:#ed3346;border-color:#ed3346}
  .promise-strip p{font-size:20px;line-height:1.45;text-align:center}.promise-strip .mobile-break{display:none}
  h2,.booking-grid h2{font-size:clamp(35px,9.9vw,46px);line-height:1.1;letter-spacing:-.035em}
  .section{padding-block:52px}.service{padding:26px 22px}.service h3{font-size:28px;line-height:1.2}
  .service .text-link{min-height:44px;gap:12px;font-size:14px}.service .text-link>span{margin-left:auto}
  .electric-section{padding-top:52px}.electric-grid{gap:28px}.electric-section h2{font-size:clamp(42px,11vw,57px)}
  .powertrain-list h3{font-size:24px}.mobile-service .button{min-height:52px}
  .faqs summary{font-size:16px;line-height:1.5;padding-right:30px}.faqs details p{padding-right:0}
  .booking-section{padding-block:52px}.booking-grid h2{margin-bottom:22px}
  .phone-link{font-size:clamp(24px,7.5vw,30px);gap:15px;max-width:100%;line-height:1.4}
  form{padding:24px 18px}.form-grid{grid-template-columns:minmax(0,1fr);gap:0}
  input,textarea,select{font-size:16px;min-height:48px;padding:12px}.form-note{font-size:12px;line-height:1.6}
  form .button{min-height:54px;padding:15px 16px;font-size:15px;gap:12px}
  .footer-top{gap:22px}.footer-top>p{line-height:1.6}.footer-top>a:last-child{min-height:44px}
  .footer-bottom{font-size:11px;line-height:1.7;padding-top:20px}.footer-bottom>span{max-width:100%}
}
/* Touch devices keep readable labels after a tap; the click animation still runs. */
@media(hover:none),(pointer:coarse){
  .drive-button:hover:not(.is-driving) .drive-label,.drive-button:hover:not(.is-driving) .drive-arrow{opacity:1;transform:none}
  .drive-button:hover .car-side,.drive-button:hover .drive-stage:before,.drive-button:hover .drive-stage:after{animation:none;opacity:0}
  .drive-button:hover{transform:none}
}