/* PAGE-SPECIFIC: Steel Detailing & Design
   1) Hero: a two-bay Tekla-style frame model assembles piece by piece (reuses the shared hero-frame /
      hf-* classes); each piece gets a mono piece mark and its connection bolts, then a yellow APPROVED tag.
   2) Statement frame: a shop drawing of one beam drawn line by line: outline, bolt holes, dimension
      lines, then the yellow piece mark B-101 (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 .dt-mark rect{fill:var(--off-white);stroke:var(--black);stroke-width:.4}
.hero-frame .dt-mark text{fill:var(--black);font-weight:600;font-size:5.6px}
.hero-frame .dt-bolt{fill:var(--black);stroke:none}
.hero-frame .dt-axis line{stroke:var(--ink-muted);stroke-width:.7}
.hero-frame .dt-ok rect{fill:var(--yellow);stroke:var(--black);stroke-width:.6}
.hero-frame .dt-ok line{stroke:var(--black);stroke-width:.5}
.hero-frame .dt-ok text{fill:var(--black);font-weight:600;font-size:7.4px;letter-spacing:.06em}
.dt-late{animation:hf-fade .3s linear calc(var(--d) + .45s) both}
.dt-ok{transform-box:fill-box;transform-origin:center;animation:dt-stamp .5s var(--ease-out) var(--d) both}
@keyframes dt-stamp{from{opacity:0;transform:scale(1.8)}to{opacity:1;transform:none}}
.dt-shop{width:100%;height:auto}
.dt-shop .ds-sheet rect,.dt-shop .ds-sheet line{fill:none;stroke:var(--line-dark-strong);stroke-width:1}
.dt-shop .ds-el line,.dt-shop .ds-el path,.dt-shop .ds-el circle{fill:none;stroke:var(--art-on-dark);stroke-width:1.1;stroke-dasharray:1}
.dt-shop .ds-d line,.dt-shop .ds-d path{stroke:var(--text-on-dark-muted);stroke-width:.8}
.dt-shop .ds-txt text{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;fill:var(--text-on-dark-muted)}
.dt-shop .ds-mark rect{fill:var(--yellow)}
.dt-shop .ds-mark text{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.04em;fill:var(--black)}
.ds-txt{animation:ds-txt 12s linear infinite}
.ds-mark{transform-box:fill-box;transform-origin:center;animation:ds-mark 12s var(--ease-out) infinite}
.ds-el.e0 *{animation:ds-e0 12s var(--ease-draw) infinite}.ds-el.e1 *{animation:ds-e1 12s var(--ease-draw) infinite}.ds-el.e2 *{animation:ds-e2 12s var(--ease-draw) infinite}.ds-el.e3 *{animation:ds-e3 12s var(--ease-draw) infinite}.ds-el.e4 *{animation:ds-e4 12s var(--ease-draw) infinite}.ds-el.e5 *{animation:ds-e5 12s var(--ease-draw) infinite}.ds-el.e6 *{animation:ds-e6 12s var(--ease-draw) infinite}.ds-el.e7 *{animation:ds-e7 12s var(--ease-draw) infinite}.ds-el.e8 *{animation:ds-e8 12s var(--ease-draw) infinite}.ds-el.e9 *{animation:ds-e9 12s var(--ease-draw) infinite}.ds-el.e10 *{animation:ds-e10 12s var(--ease-draw) infinite}.ds-el.e11 *{animation:ds-e11 12s var(--ease-draw) infinite}.ds-el.e12 *{animation:ds-e12 12s var(--ease-draw) infinite}.ds-el.e13 *{animation:ds-e13 12s var(--ease-draw) infinite}.ds-el.e14 *{animation:ds-e14 12s var(--ease-draw) infinite}.ds-el.e15 *{animation:ds-e15 12s var(--ease-draw) infinite}.ds-el.e16 *{animation:ds-e16 12s var(--ease-draw) infinite}.ds-el.e17 *{animation:ds-e17 12s var(--ease-draw) infinite}.ds-el.e18 *{animation:ds-e18 12s var(--ease-draw) infinite}.ds-el.e19 *{animation:ds-e19 12s var(--ease-draw) infinite}.ds-el.e20 *{animation:ds-e20 12s var(--ease-draw) infinite}.ds-el.e21 *{animation:ds-e21 12s var(--ease-draw) infinite}.ds-el.e22 *{animation:ds-e22 12s var(--ease-draw) infinite}.ds-el.e23 *{animation:ds-e23 12s var(--ease-draw) infinite}.ds-el.e24 *{animation:ds-e24 12s var(--ease-draw) infinite}.ds-el.e25 *{animation:ds-e25 12s var(--ease-draw) infinite}.ds-el.e26 *{animation:ds-e26 12s var(--ease-draw) infinite}.ds-el.e27 *{animation:ds-e27 12s var(--ease-draw) infinite}@keyframes ds-e0{0%,3.0%{stroke-dashoffset:1;opacity:1}7.0%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e1{0%,5.0%{stroke-dashoffset:1;opacity:1}9.0%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e2{0%,6.9%{stroke-dashoffset:1;opacity:1}10.9%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e3{0%,8.9%{stroke-dashoffset:1;opacity:1}12.9%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e4{0%,10.9%{stroke-dashoffset:1;opacity:1}14.9%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e5{0%,12.8%{stroke-dashoffset:1;opacity:1}16.8%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e6{0%,14.8%{stroke-dashoffset:1;opacity:1}18.8%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e7{0%,16.8%{stroke-dashoffset:1;opacity:1}20.8%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e8{0%,18.7%{stroke-dashoffset:1;opacity:1}22.7%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e9{0%,20.7%{stroke-dashoffset:1;opacity:1}24.7%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e10{0%,22.6%{stroke-dashoffset:1;opacity:1}26.6%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e11{0%,24.6%{stroke-dashoffset:1;opacity:1}28.6%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e12{0%,26.6%{stroke-dashoffset:1;opacity:1}30.6%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e13{0%,28.5%{stroke-dashoffset:1;opacity:1}32.5%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e14{0%,30.5%{stroke-dashoffset:1;opacity:1}34.5%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e15{0%,32.5%{stroke-dashoffset:1;opacity:1}36.5%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e16{0%,34.4%{stroke-dashoffset:1;opacity:1}38.4%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e17{0%,36.4%{stroke-dashoffset:1;opacity:1}40.4%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e18{0%,38.4%{stroke-dashoffset:1;opacity:1}42.4%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e19{0%,40.3%{stroke-dashoffset:1;opacity:1}44.3%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e20{0%,42.3%{stroke-dashoffset:1;opacity:1}46.3%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e21{0%,44.2%{stroke-dashoffset:1;opacity:1}48.2%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e22{0%,46.2%{stroke-dashoffset:1;opacity:1}50.2%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e23{0%,48.2%{stroke-dashoffset:1;opacity:1}52.2%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e24{0%,50.1%{stroke-dashoffset:1;opacity:1}54.1%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e25{0%,52.1%{stroke-dashoffset:1;opacity:1}56.1%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e26{0%,54.1%{stroke-dashoffset:1;opacity:1}58.1%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-e27{0%,56.0%{stroke-dashoffset:1;opacity:1}60.0%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ds-txt{0%,58%{opacity:0}63%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ds-mark{0%,64%{opacity:0;transform:scale(1.6)}68%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}