/* MS Facility Solutions — v61 (11/09/2026): door diagram scenes + footer. Loads last. */

/* ================= DOOR DIAGRAM ================= */
.door-wrap{background:#0d131c}
.door.dxv{display:block;width:100%;height:auto}
.dxv .x-o{opacity:0;transition:opacity .4s}
.dxv .x-h{transition:opacity .3s}
.dxv .x-doorgrp{transform-box:view-box;transform-origin:124px 392px;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.dxv .x-ring{fill:none;stroke:#ff6b5e;stroke-width:2.5;transform-box:fill-box;transform-origin:center}
.dxv .x-lamp{opacity:.45;transition:opacity .3s}
.dxv .x-pn,.dxv .x-roller,.dxv .x-beam,.dxv .x-led,.dxv .x-eyeled{transition:stroke .3s,fill .3s}
.dxv .x-bang,.dxv .x-arc,.dxv .x-snd,.dxv .x-dangle,.dxv .x-eye-r,.dxv .x-btn{transform-box:fill-box;transform-origin:center}
.dxv .x-arm{transform-box:view-box;transform-origin:320px 117px;transition:transform .5s}
.dxv .x-dangle{transform-origin:20% 0}
.dxv .x-arc{transform-origin:50% 100%}

#doorWrap[data-k="spring"] .k-spring,#doorWrap[data-k="offtrack"] .k-offtrack,#doorWrap[data-k="opener"] .k-opener,#doorWrap[data-k="remote"] .k-remote,#doorWrap[data-k="noise"] .k-noise,#doorWrap[data-k="panel"] .k-panel{opacity:1}
#doorWrap[data-k="spring"] .h-spring,#doorWrap[data-k="offtrack"] .h-offtrack{opacity:0}
#doorWrap[data-k="spring"] .x-ring.k-spring,#doorWrap[data-k="offtrack"] .x-ring.k-offtrack,#doorWrap[data-k="opener"] .x-ring.k-opener,#doorWrap[data-k="remote"] .x-ring.k-remote,#doorWrap[data-k="noise"] .x-ring.k-noise,#doorWrap[data-k="panel"] .x-ring.k-panel{animation:dxvRing 1.7s ease-out infinite}
@keyframes dxvRing{0%{transform:scale(.45);opacity:.95}100%{transform:scale(2.1);opacity:0}}

/* 1) broken spring: the opener tries, the door barely lifts and drops back */
#doorWrap[data-k="spring"] .x-doorgrp{animation:dxvTry 3.4s ease-in-out infinite}
#doorWrap[data-k="spring"] .x-bang{animation:dxvBang 3.4s ease-out infinite}
#doorWrap[data-k="spring"] .x-lamp{opacity:1}
@keyframes dxvTry{0%,52%,100%{transform:translateY(0)}60%{transform:translateY(-8px)}68%{transform:translateY(0)}72%{transform:translateY(-2.5px)}76%{transform:translateY(0)}}
@keyframes dxvBang{0%,8%{opacity:0;transform:scale(.4)}14%{opacity:1;transform:scale(1.1)}34%{opacity:0;transform:scale(1.45)}100%{opacity:0;transform:scale(1.45)}}

/* 2) off the track: one side dropped, the door hangs crooked */
#doorWrap[data-k="offtrack"] .x-doorgrp{transform:rotate(-2.6deg);animation:dxvSag 3s ease-in-out .9s infinite}
#doorWrap[data-k="offtrack"] .x-dangle{animation:dxvSwing 2.2s ease-in-out infinite}
@keyframes dxvSag{0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(-3.1deg)}}
@keyframes dxvSwing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}

/* 3) opener runs, door does not move: carriage travels alone */
#doorWrap[data-k="opener"] .x-motor{animation:dxvHum .14s linear infinite}
#doorWrap[data-k="opener"] .x-lamp{opacity:1}
#doorWrap[data-k="opener"] .x-chain{animation:dxvChain .45s linear infinite}
#doorWrap[data-k="opener"] .x-trolley{animation:dxvTravel 2.6s ease-in-out infinite}
#doorWrap[data-k="opener"] .x-arm{transform:rotate(17deg)}
@keyframes dxvHum{0%{transform:translate(0,0)}50%{transform:translate(.8px,.5px)}100%{transform:translate(-.6px,-.4px)}}
@keyframes dxvChain{to{stroke-dashoffset:-13}}
@keyframes dxvTravel{0%,100%{transform:translateY(0)}50%{transform:translateY(-36px)}}

/* 4) remote / keypad dead: signal goes nowhere, sensor out of line */
#doorWrap[data-k="remote"] .x-btn{animation:dxvPress 2.2s ease-in-out infinite}
#doorWrap[data-k="remote"] .x-arc{animation:dxvArc 2.2s ease-out infinite}
#doorWrap[data-k="remote"] .x-arc.a2{animation-delay:.18s}
#doorWrap[data-k="remote"] .x-arc.a3{animation-delay:.36s}
#doorWrap[data-k="remote"] .x-nosig{animation:dxvBlink 2.2s steps(1) infinite}
#doorWrap[data-k="remote"] .x-lamp{opacity:.12}
#doorWrap[data-k="remote"] .x-led{fill:#ff6b5e}
#doorWrap[data-k="remote"] .x-eye-r{transform:rotate(20deg)}
#doorWrap[data-k="remote"] .x-eyeled{fill:#ffb648}
#doorWrap[data-k="remote"] .x-beam{stroke:#ff6b5e;animation:dxvBlink 1.1s steps(1) infinite}
@keyframes dxvPress{0%,100%{transform:scale(1)}10%{transform:scale(.86)}22%{transform:scale(1)}}
@keyframes dxvArc{0%,8%{opacity:0;transform:scale(.6)}22%{opacity:1}55%{opacity:0;transform:scale(1.25)}100%{opacity:0;transform:scale(1.25)}}
@keyframes dxvBlink{0%,45%{opacity:0}50%,100%{opacity:1}}

/* 5) noisy, shaky, slow: the door rattles on the way up */
#doorWrap[data-k="noise"] .x-doorgrp,#doorWrap[data-k="noise"] .x-trolley,#doorWrap[data-k="noise"] .x-arm{animation:dxvShake 5.4s ease-in-out infinite}
#doorWrap[data-k="noise"] .x-roller{fill:#ffb648;stroke:#a86a12}
#doorWrap[data-k="noise"] .x-snd{animation:dxvSnd 1s ease-in-out infinite}
#doorWrap[data-k="noise"] .x-snd.s2{animation-delay:.18s}
@keyframes dxvShake{0%{transform:translate(0,0)}7%{transform:translate(1.6px,-6px)}14%{transform:translate(-1.6px,-12px)}21%{transform:translate(1.6px,-18px)}28%{transform:translate(-1.4px,-24px)}35%{transform:translate(1.2px,-29px)}42%{transform:translate(-1px,-33px)}50%,62%{transform:translate(0,-36px)}100%{transform:translate(0,0)}}
@keyframes dxvSnd{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}

/* 6) dented panel */
#doorWrap[data-k="panel"] .x-pn.p3{stroke:#ffb648;stroke-width:2.4}

@media(prefers-reduced-motion:reduce){.dxv *{animation:none!important}}

/* caption + part labels sit under the picture, never on top of it */
.dxv-cap{padding:14px 16px 4px;min-height:58px}
.dxv-cap span{display:none;align-items:flex-start;gap:10px;color:#eef2f7;font:600 .95rem/1.45 var(--body)}
.dxv-cap span:before{content:"";width:9px;height:9px;border-radius:50%;background:#ff6b5e;flex:none;margin-top:.42em;box-shadow:0 0 0 4px rgba(255,107,94,.2)}
.dxv-cap [data-c="idle"]{color:#aab6c5;font-weight:500}
.dxv-cap [data-c="idle"]:before{background:#5b93e8;box-shadow:0 0 0 4px rgba(91,147,232,.2)}
#doorWrap:not([data-k]) .dxv-cap [data-c="idle"],#doorWrap[data-k="spring"] .dxv-cap [data-c="spring"],#doorWrap[data-k="offtrack"] .dxv-cap [data-c="offtrack"],#doorWrap[data-k="opener"] .dxv-cap [data-c="opener"],#doorWrap[data-k="remote"] .dxv-cap [data-c="remote"],#doorWrap[data-k="noise"] .dxv-cap [data-c="noise"],#doorWrap[data-k="panel"] .dxv-cap [data-c="panel"]{display:flex}
.door-wrap .door-labels{position:static;left:auto;right:auto;bottom:auto;padding:8px 14px 16px}

/* ================= FOOTER ================= */
footer.ft61{padding:64px 0 26px}
.ft61-grid{display:grid;grid-template-columns:1.55fr repeat(4,1fr);gap:40px 32px}
.ft61-brand .brand{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.ft61-brand .brand img{width:44px;height:auto}
.ft61-brand .wm{font-family:var(--head);font-weight:800;font-size:.86rem;letter-spacing:.02em;color:#fff;line-height:1.15}
.ft61-brand .wm small{display:block;font-family:var(--body);font-weight:600;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:#93a1b5;margin-top:3px}
.ft61 p.desc{margin-top:16px;max-width:300px;font-size:.92rem}
.ft61-phone{display:inline-flex;flex-direction:column;margin-top:18px;color:#fff;font:800 1.45rem/1.1 var(--head);letter-spacing:-.02em;text-decoration:none}
.ft61-phone small{font:500 .8rem var(--body);letter-spacing:0;color:#93a1b5;margin-top:5px}
.ft61-phone:hover{color:#9fc4ff}
.ft61 ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ft61 ul a{color:#93a1b5;font-size:.93rem;text-decoration:none}
.ft61 ul a:hover,.ft61-areagrid a:hover{color:#fff}
.ft61-areas{margin-top:44px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.03)}
.ft61-areas summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:15px 18px;color:#fff;font:700 .95rem var(--head);letter-spacing:-.01em}
.ft61-areas summary::-webkit-details-marker{display:none}
.ft61-areas summary em{font:500 .86rem var(--body);font-style:normal;color:#93a1b5}
.ft61-areas summary i{margin-left:auto;display:inline-flex;align-items:center;gap:9px;font:600 .82rem var(--body);font-style:normal;color:#9fc4ff}
.ft61-areas summary i:before{content:"More"}
.ft61-areas[open] summary i:before{content:"Less"}
.ft61-areas summary i:after{content:"+";width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(159,196,255,.14);font-size:1rem;transition:transform .25s}
.ft61-areas[open] summary i:after{transform:rotate(45deg)}
.ft61-areagrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px 18px;padding:6px 18px 20px}
.ft61-areagrid a{color:#93a1b5;font-size:.86rem;text-decoration:none}
.ft61-areagrid a.all{color:#9fc4ff;font-weight:600}
.ft61 .foot-bottom{margin-top:26px;border-top:1px solid rgba(255,255,255,.08)}
@media(max-width:1000px){.ft61-grid{grid-template-columns:repeat(4,1fr)}.ft61-brand{grid-column:1/-1}.ft61-areagrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:640px){footer.ft61{padding:44px 0 110px}.ft61-grid{grid-template-columns:1fr 1fr;gap:30px 20px}.ft61-areagrid{grid-template-columns:1fr 1fr}.ft61-areas summary em{display:none}}

/* detail bubbles */
.dxv .x-bcar,.dxv .x-arc2,.dxv .x-gapmark,.dxv .x-beam2,.dxv .x-eyeled2{transform-box:fill-box;transform-origin:center}
.dxv .x-arc2{transform-origin:0 50%}
#doorWrap[data-k="opener"] .x-bcar{animation:dxvCar 2.6s ease-in-out infinite}
#doorWrap[data-k="opener"] .x-gapmark{animation:dxvGap 1.3s ease-in-out infinite}
#doorWrap[data-k="remote"] .x-arc2{animation:dxvArc 2.2s ease-out infinite}
#doorWrap[data-k="remote"] .x-arc2.a2{animation-delay:.18s}
#doorWrap[data-k="remote"] .x-arc2.a3{animation-delay:.36s}
#doorWrap[data-k="remote"] .x-beam2,#doorWrap[data-k="remote"] .x-eyeled2{animation:dxvBlink 1.1s steps(1) infinite}
@keyframes dxvCar{0%,100%{transform:translateX(-17px)}50%{transform:translateX(17px)}}
@keyframes dxvGap{0%,100%{opacity:.35}50%{opacity:1}}