/* PAGE-SPECIFIC: Services
   1) Hero: three stacked layers (ENGINEERING, FABRICATION, SITE) draw in one after another, each with
      yellow tags (12s loop).
   2) Statement frame: engineering, fabrication, freight and border crossing drop into one package under a
      single all-inclusive price, erection shown as optional (10s loop).
   3) Grouped service card sections (3-column variant), .how-intro (same rule as the service pages).
   Base styles show the finished state, so the shared reduced-motion rule leaves complete drawings. */
.how-intro{max-width:60ch;margin:calc(var(--space-5) * -1) 0 var(--space-7)}
.cards.cols-3{grid-template-columns:repeat(3,1fr)}
.svc-group + .svc-group{border-top:1px solid var(--line-dark-strong)}
.svc-group .section-head .label{display:block;margin-bottom:var(--space-4)}
@media (max-width:1080px){.cards.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards.cols-3{grid-template-columns:1fr}}
.sl-hero{width:100%;height:auto;max-height:480px;margin-left:auto}
.sl-hero line,.sl-hero polyline{fill:none;stroke:var(--art-on-light);stroke-width:1.1;stroke-linecap:round;stroke-dasharray:1}
.sl-hero .sl-plane{stroke-width:1.2}
.sl-hero .sl-thin{stroke-width:.6}
.sl-hero .sl-dash{stroke:var(--ink-muted);stroke-width:.8}
.sl-hero .sl-con{stroke:var(--line-light);stroke-dasharray:3 3;stroke-width:.8}
.sl-hero .sl-dot{fill:var(--black)}
.sl-hero .sl-tag rect{fill:var(--yellow);stroke:var(--black);stroke-width:.6}
.sl-hero .sl-tag line{stroke:var(--black);stroke-width:.5;stroke-dasharray:none}
.sl-hero text{font-family:var(--font-mono);font-size:6.4px;font-weight:600;letter-spacing:.04em;fill:var(--black)}
.sl-hero .sl-name{font-size:8px;fill:var(--black)}
.sl-hero .sl-cap{font-size:7px;font-weight:500;letter-spacing:.06em}
.sl-tag{transform-box:fill-box;transform-origin:center}
.sl-layer.k0 [pathLength]{animation:sl-d0 12s var(--ease-draw) infinite}.sl-layer.k0 .sl-tag{animation:sl-t0 12s var(--ease-out) infinite}.sl-layer.k0 .sl-name{animation:sl-n0 12s linear infinite}.sl-layer.k1 [pathLength]{animation:sl-d1 12s var(--ease-draw) infinite}.sl-layer.k1 .sl-tag{animation:sl-t1 12s var(--ease-out) infinite}.sl-layer.k1 .sl-name{animation:sl-n1 12s linear infinite}.sl-layer.k2 [pathLength]{animation:sl-d2 12s var(--ease-draw) infinite}.sl-layer.k2 .sl-tag{animation:sl-t2 12s var(--ease-out) infinite}.sl-layer.k2 .sl-name{animation:sl-n2 12s linear infinite}@keyframes sl-d0{0%,4%{stroke-dashoffset:1;opacity:1}20%,90%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:0;opacity:0}}@keyframes sl-t0{0%,18%{opacity:0;transform:scale(1.6)}22%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}@keyframes sl-n0{0%,4%{fill:var(--ink-muted)}6%,22%{fill:var(--black)}24%,100%{fill:var(--ink-muted)}}@keyframes sl-d1{0%,26%{stroke-dashoffset:1;opacity:1}42%,90%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:0;opacity:0}}@keyframes sl-t1{0%,40%{opacity:0;transform:scale(1.6)}44%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}@keyframes sl-n1{0%,26%{fill:var(--ink-muted)}28%,44%{fill:var(--black)}46%,100%{fill:var(--ink-muted)}}@keyframes sl-d2{0%,48%{stroke-dashoffset:1;opacity:1}64%,90%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:0;opacity:0}}@keyframes sl-t2{0%,62%{opacity:0;transform:scale(1.6)}66%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}@keyframes sl-n2{0%,48%{fill:var(--ink-muted)}50%,66%{fill:var(--black)}68%,100%{fill:var(--ink-muted)}}
.sv-pack{width:100%;height:auto}
.sv-pack .ln{fill:none;stroke:var(--art-on-dark);stroke-width:1.4}
.sv-pack .faint{opacity:.5}
.sp-b rect{fill:var(--black-raised);stroke:var(--art-on-dark);stroke-width:1}
.sp-b text,.sp-opt text{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.08em;fill:var(--off-white)}
.sp-opt rect{fill:none;stroke:var(--text-on-dark-muted);stroke-width:1;stroke-dasharray:4 4}
.sp-opt text{fill:var(--text-on-dark-muted)}
.sp-price rect{fill:var(--yellow)}
.sp-price text{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.08em;fill:var(--black)}
.sp-opt{animation:sp-opt 10s linear infinite}
.sp-price{transform-box:fill-box;transform-origin:center;animation:sp-price 10s var(--ease-out) infinite}
.sp-b.b0{animation:sp-b0 10s cubic-bezier(.3,.7,.3,1) infinite}.sp-b.b1{animation:sp-b1 10s cubic-bezier(.3,.7,.3,1) infinite}.sp-b.b2{animation:sp-b2 10s cubic-bezier(.3,.7,.3,1) infinite}.sp-b.b3{animation:sp-b3 10s cubic-bezier(.3,.7,.3,1) infinite}@keyframes sp-b0{0%,6%{opacity:0;transform:translateY(-120px)}14%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}@keyframes sp-b1{0%,18%{opacity:0;transform:translateY(-120px)}26%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}@keyframes sp-b2{0%,30%{opacity:0;transform:translateY(-120px)}38%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}@keyframes sp-b3{0%,42%{opacity:0;transform:translateY(-120px)}50%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}@keyframes sp-opt{0%,56%{opacity:0}62%,90%{opacity:1}97%,100%{opacity:0}}@keyframes sp-price{0%,64%{opacity:0;transform:scale(1.3)}70%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}