/* PAGE-SPECIFIC: Steel Warehouses
   1) Hero: a long warehouse frame assembles bay by bay. Reuses the shared hero-frame / hf-* classes
      (columns rise, joist girders and joists drop, number tags); only the roof deck slide is new.
   2) Statement frame: roof cross-section, deck panels laid across the joists one by one (12s loop).
   Base styles show the finished state, so the shared reduced-motion rule leaves complete drawings.
   .how-intro is the same rule used on the previous service pages. */
.how-intro{max-width:60ch;margin:calc(var(--space-5) * -1) 0 var(--space-7)}
.hero-frame .ws-panel{fill:var(--off-white);fill-opacity:.9}
.ws-deck{transform-box:fill-box;animation:ws-deck .7s var(--ease-out) var(--d) both}
@keyframes ws-deck{from{opacity:0;transform:translate(112.6px,-65.0px)}to{opacity:1;transform:none}}
.ws-roof{width:100%;height:auto}
.ws-roof .ln{fill:none;stroke:var(--art-on-dark);stroke-width:1}
.ws-roof .faint{opacity:.45}
.wr-p polygon{fill:var(--black-raised);fill-opacity:.92;stroke:var(--art-on-dark);stroke-width:1;stroke-linejoin:round}
.wr-p line{stroke:var(--art-on-dark);stroke-width:.6;opacity:.6}
.wr-tag rect{fill:var(--yellow)}
.wr-tag line{stroke:var(--yellow);stroke-width:1}
.wr-tag text{font-family:var(--font-mono);font-size:11px;font-weight:600;fill:var(--black)}
.wr-p.p0{animation:wr-p0 12s var(--ease-out) infinite}.wr-p.p0 polygon{animation:wr-hl0 12s linear infinite}
.wr-p.p1{animation:wr-p1 12s var(--ease-out) infinite}.wr-p.p1 polygon{animation:wr-hl1 12s linear infinite}
.wr-p.p2{animation:wr-p2 12s var(--ease-out) infinite}.wr-p.p2 polygon{animation:wr-hl2 12s linear infinite}
.wr-p.p3{animation:wr-p3 12s var(--ease-out) infinite}.wr-p.p3 polygon{animation:wr-hl3 12s linear infinite}
.wr-p.p4{animation:wr-p4 12s var(--ease-out) infinite}.wr-p.p4 polygon{animation:wr-hl4 12s linear infinite}
.wr-p.p5{animation:wr-p5 12s var(--ease-out) infinite}.wr-p.p5 polygon{animation:wr-hl5 12s linear infinite}
.wr-p.p6{animation:wr-p6 12s var(--ease-out) infinite}.wr-p.p6 polygon{animation:wr-hl6 12s linear infinite}
.wr-p.p7{animation:wr-p7 12s var(--ease-out) infinite}.wr-p.p7 polygon{animation:wr-hl7 12s linear infinite}
.wr-p.p8{animation:wr-p8 12s var(--ease-out) infinite}.wr-p.p8 polygon{animation:wr-hl8 12s linear infinite}
.wr-p.p9{animation:wr-p9 12s var(--ease-out) infinite}.wr-p.p9 polygon{animation:wr-hl9 12s linear infinite}
@keyframes wr-p0{0%,4.0%{opacity:0;transform:translateY(-34px)}8.0%{opacity:1;transform:none}92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes wr-hl0{0%,7.0%{fill:var(--yellow);fill-opacity:.85}12.0%,100%{fill:var(--black-raised);fill-opacity:.92}}@keyframes wr-p1{0%,10.5%{opacity:0;transform:translateY(-34px)}14.5%{opacity:1;transform:none}92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes wr-hl1{0%,13.5%{fill:var(--yellow);fill-opacity:.85}18.5%,100%{fill:var(--black-raised);fill-opacity:.92}}@keyframes wr-p2{0%,17.0%{opacity:0;transform:translateY(-34px)}21.0%{opacity:1;transform:none}92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes wr-hl2{0%,20.0%{fill:var(--yellow);fill-opacity:.85}25.0%,100%{fill:var(--black-raised);fill-opacity:.92}}@keyframes wr-p3{0%,23.5%{opacity:0;transform:translateY(-34px)}27.5%{opacity:1;transform:none}92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes wr-hl3{0%,26.5%{fill:var(--yellow);fill-opacity:.85}31.5%,100%{fill:var(--black-raised);fill-opacity:.92}}@keyframes wr-p4{0%,30.0%{opacity:0;transform:translateY(-34px)}34.0%{opacity:1;transform:none}92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes wr-hl4{0%,33.0%{fill:var(--yellow);fill-opacity:.85}38.0%,100%{fill:var(--black-raised);fill-opacity:.92}}@keyframes wr-p5{0%,36.5%{opacity:0;transform:translateY(-34px)}40.5%{opacity:1;transform:none}92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes wr-hl5{0%,39.5%{fill:var(--yellow);fill-opacity:.85}44.5%,100%{fill:var(--black-raised);fill-opacity:.92}}@keyframes wr-p6{0%,43.0%{opacity:0;transform:translateY(-34px)}47.0%{opacity:1;transform:none}92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes wr-hl6{0%,46.0%{fill:var(--yellow);fill-opacity:.85}51.0%,100%{fill:var(--black-raised);fill-opacity:.92}}@keyframes wr-p7{0%,49.5%{opacity:0;transform:translateY(-34px)}53.5%{opacity:1;transform:none}92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes wr-hl7{0%,52.5%{fill:var(--yellow);fill-opacity:.85}57.5%,100%{fill:var(--black-raised);fill-opacity:.92}}@keyframes wr-p8{0%,56.0%{opacity:0;transform:translateY(-34px)}60.0%{opacity:1;transform:none}92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes wr-hl8{0%,59.0%{fill:var(--yellow);fill-opacity:.85}64.0%,100%{fill:var(--black-raised);fill-opacity:.92}}@keyframes wr-p9{0%,62.5%{opacity:0;transform:translateY(-34px)}66.5%{opacity:1;transform:none}92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes wr-hl9{0%,65.5%{fill:var(--yellow);fill-opacity:.85}70.5%,100%{fill:var(--black-raised);fill-opacity:.92}}