
/* PAGE-SPECIFIC: Composite Floor Deck
   1) Hero: steel floor beams in isometric view, composite deck sheets laid across them one by one, then a
      dashed outline of the concrete slab rises over the deck (CONCRETE SLAB BY OTHERS) and tag FD-01 (15s loop).
   2) Statement frame: composite deck section with embossed ribs, dashed slab outline and a dimension line,
      a yellow highlight tracing the deck (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)}
.fd-hero{width:100%;height:auto}
.fd-hero line,.fd-hero polyline,.fd-hero polygon{fill:none;stroke:var(--art-on-light);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.fd-hero .fd-thin{stroke-width:.6}
.fd-hero .fd-slab0{stroke:var(--line-light);stroke-dasharray:3 3;stroke-width:.8}
.fd-hero .fd-plate{fill:var(--yellow);stroke:var(--black);stroke-width:.6}
.fd-hero .fd-face{fill:var(--off-white);fill-opacity:.92;stroke-width:.9}
.fd-hero .fd-rib{stroke-width:.5}
.fd-hero .fd-emb{stroke-width:.9}
.fd-hero .fd-edge{stroke-width:1.2}
.fd-hero .fd-conc polyline,.fd-hero .fd-conc line{stroke:var(--ink-muted);stroke-width:.9;stroke-dasharray:4 3}
.fd-hero text{font-family:var(--font-mono);font-size:6.6px;font-weight:600;letter-spacing:.04em;fill:var(--black)}
.fd-hero .fd-conc text{fill:var(--ink-muted);font-size:7px}
.fd-hero .fd-cap{font-size:7px;font-weight:500;letter-spacing:.06em}
.fd-hero .fd-tag rect{fill:var(--yellow);stroke:var(--black);stroke-width:.6}
.fd-hero .fd-tag line{stroke:var(--black);stroke-width:.5}
.fd-conc{animation:fd-conc 15s var(--ease-out) infinite}
.fd-tag{transform-box:fill-box;transform-origin:center;animation:fd-tag 15s var(--ease-out) infinite}
.fd-sheet.s0{animation:fd-s0 15s var(--ease-out) infinite}.fd-sheet.s1{animation:fd-s1 15s var(--ease-out) infinite}.fd-sheet.s2{animation:fd-s2 15s var(--ease-out) infinite}.fd-sheet.s3{animation:fd-s3 15s var(--ease-out) infinite}.fd-sheet.s4{animation:fd-s4 15s var(--ease-out) infinite}.fd-sheet.s5{animation:fd-s5 15s var(--ease-out) infinite}.fd-sheet.s6{animation:fd-s6 15s var(--ease-out) infinite}.fd-sheet.s7{animation:fd-s7 15s var(--ease-out) infinite}@keyframes fd-s0{0%,5.0%{opacity:0;transform:translateY(-34px)}9.0%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes fd-s1{0%,11.5%{opacity:0;transform:translateY(-34px)}15.5%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes fd-s2{0%,18.0%{opacity:0;transform:translateY(-34px)}22.0%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes fd-s3{0%,24.5%{opacity:0;transform:translateY(-34px)}28.5%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes fd-s4{0%,31.0%{opacity:0;transform:translateY(-34px)}35.0%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes fd-s5{0%,37.5%{opacity:0;transform:translateY(-34px)}41.5%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes fd-s6{0%,44.0%{opacity:0;transform:translateY(-34px)}48.0%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes fd-s7{0%,50.5%{opacity:0;transform:translateY(-34px)}54.5%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes fd-conc{0%,60%{opacity:0;transform:translateY(14px)}70%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes fd-tag{0%,74%{opacity:0;transform:scale(1.8)}77%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
.fd-sec{width:100%;height:auto}
.fd-sec .rs-grid line{stroke:var(--line-dark);stroke-width:1}
.fd-sec .ln{fill:none;stroke:var(--art-on-dark);stroke-width:1.2;stroke-linejoin:round}
.fd-sec .emb{stroke-width:2}
.fd-sec .slab{stroke:var(--text-on-dark-muted);stroke-dasharray:6 5}
.fd-sec .fs-hl{fill:none;stroke:var(--yellow);stroke-width:2.6;stroke-linejoin:round;stroke-dasharray:1;animation:fs-hl 10s var(--ease-draw) infinite}
@keyframes fs-hl{0%,8%{stroke-dashoffset:1;opacity:1}58%,88%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:0;opacity:0}}
