/* ================================================================ Plumbing: hot and cold (one light look on purpose) */
:root{
  --p-tile:#f8f9fb; --p-soft:#f1f3f7; --p-line:#d7dde6; --p-hair:#e6eaf0; --p-muted:#55647e;
  --p-hot:#e0413f; --p-hot-d:#b92d2c; --p-cold:#2456e8; --p-cold-d:#1943c2; --p-chrome:#d3d9e2; --p-ink:#10234b;
  --p-tilebg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Crect width='96' height='96' fill='%23f8f9fb'/%3E%3Cpath d='M0 2.4H96M0 50.4H96' stroke='%23ffffff' stroke-width='1.2'/%3E%3Cpath d='M0 .75H96M0 48.75H96M.75 0V48M48.75 48V96' stroke='%23e1e6ee' stroke-width='1.5'/%3E%3C/svg%3E");
}
.pg-pl{background:#fff;color:var(--p-ink)}
.pg-pl .it{color:var(--p-cold)}
.pg-pl h1,.pg-pl h2{font-family:var(--display);font-weight:400;letter-spacing:-.03em;text-wrap:balance;color:var(--p-ink)}
.pg-pl h2{margin:18px 0 0;font-size:clamp(36px,4.4vw,62px);line-height:1.05}
.pg-pl .lab{color:var(--p-muted)}
.pg-pl .lab::before{content:"";width:22px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--p-hot) 0 50%,var(--p-cold) 50%)}
.pl-head{max-width:760px}
.pl-head p{margin:16px 0 0;max-width:54ch;color:var(--p-muted);font-size:17px;line-height:1.6}
.pl-head-row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap}
.pl-head-row > div{max-width:720px}

/* ---------------------------------------------------------------- hero: subway tile, the work under the sink */
.pl-hero{position:relative;overflow:hidden;background:var(--p-tile) var(--p-tilebg);background-size:96px 96px}
.pl-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 22% 30%,rgba(255,255,255,.92),rgba(255,255,255,.55) 55%,rgba(255,255,255,0) 80%)}
.pl-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  grid-template-areas:"k k" "h h" "c a";column-gap:clamp(24px,4vw,64px);padding-top:clamp(36px,5vw,72px)}
.pl-hero-in > *{min-width:0}
.pl-k{grid-area:k;display:inline-flex;align-items:center;gap:6px;font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--p-muted)}
.pl-k i{width:8px;height:8px;border-radius:50%;background:var(--p-hot)}
.pl-k i + i{background:var(--p-cold);margin-right:6px}
.pl-hero h1{grid-area:h;margin:20px 0 0;font-size:clamp(46px,6.3vw,94px);line-height:1}
.pl-hero h1 > span{display:block}
.pl-copy{grid-area:c;align-self:start;padding-block:clamp(26px,3.4vw,44px) clamp(40px,6vw,88px)}
.pl-sub{margin:0;max-width:42ch;font-size:clamp(16.5px,1.35vw,19px);line-height:1.6;color:var(--p-muted);text-wrap:pretty}
.pl-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.pl-art{grid-area:a;align-self:end;position:relative;margin-top:clamp(28px,3vw,44px);max-width:620px;justify-self:end;width:100%}
.pl-svg{display:block;width:100%;height:auto;overflow:visible}
.pl-plab{font:500 12px var(--mono);letter-spacing:.16em}
.pl-flow{animation:pl-flow 1.1s linear infinite}
@keyframes pl-flow{to{stroke-dashoffset:-72}}
.pl-tag{--tw:188px;position:absolute;z-index:3;left:calc(81.25% - var(--tw) / 2);top:calc(45.4% - 16px);width:var(--tw);transform-origin:50% 16px}
.pl-tag-in{position:relative;display:grid;justify-items:start;gap:6px;padding:34px 16px 16px;background:#fff;
  clip-path:polygon(26px 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%,0 26px);
  box-shadow:inset 0 0 0 1px var(--p-line);filter:drop-shadow(0 16px 20px rgba(16,35,75,.18))}
.pl-hole{position:absolute;left:50%;top:10px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#eef1f5;box-shadow:0 0 0 3px #cfd6e0,inset 0 1px 2px rgba(16,35,75,.3)}
.pl-tag b{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--p-cold)}
.pl-tag strong{font:400 19px/1.15 var(--display);letter-spacing:-.01em;color:var(--p-ink)}
.pl-tag .pl-tl{font-size:13px;color:var(--p-muted)}
.pl-tag em{margin-top:4px;padding:5px 8px;border-radius:5px;background:var(--p-ink);color:#fff;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;font-style:normal}

/* ---------------------------------------------------------------- follow a call: the pipe run */
.pl-flowsec{background:#fff;padding-block:clamp(60px,8vw,120px);border-top:1px solid var(--p-hair)}
.pl-seg{display:inline-flex;padding:5px;border-radius:999px;background:var(--p-soft);box-shadow:inset 0 0 0 1px var(--p-line)}
.pl-seg button{height:42px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--p-muted);font:600 15px/1 var(--body);cursor:pointer;transition:background-color .2s,color .2s}
.pl-seg button[aria-pressed="true"]{background:var(--p-ink);color:#fff}
.pl-schem-wrap{margin-top:40px}
.pl-schem{display:block;width:100%;height:auto}
.pl-schem .pl-wet{transition:opacity .45s var(--ease)}
.pl-schem-wrap[data-route="b"] .pl-wet-a,.pl-schem-wrap[data-route="a"] .pl-wet-b{opacity:0}
.pl-dash{animation:pl-dash .9s linear infinite}
@keyframes pl-dash{to{stroke-dashoffset:-34}}
.pl-lever{transform-box:view-box;transform-origin:600px 270px;transition:transform .5s var(--ease)}
.pl-schem-wrap[data-route="a"] .pl-lever{transform:rotate(-90deg)}
.pl-schem .pl-n{transition:opacity .45s var(--ease)}
.pl-schem-wrap[data-route="a"] .pl-n-b,.pl-schem-wrap[data-route="a"] .pl-fwd{opacity:.35}
.pl-schem-wrap[data-route="b"] .pl-n-a{opacity:.45}
.pl-slab{font:600 20px var(--body);fill:var(--p-ink)}
.pl-smono{font:500 12px var(--mono);letter-spacing:.14em;fill:var(--p-muted)}
.pl-fwdt{font:500 11px var(--mono);letter-spacing:.14em;fill:#fff}
.pl-fwd{transition:opacity .45s var(--ease)}
.pl-caps{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.pl-cap{transition:opacity .45s var(--ease)}
.pl-cap .mono{font-size:10.5px;color:var(--p-cold)}
.pl-cap h3{margin:8px 0 0;font:600 17px/1.3 var(--body)}
.pl-cap p{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:var(--p-muted)}
.pl-schem-wrap[data-route="a"] .pl-cap.c2,.pl-schem-wrap[data-route="a"] .pl-cap.c3,.pl-schem-wrap[data-route="a"] .pl-cap.c4{opacity:.4}
.pl-route-note{margin:28px 0 0;padding:14px 18px;border-radius:14px;background:var(--p-soft);font-size:15px;color:var(--p-ink)}

/* ---------------------------------------------------------------- work orders on a ticket rail */
.pl-orders{background:var(--p-ink);color:#fff;padding-block:clamp(60px,8vw,120px)}
.pl-orders h2{color:#fff}
.pl-orders .it{color:#8fb0ff}
.pl-orders .lab{color:#aebbd6}
.pl-orders .pl-head p{color:#b8c4dc}
.pl-rail{margin-top:40px}
.pl-railbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 18px;border-radius:12px;
  background:linear-gradient(180deg,#f3f5f8,#c6ccd6);color:var(--p-ink);box-shadow:0 2px 0 #8d97a7,0 18px 30px -18px rgba(0,0,0,.6)}
.pl-railbar .mono{font-size:11px;color:#3d4c69}
.pl-switch{display:inline-flex;align-items:center;gap:10px;font:600 14px/1 var(--body);cursor:pointer}
.pl-switch input{position:absolute;opacity:0;width:1px;height:1px}
.pl-sw{position:relative;width:42px;height:24px;border-radius:999px;background:#9aa4b4;transition:background-color .2s}
.pl-sw::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s var(--ease)}
.pl-switch input:checked + .pl-sw{background:var(--p-cold)}
.pl-switch input:checked + .pl-sw::after{transform:translateX(18px)}
.pl-switch input:focus-visible + .pl-sw{outline:2px solid #fff;outline-offset:3px}
.pl-slips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);padding:0 clamp(0px,1.5vw,18px)}
.pl-slip{position:relative;margin-top:-4px;padding:34px 22px 22px;background:#fff;color:var(--p-ink);border-radius:0 0 6px 6px;
  box-shadow:0 26px 40px -24px rgba(0,0,0,.55);background-image:repeating-linear-gradient(180deg,transparent 0 31px,#e8eef9 31px 32px);
  background-position:0 64px;transform-origin:50% 0}
.pl-slip.s1{rotate:-1.2deg}.pl-slip.s2{rotate:.8deg;margin-top:6px}.pl-slip.s3{rotate:-.5deg}
.pl-clip{position:absolute;left:50%;top:-10px;width:64px;height:24px;margin-left:-32px;border-radius:6px 6px 10px 10px;
  background:linear-gradient(180deg,#f7f9fc,#aeb7c4);box-shadow:0 2px 0 #7d8798,0 6px 10px -4px rgba(0,0,0,.4)}
.pl-slip header{display:flex;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:2px solid var(--p-ink)}
.pl-slip header .mono{font-size:10.5px;color:var(--p-muted)}
.pl-slip h3{margin:14px 0 0;font:400 24px/1.15 var(--display);letter-spacing:-.01em}
.pl-slip dl{margin:12px 0 0}
.pl-slip dl div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;padding:6px 0;border-bottom:1px dotted #b9c3d3}
.pl-slip dt{font:500 10.5px/1.9 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--p-muted)}
.pl-slip dd{margin:0;font-size:14.5px;line-height:1.5}
.pl-stamp{display:inline-block;margin:18px 0 0;padding:7px 11px;border:2px solid currentColor;border-radius:6px;rotate:-3deg;
  font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--p-cold);mix-blend-mode:multiply}
.pl-slip.s1 .pl-stamp{color:var(--p-hot-d)}
.pl-slip.s3 .pl-stamp{color:#3d4c69}
.pl-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px;margin-top:44px}
.pl-notes p{display:flex;gap:12px;margin:0;font-size:15px;line-height:1.55;color:#c9d3e6}
.pl-notes b{color:#fff}
.pl-notes svg{width:18px;height:18px;flex:none;margin-top:2px;color:#8fb0ff}

/* ---------------------------------------------------------------- setup: four fittings on one line */
.pl-setup{background:var(--p-soft);padding-block:clamp(60px,8vw,120px)}
.pl-steps{position:relative;list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pl-steps::before{content:"";position:absolute;left:28px;right:12%;top:25px;height:10px;border-radius:5px;background:linear-gradient(180deg,#5b86f5,var(--p-cold));box-shadow:0 0 0 2px #1943c2 inset}
.pl-steps li{position:relative}
.pl-fit{position:relative;z-index:1;display:grid;place-items:center;width:60px;height:60px;border-radius:14px;
  background:linear-gradient(135deg,#f7f9fc,#c5ccd7 55%,#9aa4b4);box-shadow:inset 0 0 0 2px #8d97a7,0 10px 18px -10px rgba(16,35,75,.45);
  font:500 18px/1 var(--mono);color:var(--p-ink)}
.pl-steps h3{margin:20px 0 0;font:600 18px/1.3 var(--body)}
.pl-steps p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--p-muted)}

/* ---------------------------------------------------------------- pricing: a pressure gauge */
.pl-price{background:#fff;padding-block:clamp(60px,8vw,120px)}
.pl-price-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.pl-big{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;margin:28px 0 0;font:400 clamp(72px,8vw,112px)/1 var(--display);letter-spacing:-.04em;color:var(--p-ink)}
.pl-big .cur{align-self:flex-start;margin-top:.12em;font-size:.45em;color:var(--p-cold)}
.pl-big .per{font:500 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--p-muted)}
.pl-facts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.pl-facts li{display:flex;gap:12px;line-height:1.5}
.pl-facts svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--p-cold)}
.pl-gauge{padding:clamp(22px,3vw,36px);border-radius:28px;background:var(--p-tile) var(--p-tilebg);background-size:64px 64px;box-shadow:inset 0 0 0 1px var(--p-line)}
.pl-gsvg{display:block;width:min(100%,340px);height:auto;margin:0 auto}
.pl-glab text{font:500 13px var(--mono);fill:var(--p-muted)}
.pl-gunit{font:500 10px var(--mono);letter-spacing:.16em;fill:var(--p-muted)}
.pl-needle{transform-box:view-box;transform-origin:160px 160px;transform:rotate(calc(var(--a) + 90deg));transition:transform .5s cubic-bezier(.34,1.4,.64,1)}
.pl-garc{transition:stroke-dasharray .5s var(--ease)}
.pl-read{display:grid;justify-items:center;gap:6px;margin-top:6px}
.pl-read strong{font:400 clamp(40px,4vw,54px)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pl-read .mono{font-size:11px;color:var(--p-muted)}
.pl-range{display:block;margin-top:22px}
.pl-rl{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.pl-rl .mono{font-size:11px;color:var(--p-muted)}
.pl-rl b{font:600 15px/1 var(--body);font-variant-numeric:tabular-nums}
.pl-range input{width:100%;height:28px;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}
.pl-range input::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:linear-gradient(90deg,var(--p-cold) calc(var(--p,.1429) * 100%),#dfe4ec 0);box-shadow:inset 0 0 0 1px rgba(16,35,75,.12)}
.pl-range input::-moz-range-track{height:10px;border-radius:5px;background:#dfe4ec}
.pl-range input::-moz-range-progress{height:10px;border-radius:5px;background:var(--p-cold)}
.pl-range input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-8px;border-radius:8px;background:linear-gradient(135deg,#fff,#c5ccd7);box-shadow:inset 0 0 0 2px #8d97a7,0 4px 10px rgba(16,35,75,.25)}
.pl-range input::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:8px;background:linear-gradient(135deg,#fff,#c5ccd7);box-shadow:inset 0 0 0 2px #8d97a7,0 4px 10px rgba(16,35,75,.25)}
.pl-est{margin:14px 0 0;font-size:13.5px;color:var(--p-muted)}

/* ---------------------------------------------------------------- FAQ, closing, footer */
.pl-faq{background:#fff;padding-block:clamp(60px,8vw,120px);border-top:1px solid var(--p-hair)}
.pl-faq-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:start}
.pl-faq summary i{color:var(--p-cold)}
.pl-close{position:relative;overflow:hidden;background:var(--p-tile) var(--p-tilebg);background-size:96px 96px;padding-block:clamp(72px,9vw,132px) clamp(120px,12vw,168px);text-align:center}
.pl-close::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 40%,rgba(255,255,255,.95),rgba(255,255,255,.4) 70%,rgba(255,255,255,0));pointer-events:none}
.pl-close-in{position:relative}
.pl-close h2{margin:0 auto;max-width:14ch;font-size:clamp(46px,6.4vw,96px);line-height:1}
.pl-close p{margin:18px 0 0;font-size:18px;color:var(--p-muted)}
.pl-close .pl-cta{justify-content:center}
.pl-lines{position:absolute;left:0;right:0;bottom:clamp(36px,4vw,56px);display:grid;gap:14px}
.pl-lines i{position:relative;display:block;height:16px;overflow:hidden}
.pl-lines i.h{background:var(--p-hot);box-shadow:inset 0 -3px 0 var(--p-hot-d)}
.pl-lines i.c{background:var(--p-cold);box-shadow:inset 0 -3px 0 var(--p-cold-d)}
.pl-lines i::after{content:"";position:absolute;inset:6px 0 auto;height:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 12px,transparent 12px 40px);animation:pl-run 1.4s linear infinite}
.pl-lines i.c::after{animation-direction:reverse}
@keyframes pl-run{to{background-position:40px 0}}
.pl-foot{background:var(--p-ink);color:#fff}
.pl-foot .grid3 i:not(.o){background:#8fb0ff}
.pl-foot .grid3 i.o{box-shadow:inset 0 0 0 1.5px #8fb0ff}

/* ---------------------------------------------------------------- narrow screens */
@media (max-width:1060px){
  .pl-caps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pl-notes{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .pl-hero-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "h" "c" "a"}
  .pl-copy{padding-bottom:12px}
  .pl-art{justify-self:center;max-width:560px;margin-top:0}
  .pl-hero h1{font-size:clamp(42px,10.5vw,80px)}
  .pl-slips{grid-template-columns:minmax(0,1fr);max-width:460px;margin-inline:auto;gap:30px}
  .pl-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .pl-steps::before{display:none}
  .pl-price-grid,.pl-faq-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .pl-schem{display:none}
  .pl-schem-wrap{margin-top:28px}
  .pl-caps{position:relative;grid-template-columns:minmax(0,1fr);gap:26px;padding-left:44px}
  .pl-caps::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:10px;border-radius:5px;background:var(--p-cold);box-shadow:inset 0 0 0 2px var(--p-cold-d)}
  .pl-cap{position:relative}
  .pl-cap::before{content:"";position:absolute;left:-40px;top:0;width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#fff,#c5ccd7);box-shadow:inset 0 0 0 2px #8d97a7}
  .pl-schem-wrap[data-route="a"] .pl-caps::before{background:linear-gradient(180deg,var(--p-cold) 0 34%,#c3cad6 34%);box-shadow:none}
}
@media (max-width:560px){
  .pl-tag{--tw:140px;top:calc(45.4% - 12px);transform-origin:50% 12px}
  .pl-tag-in{padding:26px 12px 12px;gap:4px;clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%,0 20px)}
  .pl-hole{top:7px}
  .pl-tag strong{font-size:15px}
  .pl-tag .pl-tl{font-size:11.5px}
  .pl-tag b,.pl-tag em{font-size:9px}
  .pl-steps{grid-template-columns:minmax(0,1fr)}
  .pl-seg{width:100%}
  .pl-seg button{flex:1;padding:0 10px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .pl-flow,.pl-dash,.pl-lines i::after{animation:none}
}