/* Fire Door London UK - service hero scenes (fdx) */
.fdx{position:relative;width:100%;max-width:470px;height:440px;margin:0 auto;perspective:1400px}
.fdx-tilt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.fdx-lift{position:relative;transform-style:preserve-3d;animation:fdxFloat 7s ease-in-out infinite}
.fdx-glow{position:absolute;left:52%;top:50%;width:300px;height:380px;transform:translate(-50%,-50%);background:radial-gradient(circle,#ff5b4d 0%,#e11d1d 40%,rgba(225,29,29,0) 72%);filter:blur(46px);opacity:.24;animation:fdxGlow 5.4s ease-in-out infinite;z-index:0;pointer-events:none}
.fdx-floor{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:270px;height:26px;background:radial-gradient(ellipse,rgba(225,29,29,.2),transparent 70%);filter:blur(10px);z-index:0;pointer-events:none}
@keyframes fdxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes fdxGlow{0%,100%{opacity:.18;transform:translate(-50%,-50%) scale(1)}50%{opacity:.38;transform:translate(-50%,-50%) scale(1.08)}}

.fdx-door{position:relative;width:232px;height:372px;transform-style:preserve-3d;z-index:2}
.fdx-jamb{position:absolute;inset:-13px;border:13px solid;border-image:linear-gradient(145deg,#ececef,#c7c7cc) 1;background:#f2f1ef;box-shadow:0 26px 54px rgba(20,17,15,.16),inset 0 0 16px rgba(0,0,0,.05)}
.fdx-seal{position:absolute;left:-2px;top:0;bottom:0;width:3px;background:linear-gradient(#e11d1d,#7a0a0a);transform-origin:top center;z-index:3}
.fdx-leaf{position:absolute;inset:0;background:linear-gradient(150deg,#2b2b31 0%,#18181c 48%,#101013 100%);border:1px solid rgba(0,0,0,.45);box-shadow:inset 0 0 50px rgba(0,0,0,.5),0 24px 48px rgba(20,17,15,.3);padding:14px;display:flex;flex-direction:column;gap:10px;transform-origin:left center;transform:rotateY(-7deg);transition:transform .18s ease-out}
.fdx-vision{height:100px;border-radius:3px;border:5px solid #0d0d0f;background:linear-gradient(135deg,rgba(255,90,70,.32),rgba(150,30,30,.26));position:relative;overflow:hidden;box-shadow:inset 0 0 22px rgba(255,60,40,.32);flex:none}
.fdx-vision:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);background-size:16px 16px}

.fdx-sign{background:#e11d1d;border-radius:3px;padding:6px 8px;text-align:center;box-shadow:0 4px 12px rgba(225,29,29,.38);flex:none}
.fdx-sign b{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:12px;letter-spacing:.18em;color:#fff;line-height:1.2}
.fdx-sign i{display:block;font-style:normal;font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:9px;letter-spacing:.3em;color:rgba(255,255,255,.85)}
.fdx-panel{flex:1;border-radius:3px;background:linear-gradient(160deg,#202024,#101013);box-shadow:inset 0 2px 8px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.04);position:relative}
.fdx-disc{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;border:2px solid #e11d1d;background:rgba(225,29,29,.08);display:flex;flex-direction:column;align-items:center;justify-content:center}
.fdx-disc b{font-family:'Archivo',sans-serif;font-weight:900;font-size:14px;color:#fff;line-height:1}
.fdx-disc i{font-style:normal;font-size:6.5px;letter-spacing:.16em;color:#ff6b63}
.fdx-kick{height:36px;border-radius:3px;background:linear-gradient(180deg,#7e7e84,#4a4a4e 40%,#6c6c72 60%,#3a3a3e);box-shadow:inset 0 1px 2px rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.45);flex:none}
.fdx-handle{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:11px;height:72px;border-radius:6px;background:linear-gradient(#cfcfd4,#6a6a70);box-shadow:0 3px 8px rgba(0,0,0,.55)}
.fdx-handle2{position:absolute;right:21px;top:50%;width:44px;height:8px;border-radius:4px;background:linear-gradient(#e6e6ea,#85858c);box-shadow:0 4px 10px rgba(0,0,0,.5)}

/* shared callout chips */
.fdx-chip{position:absolute;z-index:6;background:#fff;border:1px solid rgba(0,0,0,.09);border-radius:8px;padding:8px 11px;box-shadow:0 14px 30px rgba(20,17,15,.11)}
.fdx-chip b{display:block;font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#c81e1e;line-height:1.35}
.fdx-chip s{display:block;text-decoration:none;font-family:'Barlow',sans-serif;font-size:13px;color:#5a5a60;line-height:1.35;white-space:nowrap}
.fdx-cue{opacity:0;animation:fdxCue 6s ease-in-out infinite}
@keyframes fdxCue{0%,6%{opacity:0;transform:translateY(9px) scale(.96)}14%,40%{opacity:1;transform:none}50%,100%{opacity:0;transform:translateY(-6px) scale(.98)}}
/* survey: scan beam */
.fdx-scan{position:absolute;left:-18px;right:-18px;top:0;height:2px;background:linear-gradient(90deg,rgba(225,29,29,0),#e11d1d 18%,#ff8a3a 50%,#e11d1d 82%,rgba(225,29,29,0));box-shadow:0 0 16px rgba(225,29,29,.7);z-index:5;animation:fdxScan 6s cubic-bezier(.45,0,.55,1) infinite;pointer-events:none}
.fdx-scan:after{content:"";position:absolute;left:0;right:0;bottom:2px;height:64px;background:linear-gradient(rgba(225,29,29,0),rgba(225,29,29,.17))}
@keyframes fdxScan{0%{top:-14px;opacity:0}8%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
.fdx-tag{position:absolute;z-index:6;background:#14110f;border-radius:6px;padding:7px 10px;box-shadow:0 12px 26px rgba(20,17,15,.2)}
.fdx-tag b{display:block;font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:10px;letter-spacing:.2em;color:#ff6b60;line-height:1.4}
.fdx-tag s{display:block;text-decoration:none;font-family:'Barlow',sans-serif;font-size:13px;color:#fff;line-height:1.3;letter-spacing:.02em}

/* inspection: 5 point check card */
.fdx-card{position:absolute;z-index:6;background:#fff;border:1px solid rgba(0,0,0,.09);border-radius:10px;padding:15px 16px;box-shadow:0 20px 44px rgba(20,17,15,.13);width:204px}
.fdx-card>em{display:block;font-style:normal;font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8a8a8f;margin-bottom:11px}
.fdx-row{display:flex;align-items:center;gap:10px;font-family:'Barlow',sans-serif;font-size:13.5px;color:#5a5a60;padding:3px 0}
.fdx-box{width:17px;height:17px;border-radius:4px;border:1.5px solid rgba(0,0,0,.2);position:relative;flex:none;animation:fdxBox 7s ease-in-out infinite}
.fdx-box:after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(.4);opacity:0;animation:fdxMark 7s ease-in-out infinite}
@keyframes fdxBox{0%,5%{background:transparent;border-color:rgba(0,0,0,.2)}12%,90%{background:#e11d1d;border-color:#e11d1d}100%{background:transparent;border-color:rgba(0,0,0,.2)}}
@keyframes fdxMark{0%,5%{opacity:0;transform:rotate(45deg) scale(.4)}12%,90%{opacity:1;transform:rotate(45deg) scale(1)}100%{opacity:0;transform:rotate(45deg) scale(.4)}}
.fdx-prog{height:3px;border-radius:2px;background:rgba(0,0,0,.08);margin-top:13px;overflow:hidden}
.fdx-prog i{display:block;height:100%;background:#e11d1d;transform-origin:left center;transform:scaleX(0);animation:fdxProg 7s ease-in-out infinite}
@keyframes fdxProg{0%{transform:scaleX(0)}14%{transform:scaleX(.2)}28%{transform:scaleX(.4)}42%{transform:scaleX(.6)}56%{transform:scaleX(.8)}70%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.fdx-lens{position:absolute;left:50%;top:0;width:76px;height:76px;margin-left:-38px;border-radius:50%;border:2px solid rgba(225,29,29,.75);background:radial-gradient(circle,rgba(255,255,255,.14),rgba(225,29,29,.1));box-shadow:0 0 0 6px rgba(225,29,29,.08),0 10px 24px rgba(20,17,15,.2);z-index:5;animation:fdxLens 7s ease-in-out infinite;pointer-events:none}
@keyframes fdxLens{0%{top:2%;opacity:0}8%{opacity:1}22%{top:14%}40%{top:40%}58%{top:60%}76%{top:78%}90%{top:82%;opacity:1}100%{top:86%;opacity:0}}

/* certificate: sheet + stamp */
.fdx-cert{position:relative;width:262px;height:344px;background:#fff;border:1px solid rgba(0,0,0,.09);border-radius:8px;box-shadow:0 30px 62px rgba(20,17,15,.17);padding:26px 24px;z-index:3}
.fdx-cert>em{display:block;font-style:normal;font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#c81e1e}
.fdx-cert>strong{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:21px;line-height:1.05;letter-spacing:-.02em;color:#14110f;margin:8px 0 18px}
.fdx-line{height:8px;border-radius:4px;background:rgba(20,17,15,.09);margin-bottom:10px;transform-origin:left center;transform:scaleX(0);animation:fdxLine 8s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes fdxLine{0%,3%{transform:scaleX(0)}16%,93%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.fdx-stamp{position:absolute;right:-30px;bottom:26px;width:108px;height:108px;border-radius:50%;border:3px solid #e11d1d;background:rgba(253,236,234,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 16px 34px rgba(225,29,29,.28);z-index:5;opacity:0;animation:fdxStamp 8s cubic-bezier(.3,1.5,.4,1) infinite}
.fdx-stamp b{font-family:'Archivo',sans-serif;font-weight:900;font-size:19px;color:#c81e1e;line-height:1;letter-spacing:-.01em}
.fdx-stamp i{font-style:normal;font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:9px;letter-spacing:.2em;color:#c81e1e;margin-top:3px}
@keyframes fdxStamp{0%,30%{opacity:0;transform:scale(2) rotate(-17deg)}41%{opacity:1;transform:scale(.93) rotate(-9deg)}46%{transform:scale(1.05) rotate(-9deg)}51%,92%{opacity:1;transform:scale(1) rotate(-9deg)}100%{opacity:0;transform:scale(1.7) rotate(-17deg)}}
.fdx-ring{position:absolute;inset:-13px;border-radius:50%;border:1px dashed rgba(225,29,29,.5);animation:fdxSpin 24s linear infinite}
@keyframes fdxSpin{to{transform:rotate(360deg)}}
.fdx-ghost{position:absolute;left:-46px;top:50%;transform:translateY(-50%) rotateY(14deg);width:150px;height:250px;border:2px solid rgba(20,17,15,.1);border-radius:4px;background:linear-gradient(150deg,rgba(20,17,15,.05),rgba(20,17,15,.02));z-index:1}
.fdx-ghost:after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(#e11d1d,#7a0a0a);opacity:.55}

/* installation: doorset assembling */
.fdx-door--build .fdx-jamb{display:none}
.fdx-jl,.fdx-jr,.fdx-jh{position:absolute;background:linear-gradient(145deg,#ececef,#c7c7cc);box-shadow:0 18px 40px rgba(20,17,15,.14);z-index:1}
.fdx-jl{left:-13px;top:-13px;bottom:-13px;width:13px;opacity:0;animation:fdxJl 9s ease-in-out infinite}
.fdx-jr{right:-13px;top:-13px;bottom:-13px;width:13px;opacity:0;animation:fdxJr 9s ease-in-out infinite}
.fdx-jh{left:-13px;right:-13px;top:-13px;height:13px;opacity:0;animation:fdxJh 9s ease-in-out infinite}
@keyframes fdxJl{0%,3%{opacity:0;transform:translateX(-62px)}17%,93%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-62px)}}
@keyframes fdxJr{0%,6%{opacity:0;transform:translateX(62px)}20%,93%{opacity:1;transform:none}100%{opacity:0;transform:translateX(62px)}}
@keyframes fdxJh{0%,9%{opacity:0;transform:translateY(-54px)}23%,93%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-54px)}}
.fdx-leaf--hang{opacity:0;animation:fdxHang 9s cubic-bezier(.3,.9,.3,1) infinite}
@keyframes fdxHang{0%,26%{opacity:0;transform:rotateY(-86deg)}40%{opacity:1;transform:rotateY(-1deg)}46%{transform:rotateY(-11deg)}52%,93%{opacity:1;transform:rotateY(-7deg)}100%{opacity:0;transform:rotateY(-86deg)}}
.fdx-seal--fill{transform:scaleY(0);animation:fdxFill 9s ease-out infinite}
@keyframes fdxFill{0%,52%{transform:scaleY(0)}66%,93%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.fdx-hinge{position:absolute;left:-16px;width:19px;height:34px;border-radius:2px;background:linear-gradient(#d8d8dc,#8e8e95);box-shadow:0 3px 8px rgba(0,0,0,.25);z-index:4;opacity:0;animation:fdxHinge 9s ease-out infinite}
@keyframes fdxHinge{0%,44%{opacity:0;transform:scale(.6)}54%,93%{opacity:1;transform:none}100%{opacity:0;transform:scale(.6)}}

/* remedial: faults found, then put right */
.fdx-fault{position:absolute;z-index:6;width:26px;height:26px;border-radius:50%;background:#e11d1d;color:#fff;font-family:'Archivo',sans-serif;font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center;opacity:0;animation:fdxFault 9s ease-in-out infinite,fdxPulse 2.2s ease-out infinite}
@keyframes fdxFault{0%,4%{opacity:0;transform:scale(.7)}12%,44%{opacity:1;transform:none}52%,100%{opacity:0;transform:scale(.85)}}
@keyframes fdxPulse{0%{box-shadow:0 0 0 0 rgba(225,29,29,.45)}70%{box-shadow:0 0 0 13px rgba(225,29,29,0)}100%{box-shadow:0 0 0 0 rgba(225,29,29,0)}}
.fdx-fix{opacity:0;animation:fdxFix 9s ease-in-out infinite}
@keyframes fdxFix{0%,54%{opacity:0;transform:translateY(9px) scale(.94)}62%,92%{opacity:1;transform:none}100%{opacity:0;transform:scale(.96)}}
.fdx-sweep{position:absolute;left:-18px;right:-18px;top:0;height:3px;background:linear-gradient(90deg,rgba(225,29,29,0),#e11d1d,rgba(225,29,29,0));box-shadow:0 0 18px rgba(225,29,29,.75);z-index:7;opacity:0;animation:fdxSweep 9s cubic-bezier(.4,0,.4,1) infinite;pointer-events:none}
@keyframes fdxSweep{0%,46%{opacity:0;top:-10px}50%{opacity:1;top:0}58%{top:50%}66%{opacity:1;top:100%}70%,100%{opacity:0;top:100%}}
.fdx-gap{position:absolute;top:0;bottom:0;right:-10px;width:10px;background:repeating-linear-gradient(45deg,rgba(225,29,29,.55) 0 4px,rgba(225,29,29,0) 4px 8px);transform-origin:left center;animation:fdxGapFix 9s ease-in-out infinite;z-index:4}
@keyframes fdxGapFix{0%,46%{transform:scaleX(1)}62%,93%{transform:scaleX(.22)}100%{transform:scaleX(1)}}

/* responsive */
@media (max-width:1100px){.fdx{max-width:430px;height:420px}}
@media (max-width:980px){.fdx{height:400px;transform:scale(.92);transform-origin:center top}.fd-hero-visual{min-height:400px}}
@media (max-width:620px){.fdx{height:360px;transform:scale(.74);transform-origin:center top}.fd-hero-visual{min-height:330px}}
@media (max-width:400px){.fdx{transform:scale(.62)}.fd-hero-visual{min-height:290px}}
/* reduced motion: hold the resolved state, no loops */
@media (prefers-reduced-motion:reduce){
.fdx-lift,.fdx-glow,.fdx-tilt,.fdx-box,.fdx-box:after,.fdx-prog i,.fdx-line,.fdx-stamp,.fdx-ring,.fdx-cue,.fdx-jl,.fdx-jr,.fdx-jh,.fdx-leaf--hang,.fdx-seal--fill,.fdx-hinge,.fdx-fault,.fdx-fix,.fdx-gap{animation:none!important;transition:none!important}
.fdx-scan,.fdx-lens,.fdx-sweep,.fdx-fault{display:none!important}
.fdx-cue,.fdx-fix,.fdx-jl,.fdx-jr,.fdx-jh,.fdx-hinge{opacity:1!important;transform:none!important}
.fdx-stamp{opacity:1!important;transform:rotate(-9deg)!important}
.fdx-leaf--hang{opacity:1!important;transform:rotateY(-7deg)!important}
.fdx-seal--fill{transform:scaleY(1)!important}
.fdx-line,.fdx-prog i{transform:scaleX(1)!important}
.fdx-gap{transform:scaleX(.22)!important}
.fdx-box{background:#e11d1d!important;border-color:#e11d1d!important}
.fdx-box:after{opacity:1!important;transform:rotate(45deg) scale(1)!important}
}

.fdx-d1 .fdx-box,.fdx-d1 .fdx-box:after{animation-delay:0s}
.fdx-d2 .fdx-box,.fdx-d2 .fdx-box:after{animation-delay:.55s}
.fdx-d3 .fdx-box,.fdx-d3 .fdx-box:after{animation-delay:1.1s}
.fdx-d4 .fdx-box,.fdx-d4 .fdx-box:after{animation-delay:1.65s}
.fdx-d5 .fdx-box,.fdx-d5 .fdx-box:after{animation-delay:2.2s}

/* keep callouts in front of the 3D door leaf */
.fdx-card,.fdx-tag,.fdx-lens,.fdx-chip,.fdx-fault{transform:translateZ(90px)}
.fdx-scan,.fdx-sweep{transform:translateZ(96px)}
.fdx-gap{transform:translateZ(40px)}
@keyframes fdxCue{0%,6%{opacity:0;transform:translateZ(90px) translateY(9px) scale(.96)}14%,40%{opacity:1;transform:translateZ(90px)}50%,100%{opacity:0;transform:translateZ(90px) translateY(-6px) scale(.98)}}
@keyframes fdxFix{0%,54%{opacity:0;transform:translateZ(90px) translateY(9px) scale(.94)}62%,92%{opacity:1;transform:translateZ(90px)}100%{opacity:0;transform:translateZ(90px) scale(.96)}}
@keyframes fdxFault{0%,4%{opacity:0;transform:translateZ(90px) scale(.7)}12%,44%{opacity:1;transform:translateZ(90px)}52%,100%{opacity:0;transform:translateZ(90px) scale(.85)}}
@keyframes fdxGapFix{0%,46%{transform:translateZ(40px) scaleX(1)}62%,93%{transform:translateZ(40px) scaleX(.22)}100%{transform:translateZ(40px) scaleX(1)}}
@media (prefers-reduced-motion:reduce){.fdx-cue,.fdx-fix{transform:translateZ(90px)!important}.fdx-gap{transform:translateZ(40px) scaleX(.22)!important}}

.fdx-ghost{left:-80px;width:168px;height:286px;border-color:rgba(20,17,15,.16);background:linear-gradient(150deg,rgba(20,17,15,.08),rgba(20,17,15,.03))}
.fdx-ghost:after{opacity:.7;width:4px}

@media (max-width:980px){.fd-hero{overflow-x:hidden}}