/* DoorSpan / The living workshop. Original photography and brand tokens remain the anchor. */
::selection{background:var(--red);color:#fff;text-shadow:none}
html{scrollbar-color:var(--red) #e4e7eb;scrollbar-width:thin}
.site-footer{padding-bottom:76px}
.motion-toggle{min-height:44px}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#e4e7eb}::-webkit-scrollbar-thumb{background:var(--red);border:2px solid #e4e7eb}
@media(hover:hover) and (pointer:fine){
  html.workshop-pointer,html.workshop-pointer body,html.workshop-pointer :where(main,section,article,div,span,p,h1,h2,h3,img){cursor:url('assets/inspection-cursor.svg') 4 4,auto}
  html.workshop-pointer :where(a,a *,button,button *,summary,summary *,label,label *,select,[role=tab],[role=tab] *){cursor:url('assets/inspection-cursor-active.svg') 4 4,pointer}
  html.workshop-pointer :where(input,textarea,[contenteditable=true]){cursor:text}
  html.workshop-pointer :where(input[type=checkbox],input[type=radio]){cursor:url('assets/inspection-cursor-active.svg') 4 4,pointer}
  html.workshop-pointer :disabled{cursor:not-allowed}
}
@media(forced-colors:active){html.workshop-pointer,html.workshop-pointer *{cursor:auto!important}}

/* Mechanical prelude: release, swing, settle. The CTA remains in the foreground. */
.cargo-door{transition-duration:1.6s;transition-timing-function:cubic-bezier(.24,.66,.17,1);background:repeating-linear-gradient(90deg,#b9c2c8 0,#f2f4f5 2px,#eef0f1 69px,#bdc5cc 71px,#f9fafb 74px,#aeb9c0 76px);box-shadow:inset 0 0 32px #27384625,inset 0 2px 3px #fff,5px 7px 26px #071a3633}
.cargo-door::before{content:'';position:absolute;inset:10px;background:radial-gradient(circle at 3px 3px,#f8fbfc 0 1px,#707e89 1.5px 2.7px,transparent 3.4px) 0 0/100% 57px,radial-gradient(circle at calc(100% - 3px) 3px,#f8fbfc 0 1px,#707e89 1.5px 2.7px,transparent 3.4px) 0 0/100% 57px;pointer-events:none}
.cargo-door::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,#fff8 41%,#ffffff0a 54%,transparent 70%);transform:translateX(-100%);opacity:.7;pointer-events:none}
.doors-unlatched .cargo-door::after{transform:translateX(100%);transition:transform 1.6s cubic-bezier(.2,.7,.3,1)}
.door-right{transition-delay:.13s}
.door-rod::before,.door-rod::after{content:'';position:absolute;left:-6px;right:-6px;height:19px;background:linear-gradient(90deg,#78858e,#f3f6f7 24%,#9ba7b1 55%,#e6ebed 82%,#63727c);border:1px solid #7f8c95;box-shadow:1px 2px 2px #0004}
.door-rod::before{top:19%}.door-rod::after{bottom:19%}
.door-handle{transition:transform .5s cubic-bezier(.22,.9,.28,1.2),box-shadow .5s;z-index:1}
body:not(.doors-unlatched) .door-handle{transform:rotate(0)}
.doors-unlatched .door-handle{transform:rotate(-33deg);box-shadow:5px 10px 5px #0003}
.doors-unlatched .door-right .door-handle{transform:rotate(33deg)}
.hero-hardware{position:absolute;inset:0;pointer-events:none;z-index:1}
.hero-hardware::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:#071a36;box-shadow:-8px 0 18px #0617294d,8px 0 18px #0617294d;transition:opacity .4s}
.doors-open .hero-hardware::before{opacity:0}
.door-replay{position:relative;min-height:44px}
.door-replay::after{content:'';position:absolute;bottom:3px;left:0;right:0;height:2px;transform:scaleX(0);transform-origin:left;background:var(--red);transition:transform .4s var(--ease)}
.door-replay:hover::after,.door-replay:focus-visible::after{transform:scaleX(1)}
.door-replay:disabled::after{animation:door-progress 2.55s linear both;opacity:.6}
@keyframes door-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* The light is a second exposure of the same photograph, with matching geometry.
   It never moves or stretches a person or a physical part inside a flat image. */
.workshop-light-surface{--lamp-x:50%;--lamp-y:50%;--lamp-radius:220px;isolation:isolate}
.workshop-light{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .4s;contain:paint}
.workshop-light-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(1.36) contrast(1.035);mask-image:radial-gradient(circle var(--lamp-radius) at var(--lamp-x) var(--lamp-y),#000 0%,#000b 33%,transparent 100%);-webkit-mask-image:radial-gradient(circle var(--lamp-radius) at var(--lamp-x) var(--lamp-y),#000 0%,#000b 33%,transparent 100%)}
.workshop-light::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 45% 1px at var(--lamp-x) var(--lamp-y),#ffffff96,transparent 90%),radial-gradient(ellipse 1px 45% at var(--lamp-x) var(--lamp-y),#ffffff5e,transparent 90%);z-index:2;opacity:.5}
.workshop-light::after{content:'';position:absolute;inset:0;background:radial-gradient(circle var(--lamp-radius) at var(--lamp-x) var(--lamp-y),#e6efff0b,transparent 70%);z-index:3}
.light-active>.workshop-light,.hero.light-active .hero-photo>.workshop-light{opacity:1}
.workshop-gauge{position:absolute;left:var(--lamp-x);top:var(--lamp-y);width:76px;height:56px;transform:translate(-50%,-50%);z-index:4;filter:drop-shadow(0 1px 1px #082c6766)}
.workshop-gauge::before,.workshop-gauge::after{content:'';position:absolute;width:17px;height:17px;border-color:#fff;border-style:solid;transition:transform .36s cubic-bezier(.2,.8,.2,1)}
.workshop-gauge::before{top:0;left:0;border-width:1px 0 0 1px;transform:translate(-12px,-8px)}
.workshop-gauge::after{bottom:0;right:0;border-width:0 1px 1px 0;transform:translate(12px,8px)}
.light-active .workshop-gauge::before,.light-active .workshop-gauge::after{transform:translate(0,0)}
.hero-photo.workshop-light-surface{--lamp-radius:330px}
.hero-photo>.workshop-light .workshop-light-image{object-position:center 68%;transform:scale(1)}
.hero-photo>.workshop-light{z-index:1}
.hero-copy{isolation:isolate}
.hero-copy h1{transition:text-shadow .35s}
.hero-copy h1,.hero-copy>p,.hero-note{transition:opacity .65s var(--ease),translate .8s var(--ease)}
.motion-ready:not(.doors-open) .hero-copy h1,.motion-ready:not(.doors-open) .hero-copy>p,.motion-ready:not(.doors-open) .hero-note{opacity:0;translate:0 12px;transition-duration:.25s;transition-delay:0s}
.doors-open .hero-copy h1{transition-delay:.26s}
.doors-open .hero-copy>p{transition-delay:.4s}
.doors-open .hero-note{transition-delay:.5s}
.hero.light-active .hero-copy h1{text-shadow:0 1px 0 #fff9}
.service-image>.workshop-light{z-index:1}
.service-image>.image-caption,.service-image>.photo-corner{z-index:3}
.inspection-scene>.workshop-light .workshop-light-image{object-position:center}
.inspection-scene>.hotspot,.inspection-scene>.inspection-label{z-index:5}
.detail-photo>.workshop-light .workshop-light-image{object-position:inherit}
.detail-light-frame .workshop-light-image{object-position:67% center}
.detail-photo.light-active .workshop-light{opacity:1}
.detail-photo>span{z-index:3}

/* A precision carriage runs inside the existing aluminum rails. */
.rail-carriage{position:absolute;left:1px;top:0;width:calc(100% - 2px);height:94px;border:1px solid #727f8a;border-top-color:#fff;border-bottom-color:#52616e;background:linear-gradient(90deg,#677780,#dbe0e4 22%,#f5f6f8 42%,#8898a3 63%,#e1e7eb 85%,#6a7c8b);box-shadow:0 5px 13px #03132944;transform:translateY(-110px);opacity:0;transition:opacity .3s;will-change:transform}
.rail-carriage::before{content:'';position:absolute;left:0;right:0;top:43px;height:7px;background:var(--red);border-top:1px solid #fbc9c9;border-bottom:1px solid #67191d}
.rail-carriage::after{content:'';position:absolute;inset:8px 4px;background:radial-gradient(circle,#edf1f4 0 1px,#546773 1.5px 2px,transparent 2.5px) 0 0/100% 63px}
.workshop-pointer-active .rail-carriage{opacity:1}
.edge-frame{isolation:isolate}.edge-frame i{transition:filter .3s}
.edge-frame i.near-pointer{filter:brightness(1.22)}
.edge-frame .frame-progress{z-index:3}
.reflector-band{position:relative;overflow:hidden}
.reflector-band::after{content:'';position:absolute;top:-10px;bottom:-10px;width:180px;left:var(--reflector-x,-200px);background:linear-gradient(110deg,transparent,#fff9 48%,#fff 50%,#fff9 52%,transparent);transform:skewX(-20deg);pointer-events:none;opacity:0;transition:opacity .3s}
.reflector-band.reflector-near::after{opacity:.85}
.wordmark i{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.wordmark:hover i,.wordmark:focus-visible i{transform:translateX(4px) skewX(-24deg)}
.btn:active{translate:0 1px}.btn:focus-visible::before{transform:translateX(0)}
.btn-outline:focus-visible,.btn-secondary:focus-visible{color:#fff}

/* Small controls use the same seat, latch and alignment vocabulary. */
.service-toggle{position:relative;min-height:44px}
.service-toggle::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.service-toggle:hover::after,.service-toggle:focus-visible::after,.service-toggle[aria-expanded=true]::after{transform:scaleX(1)}
.service-image::before{content:'';position:absolute;inset:13px;z-index:4;pointer-events:none;background:linear-gradient(#fff,#fff) left top/30px 1px no-repeat,linear-gradient(#fff,#fff) left top/1px 30px no-repeat,linear-gradient(#fff,#fff) right bottom/30px 1px no-repeat,linear-gradient(#fff,#fff) right bottom/1px 30px no-repeat;opacity:0;transform:scale(1.035);transition:opacity .4s,transform .65s var(--ease)}
.service-row:hover .service-image::before,.service-row:focus-within .service-image::before{opacity:.9;transform:scale(1)}
.process-track{position:relative;overflow:visible}
.process-track span{position:relative;transition-timing-function:cubic-bezier(.22,.8,.18,1)}
.process-track span::after{content:'';position:absolute;right:0;top:-3px;width:7px;height:11px;border:1px solid #a3adb5;background:linear-gradient(90deg,#e7ecef,#fff 50%,#6e7f91)}
.round-link{position:relative;isolation:isolate;transition:background .3s,color .3s,transform .4s var(--ease)}
.round-link::before{content:'';position:absolute;inset:-5px;border:1px solid var(--red);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(-70deg);opacity:0;transition:transform .5s var(--ease),opacity .3s;pointer-events:none}
.round-link:hover::before,.round-link:focus-visible::before{transform:rotate(0);opacity:1}
.round-link:active{transform:scale(.92)}
.support-services article>span{transition:color .3s,translate .4s var(--ease)}
.support-services article:hover>span,.support-services article:focus-within>span{translate:0 -3px;color:var(--navy)}
.faq-list details{position:relative}
.faq-list details::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);transform-origin:left;transform:scaleX(0);transition:transform .55s var(--ease);pointer-events:none}
.faq-list details[open]::after{transform:scaleX(1)}
.faq-list details[open] p{animation:workshop-note-seat .45s var(--ease) both}
@keyframes workshop-note-seat{from{opacity:.4;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
.dialog-close{transition:background .25s,color .25s;min-width:44px;min-height:44px}
.dialog-close svg{transition:transform .4s var(--ease)}
.dialog-close:hover svg,.dialog-close:focus-visible svg{transform:rotate(90deg)}
.service-option-marker{position:absolute;right:9px;bottom:8px;width:7px;height:7px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);opacity:0;transform:translate(3px,3px);transition:transform .25s,opacity .25s;pointer-events:none}
.service-option.is-selected .service-option-marker{opacity:1;transform:translate(0,0)}

/* The red bay catches a raking light across its existing color, never a new palette. */
.detail-section,.contact-section{position:relative;isolation:isolate;--steel-x:50%;--steel-y:50%}
.steel-grain{position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:0;background:radial-gradient(ellipse 55% 100% at var(--steel-x) var(--steel-y),#fff2,transparent 67%),repeating-linear-gradient(90deg,transparent 0 78px,#fff1 79px,transparent 80px);transition:opacity .35s}
.steel-grain::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,#fff6 0 1px,transparent 1.4px) 0 0/40px 40px;mask-image:radial-gradient(ellipse 280px 230px at var(--steel-x) var(--steel-y),#000,transparent);-webkit-mask-image:radial-gradient(ellipse 280px 230px at var(--steel-x) var(--steel-y),#000,transparent)}
.steel-active>.steel-grain{opacity:1}
.contact-section>.steel-grain{background:linear-gradient(105deg,transparent 25%,#fff9 49%,#fff3 52%,transparent 74%);background-position:var(--steel-x) 0;opacity:.35}
.contact-section>.steel-grain::after{background:radial-gradient(circle at center,#082c6755 0 1px,transparent 1.4px) 0 0/40px 40px;opacity:.7}
.contact-section.steel-active>.steel-grain{opacity:1}

/* The narrow layout retains the same photography and hands the spotlight to entry. */
@media(max-width:650px){
 .hero-photo>.workshop-light .workshop-light-image{object-position:60% center}
 .workshop-light-surface{--lamp-radius:160px}
 .rail-carriage{height:62px}.rail-carriage::before{top:27px;height:5px}.rail-carriage::after{inset:5px 1px;background-size:100% 43px}
 .workshop-gauge{width:52px;height:38px}.workshop-gauge::before,.workshop-gauge::after{width:13px;height:13px}
 .detail-light-frame{inset:5px!important}
 .detail-light-frame .workshop-light-image{object-position:65% center}
 .header-request,.menu-button,.round-link,.back-top{min-height:44px;min-width:44px}
 .hero-copy .btn{min-height:44px}
 .support-services .round-link{position:absolute}
}
@media(hover:none),(pointer:coarse){
 .rail-carriage,.workshop-gauge{display:none}
 .workshop-light{transition:none}
 .workshop-light::before{display:none}
 .workshop-light-image{filter:brightness(1.19)}
 .steel-grain::after{display:none}
}
.motion-off .workshop-light,.motion-off .rail-carriage,.motion-off .steel-grain,.motion-off .hero-hardware{display:none}
.motion-off .cargo-door::after,.motion-off .reflector-band::after{display:none}
.motion-off .hero-copy h1,.motion-off .hero-copy>p,.motion-off .hero-note{opacity:1;translate:none}
@media(prefers-reduced-motion:reduce){.workshop-light,.rail-carriage,.steel-grain,.hero-hardware,.reflector-band::after{display:none!important}}
@media(forced-colors:active){.workshop-light,.rail-carriage,.steel-grain{display:none!important}}

/* Rear lamp and door edge follow the updated full-frame trailer photograph. */
.hotspot-5{top:61%}