/* True Track: ink, rubber, tension and release. */
:root{--snap:cubic-bezier(.18,.85,.25,1);scrollbar-color:#d82e18 #f5e8d3;scrollbar-width:thin}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--paper)}::-webkit-scrollbar-thumb{background:var(--red);border:2px solid var(--paper)}
.hero-calibration{position:absolute;right:0;bottom:-1%;display:flex;align-items:center;gap:28px;z-index:9}
.hero-calibration .align-toggle{position:relative;inset:auto;min-width:180px;justify-content:flex-end}
.toe-control{display:flex;align-items:center;gap:14px;position:relative}
.toe-control:before{content:'';position:absolute;left:64px;top:5px;height:31px;width:1px;background:var(--red);opacity:.35;pointer-events:none}
.toe-control input{appearance:none;-webkit-appearance:none;width:128px;height:42px;margin:0;background:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 8px) center/100% 10px no-repeat;touch-action:pan-y;cursor:ew-resize}
.toe-control input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:7px;height:25px;border-radius:0;background:var(--red);border:0;box-shadow:0 0 0 3px var(--paper)}
.toe-control input::-moz-range-thumb{width:7px;height:25px;border-radius:0;background:var(--red);border:0}
.toe-control output{font:11px var(--mono);font-variant-numeric:tabular-nums;min-width:55px;color:var(--red)}
.hero h1{pointer-events:auto;user-select:text}
.motion-ready .symptoms{isolation:auto}.motion-ready .tire-portrait{z-index:auto}.motion-ready .approach{z-index:auto}.motion-ready .approach-top{z-index:4}.workshop-image figcaption{z-index:6}
.route .route-halo{fill:none;stroke-width:.8}
.route{position:fixed;inset:0 auto auto 0;overflow:hidden}
.motion-ready .hero-wheel{animation:rubber-arrives 1.2s var(--ease) both;transition:none;will-change:auto}
.motion-ready .wheel-one{transform:translate(var(--look-x,0px),var(--look-y,0px)) rotate(calc(-1.5deg * var(--off,1)));animation-delay:.06s}
.motion-ready .wheel-two{transform:translate(calc(var(--look-x,0px) * -.65),calc(var(--look-y,0px) * -.65)) rotate(calc(1deg * var(--off,1))) scaleX(-1);animation-delay:.2s}
.motion-ready .wheel-three{transform:translate(calc(var(--look-x,0px) * -.4),calc(var(--look-y,0px) * .4)) rotate(calc(1deg * var(--off,1)));animation-delay:.32s}
.motion-ready .wheel-four{transform:rotate(var(--toe,-11deg));pointer-events:auto;touch-action:pan-y;user-select:none;cursor:ew-resize;animation-delay:.45s}
.motion-ready .wheel-four img{transform:scaleX(-1);pointer-events:none;-webkit-user-drag:none;transition:scale .3s var(--snap),filter .2s}
.hero.is-tuning .wheel-four img{scale:1.015 .94;filter:contrast(1.12)}
.print-register{position:absolute;inset:-12px -6px;border:1px solid transparent;opacity:0;transition:opacity .25s;pointer-events:none;background:linear-gradient(var(--red),var(--red)) left top/18px 1px no-repeat,linear-gradient(var(--red),var(--red)) left top/1px 12px no-repeat,linear-gradient(var(--red),var(--red)) right bottom/18px 1px no-repeat,linear-gradient(var(--red),var(--red)) right bottom/1px 12px no-repeat}
.wheel-four:hover .print-register,.hero.is-tuning .print-register{opacity:.8}
.hero-rule:after{content:'';position:absolute;left:var(--rider-x,50%);top:-4px;width:9px;height:9px;background:var(--paper);border:1px solid var(--red);transform:rotate(45deg);opacity:0;transition:opacity .25s;pointer-events:none}
.hero.has-pointer .hero-rule:after{opacity:1}
.motion-ready .is-aligned .hero-rule{animation:none}
.hero.is-tuning .hero-rule{box-shadow:0 1px 0 #d82e1830,0 -1px 0 #d82e1830}
.hero.is-aligned #toe-reading,.hero.is-aligned .align-cross{color:var(--ink)}
.custom-cursor{position:fixed;z-index:9998;left:0;top:0;width:0;height:0;pointer-events:none;color:var(--red);opacity:0;transition:opacity .12s;--cursor-scale:1}
.custom-cursor.is-visible{opacity:1}
.cursor-center{position:absolute;width:4px;height:4px;border-radius:50%;background:currentColor;left:-2px;top:-2px;box-shadow:0 0 0 1px var(--paper)}
.cursor-brackets{position:absolute;left:-14px;top:-14px;width:28px;height:28px;transform:rotate(var(--cursor-turn,0deg)) scale(var(--cursor-scale));transition:transform .22s var(--snap),scale .12s var(--snap)}
.cursor-brackets:before,.cursor-brackets:after{content:'';position:absolute;top:5px;bottom:5px;width:6px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
.cursor-brackets:before{left:0;border-left:1px solid currentColor}.cursor-brackets:after{right:0;border-right:1px solid currentColor}
.cursor-caption{position:absolute;top:22px;left:12px;font:8px var(--mono);letter-spacing:.12em;white-space:nowrap;background:var(--paper);color:var(--red);padding:2px 4px;transform:translateY(-3px);opacity:0;transition:opacity .18s,transform .18s}
.cursor-caption:not(:empty){opacity:1;transform:none}
.custom-cursor.on-dark{color:var(--paper)}.custom-cursor.is-down .cursor-brackets{scale:.7}
.cursor-ready,.cursor-ready a,.cursor-ready button,.cursor-ready summary,.cursor-ready input[type=range],.cursor-ready [data-cursor]{cursor:none!important}
.cursor-ready input:not([type=range]),.cursor-ready textarea{cursor:text!important}.cursor-ready select{cursor:auto!important}
.cursor-ready p,.cursor-ready h1,.cursor-ready h2,.cursor-ready h3,.cursor-ready li,.cursor-ready dd,.cursor-ready dt,.cursor-ready label,.cursor-ready output,.cursor-ready figcaption{cursor:text!important}
.cursor-ready .booking-dialog,.cursor-ready .booking-dialog *{cursor:auto!important}
.cursor-ready .booking-dialog input:not([type=range]),.cursor-ready .booking-dialog textarea{cursor:text!important}
.dialog-open .custom-cursor{opacity:0!important}
.nav-book:active svg,.button:active svg{transform:translateX(9px) scaleX(.88)}
.service-rail a{position:relative}.service-rail a:after{content:'';height:2px;background:var(--red);position:absolute;bottom:-8px;left:0;right:0;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--snap)}
.service-rail a:hover:after,.service-rail a:focus-visible:after{transform:scaleX(1)}
.back-top span{transition:transform .45s var(--snap)}.back-top:hover span{transform:translateY(-6px)}
.inspect-toggle{position:absolute;top:24px;right:24px;z-index:7;display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 14px;background:var(--paper);color:var(--ink);font:9px var(--mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid #22211d2b;box-shadow:0 3px 15px #0000000b;transition:background .25s,color .25s}
.inspect-toggle:hover,.inspect-toggle[aria-pressed=true]{background:var(--red);color:var(--paper);border-color:var(--red)}
.inspect-toggle:disabled{opacity:.4;cursor:wait!important}
.inspect-sight{width:19px;height:19px;border:1px solid currentColor;border-radius:50%;position:relative}
.inspect-sight:before,.inspect-sight:after{content:'';position:absolute;background:currentColor}.inspect-sight:before{width:9px;height:1px;left:4px;top:8px}.inspect-sight:after{width:1px;height:9px;top:4px;left:8px;transition:transform .3s}
.inspect-toggle[aria-pressed=true] .inspect-sight:after{transform:rotate(90deg)}
.photo-lens{position:absolute;z-index:5;border-radius:50%;pointer-events:none;opacity:0;transform:scale(.86);background-color:var(--paper);background-repeat:no-repeat;border:1px solid var(--paper);box-shadow:0 0 0 5px #22211d,0 0 0 6px #f5e8d380,0 15px 45px #0006;transition:opacity .25s,transform .35s var(--snap)}
.photo-lens:before{content:'';position:absolute;inset:6px;border:1px solid #f5e8d355;border-radius:50%}
.photo-lens:after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(var(--red),var(--red)) 50% 50%/20px 1px no-repeat,linear-gradient(var(--red),var(--red)) 50% 50%/1px 20px no-repeat,linear-gradient(135deg,#fff0 30%,#fff1 45%,#fff0 55%)}
.tire-portrait[data-scene=wear]>img{mix-blend-mode:multiply}
.tire-portrait[data-scene=wear] .photo-lens{background-blend-mode:multiply}
.is-inspecting .photo-lens{opacity:1;transform:scale(1)}
.photo-shutter{position:absolute;top:0;bottom:0;width:1px;left:0;background:var(--red);z-index:6;pointer-events:none;opacity:0;box-shadow:0 0 10px #d82e1855}
.scene-image-status{z-index:6;inset:35% 10% auto;min-height:80px;padding:20px;background:var(--paper);font:12px var(--sans);text-align:center;line-height:1.6;display:block;pointer-events:auto}
.scene-image-status button{color:var(--red);text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:8px}
.process-sketch{width:50px;height:40px;position:absolute;right:0;top:5px;overflow:visible;stroke-width:1.2;color:var(--red)}
.process-sketch .sketch-fixed{stroke:var(--paper);opacity:.22}.process-sketch .sketch-action{transform-origin:25px 20px}.process-sketch .sketch-dot{fill:var(--red);stroke:var(--red)}
.process-steps article .step-rule{display:none}.process-steps article{padding-right:54px}.process-steps article:hover .step-no{background:var(--red);color:var(--paper)}.step-no{transition:background .25s,color .25s}
.booking-dialog{border-top:3px solid var(--red)}
.booking-dialog[open]{animation:job-card-in .45s var(--snap)}
.booking-progress{list-style:none;display:flex;justify-content:space-between;gap:18px;padding:20px 0 18px;margin:26px 0 0;border-top:1px dashed var(--rule);border-bottom:1px solid var(--rule);font:11px var(--sans);color:var(--muted)}
.booking-progress li{display:flex;align-items:center;gap:8px}.booking-progress li span{font:9px var(--mono);width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:50%}
.booking-progress [aria-current=step]{color:var(--red)}.booking-progress [aria-current=step] span{color:var(--paper);background:var(--red);border-color:var(--red)}
.complete-mark{position:relative}.complete-mark:after{content:'LOCAL PREVIEW';position:absolute;left:68px;top:12px;transform:rotate(-5deg);border:1px solid var(--red);padding:5px 9px;font:10px var(--mono);white-space:nowrap;letter-spacing:.1em}
@keyframes job-card-in{from{opacity:0;transform:translateY(24px) rotate(-.6deg)}to{opacity:1;transform:none}}
@keyframes rubber-arrives{0%{opacity:0;clip-path:inset(0 100% 0 0);filter:blur(1px)}45%{opacity:1;filter:blur(0)}100%{opacity:1;clip-path:inset(0)}}
@media(max-width:1100px){.hero-calibration{gap:18px}.toe-control input{width:104px}.toe-control:before{left:52px}.hero-calibration .align-toggle{min-width:165px}.process-sketch{width:32px}.process-steps article{padding-right:30px}}
@media(max-width:760px){.hero-calibration{bottom:0;left:0;justify-content:flex-end;gap:12px}.hero-calibration .align-toggle{font-size:10px;min-width:0;gap:7px}.toe-control{gap:8px}.toe-control input{width:88px}.toe-control:before{left:44px}.toe-control output{font-size:9px;min-width:45px}.hero-calibration .align-toggle svg{width:15px}.print-register{inset:-7px -3px}.inspect-toggle{top:12px;right:12px;padding:8px 10px;font-size:8px;gap:7px}.inspect-sight{width:17px;height:17px}.inspect-sight:before{left:3px;top:7px}.inspect-sight:after{left:7px;top:3px}.process-steps article{padding-right:0}.process-sketch{display:none}.booking-progress{font-size:9px;gap:8px}.booking-progress li{gap:5px}.booking-progress li span{width:20px;height:20px;font-size:8px}.scene-image-status{inset:35% 5% auto;font-size:11px;padding:12px}}
@media(max-width:380px){.hero-calibration{gap:8px}.toe-control input{width:65px}.toe-control:before{left:32px}.toe-control{gap:6px}.toe-control output{min-width:41px}.hero-calibration .align-toggle{font-size:9px;gap:5px}}
@media(hover:none),(pointer:coarse),(forced-colors:active){.custom-cursor{display:none!important}}
@media(prefers-reduced-motion:reduce){.motion-ready .hero-wheel{animation:none;filter:none}.cursor-brackets,.cursor-caption{transition:none}}