/* Motion follows the plant: liquid, heat exchange and moving air. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-red:#f23d57}
.hero h1>span{overflow:hidden;padding-bottom:.075em;margin-bottom:-.075em}
.hero h1>span>span{display:block;transform-origin:left bottom}
.hero-image>img{animation:none}
.hero-flow{width:108px;height:300px;top:64px;right:35px;opacity:.85;pointer-events:none}
.hero-flow .pipe-guide{stroke:#ffffff40;stroke-width:1;fill:none}
.hero-flow .pipe-highlight{fill:none;stroke:#ff425d;stroke-width:2;stroke-linecap:round;stroke-dasharray:22 160;animation:pipe-flow 9s linear infinite}
.hero-flow .pipe-highlight:nth-of-type(5){animation-delay:-3s}
.hero-flow .pipe-highlight:nth-of-type(6){animation-delay:-6s}
.hero-flow .pipe-terminal{fill:#26312d;stroke:#ff425d;stroke-width:1.5}
.hero-motion-control{position:absolute;right:26px;top:22px;width:30px;height:30px;border:1px solid #ffffff60;color:#fff;display:grid;place-items:center;z-index:3;background:#20262650;font-size:10px;letter-spacing:2px;transition:background .25s}
.hero-motion-control:hover{background:#202626}.hero-motion-control[aria-pressed=true]{letter-spacing:0}
.hero-motion-control[hidden],.no-js .hero-motion-control{display:none}
.header-progress{position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* The connecting pipes sit on the same centreline as the three machines. */
.flow-diagram{gap:0;margin-top:50px;isolation:isolate}
.flow-diagram::before,.flow-diagram::after{display:none}
.pipe-network{position:absolute;top:0;left:0;width:100%;height:220px;pointer-events:none;z-index:-1;overflow:visible}
.pipe-network path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.pipe-network .pipe-guide{stroke:#626e66;stroke-width:1;opacity:.7}
.pipe-network .pipe-return{stroke:#626e66;stroke-width:1;opacity:.4}
.pipe-network .pipe-current{stroke:var(--motion-red);stroke-width:2;stroke-dasharray:28 230;animation:process-current 6s linear infinite}
.pipe-network .pipe-current.return{stroke:#d2dcd5;stroke-width:1;stroke-dasharray:14 230;animation-direction:reverse;animation-duration:8s;opacity:.65}
.pipe-network circle{fill:var(--ink);stroke:#758178;stroke-width:1;vector-effect:non-scaling-stroke}
.flow-node{padding:0 28px 25px;border-bottom:1px solid #59605b;color:#bac4bd;position:relative;transition:color .6s var(--motion-ease)}
.flow-node+.flow-node{margin-left:24px}
.flow-node::after{content:'';position:absolute;height:2px;left:0;right:0;bottom:-1px;background:var(--motion-red);transform:scaleX(0);transform-origin:left;transition:transform .65s var(--motion-ease)}
.flow-node[aria-pressed=true]{border-color:#59605b}
.flow-node[aria-pressed=true]::after{transform:scaleX(1)}
.flow-node .diagram-symbol{width:220px;height:220px;max-width:100%;margin:0 auto 20px;background:var(--ink);position:relative;transition:color .5s}
.diagram-symbol svg{width:200px;height:200px;max-width:100%;stroke-width:1;transition:opacity .6s,transform .6s var(--motion-ease);opacity:.55}
.flow-node[aria-pressed=true] .diagram-symbol svg,.flow-node:hover .diagram-symbol svg{opacity:1;transform:translateY(-3px)}
.flow-node strong{transition:color .4s}.flow-node[aria-pressed=true] strong{color:#fff}
.flow-node strong .arrow{font-size:18px;opacity:.5;transform:rotate(-45deg);transition:transform .4s,opacity .4s}
.flow-node[aria-pressed=true] strong .arrow{opacity:1;transform:rotate(0)}
.flow-node small{color:#a5afa8}
.diagram-caption{padding-top:6px;min-height:91px}
.diagram-caption p{line-height:1.8}
.diagram-control{display:flex;align-items:center;gap:9px;transition:color .3s,border-color .3s;background:none}
.diagram-control::before{content:'';display:block;width:4px;height:8px;border-inline:1px solid currentColor}
.diagram-control[aria-pressed=true]::before{width:0;height:0;border:4px solid transparent;border-right:0;border-left:6px solid currentColor}
.diagram-control:hover{color:#fff;border-color:#b2bab5}.diagram-control:disabled{opacity:.6;cursor:default}

/* Machine parts use SVG transforms and path offsets, without canvas or video. */
.machine-outline{stroke:currentColor;fill:none}
.machine-fluid{fill:var(--motion-red);fill-opacity:.12;stroke:none;transform-origin:60px 79px;animation:water-level 5s ease-in-out infinite}
.water-surface{stroke:var(--motion-red);stroke-width:1.1;fill:none;animation:water-level 5s ease-in-out infinite}
.water-bubble{fill:var(--motion-red);stroke:none;animation:bubble-rise 3.6s linear infinite}
.water-bubble.second{animation-delay:-1.2s;animation-duration:4.2s}.water-bubble.third{animation-delay:-2.5s}
.flow-trace{stroke:var(--motion-red);fill:none;stroke-width:1.3;stroke-dasharray:8 45;animation:machine-flow 4s linear infinite}
.flow-trace.secondary{stroke:currentColor;opacity:.55;animation-direction:reverse;animation-delay:-1.6s}
.heat-core{fill:var(--motion-red);stroke:none;opacity:.07;animation:thermal-cycle 5s ease-in-out infinite}
.heat-plate{stroke:currentColor;opacity:.45;stroke-width:.65}
.fan-rotor{transform-origin:60px 60px;animation:fan-turn 9s linear infinite}
.fan-rotor path{fill:currentColor;fill-opacity:.08;stroke-width:1}
.fan-center{fill:var(--ink);stroke:var(--motion-red)}
.air-stream{stroke:var(--motion-red);fill:none;stroke-dasharray:10 35;animation:air-drift 3s linear infinite;stroke-width:1}
.air-stream.second{animation-delay:-1s}.air-stream.third{animation-delay:-2s}
.line-icon .fan-rotor,.line-icon .water-bubble,.line-icon .water-surface,.line-icon .machine-fluid,.line-icon .flow-trace,.line-icon .heat-core,.line-icon .air-stream{animation-play-state:paused}
.line-icon .fan-center,.detail-art .fan-center{fill:#e8ece6}
.detail-art>svg{width:220px;height:220px;padding:20px}
.detail-art::after{display:none}.detail-art::before{background:#c1cbc2;opacity:.6}
.service-row{position:relative;isolation:isolate;transition:color .3s}
.service-row::before{content:'';position:absolute;inset:0 -12px;background:var(--paper);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--motion-ease)}
.service-row:hover{padding-left:0}.service-row h3{transition:transform .5s var(--motion-ease),color .3s}.service-row:hover h3{transform:translateX(4px);color:var(--red)}
.service-row:hover::before{transform:scaleX(1)}.service-row>.arrow{transition:transform .5s var(--motion-ease)}.service-row:hover>.arrow{transform:translate(3px,-3px)}
.service-row:hover .line-icon *{animation-play-state:running}
.industry-links a .arrow{transition:transform .45s var(--motion-ease)}.industry-links a:hover .arrow{transform:translate(4px,-4px)}
.editorial-photo img{transition:transform 1.2s var(--motion-ease)}
@media(hover:hover) and (pointer:fine){.editorial-photo:hover img{transform:scale(1.035)}}
.button{position:relative;isolation:isolate;overflow:hidden}.button::before{content:'';position:absolute;inset:0;background:#0000000c;transform:translateX(-101%);transition:transform .5s var(--motion-ease);z-index:-1}.button:hover::before{transform:translateX(0)}
.text-link .arrow{transition:transform .5s var(--motion-ease)}.text-link:hover .arrow{transform:translate(3px,-3px)}

@media(prefers-reduced-motion:no-preference){
 .motion-enhanced .hero h1>span>span{animation:word-arrival 1.15s var(--motion-ease) both}
 .motion-enhanced .hero h1>span:nth-child(2)>span{animation-delay:.13s}
 .motion-enhanced .hero h1>span:nth-child(3)>span{animation-delay:.26s}
 .motion-enhanced .hero-copy>.eyebrow{animation:soft-arrival .9s var(--motion-ease) .05s both}
 .motion-enhanced .hero-intro{animation:soft-arrival 1s var(--motion-ease) .35s both}
 .motion-enhanced .hero-actions{animation:soft-arrival 1s var(--motion-ease) .48s both}
 .motion-enhanced .hero-image>img{transform:translate3d(0,var(--hero-shift,0px),0) scale(1.09);animation:photo-arrival 1.8s var(--motion-ease) both}
 .motion-enhanced .hero-caption{animation:soft-arrival 1s var(--motion-ease) .7s both}
 .motion-enhanced .hero-flow{animation:soft-arrival 1.6s var(--motion-ease) .8s both}
 .motion-enhanced .page-intro h1,.motion-enhanced .detail-hero h1{animation:soft-arrival 1s var(--motion-ease) both}
 .motion-enhanced .mega-menu:not([hidden]){animation:menu-arrival .35s var(--motion-ease) both}
 .motion-enhanced .mobile-nav:not([hidden])>a{animation:soft-arrival .45s var(--motion-ease) both}
 .motion-enhanced .mobile-nav:not([hidden])>a:nth-child(2){animation-delay:.03s}.motion-enhanced .mobile-nav:not([hidden])>a:nth-child(3){animation-delay:.06s}.motion-enhanced .mobile-nav:not([hidden])>a:nth-child(4){animation-delay:.09s}.motion-enhanced .mobile-nav:not([hidden])>a:nth-child(5){animation-delay:.12s}
 .motion-ready .reveal{transform:translateY(28px);transition:opacity .95s var(--motion-ease),transform 1.1s var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
 .motion-ready .reveal.visible{transform:translateY(0)}
 .motion-enhanced .integration.motion-visible .pipe-guide{animation:pipe-arrival 1.4s var(--motion-ease) both}
}
.motion-idle *,.motion-idle *::before,.motion-idle *::after,.motion-suspended *,.motion-suspended *::before,.motion-suspended *::after,.flow-paused *,.flow-paused *::before,.flow-paused *::after{animation-play-state:paused!important}
@keyframes word-arrival{from{transform:translate3d(0,115%,0) rotate(2deg)}to{transform:translate3d(0,0,0) rotate(0)}}
@keyframes soft-arrival{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes photo-arrival{from{opacity:.25}to{opacity:1}}
@keyframes menu-arrival{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:translateY(0)}}
@keyframes pipe-flow{to{stroke-dashoffset:-182}}
@keyframes process-current{to{stroke-dashoffset:-258}}
@keyframes pipe-arrival{from{opacity:0;stroke-dasharray:0 1200}to{opacity:.7;stroke-dasharray:1200 0}}
@keyframes machine-flow{to{stroke-dashoffset:-53}}
@keyframes water-level{0%,100%{transform:translateY(1.5px)}50%{transform:translateY(-1.5px)}}
@keyframes bubble-rise{0%{transform:translateY(0);opacity:0}15%{opacity:.8}80%{opacity:.6}100%{transform:translateY(-25px);opacity:0}}
@keyframes thermal-cycle{0%,100%{opacity:.06}50%{opacity:.18}}
@keyframes fan-turn{to{transform:rotate(360deg)}}
@keyframes air-drift{to{stroke-dashoffset:-45}}
@media(max-width:900px){.flow-node{padding-inline:12px}.flow-node+.flow-node{margin-left:15px}.diagram-symbol svg{width:170px}.diagram-caption{min-height:115px}.hero-flow{right:24px;width:85px;height:260px}}
@media(max-width:640px){
 .hero-flow{width:85px;height:240px;top:65px;right:24px}.hero-motion-control{right:25px;top:20px}
 .flow-diagram{margin-top:34px;gap:12px}.flow-node,.flow-node+.flow-node{padding:0 0 18px;margin-left:0}
 .pipe-network{height:125px}.flow-node .diagram-symbol{height:125px;width:115px;margin-bottom:16px}
 .diagram-symbol svg{width:115px;height:115px}.flow-node[aria-pressed=true] .diagram-symbol svg,.flow-node:hover .diagram-symbol svg{transform:none}
 .flow-node strong{font-size:16px}.flow-node small{font-size:9px;max-width:110px}.diagram-caption{min-height:195px;padding-top:0}
 .detail-art>svg{width:170px;height:170px}.service-row::before{inset-inline:-8px}
}
@media(max-width:360px){.flow-diagram{gap:8px}.flow-node strong{font-size:14px}.flow-node small{font-size:8px;overflow-wrap:break-word}.flow-node .diagram-symbol{height:110px}.diagram-symbol svg{height:105px}.pipe-network{height:110px}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
 .motion-enhanced .hero-image>img{transform:none}.motion-ready .reveal{opacity:1;transform:none}
 .water-bubble{opacity:.5}.hero h1>span>span{transform:none}.header-progress{display:none}
 .service-row:hover h3,.editorial-photo:hover img{transform:none}
}