/* Standalone-valve illustration. Motion explains a control idea, never a rating. */
.cl-valve-motion-section{padding:58px 0 55px;background:#f0ede6}
.cl-valve-motion-intro{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:end;margin-bottom:29px}
.cl-valve-motion-intro h2{font-size:clamp(32px,3.2vw,46px);line-height:1.12;font-weight:400;letter-spacing:-.045em;margin:0;max-width:15ch}
.cl-valve-motion-intro p:not(.cl-kicker){font-size:14px;line-height:1.85;color:#53604d;margin:0;max-width:55ch}
.cl-valve-motion{margin:0;background:#faf9f4;border:1px solid #d4ccbf;border-radius:12px;overflow:hidden;isolation:isolate}
.cl-vm-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 26px;border-bottom:1px solid #dfd8ce}
.cl-vm-head strong{font-size:12px;font-weight:700;color:#43503d}
.cl-vm-head span{font-size:11px;color:#626c59;display:flex;align-items:center;gap:7px}
.cl-vm-head i{width:6px;height:6px;background:#8e9e7e;border-radius:50%;display:inline-block}
.cl-vm-stage{display:grid;grid-template-columns:minmax(0,1fr) 218px;gap:10px;align-items:center;padding:12px 26px 12px 14px;min-width:0}
.cl-vm-diagram{display:block;width:100%;height:auto;overflow:visible}
.cl-vm-diagram text{font-family:var(--font);font-size:14px;fill:#4d5a47;letter-spacing:0}
.cl-vm-diagram .cl-vm-label{font-size:15px;font-weight:700;fill:#304738}
.cl-vm-diagram .cl-vm-small{font-size:12px;fill:#65705e}
.cl-vm-diagram .cl-vm-part-name{font-size:13px;fill:#4d5a47}
.cl-vm-mobile-label{display:none}
.cl-vm-diagram .cl-vm-hairline{fill:none;stroke:#aeb7a4;stroke-width:1}
.cl-vm-fluid-line{fill:none;stroke:#d9f1ec;stroke-width:1.25;stroke-linecap:round;stroke-dasharray:125 42;opacity:.33;animation:cl-vm-fine-flow 5s linear infinite;animation-play-state:paused}
.cl-vm-fluid-line:nth-of-type(2){animation-delay:-1.7s}
.cl-vm-fluid-line:nth-of-type(3){animation-delay:-3.3s}
.cl-vm-stream{fill:none;stroke:#eef9f3;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:21 285;opacity:.72;animation:cl-vm-flow 3.2s linear infinite;animation-play-state:paused}
.cl-valve-motion[data-motion="running"] .cl-vm-stream,.cl-valve-motion[data-motion="running"] .cl-vm-fluid-line{animation-play-state:running}
.cl-vm-stream:nth-of-type(2){animation-delay:-1.1s}
.cl-vm-stream:nth-of-type(3){animation-delay:-2.2s}
@keyframes cl-vm-flow{to{stroke-dashoffset:-612}}
@keyframes cl-vm-fine-flow{to{stroke-dashoffset:-334}}
.cl-vm-readout{padding:17px 0 17px 23px;border-left:1px solid #ded8cd}
.cl-vm-readout dl{margin:0}
.cl-vm-readout dl>div+div{padding-top:20px;margin-top:20px;border-top:1px solid #ded8cd}
.cl-vm-readout dt{font-size:10px;line-height:1.6;text-transform:uppercase;letter-spacing:.09em;color:#68725f;margin:0 0 7px}
.cl-vm-readout dd{font-size:18px;line-height:1.3;font-weight:700;letter-spacing:-.025em;color:#71364a;margin:0;min-height:24px}
.cl-vm-position{display:flex;gap:4px;height:5px;margin:12px 0 0}
.cl-vm-position span{height:5px;width:100%;background:#d8dfcf;border-radius:1px;overflow:hidden}
.cl-vm-position i{display:block;height:100%;width:53%;background:#7b8e69;transform-origin:left center;will-change:width}
.cl-vm-controls{padding:20px 26px 18px;border-top:1px solid #ded8cd;display:flex;flex-wrap:wrap;gap:14px 25px;align-items:center;justify-content:space-between;background:#f3f3eb}
.cl-vm-demand{padding:0;border:0;margin:0;min-width:0}
.cl-vm-demand legend{font-size:11px;font-weight:700;color:#47553f;margin:0 0 10px;padding:0}
.cl-vm-options{display:flex;gap:6px}
.cl-vm-options button{min-height:44px;padding:9px 18px;border:1px solid #bec8b0;border-radius:4px;background:transparent;color:#44513d;font:inherit;font-size:12px;line-height:1.5;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.cl-vm-options button[aria-pressed="true"]{color:#fffaf4;background:#71364a;border-color:#71364a}
.cl-vm-options button:hover{border-color:#71364a}
.cl-vm-options button:focus-visible,.cl-vm-play:focus-visible{outline:2px solid #71364a;outline-offset:3px}
.cl-vm-playback{display:flex;align-items:center;gap:18px;padding-top:22px}
.cl-vm-play{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 10px;border:0;background:transparent;font:inherit;color:#71364a;font-size:11px;font-weight:700;cursor:pointer}
.cl-vm-play svg{width:14px;height:14px;flex:none;fill:currentColor}
.cl-vm-play .cl-vm-play-icon{display:none}
.cl-valve-motion[data-user-paused="true"] .cl-vm-play .cl-vm-pause-icon{display:none}
.cl-valve-motion[data-user-paused="true"] .cl-vm-play .cl-vm-play-icon{display:block}
.cl-vm-caption{margin:0;padding:17px 26px 20px;font-size:11px;line-height:1.8;color:#64705b;border-top:1px solid #ded8cd;max-width:none}
.cl-vm-caption strong{font-weight:700;color:#46563e}
.cl-vm-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1500px){.cl-vm-stage{grid-template-columns:minmax(0,1fr) 240px}.cl-vm-diagram{max-height:470px}}
@media(max-width:999px){.cl-vm-stage{grid-template-columns:minmax(0,1fr);padding:12px 18px 18px}.cl-vm-readout{padding:16px 8px 0;border-left:0;border-top:1px solid #ded8cd}.cl-vm-readout dl{display:grid;grid-template-columns:1fr 1fr;gap:24px}.cl-vm-readout dl>div+div{padding:0;margin:0;border-top:0}.cl-vm-playback{padding-top:20px}.cl-vm-head{padding:18px 22px}}
@media(max-width:699px){.cl-valve-motion-section{padding:35px 0}.cl-valve-motion-intro{grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:23px}.cl-valve-motion-intro h2{font-size:33px;max-width:17ch}.cl-valve-motion-intro p:not(.cl-kicker){font-size:13px;line-height:1.85}.cl-valve-motion{border-radius:8px}.cl-vm-head{padding:16px;align-items:start;gap:12px}.cl-vm-head strong{font-size:11px}.cl-vm-head span{font-size:10px;max-width:12ch;flex:none;line-height:1.6}.cl-vm-stage{padding:4px 9px 17px}.cl-vm-diagram{margin:0 auto;max-width:520px;height:260px;overflow:hidden}.cl-vm-diagram text{font-size:20px}.cl-vm-diagram .cl-vm-label{font-size:23px}.cl-vm-diagram .cl-vm-small{font-size:18px}.cl-vm-diagram .cl-vm-part-name{font-size:19px}.cl-vm-diagram .cl-vm-desktop-label{display:none}.cl-vm-mobile-label{display:block}.cl-vm-readout{display:block;margin:0 7px;padding-top:17px}.cl-vm-readout dl{gap:18px;grid-template-columns:1fr 1fr}.cl-vm-readout dt{font-size:9px;letter-spacing:.065em}.cl-vm-readout dd{font-size:16px}.cl-vm-controls{padding:18px 16px 13px;display:block}.cl-vm-options{gap:5px}.cl-vm-options button{flex:1;padding:10px 9px;font-size:11px}.cl-vm-playback{padding-top:12px;justify-content:space-between;gap:10px}.cl-vm-play{padding:7px 0;font-size:11px}.cl-vm-caption{padding:15px 16px 18px;font-size:10px;line-height:1.85}.cl-vm-demand legend{font-size:11px;margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){.cl-vm-stream,.cl-vm-fluid-line{animation:none!important}.cl-vm-options button{transition:none}.cl-vm-position i{will-change:auto}}

/* The opening view budgets space for the complete valve, readout and controls. */
.cl-valve-opening{height:min(650px,calc(100svh - var(--head,72px)));min-height:460px;margin-top:var(--head,72px);padding:18px 0 20px;background:#f0ede6;scroll-margin-top:var(--head,72px)}
.cl-valve-opening-wrap{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr)}
.cl-valve-opening .breadcrumbs{margin:0 0 12px;font-size:11px;line-height:18px}
.cl-valve-opening-grid{display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,1.6fr);gap:clamp(24px,3vw,48px);align-items:center;min-height:0}
.cl-valve-opening-copy .cl-kicker{margin:0 0 12px}
.cl-valve-opening-copy h1{font-size:clamp(40px,4.2vw,62px);line-height:1.05;letter-spacing:-.055em;margin:0}
.cl-valve-opening-copy h1 span{display:block}
.cl-valve-opening-lead{font-size:15px;line-height:1.7;color:#52614e;max-width:35ch;margin:18px 0 0}
.cl-valve-opening-copy .actions{gap:12px 20px;margin-top:24px}
.cl-valve-opening-copy .btn{min-height:44px;padding:12px 17px;font-size:12px}
.cl-valve-opening-copy .text-link{font-size:12px;min-height:44px}
.cl-valve-opening .cl-valve-motion{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;background:radial-gradient(ellipse at 48% 37%,#fff 0,#f7f8f4 48%,#e9eeeb 100%);border-color:#bbc7c3;box-shadow:0 14px 35px -27px #30483f}
.cl-valve-opening .cl-vm-head{padding:12px 17px;gap:12px}
.cl-vm-head h2{font-size:12px;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:0;color:#304638}
.cl-valve-opening .cl-vm-stage{height:100%;min-height:0;grid-template-columns:minmax(0,1fr) 150px;padding:8px 16px 8px 8px;gap:4px}
.cl-valve-motion .cl-vm-diagram{width:100%;height:100%;min-height:0;max-height:100%;max-width:none;overflow:visible;margin:0}
.cl-valve-motion .cl-vm-label{font-size:20px}
.cl-valve-motion .cl-vm-part-name{font-size:16px}
.cl-vm-diagram .cl-vm-plug-name{font-size:21px;font-weight:600;fill:#71364a}
@media (max-width:699px), (max-width:999px) and (max-height:500px) {
 .cl-vm-diagram .cl-vm-plug-name{font-size:31px}
}
.cl-valve-motion .cl-vm-actuator-label{fill:#e2eaee;font-size:18px;font-weight:400;letter-spacing:.01em}
.cl-valve-opening .cl-vm-readout{padding:12px 0 12px 16px;min-width:0}
.cl-valve-opening .cl-vm-readout dl>div+div{padding-top:15px;margin-top:15px}
.cl-valve-opening .cl-vm-readout dt{font-size:10px;margin-bottom:5px}
.cl-valve-opening .cl-vm-readout dd{font-size:16px;min-height:21px;line-height:1.3}
.cl-valve-opening .cl-vm-position{margin-top:10px}
.cl-valve-opening .cl-vm-controls{padding:10px 16px;gap:10px;flex-wrap:nowrap;align-items:end}
.cl-valve-opening .cl-vm-demand legend{margin-bottom:5px;font-size:11px}
.cl-valve-opening .cl-vm-options button{padding:8px 17px;min-height:44px}
.cl-valve-opening .cl-vm-playback{padding:0;gap:0;flex:none}
.cl-valve-opening .cl-vm-play{font-size:11px;min-height:44px}
.cl-valve-opening .cl-vm-caption{font-size:11px;line-height:1.4;padding:8px 16px;color:#4d6255}
.cl-vm-stream{opacity:var(--valve-flow-strength,.72)}
.cl-vm-fluid-line{stroke:#b6e0e8;opacity:.42}
.cl-valve-product-context{padding:48px 0 26px;border-top:1px solid #ded8cd;background:#f7f6f0}
.cl-valve-context-grid{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center}
.cl-valve-context-grid h2{font-size:clamp(28px,3vw,42px);line-height:1.12;letter-spacing:-.04em;margin:0 0 18px}
.cl-valve-context-grid p:not(.cl-kicker){font-size:14px;line-height:1.8;color:#53604d;max-width:56ch}
.cl-valve-context-grid .cl-product-study{max-width:580px;margin:0}
@media(min-width:1000px) and (max-height:740px){
 .cl-valve-opening{padding-block:12px;min-height:420px}
 .cl-valve-opening .breadcrumbs{margin-bottom:8px}
 .cl-valve-opening-copy h1{font-size:48px}
 .cl-valve-opening-lead{font-size:14px;margin-top:12px}
 .cl-valve-opening-copy .actions{margin-top:17px}
}
@media(max-width:999px){
 .cl-valve-opening{height:min(650px,calc(100svh - var(--head,64px)));min-height:470px;max-height:650px;padding:14px 0}
 .cl-valve-opening-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:14px;align-items:stretch}
 .cl-valve-opening-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:center}
 .cl-valve-opening-copy .cl-kicker{grid-column:1;margin-bottom:5px;font-size:9px}
 .cl-valve-opening-copy h1{grid-column:1;font-size:32px;line-height:1.08}
 .cl-valve-opening-copy h1 br{display:none}
 .cl-valve-opening-copy h1 span{display:inline}
 .cl-valve-opening-lead{grid-column:1;max-width:49ch;font-size:13px;line-height:1.5;margin:7px 0 0}
 .cl-valve-opening-copy .actions{grid-column:2;grid-row:1/4;margin:0;display:grid;gap:1px;justify-items:start}
 .cl-valve-opening .cl-vm-stage{grid-template-columns:minmax(0,1fr) 172px;padding:6px 18px 6px 8px}
 .cl-valve-opening .cl-vm-readout{border-top:0;border-left:1px solid #ded8cd;margin:0;padding:10px 0 10px 16px}
 .cl-valve-opening .cl-vm-readout dl{display:block}
 .cl-valve-opening .cl-vm-readout dl>div+div{border-top:1px solid #ded8cd;padding-top:14px;margin-top:14px}
}
@media(max-width:699px){
 .cl-valve-opening{padding:10px 0 12px;min-height:0;max-height:760px}
 .cl-valve-opening .breadcrumbs{font-size:10px;line-height:16px;margin-bottom:8px}
 .cl-valve-opening-grid{gap:10px}
 .cl-valve-opening-copy{display:block}
 .cl-valve-opening-copy .cl-kicker{font-size:9px;margin:0 0 5px;line-height:1.3}
 .cl-valve-opening-copy h1{font-size:clamp(25px,7.5vw,34px);line-height:1.06;letter-spacing:-.05em;white-space:nowrap}
 .cl-valve-opening-lead{font-size:12px;line-height:1.5;margin-top:7px;max-width:48ch}
 .cl-valve-opening-copy .actions{display:flex;gap:8px 16px;margin:8px 0 0;align-items:center;flex-wrap:nowrap}
 .cl-valve-opening-copy .btn{min-height:44px;font-size:11px;padding:9px 12px;white-space:nowrap}
 .cl-valve-opening-copy .text-link{font-size:11px;min-height:44px;white-space:nowrap}
 .cl-valve-opening .cl-valve-motion{border-radius:8px}
 .cl-valve-opening .cl-vm-head{padding:9px 12px;gap:7px}
 .cl-vm-head h2{font-size:11px}
 .cl-valve-opening .cl-vm-head span{font-size:9px;line-height:1.3;max-width:none;gap:4px;white-space:nowrap}
 .cl-valve-opening .cl-vm-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:0;padding:0 8px 6px}
 .cl-valve-motion .cl-vm-label{font-size:28px}
 .cl-valve-motion .cl-vm-actuator-label{font-family:Arial,Helvetica,sans-serif;font-size:31px;letter-spacing:-.04em}
 .cl-valve-motion .cl-vm-desktop-label{display:none}
 .cl-valve-motion .cl-vm-mobile-label{display:block}
 .cl-valve-opening .cl-vm-readout{border-left:0;border-top:1px solid #d8e0da;margin:0 4px;padding:7px 0 0}
 .cl-valve-opening .cl-vm-readout dl{display:grid;grid-template-columns:1fr 1fr;gap:12px}
 .cl-valve-opening .cl-vm-readout dl>div+div{padding:0;margin:0;border:0}
 .cl-valve-opening .cl-vm-readout dt{font-size:11px;color:#4b5949;letter-spacing:.035em;line-height:1.3;margin-bottom:3px}
 .cl-valve-opening .cl-vm-readout dd{font-size:13px;min-height:17px;white-space:nowrap}
 .cl-valve-opening .cl-vm-position{margin:5px 0 0;height:3px}
 .cl-valve-opening .cl-vm-position span{height:3px}
 .cl-valve-opening .cl-vm-controls{padding:7px 11px;gap:8px;display:flex;align-items:end}
 .cl-valve-opening .cl-vm-demand{flex:1;min-width:0}
 .cl-valve-opening .cl-vm-demand legend{font-size:10px;line-height:1.3;margin-bottom:4px}
 .cl-valve-opening .cl-vm-options{gap:4px}
 .cl-valve-opening .cl-vm-options button{font-size:11px;min-height:44px;padding:7px 5px;flex:1}
 .cl-valve-opening .cl-vm-playback{width:44px;padding:0;justify-content:center}
 .cl-valve-opening .cl-vm-play{width:44px;height:44px;padding:0}
 .cl-valve-opening .cl-vm-play [data-valve-play-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 .cl-valve-opening .cl-vm-play svg{width:15px;height:15px}
 .cl-valve-opening .cl-vm-caption{padding:6px 12px;font-size:10px;line-height:1.4}
 .cl-valve-product-context{padding:30px 0 12px}
 .cl-valve-context-grid{grid-template-columns:minmax(0,1fr);gap:24px}
 .cl-valve-context-grid h2{font-size:29px;margin-bottom:12px}
 .cl-valve-context-grid p:not(.cl-kicker){font-size:13px;line-height:1.8}
}
@media(max-width:699px) and (max-height:650px){
 .cl-valve-opening{padding-block:7px}
 .cl-valve-opening .breadcrumbs{margin-bottom:5px}
 .cl-valve-opening-grid{gap:7px}
 .cl-valve-opening-copy .cl-kicker{margin-bottom:3px}
 .cl-valve-opening-copy h1{font-size:26px}
 .cl-valve-opening-lead{margin-top:5px;line-height:1.4}
 .cl-valve-opening-copy .actions{margin-top:5px}
 .cl-valve-opening .cl-vm-head{padding-block:7px}
 .cl-valve-opening .cl-vm-caption{padding-block:5px}
}