/* B.E Plumbing Services. His own brand: the grey and black badge with a water-blue
   drop, and the white van's lettering (Montserrat), with Nunito Sans from his old
   site for text. Light only. Every text colour passes WCAG AA where it's used;
   --water is decorative only (4:1 on white), --water-deep carries text and buttons. */
/* The fonts are on this site (site/fonts), not loaded from Google: Montserrat for headings,
   Nunito Sans for text and Caveat for the two handwritten notes on the home page. The latin
   files cover English; the latin-ext ones only download if a page uses a letter like ł or ő.
   The Caveat file only has the letters the notes use (its unicode-range), so if a note's
   wording changes, get a new file (NOTES.md, Fonts). Browsers keep these files for a year, so
   a changed font needs a new file name. Licences: /fonts/OFL.txt. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600 800;font-display:swap;src:url(/fonts/montserrat-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600 800;font-display:swap;src:url(/fonts/montserrat-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/nunito-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/nunito-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/caveat-notes.woff2) format('woff2');unicode-range:U+20-21,U+27,U+47,U+54,U+61-62,U+65,U+68-69,U+6d,U+70,U+73-74,U+76}
:root{
  --ink:#15191E; --text:#39414B; --muted:#5B636D; --line:#E2E5E9;
  --white:#FFFFFF; --stone:#F3F4F6; --sky:#E8F2F6; --badge:#A3A3A3;
  --water:#3C88A3; --water-deep:#1F6680; --water-hover:#18556B;
  --wa:#127A44; --wa-hover:#0E6537;
  --head:'Montserrat',system-ui,sans-serif; --body:'Nunito Sans',system-ui,sans-serif;
  --shadow:0 1px 2px rgba(21,25,30,.05),0 12px 32px rgba(21,25,30,.08);
  --shadow-lg:0 2px 6px rgba(21,25,30,.06),0 30px 70px rgba(21,25,30,.14);
  --bar-h:0px;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-drawer:cubic-bezier(.32,.72,0,1); --edge:#8A929B;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;scroll-padding-top:84px;scroll-padding-bottom:calc(var(--bar-h) + 16px)}
body{margin:0;background:var(--white);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;padding-bottom:var(--bar-h)}
h1,h2,h3,h4{margin:0;font-family:var(--head);color:var(--ink);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--water-deep)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--water-deep);outline-offset:3px;border-radius:6px}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
@media(min-width:900px){.wrap{padding-left:40px;padding-right:40px}}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;text-decoration:none;font-family:var(--head);font-weight:700;font-size:16px;line-height:1.2;letter-spacing:0;border-radius:14px;padding:14px 24px;border:0;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background-color .2s ease,box-shadow .2s ease,transform .16s var(--ease-out)}
.btn svg{flex:none}
/* Buttons have a soft darker edge underneath, so they look pressable, and squeeze a little as a
   finger lands on them. Hover effects are only for a mouse (a tap would leave them stuck on). */
.btn:active{transform:scale(.97)}
.btn-main{background:linear-gradient(180deg,#2A7C97 0%,var(--water-deep) 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -2px 0 rgba(0,0,0,.18),0 1px 2px rgba(21,25,30,.16)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),0 1px 2px rgba(21,25,30,.16)}
.btn-main:active,.btn-wa:active{box-shadow:inset 0 -1px 0 rgba(0,0,0,.22)}
.btn-line{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--edge),0 1px 2px rgba(21,25,30,.08)}
@media(hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-1px)}
  .btn:active{transform:scale(.97)}
  .btn-main:hover{background:linear-gradient(180deg,#24718B 0%,var(--water-hover) 100%)}
  .btn-wa:hover{background:var(--wa-hover)}
  .btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--ink),0 1px 2px rgba(21,25,30,.08)}
}

/* header */
header.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.top-row{display:flex;align-items:center;gap:20px;height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-width:0}
.brand img{width:50px;height:50px;flex:none;transition:transform .9s cubic-bezier(.3,1.3,.5,1)}
@media(hover:hover){.brand:hover img{transform:rotate(360deg)}}
/* The header's bottom edge is a water pipe that fills as you scroll down the page. */
.pipe{position:absolute;left:0;right:0;bottom:-2px;height:5px;background:#E3E7EB;overflow:hidden;pointer-events:none}
.pipe::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 172px,rgba(21,25,30,.2) 172px 178px)}
.pipe i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(180deg,#8ACBE0 0%,#3C88A3 55%,#2B7792 100%)}
.brand b{display:block;font-family:var(--head);font-weight:800;font-size:18px;letter-spacing:-.01em;line-height:1.1;white-space:nowrap}
.brand span{display:block;font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}
.top-row>nav{margin-left:auto;display:flex;gap:24px}
.top-row>nav a{text-decoration:none;color:var(--ink);font-weight:700;font-size:15px}
.top-row>nav a:hover{color:var(--water-deep);text-decoration:underline;text-underline-offset:5px}
.top .btn{padding:12px 18px;font-size:15px;min-height:48px}
.wa-green{color:#25D366}
@media(max-width:1100px){.top-row>nav{display:none}.top .btn{margin-left:auto}}
@media(max-width:520px){.top-row{height:68px;gap:12px}.brand img{width:44px;height:44px}.brand b{font-size:16px}.brand span{font-size:12px}.top .btn .num{display:none}}
/* On phones the header button is just the WhatsApp logo (screen readers still hear "WhatsApp"). */
@media(max-width:480px){.top .btn-wa{position:relative;width:48px;height:48px;padding:0;border-radius:14px}.top .btn-wa svg{width:25px;height:25px}.top .btn-wa>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media(max-width:360px){.brand b{font-size:14.5px}.brand span{font-size:11.5px}}

/* hero */
.hero{background:linear-gradient(180deg,var(--white) 0%,var(--stone) 100%);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-top:56px;padding-bottom:64px}
.hero-grid>*{min-width:0}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:8px;padding-top:36px;padding-bottom:40px}}
/* The headline in three parts, "Quality plumbing", "and heating" and "in Rugby" (in blue, on its
   own line). Its size keeps "Quality plumbing" on one line: it's 8.8 times the size wide. */
.hero h1{font-size:clamp(38px,4.6vw,56px);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin-top:14px}
@media(max-width:420px){.hero h1{font-size:min(38px,calc((100vw - 46px) / 8.8))}}
.hero h1 .w{display:inline-block}
.hero h1 .h1-town{display:block;width:fit-content;color:var(--water-deep)}
.hero .lead{margin-top:20px;font-size:clamp(17px,1.9vw,19.5px);max-width:40ch}
.hero-cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:520px){.hero-cta .btn{flex:1 1 100%}}
/* Ben's credentials, set out like the lettering on his van: plain words and blue dots,
   with the official Gas Safe Register logo (see-through background, otherwise as supplied). */
.creds-hero{margin-top:30px;display:flex;align-items:center;gap:16px}
.creds-hero img{height:66px;width:auto;flex:none}
.creds-hero p,.creds-hero ul{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.creds-hero b{font-family:var(--head);font-weight:800}
.creds-hero .dots{margin-left:-25px}
/* Each item starts with a dot; the dot that would start a new line is trimmed off, so dots only sit between items. */
.dots{list-style:none;padding:0;display:flex;flex-wrap:wrap;font-weight:700;margin-left:-25px;clip-path:inset(0 0 0 25px)}
.dots li::before{content:"";display:inline-block;width:6px;height:6px;margin:0 9px 0 10px;border-radius:50%;background:var(--water);vertical-align:middle;transform:translateY(-1px)}
.cr-google{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin-top:2px;font-size:15px;font-weight:700;color:var(--ink);text-decoration:none}
.cr-google:hover{text-decoration:underline;text-underline-offset:4px}
.cr-google .stars{display:inline-block;width:80px;height:15px;margin:0;-webkit-mask-size:16px 15px;mask-size:16px 15px}
.cr-google>span:last-child{white-space:nowrap}
.hero-art{position:relative;aspect-ratio:1/0.82;width:100%;max-width:600px;justify-self:center}
.hero-art .disc{position:absolute;left:8%;right:2%;top:2%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4F9FB 0%,var(--sky) 55%,#D6E8EF 100%);box-shadow:inset 0 0 0 10px rgba(255,255,255,.7)}
.hero-art .drop{position:absolute;right:16%;top:6%;width:44px;height:58px;background:var(--water);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;clip-path:path('M22 0 C 22 0, 44 26, 44 38 A 22 22 0 0 1 0 38 C 0 26, 22 0, 22 0 Z');opacity:.9}
/* The van is a button: press it and it beeps (just for fun). */
.van{position:absolute;left:-2%;bottom:0;width:106%;max-width:none;padding:0;margin:0;border:0;background:none;-webkit-appearance:none;appearance:none;font:inherit;color:inherit;cursor:pointer;border-radius:28px;-webkit-tap-highlight-color:transparent}
.van .body{display:block}
.van img{width:100%;filter:drop-shadow(0 26px 30px rgba(21,25,30,.18));transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
@media(hover:hover){.van:hover img{transform:translateY(-4px) rotate(-.6deg)}}
.van .speed{position:absolute;right:99%;top:34%;width:22%;height:32%;display:grid;align-content:space-between;justify-items:end;pointer-events:none}
.van .speed i{display:block;height:4px;border-radius:4px;background:rgba(21,25,30,.2);opacity:0}
.van .speed i:nth-child(1){width:70%}
.van .speed i:nth-child(2){width:100%}
.van .speed i:nth-child(3){width:50%}
.van .puffs{position:absolute;left:3%;top:63%;width:1px;height:1px;pointer-events:none}
.van .puffs i{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;background:#E2E6EA;box-shadow:inset 0 -3px 0 rgba(21,25,30,.07);opacity:0}
/* "Beep beep!" comes from Ben, in the windscreen beside him, with its tail pointing at him. */
.van .beep{position:absolute;left:63.5%;top:12%;padding:9px 14px;border-radius:14px;background:var(--ink);color:#fff;font-family:var(--head);font-weight:800;font-size:15px;line-height:1;white-space:nowrap;opacity:0;transform:scale(.3) rotate(-8deg);transform-origin:0 85%;transition:opacity .15s ease,transform .4s cubic-bezier(.3,1.7,.5,1);pointer-events:none}
.van .beep::after{content:"";position:absolute;right:calc(100% - 1px);top:50%;width:11px;height:13px;background:var(--ink);clip-path:polygon(100% 0,100% 100%,0 100%)}
.van.beeping .beep{opacity:1;transform:rotate(-3deg)}
@media(max-width:400px){.van .beep{font-size:13px;padding:8px 11px}}
/* The label sits higher when the picture is narrower, and in front of the van, so the van never
   covers its words. */
.hero-art .tag{position:absolute;z-index:1;left:4%;top:clamp(2%,calc(23% - 58px),12%);background:var(--white);border-radius:14px;padding:10px 14px;box-shadow:var(--shadow);font-family:var(--head);font-weight:700;font-size:13.5px;color:var(--ink);line-height:1.3;transform-origin:78% 100%}
.hero-art .tag::after{content:"";position:absolute;right:26px;top:calc(100% - 1px);width:16px;height:11px;background:var(--white);clip-path:polygon(0 0,100% 0,72% 100%)}
/* Little handwritten notes. */
.note{position:absolute;margin:0;font-family:'Caveat','Bradley Hand','Segoe Print',cursive;font-weight:700;font-size:25px;line-height:1;color:var(--ink);white-space:nowrap;pointer-events:none}
.note svg{position:absolute;overflow:visible}
.note path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.note-van{left:3%;bottom:1%;transform:rotate(-4deg)}
.note-van svg{left:calc(100% + 4px);bottom:40%;width:58px;height:44px}
@media(max-width:520px){.note{font-size:22px}.note-van svg{width:46px;height:36px}}
.hero-art .tag small{display:block;font-family:var(--body);font-weight:600;font-size:12.5px;color:var(--muted)}
@media(max-width:520px){.hero-art .tag{font-size:12.5px;padding:8px 11px}.hero-art .drop{width:32px;height:42px;clip-path:path('M16 0 C 16 0, 32 19, 32 28 A 16 16 0 0 1 0 28 C 0 19, 16 0, 16 0 Z')}}

/* sections */
section{padding:88px 0}
@media(max-width:700px){section{padding:60px 0}}
.head{display:grid;gap:12px;max-width:60ch;margin-bottom:40px}
.head h2{font-size:clamp(30px,3.8vw,44px);font-weight:800}
.head p{font-size:18px;color:var(--muted)}

/* A slanted strip of what Ben does. It slides along as you scroll (it never moves on its own). */
.ticker{overflow:hidden;padding:22px 0 30px;background:linear-gradient(180deg,var(--stone),var(--white))}
.band{margin:0 -60px;background:var(--ink);transform:rotate(-1.5deg);box-shadow:0 16px 30px -14px rgba(21,25,30,.45)}
.track{display:flex;align-items:center;width:max-content;padding:14px 0}
.track span{padding:0 20px;font-family:var(--head);font-weight:800;font-size:clamp(16px,1.6vw,20px);line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap}
.track b{flex:none;width:12px;height:16px;background:#5BB0CF;clip-path:path('M6 0C6 0 12 8.2 12 10A6 6 0 0 1 0 10C0 8.2 6 0 6 0Z')}
.ticker+section{padding-top:60px}
@media(max-width:700px){.ticker+section{padding-top:40px}}

/* Hand-drawn wavy underline on one word of each heading. */
.sq{position:relative;white-space:nowrap}
.sq::after{content:"";position:absolute;left:-.03em;right:-.03em;bottom:-.14em;height:.28em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M0 6C5 6 5 2 10 2S15 6 20 6 25 10 30 10 35 6 40 6' fill='none' stroke='%233C88A3' stroke-width='3.2'/%3E%3C/svg%3E") repeat-x 0 50%/.84em .28em;clip-path:inset(0 0 0 0);transition:clip-path 1s cubic-bezier(.65,0,.35,1) calc(var(--d,0ms) + 350ms)}
.contact .sq::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M0 6C5 6 5 2 10 2S15 6 20 6 25 10 30 10 35 6 40 6' fill='none' stroke='%238FC6DA' stroke-width='3.2'/%3E%3C/svg%3E")}

/* Wavy water-line edges on the coloured sections. */
.wavy{position:relative}
.wavy::before,.wavy-b::after{content:"";position:absolute;left:0;right:0;height:22px;background:inherit;pointer-events:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22' preserveAspectRatio='none'%3E%3Cpath d='M0 12C20 12 20 3 40 3S60 12 80 12 100 3 120 3 140 12 160 12V22H0Z'/%3E%3C/svg%3E") repeat-x 0 100%/160px 22px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22' preserveAspectRatio='none'%3E%3Cpath d='M0 12C20 12 20 3 40 3S60 12 80 12 100 3 120 3 140 12 160 12V22H0Z'/%3E%3C/svg%3E") repeat-x 0 100%/160px 22px}
.wavy::before{bottom:calc(100% - 1px)}
.wavy-b::after{top:calc(100% - 1px);transform:scaleY(-1)}
@media(max-width:700px){.wavy::before,.wavy-b::after{height:16px;-webkit-mask-size:120px 16px;mask-size:120px 16px}}

/* services: a plain list, like a price list or the side of the van, rather than boxes.
   On phones each service is folded shut until you tap it. */
.svc-list{border-top:2px solid var(--ink)}
.svc-row{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:10px 48px;padding:28px 0 30px}
.svc-row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#CBD1D8;transform-origin:0 50%}
.svc-name{position:relative;font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.025em;line-height:1.1;transition:transform .35s cubic-bezier(.3,1.6,.5,1),color .2s ease}
.svc-name::before{content:"";position:absolute;left:-24px;top:.25em;width:12px;height:16px;background:var(--water);clip-path:path('M6 0C6 0 12 8.2 12 10A6 6 0 0 1 0 10C0 8.2 6 0 6 0Z');opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .35s cubic-bezier(.3,1.6,.5,1)}
@media(hover:hover){.svc-row:hover .svc-name{transform:translateX(24px);color:var(--water-deep)}.svc-row:hover .svc-name::before{opacity:1;transform:none}}
.svc-body p{font-size:17px}
.svc-body .dots{margin-top:12px;font-size:15px;line-height:1.55;color:var(--ink)}
.svc-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding-top:30px}
.svc-cta p{font-size:17px;max-width:58ch}
.svc-cta b{font-family:var(--head);font-weight:800;color:var(--ink)}
.svc-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;margin:0;padding:18px 0;border:0;background:none;font:inherit;color:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.svc-toggle::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;background:var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%231F6680' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/13px no-repeat;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.svc-toggle[aria-expanded="true"]::after{transform:rotate(45deg)}
@media(max-width:760px){
  .svc-row{grid-template-columns:1fr;gap:0;padding:0}
  .svc-name{font-size:21px}
  .svc-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s ease}
  .svc-body>div{overflow:hidden;min-height:0}
  .svc-body>div::after{content:"";display:block;height:20px}
  .svc-row.shut .svc-body{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .35s ease,visibility 0s linear .35s}
  .svc-body p{font-size:16px}
  .svc-cta{padding-top:24px}
  .svc-cta .btn{flex:1 1 100%}
}

/* recent work */
.work{background:var(--stone)}
.jobs{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.job{grid-column:span 3;background:var(--white);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.job.wide{grid-column:span 6}
.job.third{grid-column:span 2}
@media(max-width:960px){.job,.job.third{grid-column:span 3}.job.wide{grid-column:span 6}}
@media(max-width:640px){.jobs{grid-template-columns:1fr}.job,.job.third,.job.wide{grid-column:auto}}
.pics{position:relative;background:var(--ink);aspect-ratio:4/3;overflow:hidden}
.job.wide .pics{aspect-ratio:16/8}
@media(max-width:640px){.job.wide .pics{aspect-ratio:4/3}}
.pics button.pic{all:unset;position:absolute;inset:0;cursor:zoom-in;display:block}
.pics button.pic:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.pics img{width:100%;height:100%;object-fit:cover;transition:clip-path .7s cubic-bezier(.65,0,.35,1),transform .6s ease}
.pics button.pic:hover img{transform:scale(1.02)}
/* The "before" photo sits on top and wipes across, like a squeegee, when you press Before. */
.pics .before{clip-path:inset(0 100% 0 0)}
.pics[data-show="before"] .before{clip-path:inset(0 0 0 0)}
.pics:not([data-show="before"]) button.pic.b{pointer-events:none}
.pics[data-show="before"] button.pic.b{z-index:2}
.flip{position:absolute;left:14px;bottom:14px;z-index:3;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:999px;background:rgba(21,25,30,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.flip button{border:0;background:transparent;color:#fff;font-family:var(--head);font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;cursor:pointer}
.flip button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.mosaic{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;aspect-ratio:16/8;background:var(--ink)}
.mosaic button.pic{all:unset;position:relative;cursor:zoom-in;overflow:hidden}
.mosaic button.pic:first-child{grid-row:span 2}
.mosaic button.pic:nth-child(4){grid-column:2/span 2}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.mosaic button.pic:hover img{transform:scale(1.03)}
.mosaic button.pic:focus-visible{outline:3px solid #fff;outline-offset:-6px}
@media(max-width:640px){.mosaic{aspect-ratio:4/3}}
.job .txt{padding:22px 24px 24px;display:grid;gap:10px;align-content:start}
.job h3{font-size:21px;font-weight:800}
.job p{font-size:16px}
.job .when{font-size:14.5px}
.more{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.more p{color:var(--muted);font-size:15.5px}

/* about */
.about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center}
.about-grid>*{min-width:0}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:32px}}
.portrait-wrap{position:relative}
.portrait-wrap::before{content:"";position:absolute;z-index:2;left:50%;top:-13px;width:118px;height:30px;margin-left:-59px;background:rgba(240,230,200,.88);box-shadow:0 1px 3px rgba(21,25,30,.12);transform:rotate(-4deg);clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,100% 0,96% 12%,100% 24%,96% 38%,100% 52%,96% 66%,100% 80%,96% 92%,100% 100%,0 100%,4% 88%,0 76%,4% 62%,0 48%,4% 34%,0 20%)}
.portrait{position:relative;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/4.4;transform:rotate(-1.4deg)}
.note-me{left:33%;top:7%;padding:6px 12px 7px;border-radius:12px;background:#fff;box-shadow:0 6px 18px rgba(21,25,30,.18);transform:rotate(-5deg)}
.note-me svg{left:calc(100% - 6px);top:60%;width:64px;height:52px;color:#fff;filter:drop-shadow(0 1px 2px rgba(21,25,30,.55))}
.note-me path{stroke-width:3}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:78% 40%}
.portrait figcaption{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.94);border-radius:14px;padding:10px 14px;font-family:var(--head);font-weight:700;font-size:14px;color:var(--ink)}
.portrait figcaption small{display:block;font-family:var(--body);font-weight:600;color:var(--muted);font-size:13px}
.about-txt{display:grid;gap:16px}
.about-txt h2{font-size:clamp(30px,3.8vw,44px);font-weight:800}
.about-txt p{font-size:17.5px}
.values{list-style:none;margin:4px 0 0;padding:0;border-top:1px solid var(--line)}
.values li{padding:10px 0;border-bottom:1px solid var(--line);font-family:var(--head);font-weight:700;font-size:15px;line-height:1.4;color:var(--ink)}
/* The credentials in one row of three: the Gas Safe logo (at least 44px tall, with the number
   under it) takes the place of its name, so the other two have room even at 320px. */
.creds{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);align-items:end;margin:8px 0 0;padding:0;list-style:none}
.creds li{padding:0 12px;border-left:1px solid var(--line);font-size:13.5px;line-height:1.35;color:var(--muted)}
.creds li:first-child{padding-left:0;border-left:0}
.creds li:last-child{padding-right:0}
.creds b{display:block;font-family:var(--head);font-weight:800;font-size:14.5px;color:var(--ink);white-space:nowrap}
.creds-gs img{display:block;height:44px;width:auto;margin-bottom:5px}
@media(max-width:400px){.creds li{padding:0 10px;font-size:clamp(11.5px,3.45vw,13.5px)}.creds b{font-size:clamp(12px,3.7vw,14.5px)}}

/* reviews */
.reviews{background:var(--sky)}
[hidden]{display:none!important}
.rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.rv-more{width:100%;justify-content:space-between}
.rv-more::after{content:"";flex:none;width:10px;height:10px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .3s ease}
.rv-more[aria-expanded="true"]::after{transform:translateY(3px) rotate(-135deg)}
@media(max-width:760px){.reviews .wrap{display:flex;flex-direction:column}.reviews .head{margin-bottom:24px}.reviews .head p{display:none}.google{order:1;margin-top:0}.rv-more{order:2;margin-top:14px}.rv-grid{order:3;margin-top:24px}}
@media(max-width:760px){.rv-grid{grid-template-columns:1fr}}
/* Each review is a speech bubble, a little wonky, from the person who wrote it. */
.rv{display:grid;gap:18px;align-content:start}
.rv blockquote{position:relative;margin:0;background:var(--white);border-radius:22px;padding:24px 26px 26px;box-shadow:var(--shadow);font-size:18px;line-height:1.55;color:var(--ink);transform:rotate(-.9deg);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.rv:nth-child(even) blockquote{transform:rotate(.8deg)}
@media(hover:hover){.rv:hover blockquote{transform:translateY(-3px) rotate(0)}}
.rv blockquote::before{content:"\201C";display:block;font-family:Georgia,serif;font-size:54px;line-height:.6;color:var(--water);margin-bottom:10px}
.rv blockquote::after{content:"";position:absolute;left:34px;top:calc(100% - 1px);width:26px;height:16px;background:var(--white);clip-path:polygon(0 0,100% 0,6% 100%)}
.rv .who{display:flex;align-items:center;gap:12px;font-size:14.5px;padding-left:22px}
.rv .who .av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--water-deep);color:#fff;font-family:var(--head);font-weight:800;font-size:16px}
.rv:nth-child(even) .who .av{background:var(--ink)}
.rv .who b{display:block;color:var(--ink)}
.rv .who span{color:var(--muted)}
.rv .src{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}
.google{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;background:var(--white);border-radius:20px;padding:20px 24px;box-shadow:var(--shadow)}
.google .g{display:flex;align-items:center;gap:14px}
.google .g b{display:block;font-family:var(--head);font-size:17px;color:var(--ink)}
.google .g span{display:block;font-size:14.5px;color:var(--muted)}
.stars{display:block;width:110px;height:20px;margin:5px 0 4px;background:linear-gradient(90deg,#E8A300 var(--fill),#CDD2D8 var(--fill));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 .5l3.1 7 7.6.7-5.8 5 1.8 7.4L12 16.7l-6.7 3.9 1.8-7.4-5.8-5 7.6-.7z'/%3E%3C/svg%3E") repeat-x left center/22px 20px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 .5l3.1 7 7.6.7-5.8 5 1.8 7.4L12 16.7l-6.7 3.9 1.8-7.4-5.8-5 7.6-.7z'/%3E%3C/svg%3E") repeat-x left center/22px 20px}
.google .score{font-family:var(--head);font-weight:800;font-size:34px;color:var(--ink);line-height:1;margin-right:4px}

/* areas */
.areas-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.areas-grid>*{min-width:0}
@media(max-width:900px){.areas-grid{grid-template-columns:1fr;gap:24px}}
.areas-grid img{width:100%;height:auto}
.scene{position:relative}
/* A map pin lands on the roof of the house. */
.pin{position:absolute;left:80%;top:10.5%;width:34px;height:46px;margin:-46px 0 0 -17px;background:var(--water-deep);clip-path:path('M17 0C7.6 0 0 7.6 0 17c0 12.5 17 29 17 29s17-16.5 17-29C34 7.6 26.4 0 17 0Z');transform-origin:50% 100%}
.pin::after{content:"";position:absolute;left:10px;top:10px;width:14px;height:14px;border-radius:50%;background:#fff}
.pin-ring{position:absolute;left:80%;top:10.5%;width:44px;height:14px;margin:-7px 0 0 -22px;border-radius:50%;border:2px solid var(--water-deep);opacity:0;pointer-events:none}
.areas-txt{display:grid;gap:16px}
.areas-txt h2{font-size:clamp(30px,3.8vw,44px);font-weight:800}
.hours{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;background:var(--stone);border-radius:16px;padding:18px 20px;font-size:16px}
.hours b{color:var(--ink)}

/* A quick game: "Fix the leak" (pipes.css and pipes.js, shared with the games page), with a link
   to the other games. Without JavaScript it can't be played, so the section isn't shown. */
.play{display:none}
.js .play{display:block}
.play-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px 56px;align-items:center}
.play-grid>*{min-width:0}
@media(max-width:900px){.play-grid{grid-template-columns:1fr}}
.play .head{margin-bottom:0}
.play .head .btn{justify-self:start;margin-top:6px}

/* contact */
.contact{background:var(--ink);color:#C9CED5}
.contact .head h2{color:#fff}
.contact .head p{color:#C9CED5}
.ct-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start}
.ct-grid>*{min-width:0}
@media(max-width:900px){.ct-grid{grid-template-columns:1fr}}
.ways{display:grid;gap:12px}
.way{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:16px 18px;text-decoration:none;color:#fff;transition:background-color .18s ease}
.way:hover{background:rgba(255,255,255,.12)}
.way .wi{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:none}
@media(hover:hover){.way:hover .wi svg{animation:wiggle .5s ease}}
@keyframes wiggle{0%,100%{transform:none}25%{transform:rotate(-14deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-6deg)}}
.way b{display:block;font-family:var(--head);font-size:16.5px}
.way span{display:block;font-size:15px;color:#C9CED5;word-break:break-word}
.form{position:relative;background:var(--white);color:var(--text);border-radius:24px;padding:28px;display:grid;gap:14px}
@media(max-width:600px){.form{padding:22px 18px}}
/* A round "free quotes" sticker on the form. It turns as you scroll. */
.sticker{position:absolute;right:-22px;top:-48px;width:108px;height:108px;pointer-events:none}
@media(max-width:900px){.sticker{right:-8px}}
@media(max-width:600px){.sticker{right:-6px;top:-50px;width:90px;height:90px}}
.sticker .spin{display:block;width:100%;height:100%}
.sticker .mid{position:absolute;left:50%;top:50%;width:22%;height:27%;transform:translate(-50%,-52%)}
.form h3{padding-right:72px}
.form h3{font-size:22px;font-weight:800}
.form>p{font-size:15.5px;color:var(--muted)}
/* The plain form, for anyone without JavaScript: "What's the job?" (job.css, job.js) takes its place. */
.q-form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{font-weight:700;font-size:14.5px;color:var(--ink)}
.field .opt{font-weight:600;color:var(--muted)}
.field input,.field textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:1.5px solid #8A929C;border-radius:12px;padding:12px 14px}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--water-deep);outline:3px solid rgba(31,102,128,.25);outline-offset:1px}
.field [aria-invalid="true"]{border-color:#B42318}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.two{grid-template-columns:1fr}}
.send{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
@media(max-width:420px){.send{grid-template-columns:1fr}}
.formmsg{min-height:1.4em;font-weight:700;color:#B42318;font-size:15px}
.small{font-size:13.5px;color:var(--muted)}

/* footer */
footer{background:#0E1114;color:#AEB4BC;padding:48px 0 40px;font-size:14.5px}
.ft{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
@media(max-width:800px){.ft{grid-template-columns:1fr}}
.ft .brand{color:#fff}
.ft .brand span{color:#AEB4BC}
.ft h2,.ft h4{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
footer a{color:#E4E7EB}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.ft-gas{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.ft-gas .tile{flex:none;display:block;background:#fff;border-radius:10px;padding:5px}
.ft-gas img{height:46px;width:auto}
.socials{display:flex;gap:10px;margin-top:14px}
.socials a{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff}
.socials a:hover{background:rgba(255,255,255,.16)}
.fb{margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13.5px}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:#E4E7EB;text-decoration:underline;cursor:pointer}

/* phone action bar */
/* One bar in three parts, each an icon over its name, like the tabs of an app. A part darkens a
   little and its icon squeezes as a finger lands on it. */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;grid-template-columns:repeat(3,1fr);padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(21,25,30,.07)}
.bar-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:62px;padding:9px 4px 8px;color:var(--ink);text-decoration:none;font-family:var(--head);font-weight:700;font-size:13px;line-height:1.1;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background-color .16s ease}
.bar-item+.bar-item::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--line)}
.bar-item svg{transition:transform .16s var(--ease-out)}
.bar-item:active{background:var(--stone)}
.bar-item:active svg{transform:scale(.88)}
.bar-call svg{color:var(--water-deep)}
.bar-wa svg{color:#25D366}
@media(max-width:760px){.bar{display:grid}:root{--bar-h:calc(63px + env(safe-area-inset-bottom,0px))}}

/* photo viewer */
dialog.viewer{border:0;padding:0;background:transparent;max-width:min(1000px,94vw);max-height:92vh;width:100%}
dialog.viewer::backdrop{background:rgba(10,12,15,.86)}
.viewer figure{margin:0;display:grid;gap:12px}
.viewer img{width:100%;max-height:78vh;object-fit:contain;border-radius:14px;background:#0E1114}
.viewer figcaption{color:#E4E7EB;font-size:15.5px;text-align:center}
.viewer .x{position:absolute;top:8px;right:8px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
dialog.privacy{border:0;border-radius:20px;padding:28px;max-width:600px;width:calc(100% - 32px);color:var(--text)}
dialog.privacy::backdrop{background:rgba(10,12,15,.6)}
dialog.privacy h2{font-size:24px;margin-bottom:10px}
dialog.privacy p{margin-top:10px;font-size:15.5px}
dialog.privacy .btn{margin-top:18px}

/* ===== Motion =====
   Everything below needs the "motion" class, which is only added when the device hasn't asked
   for less motion. Without it the page is complete and still. Nothing loops forever: things
   play once as they arrive, follow your scrolling, or answer a tap. */

/* Arriving on screen. --d staggers things that arrive together. */
.motion .reveal{transition:opacity .6s ease var(--d,0ms),transform .85s cubic-bezier(.22,1.3,.4,1) var(--d,0ms)}
.motion .reveal:not(.in){opacity:0;transform:translateY(28px)}
.motion .rv.reveal:not(.in){transform:translateY(34px) rotate(var(--tilt,-3deg)) scale(.94)}
.rv:nth-child(even){--tilt:3deg}
.motion .svc-row::after{transition:transform .9s cubic-bezier(.65,0,.35,1) calc(var(--d,0ms) + 120ms)}
.motion .svc-row.reveal:not(.in)::after{transform:scaleX(0)}
.motion .reveal:not(.in) .sq::after{clip-path:inset(0 100% 0 0)}

/* The top of the page, as it opens: the words drop in like drips, then the rest rises in. */
.motion .hero h1 .w{animation:plop .75s ease both;transform-origin:50% 100%}
.motion .hero h1 .w+.w{animation-delay:.12s}
.motion .hero h1 .w+.w+.w{animation-delay:.24s}
@keyframes plop{0%{opacity:0;transform:translateY(-.5em) scale(.96,1.12)}40%{opacity:1;transform:translateY(0) scale(1.06,.88)}62%{transform:translateY(-.05em) scale(.98,1.04)}82%{transform:scale(1.01,.99)}100%{transform:none}}
.motion .hero .lead{animation:rise .7s ease .4s both}
.motion .hero-cta{animation:rise .7s ease .5s both}
.motion .creds-hero{animation:rise .7s ease .62s both}
.motion .creds-hero .stars{animation:stars-fill 1.2s cubic-bezier(.3,.8,.3,1) 1.05s both}
@keyframes stars-fill{from{--fill:0%}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}

/* The van drives in, brakes, rocks on its springs and puffs; the drop lands; the van "says" the
   services; then the note appears. On phones this waits until you scroll down to it. */
.motion .stage:not(.in) .disc,.motion .stage:not(.in) .drop,.motion .stage:not(.in) .tag,.motion .stage:not(.in) .van,.motion .stage:not(.in) .note{opacity:0}
.motion .stage.in .disc{animation:pop .9s cubic-bezier(.3,1.4,.5,1) both}
.motion .stage.in .van{animation:van-drive 1.15s cubic-bezier(.16,.84,.3,1) .1s both}
.motion .stage.in .van .body{animation:van-brake .8s ease-out 1.1s both;transform-origin:58% 86%}
.motion .stage.in .van .speed i{animation:speed 1.1s ease-out .1s both}
.motion .stage.in .van .speed i:nth-child(2){animation-delay:.16s}
.motion .stage.in .van .speed i:nth-child(3){animation-delay:.22s}
.motion .stage.in .van .puffs i{animation:puff 1s ease-out 1.25s both}
.motion .stage.in .van .puffs i:nth-child(2){animation-delay:1.5s}
.motion .stage.in .van .puffs i:nth-child(3){animation-delay:1.75s}
.motion .stage.in .drop{animation:drip-in 1s ease .75s both;transform-origin:50% 100%}
.motion .stage.in .tag{animation:bubble-in .6s cubic-bezier(.3,1.5,.5,1) 1.25s both}
.motion .stage.in .note-van{animation:note-in .5s ease 2s both}
.motion .stage.in .note-van path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .55s ease 2.3s forwards}
@keyframes pop{from{opacity:0;transform:scale(.6)}}
@keyframes van-drive{0%{opacity:0;transform:translateX(-34%)}20%{opacity:1}100%{transform:none}}
@keyframes van-brake{0%{transform:none}28%{transform:rotate(1.8deg)}56%{transform:rotate(-.9deg)}78%{transform:rotate(.35deg)}100%{transform:none}}
@keyframes speed{0%{opacity:0;transform:translateX(40%) scaleX(.4)}20%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-30%) scaleX(.2)}}
@keyframes puff{0%{opacity:0;transform:scale(.3)}25%{opacity:.95}100%{opacity:0;transform:translate(-48px,-20px) scale(1.5)}}
@keyframes drip-in{0%{opacity:0;transform:translateY(-90px) scale(.8,1.15)}40%{opacity:1;transform:translateY(0) scale(.85,1.15)}55%{transform:scale(1.22,.78)}72%{transform:scale(.94,1.07)}86%{transform:scale(1.03,.98)}100%{transform:none}}
@keyframes bubble-in{from{opacity:0;transform:scale(.4) rotate(-8deg)}}
@keyframes note-in{from{opacity:0;transform:translateY(8px) rotate(-4deg)}to{opacity:1;transform:rotate(-4deg)}}
@keyframes draw{to{stroke-dashoffset:0}}

/* About: the photo straightens as it's taped up and the note pops on. The photo starts a
   little smaller, so its tilted corners stay on the screen (otherwise phones could scroll
   sideways until it arrived). */
.motion .portrait{transition:transform 1s cubic-bezier(.22,1.3,.4,1) calc(var(--d,0ms) + 100ms)}
.motion .portrait-wrap:not(.in) .portrait{transform:rotate(-7deg) scale(.9)}
.motion .portrait-wrap:not(.in) .note-me{opacity:0}
.motion .portrait-wrap.in .note-me{animation:note-me-in .5s cubic-bezier(.3,1.5,.5,1) calc(var(--d,0ms) + 650ms) both}
.motion .portrait-wrap.in .note-me path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .5s ease calc(var(--d,0ms) + 1000ms) forwards}
@keyframes note-me-in{from{opacity:0;transform:scale(.5) rotate(-14deg)}to{opacity:1;transform:rotate(-5deg)}}

/* Reviews: the Google stars fill up (the score counts up, in the script). */
@property --fill{syntax:'<percentage>';inherits:false;initial-value:0%}
.stars{transition:--fill 1.3s cubic-bezier(.3,.8,.3,1) .35s}
.motion .google:not(.in) .stars{--fill:0%!important}

/* Where Ben works: the pin drops onto the house. */
.motion .scene:not(.in) .pin{opacity:0}
.motion .scene.in .pin{animation:pin-drop .9s ease calc(var(--d,0ms) + 450ms) both}
.motion .scene.in .pin-ring{animation:ring .9s ease-out calc(var(--d,0ms) + 800ms) both}
@keyframes pin-drop{0%{opacity:0;transform:translateY(-80px)}45%{opacity:1;transform:translateY(0) scale(1.12,.84)}62%{transform:translateY(-12px) scale(.94,1.06)}78%{transform:translateY(0) scale(1.04,.96)}100%{transform:none}}
@keyframes ring{0%{opacity:.8;transform:scale(.2)}100%{opacity:0;transform:scale(1.7)}}

/* Contact: the three ways slide in, one after another. */
.motion .ways.in .way{animation:slide-in .6s cubic-bezier(.3,1.4,.5,1) both}
.motion .ways.in .way:nth-child(1){animation-delay:calc(var(--d,0ms) + 100ms)}
.motion .ways.in .way:nth-child(2){animation-delay:calc(var(--d,0ms) + 180ms)}
.motion .ways.in .way:nth-child(3){animation-delay:calc(var(--d,0ms) + 260ms)}
@keyframes slide-in{from{opacity:0;transform:translateX(-26px)}}

.motion .bar{animation:bar-up .6s cubic-bezier(.3,1.35,.5,1) .5s both}
@keyframes bar-up{from{transform:translateY(110%)}}

@media print{.motion .reveal,.motion .stage *{opacity:1!important;transform:none!important}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;transition-duration:1ms!important;transition-delay:0s!important}
}

/* ===== Added for the multi-page site (November 2026) ===== */

/* Header: a call button on tablets and computers (just the phone on smaller ones, the number too
   on wide screens). Phones have Call in the bar at the bottom instead. */
.top .btn-call{display:none;background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--edge),0 1px 2px rgba(21,25,30,.08);width:48px;height:48px;padding:0;border-radius:14px}
@media(hover:hover) and (pointer:fine){.top .btn-call:hover{box-shadow:inset 0 0 0 1.5px var(--ink),0 1px 2px rgba(21,25,30,.08)}}
.top .btn-call .num{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(min-width:761px){.top .btn-call{display:inline-flex}.top .btn-wa .num{display:none}}
.top-row>nav{flex:none;gap:20px}
.top-row>nav a{white-space:nowrap}
@media(min-width:761px) and (max-width:1100px){.top .btn-wa{margin-left:0}}
@media(min-width:1240px){.top .btn-call{width:auto;height:auto;padding:12px 18px;border-radius:12px}.top .btn-call .num{position:static;width:auto;height:auto;overflow:visible;clip:auto}}

/* Footer: four columns, with links to every page */
.ft{grid-template-columns:1.2fr 1fr 1fr 1fr}
@media(max-width:1020px){.ft{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ft{grid-template-columns:1fr}}
.ft-about{margin-top:14px;max-width:34ch}
.fb a{color:#E4E7EB}

/* Home: the main heading says what and where first */
.more-link{margin-top:18px;font-weight:700}
.rv-all{margin-top:22px}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px 56px;align-items:start}
.faq-grid>*{min-width:0}
@media(max-width:900px){.faq-grid{grid-template-columns:1fr}}

/* Inner pages: the top, with where you are */
.page-top{background:linear-gradient(180deg,var(--white) 0%,var(--stone) 100%);padding:36px 0 60px}
.page-top-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center}
.page-top-grid>*{min-width:0}
@media(max-width:900px){.page-top{padding:24px 0 44px}.page-top-grid{grid-template-columns:1fr;gap:28px}}
.crumbs ol{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;font-size:14px;font-weight:700;color:var(--muted)}
.crumbs li+li::before{content:"\203A";margin:0 8px;color:#8A929C}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--water-deep);text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--ink)}
.page-top h1{font-size:clamp(34px,4.8vw,58px);font-weight:800;letter-spacing:-.03em;line-height:1.04}
.page-top .lead{margin-top:16px;font-size:clamp(17px,1.8vw,19px);max-width:48ch}
.page-top .cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:520px){.page-top .cta .btn{flex:1 1 100%}}
.page-creds{margin-top:26px;display:flex;align-items:center;gap:14px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.page-creds img{height:52px;width:auto;flex:none}
.page-creds b{font-family:var(--head);font-weight:800}
.page-photo{margin:0;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg);transform:rotate(1.2deg)}
.page-photo img{width:100%;height:auto;max-height:480px;object-fit:cover}
@media(max-width:900px){.page-photo{transform:none}.page-photo img{max-height:340px}}

/* Inner pages: the sections */
section.stone{background:var(--stone)}
section.sky{background:var(--sky)}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 56px;align-items:start}
.two-col>*{min-width:0}
@media(max-width:900px){.two-col{grid-template-columns:1fr}}
.prose{display:grid;gap:14px;align-content:start}
.prose h2{font-size:clamp(26px,3vw,36px);font-weight:800}
.prose h2:not(:first-child){margin-top:16px}
.prose p,.prose li{font-size:17.5px}
.list-title{font-size:17px;font-weight:800;margin-bottom:12px}
.list-title:not(:first-child){margin-top:32px}
/* Lists, laid out plainly with lines between */
.lined{list-style:none;padding:0;margin:0;border-top:2px solid var(--ink)}
.lined li{padding:14px 2px;border-bottom:1px solid #CBD1D8;font-weight:700;font-size:16.5px;color:var(--ink)}
.steps{list-style:none;counter-reset:step;padding:0;margin:0;border-top:2px solid var(--ink)}
.steps li{counter-increment:step;display:grid;grid-template-columns:40px 1fr;gap:2px 12px;padding:16px 0;border-bottom:1px solid #CBD1D8}
.steps li::before{content:counter(step);grid-row:span 2;font-family:var(--head);font-weight:800;font-size:24px;line-height:1.1;color:var(--water-deep)}
.steps b{font-family:var(--head);font-weight:800;color:var(--ink)}
.steps span{font-size:16px}
.plain-steps{margin:0;padding-left:22px;display:grid;gap:8px}
/* Advice guides: the words in a comfortable reading width, with the links to Ben beside them */
.article-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr);gap:40px 64px;align-items:start}
.article-grid>*{min-width:0}
@media(max-width:900px){.article-grid{grid-template-columns:1fr}}
.article{display:grid;gap:14px;align-content:start;max-width:68ch}
.article h2{font-size:clamp(24px,2.6vw,32px);font-weight:800;margin-top:20px}
.article h2:first-child{margin-top:0}
.article h3{font-size:19px;font-weight:800;margin-top:6px}
.article p,.article li{font-size:17.5px}
.article ul,.article ol{margin:0;padding-left:22px;display:grid;gap:8px}
.article .byline{font-size:15.5px;color:var(--muted)}
.safety{border-left:4px solid var(--water-deep);padding:2px 0 2px 16px}
.aside{display:grid;gap:12px;align-content:start}
.aside p{font-size:16.5px}
.aside .list-title{margin-bottom:0}
/* Real jobs, as pictures with their story */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{background:var(--white);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.card-pic{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ink)}
.card-pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
@media(hover:hover) and (pointer:fine){.card-pic:hover img{transform:scale(1.03)}}
.card-txt{padding:18px 20px 22px;display:grid;gap:8px}
.card h3{font-size:20px;font-weight:800}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{color:var(--water-deep);text-decoration:underline;text-underline-offset:4px}
.card p{font-size:16px}
.when{font-size:14.5px;font-weight:700;color:var(--muted)}
.photo-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.photo-row figure{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:1;background:var(--ink)}
.photo-row img{width:100%;height:100%;object-fit:cover}
.case-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px 48px;align-items:center}
.case-grid>*{min-width:0}
@media(max-width:900px){.case-grid{grid-template-columns:1fr}}
.case-pics{display:grid;gap:12px}
.case-pics.two{grid-template-columns:1fr 1fr}
.case-pics figure{margin:0}
.case-pics img{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;border-radius:18px;background:var(--ink)}
.case-pics figcaption{padding:8px 2px 0;font-family:var(--head);font-weight:700;font-size:14px;color:var(--ink)}
/* Reviews and questions */
figure.rv{margin:0}
.faq{border-top:2px solid var(--ink)}
.faq-item{border-bottom:1px solid #CBD1D8}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;cursor:pointer;list-style:none;touch-action:manipulation}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%231F6680' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item h3{margin:0;font-size:18px;font-weight:800;line-height:1.3}
.faq-a{padding:0 0 18px}
.faq-a p{margin:0;font-size:16.5px}
@media(prefers-reduced-motion:no-preference){.faq-item summary::after{transition:transform .25s var(--ease-out)}.faq-item[open] .faq-a{animation:faq-in .25s var(--ease-out)}}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}}
/* Links to the other services */
.svc-links{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 32px;border-top:2px solid var(--ink)}
.svc-links li{border-bottom:1px solid #CBD1D8}
.svc-links a{display:grid;gap:4px;padding:16px 0;text-decoration:none;color:var(--text)}
.svc-links b{font-family:var(--head);font-size:18px;color:var(--ink)}
@media(hover:hover) and (pointer:fine){.svc-links a:hover b{color:var(--water-deep);text-decoration:underline;text-underline-offset:4px}}
.svc-links span{font-size:15.5px}
.svc-name a{color:inherit;text-decoration:none}
.svc-name a:hover{text-decoration:underline;text-underline-offset:5px}
/* The ask at the end of each page */
.cta-band{background:var(--ink);color:#C9CED5}
.cta-band h2{color:#fff;font-size:clamp(28px,3.4vw,40px);font-weight:800}
.cta-band p{margin-top:10px;font-size:18px;max-width:52ch}
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:center}
.cta-grid>*{min-width:0}
@media(max-width:900px){.cta-grid{grid-template-columns:1fr}}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:520px){.cta-btns .btn{flex:1 1 100%}}
.btn-call-line{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.btn-call-line:hover{background:rgba(255,255,255,.08)}
/* Areas and credentials */
.area-list{columns:2;column-gap:32px}
.area-list li{break-inside:avoid}
@media(max-width:520px){.area-list{columns:1}}
.creds-list li{display:flex;align-items:center;gap:14px}
.creds-list img{height:52px;width:auto;flex:none}
.creds-list b{display:block;font-family:var(--head);font-weight:800}
.creds-list span{font-weight:600;color:var(--muted)}
.creds-list b{color:var(--ink)}
.nf{padding:56px 0 64px}


/* ===== Phones (November 2026, George's changes) ===== */

/* Ben's van comes straight after the headline on phones and small tablets, so it's on the first
   screen (and drives in as the page opens). The text column's parts join the grid to allow it. */
@media(max-width:900px){
  .hero-grid>div:first-child{display:contents}
  .hero-grid>div:first-child>*{min-width:0}
  .hero h1{order:1}
  .hero-art{order:2;margin-top:6px}
  .hero .lead{order:3}
  .hero-cta{order:4}
  .creds-hero{order:5}
}
@media(max-width:520px){.hero-grid{padding-top:24px}}

/* The tap menu: phones and tablets, where the header has no room for the links. The button is a
   tap over the word "Menu" (like the bar at the bottom); pressing it turns the water on, and the
   menu pours down under the header. It's a <details>, so it opens and closes without JavaScript
   too; site.js closes it on Escape, a tap elsewhere or a link, and lets it drain away. */
.menu{display:none}
.top .menu-btn{display:block;list-style:none;min-height:48px;padding:0 9px;background:transparent;color:var(--ink);box-shadow:none;border-radius:12px;transition:background-color .16s ease}
.top .menu-btn:active{background:var(--stone);transform:none}
.menu-btn::-webkit-details-marker{display:none}
.menu-btn::marker{content:""}
.menu-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:48px;min-width:38px}
.menu-word{font-size:11.5px;line-height:1}
.tap{flex:none;overflow:visible}
.tap-drip{fill:var(--water)}
.tap-flow{stroke:var(--water);transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0)}
.menu[open] .menu-btn{background:var(--sky)}
.menu[open] .tap-drip{opacity:0}
.menu[open] .tap-flow{transform:scaleY(1)}
.menu-panel{position:absolute;left:0;right:0;top:100%;z-index:35;max-height:calc(100svh - 76px - var(--bar-h));overflow-y:auto;overscroll-behavior:contain;background:var(--white);border-top:1px solid var(--line);box-shadow:0 20px 30px rgba(21,25,30,.14)}
.menu-panel ul{list-style:none;margin:0 auto;padding:4px 20px 0;max-width:640px}
.menu-panel li+li{border-top:1px solid var(--line)}
.menu-panel a{display:flex;align-items:center;min-height:56px;font-family:var(--head);font-weight:700;font-size:18px;color:var(--ink);text-decoration:none;touch-action:manipulation}
.menu-panel a[aria-current="page"]{color:var(--water-deep)}
.menu-panel a:active{color:var(--water-deep)}
.menu-hours{margin:0 auto;padding:14px 20px 20px;max-width:640px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
@media(hover:hover) and (pointer:fine){.menu-panel a:hover{color:var(--water-deep)}}
@media(max-width:1100px){.menu{display:block}.top .menu-btn{margin-left:0}}
/* phones: the header has just the brand and the tap; Call and WhatsApp are in the bar at the bottom */
@media(max-width:760px){.top .btn-wa{display:none}.top .menu{margin-left:auto}}
@media(max-width:340px){.top-row{gap:8px}.top .menu-btn{padding:0 4px}}
/* the movement, unless the device asks for less motion (every page, not just the home page) */
@media(prefers-reduced-motion:no-preference){
  .tap-drip{transition:opacity .15s ease}
  .tap-flow{transition:transform .22s var(--ease-out)}
  .menu[open] .menu-panel{animation:menu-pour .28s var(--ease-drawer) both}
  .menu[open] .menu-panel li,.menu[open] .menu-hours{animation:menu-item .3s var(--ease-out) both;animation-delay:calc(70ms + var(--i,7) * 30ms)}
  .menu.closing .menu-panel{animation:menu-drain .18s var(--ease-out) both}
}
@keyframes menu-pour{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes menu-drain{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes menu-item{from{opacity:0;transform:translateY(-6px)}}

/* ===== The map of the parts of Rugby Ben covers (build.cjs draws it) =====
   The real map underneath (img/rugby-map.svg, from OpenStreetMap), with a dot and name for each
   part of Rugby on top and a pin on the town centre. With motion, the dots pop in one after
   another and then the pin drops. */
.areamap{margin:0}
.map-box{position:relative;border-radius:22px;overflow:hidden;background:#EEF2F4;box-shadow:0 0 0 1px var(--line)}
.map-box img{display:block;width:100%;height:auto}
.map-box svg{position:absolute;inset:0;width:100%;height:100%}
.map-dot circle{fill:var(--water-deep);stroke:#fff;stroke-width:3}
.ml{font-family:var(--head);font-weight:700;font-size:16px;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.ml-c{fill:var(--water-deep)}
.map-pin path{fill:var(--water-deep)}
.map-refs text{font-family:var(--head);font-weight:800;font-size:13px;fill:#7B8691;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.areamap figcaption{margin-top:8px;font-size:12.5px;color:var(--muted);text-align:right}
.areamap figcaption a{color:inherit}
/* Phones: the map runs edge to edge, with bigger names (build.cjs places them at this size). */
@media(max-width:600px){.areamap{margin:0 -20px}.map-box{border-radius:0}.ml{font-size:21px}.map-refs text{font-size:17px}.areamap figcaption{padding:0 20px}}
.map-dot{transform-box:fill-box;transform-origin:50% 50%}
.map-pin{transform-box:fill-box;transform-origin:50% 100%}
.motion .areamap:not(.in) .map-dot,.motion .areamap:not(.in) .map-pin{opacity:0}
.motion .areamap.in .map-dot{animation:map-dot .45s var(--ease-out) both;animation-delay:calc(var(--d,0ms) + 150ms + var(--i) * 70ms)}
.motion .areamap.in .map-pin{animation:pin-drop .9s ease calc(var(--d,0ms) + 950ms) both}
@keyframes map-dot{from{opacity:0;transform:scale(.4)}}

/* ===== George's second round (November 2026) ===== */

/* services: the end of the list sits closer to the recent work */
.svc-cta{padding-top:22px}
.svc-cta p{margin:0}
@media(max-width:700px){#services{padding-bottom:28px}#services .more-link{margin-top:14px}}

/* reviews: tighter on phones; the Google card is the link to the reviews on Google */
a.google{text-decoration:none;color:inherit}
.google .go{margin-top:4px;color:var(--water-deep);font-family:var(--head);font-weight:700;font-size:14.5px;text-decoration:underline;text-underline-offset:3px}
a.google:focus-visible{outline:3px solid var(--water-deep);outline-offset:3px}
@media(hover:hover) and (pointer:fine){a.google:hover{box-shadow:var(--shadow-lg)}a.google:hover .go{color:var(--water-hover)}}
.rv-more{justify-content:flex-start;gap:10px;white-space:nowrap}
.rv-more::after{margin-left:auto}
.rv-more .rv-fb{display:inline-flex;color:#1877F2}
@media(max-width:760px){.reviews{padding:44px 0}.reviews .head{margin-bottom:16px}.rv-more{margin-top:10px}.rv-grid{margin-top:16px}.rv-all{order:4;margin-top:16px}}

/* the quick game is the last thing on the home page, closer to what's above it */
#play{padding-top:44px}
@media(max-width:700px){#play{padding-top:32px}}
.pk-play{margin:14px 0 0;font-size:15.5px}
.pk-play a{font-weight:700;color:var(--water-deep)}

/* Before and after: one photo over the other; drag across it (or use the arrow keys) to move
   the line between them. Up-and-down swipes still scroll the page. Without JavaScript, the after
   photo shows on its own. */
.ba{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:none;pointer-events:none;-webkit-user-drag:none}
.ba .before,.ba .ba-tag,.ba .ba-line,.ba .ba-range{display:none}
.js .ba{cursor:ew-resize}
.js .ba .before{display:block;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.js .ba .ba-tag,.js .ba .ba-line{display:block}
.js .ba .ba-range{display:block;position:absolute;left:0;bottom:0;width:100%;height:1px;margin:0;opacity:0;pointer-events:none}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);z-index:1;width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(21,25,30,.15);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6680' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 4px 14px rgba(21,25,30,.3)}
.ba:has(.ba-range:focus-visible) .ba-knob{outline:3px solid var(--water-deep);outline-offset:3px}
.ba-tag{position:absolute;top:12px;z-index:1;padding:5px 9px;border-radius:8px;background:rgba(21,25,30,.72);color:#fff;font-family:var(--head);font-weight:700;font-size:12.5px;line-height:1.2;pointer-events:none}
.ba-tag-b{left:12px}
.ba-tag-a{right:12px}
.case-pics.has-ba{display:block}
.case-pics .ba{border-radius:18px}

/* the first fix photos: a row to swipe through on phones */
@media(max-width:640px){
  .mosaic{display:flex;gap:6px;aspect-ratio:auto;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
  .mosaic::-webkit-scrollbar{display:none}
  .mosaic button.pic{flex:0 0 86%;aspect-ratio:4/3;scroll-snap-align:start}
}