/* YARDLINE / rails, ratchets, paper and the marks of a working yard. */
:root{--yard-spring:cubic-bezier(.18,.8,.25,1.16);--yard-land:cubic-bezier(.16,.8,.18,1)}
@media(hover:hover) and (pointer:fine){
  .site-shell,.yard-rail,.dialog{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 2v24l6-6 5 10 5-3-5-9h9Z' fill='%23003e2d' stroke='%23f5f4ed' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='m7 8 11 9h-7l-4 4Z' fill='%23ffd42a'/%3E%3C/svg%3E") 3 2,auto}
  :is(.site-shell,.yard-rail,.dialog) :is(a,button,summary,[role=button],label:has(input[type=checkbox])){cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='m18 2 13 7.5v15L18 32 5 24.5v-15Z' fill='%23ffd42a' stroke='%23003e2d' stroke-width='2'/%3E%3Cpath d='m18 10 6 3.5v7L18 24l-6-3.5v-7Z' fill='%23003e2d'/%3E%3Ccircle cx='18' cy='17' r='2' fill='%23f5f4ed'/%3E%3C/svg%3E") 18 17,pointer}
  :is(input:not([type=checkbox]),textarea){cursor:text}
  .button{transition:background .25s,color .25s,transform .35s var(--yard-land),box-shadow .35s}
  .button:hover{transform:translate(-2px,-3px);box-shadow:4px 4px 0 var(--yellow)}
  .button-yellow:hover{box-shadow:4px 4px 0 var(--blue)}
  .button:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--yellow)}
  .button .icon{transition:transform .55s var(--yard-spring)}
  .button:hover .icon{transform:translateX(7px)}
  .top-nav a{position:relative;border:0}
  .top-nav a:after{content:'';position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--blue);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--yard-land)}
  .top-nav a:hover:after{transform:scaleX(1);transform-origin:left}
}
button:focus-visible,a:focus-visible,summary:focus-visible{outline-color:var(--blue)}
.vehicles :is(button,a):focus-visible,.footer :is(button,a):focus-visible,.yard-rail :is(button,a):focus-visible,.menu-dialog :is(button,a):focus-visible{outline-color:var(--yellow)}
.hero-light{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 230px 190px at var(--light-x,65%) var(--light-y,45%),rgba(255,224,125,.16),transparent 75%);mix-blend-mode:screen;opacity:0;transition:opacity .55s}
.hero-photo.under-light .hero-light{opacity:1}
.hero-seam{position:absolute;bottom:0;left:0;right:0;height:7px;z-index:7;overflow:hidden;pointer-events:none;background:var(--green)}
.hero-seam i{display:block;width:30%;height:100%;background:repeating-linear-gradient(120deg,var(--yellow) 0 15px,var(--green) 15px 25px);transform:translateX(calc(170% + var(--seam-shift,0px)));transition:transform 1.15s var(--yard-land),width .55s}
.hero[data-attention=engine] .hero-seam i{transform:translateX(115%);width:45%}
.hero[data-attention=brakes] .hero-seam i{transform:translateX(230%);width:30%}
.hotspot>span:first-child{position:relative}
.hotspot>span:first-child:after{content:'';position:absolute;inset:-8px;border:1px solid var(--yellow);border-radius:50%;transform:scale(.7);opacity:0;transition:opacity .4s,transform .65s var(--yard-land)}
.hotspot:is(:hover,:focus-visible)>span:first-child:after{opacity:.75;transform:scale(1.17)}
.hero-photo-caption{transition:transform .5s var(--yard-spring)}
.hero:has(.hotspot:is(:hover,:focus-visible)) .hero-photo-caption{transform:translateY(-4px) rotate(-1deg)}
.ribbon-cell:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(125deg,transparent 0 14px,currentColor 14px 15px);opacity:0;clip-path:polygon(72% 0,100% 0,100% 100%,40% 100%);transform:translateX(35px);transition:transform .7s var(--yard-land),opacity .5s;pointer-events:none}
.ribbon-cell:is(:hover,:focus-visible):before{opacity:.09;transform:translateX(0)}
.ribbon-cell:is(:hover,:focus-visible) h2{transform:translate(7px,-3px)}
.ribbon-cell p{transition:transform .65s var(--yard-land)}
.ribbon-cell:is(:hover,:focus-visible) p{transform:translateX(4px)}

/* The service directory is a cabinet, and the dial is its visible index. */
.repair-intro{position:relative}
.service-board-list{perspective:1200px}
.service-row{position:relative;isolation:isolate;transition:background .3s,transform .6s var(--yard-spring),padding .45s var(--yard-land),box-shadow .45s;min-height:94px}
.service-row:before{content:'';position:absolute;left:-8px;top:0;bottom:0;width:7px;opacity:0;transform:scaleY(.65);background:repeating-linear-gradient(135deg,var(--green) 0 5px,var(--yellow) 5px 10px);transition:opacity .25s,transform .4s}
.service-row:after{content:'';position:absolute;right:52px;top:50%;width:24px;height:7px;border:1px solid currentColor;border-radius:1px;opacity:0;transform:translate(8px,-50%);transition:transform .5s var(--yard-land),opacity .3s}
.service-row:is(:hover,:focus-visible){background:var(--yellow);transform:translateX(-10px);padding-left:18px;padding-right:16px;box-shadow:6px 5px 0 rgba(0,62,45,.14)}
.service-row:is(:hover,:focus-visible):before{opacity:1;transform:scaleY(1)}
.service-row:is(:hover,:focus-visible):after{opacity:.65;transform:translate(0,-50%)}
.service-row:is(:hover,:focus-visible)>.icon{transform:rotate(90deg)}
.service-row.is-indexed .service-index{color:var(--green);background:var(--yellow)}
.service-index{padding:5px 6px;margin-left:-6px;transition:background .3s}
.service-row>span:nth-child(2){padding-right:25px}
.service-dialog{position:fixed;inset:0 0 0 auto;margin:0;height:100svh;max-height:100svh;width:min(670px,94vw);max-width:94vw;border-left:10px solid var(--yellow);box-shadow:-14px 0 0 rgba(0,24,17,.13)}
.service-dialog[open]{animation:drawer-in .6s var(--yard-land)}
.service-dialog-body{position:relative;overflow:hidden;isolation:isolate;padding-top:49px;padding-bottom:58px;min-height:calc(100svh - 62px)}
.service-dialog-body>*{position:relative;z-index:1}
.service-drawer-mark{position:absolute;right:24px;top:0;z-index:0;font:700 clamp(160px,20vw,260px)/1 YardDisplay,sans-serif;letter-spacing:-.07em;color:var(--green);opacity:.05;pointer-events:none}
.drawer-edge{height:12px;margin-top:34px;background:repeating-linear-gradient(125deg,var(--green) 0 12px,var(--yellow) 12px 25px);opacity:.85}
.service-dialog-body>h3{margin-top:36px}
.service-dialog .dialog-top{background:var(--green)}
.service-dialog .dialog-top>button{transition:transform .5s var(--yard-spring);color:var(--yellow)}
.service-dialog .dialog-top>button:hover{transform:rotate(90deg)}
@keyframes drawer-in{from{transform:translateX(90px);opacity:0}to{transform:translateX(0);opacity:1}}

.fleet-plan{position:relative;perspective:1100px}
.plan-ticket{z-index:2;transform-origin:45% 18%;box-shadow:12px 14px 0 rgba(0,0,0,.14),0 5px 9px rgba(0,0,0,.12)}
.plan-ticket:hover{transform:rotate(-2deg)}
.ticket-backpapers{position:absolute;inset:6px 15px 5px 40px;pointer-events:none}
.ticket-backpapers i{position:absolute;inset:0;background:#e2e5d9;border:1px solid rgba(0,62,45,.2);transform:rotate(1.4deg) translate(4px,9px)}
.ticket-backpapers i+ i{transform:rotate(3.6deg) translate(6px,12px);background:var(--yellow);z-index:-1}
.ticket-top{position:relative;padding-bottom:17px;flex-wrap:wrap;gap:9px;min-height:40px}
.ticket-top>span:first-child{margin-right:25px}
.ticket-top>span:nth-child(2){font-family:YardDisplay,sans-serif;font-size:20px;letter-spacing:-2px;line-height:.7;margin-left:auto}
.ticket-stamp{font:700 9px/1.2 YardSans,Arial,sans-serif!important;letter-spacing:1px!important;color:var(--blue);border:1px solid var(--blue);padding:4px 6px;transform:rotate(-3deg);background:var(--cream);margin-left:0!important;white-space:nowrap}
.plan-ticket[data-plan=fleet] .ticket-stamp{background:var(--blue);color:var(--cream)}
.plan-ticket h3{min-height:76px}
.plan-ticket>p{min-height:84px}
.ticket-bottom{position:relative;border-top:1px dashed rgba(0,62,45,.3);margin-top:20px}
.barcode{transition:transform .55s var(--yard-spring)}
.plan-ticket:hover .barcode{transform:scaleX(1.08);transform-origin:right}
.fleet-toggle button{position:relative;overflow:hidden}
.fleet-toggle button:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--yard-land)}
.fleet-toggle button:is(:hover,:focus-visible):after{transform:scaleX(1)}

.vehicle-drawing{overflow:hidden;padding-top:44px}
.vehicle-shape,.drawing-road{animation:none!important}
.rig-wheel{transform-box:view-box}
.vehicle-bay-marker{position:absolute;top:4px;right:3%;font-size:9px;letter-spacing:1.2px;display:flex;gap:8px;align-items:center}
.vehicle-bay-marker i{height:6px;width:6px;background:var(--yellow);display:block}
.vehicle-switch>button{transition:background .25s,color .25s,padding .4s var(--yard-land)}
.vehicle-switch>button>.icon{transition:transform .6s var(--yard-spring)}
.vehicle-switch>button[aria-pressed=true]>.icon{transform:rotate(45deg)}
.vehicle-switch>button:is(:hover,:focus-visible):not([aria-pressed=true])>.icon{transform:translate(3px,-3px)}
.process-track{padding-bottom:19px}
.process-track>button:last-of-type{border-right:0;margin-right:0}
.vehicle-switch>button:last-of-type{border-right:0}
.process-track:after{transition:transform .8s var(--yard-spring);height:8px}
.process-job-tag{position:absolute;bottom:-7px;left:var(--job-position,12.5%);z-index:1;background:var(--green);color:var(--yellow);width:38px;height:30px;display:grid;place-items:center;transform:translateX(-50%) rotate(-3deg);transition:left .8s var(--yard-spring);border:3px solid var(--cream)}
.process-job-tag>.icon{width:19px;height:19px;stroke-width:1.6}
.step-number{transition:color .35s,transform .6s var(--yard-spring)}
.process-track button[aria-pressed=true] .step-number{transform:translateY(-4px)}
.process-detail{padding-top:37px}
.worklight-switch{position:absolute;z-index:4;right:30px;top:27px;display:flex;align-items:center;gap:11px;padding:12px 14px;background:var(--green);color:var(--cream);border:1px solid rgba(245,244,237,.55);text-align:left;box-shadow:4px 5px 0 rgba(0,0,0,.15)}
.worklight-switch>span:last-child{font:700 9px/1.35 YardSans,sans-serif;letter-spacing:1.2px}
.worklight-switch small{display:block;font-size:8px;letter-spacing:1px;opacity:.65;margin-top:4px}
.worklight-rocker{width:21px;height:32px;border:1px solid var(--cream);padding:2px;background:#002a1f;perspective:100px}
.worklight-rocker i{display:block;width:100%;height:100%;background:linear-gradient(to bottom,var(--cream) 0 48%,#b7bdb3 49% 52%,#738478 53%);transform:rotateX(15deg);transition:transform .35s,background .35s;box-shadow:0 -2px 1px rgba(0,0,0,.7)}
.worklight-switch[aria-pressed=true] .worklight-rocker i{transform:rotateX(-15deg);background:linear-gradient(to bottom,#b49a2e 0 48%,#e8bb1e 49% 52%,var(--yellow) 53%);box-shadow:0 2px 1px rgba(0,0,0,.7)}
.worklight-switch[aria-pressed=true] small{color:var(--yellow);opacity:1}
.worklight-pool{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 270px 220px at var(--light-x,66%) var(--light-y,57%),rgba(255,229,153,.29),rgba(255,221,118,.08) 40%,transparent 73%);mix-blend-mode:screen;pointer-events:none;opacity:0;transition:opacity .4s}
.worklight-on .worklight-pool{opacity:1}
.workshop-corner{transform-origin:85% 20%;transition:transform .65s var(--yard-spring)}
.workshop-picture:has(.worklight-switch:hover) .workshop-corner{transform:rotate(-1deg) translateY(-3px)}
.faq summary{transition:padding .4s var(--yard-land),color .3s}
.faq summary:is(:hover,:focus-visible){padding-left:11px}
.faq details[open]{border-bottom-color:var(--blue)}
.faq-plus{transition:transform .55s var(--yard-spring)}
.visit-photo-sign{transform-origin:80% 0;transition:transform .8s var(--yard-spring)}
.visit-photo:hover .visit-photo-sign{transform:rotate(2deg) translateY(-3px)}
.yard-arrival{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;padding:3px 0 25px;margin-bottom:31px;border-bottom:1px solid rgba(245,244,237,.3)}
.arrival-track{position:relative;height:55px;border-bottom:2px solid var(--yellow);overflow:hidden}
.arrival-truck{position:absolute;bottom:4px;right:12%;width:75px;color:var(--yellow)}
.arrival-truck>.icon{width:75px;height:40px;stroke-width:1.5}
.arrival-stop{position:absolute;right:7%;bottom:-2px;width:17px;height:17px;border-left:3px solid var(--yellow);border-top:3px solid var(--yellow);transform:skewX(-10deg)}
.arrival-words{font:700 clamp(20px,2.8vw,47px)/1 YardDisplay,sans-serif;letter-spacing:-.05em;color:var(--yellow);padding-bottom:2px}
html[data-motion=on] .yard-arrival:not(.has-arrived) .arrival-truck{transform:translateX(-380px)}
html[data-motion=on] .yard-arrival.has-arrived .arrival-truck{animation:yard-park 1.3s var(--yard-land) both}
html[data-motion=on] .yard-arrival.has-arrived .arrival-stop{animation:stop-settle 1.6s var(--yard-land) both}
@keyframes yard-park{0%{transform:translate(-380px,0)}75%{transform:translate(3px,1px)}90%{transform:translate(-1px,-1px)}100%{transform:translate(0,0)}}
@keyframes stop-settle{0%,60%{transform:translateX(-30px) skewX(-10deg)}85%{transform:translateX(3px) skewX(-10deg)}100%{transform:translateX(0) skewX(-10deg)}}
.back-wheel{width:22px;height:22px;transition:transform .8s var(--yard-land);display:block}
.back-wheel>svg{fill:none;stroke:var(--yellow);stroke-width:1.5;width:100%;height:100%}
.back-top:hover .back-wheel{transform:rotate(-210deg)}
.yard-paused *{animation-play-state:paused!important}

@media(min-width:1900px){.service-row{min-height:109px}.worklight-switch{top:38px;right:40px;padding:17px 20px}.worklight-switch>span:last-child{font-size:12px}.worklight-switch small{font-size:10px}.ticket-stamp{font-size:11px!important}.plan-ticket>p{min-height:64px}.yard-arrival{padding-bottom:34px;margin-bottom:40px}}
@media(max-width:1100px){.service-row:after{display:none}.ticket-backpapers{left:33px;right:0}.ticket-top>span:first-child{margin-right:5px}.ticket-top{font-size:8px}.ticket-stamp{font-size:7px!important}.plan-ticket>p{min-height:94px}}
@media(max-width:820px){.worklight-switch{right:18px;top:19px;padding:10px 11px;gap:8px}.worklight-switch>span:last-child{font-size:8px;letter-spacing:.7px}.worklight-rocker{width:18px;height:28px}.service-row{min-height:91px}.arrival-words{font-size:23px}}
@media(max-width:700px){
  .hero-seam{height:5px}
  .hero-light{display:none}




  .repair-stamp{display:none}
  .service-row{min-height:88px}
  .service-row:is(:hover,:focus-visible){transform:translateX(-4px);padding-left:10px;padding-right:10px;box-shadow:4px 4px 0 rgba(0,62,45,.14)}
  .service-row>span:nth-child(2){padding-right:0}
  .service-dialog{width:calc(100vw - 12px);max-width:calc(100vw - 12px);border-left-width:7px;max-height:100svh}
  .service-dialog-body{padding:34px 23px 40px;min-height:calc(100svh - 55px)}
  .service-drawer-mark{font-size:190px;right:15px;top:10px}
  .drawer-edge{height:9px}
  .ticket-backpapers{inset:0 5px}
  .ticket-top{font-size:8px;gap:8px}
  .ticket-top>span:nth-child(2){display:none}
  .ticket-stamp{font-size:8px!important;margin-left:auto!important}
  .plan-ticket>p{min-height:80px}
  .plan-ticket h3{min-height:67px}
  .vehicle-drawing{padding-top:28px}
  .vehicle-bay-marker{top:0;font-size:7px}
  .process-job-tag{width:30px;height:26px;bottom:-6px}
  .process-job-tag>.icon{width:16px;height:16px}
  .process-detail{padding-top:32px}
  .worklight-switch{top:auto;bottom:121px;right:18px;padding:10px 12px}
  .worklight-pool{background:radial-gradient(ellipse 210px 260px at var(--light-x,65%) var(--light-y,59%),rgba(255,229,153,.27),rgba(255,221,118,.08) 40%,transparent 73%)}
  .yard-arrival{grid-template-columns:1fr;gap:17px;padding-bottom:23px;margin-bottom:26px}
  .arrival-track{height:45px}
  .arrival-words{font-size:30px;white-space:normal}
  .arrival-truck,.arrival-truck>.icon{width:64px}
  .back-wheel{width:19px;height:19px}
}
html[data-motion=off] .hero-light{opacity:0!important}
html[data-motion=off] .yard-arrival .arrival-truck{transform:none}
@media(prefers-reduced-motion:reduce){.hero-light{display:none}.yard-arrival .arrival-truck{transform:none!important}.worklight-pool{background-position:center}.service-dialog[open]{animation:none}}
@media(forced-colors:active){.site-shell,.yard-rail,.dialog,.site-shell :is(a,button,summary),.yard-rail :is(a,button,summary),.dialog :is(a,button,summary){cursor:auto}.hero-light,.worklight-pool,.hero-seam,.ticket-backpapers{display:none}.service-row{border:1px solid ButtonText}.worklight-switch{border:1px solid ButtonText}}