/* PAGE-SPECIFIC: Metal Roof Deck
   1) Hero: steel joists in isometric view, corrugated deck sheets laid across them one by one, a yellow
      fastener point flashing where each sheet lands, then tag RD-01 (14s loop).
   2) Statement frame: fluted deck profile cross-section on a technical grid with a dimension line,
      a yellow highlight tracing one rib (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)}
.rd-hero{width:100%;height:auto}
.rd-hero line,.rd-hero polyline,.rd-hero polygon{fill:none;stroke:var(--art-on-light);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.rd-hero .rd-thin{stroke-width:.6}
.rd-hero .rd-slab{stroke:var(--line-light);stroke-dasharray:3 3;stroke-width:.8}
.rd-hero .rd-plate{fill:var(--yellow);stroke:var(--black);stroke-width:.6}
.rd-hero .rd-face{fill:var(--off-white);fill-opacity:.92;stroke-width:.9}
.rd-hero .rd-rib{stroke-width:.5}
.rd-hero .rd-edge{stroke-width:1.2}
.rd-hero text{font-family:var(--font-mono);font-size:6.6px;font-weight:600;fill:var(--black)}
.rd-hero .rd-cap{font-size:7px;font-weight:500;letter-spacing:.06em}
.rd-hero .rd-tag rect{fill:var(--yellow);stroke:var(--black);stroke-width:.6}
.rd-hero .rd-tag line{stroke:var(--black);stroke-width:.5}
.rd-tag{transform-box:fill-box;transform-origin:center;animation:rd-tag 14s var(--ease-out) infinite}
.rd-fast{opacity:0}
.rd-fast .core{fill:var(--yellow);stroke:var(--black);stroke-width:.5}
.rd-fast .halo{fill:var(--yellow);opacity:.35;transform-box:fill-box;transform-origin:center;animation:spark-pulse .3s ease-in-out infinite alternate}
.rd-sheet.s0{animation:rd-s0 14s var(--ease-out) infinite}.rd-fast.f0{animation:rd-f0 14s linear infinite}.rd-sheet.s1{animation:rd-s1 14s var(--ease-out) infinite}.rd-fast.f1{animation:rd-f1 14s linear infinite}.rd-sheet.s2{animation:rd-s2 14s var(--ease-out) infinite}.rd-fast.f2{animation:rd-f2 14s linear infinite}.rd-sheet.s3{animation:rd-s3 14s var(--ease-out) infinite}.rd-fast.f3{animation:rd-f3 14s linear infinite}.rd-sheet.s4{animation:rd-s4 14s var(--ease-out) infinite}.rd-fast.f4{animation:rd-f4 14s linear infinite}.rd-sheet.s5{animation:rd-s5 14s var(--ease-out) infinite}.rd-fast.f5{animation:rd-f5 14s linear infinite}.rd-sheet.s6{animation:rd-s6 14s var(--ease-out) infinite}.rd-fast.f6{animation:rd-f6 14s linear infinite}.rd-sheet.s7{animation:rd-s7 14s var(--ease-out) infinite}.rd-fast.f7{animation:rd-f7 14s linear infinite}@keyframes rd-s0{0%,5.0%{opacity:0;transform:translateY(-34px)}9.0%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes rd-f0{0%,9.0%{opacity:0}9.6%,13.0%{opacity:1}14.5%,100%{opacity:0}}@keyframes rd-s1{0%,13.5%{opacity:0;transform:translateY(-34px)}17.5%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes rd-f1{0%,17.5%{opacity:0}18.1%,21.5%{opacity:1}23.0%,100%{opacity:0}}@keyframes rd-s2{0%,22.0%{opacity:0;transform:translateY(-34px)}26.0%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes rd-f2{0%,26.0%{opacity:0}26.6%,30.0%{opacity:1}31.5%,100%{opacity:0}}@keyframes rd-s3{0%,30.5%{opacity:0;transform:translateY(-34px)}34.5%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes rd-f3{0%,34.5%{opacity:0}35.1%,38.5%{opacity:1}40.0%,100%{opacity:0}}@keyframes rd-s4{0%,39.0%{opacity:0;transform:translateY(-34px)}43.0%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes rd-f4{0%,43.0%{opacity:0}43.6%,47.0%{opacity:1}48.5%,100%{opacity:0}}@keyframes rd-s5{0%,47.5%{opacity:0;transform:translateY(-34px)}51.5%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes rd-f5{0%,51.5%{opacity:0}52.1%,55.5%{opacity:1}57.0%,100%{opacity:0}}@keyframes rd-s6{0%,56.0%{opacity:0;transform:translateY(-34px)}60.0%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes rd-f6{0%,60.0%{opacity:0}60.6%,64.0%{opacity:1}65.5%,100%{opacity:0}}@keyframes rd-s7{0%,64.5%{opacity:0;transform:translateY(-34px)}68.5%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes rd-f7{0%,68.5%{opacity:0}69.1%,72.5%{opacity:1}74.0%,100%{opacity:0}}@keyframes rd-tag{0%,78%{opacity:0;transform:scale(1.8)}81%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
.rd-sec{width:100%;height:auto}
.rd-sec .rs-grid line{stroke:var(--line-dark);stroke-width:1}
.rd-sec .ln{fill:none;stroke:var(--art-on-dark);stroke-width:1.2;stroke-linejoin:round}
.rd-sec .rs-hl{fill:none;stroke:var(--yellow);stroke-width:3;stroke-linejoin:round;stroke-dasharray:1;animation:rs-hl 10s var(--ease-draw) infinite}
.rs-tag rect{fill:var(--yellow)}
.rs-tag text{font-family:var(--font-mono);font-size:10px;font-weight:600;fill:var(--black)}
.rs-tag{animation:rs-tag 10s linear infinite}
@keyframes rs-hl{0%,6%{stroke-dashoffset:1;opacity:1}46%,86%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}@keyframes rs-tag{0%,44%{opacity:0}50%,86%{opacity:1}96%,100%{opacity:0}}