/* PAGE-SPECIFIC: Industrial Steel Buildings
   1) Hero: a tall industrial frame with a mezzanine assembles (reuses the shared hero-frame / hf-* classes):
      columns rise, beams land, composite deck fills the mezzanine, joists and roof deck cover the roof,
      then a yellow tag IND-01.
   2) Statement frame: plan view on a column grid A-F / 1-6, bays filling one by one, then the mezzanine
      bay highlighted in yellow (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.in-hero{max-height:480px;margin-left:auto}
.hero-frame .in-panel{fill:var(--off-white);fill-opacity:.9;stroke-width:.9}
.hero-frame .in-tag rect{fill:var(--yellow);stroke:var(--black);stroke-width:.6}
.hero-frame .in-tag line{stroke:var(--black);stroke-width:.5}
.hero-frame .in-tag text{fill:var(--black);font-weight:600;font-size:7.4px;letter-spacing:.06em}
.hero-frame .hf-done text{font-size:7px}
.in-tag{transform-box:fill-box;transform-origin:center;animation:in-stamp .5s var(--ease-out) var(--d) both}
@keyframes in-stamp{from{opacity:0;transform:scale(1.8)}to{opacity:1;transform:none}}
.in-plan{width:100%;height:auto}
.in-plan .ln{fill:none;stroke:var(--art-on-dark);stroke-width:1}
.in-plan .faint{opacity:.4;stroke-dasharray:6 4}
.in-plan .bub{font-family:var(--font-mono);font-size:10px;font-weight:600;fill:var(--off-white)}
.ip-bay rect{fill:var(--black-raised);stroke:var(--line-dark-strong);stroke-width:1}
.ip-bay line{stroke:var(--text-on-dark-muted);stroke-width:.6;opacity:.6}
.ip-col{fill:var(--art-on-dark)}
.ip-mez rect{fill:var(--yellow);fill-opacity:.25;stroke:var(--yellow);stroke-width:2}
.ip-mez text{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.08em;fill:var(--yellow)}
.ip-mez{animation:ip-mez 12s linear infinite}
.ip-bay.b0{animation:ip-b0 12s linear infinite}.ip-bay.b1{animation:ip-b1 12s linear infinite}.ip-bay.b2{animation:ip-b2 12s linear infinite}.ip-bay.b3{animation:ip-b3 12s linear infinite}.ip-bay.b4{animation:ip-b4 12s linear infinite}.ip-bay.b5{animation:ip-b5 12s linear infinite}.ip-bay.b6{animation:ip-b6 12s linear infinite}.ip-bay.b7{animation:ip-b7 12s linear infinite}.ip-bay.b8{animation:ip-b8 12s linear infinite}.ip-bay.b9{animation:ip-b9 12s linear infinite}.ip-bay.b10{animation:ip-b10 12s linear infinite}.ip-bay.b11{animation:ip-b11 12s linear infinite}.ip-bay.b12{animation:ip-b12 12s linear infinite}.ip-bay.b13{animation:ip-b13 12s linear infinite}.ip-bay.b14{animation:ip-b14 12s linear infinite}.ip-bay.b15{animation:ip-b15 12s linear infinite}.ip-bay.b16{animation:ip-b16 12s linear infinite}.ip-bay.b17{animation:ip-b17 12s linear infinite}.ip-bay.b18{animation:ip-b18 12s linear infinite}.ip-bay.b19{animation:ip-b19 12s linear infinite}.ip-bay.b20{animation:ip-b20 12s linear infinite}.ip-bay.b21{animation:ip-b21 12s linear infinite}.ip-bay.b22{animation:ip-b22 12s linear infinite}.ip-bay.b23{animation:ip-b23 12s linear infinite}.ip-bay.b24{animation:ip-b24 12s linear infinite}@keyframes ip-b0{0%,3.0%{opacity:0}5.4%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b1{0%,5.4%{opacity:0}7.8%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b2{0%,7.8%{opacity:0}10.2%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b3{0%,10.2%{opacity:0}12.6%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b4{0%,12.6%{opacity:0}15.0%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b5{0%,15.0%{opacity:0}17.4%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b6{0%,17.4%{opacity:0}19.8%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b7{0%,19.8%{opacity:0}22.2%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b8{0%,22.2%{opacity:0}24.6%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b9{0%,24.6%{opacity:0}27.0%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b10{0%,27.0%{opacity:0}29.4%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b11{0%,29.4%{opacity:0}31.8%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b12{0%,31.8%{opacity:0}34.2%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b13{0%,34.2%{opacity:0}36.6%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b14{0%,36.6%{opacity:0}39.0%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b15{0%,39.0%{opacity:0}41.4%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b16{0%,41.4%{opacity:0}43.8%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b17{0%,43.8%{opacity:0}46.2%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b18{0%,46.2%{opacity:0}48.6%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b19{0%,48.6%{opacity:0}51.0%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b20{0%,51.0%{opacity:0}53.4%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b21{0%,53.4%{opacity:0}55.8%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b22{0%,55.8%{opacity:0}58.2%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b23{0%,58.2%{opacity:0}60.6%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-b24{0%,60.6%{opacity:0}63.0%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ip-mez{0%,66%{opacity:0}72%,92%{opacity:1}98%,100%{opacity:0}}