/* Detail-screen refinement. The approved homepage stays intact. */
dialog{max-width:1080px;border-radius:30px;background:#bdd9ba}
.dialog-header{padding:12px 30px;background:#bfdfd5eb;border-bottom-color:#e1edce}
.dialog-header img{width:157px;height:66px}
.dialog-body{padding:30px 40px 38px}
.dialog-body>.eyebrow{color:#4a7974;font-size:10px;letter-spacing:2px;margin-bottom:12px}
.dialog-body h2{font-size:clamp(30px,3.2vw,45px);line-height:1.12;letter-spacing:-.5px;margin-bottom:22px}
.dialog-body p{color:#315c62;line-height:1.8}
.service-detail-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(245px,1fr);gap:30px;align-items:stretch}
.service-detail-copy>p:first-child{margin-top:0;font-size:16px}
.service-detail-copy .detail-points{gap:10px;margin:20px 0}
.service-detail-copy .detail-points li{position:relative;padding:13px 16px 13px 28px;background:#dcebc8db;border:1px solid #edf6d7;box-shadow:0 2px 0 #94b69d22}
.service-detail-copy .detail-points li:before{content:'';width:5px;height:5px;border-radius:50%;position:absolute;left:13px;top:22px;background:#df9d26}
.service-detail-copy .detail-points b{font-size:16px}
.service-detail-copy .button{width:100%;font-size:18px;padding:14px 18px}
.service-visual{position:relative;isolation:isolate;overflow:hidden;min-height:390px;border:1px solid #eaf2d4;border-radius:90px 90px 28px 28px;background:linear-gradient(#c2e7ddc9,#bed6aca3 55%,#b4d09ae8),url('assets/world.webp') 72% center/auto 100%;display:grid;align-content:center;justify-items:center;box-shadow:inset 0 2px 0 #f1ffe4b0,0 13px 25px #3f6f531a}
.service-visual.battery{background:linear-gradient(#e3e7c3e8,#cdddb8c0 55%,#aec994e8),url('assets/world.webp') 65% center/auto 100%}
.service-visual.tyre{background:linear-gradient(#c2e3e8e0,#bcd9c5aa 55%,#abcba0ee),url('assets/world.webp') 65% center/auto 100%}
.service-visual:after{content:'';position:absolute;left:10%;right:10%;bottom:96px;height:18px;border-radius:50%;background:#40684a24;filter:blur(7px)}
.service-visual .service-intro-art{float:none;margin:0;position:relative;width:100%;height:150px;z-index:2}
.service-visual .service-intro-art img{width:95%;height:145px;object-fit:contain;filter:drop-shadow(0 10px 6px #244d4330)}
.service-visual .big-battery{transform:scale(1.35);margin-top:15px}
.service-visual .big-tyre{height:120px;width:120px;border-width:20px;font-size:70px}
.service-visual .art-star{right:17%;top:0;font-size:28px}
.visual-tag{font:700 10px Sirin;letter-spacing:1px;position:absolute;top:32px;left:12%;right:12%;text-align:center;color:#3b7373}
.visual-mascot{position:absolute;bottom:-8px;right:-13px;width:115px;height:175px;object-fit:contain;z-index:3;transform:rotate(-7deg)}
.dialog-services{max-width:none;gap:14px}
.dialog-services button{display:grid;grid-template-columns:92px 1fr 24px;gap:20px;align-items:center;background:linear-gradient(100deg,#e3edcde8,#c8e2c0df);padding:15px 22px;border:1px solid #f2f8df;box-shadow:0 3px 0 #92b29344;min-height:110px;transition:transform .18s,box-shadow .18s}
.dialog-services button:nth-child(2){background:linear-gradient(100deg,#e9eac6ec,#d5e2bce8)}
.dialog-services button:nth-child(3){background:linear-gradient(100deg,#cee6e3ee,#c3dfc7e8)}
.dialog-services button:hover{transform:translateY(-3px);box-shadow:0 6px 0 #92b29333,0 9px 18px #4468461a}
.dialog-services button>span:last-child{font-size:30px}
.dialog-services small{font-size:12px;letter-spacing:.4px;margin-top:8px}
.choice-icon{height:76px;width:92px;display:grid;place-items:center}
.choice-icon img{width:105px;height:74px;object-fit:contain;filter:drop-shadow(0 5px 3px #376d452a)}
.choice-icon .big-battery{transform:scale(.7)}
.choice-icon .big-tyre{transform:scale(.65);animation:none}
.flow-stepper{list-style:none;display:flex;gap:12px;padding:0 0 22px;margin:0 0 22px;border-bottom:1px solid #99bda6;max-width:700px}
.flow-stepper li{display:flex;align-items:center;gap:9px;flex:1;font:700 14px Sirin;color:#6b8e86}
.flow-stepper b{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:#bed5b9;color:#668c80;font-size:12px}
.flow-stepper .current{color:#176d9d}
.flow-stepper .current b{color:#7c4b12;background:#ffc456;box-shadow:0 2px 0 #d4a34b}
.flow-stepper .finished{color:#3d835d}
.flow-stepper .finished b{background:#a9d2a4;color:#2c6c4c}
#request-form{background:#d2e6c3c7;padding:3px 24px 24px;border-radius:22px;border:1px solid #edf5d5}
#request-form label{font-size:15px}
#request-form input,#request-form select{background:#e3efcedc;border-color:#a4bfa7;padding:15px;border-radius:13px;box-shadow:inset 0 2px 4px #526c4110}
#request-form input:focus,#request-form select:focus{background:#ecf3dc;box-shadow:0 0 0 4px #3399ba15}
#request-form .example-fill{font-size:13px;padding:16px 0 4px;color:#367f8e;text-underline-offset:4px}
#request-form>.button{margin-top:23px;width:100%}
.request-summary{border-radius:22px;box-shadow:0 7px 20px #52774e13}
.summary-actions{max-width:700px}
.summary-actions .button{flex:1;font-size:17px}
.brand-signature{display:flex;gap:17px;align-items:center;max-width:650px;margin:-10px 0 22px;padding:8px 22px 8px 4px;border-bottom:1px solid #99c0ac}
.brand-signature img{height:120px;width:90px;object-fit:contain}
.brand-signature strong{font:700 24px Sirin;display:block;color:#c48016}
.brand-signature small{font-size:12px;color:#567d70;display:block;margin-top:9px;line-height:1.7}
.app-coming{max-width:720px;margin:auto;padding:0 0 8px}
.app-coming img{height:180px;width:125px;filter:drop-shadow(0 8px 6px #4b784625)}
.app-coming h3{font-size:27px}
.app-coming p{font-size:15px;max-width:560px}
.app-coming .launch-tag{font-size:12px;padding:8px 22px;border:1px solid #f8edb4}
.app-coming .button{min-width:260px}
.success-message{padding:27px;border-color:#e9f4c8;box-shadow:0 5px 15px #416a4012}
.hit.call-hit:hover,.hit.app-hit:hover{box-shadow:0 0 0 3px #fff1bba3,0 0 25px #ffb53055;background:#ffdb4320}
@media(max-width:700px){
 dialog{border-radius:25px;max-height:94svh}
 .dialog-header{padding:10px 17px}
 .dialog-header img{width:119px;height:53px}
 .dialog-body{padding:22px 21px 30px}
 .dialog-body h2{font-size:30px;margin-bottom:22px}
 .service-detail-layout{display:flex;flex-direction:column;gap:21px}
 .service-visual{order:-1;min-height:185px;border-radius:50px 50px 20px 20px}
 .service-visual .service-intro-art{height:120px;width:65%}
 .service-visual .service-intro-art img{height:113px}
 .service-visual .big-battery{transform:scale(.95)}
 .service-visual .big-tyre{height:85px;width:85px;border-width:15px;font-size:50px}
 .service-visual:after{bottom:28px}
 .visual-tag{top:15px;font-size:8px}
 .visual-mascot{height:135px;width:88px;right:0;bottom:-12px}
 .service-visual .art-star{right:4%;top:18px;font-size:20px}
 .service-detail-copy>p:first-child{font-size:14px}
 .dialog-services button{grid-template-columns:62px 1fr 18px;padding:13px 15px;gap:12px;min-height:96px;font-size:19px}
 .dialog-services small{font-size:11px;letter-spacing:0}
 .choice-icon{width:62px;height:64px}
 .choice-icon img{width:78px;height:59px}
 .choice-icon .big-battery{transform:scale(.55)}
 .choice-icon .big-tyre{transform:scale(.55)}
 .flow-stepper{gap:7px;padding-bottom:17px;margin-bottom:17px}
 .flow-stepper li{gap:6px;font-size:12px}
 .flow-stepper b{width:28px;height:28px;border-radius:10px;font-size:10px}
 #request-form{padding:0 16px 20px}
 #request-form input,#request-form select{padding:13px;font-size:16px}
 .brand-signature{padding-right:0;gap:10px}
 .brand-signature img{width:66px;height:103px}
 .brand-signature strong{font-size:20px}
 .brand-signature small{font-size:11px}
 .app-coming h3{font-size:23px}
 .app-coming p{font-size:14px}
 .app-coming .button{min-width:0;width:100%}
}
@media(prefers-reduced-motion:reduce){.dialog-services button{transition:none}}