/* PEP-925 — /plumber-chiswick route stylesheet. Self-sufficient: loaded after
   the shared sitewide stylesheet, contains every .chiswick-hub* rule this
   route needs so the page renders correctly even against a browser cache
   that predates this file. Scoped entirely under .chiswick-hub so no other
   route is visually affected.
   Note: the intro section's two accent text colours (#606863, #885b3a) are
   --muted/--copper-ink darkened slightly toward black, not new brand
   colours — var(--stone-100) is darker than the var(--stone-050) those
   tokens were proven against elsewhere on the site, which otherwise drops
   both under the 4.5:1 AA text-contrast threshold (4.28:1 / 4.07:1
   measured); these hit 4.87:1 / 4.94:1 with a safety margin. */
.chiswick-hub-main{background:var(--stone-050);min-width:0}

.chiswick-hub{
--cw-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");
--cw-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");
--cw-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");
--cw-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");
--cw-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");
--cw-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");
}

/* Hero */
.chiswick-hub-hero{isolation:isolate;color:var(--cream);background:var(--green-1000);min-height:min(88vh,800px);align-items:center;display:flex;position:relative;overflow:hidden}
.chiswick-hub-hero-media{z-index:0;position:absolute;inset:0}
.chiswick-hub-hero-media img{object-fit:cover;width:100%;height:100%;display:block}
.chiswick-hub-hero-shade{z-index:1;pointer-events:none;background:linear-gradient(100deg,#03120de3 0%,#03120d8c 33%,#03120d24 56%,transparent 70%);position:absolute;inset:0}
.chiswick-hub-hero-panel{z-index:2;width:min(560px,46%);min-width:300px;color:var(--cream);flex-direction:column;justify-content:center;gap:0;margin:0;padding:0 clamp(24px,4.4vw,64px);display:flex;position:relative}
.chiswick-hub-hero-panel>.kicker{color:var(--brass);margin-bottom:16px}
.chiswick-hub-hero-panel h1{font:500 clamp(36px,4.4vw,56px)/1.05 var(--display);letter-spacing:-.03em;color:var(--cream);margin-bottom:18px}
.chiswick-hub-hero-rule{width:60px;height:1px;background:var(--brass);opacity:.75;margin-bottom:20px}
.chiswick-hub-hero-support{color:#ffffffc4;font-size:clamp(13px,1.05vw,15.5px);line-height:1.6;max-width:40ch;margin-bottom:28px}
.chiswick-hub-hero-actions{align-items:center;gap:16px 22px;flex-wrap:wrap;display:flex}
.chiswick-hub-cta{color:var(--green-1000);background:var(--brass);border-color:var(--brass)}
.chiswick-hub-cta:hover{color:var(--green-1000);background:var(--cream);border-color:var(--cream)}
.chiswick-hub-hero-actions .button-quiet:hover{border-color:var(--copper)}

@media (width<=1040px){
.chiswick-hub-hero-panel{width:min(460px,52%);min-width:280px}
}

/* Capability strip: 4-item dark bar directly beneath the hero */
.chiswick-hub-strip{background:var(--green-1000);border-top:1px solid var(--line-light);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}
.chiswick-hub-strip-item{border-left:1px solid var(--line-light);align-items:center;gap:13px;padding:20px clamp(16px,2.4vw,28px);display:flex}
.chiswick-hub-strip-item:first-child{border-left:0}
.chiswick-hub-strip-icon{flex:none;width:26px;height:26px;background:var(--brass);display:inline-block;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
.chiswick-hub-icon-house{-webkit-mask-image:var(--cw-icon-house);mask-image:var(--cw-icon-house)}
.chiswick-hub-icon-drop{-webkit-mask-image:var(--cw-icon-drop);mask-image:var(--cw-icon-drop)}
.chiswick-hub-icon-nodes{-webkit-mask-image:var(--cw-icon-nodes);mask-image:var(--cw-icon-nodes)}
.chiswick-hub-icon-layers{-webkit-mask-image:var(--cw-icon-layers);mask-image:var(--cw-icon-layers)}
.chiswick-hub-icon-route{-webkit-mask-image:var(--cw-icon-route);mask-image:var(--cw-icon-route)}
.chiswick-hub-strip-item span{color:var(--cream);font:620 12px/1.32 var(--body);letter-spacing:.005em}

@media (width<=1040px){
.chiswick-hub-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
.chiswick-hub-strip-item:nth-child(3){border-left:0}
}

/* Intro: cream/stone band, copy + checklist left, decorative sketch right */
.chiswick-hub-intro{background:var(--stone-100);grid-template-columns:minmax(0,1.1fr) minmax(230px,.7fr);align-items:center;gap:clamp(30px,5.5vw,72px);padding:clamp(48px,6.4vw,84px) clamp(26px,5vw,64px);display:grid}
.chiswick-hub-intro-copy>.kicker{margin-bottom:14px}
.chiswick-hub-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}
.chiswick-hub-intro-copy>p{color:#606863;font-size:clamp(12px,1.05vw,14.5px);line-height:1.7;max-width:56ch;margin-bottom:22px}
.chiswick-hub-intro-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.chiswick-hub-intro-list li{border-bottom:1px solid var(--line);color:var(--ink);font:600 12.5px/1.4 var(--body);letter-spacing:.002em;align-items:flex-start;gap:12px;padding:11px 2px;display:flex}
.chiswick-hub-intro-list li:before{content:"";flex:none;margin-top:2px;width:16px;height:16px;background:var(--copper);-webkit-mask:var(--cw-icon-check) center/10px no-repeat;mask:var(--cw-icon-check) center/10px no-repeat;border-radius:50%}
.chiswick-hub-intro-visual{flex-direction:column;align-items:center;justify-content:center;gap:16px;display:flex}
.chiswick-hub-sketch{width:100%;max-width:clamp(210px,26vw,300px);height:auto;opacity:.92}
.chiswick-hub-sketch-caption{flex-direction:column;align-items:center;gap:10px;display:flex}
.chiswick-hub-sketch-caption span{width:40px;height:1px;background:var(--copper);opacity:.6}
.chiswick-hub-sketch-caption strong{color:#885b3a;font:640 10px/1.4 var(--display);letter-spacing:.06em;text-transform:uppercase;text-align:center}

@media (width<=900px){
.chiswick-hub-intro{grid-template-columns:1fr;text-align:left}
.chiswick-hub-intro-visual{margin-top:8px}
}

/* Four dark capability cards */
.chiswick-hub-capabilities{background:var(--green-1000);border-top:1px solid var(--line-light);grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,18px);padding:clamp(40px,5.4vw,60px) clamp(26px,5vw,64px);display:grid}
.chiswick-hub-capabilities article{border:1px solid #cfb37a3d;border-radius:4px;text-align:center;flex-direction:column;align-items:center;gap:13px;padding:clamp(26px,2.8vw,34px) clamp(16px,2vw,22px);display:flex}
.chiswick-hub-capability-icon{width:38px;height:38px;background:var(--brass);display:inline-block;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
.chiswick-hub-capabilities h3{font:600 14.5px/1.3 var(--display);letter-spacing:-.015em;color:var(--cream)}
.chiswick-hub-capabilities p{color:#ffffffb0;font-size:12px;line-height:1.58;max-width:30ch}

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

/* Four compact lower cards with real proof photography */
.chiswick-hub-cards{background:var(--stone-050);grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,22px);padding:clamp(10px,1.6vw,18px) clamp(26px,5vw,64px) clamp(48px,6vw,68px);display:grid}
.chiswick-hub-cards article{min-width:0;display:grid;gap:3px}
.chiswick-hub-card-media{width:100%;aspect-ratio:6/5;border-radius:6px;overflow:hidden;margin-bottom:11px;background:var(--stone-200)}
.chiswick-hub-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.chiswick-hub-cards h3{font:600 13.5px/1.25 var(--display);letter-spacing:-.015em;color:var(--ink)}
.chiswick-hub-cards p{color:var(--muted);font-size:11.5px;line-height:1.55}

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

/* Related services strip */
.chiswick-hub-related{background:var(--green-960);color:#ffffffb3;font:660 8.5px/1.4 var(--display);letter-spacing:.05em;text-transform:uppercase;flex-wrap:wrap;gap:10px 30px;padding:22px clamp(26px,5vw,64px);display:flex}
.chiswick-hub-related a{color:inherit;align-items:center;padding:6px 0;display:inline-flex}
.chiswick-hub-related a:hover{color:var(--brass)}

/* =====================================================================
   Compact mobile treatment, following the PEP-922/923/924 lessons:
   composed hero, readable body copy, 2x2 grids for icon-cards, a
   touch-friendly scroll-snap rail for the photo cards, 44px CTAs,
   no body overflow. Fully self-sufficient against any cached shared CSS.
   ===================================================================== */
@media (width<=760px){
  .chiswick-hub-hero{min-height:clamp(560px,150vw,660px);align-items:flex-end}
  .chiswick-hub-hero-media img{object-position:32% 50%}
  .chiswick-hub-hero-shade{background:linear-gradient(190deg,#03120d1a 0%,#03120d59 26%,#03120ddb 54%,#03120d 100%)}
  .chiswick-hub-hero-panel{width:100%;min-width:0;padding:22px 20px clamp(28px,7.4vw,36px)}
  .chiswick-hub-hero-panel>.kicker{margin-bottom:10px}
  .chiswick-hub-hero-rule{display:none}
  .chiswick-hub-hero-support{font-size:15px;line-height:1.55;max-width:none;margin-bottom:20px}
  .chiswick-hub-hero-actions{gap:12px 16px}
  .chiswick-hub-hero-actions .button{min-height:44px}

  .chiswick-hub-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chiswick-hub-strip-item{padding:15px 14px;gap:11px}
  .chiswick-hub-strip-item:nth-child(3){border-left:0}
  .chiswick-hub-strip-item:nth-child(3),.chiswick-hub-strip-item:nth-child(4){border-top:1px solid var(--line-light)}
  .chiswick-hub-strip-icon{width:23px;height:23px}
  .chiswick-hub-strip-item span{font-size:13px}

  .chiswick-hub-intro{padding:36px 20px 8px;gap:26px}
  .chiswick-hub-intro-copy>p{font-size:15px;line-height:1.6;max-width:none}
  .chiswick-hub-intro-list li{font-size:14.5px;padding:10px 0}
  .chiswick-hub-sketch{max-width:190px}

  .chiswick-hub-capabilities{grid-template-columns:repeat(2,minmax(0,1fr));padding:8px 20px 32px}
  .chiswick-hub-capabilities article{padding:20px 14px}
  .chiswick-hub-capabilities h3{font-size:14.5px}
  .chiswick-hub-capabilities p{font-size:13.5px;line-height:1.5}

  .chiswick-hub-cards{display:flex;grid-template-columns:unset;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-padding-left:20px;gap:14px;padding:6px 20px 18px;margin:0}
  .chiswick-hub-cards article{flex:0 0 auto;width:74%;max-width:300px;min-width:215px;scroll-snap-align:start}
  .chiswick-hub-cards h3{font-size:15px}
  .chiswick-hub-cards p{font-size:14px;line-height:1.5}

  .chiswick-hub-related{padding-left:20px;padding-right:20px;font-size:9.5px;gap:8px 24px}
  .chiswick-hub-related a{padding:6px 0}
}

@media (width<=380px){
  .chiswick-hub-hero{min-height:580px}
  .chiswick-hub-cards article{width:80%}
}