/* The yard has a breeze. Paper, cloth, graphite and painted metal share its rhythm. */
:root{--wind:0;--wind-y:0}
/* Keep the yard's native orange-on-paper scrollbar, including inner scrollers. */
@supports not selector(::-webkit-scrollbar){
 html,body,dialog,textarea,.folio-thumbs{scrollbar-color:#cb582b #efe3c8;scrollbar-width:thin}
}
@supports selector(::-webkit-scrollbar){
 /* Standard non-auto values take precedence over the WebKit thumb states. */
 html,body,dialog,textarea,.folio-thumbs{scrollbar-color:auto;scrollbar-width:auto}
 ::-webkit-scrollbar{width:10px;height:10px}
 ::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:#efe3c8}
 ::-webkit-scrollbar-thumb{background:#cb582b;border:2px solid #efe3c8;border-radius:1px}
 ::-webkit-scrollbar-thumb:hover{background:#a84220}
 ::-webkit-scrollbar-thumb:active{background:#183c2a}
}
/* Preserve the standard path if Firefox accepts a compatibility selector. */
@supports(-moz-appearance:none){
 html,body,dialog,textarea,.folio-thumbs{scrollbar-color:#cb582b #efe3c8;scrollbar-width:thin}
}
@media(forced-colors:active){
 html,body,dialog,textarea,.folio-thumbs{scrollbar-color:auto;scrollbar-width:auto;forced-color-adjust:auto}
 ::-webkit-scrollbar,::-webkit-scrollbar-track,::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active,::-webkit-scrollbar-corner{all:revert}
}
.yard-wind{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.8}
.hero-copy{z-index:2}.hero-stamp,.wind-handle{z-index:5}
.wind-handle{position:absolute;left:calc(var(--gutter) + 12px);bottom:100px;width:184px;height:166px;transform-origin:25% 80%;color:var(--green);text-align:left;isolation:isolate}
.wind-handle>svg{display:block;width:196px;height:134px;overflow:visible;transition:filter .3s}
.wind-handle>span{font:italic 17px/1.1 Georgia,serif;display:block;transform:rotate(-5deg);margin:-3px 0 0 18px;white-space:nowrap}
.wind-handle:after{content:"";position:absolute;left:30px;right:0;bottom:7px;height:2px;background:var(--orange);transform:rotate(-4deg) scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.wind-handle:hover:after,.wind-handle:focus-visible:after{transform:rotate(-4deg) scaleX(1)}
.wind-cloth path{stroke:#79462c;stroke-width:.7;stroke-linejoin:round}
.wind-cloth path:nth-child(odd){fill:#cc562a}.wind-cloth path:nth-child(even){fill:#efe1bb}
.hero-note{transform:rotate(calc(-7deg + var(--wind)*1.8deg));transform-origin:50% 0}
.hero-stamp{transform-origin:50% 8%;transform:rotate(calc(5deg + var(--wind)*2deg));transition:box-shadow .25s}
.hero-stamp::before{content:"";position:absolute;top:4px;left:50%;width:5px;height:5px;border-radius:50%;background:var(--orange);box-shadow:0 1px 0 #fff8}
.hero-stamp:hover{box-shadow:5px 7px 0 #183c2a28}.hero-stamp svg{transition:rotate .55s var(--ease)}
.hero-stamp:hover svg{rotate:-32deg}.hero-stamp.is-stamped{animation:work-stamp .8s var(--ease)}
.hero-stamp.is-stamped svg{animation:ratchet .7s ease-in-out}
@keyframes work-stamp{0%{scale:1;translate:0 0}25%{scale:.91;translate:0 5px;box-shadow:0 1px 0 #183c2a38}48%{scale:1.035;translate:0 -4px}70%{scale:.99;translate:0 1px}100%{scale:1;translate:0 0}}
@keyframes ratchet{25%{rotate:-70deg}55%{rotate:14deg}100%{rotate:0deg}}
.workshop-mark{display:inline-flex;position:relative;color:var(--orange);rotate:-16deg;transform-origin:70% 70%}.workshop-mark svg{width:37px;height:37px}.section-intro:hover .workshop-mark{animation:ratchet .7s var(--ease)}
.service-art{--art-x:0;--art-y:0;--art-r:0deg;transition:translate .55s var(--ease);translate:0 calc(var(--art-y)*-2px)}
.service-art:before{content:"";position:absolute;inset:9% 7%;z-index:-1;box-shadow:0 12px 20px #203b2b1b;transform:rotate(var(--art-r));transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.service-art img{transform:translate(calc(var(--art-x)*3px),calc(var(--art-y)*3px)) rotate(var(--art-r)) scale(1.005);transition:transform .6s var(--ease)}
.service:hover .service-art img,.service:focus-within .service-art img{transform:translate(calc(var(--art-x)*4px),calc(var(--art-y)*4px)) rotate(var(--art-r)) scale(1.035)}
.service-art .image-caption{transform:rotate(calc(1deg - var(--art-x)*2deg));transform-origin:16% 50%;transition:transform .6s var(--ease),box-shadow .6s var(--ease);pointer-events:none}
.service-art .service-number{pointer-events:none;transition:rotate .5s var(--ease),background .3s}
.service:focus-within .service-number,.service:hover .service-number{rotate:8deg;background:var(--orange)}
.art-open{position:absolute;inset:0;z-index:4;display:block;width:100%;height:100%;color:var(--paper-light)}
.art-open>span{position:absolute;right:9%;top:10%;width:43px;height:43px;border:1px solid var(--paper);border-radius:50%;display:grid;place-items:center;background:var(--green);font:26px Georgia,serif;transform:rotate(-8deg) scale(.9);transition:transform .5s var(--ease),background .25s;box-shadow:2px 3px 0 #193a2630}
.art-open:hover>span,.art-open:focus-visible>span{transform:rotate(8deg) scale(1.08);background:var(--orange)}
.art-open>span>svg{width:23px;height:23px;display:block}
.art-open:focus-visible{outline-offset:-15px}.image-caption{max-width:82%;pointer-events:none}
.yard-scene>.art-open{inset:8% auto 14% 5%;width:49%;height:auto}.yard-scene>.art-open>span{left:22px;right:auto;top:14px;background:var(--paper);color:var(--green);border-color:var(--green)}
.contact-art>.art-open{height:80%;width:90%}.contact-art-note{z-index:5;pointer-events:none;transition:rotate .65s var(--ease)}
.contact-art:hover .contact-art-note{rotate:2deg}
.yard-paper{transform-origin:90% 7%;transition:rotate .8s var(--ease)}.yard-scene:hover .yard-paper{rotate:-.8deg}
.service.is-added .service-number{animation:ticket-stamp .65s var(--ease)}
.service.is-added .image-caption::after{content:" ✓";color:var(--orange);font-weight:700}
.add-service svg{transition:rotate .4s var(--ease)}.add-service[aria-pressed=true] svg{rotate:135deg}
.ticket-flight{position:fixed;left:0;top:0;width:52px;height:62px;z-index:1004;pointer-events:none;display:none;align-items:center;justify-content:center;gap:2px;background:var(--paper-light);border:1px solid var(--green);box-shadow:3px 5px 0 #183c2a22;clip-path:polygon(0 0,100% 0,100% 92%,90% 100%,80% 92%,70% 100%,60% 92%,50% 100%,40% 92%,30% 100%,20% 92%,10% 100%,0 92%)}
.ticket-flight svg{width:22px;height:22px}.ticket-flight span{color:var(--orange)}
.floating-ticket{transition:background .3s,transform .4s var(--ease),box-shadow .4s}
.floating-ticket.is-arrived{animation:ticket-stamp .5s var(--ease)}
@keyframes ticket-stamp{0%,100%{scale:1}40%{scale:.85;rotate:-6deg}70%{scale:1.08;rotate:3deg}}
.process-steps{--process-progress:0}.process-steps:after{content:"";position:absolute;left:0;right:0;top:20px;height:2px;background:var(--orange);transform:scaleX(var(--process-progress));transform-origin:left;pointer-events:none;z-index:0}
.process-steps li{z-index:1}.process-steps li>span{transition:background .4s,color .4s,transform .6s var(--ease)}
.process-steps li.is-current>span{background:var(--orange);color:var(--paper-light);transform:rotate(8deg)}
.process-steps li:hover>span{transform:rotate(-14deg) scale(1.12)}
.mini-yard{position:relative;width:min(100%,460px);height:146px;margin-top:35px;overflow:hidden;isolation:isolate}
.yard-fleet{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px 8px;padding:10px 4px 23px;position:relative;z-index:1}
.yard-unit{height:39px;position:relative;border-bottom:1px solid #183c2a34}
.yard-unit:after{content:"";position:absolute;height:8px;bottom:-1px;left:-5px;border-left:1px solid #183c2a44;transform:rotate(25deg)}
.yard-unit svg{width:100%;height:42px;overflow:visible;transform:translateX(-400px);opacity:0;transition:transform .9s var(--ease),opacity .45s;transition-delay:calc(var(--unit)*42ms)}
.yard-unit.is-present svg{transform:translateX(0);opacity:1}
.yard-unit:nth-child(even) .mini-cab{fill:var(--paper-light)}
.yard-lane{position:absolute;left:0;right:0;top:53px;border-bottom:1px dashed #183c2a55}
.yard-hand{position:absolute;bottom:1px;left:6px;font:italic 17px Georgia,serif;rotate:-3deg}.yard-hand-arrow{position:absolute;bottom:-3px;right:2%;width:60px;height:35px;fill:none;stroke:var(--green);stroke-width:1.5}
.fleet-ticket{transform-origin:50% 6%;transition:rotate .7s var(--ease)}.fleet-ticket.is-changing{animation:ticket-shuffle .6s var(--ease)}
@keyframes ticket-shuffle{0%{rotate:0deg}33%{rotate:-2deg;translate:0 -3px}66%{rotate:1deg}100%{rotate:0deg;translate:0 0}}
.fleet-response{transition:opacity .2s}.inquiry-pencil{transition:translate .7s var(--ease),rotate .7s var(--ease)}
.inquiry-sheet:focus-within .inquiry-pencil{translate:0 22px;rotate:-9deg}.inquiry-sheet:focus-within{box-shadow:9px 14px 0 #1c3a271c}
.inquiry-sheet{transition:box-shadow .6s}
.text-link:active{translate:1px 1px}.primary-nav>a[aria-current=location]::after{transform:scaleX(1)}
.pencil-cursor{position:fixed;left:0;top:0;width:34px;height:40px;z-index:2000;pointer-events:none;display:none;transform:translate3d(-100px,-100px,0)}
.pencil-cursor svg{width:34px;height:40px;transform-origin:3px 3px;transition:rotate .2s,scale .15s}.pencil-cursor>span{position:absolute;left:12px;top:14px;opacity:0;font:9px Job,monospace;transition:opacity .2s;color:var(--green);white-space:nowrap}
.pencil-cursor.is-link svg{rotate:-16deg;scale:1.1}.pencil-cursor.is-down svg{scale:.82;rotate:7deg}
/* Component rules share this token so later, more specific styles cannot expose
   a second native hand. Without a working cursor controller they keep the native fallback. */
:where(a[href],button,summary,label,select,input[type=checkbox],input[type=radio],input[type=range],input[type=button],input[type=submit],input[type=reset],input[type=color],input[type=file],[role=button],[role=link],[role=tab],[role=checkbox],[role=radio],[role=switch],[role=menuitem]){cursor:var(--crosswind-control-cursor,pointer)}
:where(input:not([type]),input[type=text],input[type=search],input[type=tel],input[type=url],input[type=email],input[type=password],input[type=number],textarea,[contenteditable]:not([contenteditable=false]),[role=textbox]){cursor:text}
@media(hover:hover) and (pointer:fine) and (min-width:701px) and (forced-colors:none){
 body.cursor-ready{--crosswind-control-cursor:none;cursor:none}
 body.cursor-ready .pencil-cursor{display:block}
 body.cursor-ready:has(:disabled:hover) .pencil-cursor{display:none}
}
.folio-dialog{width:min(1320px,calc(100vw - 72px));max-width:none;max-height:calc(100dvh - 52px);overflow:auto;border:0;padding:24px 30px 26px;background:var(--paper-light);color:var(--green);box-shadow:0 20px 100px #081b1580;transform:rotate(-.45deg)}
.folio-dialog::backdrop{background:rgba(13,36,25,.88);backdrop-filter:blur(8px)}
.folio-dialog[open]{animation:folio-open .6s var(--ease)}
@keyframes folio-open{from{opacity:0;transform:translateY(35px) rotate(2deg)}to{opacity:1;transform:translateY(0) rotate(-.45deg)}}
.folio-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:20px;font:10px Job,monospace;letter-spacing:.12em}
.folio-close{width:42px;height:42px;border:1px solid var(--green);border-radius:50%;font:30px/1 Georgia,serif;transition:rotate .3s,background .3s,color .3s}.folio-close:hover{rotate:90deg;background:var(--green);color:var(--paper-light)}
.folio-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(230px,1fr);gap:32px;align-items:center}
.folio-stage{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:3/2;background:#e8ddc1;touch-action:pan-y}
.folio-stage>img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform .8s var(--ease),opacity .2s;transform-origin:var(--zoom-x,50%) var(--zoom-y,50%);will-change:transform}
.folio-stage.is-zoomed{touch-action:none}.folio-stage.is-zoomed>img{transform:scale(1.85)}
.folio-stage.is-loading>img{opacity:0;visibility:hidden}.folio-stage.has-error>img{opacity:0;visibility:hidden}.folio-image-error{position:absolute;inset:25%;font-size:16px;place-content:center;text-align:center}.folio-image-error[hidden]{display:none}
.folio-zoom{position:absolute;bottom:14px;left:14px;background:var(--paper-light);padding:10px 12px;font:11px Job,monospace;display:flex;gap:18px;align-items:center;box-shadow:3px 4px 0 #183c2a20;min-height:42px}.folio-zoom span{font-size:22px;line-height:1;color:var(--orange)}
.folio-number{font:11px Job,monospace;color:var(--orange);letter-spacing:.1em}.folio-copy h2{font:700 clamp(34px,4.2vw,62px)/.98 var(--display);letter-spacing:-.07em;margin:18px 0 21px}.folio-copy>p{font-size:16px;line-height:1.6;max-width:32ch}.folio-caption{display:block;font:italic 20px/1.3 Georgia,serif;color:var(--orange);margin:24px 0 30px;transform:rotate(-3deg)}
.folio-copy .text-link{font-size:12px;gap:10px}.folio-bottom{display:flex;align-items:center;gap:24px;margin-top:23px;padding-top:18px;border-top:1px dashed var(--rule)}
.folio-thumbs{position:relative;display:flex;gap:9px;justify-content:center;flex:1;min-width:0}.folio-thumb{position:relative;width:75px;height:51px;border:2px solid transparent;transform:rotate(0deg);transition:transform .4s var(--ease),border-color .2s,opacity .2s;opacity:.65}
.folio-thumb img{width:100%;height:100%;object-fit:cover}.folio-thumb span{position:absolute;left:-4px;bottom:-4px;background:var(--paper-light);font:9px Job,monospace;padding:2px 4px;color:var(--green)}
.folio-thumb[aria-pressed=true]{border-color:var(--orange);transform:rotate(-4deg) translateY(-4px);opacity:1}.folio-thumb:hover{opacity:1;transform:translateY(-3px)}
.folio-step{width:44px;height:44px;border:1px solid var(--green);flex-shrink:0;font-size:25px;transition:background .3s,color .3s}.folio-step:hover{background:var(--orange);color:var(--paper-light);border-color:var(--orange)}
body.folio-open{overflow:hidden}.folio-open .floating-ticket{visibility:hidden}.footer-truck-button:disabled{opacity:1}
@media(hover:hover) and (pointer:fine) and (min-width:701px) and (forced-colors:none){
 /* A modal is in the browser's top layer, above the DOM cursor. Use the same
    artwork and 3,3 hotspot there, including controls added after page load. */
 body.cursor-ready dialog,body.cursor-ready dialog::backdrop{--crosswind-control-cursor:url('assets/cursor-pointer.svg') 3 3,auto;cursor:var(--crosswind-control-cursor)}
 body.cursor-ready:has(dialog[open]) .pencil-cursor{display:none}
}
.footer-road.is-running .truck-wheels{animation:wheel-rattle .24s linear infinite}
#footer-truck.is-driving{animation:yard-roundtrip 6s linear forwards;transform-origin:center}
@keyframes yard-roundtrip{0%{transform:translateX(calc(var(--truck-progress,0)*20px)) scaleX(1)}6%{transform:translateX(calc(var(--truck-progress,0)*20px - 8px)) rotate(-1.5deg) scaleX(1)}39%{transform:translateX(min(47vw,720px)) scaleX(1)}49%{transform:translateX(min(47vw,720px)) scaleX(1)}53%{transform:translateX(min(47vw,720px)) scaleX(.05)}57%{transform:translateX(min(47vw,720px)) scaleX(-1)}83%{transform:translateX(calc(var(--truck-progress,0)*20px)) scaleX(-1)}90%{transform:translateX(calc(var(--truck-progress,0)*20px)) scaleX(-1)}94%{transform:translateX(calc(var(--truck-progress,0)*20px)) scaleX(.05)}98%,100%{transform:translateX(calc(var(--truck-progress,0)*20px)) scaleX(1)}}
@keyframes wheel-rattle{50%{translate:0 -.5px}}
body.motion-paused .yard-wind{opacity:0}body.motion-paused .hero-note{transform:rotate(-7deg)}body.motion-paused .hero-stamp{transform:rotate(5deg)}
body.motion-paused .service-art,body.motion-paused .service-art img,body.motion-paused .image-caption{transition:none;translate:none}
body.motion-paused .service:hover .service-art img{transform:none}body.motion-paused .yard-unit svg,body.motion-paused .folio-stage>img{transition:none}
body.motion-paused .yard-paper,body.motion-paused .contact-art-note{rotate:0deg}body.motion-paused .pencil-cursor svg{transition:none}
@media(min-width:1700px){.wind-handle{bottom:120px;left:calc(var(--gutter) + 40px);scale:1.08}}
@media(max-width:1100px) and (min-width:701px){.wind-handle{bottom:90px;left:var(--gutter);scale:.88;transform-origin:left bottom}.folio-dialog{padding:20px}.folio-layout{gap:22px;grid-template-columns:1.6fr 1fr}.folio-copy h2{font-size:40px}.folio-copy>p{font-size:14px}.folio-caption{font-size:18px;margin:18px 0}.folio-thumb{width:62px;height:45px}.folio-bottom{gap:15px}}
@media(max-width:700px){
 .wind-handle{left:13px;bottom:117px;width:142px;height:140px;scale:.8;transform-origin:left bottom}.wind-handle>svg{width:164px;height:112px}.wind-handle>span{font-size:16px;margin-left:14px}.yard-wind{top:290px;height:calc(100% - 290px)}
 .wind-handle:before{content:"";position:absolute;inset:0 -8px -10px 0;background:var(--paper);opacity:.94;z-index:-1;transform:rotate(-4deg);clip-path:polygon(2% 1%,98% 0,100% 97%,54% 100%,0 98%)}.wind-handle>span{font-size:14px;margin-left:9px}.wind-handle>svg{margin-left:-1px}
 .workshop-mark{grid-row:1/3;margin-top:6px}.workshop-mark svg{width:28px;height:28px}.hero-stamp{min-height:44px}.art-open>span{width:39px;height:39px;font-size:24px;right:10%;top:10%}
 .yard-scene>.art-open{width:92%;height:calc(100vw * .6667 - 30px);top:15px;left:4%;bottom:auto}.yard-scene>.art-open>span{left:auto;right:22px;top:12px}.contact-art>.art-open{height:90%;width:100%}
 .process-steps:after{display:none}.mini-yard{max-width:420px;height:140px;margin-top:27px}.yard-unit{height:34px}.yard-unit svg{height:36px}.yard-fleet{gap:13px 7px}.yard-hand{font-size:16px}.fleet-copy{padding-bottom:9px}
 .folio-dialog{width:calc(100vw - 20px);padding:13px 14px 18px;max-height:calc(100dvh - 24px);transform:none}.folio-dialog[open]{animation:folio-open-mobile .4s var(--ease)}.folio-top{font-size:8px;letter-spacing:.07em;margin-bottom:14px;padding-bottom:11px}.folio-close{width:38px;height:38px;font-size:27px}.folio-layout{grid-template-columns:1fr;gap:21px}.folio-stage{aspect-ratio:1.35;max-height:45dvh}.folio-copy{position:relative;padding:0 4px}.folio-copy h2{font-size:39px;max-width:85%;margin:9px 0 12px}.folio-copy>p{font-size:14px;max-width:100%;line-height:1.5}.folio-number{font-size:9px}.folio-caption{font-size:18px;margin:16px 0 20px;transform:rotate(-2deg)}.folio-copy .text-link{font-size:12px}.folio-bottom{gap:9px;margin-top:20px;padding-top:17px}.folio-thumbs{gap:5px;justify-content:flex-start;overflow-x:auto;padding:5px 2px 8px}.folio-thumb{width:42px;height:35px;flex-shrink:0}.folio-step{width:36px;height:39px;font-size:22px}.folio-zoom{font-size:10px;padding:7px 10px;left:11px;bottom:11px;min-height:39px;gap:12px}
}
@keyframes folio-open-mobile{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){body:not(.motion-enabled) .yard-wind{display:none}body:not(.motion-enabled) .hero-note{transform:rotate(-7deg)}body:not(.motion-enabled) .hero-stamp{transform:rotate(5deg)}}