/* The living repair order. Original colour, typography and page geometry retained. */
:root{--paper-ease:cubic-bezier(.19,1,.22,1);--page-progress:0}
html{scrollbar-color:var(--ink) var(--outer);scrollbar-width:thin}
body::-webkit-scrollbar{width:9px}body::-webkit-scrollbar-track{background:var(--outer)}body::-webkit-scrollbar-thumb{background:var(--ink);border:2px solid var(--outer);border-radius:5px}
.paper-sheet{isolation:isolate}
.paper-glyph{display:inline-flex}.paper-glyph svg{width:35px;height:25px;fill:none;stroke:currentColor;stroke-width:1.3}
.brand h1{white-space:nowrap;display:flex;align-items:baseline}
.wordmark-letter{display:inline-block;position:relative;transform-origin:50% 90%;will-change:transform;animation:ink-arrival .85s var(--paper-ease) both}
.wordmark-letter:nth-child(2){animation-delay:.07s}.wordmark-letter:nth-child(3){animation-delay:.13s}.wordmark-letter:nth-child(4){animation-delay:.19s}.wordmark-letter:nth-child(5){animation-delay:.25s}.wordmark-letter:nth-child(6){animation-delay:.31s}
@keyframes ink-arrival{from{opacity:.2;transform:translateY(7px) scaleY(.93)}to{opacity:1;transform:none}}
.hero-stage{perspective:1000px}
.wagon-wrap{animation:paper-arrival 1.25s var(--paper-ease) both;transform-origin:50% 90%}
@keyframes paper-arrival{from{opacity:0;translate:0 14px;rotate:1deg}to{opacity:1;translate:0 0;rotate:0deg}}
.car-carbon{transform:translate(calc(-9px + var(--carbon-x,0px)),calc(3px + var(--carbon-y,0px)));transition:transform .18s ease-out}
.car-halftone{clip-path:polygon(0 0,var(--halftone-edge,34%) 0,45% 100%,0 100%);transition:clip-path .25s}
.car-checkpoints{position:absolute;inset:0;z-index:6;pointer-events:none}
.car-point{position:absolute;display:grid;place-items:center;width:44px;height:44px;padding:7px;transform:translate(-50%,-50%);pointer-events:auto;isolation:isolate}
.car-point span{font:10px var(--mono);letter-spacing:-.04em;border:1px solid var(--ink);background:var(--pink);border-radius:50%;width:26px;height:26px;display:grid;place-items:center;box-shadow:2px 3px 0 #65051b24;transition:background .2s,color .2s,scale .3s var(--paper-ease)}
.car-point:before{content:'';position:absolute;inset:1px;border:1px solid var(--ink);border-radius:49% 51% 48% 53%;opacity:0;scale:1.35;rotate:-13deg;transition:scale .5s var(--paper-ease),opacity .25s}
.car-point:hover:before,.car-point:focus-visible:before,.car-point[aria-pressed="true"]:before{scale:1;opacity:.5}
.car-point:hover span,.car-point:focus-visible span,.car-point[aria-pressed="true"] span{background:var(--ink);color:var(--cream);scale:1.08}
.point-brakes{left:84.3%;top:80.1%}.point-diagnostics{left:59%;top:39%}.point-maintenance{left:76.8%;top:39.6%}.point-starting{left:89.7%;top:47.7%}
.care-trace{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;overflow:visible;fill:none;stroke:var(--ink);stroke-width:1;stroke-linecap:round;vector-effect:non-scaling-stroke}
.care-route{stroke-dasharray:1;stroke-dashoffset:1;opacity:.58;transition:stroke-dashoffset 1.3s var(--paper-ease)}
.hero-stage:hover .care-route,.hero-stage:focus-within .care-route{stroke-dashoffset:0}
.care-ring{stroke-dasharray:1;stroke-dashoffset:1;opacity:.75;stroke-width:1.3;transition:stroke-dashoffset .8s var(--paper-ease)}
.hero-stage[data-inspecting="brakes"] .care-ring{stroke-dashoffset:0}
.car-margin-note{position:absolute;left:3px;top:76px;z-index:7;pointer-events:none;transform:rotate(-7deg);transform-origin:left center}
.car-margin-note .note{display:block;font-size:clamp(22px,2.4vw,31px);line-height:.95;max-width:200px}
.car-margin-note .mono{display:block;font-size:8px;letter-spacing:.06em;margin-top:7px;max-width:185px}
.car-margin-note:after{content:'';position:absolute;left:2px;bottom:-6px;width:70%;border-bottom:1px solid;transform:rotate(-2deg);opacity:.4}
.hero-stage .hero-handnote svg path,.hand-arrow path{stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset 1.6s var(--paper-ease)}
.hero-stage[data-motion-seen] .hero-handnote svg path,.intake-heading[data-motion-seen] .hand-arrow path{stroke-dashoffset:0}
.motion-toggle{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:8px;letter-spacing:.06em;white-space:nowrap;border-bottom:1px dotted var(--ink);padding:2px 3px;opacity:.8}
.motion-toggle>span{font-size:11px}
.pencil-cursor{display:none;position:fixed;left:0;top:0;width:52px;height:52px;pointer-events:none;z-index:9999;filter:drop-shadow(1px 3px 1px #35192230);transform-origin:11.2px 41.9px}
.pencil-cursor svg{width:100%;height:100%}
#pencil-trace{position:fixed;inset:0;pointer-events:none;z-index:25;width:100%;height:100%}
@media(hover:hover) and (pointer:fine){
 .pencil-enabled.pencil-visible,.pencil-enabled.pencil-visible a,.pencil-enabled.pencil-visible button,.pencil-enabled.pencil-visible summary,.pencil-enabled.pencil-visible label{cursor:none}
 .pencil-enabled .pencil-cursor.is-visible{display:block}
 .pencil-enabled input,.pencil-enabled textarea{cursor:text}.pencil-enabled select{cursor:pointer}
 .pencil-cursor.is-text{opacity:0}
 .button{transform:translate(var(--button-x,0px),var(--button-y,0px));transition:background .2s,box-shadow .3s,transform .45s var(--paper-ease)}
 .button:hover{transform:translate(var(--button-x,0px),calc(var(--button-y,0px) - 2px));box-shadow:3px 5px 0 #65051b15}
 .notebook-page{transform:rotate(calc(-2deg + var(--paper-rotate,0deg)));transition:transform .75s var(--paper-ease)}
 .prep-slip{transform:rotate(calc(1.2deg + var(--paper-rotate,0deg)));transition:transform .7s var(--paper-ease),box-shadow .5s}
 .prep-slip:hover{box-shadow:6px 12px 0 #65051b06,0 18px 25px #452b1710}
}
.button:active{scale:.975;box-shadow:1px 1px 0 #65051b22}
.service-row{position:relative;overflow:hidden;transition:padding .3s var(--paper-ease),background .2s}
.service-no{position:relative;isolation:isolate}
.service-no:before{content:'';position:absolute;inset:-7px -3px;border:1px solid;border-radius:48% 51% 47% 53%;rotate:-12deg;opacity:0;scale:1.3;transition:scale .45s var(--paper-ease),opacity .2s}
.service-row[aria-pressed="true"] .service-no:before{opacity:.65;scale:1}
.notebook-page{perspective:1000px}
.notebook-page:before{content:'';position:absolute;inset:14px -8px -12px 5px;background:var(--cream) url('assets/paper-grain.svg');border-right:1px solid #65051b17;border-bottom:1px solid #65051b17;rotate:1.5deg;z-index:-1;box-shadow:3px 5px 0 #65051b04}
.notebook-page.page-turn{animation:turn-notebook .62s var(--paper-ease)}
@keyframes turn-notebook{0%{filter:brightness(.97);translate:0 0;rotate:0deg}35%{translate:5px -9px;rotate:1deg}100%{filter:none;translate:0 0;rotate:0deg}}
.brake-plate>img{transition:opacity .25s,scale .8s var(--paper-ease);transform-origin:var(--inspect-x,50%) var(--inspect-y,50%)}
.brake-plate:hover>img{scale:1.025}
.annotation-lines path{stroke-dasharray:180;stroke-dashoffset:0}
.brake-plate.mark-part .annotation-lines path{animation:write-line .7s var(--paper-ease)}
@keyframes write-line{from{stroke-dashoffset:180}to{stroke-dashoffset:0}}
.pencil-check{display:block;transform-origin:50% 70%}
.inspection-note.note-changed .pencil-check{animation:pencil-tick .55s var(--paper-ease)}
@keyframes pencil-tick{0%{opacity:.2;transform:rotate(-28deg) scale(.5)}60%{transform:rotate(-8deg) scale(1.15)}100%{opacity:1;transform:rotate(-12deg) scale(1)}}
.symptom:has(input:checked) svg{animation:symptom-mark .55s var(--paper-ease)}
@keyframes symptom-mark{0%{opacity:.35;transform:translateY(2px) scale(.8)}65%{transform:translateY(-2px) scale(1.08)}100%{opacity:1;transform:none}}
.symptom:has(input:checked) .radio-mark{box-shadow:0 0 0 4px #f4ecda13}
.issue-input-wrap{position:relative}.issue-input-wrap:after{content:'';position:absolute;left:17px;right:17px;bottom:28px;border-bottom:1px solid var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--paper-ease);pointer-events:none;opacity:.35}
.issue-input-wrap:focus-within:after{transform:scaleX(1)}
.workbench{isolation:isolate;min-height:clamp(300px,34vw,475px)}
.bench-image-status{position:absolute;inset:0;display:grid;place-items:center;background:var(--blush);border:1px solid var(--rule);font-size:12px}
.bench-photo[hidden]{display:none!important}
.bench-photo{transform-origin:var(--bench-x,50%) var(--bench-y,50%);transition:scale 1s var(--paper-ease);border-radius:1px}
.workbench:hover .bench-photo{scale:1.008}
.workbench[data-image-state="loading"] .photo-caption,.workbench[data-image-state="error"] .photo-caption{display:none}
.workbench.scene-turn .bench-photo{animation:contact-print .7s var(--paper-ease)}
@keyframes contact-print{from{opacity:.25;clip-path:inset(0 0 8% 0);translate:0 9px}to{opacity:1;clip-path:inset(0);translate:0 0}}
.job-card{transform:rotate(calc(8deg + var(--card-r,0deg))) translateY(var(--card-y,0px));transition:transform .7s var(--paper-ease);transform-origin:80% 5%}
.workbench:hover .job-card{transform:rotate(calc(5deg + var(--card-r,0deg))) translateY(calc(-3px + var(--card-y,0px)))}
.job-card:before{content:'';position:absolute;left:30%;top:-8px;width:43%;height:20px;background:#f4ecda70;clip-path:polygon(2% 4%,99% 0,97% 96%,0 100%);rotate:-4deg}
.job-stamp.stamp-impact{animation:stamp-impact .56s var(--paper-ease)}
@keyframes stamp-impact{0%{opacity:0;scale:1.6;rotate:6deg}45%{opacity:.85;scale:.95;rotate:-2deg}70%{scale:1.03}100%{opacity:.78;scale:1;rotate:0deg}}
.process-panel.panel-change{animation:typed-note .4s ease-out}
@keyframes typed-note{from{opacity:.4;translate:0 5px}to{opacity:1;translate:0 0}}
.process-step:before{content:'';position:absolute;left:26px;right:26px;bottom:-14px;height:4px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--paper-ease);opacity:.3}
.process-step.is-active:before{transform:scaleX(1)}.process-step:first-child:before{left:0}.process-step:last-child:before{right:0}
.visit-prep{padding:62px var(--right) 64px var(--gutter);border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:8%}
.prep-heading>.mono{font-size:10px;max-width:270px;display:block;line-height:1.5}
.prep-heading h2{font-size:clamp(50px,5.6vw,80px);margin:26px 0 18px;line-height:.98}
.prep-heading p{font-size:15px;line-height:1.5;max-width:280px}
.prep-slip{position:relative;padding:25px 26px 20px;background:#f1d5cf url('assets/paper-grain.svg');box-shadow:5px 7px 0 #65051b06;border:1px solid #65051b25;rotate:.2deg;transform:rotate(1.2deg)}
.prep-clip{position:absolute;top:-22px;right:31px;width:15px;height:49px;border:2px solid #927664;border-radius:9px;rotate:10deg;box-shadow:1px 1px 0 #fff7,inset 1px 1px 0 #fff7}
.prep-clip:after{content:'';position:absolute;top:8px;left:3px;width:9px;height:29px;border:1px solid #927664;border-radius:6px;border-bottom:0}
.prep-slip-top{display:flex;justify-content:space-between;font-size:9px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.prep-check{position:relative;display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-bottom:1px solid #65051b2d;cursor:pointer}
.prep-check input{position:absolute;opacity:0;width:1px;height:1px;padding:0}
.prep-box{width:22px;height:22px;min-width:22px;border:1px solid var(--rule);margin-top:2px;transform:rotate(-2deg)}
.prep-box svg{width:26px;height:26px;position:relative;top:-6px;left:0;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.prep-box path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s var(--paper-ease)}
.prep-check input:checked+.prep-box path{stroke-dashoffset:0}
.prep-check:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:5px}
.prep-check strong{font-size:18px;display:block;line-height:1.2;margin-bottom:7px}
.prep-check small{display:block;font-size:12px;line-height:1.55;max-width:350px}
.prep-slip-bottom{display:flex;justify-content:space-between;gap:14px;align-items:center;padding-top:20px}
.prep-slip-bottom .note{font-size:27px;transform:rotate(-4deg)}.prep-slip-bottom .text-button{font-size:11px;white-space:nowrap}
.questions details{position:relative}.questions details:before{content:'';position:absolute;left:-12px;top:18px;bottom:18px;border-left:2px solid;scale:1 0;transform-origin:top;transition:scale .4s var(--paper-ease)}
.questions details[open]:before{scale:1 1}.questions details[open] p{animation:typed-note .4s ease-out}
.customer-copy{--tear:0;transform-origin:0 0;isolation:isolate}
.tear-line{height:30px}.tear-scissors{left:calc(3% + var(--tear)*85%)!important;transition:left .3s var(--paper-ease)}
.tear-tab{position:absolute;right:var(--right);top:-20px;z-index:4;background:var(--pink) url('assets/paper-grain.svg');border:1px solid var(--ink);box-shadow:2px 4px 0 #65051b1a;padding:10px 14px;display:flex;gap:9px;align-items:center;transform:rotate(4deg);touch-action:pan-y;transition:transform .3s var(--paper-ease);user-select:none}
.tear-tab>.mono{font-size:8px;letter-spacing:.07em}.tear-tab>span:first-child{font-size:20px;line-height:1}
.tear-tab:hover{transform:rotate(7deg) translateY(3px)}.tear-tab.is-pulling{transform:rotate(calc(4deg + var(--tear)*12deg)) translateY(calc(var(--tear)*28px))}
.tear-line>.mono{right:27%;font-size:8px;top:-5px}
.copy-details{transform-origin:0 0;transition:transform .45s var(--paper-ease),box-shadow .45s}
.customer-copy.is-pulling .copy-details{transform:translateY(calc(var(--tear)*7px)) rotate(calc(var(--tear)*.5deg))}
.customer-copy.copy-torn .copy-details{animation:tear-copy 1s var(--paper-ease)}
@keyframes tear-copy{0%{translate:0 0;rotate:0deg}30%{translate:6px 20px;rotate:1.4deg;filter:drop-shadow(-2px -4px 0 #65051b08)}65%{translate:-2px 5px;rotate:-.5deg}100%{translate:0 0;rotate:0deg;filter:none}}
.stub-field{transition:background .3s}.stub-field.copy-updated{animation:carbon-write .6s ease-out}
@keyframes carbon-write{0%{background:#65051b0d}100%{background:transparent}}
.status-stamp.ready{animation:stamp-impact .6s var(--paper-ease)}
.map-card:hover .map-pin{transform:translateY(-3px);transition:transform .3s var(--paper-ease)}
.map-card:hover .map-road{stroke-dashoffset:-15;transition:stroke-dashoffset 1s}
.prep-copy{margin-top:15px}.prep-copy p{font-size:13px}
.paper-margin-progress{position:absolute;top:0;left:33px;width:2px;height:calc(var(--page-progress)*100%);background:var(--ink);opacity:.28;pointer-events:none;z-index:22;transform-origin:top}
.footer-brand:hover{animation:ink-arrival .6s var(--paper-ease)}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.motion-paused .pencil-cursor,.motion-paused #pencil-trace{display:none!important}
.motion-paused,.motion-paused a,.motion-paused button,.motion-paused summary,.motion-paused label{cursor:auto}
.motion-paused button,.motion-paused a,.motion-paused summary,.motion-paused label{cursor:pointer}
.motion-paused .wordmark-letter,.motion-paused .wagon-wrap{transform:none!important;translate:none!important;rotate:0deg!important;opacity:1!important}
.motion-paused .js .reveal,.motion-paused .reveal{opacity:1!important;translate:none!important}
@media(max-width:1000px){.car-margin-note{top:66px}.car-margin-note .note{font-size:24px}.car-margin-note .mono{font-size:7px;max-width:150px}.visit-prep{gap:5%;padding-top:48px;padding-bottom:48px}.prep-slip{padding:22px 21px}.prep-heading h2{font-size:54px}.prep-check{gap:13px}.prep-check strong{font-size:16px}}
@media(max-width:800px){.car-margin-note{top:62px}.car-margin-note .note{font-size:23px}.car-margin-note .mono{font-size:6px}.hero-bottom{flex-wrap:wrap}.motion-toggle{margin-left:auto;font-size:7px}.hero-bottom>span:last-child{width:100%;text-align:right}.car-point{width:38px;height:38px;padding:6px}.car-point span{width:24px;height:24px;font-size:9px}.care-route{stroke-width:1.2}.paper-margin-progress{left:21px}.workbench{min-height:340px}.visit-prep{grid-template-columns:1fr;gap:35px}.prep-heading h2{font-size:59px;margin:20px 0 15px}.prep-heading p{max-width:none}.prep-slip{max-width:620px;width:100%;margin:auto}.prep-check strong{font-size:18px}.prep-check small{max-width:none}.notebook-page:before{inset:10px -2px -5px 2px}.tear-line>.mono{right:35%}}
@media(max-width:640px){.paper-glyph svg{width:25px;height:18px}.hero-stage{min-height:245px;height:62vw}.wagon-wrap{bottom:34px}.hero-handnote{right:7%;top:10px}.hero-side-note{top:14px}.car-margin-note{top:52px;left:1px;max-width:49%}.car-margin-note .note{font-size:24px;max-width:150px}.car-margin-note .mono{font-size:6px;line-height:1.5;max-width:145px}.car-margin-note:after{bottom:-3px}.hero-caption{bottom:3px}.car-point{width:36px;height:36px;padding:6px}.car-point:before{inset:3px}.car-point span{width:23px;height:23px;font-size:8px}.point-diagnostics{left:58%;top:28%}.point-maintenance{left:75%;top:29%}.point-starting{left:93%;top:49%}.hero-bottom{row-gap:5px}.hero-bottom>span:last-child{max-width:none;font-size:6px}.motion-toggle{font-size:6px}.hero-stage .care-route{opacity:.42}.care-ring{stroke-width:1.6}.workbench{min-height:270px}.job-card{right:9px}.visit-prep{padding:35px var(--right) 42px var(--gutter);gap:30px}.prep-heading>.mono{font-size:8px}.prep-heading h2{font-size:12vw;margin-top:20px}.prep-heading p{font-size:13px;max-width:260px}.prep-slip{padding:20px 17px 18px}.prep-slip-top{font-size:8px}.prep-check{padding:18px 0;gap:12px}.prep-check strong{font-size:16px}.prep-check small{font-size:11px}.prep-slip-bottom .note{font-size:22px}.prep-slip-bottom .text-button{font-size:10px}.prep-slip-bottom{gap:8px}.process-step:before{left:35px;right:0;bottom:5px;height:2px}.process-step:first-child:before{left:35px}.tear-tab{top:-17px;padding:8px 9px;right:18px}.tear-tab>.mono{font-size:6px}.tear-tab>span:first-child{font-size:17px}.tear-line>.mono{left:34px;right:auto;font-size:6px}.customer-copy{padding-top:40px}.prep-copy p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.pencil-cursor,#pencil-trace{display:none!important}.care-route,.care-ring{transition:none}.wordmark-letter,.wagon-wrap{animation:none;opacity:1}.paper-margin-progress{display:none}}
@media print{.visit-prep,.tear-tab,.pencil-cursor,#pencil-trace,.paper-margin-progress,.motion-toggle{display:none!important}.customer-copy{transform:none!important}.copy-details{transform:none!important;animation:none!important}.prep-copy{display:block!important}.prep-copy[hidden]{display:none!important}}

.wordmark-letter{animation-fill-mode:backwards}
.pencil-enabled dialog,.pencil-enabled dialog *,.pencil-enabled.pencil-visible dialog,.pencil-enabled.pencil-visible dialog *{cursor:auto}
.pencil-enabled dialog button,.pencil-enabled.pencil-visible dialog button{cursor:pointer}

@media(min-width:801px){.car-margin-note{left:43%;top:12px}.car-margin-note .note{max-width:310px;white-space:nowrap}.car-margin-note .mono{max-width:280px}}
.car-margin-note.panel-change,.prep-slip.panel-change,.copy-details.panel-change{animation:typed-note .4s ease-out}
@media(max-width:800px){.car-point{width:44px;height:44px;padding:10px}.car-point:before{inset:7px}}
@media(min-width:641px) and (max-width:1000px){
 .hero-stage{height:calc(36vw + 58px);min-height:308px}
 .car-margin-note{left:27%;top:18px;max-width:255px}
 .car-margin-note .note{font-size:24px;max-width:255px;white-space:nowrap}
 .car-margin-note .mono{max-width:220px;font-size:7px}
}
@media(min-width:1001px){.hero-stage{height:clamp(282px,calc(35.2vw + 42px),557px)}.car-margin-note{top:23px}}
@media(max-width:640px){
 .process-mobile-panel{min-width:0;padding:10px 0 8px}
 .process-mobile-panel .workbench{margin:12px 0 0}
 .process-mobile-panel .process-panel{padding:22px 0 20px;min-height:0}
 .process-steps[role="group"]{border-bottom:0}
 .process-steps[role="group"] .process-step[aria-expanded="true"]{border-bottom-color:transparent}
}
@media(forced-colors:active){
 .pencil-cursor,#pencil-trace,.paper-margin-progress{display:none!important}
 .pencil-enabled,.pencil-enabled *{cursor:auto!important}
 .pencil-enabled a,.pencil-enabled button,.pencil-enabled summary,.pencil-enabled label,.pencil-enabled select{cursor:pointer!important}
 .pencil-enabled input,.pencil-enabled textarea{cursor:text!important}
 .prep-box path,.care-trace,.annotation-lines path{stroke:CanvasText}
 .car-point span{border-color:ButtonText}.car-point[aria-pressed="true"] span{outline:2px solid Highlight}
}