/* PEP-922 — /plumbing route stylesheet. Self-sufficient: loaded after the
   shared sitewide stylesheet, contains every .plumbing-flagship* rule this
   route needs so the page renders correctly even against a browser cache
   that predates any shared-CSS append. Scoped entirely under
   .plumbing-flagship so no other route is visually affected. */
.plumbing-flagship-main{background:var(--stone-050);min-width:0}

.plumbing-flagship{
--pf-icon-house: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2011.5%2012%204l8%207.5%27%2F%3E%3Cpath%20d%3D%27M6%2010v9h12v-9%27%2F%3E%3Cpath%20d%3D%27M10%2019v-5h4v5%27%2F%3E%3C%2Fsvg%3E");
--pf-icon-drop: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.5c-3.2%204.4-5.6%207.7-5.6%2010.8a5.6%205.6%200%200%200%2011.2%200c0-3.1-2.4-6.4-5.6-10.8Z%27%2F%3E%3C%2Fsvg%3E");
--pf-icon-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.5%2012.5%209.5%2017.5%2019.5%206.5%27%2F%3E%3C%2Fsvg%3E");
--pf-icon-route: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2019v-8a4%204%200%200%201%204-4h6a4%204%200%200%201%204%204v8%27%2F%3E%3Cpath%20d%3D%27M9%2019v-4M15%2019v-4%27%2F%3E%3C%2Fsvg%3E");
--pf-icon-layers: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%207h16M4%2012h16M4%2017h11%27%2F%3E%3C%2Fsvg%3E");
--pf-icon-nodes: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%276%27%20cy%3D%2717%27%20r%3D%272.1%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%277%27%20r%3D%272.1%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2719%27%20r%3D%272.1%27%2F%3E%3Cpath%20d%3D%27M8%2016%2016%208.5M8%2017.6%2016%2018.5%27%2F%3E%3C%2Fsvg%3E");
--pf-icon-gem: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%209%209%204h6l4%205-7%2011z%27%2F%3E%3Cpath%20d%3D%27M5%209h14M9%204l1.5%205L9%209M15%204l-1.5%205L15%209M10.5%209%2012%2020l1.5-11%27%2F%3E%3C%2Fsvg%3E");
--pf-icon-clipboard: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%205h6v2.5H9z%27%2F%3E%3Cpath%20d%3D%27M6.5%206.5h11v14.5h-11z%27%2F%3E%3Cpath%20d%3D%27M9%2014l2.2%202.2L16%2011.5%27%2F%3E%3C%2Fsvg%3E");
--pf-icon-chat: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.5%205.5h15v11h-9L6%2020v-3.5h-1.5z%27%2F%3E%3C%2Fsvg%3E");
--pf-icon-wrench: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14.9%206.1a4.2%204.2%200%200%200-5.4%205.4l-5.4%205.4%203%203%205.4-5.4a4.2%204.2%200%200%200%205.4-5.4l-2.9%202.9-2-2z%27%2F%3E%3C%2Fsvg%3E");
}

/* Hero */
.plumbing-flagship-hero{isolation:isolate;color:var(--cream);background:var(--green-1000);min-height:min(90vh,840px);align-items:stretch;display:flex;position:relative;overflow:hidden}
.plumbing-flagship-hero-media{z-index:0;position:absolute;inset:0}
.plumbing-flagship-hero-media img{object-fit:cover;width:100%;height:100%;display:block}
.plumbing-flagship-hero-shade{z-index:1;pointer-events:none;background:linear-gradient(100deg,#03120de3 0%,#03120d8c 33%,#03120d24 56%,transparent 70%);position:absolute;inset:0}
.plumbing-flagship-hero-panel{z-index:2;width:min(560px,36%);min-width:320px;color:var(--cream);background:linear-gradient(155deg,#061711eb 0%,#061711d9 55%,#061711bf 100%);border:1px solid #ffffff21;border-left:3px solid var(--brass);border-radius:6px;box-shadow:0 30px 90px #01080570;flex-direction:column;justify-content:center;gap:0;margin:clamp(26px,4vh,52px) 0 clamp(26px,4vh,52px) clamp(24px,3.7vw,54px);padding:clamp(32px,4.2vw,54px) clamp(28px,3.4vw,46px);display:flex;position:relative}
.plumbing-flagship-hero-panel>.kicker{color:var(--brass);margin-bottom:15px}
.plumbing-flagship-hero-panel h1{font:400 clamp(34px,4vw,50px)/1.09 Georgia,"Times New Roman",serif;letter-spacing:-.005em;color:var(--cream);margin-bottom:16px}
.plumbing-flagship-hero-panel h1 em{color:var(--brass);font-style:normal;display:block}
.plumbing-flagship-hero-rule{width:60px;height:1px;background:var(--brass);opacity:.7;margin-bottom:18px}
.plumbing-flagship-hero-support{color:#ffffffc4;font-size:clamp(13px,1.05vw,15px);line-height:1.55;max-width:38ch;margin-bottom:22px}
.plumbing-flagship-hero-bullets{grid-template-columns:1fr;gap:11px;margin-bottom:26px;list-style:none;padding:0;display:grid}
.plumbing-flagship-hero-bullets li{color:var(--cream);font:640 11.5px/1.3 var(--body);letter-spacing:.005em;align-items:center;gap:11px;display:flex}
.plumbing-flagship-hero-icon{flex:none;width:26px;height:26px;border:1px solid #cfb37a5c;border-radius:50%;background:var(--brass);display:inline-block}
.plumbing-flagship-hero-icon{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:13px;mask-size:13px}
.plumbing-flagship-icon-house{-webkit-mask-image:var(--pf-icon-house);mask-image:var(--pf-icon-house)}
.plumbing-flagship-icon-drop{-webkit-mask-image:var(--pf-icon-drop);mask-image:var(--pf-icon-drop)}
.plumbing-flagship-icon-check{-webkit-mask-image:var(--pf-icon-check);mask-image:var(--pf-icon-check)}
.plumbing-flagship-hero-actions{align-items:center;gap:20px 26px;flex-wrap:wrap;display:flex}
.plumbing-flagship-cta{color:var(--brass);background:linear-gradient(155deg,#12382b,#0a2119);border-color:#cfb37a4a}
.plumbing-flagship-cta:hover{color:var(--green-1000);background:var(--brass);border-color:var(--brass)}
.plumbing-flagship-hero-secondary{color:#ffffffb0;font:650 9px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;align-items:center;gap:8px;display:inline-flex}
.plumbing-flagship-hero-secondary:hover{color:var(--brass)}

@media (width<=1040px){
.plumbing-flagship-hero-panel{width:min(460px,44%);min-width:300px}
}

/* Intro: two-column copy + six-item specialisation list */
.plumbing-flagship-intro{background:var(--stone-050);grid-template-columns:minmax(0,1.05fr) minmax(260px,.85fr);gap:clamp(34px,6vw,88px);padding:clamp(46px,6vw,76px) clamp(26px,5vw,64px) clamp(30px,4vw,42px);display:grid}
.plumbing-flagship-intro-copy>.kicker{margin-bottom:14px}
.plumbing-flagship-intro-copy h2{font:500 clamp(26px,2.9vw,40px)/1.14 var(--display);letter-spacing:-.03em;color:var(--ink);text-wrap:balance;margin-bottom:14px}
.plumbing-flagship-intro-copy p{color:var(--muted);font-size:clamp(12px,1.05vw,14.5px);line-height:1.68;max-width:54ch}
.plumbing-flagship-intro-list{border-top:1px solid var(--line);list-style:none;margin:0;padding:0;align-content:start;display:grid}
.plumbing-flagship-intro-list li{border-bottom:1px solid var(--line);color:var(--ink);font:620 12.5px/1.3 var(--body);letter-spacing:.002em;align-items:center;gap:12px;padding:12px 2px;display:flex}
.plumbing-flagship-intro-list li:before{content:"";flex:none;width:16px;height:16px;background:var(--green-900);-webkit-mask:var(--pf-icon-check) center/10px no-repeat;mask:var(--pf-icon-check) center/10px no-repeat;border-radius:50%}

@media (width<=900px){
.plumbing-flagship-intro{grid-template-columns:1fr;padding-left:20px;padding-right:20px}
}

/* Four value blocks, one row on desktop */
.plumbing-flagship-values{background:var(--stone-050);border-top:1px solid var(--line);grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:clamp(6px,1vw,10px) clamp(26px,5vw,64px) clamp(40px,5vw,58px);display:grid}
.plumbing-flagship-values article{border-left:1px solid var(--line);align-content:start;gap:14px;padding:clamp(22px,2.4vw,30px) clamp(18px,2vw,26px);display:grid}
.plumbing-flagship-values article:first-child{border-left:0}
.plumbing-flagship-value-icon{width:44px;height:44px;background:var(--green-1000);border-radius:50%;display:inline-block;position:relative}
.plumbing-flagship-value-icon:before{content:"";background:var(--brass);position:absolute;inset:0}
.plumbing-flagship-value-icon:before{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:19px;mask-size:19px}
.plumbing-flagship-icon-route:before{-webkit-mask-image:var(--pf-icon-route);mask-image:var(--pf-icon-route)}
.plumbing-flagship-icon-layers:before{-webkit-mask-image:var(--pf-icon-layers);mask-image:var(--pf-icon-layers)}
.plumbing-flagship-icon-nodes:before{-webkit-mask-image:var(--pf-icon-nodes);mask-image:var(--pf-icon-nodes)}
.plumbing-flagship-icon-gem:before{-webkit-mask-image:var(--pf-icon-gem);mask-image:var(--pf-icon-gem)}
.plumbing-flagship-values h3{font:600 13.5px/1.28 var(--display);letter-spacing:-.015em;color:var(--ink)}
.plumbing-flagship-values p{color:var(--muted);font-size:11px;line-height:1.5}

@media (width<=1040px){
.plumbing-flagship-values{grid-template-columns:repeat(2,minmax(0,1fr))}
.plumbing-flagship-values article:nth-child(3){border-left:0}
}

/* Four lower information cards */
.plumbing-flagship-cards{background:var(--line);grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0 clamp(26px,5vw,64px) clamp(48px,6vw,72px);border:1px solid var(--line);display:grid}
.plumbing-flagship-cards article{background:var(--stone-050);min-width:0;padding:clamp(22px,2.4vw,28px) clamp(20px,2.2vw,24px);display:grid;align-content:start;gap:2px}
.plumbing-flagship-card-mark{width:22px;height:22px;box-sizing:content-box;background:var(--green-1000);border-radius:50%;margin-bottom:12px;padding:7px}
.plumbing-flagship-card-icon{width:24px;height:24px;background:var(--copper-ink);margin-bottom:12px;display:inline-block}
.plumbing-flagship-card-icon{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px;mask-size:16px}
.plumbing-flagship-icon-clipboard{-webkit-mask-image:var(--pf-icon-clipboard);mask-image:var(--pf-icon-clipboard)}
.plumbing-flagship-icon-chat{-webkit-mask-image:var(--pf-icon-chat);mask-image:var(--pf-icon-chat)}
.plumbing-flagship-icon-wrench{-webkit-mask-image:var(--pf-icon-wrench);mask-image:var(--pf-icon-wrench)}
.plumbing-flagship-card-label{color:var(--copper-ink);font:720 8px/1.3 var(--display);letter-spacing:.11em;text-transform:uppercase;margin-bottom:8px}
.plumbing-flagship-cards h3{font:600 15px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink);margin-bottom:9px}
.plumbing-flagship-cards article>p{color:var(--muted);font-size:11px;line-height:1.55;margin-bottom:12px}
.plumbing-flagship-cards ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.plumbing-flagship-cards li{color:var(--ink);font-size:10.5px;line-height:1.4;align-items:flex-start;gap:8px;display:flex}
.plumbing-flagship-cards li:before{content:"";flex:none;width:12px;height:12px;margin-top:2px;background:var(--green-700);-webkit-mask:var(--pf-icon-check) center/9px no-repeat;mask:var(--pf-icon-check) center/9px no-repeat}

@media (width<=1040px){
.plumbing-flagship-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Related services / local coverage links */
.plumbing-flagship-related{border-top:1px solid var(--line);color:var(--muted);font:660 8px/1.4 var(--display);letter-spacing:.045em;flex-wrap:wrap;gap:10px 28px;padding:18px clamp(26px,5vw,64px) clamp(26px,4vw,40px);display:flex}
.plumbing-flagship-related a:hover{color:var(--copper-ink)}

/* =====================================================================
   PEP-922 — compact mobile redesign. Fully re-specifies every property
   the shared-CSS append's own <=760/<=560 rules set (matching !important
   where present) so this file wins the cascade whether or not a browser
   still has the pre-PEP-920 shared CSS cached alongside it, and whether
   or not it has the post-PEP-920 shared CSS (with the old append) cached.
   ===================================================================== */
@media (width<=760px){
  /* ---- Hero: one composed unit (photo + gradient + panel), not photo
     then a separate tall text block ---- */
  .plumbing-flagship-hero{flex-direction:column;justify-content:flex-end;min-height:clamp(560px,140vw,650px)}
  .plumbing-flagship-hero-media{position:absolute;inset:0;height:auto}
  .plumbing-flagship-hero-media img{object-position:60% 38%}
  .plumbing-flagship-hero-shade{display:block;background:linear-gradient(180deg,#03120d1a 0%,#03120d59 30%,#03120ddb 58%,#03120d 100%)}
  .plumbing-flagship-hero-panel{z-index:2;width:100%;min-width:0;color:var(--cream);background:transparent;border:0;border-radius:0;box-shadow:none;flex-direction:column;justify-content:flex-start;gap:0;margin:0;padding:22px 20px clamp(26px,7vw,34px)}
  .plumbing-flagship-hero-panel>.kicker{margin-bottom:10px}
  .plumbing-flagship-hero-rule{display:none}
  .plumbing-flagship-hero-support{font-size:15px;line-height:1.5;max-width:none;margin-bottom:18px}
  .plumbing-flagship-hero-bullets{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;margin-bottom:22px}
  .plumbing-flagship-hero-bullets li{font-size:13px;gap:9px}
  .plumbing-flagship-hero-icon{width:24px;height:24px}
  .plumbing-flagship-hero-actions{gap:14px 20px}
  .plumbing-flagship-cta{min-height:44px}
  .plumbing-flagship-hero-secondary{min-height:44px}

  /* ---- Intro: readable body copy + 2-column specialisation list ---- */
  .plumbing-flagship-intro{grid-template-columns:1fr;padding:34px 20px 6px;gap:26px}
  .plumbing-flagship-intro-copy p{font-size:15px;line-height:1.6;max-width:none}
  .plumbing-flagship-intro-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;border-top:0}
  .plumbing-flagship-intro-list li{border-bottom:0;font-size:14px;line-height:1.4;padding:8px 0;align-items:flex-start}
  .plumbing-flagship-intro-list li:before{margin-top:3px}

  /* ---- Four value blocks: compact 2x2 grid, not four tall rows ---- */
  .plumbing-flagship-values{grid-template-columns:repeat(2,minmax(0,1fr));padding:8px 20px 30px}
  .plumbing-flagship-values article{padding:18px 16px;gap:10px;border-top:0}
  .plumbing-flagship-values article{border-left:1px solid var(--line)!important}
  .plumbing-flagship-values article:nth-child(odd){border-left:0!important}
  .plumbing-flagship-values article:nth-child(3),.plumbing-flagship-values article:nth-child(4){border-top:1px solid var(--line)}
  .plumbing-flagship-value-icon{width:38px;height:38px}
  .plumbing-flagship-values h3{font-size:14px}
  .plumbing-flagship-values p{font-size:13.5px;line-height:1.5}

  /* ---- Four lower cards: touch-friendly horizontal scroll-snap rail,
     pure CSS, clear partial-next-card peek, contained scrolling ---- */
  .plumbing-flagship-cards{display:flex;grid-template-columns:unset;background:none;border:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-padding-left:20px;gap:12px;margin:0 0 clamp(36px,9vw,52px);padding:4px 20px 16px;max-width:100%}
  .plumbing-flagship-cards article{flex:0 0 auto;width:78%;max-width:320px;min-width:225px;scroll-snap-align:start;border:1px solid var(--line);border-radius:10px;padding:20px 18px}
  .plumbing-flagship-cards h3{font-size:15px}
  .plumbing-flagship-cards article>p{font-size:14.5px;line-height:1.55}
  .plumbing-flagship-cards li{font-size:13.5px}

  /* ---- Related links: compact wrapping ---- */
  .plumbing-flagship-related{padding-left:20px;padding-right:20px;font-size:9px;gap:8px 22px}
  .plumbing-flagship-related a{padding:6px 0;align-items:center;display:inline-flex}
}

@media (width<=380px){
  .plumbing-flagship-hero{min-height:560px}
  .plumbing-flagship-cards article{width:82%}
}
