/* PAGE-SPECIFIC: Structural Steel Contractor
   1) Hero: an isometric frame built in four phases while mono labels light up: ENGINEER (grid and
      dashed columns), FABRICATE (columns turn solid with number tags), DELIVER (a truck crosses below),
      ERECT (beams, joists and deck land), then tag ONE CONTRACT (16s loop).
   2) Statement frame: a four-segment timeline drawn in sequence under one yellow bracket (10s 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)}
.sc-hero{width:100%;height:auto;max-height:480px;margin-left:auto}
.sc-hero line,.sc-hero polygon,.sc-hero path,.sc-hero rect,.sc-hero circle{fill:none;stroke:var(--art-on-light);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.sc-hero .sc-thin{stroke-width:.6}
.sc-hero .sc-grid line,.sc-hero .sc-grid circle{stroke:var(--line-light);stroke-width:.7}
.sc-hero .sc-grid circle{stroke:var(--ink-muted);stroke-width:.6}
.sc-hero .sc-dash line{stroke:var(--ink-muted);stroke-width:.8;stroke-dasharray:3 3}
.sc-hero .sc-plate{fill:var(--yellow);stroke:var(--black);stroke-width:.6}
.sc-hero .sc-deck{fill:var(--off-white);fill-opacity:.9;stroke-width:.9}
.sc-hero text{font-family:var(--font-mono);font-size:6.6px;font-weight:600;letter-spacing:.04em;fill:var(--black)}
.sc-hero .sc-grid text{fill:var(--ink-muted);font-weight:500;font-size:6px}
.sc-hero .sc-ph rect{fill:transparent;stroke:var(--black);stroke-width:.7}
.sc-hero .sc-ph text{font-size:7px}
.sc-hero .sc-ctag rect,.sc-hero .sc-one rect,.sc-hero .sc-ttag rect{fill:var(--yellow);stroke:var(--black);stroke-width:.6}
.sc-hero .sc-one line{stroke:var(--black);stroke-width:.5}
.sc-hero .sc-one text{font-size:7.2px}
.sc-hero .sc-truck rect,.sc-hero .sc-truck path{fill:var(--off-white)}
.sc-hero .sc-road{stroke:var(--line-light);stroke-width:1}
.sc-ctag{opacity:0}
.sc-truck{transform:translateX(-110px);animation:sc-truck 16s cubic-bezier(.45,0,.35,1) infinite}
.sc-one{transform-box:fill-box;transform-origin:center;animation:sc-one 16s var(--ease-out) infinite}
.sc-dash{animation:sc-dash 16s linear infinite}
.sc-grid{animation:sc-grid 16s linear infinite}
.sc-ph.ph0 rect{animation:sc-ph0 16s linear infinite}.sc-ph.ph1 rect{animation:sc-ph1 16s linear infinite}.sc-ph.ph2 rect{animation:sc-ph2 16s linear infinite}.sc-ph.ph3 rect{animation:sc-ph3 16s linear infinite}.sc-col.c0{animation:sc-c0 16s linear infinite}.sc-ctag.t0{animation:sc-t0 16s linear infinite}.sc-col.c1{animation:sc-c1 16s linear infinite}.sc-ctag.t1{animation:sc-t1 16s linear infinite}.sc-col.c2{animation:sc-c2 16s linear infinite}.sc-ctag.t2{animation:sc-t2 16s linear infinite}.sc-col.c3{animation:sc-c3 16s linear infinite}.sc-ctag.t3{animation:sc-t3 16s linear infinite}.sc-col.c4{animation:sc-c4 16s linear infinite}.sc-ctag.t4{animation:sc-t4 16s linear infinite}.sc-col.c5{animation:sc-c5 16s linear infinite}.sc-ctag.t5{animation:sc-t5 16s linear infinite}.sc-col.c6{animation:sc-c6 16s linear infinite}.sc-ctag.t6{animation:sc-t6 16s linear infinite}.sc-col.c7{animation:sc-c7 16s linear infinite}.sc-ctag.t7{animation:sc-t7 16s linear infinite}.sc-er.e0{animation:sc-e0 16s var(--ease-out) infinite}.sc-er.e1{animation:sc-e1 16s var(--ease-out) infinite}.sc-er.e2{animation:sc-e2 16s var(--ease-out) infinite}.sc-er.e3{animation:sc-e3 16s var(--ease-out) infinite}.sc-er.e4{animation:sc-e4 16s var(--ease-out) infinite}.sc-er.e5{animation:sc-e5 16s var(--ease-out) infinite}.sc-er.e6{animation:sc-e6 16s var(--ease-out) infinite}.sc-er.e7{animation:sc-e7 16s var(--ease-out) infinite}.sc-er.e8{animation:sc-e8 16s var(--ease-out) infinite}.sc-er.e9{animation:sc-e9 16s var(--ease-out) infinite}.sc-er.e10{animation:sc-e10 16s var(--ease-out) infinite}.sc-er.e11{animation:sc-e11 16s var(--ease-out) infinite}.sc-er.e12{animation:sc-e12 16s var(--ease-out) infinite}.sc-er.e13{animation:sc-e13 16s var(--ease-out) infinite}.sc-er.e14{animation:sc-e14 16s var(--ease-out) infinite}.sc-er.e15{animation:sc-e15 16s var(--ease-out) infinite}.sc-er.e16{animation:sc-e16 16s var(--ease-out) infinite}.sc-er.e17{animation:sc-e17 16s var(--ease-out) infinite}.sc-er.e18{animation:sc-e18 16s var(--ease-out) infinite}.sc-er.e19{animation:sc-e19 16s var(--ease-out) infinite}.sc-er.e20{animation:sc-e20 16s var(--ease-out) infinite}.sc-er.e21{animation:sc-e21 16s var(--ease-out) infinite}@keyframes sc-ph0{0%,0%{fill:transparent}1%,20%{fill:var(--yellow)}21%,100%{fill:transparent}}@keyframes sc-ph1{0%,20%{fill:transparent}21%,40%{fill:var(--yellow)}41%,100%{fill:transparent}}@keyframes sc-ph2{0%,40%{fill:transparent}41%,60%{fill:var(--yellow)}61%,100%{fill:transparent}}@keyframes sc-ph3{0%,60%{fill:transparent}61%,86%{fill:var(--yellow)}87%,100%{fill:transparent}}@keyframes sc-dash{0%,1%{opacity:0}10%,100%{opacity:1}}@keyframes sc-grid{0%{opacity:0}6%,100%{opacity:1}}@keyframes sc-c0{0%,22.0%{opacity:0}23.5%,96%{opacity:1}99%,100%{opacity:0}}@keyframes sc-t0{0%,23.0%{opacity:0}24.0%,40%{opacity:1}43%,100%{opacity:0}}@keyframes sc-c1{0%,23.8%{opacity:0}25.3%,96%{opacity:1}99%,100%{opacity:0}}@keyframes sc-t1{0%,24.8%{opacity:0}25.8%,40%{opacity:1}43%,100%{opacity:0}}@keyframes sc-c2{0%,25.6%{opacity:0}27.1%,96%{opacity:1}99%,100%{opacity:0}}@keyframes sc-t2{0%,26.6%{opacity:0}27.6%,40%{opacity:1}43%,100%{opacity:0}}@keyframes sc-c3{0%,27.4%{opacity:0}28.9%,96%{opacity:1}99%,100%{opacity:0}}@keyframes sc-t3{0%,28.4%{opacity:0}29.4%,40%{opacity:1}43%,100%{opacity:0}}@keyframes sc-c4{0%,29.2%{opacity:0}30.7%,96%{opacity:1}99%,100%{opacity:0}}@keyframes sc-t4{0%,30.2%{opacity:0}31.2%,40%{opacity:1}43%,100%{opacity:0}}@keyframes sc-c5{0%,31.0%{opacity:0}32.5%,96%{opacity:1}99%,100%{opacity:0}}@keyframes sc-t5{0%,32.0%{opacity:0}33.0%,40%{opacity:1}43%,100%{opacity:0}}@keyframes sc-c6{0%,32.8%{opacity:0}34.3%,96%{opacity:1}99%,100%{opacity:0}}@keyframes sc-t6{0%,33.8%{opacity:0}34.8%,40%{opacity:1}43%,100%{opacity:0}}@keyframes sc-c7{0%,34.6%{opacity:0}36.1%,96%{opacity:1}99%,100%{opacity:0}}@keyframes sc-t7{0%,35.6%{opacity:0}36.6%,40%{opacity:1}43%,100%{opacity:0}}@keyframes sc-e0{0%,61.0%{opacity:0;transform:translateY(-30px)}63.5%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e1{0%,62.2%{opacity:0;transform:translateY(-30px)}64.7%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e2{0%,63.4%{opacity:0;transform:translateY(-30px)}65.9%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e3{0%,64.6%{opacity:0;transform:translateY(-30px)}67.1%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e4{0%,65.8%{opacity:0;transform:translateY(-30px)}68.3%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e5{0%,67.0%{opacity:0;transform:translateY(-30px)}69.5%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e6{0%,68.2%{opacity:0;transform:translateY(-30px)}70.7%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e7{0%,69.4%{opacity:0;transform:translateY(-30px)}71.9%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e8{0%,70.6%{opacity:0;transform:translateY(-30px)}73.1%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e9{0%,71.8%{opacity:0;transform:translateY(-30px)}74.3%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e10{0%,74.0%{opacity:0;transform:translateY(-30px)}76.5%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e11{0%,74.7%{opacity:0;transform:translateY(-30px)}77.2%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e12{0%,75.4%{opacity:0;transform:translateY(-30px)}77.9%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e13{0%,76.1%{opacity:0;transform:translateY(-30px)}78.6%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e14{0%,76.8%{opacity:0;transform:translateY(-30px)}79.3%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e15{0%,77.5%{opacity:0;transform:translateY(-30px)}80.0%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e16{0%,78.2%{opacity:0;transform:translateY(-30px)}80.7%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e17{0%,78.9%{opacity:0;transform:translateY(-30px)}81.4%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e18{0%,79.6%{opacity:0;transform:translateY(-30px)}82.1%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e19{0%,81.5%{opacity:0;transform:translateY(-30px)}84.0%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e20{0%,82.9%{opacity:0;transform:translateY(-30px)}85.4%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-e21{0%,84.3%{opacity:0;transform:translateY(-30px)}86.8%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}@keyframes sc-truck{0%,40%{transform:translateX(-110px)}60%,100%{transform:translateX(407px)}}@keyframes sc-one{0%,87%{opacity:0;transform:scale(1.6)}90%,96%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.sc-tl{width:100%;height:auto}
.sc-tl .ln{fill:none;stroke:var(--art-on-dark);stroke-width:1}
.sc-tl .faint{opacity:.35}
.tl-seg .bar{stroke:var(--off-white);stroke-width:4;stroke-dasharray:1}
.tl-seg circle{fill:var(--black);stroke:var(--art-on-dark);stroke-width:1.4}
.tl-seg .nm{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.06em;fill:var(--off-white)}
.tl-seg .sb{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;fill:var(--text-on-dark-muted)}
.tl-br{fill:none;stroke:var(--yellow);stroke-width:2;stroke-dasharray:1;animation:tl-br 10s var(--ease-draw) infinite}
.tl-lbl rect{fill:var(--yellow)}
.tl-lbl text{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.06em;fill:var(--black)}
.tl-lbl{animation:tl-lbl 10s linear infinite}
.tl-seg.g0 .bar{animation:tl-b0 10s var(--ease-draw) infinite}.tl-seg.g0 circle,.tl-seg.g0 text{animation:tl-t0 10s linear infinite}.tl-seg.g1 .bar{animation:tl-b1 10s var(--ease-draw) infinite}.tl-seg.g1 circle,.tl-seg.g1 text{animation:tl-t1 10s linear infinite}.tl-seg.g2 .bar{animation:tl-b2 10s var(--ease-draw) infinite}.tl-seg.g2 circle,.tl-seg.g2 text{animation:tl-t2 10s linear infinite}.tl-seg.g3 .bar{animation:tl-b3 10s var(--ease-draw) infinite}.tl-seg.g3 circle,.tl-seg.g3 text{animation:tl-t3 10s linear infinite}@keyframes tl-b0{0%,4%{stroke-dashoffset:1}16%,90%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:0;opacity:0}}@keyframes tl-t0{0%,4%{opacity:0}8%,90%{opacity:1}97%,100%{opacity:0}}@keyframes tl-b1{0%,19%{stroke-dashoffset:1}31%,90%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:0;opacity:0}}@keyframes tl-t1{0%,19%{opacity:0}23%,90%{opacity:1}97%,100%{opacity:0}}@keyframes tl-b2{0%,34%{stroke-dashoffset:1}46%,90%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:0;opacity:0}}@keyframes tl-t2{0%,34%{opacity:0}38%,90%{opacity:1}97%,100%{opacity:0}}@keyframes tl-b3{0%,49%{stroke-dashoffset:1}61%,90%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:0;opacity:0}}@keyframes tl-t3{0%,49%{opacity:0}53%,90%{opacity:1}97%,100%{opacity:0}}@keyframes tl-br{0%,66%{stroke-dashoffset:1;opacity:1}78%,90%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:0;opacity:0}}@keyframes tl-lbl{0%,76%{opacity:0}80%,90%{opacity:1}97%,100%{opacity:0}}