/* PAGE-SPECIFIC: Steel Joists & Joist Girders
   1) Hero: an open web steel joist is built on a jig: bottom and top chords laid down, web members
      welded in one by one with yellow spark points, then a number tag is stamped on it (14s loop).
   2) Statement frame: a joist girder between two columns, steel joists set across it one by one,
      each with a yellow number tag (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 */
.jh{width:100%;height:auto}
.jh line,.jh polyline{fill:none;stroke:var(--art-on-light);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.jh .jh-jig polyline,.jh .jh-jig line{stroke:var(--ink-muted);stroke-width:.7}
.jh .jh-jig .jh-faint{stroke:var(--line-light)}
.jh .jh-jig .jh-post{stroke:var(--ink-muted);stroke-width:1}
.jh .jh-jig .jh-dim{stroke:var(--ink-muted);stroke-width:.6}
.jh .jh-jig circle{fill:none;stroke:var(--ink-muted);stroke-width:.6}
.jh text{font-family:var(--font-mono);font-size:6.5px;font-weight:500;letter-spacing:.04em;fill:var(--ink-muted)}
.jh .jh-cap{font-size:7px;letter-spacing:.06em;fill:var(--black)}
.jh .jh-w{stroke-width:1;stroke-dasharray:1}
.jh-s{opacity:0}
.jh-s .core{fill:var(--yellow);stroke:var(--black);stroke-width:.4}
.jh-s .halo{fill:var(--yellow);opacity:.35;transform-box:fill-box;transform-origin:center;animation:spark-pulse .3s ease-in-out infinite alternate}
.jh .jh-tag rect{fill:var(--yellow);stroke:var(--black);stroke-width:.6}
.jh .jh-tag line{stroke:var(--black);stroke-width:.5}
.jh .jh-tag text{fill:var(--black);font-weight:600;font-size:6.6px}
.jh-tag{transform-box:fill-box;transform-origin:center;animation:jh-tag 14s var(--ease-out) infinite}
.jh-bot{animation:jh-bot 14s var(--ease-out) infinite}
.jh-top{animation:jh-top 14s var(--ease-out) infinite}
.jh-end{animation:jh-end 14s linear infinite}
.jh-w.w0{animation:jh-w0 14s linear infinite}.jh-s.s0a{animation:jh-s0a 14s linear infinite}.jh-s.s0b{animation:jh-s0b 14s linear infinite}.jh-w.w1{animation:jh-w1 14s linear infinite}.jh-s.s1a{animation:jh-s1a 14s linear infinite}.jh-s.s1b{animation:jh-s1b 14s linear infinite}.jh-w.w2{animation:jh-w2 14s linear infinite}.jh-s.s2a{animation:jh-s2a 14s linear infinite}.jh-s.s2b{animation:jh-s2b 14s linear infinite}.jh-w.w3{animation:jh-w3 14s linear infinite}.jh-s.s3a{animation:jh-s3a 14s linear infinite}.jh-s.s3b{animation:jh-s3b 14s linear infinite}.jh-w.w4{animation:jh-w4 14s linear infinite}.jh-s.s4a{animation:jh-s4a 14s linear infinite}.jh-s.s4b{animation:jh-s4b 14s linear infinite}.jh-w.w5{animation:jh-w5 14s linear infinite}.jh-s.s5a{animation:jh-s5a 14s linear infinite}.jh-s.s5b{animation:jh-s5b 14s linear infinite}.jh-w.w6{animation:jh-w6 14s linear infinite}.jh-s.s6a{animation:jh-s6a 14s linear infinite}.jh-s.s6b{animation:jh-s6b 14s linear infinite}.jh-w.w7{animation:jh-w7 14s linear infinite}.jh-s.s7a{animation:jh-s7a 14s linear infinite}.jh-s.s7b{animation:jh-s7b 14s linear infinite}.jh-w.w8{animation:jh-w8 14s linear infinite}.jh-s.s8a{animation:jh-s8a 14s linear infinite}.jh-s.s8b{animation:jh-s8b 14s linear infinite}.jh-w.w9{animation:jh-w9 14s linear infinite}.jh-s.s9a{animation:jh-s9a 14s linear infinite}.jh-s.s9b{animation:jh-s9b 14s linear infinite}.jh-w.w10{animation:jh-w10 14s linear infinite}.jh-s.s10a{animation:jh-s10a 14s linear infinite}.jh-s.s10b{animation:jh-s10b 14s linear infinite}.jh-w.w11{animation:jh-w11 14s linear infinite}.jh-s.s11a{animation:jh-s11a 14s linear infinite}.jh-s.s11b{animation:jh-s11b 14s linear infinite}.jh-w.w12{animation:jh-w12 14s linear infinite}.jh-s.s12a{animation:jh-s12a 14s linear infinite}.jh-s.s12b{animation:jh-s12b 14s linear infinite}.jh-w.w13{animation:jh-w13 14s linear infinite}.jh-s.s13a{animation:jh-s13a 14s linear infinite}.jh-s.s13b{animation:jh-s13b 14s linear infinite}.jh-w.w14{animation:jh-w14 14s linear infinite}.jh-s.s14a{animation:jh-s14a 14s linear infinite}.jh-s.s14b{animation:jh-s14b 14s linear infinite}.jh-w.w15{animation:jh-w15 14s linear infinite}.jh-s.s15a{animation:jh-s15a 14s linear infinite}.jh-s.s15b{animation:jh-s15b 14s linear infinite}.jh-w.w16{animation:jh-w16 14s linear infinite}.jh-s.s16a{animation:jh-s16a 14s linear infinite}.jh-s.s16b{animation:jh-s16b 14s linear infinite}.jh-w.w17{animation:jh-w17 14s linear infinite}.jh-s.s17a{animation:jh-s17a 14s linear infinite}.jh-s.s17b{animation:jh-s17b 14s linear infinite}
@keyframes jh-bot{0%{opacity:0;transform:translate(-103.9px,-60.0px)}2%{opacity:1;transform:translate(-103.9px,-60.0px)}8%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes jh-top{0%,7%{opacity:0;transform:translate(0,-30px)}14%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes jh-end{0%,14%{opacity:0}16%,94%{opacity:1}98%,100%{opacity:0}}@keyframes jh-w0{0%,17.0%{stroke-dashoffset:1;opacity:1}19.3%,94%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes jh-s0a{0%,17.2%{opacity:0}17.6%,20.2%{opacity:1}21.5%,100%{opacity:0}}@keyframes jh-s0b{0%,19.0%{opacity:0}19.4%,22.0%{opacity:1}23.3%,100%{opacity:0}}@keyframes jh-w1{0%,20.3%{stroke-dashoffset:1;opacity:1}22.7%,94%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes jh-s1a{0%,20.5%{opacity:0}20.9%,23.5%{opacity:1}24.8%,100%{opacity:0}}@keyframes jh-s1b{0%,22.3%{opacity:0}22.7%,25.3%{opacity:1}26.7%,100%{opacity:0}}@keyframes jh-w2{0%,23.7%{stroke-dashoffset:1;opacity:1}26.0%,94%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes jh-s2a{0%,23.9%{opacity:0}24.3%,26.9%{opacity:1}28.2%,100%{opacity:0}}@keyframes jh-s2b{0%,25.7%{opacity:0}26.1%,28.7%{opacity:1}30.0%,100%{opacity:0}}@keyframes jh-w3{0%,27.0%{stroke-dashoffset:1;opacity:1}29.3%,94%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes jh-s3a{0%,27.2%{opacity:0}27.6%,30.2%{opacity:1}31.5%,100%{opacity:0}}@keyframes jh-s3b{0%,29.0%{opacity:0}29.4%,32.0%{opacity:1}33.3%,100%{opacity:0}}@keyframes jh-w4{0%,30.3%{stroke-dashoffset:1;opacity:1}32.7%,94%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes jh-s4a{0%,30.5%{opacity:0}30.9%,33.5%{opacity:1}34.8%,100%{opacity:0}}@keyframes jh-s4b{0%,32.3%{opacity:0}32.7%,35.3%{opacity:1}36.7%,100%{opacity:0}}@keyframes jh-w5{0%,33.7%{stroke-dashoffset:1;opacity:1}36.0%,94%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes jh-s5a{0%,33.9%{opacity:0}34.3%,36.9%{opacity:1}38.2%,100%{opacity:0}}@keyframes jh-s5b{0%,35.7%{opacity:0}36.1%,38.7%{opacity:1}40.0%,100%{opacity:0}}@keyframes jh-w6{0%,37.0%{stroke-dashoffset:1;opacity:1}39.3%,94%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes jh-s6a{0%,37.2%{opacity:0}37.6%,40.2%{opacity:1}41.5%,100%{opacity:0}}@keyframes jh-s6b{0%,39.0%{opacity:0}39.4%,42.0%{opacity:1}43.3%,100%{opacity:0}}@keyframes jh-w7{0%,40.3%{stroke-dashoffset:1;opacity:1}42.7%,94%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes jh-s7a{0%,40.5%{opacity:0}40.9%,43.5%{opacity:1}44.8%,100%{opacity:0}}@keyframes jh-s7b{0%,42.3%{opacity:0}42.7%,45.3%{opacity:1}46.7%,100%{opacity:0}}@keyframes jh-w8{0%,43.7%{stroke-dashoffset:1;opacity:1}46.0%,94%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes jh-s8a{0%,43.9%{opacity:0}44.3%,46.9%{opacity:1}48.2%,100%{opacity:0}}@keyframes jh-s8b{0%,45.7%{opacity:0}46.1%,48.7%{opacity:1}50.0%,100%{opacity:0}}@keyframes jh-w9{0%,47.0%{stroke-dashoffset:1;opacity:1}49.3%,94%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes jh-s9a{0%,47.2%{opacity:0}47.6%,50.2%{opacity:1}51.5%,100%{opacity:0}}@keyframes jh-s9b{0%,49.0%{opacity:0}49.4%,52.0%{opacity:1}53.3%,100%{opacity:0}}@keyframes jh-w10{0%,50.3%{stroke-dashoffset:1;opacity:1}52.7%,94%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes jh-s10a{0%,50.5%{opacity:0}50.9%,53.5%{opacity:1}54.8%,100%{opacity:0}}@keyframes jh-s10b{0%,52.3%{opacity:0}52.7%,55.3%{opacity:1}56.7%,100%{opacity:0}}@keyframes jh-w11{0%,53.7%{stroke-dashoffset:1;opacity:1}56.0%,94%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes jh-s11a{0%,53.9%{opacity:0}54.3%,56.9%{opacity:1}58.2%,100%{opacity:0}}@keyframes jh-s11b{0%,55.7%{opacity:0}56.1%,58.7%{opacity:1}60.0%,100%{opacity:0}}@keyframes jh-w12{0%,57.0%{stroke-dashoffset:1;opacity:1}59.3%,94%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes jh-s12a{0%,57.2%{opacity:0}57.6%,60.2%{opacity:1}61.5%,100%{opacity:0}}@keyframes jh-s12b{0%,59.0%{opacity:0}59.4%,62.0%{opacity:1}63.3%,100%{opacity:0}}@keyframes jh-w13{0%,60.3%{stroke-dashoffset:1;opacity:1}62.7%,94%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes jh-s13a{0%,60.5%{opacity:0}60.9%,63.5%{opacity:1}64.8%,100%{opacity:0}}@keyframes jh-s13b{0%,62.3%{opacity:0}62.7%,65.3%{opacity:1}66.7%,100%{opacity:0}}@keyframes jh-w14{0%,63.7%{stroke-dashoffset:1;opacity:1}66.0%,94%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes jh-s14a{0%,63.9%{opacity:0}64.3%,66.9%{opacity:1}68.2%,100%{opacity:0}}@keyframes jh-s14b{0%,65.7%{opacity:0}66.1%,68.7%{opacity:1}70.0%,100%{opacity:0}}@keyframes jh-w15{0%,67.0%{stroke-dashoffset:1;opacity:1}69.3%,94%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes jh-s15a{0%,67.2%{opacity:0}67.6%,70.2%{opacity:1}71.5%,100%{opacity:0}}@keyframes jh-s15b{0%,69.0%{opacity:0}69.4%,72.0%{opacity:1}73.3%,100%{opacity:0}}@keyframes jh-w16{0%,70.3%{stroke-dashoffset:1;opacity:1}72.7%,94%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes jh-s16a{0%,70.5%{opacity:0}70.9%,73.5%{opacity:1}74.8%,100%{opacity:0}}@keyframes jh-s16b{0%,72.3%{opacity:0}72.7%,75.3%{opacity:1}76.7%,100%{opacity:0}}@keyframes jh-w17{0%,73.7%{stroke-dashoffset:1;opacity:1}76.0%,94%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes jh-s17a{0%,73.9%{opacity:0}74.3%,76.9%{opacity:1}78.2%,100%{opacity:0}}@keyframes jh-s17b{0%,75.7%{opacity:0}76.1%,78.7%{opacity:1}80.0%,100%{opacity:0}}@keyframes jh-tag{0%,80%{opacity:0;transform:scale(1.8)}83%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
/* joist girder (dark) */
.jg{width:100%;height:auto}
.jg .ln{fill:none;stroke:var(--art-on-dark);stroke-width:1}
.jg .faint{opacity:.45}
.jg-j line,.jg-j polyline{fill:none;stroke:var(--art-on-dark);stroke-width:1.1}
.jg-j .thin{stroke-width:.6;opacity:.7}
.jg-tag rect{fill:var(--yellow)}
.jg-tag text{font-family:var(--font-mono);font-size:8px;font-weight:600;fill:var(--black)}
.jg-j.j0{animation:jg-j0 12s var(--ease-out) infinite}.jg-j.j1{animation:jg-j1 12s var(--ease-out) infinite}.jg-j.j2{animation:jg-j2 12s var(--ease-out) infinite}.jg-j.j3{animation:jg-j3 12s var(--ease-out) infinite}.jg-j.j4{animation:jg-j4 12s var(--ease-out) infinite}.jg-j.j5{animation:jg-j5 12s var(--ease-out) infinite}.jg-j.j6{animation:jg-j6 12s var(--ease-out) infinite}.jg-j.j7{animation:jg-j7 12s var(--ease-out) infinite}
@keyframes jg-j0{0%,4%{opacity:0;transform:translateY(-36px)}8%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes jg-j1{0%,13%{opacity:0;transform:translateY(-36px)}17%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes jg-j2{0%,22%{opacity:0;transform:translateY(-36px)}26%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes jg-j3{0%,31%{opacity:0;transform:translateY(-36px)}35%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes jg-j4{0%,40%{opacity:0;transform:translateY(-36px)}44%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes jg-j5{0%,49%{opacity:0;transform:translateY(-36px)}53%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes jg-j6{0%,58%{opacity:0;transform:translateY(-36px)}62%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes jg-j7{0%,67%{opacity:0;transform:translateY(-36px)}71%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}