:root{
  /* brand palette, taken straight from the logo */
  --ink:#000000;          /* logo black */
  --ink-deep:#000000;
  --ink-soft:#15191B;
  --cyan:#0292B7;         /* logo cyan — water */
  --cyan-bright:#0AAEDA;
  --cyan-deep:#01758F;   /* darker cyan for buttons */
  --red-brand:#F03222;    /* the exact red in the logo — used only in the logo itself */
  --red:#C22A1C;          /* softened red for accents and hovers */
  --red-deep:#9E2416;     /* deeper red for buttons and panels */
  --paper:#F3F4F5;
  --white:#FFFFFF;
  --slate:#4C5559;
  --rule:rgba(0,0,0,.14);
  --rule-dark:rgba(255,255,255,.2);

  --pad:clamp(1.15rem,4vw,4rem);
  --gap:clamp(1.25rem,2.5vw,2rem);

  --s--1:clamp(.82rem,.8rem + .1vw,.9rem);
  --s-0:clamp(1rem,.96rem + .2vw,1.1rem);
  --s-1:clamp(1.16rem,1.08rem + .38vw,1.38rem);
  --s-2:clamp(1.45rem,1.28rem + .8vw,2rem);
  --s-3:clamp(1.85rem,1.5rem + 1.6vw,2.9rem);
  --s-4:clamp(2.2rem,1.55rem + 3vw,4rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:var(--s-0);
  line-height:1.62;
  font-variation-settings:"wdth" 100,"wght" 400;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{margin:0;line-height:1.07;letter-spacing:-.022em;font-variation-settings:"wdth" 110,"wght" 740}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}
img{display:block;max-width:100%;height:auto}

:focus-visible{outline:3px solid var(--cyan-bright);outline-offset:3px;border-radius:2px}

.wrap{max-width:1220px;margin-inline:auto;padding-inline:var(--pad)}
.band{padding-block:clamp(3rem,6.5vw,5.75rem)}
.band--paper{background:var(--paper)}
.band--ink{background:var(--ink);color:var(--paper);border-block:3px solid var(--cyan)}
.band--deep{background:var(--ink-deep);color:var(--paper)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--cyan);color:var(--ink-deep);
  padding:.7em 1.2em;font-variation-settings:"wdth" 104,"wght" 700;
}
.skip:focus{left:.5rem;top:.5rem}

/* ============ buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  text-decoration:none;
  font-variation-settings:"wdth" 104,"wght" 700;
  font-size:var(--s-0);letter-spacing:-.008em;
  padding:.75em 1.4em;border-radius:3px;
  border:2px solid transparent;line-height:1.2;text-align:center;
}
.btn--red{background:var(--red-deep);color:#fff}
.btn--red:hover{background:var(--red)}
.btn--cyan{background:var(--cyan-deep);color:#fff}
.btn--cyan:hover{background:var(--cyan)}
.btn--ghost{border-color:currentColor;background:transparent}
.btn--ghost:hover{background:rgba(255,255,255,.1)}
.btn--lg{font-size:var(--s-1);padding:.85em 1.8em}

/* ============ utility bar ============ */
.util{background:var(--ink-deep);color:rgba(246,245,242,.78);font-size:var(--s--1)}
.util__inner{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.6rem;padding-block:.4rem}
.util b{color:var(--paper);font-variation-settings:"wdth" 100,"wght" 650}
.util a{color:var(--paper);text-decoration:none}
.util a:hover{text-decoration:underline}
.util__right{margin-left:auto;display:flex;gap:.4rem 1.6rem;flex-wrap:wrap}

/* ============ header ============ */
.site{
  background:var(--white);color:var(--ink);
  position:sticky;top:0;z-index:100;
  border-bottom:3px solid var(--cyan);
  box-shadow:0 2px 14px rgba(0,0,0,.09);
}
.site__inner{display:flex;flex-wrap:nowrap;align-items:center;gap:1rem;padding-block:.7rem;min-width:0}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;margin-right:auto;min-width:0}
.brand img{height:clamp(40px,6vw,56px);width:auto}
.brand__text{font-variation-settings:"wdth" 106,"wght" 760;font-size:var(--s-0);letter-spacing:-.018em;line-height:1.14;max-width:15ch}
.brand__text span{display:block;color:var(--slate);font-size:.74em;font-variation-settings:"wdth" 96,"wght" 500;letter-spacing:.005em}

.gaschip{
  display:flex;align-items:center;gap:.6rem;text-decoration:none;
  background:var(--white);border-radius:4px;
  padding:.3rem .7rem .3rem .45rem;
  margin:.15rem .4rem .15rem 0;
}
.gaschip img{height:32px;width:auto}
.gaschip span{font-size:.7rem;line-height:1.2;color:var(--slate);font-variation-settings:"wdth" 98,"wght" 500}
.gaschip b{display:block;font-size:.95rem;color:var(--ink);font-variation-settings:"wdth" 108,"wght" 780;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.gaschip:hover b{color:var(--cyan-deep)}
@media (max-width:539px){.gaschip span{font-size:.64rem}.gaschip b{font-size:.86rem}.gaschip img{height:28px}}

.navtoggle{
  display:none;background:none;border:2px solid var(--rule);color:inherit;
  font:inherit;font-variation-settings:"wdth" 104,"wght" 650;
  padding:.5em .85em;border-radius:3px;cursor:pointer;align-items:center;gap:.5em;
}
.navtoggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

.nav ul{display:flex;align-items:center;gap:.1rem}
.nav a,.nav .navbtn{
  display:block;text-decoration:none;font-size:var(--s--1);
  font-variation-settings:"wdth" 88,"wght" 600;
  padding:.6em .35em;border-radius:3px;color:inherit;
  background:none;border:0;font-family:inherit;cursor:pointer;white-space:nowrap;
}
.nav a:hover,.nav .navbtn:hover{background:rgba(0,0,0,.06)}
.nav .navbtn::after{content:"";display:inline-block;margin-left:.45em;border:4px solid transparent;border-top-color:var(--cyan);transform:translateY(2px)}
.has-sub{position:relative}
.sub{
  position:absolute;top:calc(100% + .35rem);left:0;
  background:var(--white);color:var(--ink);min-width:15rem;
  border:1px solid var(--rule);border-top:3px solid var(--cyan);
  box-shadow:0 16px 40px rgba(0,0,0,.2);
  padding:.4rem;display:none;flex-direction:column;border-radius:0 0 3px 3px;
}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:flex}
.sub a{padding:.6em .8em;font-variation-settings:"wdth" 100,"wght" 500;white-space:normal}
.sub a:hover{background:var(--paper);color:var(--ink)}
.site__inner > .btn{margin-left:.4rem}
@media (min-width:1200px){.brand,.site__inner > .btn{flex-shrink:0}.site__inner > .btn{white-space:nowrap;padding-inline:1em}}

@media (max-width:1199px){
  .navtoggle{display:inline-flex}
  .site__inner > .btn{padding:.6em 1em;font-size:var(--s--1)}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--white);border-bottom:3px solid var(--cyan);
    box-shadow:0 14px 30px rgba(0,0,0,.18);
    max-height:74vh;overflow-y:auto;padding:.75rem var(--pad) 1.5rem;
  }
  .nav.open{display:block}
  .nav ul{display:block}
  .nav > ul > li{border-bottom:1px solid var(--rule)}
  .nav a,.nav .navbtn{padding:.85em .2em;font-size:var(--s-0);width:100%;text-align:left}
  .sub{
    position:static;display:none;background:transparent;color:inherit;
    box-shadow:none;border:0;border-left:3px solid var(--cyan);
    margin:0 0 .6rem .2rem;padding:0 0 0 .9rem;min-width:0;
  }
  .has-sub:hover .sub{display:none}
  .has-sub.open .sub,.has-sub.open:hover .sub{display:flex}
  .sub a{font-size:var(--s--1);padding:.5em 0}
  .sub a:hover{background:transparent;color:var(--cyan)}
}
@media (max-width:479px){
  .brand__text{font-size:.82rem;max-width:11ch}
  .site__inner > .btn{padding:.55em .8em}
}

/* ============ hero ============ */
.hero{background:var(--ink);color:var(--paper);overflow:hidden}
.hero__grid{
  display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1.05fr .95fr;align-items:center;
  padding-block:clamp(2.5rem,5.5vw,4.75rem);
}
.hero h1{font-size:var(--s-3);max-width:17ch;text-wrap:balance}
.hero__lede{margin-top:1.15rem;max-width:52ch;color:rgba(246,245,242,.82);font-size:var(--s-1);line-height:1.5}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.phoneblock{
  display:inline-block;text-decoration:none;margin-top:1.7rem;
  border-top:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark);
  padding-block:.95rem;
}
.phoneblock small{display:block;font-size:var(--s--1);color:rgba(246,245,242,.62)}
.phoneblock b{
  display:block;font-size:var(--s-4);
  font-variation-settings:"wdth" 118,"wght" 800;
  letter-spacing:-.035em;line-height:1;color:var(--cyan-bright);
  font-variant-numeric:tabular-nums;
}
.phoneblock:hover b{color:#5CD2F2}
.hero__fig{border-radius:4px;overflow:hidden;background:var(--ink-soft);aspect-ratio:4/3}
.hero__fig img{width:100%;height:100%;object-fit:cover}
@media (max-width:899px){
  .hero__grid{grid-template-columns:1fr}
  .hero__fig{order:-1;aspect-ratio:16/10}
}

/* home hero: full-width sliding photos behind the text (last slide repeats the first for a seamless loop) */
.hero--slides{position:relative;isolation:isolate}
.hero--slides .hero__grid{grid-template-columns:minmax(0,40rem);min-height:clamp(30rem,46vw,40rem)}
.hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.75) 45%,rgba(0,0,0,.35) 100%)}
.hero__track{display:flex;width:500%;height:100%;animation:heroslide 24s infinite}
.hero__track img{width:calc(100% / 5);height:100%;object-fit:cover}
@keyframes heroslide{
  0%,20%{transform:translateX(0)}
  25%,45%{transform:translateX(-20%)}
  50%,70%{transform:translateX(-40%)}
  75%,95%{transform:translateX(-60%)}
  100%{transform:translateX(-80%)}
}
@media (max-width:899px){.hero__bg::after{background:rgba(0,0,0,.66)}}

.phoneblock{animation:settle .6s cubic-bezier(.2,.7,.3,1) .1s both}
@keyframes settle{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ============ badge strip ============ */
.badges{background:var(--paper);border-bottom:3px solid var(--cyan);padding-block:1.6rem}
.badges ul{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.5rem clamp(1.4rem,3.5vw,2.75rem)}
.badges img{height:clamp(44px,6vw,64px);width:auto}
.badges a{display:block}
.badges .txtbadge{font-size:var(--s--1);color:var(--slate);font-variation-settings:"wdth" 100,"wght" 600;border-left:2px solid var(--cyan);padding-left:.8rem;line-height:1.3}
.badges .txtbadge b{display:block;color:var(--ink);font-size:var(--s-0);font-variation-settings:"wdth" 104,"wght" 740}

/* ============ accreditation logos (above the footer on every page) ============ */
.accred{background:#fff;border-top:1px solid var(--rule,#ddd);padding-block:1.75rem}
.accred ul{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.25rem clamp(1.5rem,4vw,3rem)}
.accred img{height:clamp(52px,7vw,68px);width:auto;max-width:100%}
.accred img.w{height:auto;width:clamp(130px,40vw,220px)}

/* ============ section head ============ */
.head{margin-bottom:clamp(2rem,4vw,3rem);max-width:64ch}
.head h2{font-size:var(--s-2);max-width:22ch;text-wrap:balance}
.head p{margin-top:.9rem;color:var(--slate);font-size:var(--s-0);max-width:58ch}
.band--ink .head p,.band--deep .head p{color:rgba(246,245,242,.78)}
.head--mid{margin-inline:auto;text-align:center}
.head--mid h2,.head--mid p{margin-inline:auto}

/* ============ promises ============ */
.promises{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.promise figure{margin:0;aspect-ratio:1/1;background:var(--paper);border-radius:4px;overflow:hidden}
.promise figure img{width:100%;height:100%;object-fit:cover}
.promise h3{margin-top:1.15rem;font-size:var(--s-1)}
.promise p{margin-top:.55rem;color:var(--slate);font-size:var(--s--1);line-height:1.6}

/* ============ problem cards ============ */
.cards{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.card{background:var(--white);border:1px solid var(--rule);border-radius:4px;overflow:hidden;display:flex;flex-direction:column}
.card figure{margin:0;aspect-ratio:16/10;background:var(--paper);overflow:hidden}
.card figure img{width:100%;height:100%;object-fit:cover}
.card__body{padding:1.25rem 1.35rem 1.5rem;display:flex;flex-direction:column;flex:1}
.card h3{font-size:var(--s-1)}
.card p{margin-top:.6rem;color:var(--slate);font-size:var(--s--1);line-height:1.6;flex:1}
.card .more{
  margin-top:1.1rem;align-self:flex-start;text-decoration:none;
  font-size:var(--s--1);font-variation-settings:"wdth" 102,"wght" 700;
  border-bottom:2px solid var(--cyan);padding-bottom:.15rem;
}
.card .more:hover{color:var(--cyan)}

/* ============ service groups ============ */
.groups{display:grid;gap:clamp(2rem,4vw,3rem) clamp(2rem,4vw,3.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.group h3{font-size:var(--s-1);padding-bottom:.65rem;border-bottom:2px solid var(--cyan)}
.group li{padding:.62rem 0;border-bottom:1px solid var(--rule-dark);display:flex;gap:.65rem;align-items:baseline;font-size:var(--s-0)}
.group li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--cyan);transform:translateY(-2px)}
.group li small{display:block;font-size:var(--s--1);color:rgba(246,245,242,.66);line-height:1.5}

/* ============ reviews ============ */
.reviews{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.review{background:var(--white);border:1px solid var(--rule);border-left:4px solid var(--cyan);border-radius:4px;padding:1.4rem 1.5rem;display:flex;flex-direction:column}
.review .stars{color:var(--cyan);letter-spacing:.12em;font-size:var(--s-0);line-height:1}
.review blockquote{margin:.85rem 0 0;font-size:var(--s-0);line-height:1.62;flex:1}
.review cite{display:block;margin-top:1rem;font-style:normal;font-size:var(--s--1);color:var(--slate);font-variation-settings:"wdth" 102,"wght" 650}
.reviews__cta{margin-top:clamp(1.75rem,3vw,2.5rem);text-align:center}

/* ============ why ============ */
.why{display:grid;gap:clamp(1.75rem,3vw,2.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.why div{border-top:3px solid var(--cyan);padding-top:1rem}
.why h3{font-size:var(--s-1)}
.why p{margin-top:.5rem;color:var(--slate);font-size:var(--s--1);line-height:1.6}

/* ============ gallery ============ */
.gallery{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.gallery figure{margin:0;aspect-ratio:1/1;background:var(--paper);border-radius:3px;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover}

/* ============ areas ============ */
.areas{columns:4 11rem;column-gap:2.25rem;font-size:var(--s-0)}
.areas li{padding:.42rem 0;border-bottom:1px solid var(--rule-dark);break-inside:avoid}

/* ============ emergency ============ */
.emergency{background:var(--red-deep);color:#fff;padding-block:clamp(2.5rem,5vw,4rem);text-align:center}
.emergency h2{font-size:var(--s-2);max-width:20ch;margin-inline:auto;text-wrap:balance}
.emergency p{margin:1rem auto 0;max-width:52ch;color:rgba(255,255,255,.92)}
.emergency .btn{margin-top:1.75rem;background:#fff;color:var(--red-deep)}
.emergency .btn:hover{background:#FFE4E0}

/* ============ contact ============ */
.contact{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));align-items:start}
.contact h2{font-size:var(--s-2);max-width:15ch}
.deets dt{font-size:var(--s--1);color:rgba(246,245,242,.6);margin-top:1.25rem}
.deets dt:first-child{margin-top:0}
.deets dd{margin:.15rem 0 0;font-variation-settings:"wdth" 104,"wght" 620;font-size:var(--s-0)}
.deets dd a{text-underline-offset:3px}

/* ============ footer ============ */
.foot{background:var(--ink-deep);color:rgba(255,255,255,.66);font-size:var(--s--1);line-height:1.65;border-top:3px solid var(--cyan)}
.foot__grid{display:grid;gap:2rem clamp(1.5rem,3vw,3rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));padding-block:clamp(2.5rem,5vw,3.5rem)}
.foot h4{font-size:var(--s-0);color:var(--paper);margin-bottom:.9rem}
.foot li{padding:.28rem 0}
.foot a{color:rgba(246,245,242,.78);text-decoration:none}
.foot a:hover{color:var(--cyan-bright);text-decoration:underline}
.foot__legal{border-top:1px solid var(--rule-dark);padding-block:1.35rem 1.5rem;font-size:.79rem;color:rgba(246,245,242,.5)}

/* ============ mobile call bar ============ */
.callbar{display:none}
@media (max-width:719px){
  .callbar{
    display:grid;grid-template-columns:1fr auto;align-items:center;gap:.9rem;
    position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:var(--red-deep);color:#fff;text-decoration:none;
    padding:.75rem 1rem;padding-bottom:calc(.75rem + env(safe-area-inset-bottom,0px));
    box-shadow:0 -6px 20px rgba(0,0,0,.4);
  }
  .callbar b{display:block;font-variation-settings:"wdth" 110,"wght" 800;font-size:1.2rem;letter-spacing:-.022em;line-height:1.1;font-variant-numeric:tabular-nums}
  .callbar small{font-size:.76rem;opacity:.82}
  .callbar em{font-style:normal;font-variation-settings:"wdth" 104,"wght" 700;font-size:.88rem;border:2px solid #fff;border-radius:3px;padding:.42em .85em}
  body{padding-bottom:5rem}
  .areas{columns:2 8rem}
}

/* photos not added yet collapse to a flat tone, never a broken icon */
figure.noimg img{display:none}
figure.noimg{background:linear-gradient(135deg,#242A2D,#0B0D0E)}
.badges li.noimg,.brand img.noimg{display:none}
/* ============================================================
   SERVICE PAGES
   ============================================================ */

/* breadcrumb */
.crumbs{background:var(--paper);border-bottom:1px solid var(--rule);font-size:var(--s--1)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:.75rem 0;color:var(--slate)}
.crumbs li::after{content:"/";margin-left:.4rem;color:var(--rule)}
.crumbs li:last-child::after{content:""}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--cyan-deep);text-decoration:underline}

/* service hero */
.shero{background:var(--ink);color:var(--paper)}
.shero__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1.1fr .9fr;align-items:center;padding-block:clamp(2.5rem,5vw,4.5rem)}
.shero h1{font-size:var(--s-3);max-width:16ch;text-wrap:balance}
.shero__sub{margin-top:1rem;font-size:var(--s-1);color:rgba(255,255,255,.82);max-width:46ch;line-height:1.5}
.ticks{margin-top:1.6rem;display:grid;gap:.6rem}
.ticks li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--s-0);line-height:1.45}
.ticks li::before{
  content:"";flex:0 0 auto;width:1.15em;height:1.15em;margin-top:.12em;border-radius:2px;
  background:var(--cyan);
  clip-path:polygon(41% 71%,84% 26%,95% 37%,41% 93%,6% 57%,17% 46%);
}
.shero__fig{border-radius:4px;overflow:hidden;background:var(--ink-soft);aspect-ratio:4/3}
.shero__fig img{width:100%;height:100%;object-fit:cover}
@media (max-width:899px){.shero__grid{grid-template-columns:1fr}.shero__fig{order:-1;aspect-ratio:16/10}}

/* alternating text / image rows */
.altrow{display:grid;gap:clamp(1.75rem,4vw,3.25rem);grid-template-columns:1fr 1fr;align-items:center;padding-block:clamp(2rem,4vw,3rem);border-top:1px solid var(--rule)}
.altrow:first-of-type{border-top:0}
.altrow figure{margin:0;aspect-ratio:4/3;background:var(--paper);border-radius:4px;overflow:hidden}
.altrow figure img{width:100%;height:100%;object-fit:cover}
.altrow:nth-of-type(even) figure{order:-1}
.altrow h3{font-size:var(--s-2)}
.altrow p{margin-top:.85rem;color:var(--slate);line-height:1.65;max-width:52ch}
.altrow .suits{margin-top:1.1rem;padding-top:1.1rem;border-top:2px solid var(--cyan);font-size:var(--s--1);color:var(--slate);max-width:52ch}
.altrow .suits b{display:block;color:var(--ink);font-variation-settings:"wdth" 104,"wght" 700;margin-bottom:.2rem}
@media (max-width:759px){.altrow{grid-template-columns:1fr}.altrow:nth-of-type(even) figure{order:0}.altrow figure{order:-1}}

/* numbered process steps — a genuine sequence, so numbers earn their place */
.steps{counter-reset:step;display:grid;gap:0}
.step{
  counter-increment:step;
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem 1.4rem;
  padding-block:1.5rem;border-top:1px solid var(--rule-dark);
}
.step:first-child{border-top:0}
.step::before{
  content:counter(step);
  font-variation-settings:"wdth" 118,"wght" 800;
  font-size:var(--s-2);line-height:1;color:var(--cyan);
  font-variant-numeric:tabular-nums;
  min-width:1.6em;
}
.step h3{font-size:var(--s-1)}
.step p{margin-top:.5rem;color:rgba(255,255,255,.76);font-size:var(--s-0);line-height:1.62;max-width:62ch}

/* plain data table */
.tablewrap{overflow-x:auto;margin-top:1.5rem}
table.data{border-collapse:collapse;width:100%;min-width:34rem;font-size:var(--s-0)}
table.data th,table.data td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--rule);vertical-align:top}
table.data thead th{border-bottom:2px solid var(--cyan);font-variation-settings:"wdth" 106,"wght" 740;white-space:nowrap}
table.data tbody th{font-variation-settings:"wdth" 102,"wght" 650}
table.data td{color:var(--slate)}

/* plain prose block */
.prose p{margin-top:1rem;max-width:66ch;line-height:1.7}
.prose p:first-child{margin-top:0}
.band--ink .prose p{color:rgba(255,255,255,.82)}

#commercial .altrow figure{aspect-ratio:16/9}
#commercial .altrow{border-top:0;padding-block:0}

/* footer: about block with logo and address */
.foot__logo{
  height:76px;width:auto;display:block;
  background:var(--white);padding:.6rem;border-radius:4px;
  margin-bottom:1.1rem;
}
.foot__about address{font-style:normal;margin-top:.9rem;line-height:1.55}
.foot__contact{margin-top:.9rem}
.foot__contact a{font-variation-settings:"wdth" 102,"wght" 620;color:var(--paper)}
.foot__social{margin-top:.9rem}
.foot__social a{
  display:inline-block;text-decoration:none;
  border:1px solid var(--rule-dark);border-radius:3px;
  padding:.4em .85em;font-variation-settings:"wdth" 102,"wght" 620;
}
.foot__social a:hover{border-color:var(--cyan);color:var(--cyan-bright);text-decoration:none}

/* related services list */
.related{display:grid;gap:.5rem 1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.related a{
  display:block;text-decoration:none;padding:.85rem 0;
  border-bottom:1px solid var(--rule);
  font-variation-settings:"wdth" 102,"wght" 620;
}
.related a:hover{color:var(--cyan-deep);border-bottom-color:var(--cyan)}

/* cards with no photo sit flush */
.card__body:only-child{padding-top:1.5rem}

/* icons on the bathroom service cards */
.card__icon{display:block;width:44px;height:44px;margin-bottom:1rem;color:var(--cyan-deep)}
.card__icon svg{
  width:100%;height:100%;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

/* FAQ accordion */
.faqs{border-top:1px solid var(--rule)}
.faq{border-bottom:1px solid var(--rule)}
.faq > summary{
  list-style:none;cursor:pointer;
  padding:1.15rem 2.5rem 1.15rem 0;position:relative;
  font-size:var(--s-1);font-variation-settings:"wdth" 106,"wght" 700;
  letter-spacing:-.015em;line-height:1.25;
}
.faq > summary::-webkit-details-marker{display:none}
.faq > summary::after{
  content:"";position:absolute;right:.4rem;top:50%;
  width:14px;height:14px;margin-top:-7px;
  border-right:2.5px solid var(--cyan);border-bottom:2.5px solid var(--cyan);
  transform:rotate(45deg) translateY(-25%);
  transition:transform .18s ease;
}
.faq[open] > summary::after{transform:rotate(-135deg) translateY(-25%)}
.faq > summary:hover{color:var(--cyan-deep)}
.faq p{margin:0 0 1.2rem;max-width:66ch;color:var(--slate);line-height:1.68}
@media (prefers-reduced-motion:reduce){.faq > summary::after{transition:none}}

/* highlighted note panel */
.note{
  border-left:4px solid var(--cyan);
  background:var(--paper);
  padding:1.3rem 1.5rem;
  max-width:66ch;
  margin-top:1.5rem;
}
.note p{margin-top:.8rem}
.note p:first-child{margin-top:0}
.band--ink .note{background:rgba(255,255,255,.07)}
.band--ink .note p{color:rgba(255,255,255,.82)}

/* steps on a light background */
.steps--light .step{border-top-color:var(--rule)}
.steps--light .step p{color:var(--slate)}

/* ============ floating WhatsApp button ============ */
.wa{
  position:fixed;z-index:130;
  right:1.3rem;bottom:1.3rem;
  display:flex;align-items:center;
  background:#25D366;color:#fff;text-decoration:none;
  border-radius:999px;padding:.72rem;
  box-shadow:0 6px 22px rgba(0,0,0,.3);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.wa:hover{background:#1FBE5A;transform:translateY(-2px);box-shadow:0 11px 28px rgba(0,0,0,.36)}
.wa svg{width:30px;height:30px;fill:currentColor;flex:0 0 auto;display:block}
.wa span{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-size:var(--s--1);font-variation-settings:"wdth" 104,"wght" 700;
  letter-spacing:-.008em;line-height:1;
  transition:max-width .26s ease, margin .26s ease;
}
.wa:hover span,.wa:focus-visible span{max-width:11rem;margin:0 .55rem 0 .6rem}
.wa:focus-visible{outline:3px solid var(--cyan-bright);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.wa,.wa span{transition:none}}

/* on phones it sits above the fixed call bar */
@media (max-width:719px){
  .wa{right:1rem;bottom:calc(5.5rem + env(safe-area-inset-bottom,0px));padding:.68rem}
  .wa svg{width:28px;height:28px}
  .wa span{display:none}
}

/* ============ filmstrip slider ============ */
.slider{position:relative}
.slider__track{
  display:flex;gap:1rem;align-items:flex-start;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-block:.25rem 1rem;
  scrollbar-width:none;-ms-overflow-style:none;
}
.slider__track::-webkit-scrollbar{display:none}
.slider__track:focus-visible{outline:3px solid var(--cyan-bright);outline-offset:4px;border-radius:4px}

.slide{margin:0;flex:0 0 auto;scroll-snap-align:center;max-width:min(88vw,900px)}
.slide img{
  display:block;height:clamp(220px,38vw,400px);width:auto;max-width:100%;
  object-fit:cover;border-radius:4px;background:var(--ink-soft);
}
.slide figcaption{
  margin-top:.75rem;font-size:var(--s--1);line-height:1.5;color:var(--slate);
  max-width:42ch;
}

.slider__btn{
  position:absolute;top:calc(clamp(220px,38vw,400px) / 2);
  transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;
  border:0;cursor:pointer;
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  transition:background .16s ease, opacity .16s ease;
}
.slider__btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.slider__btn:hover{background:var(--cyan-deep)}
.slider__btn--prev{left:max(.5rem, calc(var(--pad) - 23px))}
.slider__btn--next{right:max(.5rem, calc(var(--pad) - 23px))}
.slider__btn[disabled]{opacity:.28;cursor:default}
.slider__btn[disabled]:hover{background:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .slider__track{scroll-behavior:auto}
  .slider__btn{transition:none}
}
@media (max-width:639px){
  .slider__btn{width:40px;height:40px}
  .slider__btn svg{width:19px;height:19px}
}

/* captions with a lead-in line */
.slide figcaption b{
  display:block;color:var(--ink);
  font-variation-settings:"wdth" 104,"wght" 700;
  font-size:var(--s-0);letter-spacing:-.012em;
  margin-bottom:.3rem;line-height:1.25;
}

/* social icon row */
.foot__social{display:flex;gap:.75rem;margin-top:1.1rem;list-style:none;padding:0}
.foot__social li{padding:0}
.soc{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  color:#fff;text-decoration:none;
  transition:transform .16s ease, filter .16s ease;
}
.soc svg{width:25px;height:25px;fill:#fff;display:block}
.soc--fb{background:#1877f2}
.soc--ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.soc--ig svg{fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.soc--tt{background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.foot__social a.soc{display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;padding:0}
.foot__social a.soc:hover{transform:translateY(-2px);filter:brightness(1.1);color:#fff}
.soc:focus-visible{outline:3px solid var(--cyan-bright);outline-offset:3px}

/* icons above the promise blocks */
.promise > .card__icon{margin-bottom:.9rem}

/* stacked figure: one main image with two beneath */
.figstack{margin:0;display:grid;gap:.6rem}
.figstack__main{margin:0;aspect-ratio:4/3;background:var(--ink-soft);border-radius:4px;overflow:hidden}
.figstack__main img{width:100%;height:100%;object-fit:cover;display:block}
.figstack__row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.figstack__row figure{margin:0;aspect-ratio:4/3;background:var(--ink-soft);border-radius:4px;overflow:hidden}
.figstack__row img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:759px){.figstack{order:-1}}

/* click-to-load video */
.videoblock{margin-block:clamp(2rem,4vw,3rem)}
.videoblock__title{font-size:var(--s-1);margin-bottom:1rem}
.videoblock__note{margin-top:.8rem;font-size:var(--s--1);color:var(--slate);max-width:60ch}
.video{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:4px;background:var(--ink-soft);
}
.video img,.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video img{object-fit:cover}
.video__btn{
  position:absolute;inset:0;width:100%;height:100%;
  padding:0;border:0;background:none;cursor:pointer;display:block;
}
.video__btn::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.3);transition:background .18s ease}
.video__btn:hover::after,.video__btn:focus-visible::after{background:rgba(0,0,0,.14)}
.video__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:clamp(58px,9vw,80px);height:clamp(58px,9vw,80px);border-radius:50%;
  background:var(--red-deep);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  transition:background .18s ease, transform .18s ease;
}
.video__play svg{width:42%;height:42%;fill:currentColor;margin-left:8%}
.video__btn:hover .video__play{background:var(--red);transform:translate(-50%,-50%) scale(1.06)}
@media (prefers-reduced-motion:reduce){.video__play,.video__btn::after{transition:none}}

/* wider hero frame, for images that must not be cropped */
.shero__fig--wide{aspect-ratio:1900/1200}
@media (max-width:899px){.shero__fig--wide{aspect-ratio:1900/1200}}

/* small explanatory block with a pair of supporting images */
.rangeblock{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:1.15fr .85fr;align-items:center;
  margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--rule);
}
.rangeblock h4{font-size:var(--s-1);margin-bottom:.8rem}
.rangeblock p{margin-top:.8rem;color:var(--slate);line-height:1.65;max-width:56ch}
.rangeblock p:first-of-type{margin-top:0}
.rangeblock__figs{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.rangeblock__figs figure{margin:0;aspect-ratio:4/3;background:var(--ink-soft);border-radius:4px;overflow:hidden}
.rangeblock__figs img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:759px){.rangeblock{grid-template-columns:1fr}}

/* small bullet list inside a card */
.minilist{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--rule);display:grid;gap:.35rem}
.minilist li{
  display:flex;gap:.55rem;align-items:flex-start;
  font-size:var(--s--1);color:var(--slate);line-height:1.45;
}
.minilist li::before{
  content:"";flex:0 0 auto;width:1em;height:1em;margin-top:.15em;border-radius:2px;
  background:var(--cyan);
  clip-path:polygon(41% 71%,84% 26%,95% 37%,41% 93%,6% 57%,17% 46%);
}

/* ============ the van ============ */
.vanband{background:var(--ink);color:var(--paper);padding-block:clamp(2.2rem,4vw,3.2rem);overflow:hidden}
/* the van photo; its grey studio background fades out at the edges.
   Wheels are circles cut from the same image, rotated on scroll. */
.vanband{background:#171716}
.van{
  position:relative;max-width:1100px;margin:0 auto;aspect-ratio:1672/720;
  background:url(images/van-ecobuild.jpg) center/100% 100% no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(transparent,#000 12%,#000 90%,transparent);
  -webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(transparent,#000 12%,#000 90%,transparent);
  mask-composite:intersect;
}
.van__wheel{
  position:absolute;top:61.944%;width:12.679%;height:29.444%;border-radius:50%;
  background:url(images/van-ecobuild.jpg) no-repeat;background-size:788.68% auto;
  will-change:transform;
}
.van__wheel--rear{left:15.072%;background-position:17.260% 87.795%}
.van__wheel--front{left:75.239%;background-position:86.164% 87.795%}

.vanband__text{margin-top:1.4rem;text-align:center}
.vanband__text p{font-size:var(--s-0);color:rgba(255,255,255,.82)}
.vanband__text strong{color:var(--paper)}
.vanband__text a{color:var(--cyan-bright);text-underline-offset:3px}


/* manufacturer logo row */
.brandrow{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.6rem,4vw,3.25rem);
  list-style:none;margin:0;padding:0;
}
.brandrow li{padding:0;display:flex;align-items:center}
.brandrow img{
  display:block;width:auto;height:auto;
  max-height:clamp(26px,4vw,40px);
  max-width:clamp(112px,19vw,178px);
  object-fit:contain;
}

/* review platform row */
.reviewrow{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;
  gap:clamp(1.8rem,5vw,4rem);list-style:none;margin:0;padding:0;
}
.reviewrow li{padding:0}
.reviewrow a{
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  text-decoration:none;color:var(--slate);
  padding:1rem 1.2rem;border:1px solid var(--rule);border-radius:4px;
  background:var(--white);min-width:min(100%,220px);
  transition:border-color .16s ease, transform .16s ease;
}
.reviewrow a:hover{border-color:var(--cyan);transform:translateY(-2px)}
.reviewrow img{display:block;width:auto;height:auto;max-height:clamp(34px,5vw,46px);max-width:180px;object-fit:contain}
.reviewrow span{font-size:var(--s--1);text-align:center;line-height:1.35}
.reviewrow b{
  display:block;color:var(--ink);font-size:var(--s-1);
  font-variation-settings:"wdth" 108,"wght" 780;letter-spacing:-.02em;
}
@media (prefers-reduced-motion:reduce){.reviewrow a{transition:none}}

/* shower page: system check text with a photo beside it */
.syscheck{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1.4fr .6fr;align-items:start}
.syscheck figure{margin:0;aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:var(--ink-soft)}
.syscheck figure img{width:100%;height:100%;object-fit:cover}
@media (max-width:899px){.syscheck{grid-template-columns:1fr}.syscheck figure{aspect-ratio:16/10}}

/* two-column tick list */
.ticks--cols{margin-top:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:.8rem 2.5rem}

/* toilet page: why-us grid beside a photo */
.syscheck--light{align-items:center}
.syscheck--light figure{aspect-ratio:4/3;background:var(--paper)}
.why--two{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}

/* hero with a full-width photo behind the text (set --photo on the section) */
.shero--photo{background:linear-gradient(90deg,var(--ink) 0%,rgba(0,0,0,.88) 42%,rgba(0,0,0,.3) 72%,rgba(0,0,0,.05) 100%),var(--photo) 75% 35%/cover no-repeat}
.shero--photo .shero__grid{grid-template-columns:minmax(0,38rem);min-height:clamp(26rem,40vw,34rem)}
@media (max-width:899px){.shero--photo{background:linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)),var(--photo) 80% 35%/cover no-repeat}}

/* icons on the "why" blocks, and figures kept at their own shape */
.why .card__icon{width:38px;height:38px;margin-bottom:.8rem}
.altrow figure.altrow__fig--natural{aspect-ratio:auto}
.altrow figure.altrow__fig--natural img{height:auto}
.altrow .ticks{margin-top:1.3rem}

/* dark band with a photo behind it (set --photo on the section) */
.band--photo{background:linear-gradient(rgba(0,0,0,.86),rgba(0,0,0,.86)),var(--photo) center/cover no-repeat}
.head .btn{margin-top:1.3rem}
.why--three{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}

/* recent jobs: filter chips, captions, show more */
.jobfilter{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:1.6rem}
.jobfilter button{
  font:inherit;font-size:var(--s--1);font-variation-settings:"wdth" 100,"wght" 600;
  padding:.55em 1.1em;border-radius:999px;border:1.5px solid var(--rule);background:var(--white);color:var(--ink);cursor:pointer;
}
.jobfilter button:hover{border-color:var(--cyan)}
.jobfilter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.jobfilter button:focus-visible{outline:3px solid var(--cyan-bright);outline-offset:2px}
.jobs{grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr))}
.jobs figure{position:relative}
.jobs figure[hidden]{display:none}
.jobs img{transition:transform .35s ease}
.jobs figure:hover img{transform:scale(1.04)}
.jobs figcaption{
  position:absolute;inset:auto 0 0 0;padding:1.6rem .8rem .65rem;
  background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;
  font-size:var(--s--1);line-height:1.35;font-variation-settings:"wdth" 100,"wght" 600;
}
.jobs__more{text-align:center;margin-top:1.6rem}
@media (prefers-reduced-motion:reduce){.jobs img{transition:none}.jobs figure:hover img{transform:none}}
.jobs--three{grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr))}

/* hourly rates page */
.shero__grid--solo{grid-template-columns:minmax(0,44rem)}
.rates{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr))}
.rate{background:var(--white);border:1px solid var(--rule);border-top:3px solid var(--cyan);border-radius:4px;padding:1.3rem 1.1rem 1rem}
.rate h3{font-size:var(--s-1);margin-bottom:.8rem}
.rate .card__icon{width:36px;height:36px;margin-bottom:.7rem}
.rate table.data{width:100%;min-width:0;font-size:var(--s--1)}
.rate table.data th,.rate table.data td{padding:.7rem .3rem}
.rate table.data th:last-child,.rate table.data td:last-child{padding-right:0}
.rate table.data th:first-child{padding-left:0}
.rate table.data th small{display:block;font-size:.78em;color:var(--slate);font-variation-settings:"wdth" 100,"wght" 500}
.rate table.data td{font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 104,"wght" 700;font-size:var(--s-0);color:var(--ink)}
.rate table.data tbody th,.rate table.data td{white-space:nowrap}

/* ============ phone and tablet fit ============ */
.hero__fig,.shero__fig{margin:0}
@media (max-width:559px){
  /* the red call bar is fixed at the bottom on phones, so the header keeps
     just the logo and the menu button and the company name gets the room */
  .site__inner > .btn{display:none}
  .brand__text{max-width:none}
  /* two photos per row instead of one long column */
  .gallery,.jobs,.jobs--three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jobs figcaption{font-size:.72rem;padding:1.2rem .55rem .5rem}
  .jobfilter{gap:.4rem}
  .jobfilter button{padding:.5em .9em}
  /* accreditation strip as a tidy two-column grid */
  .badges ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1.2rem;justify-items:start;align-items:center}
}
@media (max-width:559px){
  /* two-column info tables stack on phones: the label sits above its text */
  .tablewrap{overflow:visible}
  .tablewrap table.data{min-width:0}
  .tablewrap table.data thead{display:none}
  .tablewrap table.data,.tablewrap table.data tbody,.tablewrap table.data tr,.tablewrap table.data th,.tablewrap table.data td{display:block;width:auto}
  .tablewrap table.data tr{border-bottom:1px solid var(--rule);padding-block:.9rem}
  .tablewrap table.data tr:first-child{border-top:2px solid var(--cyan)}
  .tablewrap table.data th,.tablewrap table.data td{border:0;padding:0}
  .tablewrap table.data td{margin-top:.35rem}
}

/* full company logo in the header, stacked logo in the footer */
.brand img{height:clamp(54px,5.4vw,66px);width:auto}
.foot__logo{height:auto;width:170px;padding:.8rem}

/* boiler installs gallery: portrait tiles suit wall-hung boilers */
.jobs--tall figure{aspect-ratio:3/4}

/* ============ water heaters page ============ */
.kicker{
  display:inline-block;margin-bottom:1rem;padding:.35rem .7rem;border-radius:3px;
  background:rgba(10,174,218,.14);color:var(--cyan-bright);
  font-size:var(--s--1);font-variation-settings:"wdth" 105,"wght" 700;letter-spacing:.02em;
}
.band--tight{padding-block:clamp(1.75rem,3.5vw,2.75rem)}

/* repair / install choice */
.paths{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.path{
  display:flex;align-items:center;gap:1.1rem;text-decoration:none;color:inherit;
  background:var(--white);border:1px solid var(--rule);border-left:4px solid var(--cyan);border-radius:4px;
  padding:1.35rem 1.4rem;transition:transform .18s,box-shadow .18s;
}
.path--red{border-left-color:var(--red)}
.path:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.09)}
.path__icon{flex:0 0 52px;height:52px;border-radius:4px;display:grid;place-items:center;background:rgba(2,146,183,.1);color:var(--cyan-deep)}
.path--red .path__icon{background:rgba(194,42,28,.09);color:var(--red)}
.path__icon svg,.path__arrow svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.path__text{flex:1;display:flex;flex-direction:column;gap:.2rem}
.path__text small{font-size:var(--s--1);color:var(--slate)}
.path__text b{font-size:var(--s-1);font-variation-settings:"wdth" 105,"wght" 800}
.path__text span{font-size:var(--s--1);color:var(--slate);line-height:1.5}
.path__arrow{color:var(--cyan-deep);transition:transform .18s}
.path--red .path__arrow{color:var(--red)}
.path:hover .path__arrow{transform:translateX(4px)}

/* icon tiles on type cards */
.cards--tiles .card{transition:transform .18s,box-shadow .18s,border-color .18s}
.cards--tiles .card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.08);border-color:var(--cyan)}
.cards--tiles .card__icon{width:56px;height:56px;padding:12px;border-radius:4px;background:rgba(2,146,183,.1)}

/* four cards in one row on wide screens */
.cards--four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1099px){.cards--four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.cards--four{grid-template-columns:1fr}}

/* emergency alert panel */
.alert{border:1px solid var(--rule-dark);border-top:4px solid var(--red-brand);border-radius:4px;padding:clamp(1.4rem,3vw,2.25rem)}
.alert__head{display:flex;gap:1.1rem;align-items:flex-start}
.alert__head p{margin-top:.4rem;color:rgba(255,255,255,.72)}
.alert__icon{flex:0 0 48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--red)}
.alert__icon svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.alert__steps{
  list-style:none;margin:1.75rem 0 0;padding:0;counter-reset:al;
  display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
}
.alert__steps li{counter-increment:al;padding-top:1rem;border-top:1px solid var(--rule-dark);color:rgba(255,255,255,.76);font-size:var(--s--1);line-height:1.6}
.alert__steps li::before{content:counter(al,decimal-leading-zero);display:block;font-size:var(--s-2);font-variation-settings:"wdth" 110,"wght" 800;color:var(--red-brand);line-height:1;margin-bottom:.6rem}
.alert__steps b{display:block;color:var(--paper);font-size:var(--s-0);margin-bottom:.3rem}
.alert__steps a{color:var(--cyan-bright)}
@media (prefers-reduced-motion:reduce){.path,.path__arrow,.cards--tiles .card{transition:none}.path:hover,.cards--tiles .card:hover{transform:none}}

/* phones: comfortable tap targets and no text under 12px */
@media (max-width:759px){
  .crumbs ol{padding:.2rem 0}
  .crumbs a{display:inline-block;padding:.6rem .2rem}
  .foot li a,.foot__contact a{display:inline-block;padding:.35rem 0}
  .card .more{padding-block:.55rem .4rem;margin-top:.5rem}
  figcaption,.jobs figcaption{font-size:.78rem}
  .rate table.data th small{font-size:.78rem}
  .foot__legal a{display:inline-block;padding:.5rem 0}
}

/* desktop polish: tidy accreditation grid, one-line contact number, even review cards */
.accred__label{margin:0 0 1.25rem;text-align:center;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);font-variation-settings:"wdth" 104,"wght" 700}
.reviewrow{align-items:stretch}
.reviewrow li{display:flex}
.reviewrow a{justify-content:center;min-width:min(100%,230px)}
@media (min-width:760px){
  .accred ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.75rem 2rem;max-width:58rem;margin-inline:auto;justify-items:center}
  .contact .phoneblock b{font-size:clamp(2.2rem,3.5vw,3rem);white-space:nowrap}
}

/* service hero with full-width sliding photos (reuses the home .hero__bg / .hero__track) */
.shero--slides{position:relative;isolation:isolate;overflow:hidden}
.shero--slides .shero__grid{grid-template-columns:minmax(0,38rem);min-height:clamp(26rem,40vw,34rem)}

/* terms page */
.legaltext > *{max-width:46rem}
.legaltext h2{font-size:var(--s-1);margin-top:2.25rem}
.legaltext h2:first-child{margin-top:0}
.legaltext p,.legaltext li{margin-top:.8rem;line-height:1.7}
.legaltext ul{margin-top:.8rem;padding-left:1.2rem;list-style:disc}
.legaltext a{text-decoration:underline}
.foot__legal p+p{margin-top:.6rem}

/* design polish v2 */
.head h2::before{content:"";display:block;width:2.75rem;height:4px;border-radius:2px;background:var(--cyan);margin-bottom:.95rem}
.band--ink .head h2::before,.band--deep .head h2::before{background:var(--cyan-bright)}
.head--mid h2::before{margin-inline:auto}
.card{border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 14px 30px -20px rgba(0,0,0,.35);transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(0,0,0,.06),0 22px 38px -20px rgba(0,0,0,.4)}
.card figure img{transition:transform .5s ease}
.card:hover figure img{transform:scale(1.04)}
.altrow figure{border-radius:12px;box-shadow:0 22px 44px -26px rgba(0,0,0,.5)}
.why div{background:var(--paper);padding:1.1rem 1.25rem 1.35rem;border-radius:2px 2px 10px 10px}
.band--paper .why div{background:#fff}
.step{position:relative;border-top:0}
.step::before{display:grid;place-items:center;min-width:0;width:2.7rem;height:2.7rem;border-radius:50%;background:var(--cyan);color:#fff;font-size:1.15rem}
.step:not(:last-child)::after{content:"";position:absolute;left:1.34rem;top:4.2rem;bottom:-1.5rem;width:2px;background:var(--rule-dark)}
.steps--light .step:not(:last-child)::after{background:var(--rule)}
.related a{border-radius:6px}
.ctaband{background:linear-gradient(100deg,#03232b 0%,#07495b 60%,#0a6b85 120%);color:#fff;padding-block:clamp(2.2rem,4.5vw,3.2rem)}
.ctaband__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2.5rem}
.ctaband h2{font-size:var(--s-2);max-width:20ch;text-wrap:balance;color:#fff}
.ctaband p{margin-top:.6rem;max-width:46ch;color:rgba(255,255,255,.85);line-height:1.55}
.ctaband__btns{display:flex;flex-wrap:wrap;gap:.75rem}
@media (max-width:759px){.ctaband__btns{width:100%}.ctaband__btns .btn{flex:1 1 100%;text-align:center}}
@media (prefers-reduced-motion:reduce){.card,.card:hover,.card figure img{transition:none}.card:hover{transform:none}.card:hover figure img{transform:none}}

/* new boiler page extras */
.promises--photos .promise figure{aspect-ratio:4/3;border-radius:12px;box-shadow:0 22px 44px -26px rgba(0,0,0,.5)}
.pipework{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr 1.1fr;align-items:center}
.pipework__figs{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.pipework__figs figure{position:relative;margin:0;aspect-ratio:4/5;border-radius:12px;overflow:hidden;box-shadow:0 22px 44px -26px rgba(0,0,0,.5)}
.pipework__figs figure:nth-child(2){margin-top:2.5rem}
.pipework__figs img{width:100%;height:100%;object-fit:cover}
.pipework__figs figcaption{position:absolute;inset:auto 0 0 0;padding:2rem .9rem .75rem;font-size:.78rem;font-variation-settings:"wdth" 100,"wght" 650;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75))}
@media (max-width:899px){.pipework{grid-template-columns:1fr}.pipework__figs figure:nth-child(2){margin-top:1.25rem}}

/* three-photo version of the sliding hero */
.hero__track--3{width:400%;animation-name:heroslide3}
.hero__track--3 img{width:25%}
@keyframes heroslide3{
  0%,27%{transform:translateX(0)}
  33%,60%{transform:translateX(-25%)}
  66%,93%{transform:translateX(-50%)}
  100%{transform:translateX(-75%)}
}
.pipework__figs--one{grid-template-columns:1fr;max-width:26rem;justify-self:center}
.pipework__figs--one figure:nth-child(2){margin-top:0}

/* ten accreditation logos: five per row */
.accred a{display:block;line-height:0}
.accred img.bark{border-radius:8px}
@media (min-width:760px){.accred ul{grid-template-columns:repeat(5,minmax(0,1fr));max-width:72rem}}

/* safety cards on the boiler repair page */
.cards--safety .card{border-top:4px solid var(--red);background:#fff}
.cards--safety .card__icon{color:var(--red)}
.cards--safety .card__icon svg{stroke:var(--red)}

/* responsive polish: tablets and short landscape screens */
@media (min-width:560px) and (max-width:1159px){
  .badges ul{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;align-items:center;gap:1.2rem 2.25rem}
}
@media (max-height:520px) and (orientation:landscape){
  .site{position:static}
  .callbar{display:none}
  body{padding-bottom:0}
}
@media (max-width:1199px){
  .nav{max-height:calc(100dvh - 9rem)}
  .sub a{padding:.7em 0}
}