/* Sized miniature process scenes, scoped to the fabrication cards. */
.process-motion-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:46px;margin:-9px 0 18px;font-size:10px;letter-spacing:.035em;color:#677064}
.process-motion-toolbar button{min-height:44px;min-width:134px;background:transparent;border:1px solid #bbc2b4;border-radius:2px;color:#34462e;padding:9px 13px;font:inherit;letter-spacing:0;cursor:pointer}
.process-motion-toolbar button:hover{background:#e5e9de}
.process-motion-toolbar button:focus-visible{outline:3px solid #1459eb;outline-offset:3px}
.process-motion-toolbar button:disabled{cursor:default;color:#677064;background:transparent}
.fabrication-capabilities .capability-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;min-height:164px;margin-bottom:12px}
.fabrication-capabilities .capability-top>span{padding-top:13px;flex-shrink:0}
.fabrication-capabilities .capability-top svg.process-illustration{display:block;position:static;width:calc(100% - 34px);max-width:230px;height:auto;aspect-ratio:1.4;flex-shrink:1;stroke:none;overflow:visible}
@media(max-width:1100px) and (min-width:761px){.fabrication-capabilities .capability-top{min-height:147px}}
@media(max-width:760px){.process-motion-toolbar{margin:0 0 8px;font-size:9px}.process-motion-toolbar button{min-width:127px}.fabrication-capabilities .capability-top{min-height:140px;margin-bottom:7px;align-items:flex-start}.fabrication-capabilities .capability-top>span{padding-top:8px}.fabrication-capabilities .capability-top svg.process-illustration{width:196px;max-width:calc(100% - 40px);height:140px;margin-right:4px}.fabrication-capabilities .capability h3,.fabrication-capabilities .capability>p{max-width:100%}.fabrication-capabilities .capability>p{min-height:0}.fabrication-capabilities .small-link{margin-top:20px}}


/* Engineering line scenes. All cycles are static until the existing controller
   grants motion to a visible scene. No timers or extra event listeners. */
.process-illustration{display:block;width:100%;height:auto;overflow:visible;isolation:isolate}
.process-illustration [class]{transform-box:view-box}
/* Guarded wireframe laser cells. Shared 9.6 s cycles; transform/dash/opacity only.
   Sheet XY: (38,-9.5) and (16,7.27), matching the four contour segments.
   Tube: feed 10 px, pause/index 60 degrees, pause, then a 28 px axial slot.
   Cutting switches off before either head lifts or makes its rapid return. */
.process-illustration--sheet-laser .pi-sheet-x{animation:pi-sheet-axis-x 9.6s linear infinite}
.process-illustration--sheet-laser .pi-sheet-y{animation:pi-sheet-axis-y 9.6s linear infinite}
.process-illustration--sheet-laser .pi-sheet-z{transform:translateY(-4px);animation:pi-sheet-axis-z 9.6s linear infinite}
.process-illustration--sheet-laser .pi-sheet-contour{stroke-dasharray:113.487429;animation:pi-sheet-contour-cut 9.6s linear infinite}
.process-illustration--sheet-laser .pi-sheet-cut{animation:pi-sheet-cut-on 9.6s linear infinite}
.process-illustration--tube-laser .pi-tube-stock{animation:pi-tube-axis-feed 9.6s ease-in-out infinite}
.process-illustration--tube-laser .pi-tube-index{transform-box:view-box;transform-origin:0px 0px;animation:pi-tube-chuck-index 9.6s ease-in-out infinite}
.process-illustration--tube-laser .pi-tube-traverse{animation:pi-tube-axis-cut 9.6s linear infinite}
.process-illustration--tube-laser .pi-tube-z{transform:translateY(-4px);animation:pi-tube-axis-z 9.6s linear infinite}
.process-illustration--tube-laser .pi-tube-slot{stroke-dasharray:28;animation:pi-tube-slot-cut 9.6s linear infinite}
.process-illustration--tube-laser .pi-tube-cut{animation:pi-tube-cut-on 9.6s linear infinite}

@keyframes pi-sheet-axis-x{
  0%,10%,96%,100%{transform:translate(-9px,2.25px)}
  18%,21%{transform:translate(0,0)}
  40%,51%{transform:translate(38px,-9.5px)}
  70%,88%{transform:translate(0,0)}
}
@keyframes pi-sheet-axis-y{
  0%,40%,81%,100%{transform:translate(0,0)}
  51%,70%{transform:translate(16px,7.27px)}
}
@keyframes pi-sheet-axis-z{
  0%,14%,88%,100%{transform:translateY(-4px)}
  19%,83%{transform:translateY(0)}
}
@keyframes pi-sheet-contour-cut{
  0%,21%{stroke-dashoffset:113.487429;opacity:1}
  40%{stroke-dashoffset:74.317926;opacity:1}
  51%{stroke-dashoffset:56.743715;opacity:1}
  70%{stroke-dashoffset:17.574211;opacity:1}
  81%,94%{stroke-dashoffset:0;opacity:1}
  97%,100%{stroke-dashoffset:0;opacity:0}
}
@keyframes pi-sheet-cut-on{
  0%,20.9%,81.1%,100%{opacity:0}
  21%,81%{opacity:.85}
}
@keyframes pi-tube-axis-feed{
  0%,10%,97%,100%{transform:translateX(0)}
  22%,86%{transform:translateX(10px)}
}
@keyframes pi-tube-chuck-index{
  0%,24%,97%,100%{transform:rotate(0deg)}
  30%,86%{transform:rotate(60deg)}
}
@keyframes pi-tube-axis-cut{
  0%,38%,91%,100%{transform:translateX(0)}
  66%,76%{transform:translateX(28px)}
}
@keyframes pi-tube-axis-z{
  0%,31%,74%,100%{transform:translateY(-4px)}
  36%,68%{transform:translateY(0)}
}
@keyframes pi-tube-slot-cut{
  0%,38%{stroke-dashoffset:28;opacity:1}
  66%,85%{stroke-dashoffset:0;opacity:1}
  88%,100%{stroke-dashoffset:0;opacity:0}
}
@keyframes pi-tube-cut-on{
  0%,37.9%,66.1%,100%{opacity:0}
  38%,66%{opacity:.85}
}
.process-illustration--sheet-laser [class],.process-illustration--tube-laser [class]{animation-play-state:paused}
.is-animating .process-illustration--sheet-laser [class],.is-animating .process-illustration--tube-laser [class],.process-illustration--sheet-laser.is-animating [class],.process-illustration--tube-laser.is-animating [class]{animation-play-state:running}
@media(prefers-reduced-motion:reduce){
  .process-illustration--sheet-laser [class],.process-illustration--tube-laser [class]{animation:none!important;animation-play-state:paused!important}
  .process-illustration--sheet-laser .pi-sheet-contour,.process-illustration--tube-laser .pi-tube-slot{stroke-dashoffset:0;opacity:1}
  .process-illustration--sheet-laser .pi-sheet-cut,.process-illustration--tube-laser .pi-tube-cut{opacity:0}
}

/* Tube bending motion; press brake has its own coordinated tool cycle below. */

@media(prefers-reduced-motion:no-preference){
.process-illustration--tube-bending [class]{transform-box:view-box}
.process-illustration--tube-bending .pi-bender-drive,
.process-illustration--tube-bending .pi-bender-die,
.process-illustration--tube-bending .pi-bender-tangent,
.process-illustration--tube-bending .pi-bender-clamp-carrier{transform-origin:150px 105px}
.process-illustration--tube-bending .pi-bender-incoming{transform-origin:150px 76px}

  .process-illustration--tube-bending .pi-bender-drive,
  .process-illustration--tube-bending .pi-bender-die,
  .process-illustration--tube-bending .pi-bender-tangent,
  .process-illustration--tube-bending .pi-bender-clamp-carrier{animation:pi-form-tube-angle 9.6s linear infinite}
  .process-illustration--tube-bending .pi-bender-incoming{animation:pi-form-tube-draw 9.6s linear infinite}
  .process-illustration--tube-bending .pi-bender-arc{animation:pi-form-tube-arc 9.6s linear infinite}
  .process-illustration--tube-bending .pi-bender-material{animation:pi-form-material-change 9.6s linear infinite}
  .process-illustration--tube-bending .pi-bender-clamp{animation:pi-form-tube-clamp 9.6s linear infinite}





  .process-illustration.process-illustration--tube-bending [class]{animation-play-state:paused}
  .is-animating .process-illustration.process-illustration--tube-bending [class],
  .process-illustration.process-illustration--tube-bending.is-animating [class]{animation-play-state:running}
}
@keyframes pi-form-material-change{
  0%,12%,28%,100%{opacity:1}
  16%,22%{opacity:0}
}
@keyframes pi-form-tube-angle{
  0%,16%{transform:rotate(90deg)}
  22%,44%{transform:rotate(0deg)}
  68%,100%{transform:rotate(90deg)}
}
@keyframes pi-form-tube-draw{
  0%,16%{transform:scaleX(.632636)}
  22%,44%{transform:scaleX(1)}
  68%,100%{transform:scaleX(.632636)}
}
@keyframes pi-form-tube-arc{
  0%,16%{stroke-dashoffset:0}
  22%,44%{stroke-dashoffset:45.553}
  68%,100%{stroke-dashoffset:0}
}
@keyframes pi-form-tube-clamp{
  0%,38%{transform:translateY(-5px)}
  44%,76%{transform:translateY(0)}
  84%,100%{transform:translateY(-5px)}
}







/* Press-brake-only motion. The static illustration retains its formed sheet.
   The ram runs on fixed guides; the material stays seated on the V-die.
   Reset occurs only while the workpiece is invisible. */
@media (prefers-reduced-motion: no-preference) {
  .process-illustration--press-brake [class] { transform-box: view-box; }
  .process-illustration--press-brake .pi-press-flange-left,
  .process-illustration--press-brake .pi-press-flange-right { transform-origin: 136px 134.5px; }
  .process-illustration--press-brake .pi-press-ram { animation: pi-press-stroke 9.6s linear infinite; }
  .process-illustration--press-brake .pi-press-material { animation: pi-press-change 9.6s linear infinite; }
  .process-illustration--press-brake .pi-press-bend { animation: pi-press-depth 9.6s linear infinite; }
  .process-illustration--press-brake .pi-press-flange-left { animation: pi-press-left 9.6s linear infinite; }
  .process-illustration--press-brake .pi-press-flange-right { animation: pi-press-right 9.6s linear infinite; }
  .process-illustration.process-illustration--press-brake [class] { animation-play-state: paused; }
  .is-animating .process-illustration.process-illustration--press-brake [class],
  .process-illustration.process-illustration--press-brake.is-animating [class] { animation-play-state: running; }
}
@keyframes pi-press-change {
  0%, 12%, 28%, 100% { opacity: 1; }
  16%, 22% { opacity: 0; }
}
/* The 1.5-unit stock half-thickness is included in shoulder contact.
   Bend depth = 22*tan(angle) - 1.5*(sec(angle)-1). */
@keyframes pi-press-stroke {
  0%, 38% { transform: translateY(0); }
  44% { transform: translateY(13px); }
  48% { transform: translateY(15.69000px); }
  52% { transform: translateY(18.43930px); }
  56% { transform: translateY(21.33829px); }
  60% { transform: translateY(24.49875px); }
  64% { transform: translateY(28.07340px); }
  68%, 76% { transform: translateY(32.29044px); }
  88%, 100% { transform: translateY(0); }
}
@keyframes pi-press-depth {
  0%, 16% { transform: translateY(19.29044px); }
  22%, 44% { transform: translateY(0); }
  48% { transform: translateY(2.69000px); }
  52% { transform: translateY(5.43930px); }
  56% { transform: translateY(8.33829px); }
  60% { transform: translateY(11.49875px); }
  64% { transform: translateY(15.07340px); }
  68%, 100% { transform: translateY(19.29044px); }
}
@keyframes pi-press-left {
  0%, 16% { transform: rotate(42deg); }
  22%, 44% { transform: rotate(0deg); }
  48% { transform: rotate(7deg); }
  52% { transform: rotate(14deg); }
  56% { transform: rotate(21deg); }
  60% { transform: rotate(28deg); }
  64% { transform: rotate(35deg); }
  68%, 100% { transform: rotate(42deg); }
}
@keyframes pi-press-right {
  0%, 16% { transform: rotate(-42deg); }
  22%, 44% { transform: rotate(0deg); }
  48% { transform: rotate(-7deg); }
  52% { transform: rotate(-14deg); }
  56% { transform: rotate(-21deg); }
  60% { transform: rotate(-28deg); }
  64% { transform: rotate(-35deg); }
  68%, 100% { transform: rotate(-42deg); }
}

/* Wireframe welding scenes. 9 s: approach, weld, lift, return, reset.
   The matching bead and tool keyframes share one linear 14–66% pass.
   SVG attributes supply the same useful midpoint when motion is disabled. */
.process-illustration--welding .pi-wire-weld-travel {
  animation: pi-wire-weld-pass 9s linear -3.6s infinite;
  animation-play-state: paused;
  transform-box: view-box;
  transform: translate(37px, -17px);
}
.process-illustration--welding .pi-wire-weld-bead {
  animation: pi-wire-weld-deposit 9s linear -3.6s infinite;
  animation-play-state: paused;
}
.process-illustration--welding .pi-wire-weld-glow {
  animation: pi-wire-weld-active 9s linear -3.6s infinite;
  animation-play-state: paused;
}
.process-illustration--welding .pi-wire-weld-sparks {
  animation: pi-wire-weld-spark-cycle 9s linear -3.6s infinite;
  animation-play-state: paused;
}
.process-illustration--handheld-laser-welding .pi-wire-laser-travel {
  animation: pi-wire-laser-pass 9s linear -3.6s infinite;
  animation-play-state: paused;
  transform-box: view-box;
  transform: translate(37.5px, -17px);
}
.process-illustration--handheld-laser-welding .pi-wire-laser-bead {
  animation: pi-wire-laser-deposit 9s linear -3.6s infinite;
  animation-play-state: paused;
}
.process-illustration--handheld-laser-welding .pi-wire-laser-glow {
  animation: pi-wire-weld-active 9s linear -3.6s infinite;
  animation-play-state: paused;
}
/* Retain the page's single motion control for both root and ancestor states. */
.is-animating .process-illustration--welding [class],
.is-animating .process-illustration--handheld-laser-welding [class],
.process-illustration--welding.is-animating [class],
.process-illustration--handheld-laser-welding.is-animating [class] {
  animation-play-state: running;
}
@keyframes pi-wire-weld-pass {
  0% { transform: translate(-4px, -14px); }
  8%, 14% { transform: translate(0, 0); }
  66%, 72% { transform: translate(74px, -34px); }
  80% { transform: translate(70px, -48px); }
  92%, 100% { transform: translate(-4px, -14px); }
}
@keyframes pi-wire-laser-pass {
  0% { transform: translate(-4px, -14px); }
  8%, 14% { transform: translate(0, 0); }
  66%, 72% { transform: translate(75px, -34px); }
  80% { transform: translate(71px, -48px); }
  92%, 100% { transform: translate(-4px, -14px); }
}
@keyframes pi-wire-weld-deposit {
  0%, 14% { stroke-dashoffset: 81.437092; opacity: 1; }
  66%, 90% { stroke-dashoffset: 0; opacity: 1; }
  94% { stroke-dashoffset: 0; opacity: 0; }
  94.01%, 100% { stroke-dashoffset: 81.437092; opacity: 0; }
}
@keyframes pi-wire-laser-deposit {
  0%, 14% { stroke-dashoffset: 82.346827; opacity: 1; }
  66%, 90% { stroke-dashoffset: 0; opacity: 1; }
  94% { stroke-dashoffset: 0; opacity: 0; }
  94.01%, 100% { stroke-dashoffset: 82.346827; opacity: 0; }
}
@keyframes pi-wire-weld-active {
  0%, 13.99% { opacity: 0; }
  14%, 65.99% { opacity: .72; }
  66%, 100% { opacity: 0; }
}
@keyframes pi-wire-weld-spark-cycle {
  0%, 16%, 28%, 38%, 51%, 61%, 66%, 100% { opacity: 0; }
  20%, 32%, 43%, 55% { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .process-illustration--welding [class],
  .process-illustration--handheld-laser-welding [class] {
    animation: none !important;
    animation-play-state: paused !important;
  }
  .process-illustration--welding .pi-wire-weld-glow,
  .process-illustration--welding .pi-wire-weld-sparks,
  .process-illustration--handheld-laser-welding .pi-wire-laser-glow { opacity: 0; }
}

.process-illustration [class]{animation-play-state:paused}
.is-animating .process-illustration [class],.process-illustration.is-animating [class]{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.process-illustration *,.is-animating .process-illustration *,.process-illustration.is-animating *{animation:none!important;animation-play-state:paused!important}}