/* Lexauto: a short scroll story, with direct controls and a static fallback. */
:root{--hero-top:96px;--scene-travel:850px}
.hero-scroll{position:relative;background:#fff;scroll-margin-top:var(--hero-top)}
.hero-pin{overflow:clip;background:radial-gradient(ellipse at 80% 45%,#f0f2f3 0%,#fafbfb 38%,#fff 70%)}
.hero-scroll .hero-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:30px;min-height:690px;height:calc(100svh - var(--hero-top));max-height:850px;padding-block:22px;align-items:center}
.hero-scroll .hero-content{max-width:480px;position:relative;z-index:3}
.hero-scroll h1{font-size:clamp(64px,6.15vw,94px);margin-top:28px;line-height:1.01;letter-spacing:-.064em}
.hero-scroll .hero-copy{max-width:365px;font-size:16px;line-height:1.75;margin-top:27px}
.hero-scroll .hero-actions{display:flex;align-items:flex-start;flex-direction:column;gap:21px;margin-top:27px}
.hero-secondary{display:inline-flex;gap:17px;align-items:center;font-size:14px;font-weight:750;padding-block:5px}
.hero-secondary .icon{width:18px;transition:transform .3s var(--ease)}
.hero-secondary:hover .icon{transform:translateX(5px)}
.hero-secondary:hover{color:var(--orange-text)}
.hero-scroll .hero-facts{margin-top:35px;gap:28px}
.hero-scroll .hero-facts>div{gap:10px}
.hero-scroll .hero-facts strong{font-size:13px}
.hero-scroll .hero-facts p>span{font-size:12px}
.mechanical-stage{position:relative;min-width:0;align-self:center;--hood-angle:138deg;--car-scale:1.025;--lines:1}
.stage-heading{display:flex;justify-content:space-between;align-items:center;padding:0 13px;color:#646d72;font-size:11px;letter-spacing:.16em;font-weight:650}
.stage-counter{color:var(--ink);font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:.06em}.stage-counter i{color:#8a9296;font-style:normal;font-size:11px}
.car-scene{height:clamp(300px,33vw,475px);position:relative;isolation:isolate;margin-top:60px}
.technical-grid{position:absolute;inset:8% 3%;opacity:.45;background-image:linear-gradient(#ccd1d580 1px,transparent 1px),linear-gradient(90deg,#ccd1d580 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse,#0008,transparent 68%);pointer-events:none}
.scene-word{position:absolute;left:0;right:0;top:0;font-size:clamp(60px,8.8vw,145px);line-height:1;font-weight:850;letter-spacing:-.075em;text-align:center;color:#dbe0e380;z-index:-1;user-select:none}
.car-assembly{position:absolute;width:112%;aspect-ratio:1.5;left:-6%;top:-6%;transform:scale(var(--car-scale));transform-origin:50% 65%;isolation:isolate}
.car-body{display:block;width:100%;height:100%;object-fit:contain}
.bonnet-pivot{position:absolute;inset:0;transform-origin:50% 36.97%;transform:rotateX(var(--hood-angle));transform-style:preserve-3d;will-change:transform;z-index:2}
.car-bonnet{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;transform-origin:50% 36.97%;transform:scaleY(2.669467) translateY(1.27%) scaleY(.75);clip-path:polygon(27.2% 33.5%,28.5% 34.4%,32% 35.1%,39% 35.7%,50% 35.9%,61% 35.7%,68% 35.1%,71.5% 34.4%,72.9% 33.5%,75% 39%,77.5% 44.5%,79.6% 49.9%,79.7% 51.4%,77.5% 54%,73% 58%,66.7% 63.1%,63.5% 62.4%,55% 62.5%,45% 62.5%,37% 62.4%,33.5% 63.1%,27.3% 58%,23% 54%,20.5% 51.4%,20.5% 49.9%,22.5% 44.5%,25% 39%)}
.scene-fallback{display:none;position:absolute;inset:5% 0;width:100%;height:90%;object-fit:cover;border-radius:16px}
.scene-unavailable .scene-fallback{display:block}.scene-unavailable .car-assembly,.scene-unavailable .mechanical-lines,.scene-unavailable .engine-point,.scene-unavailable .scene-controls{display:none}
.mechanical-lines{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;stroke:var(--orange);stroke-width:1.4;opacity:var(--lines)}
.mechanical-lines circle{fill:var(--orange);stroke:#fff;stroke-width:2}.callout-path{stroke-dasharray:210;stroke-dashoffset:calc(210 * (1 - var(--lines)))}
.engine-point{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;min-height:44px;padding:9px 12px;border:1px solid #d9dfe2;border-radius:7px;background:#fffffff2;box-shadow:0 6px 18px #1b252c0d;font-size:12px;font-weight:700;color:var(--ink);transition:background .25s,border-color .25s,box-shadow .25s,transform .35s,opacity .3s}
.point-number{font-size:10px;font-variant-numeric:tabular-nums;color:var(--orange-text)}.point-plus{font-size:17px;font-weight:400;margin-left:1px;transition:transform .3s}
.point-motor{left:0;top:46%}.point-diagnosis{right:0;top:30%}.point-care{right:0;top:65%}
.engine-point:hover,.engine-point[aria-expanded=true]{background:#fff;border-color:var(--orange);box-shadow:0 5px 24px #ff5e1d1c;transform:translateY(-3px)}
.engine-point[aria-expanded=true] .point-plus{transform:rotate(45deg)}
.mechanical-stage:not(.points-visible) .engine-point{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px)}
.scene-details{min-height:80px;position:relative;padding:2px 12px 12px;display:flex;align-items:center}
.scene-intro{font-size:16px;font-weight:650;letter-spacing:-.025em;color:#626d73;max-width:420px}
.point-detail{display:flex;gap:14px;align-items:flex-start;min-width:0;width:100%;animation:detail-in .35s var(--ease)}.point-detail p{min-width:0}.point-detail[hidden],.scene-intro[hidden]{display:none}
.point-detail>span{font-size:12px;color:var(--orange-text);font-weight:700;padding-top:3px}.point-detail p{display:flex;flex-direction:column;gap:5px}.point-detail strong{font-size:17px;letter-spacing:-.025em}.point-detail p>span{font-size:13px;line-height:1.6;color:#59666d;max-width:510px}
.scene-controls{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:14px;padding:0 12px}
.scene-controls button{position:relative;background:none;border:0;border-top:2px solid #d7dde0;padding:13px 0 8px;display:flex;gap:9px;align-items:center;font-size:12px;font-weight:650;color:#5e6b73;text-align:left;min-height:44px;transition:color .25s}
.scene-controls button:before{content:'';position:absolute;top:-2px;left:0;width:100%;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.scene-controls button[aria-pressed=true]{color:var(--ink)}.scene-controls button[aria-pressed=true]:before{transform:scaleX(1)}.scene-controls button>span:first-child{font-size:10px;color:var(--orange-text)}.scene-controls button:hover{color:var(--orange-text)}
.stage-footer{padding:12px;display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:11px;color:#69757a}.stage-footer>a{text-decoration:underline;text-underline-offset:3px}.scroll-cue{display:flex;align-items:center;gap:9px}.scroll-cue>span:first-child{font-size:19px;line-height:1;display:block;animation:scroll-hint 2.2s ease-in-out infinite}
.hero-scroll.motion-ready{height:calc(100svh - var(--hero-top) + var(--scene-travel))}
.motion-ready .hero-pin{position:sticky;top:var(--hero-top)}
.motion-off .hero-scroll{height:auto}.motion-off .hero-pin{position:relative;top:auto}
.site-header{transition:box-shadow .3s,background .3s,backdrop-filter .3s}.site-header.scrolled{background:#ffffffeb;backdrop-filter:blur(18px);box-shadow:0 8px 25px #1a22280b}
.button{position:relative;isolation:isolate;overflow:hidden;transition:color .3s,background .3s,box-shadow .3s,transform .25s}
.button:before{content:'';position:absolute;inset:0;background:var(--orange);z-index:-1;transform:translateY(105%);transition:transform .38s var(--ease);border-radius:inherit}
.button:hover:before{transform:translateY(0)}.button-dark:hover{color:#10181b;background:#10181b;box-shadow:0 8px 24px #ff5e1d20}.button:active{transform:translateY(1px) scale(.98)}
.button .icon{transition:transform .3s var(--ease)}.button:hover .icon{transform:translateX(4px)}.button-orange:before{background:#ffc5a7}.button-orange:hover{color:#10181b}
.desktop-nav a{position:relative}.desktop-nav a:after{transform-origin:left;transition:transform .3s var(--ease)}
.service-tabs{position:relative}.service-tabs>button{transition:background .3s,color .3s,transform .25s}.service-tabs>button:hover{background:#f2f4f5}.service-tabs>button:active{transform:scale(.97)}
.service-tabs>button .icon{transition:transform .45s var(--ease),color .3s}.service-tabs>button:hover .icon{transform:translateY(-4px) rotate(-7deg)}.service-tabs>button[aria-selected=true] .icon{transform:translateY(-2px)}
.service-tabs>button .tab-number{transition:color .3s,transform .3s}.service-tabs>button:hover .tab-number{color:var(--orange-text);transform:translateY(-2px)}
.text-link,.service-panels a{position:relative}.text-link:after,.service-panels a:after{content:'';position:absolute;bottom:-5px;left:0;width:calc(100% - 30px);height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}.text-link:hover:after,.service-panels a:hover:after{transform:scaleX(1)}
.road-card .road-rule{transition:width .5s var(--ease)}.road-card:hover .road-rule{width:88px}
.identity-strip>div{transition:background .3s}.identity-strip strong{transition:color .3s,transform .35s}.identity-strip>div:hover strong{color:var(--orange-text);transform:translateY(-3px)}
.work-steps article:before{content:'';position:absolute;top:-1px;left:0;height:2px;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}.work-steps article:hover:before{transform:scaleX(1)}.work-steps article>span{transition:transform .4s}.work-steps article:hover>span{transform:translateX(5px)}
.contact-form{transition:box-shadow .4s,border-color .4s}.contact-form:focus-within{box-shadow:0 14px 40px #1420280e;border-color:#c3cbd0}.contact-form input,.contact-form select,.contact-form textarea{transition:border-color .25s,background .25s,box-shadow .25s}.contact-form :is(input,select,textarea):focus{border-color:var(--orange-text);background:#fff;box-shadow:0 0 0 3px #ff5e1d12;outline:0}.contact-form .has-value{background:#fff;border-color:#9eaeb6}.contact-form label{transition:color .25s}.contact-form label.field-active{color:var(--orange-text)}
.contact-image img{transition:transform .9s var(--ease)}.contact-image:hover img{transform:scale(1.04)}
.footer-main nav a{transition:color .25s}.menu-toggle{transition:background .25s,border-color .25s}.menu-toggle:hover{background:#f1f3f4;border-color:var(--orange)}
:is(button,a,input,select,textarea):focus-visible{outline:3px solid var(--orange-text);outline-offset:5px}
@keyframes scroll-hint{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@keyframes detail-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(hover:none){.button:hover:before{transform:translateY(105%)}.engine-point:hover{transform:none}}
@media(min-width:1600px){.hero-scroll .hero-inner{padding-top:25px}.car-scene{height:500px}}
@media(max-width:1150px){:root{--hero-top:96px}.hero-scroll .hero-inner{grid-template-columns:.85fr 1.15fr;gap:15px;min-height:650px}.hero-scroll h1{font-size:66px}.hero-scroll .hero-copy{font-size:15px}.hero-scroll .hero-facts{gap:16px}.hero-scroll .hero-facts p>span{font-size:10px}.car-scene{height:340px}.engine-point{font-size:11px;padding:8px;gap:5px}.scene-details{min-height:95px}.scene-controls{gap:10px}.scene-controls button{font-size:11px;gap:6px}.point-detail strong{font-size:16px}.stage-footer{font-size:10px}.hero-scroll .hero-facts strong{font-size:12px}}
@media(max-width:900px){:root{--hero-top:82px}.hero-scroll .hero-inner{width:calc(100% - 48px);grid-template-columns:.87fr 1.13fr;gap:5px;min-height:640px}.hero-scroll h1{font-size:57px}.hero-scroll .hero-copy{font-size:14px;max-width:285px}.hero-scroll .hero-actions .button{font-size:12px;padding-inline:17px}.hero-scroll .hero-facts{flex-direction:column;gap:15px;margin-top:25px}.hero-scroll .hero-facts p>span{font-size:11px}.car-scene{height:285px}.scene-word{font-size:68px}.stage-heading{font-size:9px;letter-spacing:.09em}.scene-controls{gap:8px;padding-inline:0}.scene-controls button{gap:4px;font-size:10px}.scene-details{padding-inline:0;min-height:120px}.scene-intro{font-size:15px}.engine-point{font-size:10px;padding:7px;gap:4px;min-height:40px}.point-number{font-size:9px}.point-plus{display:none}.stage-footer{padding-inline:0;font-size:9px}.point-motor{left:-3%}.point-diagnosis,.point-care{right:-3%}}
@media(max-width:700px){:root{--hero-top:77px}.hero-scroll.motion-ready{height:auto}.motion-ready .hero-pin{position:relative;top:auto}.hero-scroll .hero-inner{height:auto;max-height:none;min-height:0;display:flex;flex-direction:column;gap:28px;padding-top:32px;padding-bottom:21px;width:calc(100% - 40px)}.hero-scroll .hero-content{max-width:none;width:100%}.hero-scroll .hero-content:before{display:none}.hero-scroll h1{font-size:clamp(52px,11.2vw,77px);margin-top:22px;line-height:1.04}.hero-scroll h1 .line:nth-child(2){margin-right:.09em}.hero-scroll .hero-copy{max-width:450px;font-size:15px;margin-top:20px}.hero-scroll .hero-actions{display:flex;flex-direction:row;align-items:center;gap:16px;margin-top:22px}.hero-scroll .hero-actions .button{font-size:12px;padding:14px 16px;min-height:50px}.hero-secondary{font-size:12px;gap:8px;max-width:140px;line-height:1.5}.hero-secondary .icon{flex-shrink:0}.hero-scroll .hero-facts{flex-direction:row;justify-content:flex-start;gap:27px;margin-top:25px}.hero-scroll .hero-facts .icon{width:21px;height:21px}.hero-scroll .hero-facts strong{font-size:12px}.hero-scroll .hero-facts p>span{font-size:10px}.mechanical-stage{width:100%;max-width:570px;padding-top:20px;border-top:1px solid #dce1e4}.stage-heading{font-size:10px;padding:0}.car-scene{height:auto;aspect-ratio:1.32;margin-top:12px}.car-assembly{width:120%;left:-10%;top:-5%}.scene-word{font-size:17vw}.engine-point{font-size:11px;padding:8px;min-height:44px;gap:5px}.point-motor{left:0;top:45%}.point-diagnosis{right:0;top:25%}.point-care{right:0;top:72%}.point-plus{display:block;font-size:14px}.scene-details{min-height:112px;padding:10px 0 14px}.point-detail strong{font-size:16px}.point-detail p>span{font-size:13px}.scene-controls button{font-size:11px;min-height:50px;gap:7px}.scene-controls button>span:first-child{font-size:10px}.stage-footer{font-size:10px;padding-block:12px 0}.scene-intro{font-size:15px}.hero-pin{background:linear-gradient(#fff 0%,#fff 37%,#f1f4f5 80%,#fff 100%)}.scroll-cue>span:first-child{font-size:16px}.services{padding-top:32px}.scene-word{top:-1%}}
@media(max-width:380px){.hero-scroll .hero-actions{gap:10px}.hero-scroll .hero-actions .button{padding-inline:12px;font-size:11px}.hero-secondary{font-size:11px;max-width:111px}.hero-scroll .hero-facts{gap:16px}.engine-point{font-size:10px;padding-inline:7px}.point-plus{display:none}.scene-controls button{font-size:10px;gap:5px}}
@media(max-height:740px) and (min-width:701px){.hero-scroll.motion-ready{height:auto}.motion-ready .hero-pin{position:relative;top:auto}.hero-scroll .hero-inner{height:auto;min-height:650px}}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .hero-scroll{height:auto}html:not(.motion-enabled) .hero-pin{position:relative;top:auto}}

/* The reverse face turns into view after the rigid panel passes edge-on. */
.car-bonnet.bonnet-inside{filter:brightness(.23) saturate(.2);transform:rotateY(180deg) scaleX(-1) scaleY(2.669467) translateY(1.27%) scaleY(.75)}
@media(max-width:700px){.car-scene{margin-top:48px}}
