/* Ecosave Pay website: Cut Paper. Hand-cut paper in the brand blues and mint on warm stock.
   Shadows fall one way (light from above), and lengthen with a layer's height (--z). */
@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/assets/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --navy:#0c1d3d;--midnavy:#1c3f86;--deep:#2b56c4;--blue:#6699cc;--mint:#66cc99;--hmint:#7ee0ac;--green:#0d8050;--pay:#00a350;
  --ground:#f4efe5;--ground2:#ebe3d4;--paper:#fffbf3;--pale:#e2eaf4;--ink:#0c1d3d;--ink2:#3d4a63;--line:#d9d0bf;--err:#b42318;--lamp:#f9e3a1;
  --hd:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;--bd:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;
  --wrap:1280px;--gut:24px;
  --sh:drop-shadow(0 1px 1px rgba(12,29,61,.16)) drop-shadow(0 calc(3px + var(--z,.02) * 150px) calc(5px + var(--z,.02) * 190px) rgba(12,29,61,.12));
  --ease:cubic-bezier(.2,.75,.25,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px;scrollbar-color:#b9ae98 var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.6 var(--bd);overflow-x:hidden;position:relative;caret-color:var(--deep)}
body::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .28  0 0 0 .55 -.22'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:var(--hmint);color:var(--navy)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--deep);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);position:relative}
.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}
.skip{position:absolute;left:16px;top:-60px;background:var(--navy);color:#fff;padding:10px 14px;border-radius:8px;z-index:100;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
main,header,footer{position:relative;z-index:1}
.site-head{position:relative;z-index:50} /* menus open over the page below */
main{overflow-x:clip}
figure{margin:0}

/* ---------- cut paper ---------- */
.cut{position:absolute;filter:var(--sh);transform:rotate(var(--r,0deg));pointer-events:none}
.cut[data-depth]{will-change:transform}
/* paper depth is running (site.js, desktop with a mouse): every drifting layer is its own composited layer, so moving it never repaints it */
.depth-on [data-depth]{will-change:transform}
.cut svg{width:100%;height:auto;overflow:visible}
.f-deep{fill:var(--deep)}.f-blue{fill:var(--blue)}.f-mint{fill:var(--mint)}.f-navy{fill:var(--midnavy)}.f-pale{fill:var(--pale)}.f-paper{fill:var(--paper)}
.mat{fill:var(--paper);stroke:var(--paper);stroke-width:14;stroke-linejoin:round}
/* paper grain: on the website (html.pg) each paper colour is an SVG pattern of the colour plus the
   baked grain texture (components.mjs, tools/grain.mjs), never a live filter, so paper is cheap to
   paint and to move. The colour after the url() is the fallback. */
.pg .f-deep{fill:url(#p-deep) var(--deep)}.pg .f-blue{fill:url(#p-blue) var(--blue)}.pg .f-mint{fill:url(#p-mint) var(--mint)}.pg .f-navy{fill:url(#p-navy) var(--midnavy)}.pg .f-pale{fill:url(#p-pale) var(--pale)}.pg .f-paper{fill:url(#p-paper) var(--paper)}.pg .f-stock{fill:url(#p-stock) var(--ground)}
.pg .mat{fill:url(#p-paper) var(--paper);stroke:url(#p-paper) var(--paper)}
/* paper that sizes to its words (cut(name, { fit: true })): the cut shape is stretched behind the
   text as a background and the padded text sets the height, so words never squeeze into a fixed box */
.cut.fit>svg{position:absolute;inset:0;width:100%;height:100%}
.cut.fit>:not(svg){position:relative}

/* hand-laid entrance: each layer comes down from a hand, a little turned, and settles */
@keyframes lay{
  0%{opacity:0;transform:translate(var(--lx,26px),var(--ly,-34px)) rotate(calc(var(--r,0deg) + var(--lr,5deg))) scale(1.045)}
  20%{opacity:1}
  64%{transform:translate(0,1.5px) rotate(calc(var(--r,0deg) - var(--lr,5deg) * .12)) scale(1.003)}
  100%{opacity:1;transform:rotate(var(--r,0deg))}
}
.js .lay{animation:lay 1.15s var(--ease) var(--d,0s) backwards}

/* ---------- photographs in cut frames ---------- */
.photo{position:relative}
.photo-stage{position:relative}
.photo-back{z-index:0;transition:translate .6s var(--ease)}
.photo-lift{position:relative;z-index:1;transform:rotate(var(--r,0deg))}
.photo-in{position:relative;--z:.02;filter:var(--sh);transition:transform .55s var(--ease),filter .55s var(--ease)}
.photo-mat{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask:var(--mask) center/100% 100% no-repeat;mask:var(--mask) center/100% 100% no-repeat;filter:saturate(.94) sepia(.06)}
.photo-in::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;mix-blend-mode:multiply;-webkit-mask:var(--mask) center/100% 100% no-repeat;mask:var(--mask) center/100% 100% no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .16  0 0 0 0 .1  0 0 0 .7 -.25'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (hover:hover){
  .photo:hover .photo-in{--z:.055;transform:translate(-2px,-8px) rotate(-.7deg)}
  .photo:hover .photo-back{translate:7px 6px}
}
.cap{font-size:15px;color:var(--ink2);margin:26px 0 0;line-height:1.5;max-width:34em;position:relative;text-wrap:pretty}
.cap-story{color:var(--ink)}
.cap-lead{font-weight:650}

/* ---------- header ---------- */
.site-head{padding:18px 0}
.head-in{display:flex;align-items:center;gap:28px}
.brand img{width:188px;height:auto}
.nav{display:flex;align-items:center;gap:4px;list-style:none;margin:0 0 0 12px;padding:0}
.nav>li{position:relative}
.nav-link{font:500 16px/1 var(--bd);color:var(--ink);text-decoration:none;background:none;border:0;padding:12px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav-link:hover{background:rgba(12,29,61,.06)}
.nav-link[aria-current]{text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:6px}
.nav-link .ic{width:16px;height:16px;transition:transform .25s}
.nav-link[aria-expanded=true] .ic{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 8px);left:0;min-width:300px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px;box-shadow:0 16px 40px -14px rgba(12,29,61,.28);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s,transform .2s,visibility 0s .2s;z-index:20}
.drop.open{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
.drop a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none}
.drop a:hover{background:var(--ground)}
.drop strong{display:block;font-weight:650}
.drop span{display:block;font-size:15px;color:var(--ink2)}
.drop .all{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-weight:600;font-size:15px}
.head-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.head-phone{display:inline-flex;align-items:center;gap:8px;font-weight:650;text-decoration:none;white-space:nowrap}
.head-phone .ic{color:var(--deep)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:650 16px/1 var(--bd);text-decoration:none;border-radius:999px;padding:15px 22px;border:1.5px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .2s;white-space:nowrap}
.btn .ic{width:18px;height:18px}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--midnavy)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:#0a6b43}
.btn-ghost{border-color:#b9ae98;color:var(--navy)}
.btn-ghost:hover{border-color:var(--navy);background:rgba(12,29,61,.04)}
.btn-mint{background:var(--mint);color:var(--navy)}
.btn-mint:hover{background:var(--hmint)}
.btn-line{border-color:rgba(255,255,255,.55);color:#fff}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn:active{transform:translateY(1px)}
.icon-btn{display:none;width:46px;height:46px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);align-items:center;justify-content:center;color:var(--ink);cursor:pointer}
.mnav{display:none}

/* ---------- hero ---------- */
.hero{padding:34px 0 72px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 660px;gap:56px;align-items:start}
.hero-copy{padding-top:58px;position:relative;z-index:2}
.h1{font:800 clamp(52px,6.1vw,90px)/.94 var(--hd);letter-spacing:-.04em;margin:0;color:var(--navy);text-wrap:balance}
.h1 .l{display:block}
.h1 .in{position:relative;display:inline-block;z-index:0;padding:0 .08em;margin-left:-.08em;margin-top:.06em}
.h1 .strip{position:absolute;left:-.12em;right:-.18em;top:.12em;bottom:-.1em;z-index:-1;filter:var(--sh);--z:.02;transform:rotate(var(--r))}
.h1 .strip svg{width:100%;height:100%;overflow:visible}
.lede{font-size:20px;line-height:1.55;color:var(--ink2);max-width:31em;margin:34px 0 0}
.talk{margin:22px 0 0;display:flex;align-items:center;gap:10px;font-size:17px}
.talk .ic{color:var(--green)}
.talk a,.alt-call a,.line a{font-weight:700;color:var(--navy);text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:4px}
.proof{list-style:none;padding:0;margin:44px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;font-size:15.5px;color:var(--ink2)}
.proof li{display:flex;align-items:center;gap:10px;position:relative}
.proof b{color:var(--navy);font-weight:700}
/* the Trustpilot wordmark sits on the text's baseline: its own baseline is 84.5% down the image */
.proof .proof-tp{align-items:baseline}
.proof .tp{width:auto;height:1.45em;position:relative;top:.225em}
.proof .proof-tp{flex-basis:100%}
.proof li+li+li::before{content:"";position:absolute;left:-15px;top:50%;width:5px;height:5px;margin-top:-2px;border-radius:50%;background:var(--mint)}

.collage{position:relative;min-height:720px}
.collage .c-mint{left:-70px;top:250px;width:560px;z-index:1}
.ph-wrap{position:absolute;top:0;right:-84px;width:430px;height:720px;z-index:0}
.ph-wrap .c-blue{right:-30px;top:-30px;width:400px}
.ph-wrap .ph-hero{position:absolute;right:30px;top:26px;width:322px}
.ph-wrap .c-scrap{left:96px;top:478px;width:150px}
.ph-wrap .c-note{right:-6px;top:516px;width:300px;z-index:2}
/* the navy caption note (capNote): the business and the area lead in white, the story follows.
   The side inset grows with the note (the stretched cut edge does too), so the words clear the edge
   and its scissor bites by 20px or more at any width. */
.c-note .note-txt{margin:0;padding:35px calc(4.5% + 22px) 33px;color:#dce5f6;font:500 14.5px/1.45 var(--bd);text-wrap:pretty}
.c-note .cap-lead{display:block;margin:0 0 5px;color:#fff;font-weight:700;font-size:15px;line-height:1.3;text-wrap:balance}

/* the quote card: plain paper, never animated */
.qcard{position:relative;z-index:3;width:424px;color:var(--ink);background:var(--paper);border:1px solid rgba(12,29,61,.08);border-radius:6px;padding:30px 30px 24px;box-shadow:0 1px 2px rgba(12,29,61,.08),0 22px 44px -18px rgba(12,29,61,.32)}
.q-title{font:760 28px/1.1 var(--hd);letter-spacing:-.02em;margin:0;color:var(--navy)}
.qsub{margin:8px 0 18px;color:var(--ink2);font-size:16px;line-height:1.5}
.field{margin:0 0 12px}
.field label,.choice legend{display:block;font-weight:650;font-size:15px;margin:0 0 6px;padding:0;color:var(--navy)}
.input{width:100%;height:48px;border:1.5px solid #b3aa98;border-radius:8px;background:#fff;padding:0 14px;font:400 17px var(--bd);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.input:hover{border-color:#8f8571}
.input:focus{outline:none;border-color:var(--deep);box-shadow:0 0 0 3px rgba(43,86,196,.22)}
.bad .input{border-color:var(--err);box-shadow:0 0 0 3px rgba(180,35,24,.12)}
.msg{display:flex;align-items:center;gap:6px;color:var(--err);font-size:15px;margin:6px 0 0;font-weight:550}
.msg .ic{width:16px;height:16px}
.msg[hidden]{display:none}
.choice{border:0;margin:0 0 18px;padding:0;min-width:0}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg label{display:flex;align-items:center;justify-content:center;gap:7px;height:48px;border:1.5px solid #b3aa98;border-radius:8px;background:#fff;color:var(--navy);font-weight:600;font-size:16px;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.seg label .ic{width:18px;height:18px;color:var(--deep)}
.seg label:hover{border-color:#8f8571}
.seg input:checked+label{background:#dcf3e6;border-color:var(--green);color:var(--navy)}
.seg input:checked+label .ic{color:var(--green)}
.seg input:focus-visible+label{outline:3px solid var(--deep);outline-offset:2px}
.choice.bad .seg label{border-color:var(--err)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.submit{width:100%;background:var(--green);color:#fff;border-radius:10px;padding:17px 22px;font-size:17px}
.submit:hover{background:#0a6b43}
.submit[disabled]{opacity:.7;cursor:progress}
.alt-call{text-align:center;margin:12px 0 0;font-size:16px;color:var(--ink2)}
.qnote{display:flex;gap:10px;margin:16px 0 0;padding-top:14px;border-top:1px dashed var(--line);font-size:14.5px;line-height:1.45;color:var(--ink2)}
.qnote .ic{width:18px;height:18px;color:var(--green);margin-top:1px}
/* the card carries its own ink, so no panel colour (white on navy) can leak into the form */
.qcard .qsub,.qcard .alt-call,.qcard .qnote{color:var(--ink2)}
/* the postcode-first quote form (quoteForm in components.mjs, behaviour in site.js) */
.q-steps{list-style:none;margin:0 0 20px;padding:0;display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink2)}
.q-steps li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.q-steps li+li::before{content:"";width:30px;border-top:2px dashed #c9bfab;margin-right:2px}
.q-steps li.done+li::before{border-top-style:solid;border-color:var(--green)}
.q-n{display:grid;place-items:center;width:28px;height:28px;border-radius:52% 46% 50% 47%;border:1.5px solid #b3aa98;background:#fff;font:700 13px/1 var(--bd);color:var(--ink2);transform:rotate(-5deg);box-shadow:0 1px 1px rgba(12,29,61,.12)}
.q-steps li+li .q-n{transform:rotate(4deg)}
.q-n .ic{display:none;width:14px;height:14px;stroke-width:2.4}
.q-steps .on{color:var(--navy);font-weight:650}
.q-steps .on .q-n{border-color:var(--green);background:var(--green);color:#fff}
.q-steps .done .q-n{border-color:var(--green);background:#dcf3e6;color:var(--green)}
.q-steps .done .q-n>span{display:none}
.q-steps .done .q-n .ic{display:block}
.q-chip{display:inline-flex;align-items:center;gap:6px;margin:0 0 16px;padding:6px 12px 5px;background:#dcf3e6;color:var(--navy);font-size:14px;font-weight:650;border-radius:999px}
.q-chip .ic{width:15px;height:15px;color:var(--green);stroke-width:2.2}
.q-pc .input{height:60px;font:700 23px/1 var(--hd);letter-spacing:.05em;text-transform:uppercase;padding:0 16px}
.q-pc .input::placeholder{font:400 18px var(--bd);letter-spacing:0;text-transform:none;color:#6f6858}
.q-pc + .submit,.q-pc + .q-err{margin-top:4px}
.q-err{margin:4px 0 14px;padding:12px 14px;border:1.5px solid rgba(180,35,24,.35);background:#fbeceb;border-radius:8px;color:var(--err);font-size:15px;line-height:1.45}
.q-err p{margin:0}
.q-err a{color:var(--navy);font-weight:700;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:3px}
.q-err[hidden]{display:none}
.q-terms{margin:2px 0 14px;font-size:14px;line-height:1.5;color:var(--ink2)}
.q-terms a{color:var(--navy);text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:3px}
.q-pc-echo{color:var(--navy);letter-spacing:.03em}
.q-back{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin:10px 0 0;padding:8px;background:none;border:0;border-radius:8px;font:600 15px var(--bd);color:var(--ink2);cursor:pointer}
.q-back:hover{color:var(--navy);text-decoration:underline;text-underline-offset:4px}
.q-back .ic{width:16px;height:16px;transform:scaleX(-1)}
.qpc .qform,.qpc .q-steps,.qpc .q-chip{display:none}
.js .qpc .qform{display:block}
.js .qpc .q-steps{display:flex}
.js .qpc .q-chip{display:inline-flex}
.js .qpc .qform[hidden],.js .qpc .q-nojs{display:none}
.q-nojs .btn{margin-top:2px}
/* three fuel choices fit a narrow phone card without the icon touching the edge */
@media (max-width:419px){
  .seg{gap:6px}
  .seg label{gap:5px;font-size:15px;padding:0 4px}
  .seg label .ic{width:16px;height:16px}
}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- section basics ---------- */
.sec{padding:120px 0}
.h2{font:780 clamp(36px,4.4vw,60px)/1.02 var(--hd);letter-spacing:-.035em;margin:0;color:var(--navy);max-width:14em;text-wrap:balance}
.sec-head p{font-size:19px;color:var(--ink2);max-width:34em;margin:20px 0 0}
.h3{font:760 clamp(30px,3vw,40px)/1.05 var(--hd);letter-spacing:-.03em;margin:0 0 16px;color:var(--navy)}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--mint);padding-bottom:3px;margin-top:22px;transition:gap .2s,border-color .2s}
.more:hover{gap:12px;border-color:var(--green)}
.more .ic{width:18px;height:18px}
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform 1.1s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}

.sup{padding:30px 0 10px}
.sup p{font:500 clamp(20px,2.1vw,27px)/1.5 var(--bd);color:var(--ink2);max-width:46em;margin:0;letter-spacing:-.005em;text-wrap:pretty}
.sup b{color:var(--navy);font-weight:650}

/* ---------- energy ---------- */
.energy{padding:100px 0 110px}
/* the drawing is sized by width so pylon tops are never cropped; it sits on the band's floor and may rise behind the heading above */
.pylon-band{position:relative;z-index:0;height:260px;margin:34px 0 -20px;pointer-events:none;container-type:inline-size}
.pylon-band svg{position:absolute;left:0;bottom:0;width:100%;height:max(100%, 18.75cqw);overflow:visible}
/* whatever rises behind the heading above is paled to a light haze so the text stays easy to read */
.pylon-band svg{-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.2) 0,rgba(0,0,0,.2) calc(100% - 275px),#000 calc(100% - 205px));mask-image:linear-gradient(to bottom,rgba(0,0,0,.2) 0,rgba(0,0,0,.2) calc(100% - 275px),#000 calc(100% - 205px))}
.pylon-band + .wrap,.sec-head,.en-hero,.el-hero{position:relative;z-index:1}
.pylon-band g[data-depth]{will-change:transform}
.pl-cables path{stroke-opacity:.62}
.js .pl-cables path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s cubic-bezier(.45,.1,.2,1) calc(var(--k,0) * 45ms)}
.js .pylon-band.on .pl-cables path{stroke-dashoffset:0}
.pl-pylon{filter:drop-shadow(0 2px 2px rgba(12,29,61,.18))}
.erow{display:grid;align-items:center;margin-top:70px}
.erow.el{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:96px}
.erow.gs{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:96px;margin-top:150px}
.el-photo .photo-back{position:absolute;left:-6%;top:-5%;width:100%}
.el-photo{max-width:520px}
.gas-fig{position:relative;max-width:560px;justify-self:end;width:100%}
.gs-photo .photo-back{position:absolute;left:5%;top:-7%;width:100%}
.flame-wrap{position:absolute;left:-78px;top:150px;width:150px;z-index:3;--z:.06;filter:var(--sh);transform:rotate(var(--r,0deg))}
.flame{width:100%;height:auto;overflow:visible}
.flame .fl{transform-box:view-box;transform-origin:110px 300px}
.js .flame .fl{animation:sway 5.2s ease-in-out infinite alternate;animation-play-state:paused}
.js .flame .fl-2{animation-name:sway2;animation-duration:4.4s;animation-delay:-1.1s}
.js .flame .fl-3{animation-name:sway3;animation-duration:3.7s;animation-delay:-2s}
.js .flame .fl-4{animation-name:sway3;animation-duration:3.1s;animation-delay:-.6s}
.js .flame-wrap.on .fl{animation-play-state:running}
@keyframes sway{from{transform:rotate(-1.4deg) skewX(.8deg)}to{transform:rotate(1.6deg) skewX(-1deg) scaleY(1.015)}}
@keyframes sway2{from{transform:rotate(2deg) skewX(-1.2deg) scaleY(.99)}to{transform:rotate(-2.2deg) skewX(1.4deg) scaleY(1.025)}}
@keyframes sway3{from{transform:rotate(-2.6deg) skewX(1.6deg) scaleY(.98)}to{transform:rotate(2.8deg) skewX(-1.8deg) scaleY(1.04)}}
.ecopy p{margin:0;font-size:18px;color:var(--ink2);max-width:30em}
.note{position:relative;margin:30px 0 0;background:var(--paper);padding:26px 26px 20px;max-width:390px;transform:rotate(-1.2deg);box-shadow:0 1px 1px rgba(12,29,61,.12),0 12px 24px -12px rgba(12,29,61,.25)}
.note .tape{position:absolute;top:-16px;left:50%;width:118px;margin-left:-59px;transform:rotate(2.5deg);opacity:.92}
.note .tape svg{width:100%;height:auto}
.note h4{font:700 17px/1.2 var(--hd);margin:0 0 10px;letter-spacing:-.01em}
.note ul{margin:0;padding:0;list-style:none}
.note li{display:flex;gap:10px;padding:7px 0;font-size:16px;line-height:1.45;border-top:1px dashed var(--line)}
.note li:first-child{border-top:0}
.note li .ic{width:18px;height:18px;color:var(--green);margin-top:3px}
.renew{position:relative;margin:34px 0 0;height:214px;max-width:520px}
.renew .cut{--z:.012}
/* each piece is fit paper: the strip or tab grows round its label */
.renew .lbl{display:block;padding:15px 24px 14px;font:650 15.5px/1.25 var(--bd);white-space:nowrap}
.renew .r-long{left:0;top:16px;width:70%}
.renew .r-long .lbl{color:#fff}
.renew .r-short{left:68%;top:22px;width:32%}
.renew .r-short .lbl{color:var(--navy);padding-left:26px}
.renew .r-tab{left:40%;top:84px;width:250px}
.renew .r-tab .lbl{color:var(--navy);padding:24px 30px 22px;font-weight:600;white-space:normal;text-wrap:balance}
.renew .r-tick{position:absolute;left:66%;top:6px;width:2px;height:90px;background:var(--navy);opacity:.5;transform:rotate(-2deg)}
.renew-cap{font-size:15px;color:var(--ink2);margin:6px 0 0}

/* ---------- torn edges ---------- */
.torn{position:relative;width:100%;pointer-events:none;z-index:1}
.torn svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 -1px 1px rgba(12,29,61,.07))}
.torn-top{margin-bottom:-1px}
.torn-bottom{margin-top:-1px}
.torn-bottom svg{filter:drop-shadow(0 3px 4px rgba(12,29,61,.1))}

/* ---------- how a switch works: a pop-up book ---------- */
.how{position:relative;margin:30px 0 0}
.how-sheet{background:var(--pale);padding:70px 0 110px;position:relative}
.how-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end}
.how-head p{margin:0}
/* the page the cards are glued to, with its fold line */
.pop-stage{position:relative;margin:72px 0 0;padding-bottom:52px}
.pop-page{position:absolute;left:-1.5%;width:103%;bottom:0;height:100px;overflow:visible;filter:drop-shadow(0 1px 1px rgba(12,29,61,.12)) drop-shadow(0 12px 16px rgba(12,29,61,.12))}
.pop-page-crease{fill:none;stroke:#0c1d3d;stroke-opacity:.16;stroke-width:1.4;vector-effect:non-scaling-stroke}
.steps{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;align-items:end;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;perspective:1100px;perspective-origin:50% -40%}
.step{position:relative;padding-bottom:14px}
/* the card: a fold down the middle (popFold), shading where it bends at the hinge (popHinge) */
.pop-card{position:relative;z-index:2;padding:28px 30px 36px 28px;transform-origin:50% 100%;filter:drop-shadow(0 1px 1px rgba(12,29,61,.16)) drop-shadow(0 14px 16px rgba(12,29,61,.15));transition:transform 1.15s cubic-bezier(.18,.8,.22,1),filter 1.15s ease}
.pop-bg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1}
.pop-crease{fill:none;stroke:#fff;stroke-opacity:.8;stroke-width:1.2;vector-effect:non-scaling-stroke;transform:translateX(1.6px)}
/* the glued foot lying flat on the page in front of the hinge */
.pop-foot{position:absolute;left:4%;right:4%;bottom:0;height:15px;z-index:1;background:linear-gradient(#cbc1ad,#eee7d9 75%);box-shadow:inset 0 1.5px 0 rgba(12,29,61,.22);clip-path:polygon(1.5% 0,98.5% 0,100% 100%,0 100%)}
/* a second sheet standing behind, and the shadow the pair casts back onto the page */
.pop-back{--br:2.4deg;position:absolute;z-index:0;left:13%;right:-7%;top:-18px;bottom:22px;transform-origin:50% 100%;transform:rotate(var(--br));filter:drop-shadow(0 1px 1px rgba(12,29,61,.14)) drop-shadow(0 8px 10px rgba(12,29,61,.12));transition:transform 1.3s cubic-bezier(.18,.8,.22,1) .14s}
.pop-back svg{width:100%;height:100%;overflow:visible}
.step:nth-child(even) .pop-back{--br:-2deg;left:-7%;right:13%;top:-12px}
.pop-shadow{position:absolute;z-index:0;left:6%;right:-22px;bottom:8px;height:46px;background:rgba(12,29,61,.26);filter:blur(9px);border-radius:10px;transform:skewX(-34deg) translateX(10px);transform-origin:50% 100%;transition:opacity 1s ease .2s}
.mk{position:relative;width:86px;height:80px;margin-bottom:18px}
.mk .cut{inset:0;width:100%;--z:.01}
.mk .n{position:absolute;inset:0;display:grid;place-items:center;font:800 38px/1 var(--hd);letter-spacing:-.04em;padding-top:4px;color:var(--navy)}
.step h3{font:740 21px/1.15 var(--hd);letter-spacing:-.02em;margin:0 0 8px;color:var(--navy);text-wrap:balance}
.step p{margin:0;font-size:16px;color:var(--ink2);line-height:1.55;text-wrap:pretty}
.js .step:not(.up) .pop-card{transform:rotateX(82deg);filter:drop-shadow(0 0 0 rgba(12,29,61,0)) drop-shadow(0 0 0 rgba(12,29,61,0))}
.js .step:not(.up) .pop-back{transform:rotateX(86deg) rotate(var(--br))}
.js .step:not(.up) .pop-shadow{opacity:0}
/* home: five cards of different widths, climbing along one page */
.pop-rise .steps{grid-template-columns:1fr 1.08fr 1.18fr .98fr 1.12fr;gap:20px}
.pop-rise .step:nth-child(1) .pop-card{min-height:318px}
.pop-rise .step:nth-child(2) .pop-card{min-height:372px}
.pop-rise .step:nth-child(3) .pop-card{min-height:352px}
.pop-rise .step:nth-child(4) .pop-card{min-height:398px}
.pop-rise .step:nth-child(5) .pop-card{min-height:428px}
/* energy hub: your two steps stand at the front, ours stand further back on the page */
.pop-split .pop-page{height:150px}
.pop-split .steps{grid-template-columns:1.32fr 1fr 1.32fr 1fr 1fr;gap:12px}
.pop-split .step.you{z-index:2}
.pop-split .step.you .pop-card{min-height:350px;padding:30px 28px 40px}
.pop-split .step.you h3{font-size:24px}
.pop-split .step:not(.you){z-index:1;margin:0 -8px 46px;scale:.93;transform-origin:50% 100%}
.pop-split .step:not(.you) .pop-card{min-height:330px}
.pop-split .step:not(.you) .pop-back{top:-10px}
.pop-flag{position:absolute;z-index:-2;top:-27px;right:22px;padding:7px 14px 16px;font:750 13.5px/1 var(--bd);letter-spacing:.01em;color:var(--navy);background:#c3d3ea;clip-path:polygon(7% 10%,93% 0,100% 100%,0 100%);box-shadow:inset 0 -10px 8px -6px rgba(12,29,61,.18)}
.step.you .pop-flag{background:var(--mint)}
.secure{display:flex;align-items:flex-start;gap:12px;margin:64px 0 0;max-width:40em;font-size:17px}
.secure .ic{color:var(--deep);width:22px;height:22px;margin-top:2px}

/* ---------- water, waste, payments ---------- */
.also-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:80px;margin-top:72px;align-items:start}
.pay{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:48px;align-items:center}
.pay-fig{position:relative;min-height:560px}
.pay-photo{position:absolute;left:0;top:0;width:62%}
.term-wrap{position:absolute;right:-4%;bottom:0;width:62%;--z:.05;filter:var(--sh);transform:rotate(var(--r,0deg));z-index:2}
.terminal{width:100%;height:auto;overflow:visible}
.terminal .t-r-h{font:700 12px var(--bd);fill:var(--navy);letter-spacing:.01em}
.terminal .t-r-s{font:600 11px var(--bd);fill:#5d6679}
.terminal .t-scr{font:700 17px var(--bd);fill:var(--navy)}
.t-receipt{transition:transform 2.8s cubic-bezier(.33,.55,.25,1) .25s}
.js .pay-fig:not(.on) .t-receipt{transform:translateY(214px)}
.pay h3{margin-bottom:14px}
.pay-copy p{margin:0 0 12px;color:var(--ink2);font-size:17.5px}
.pay .line{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:500}
.pay .line .ic{color:var(--deep)}
.pay-copy .pay-cap{margin-top:30px;font-size:14.5px}
.small{display:grid;gap:44px;padding-top:12px}
.sitem{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;align-items:start}
.sitem .mk2{position:relative;width:64px;height:64px}
.sitem .mk2 .cut{inset:0;width:100%;--z:.012}
.sitem h3{font:740 23px/1.15 var(--hd);letter-spacing:-.02em;margin:4px 0 8px}
.sitem p{margin:0;color:var(--ink2);font-size:16.5px}
.sitem .more{margin-top:12px;font-size:16px}

/* ---------- proof and questions ---------- */
.proofsec{margin-top:10px}
.proof-sheet{background:var(--ground2);padding:80px 0 200px;position:relative}
.proof-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.proof-copy{padding-top:30px}
.proof-copy p{font-size:18px;color:var(--ink2);max-width:28em;margin:22px 0 0}
.tp-badge{position:relative;width:250px;margin-top:40px;pointer-events:auto}
.tp-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.tp-in img{width:112px;height:auto;mix-blend-mode:multiply}
.tp-in p{margin:0;font-size:17px;color:var(--ink2)}
.tp-in b{font:800 26px/1 var(--hd);color:var(--navy);letter-spacing:-.02em;margin-right:4px}
.proof-copy .h2{font-size:clamp(34px,3.7vw,54px)}
.proof-note{margin-top:48px;max-width:400px;transform:rotate(.9deg)}
.proof-note h3{font:720 19px/1.2 var(--hd);margin:0 0 10px;letter-spacing:-.01em;color:var(--navy)}
.proof-note li .ic{color:var(--deep)}
.proof-note li a{font-weight:700;color:var(--navy);text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:4px;white-space:nowrap}
.proof-note .more{margin-top:14px}
.proof-photos{position:relative;display:flex;flex-direction:column}
.pf-a{width:82%;align-self:flex-end}
.pf-a .cap{margin-left:42%;max-width:none}
.pf-b{position:relative;width:46%;margin-top:-170px;z-index:2}
.pf-b .photo-back{position:absolute;left:8%;top:6%;width:100%}
.pf-b .cap{max-width:20em}
.faq{margin-top:110px}
.faq-list{margin-top:36px;max-width:860px;border-top:1.5px solid #cfc5b2}
.qa{border-bottom:1.5px solid #cfc5b2}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 2px;font:700 20px/1.3 var(--hd);letter-spacing:-.01em;color:var(--navy)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ic{width:24px;height:24px;color:var(--deep);transition:transform .35s var(--ease)}
.qa[open] summary .ic{transform:rotate(45deg)}
.qa summary:hover span{text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:5px}
.qa p{margin:0 0 24px;color:var(--ink2);max-width:44em;font-size:17px}

/* ---------- closing: Manchester at dusk ---------- */
.dusk{position:relative;background:var(--navy);color:#fff;padding:90px 0 0;z-index:2}
.dusk>.torn{position:absolute;left:0;right:0}
.dusk>.torn-mint{top:-92px}
.dusk>.torn-navy{top:-62px}
.dusk-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.dusk-sky .band{position:absolute;left:0;right:0;bottom:0}
.dusk-sky .band>.torn{position:absolute;left:0;right:0;top:-40px}
/* the bands sit at fixed heights above the skyline, whatever the copy above them does */
.dusk-sky .b1{top:calc(100% - 388px);background:#142d63}
.dusk-sky .b2{top:calc(100% - 298px);background:#1f468f}
.dusk-sky .b3{top:calc(100% - 198px);background:#3a6cc0}
.dusk-sky .b3>.torn{top:-36px}
.dusk-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:end}
.dusk .cta-btns{flex-direction:row;flex-wrap:wrap;margin-top:34px}
.dusk-in{padding-bottom:56px}
.dusk h2{font:800 clamp(44px,5.6vw,84px)/.95 var(--hd);letter-spacing:-.04em;margin:0}
.dusk h2 .in{color:var(--hmint);display:block}
.dusk p{font-size:19px;color:#d9e3f5;max-width:30em;margin:24px 0 0}
.dusk :focus-visible{outline-color:var(--hmint)}
.cta-btns{display:flex;flex-direction:column;gap:12px;position:relative;z-index:2}
.dusk .c-cm{right:-10px;top:-170px;width:120px;--z:.06}
.sky-wrap{position:relative;height:400px;margin:10px 0 -1px;z-index:1;overflow:hidden}
.skyline{width:100%;height:100%;overflow:visible}
.skyline g[data-depth]{will-change:transform}
.sk-far{filter:drop-shadow(0 2px 3px rgba(6,14,32,.35))}
.sk-mid{filter:drop-shadow(0 3px 4px rgba(6,14,32,.4))}
.sk-front{filter:drop-shadow(0 -2px 6px rgba(6,14,32,.45))}
.skyline .w{fill:var(--lamp)}
.js .skyline .w{opacity:0;transition:opacity 1.1s ease}
.js .skyline .w.lit{opacity:1}
/* the same skyline closing every other page, between its last section and the footer */
.sky-close{position:relative;z-index:1;background:var(--navy);margin-top:-1px}
.sky-close.sky-tear{margin-top:84px}
.sky-close>.torn{position:absolute;left:0;right:0}
.sky-close>.torn-mint{top:-86px}
.sky-close>.torn-navy{top:-57px}
.sky-close .dusk-sky .b1{top:16%}
.sky-close .dusk-sky .b2{top:36%}
.sky-close .dusk-sky .b3{top:58%}
.sky-close .sky-wrap{height:340px;margin:0 0 -1px}

/* ---------- footer ---------- */
.foot{background:var(--navy);color:#c9d6ee;padding:10px 0 40px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:40px;padding-top:44px}
.foot h2{font:700 15px/1.2 var(--bd);margin:0 0 14px;color:#fff}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{text-decoration:none;color:#c9d6ee}
.foot a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--mint)}
.foot p{margin:16px 0 0;font-size:16px;max-width:24em}
.foot .brand img{width:176px}
.foot-phone{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#fff!important;font-size:18px}
.foot-phone .ic,.foot-addr .ic{color:var(--hmint);width:18px;height:18px}
.foot-addr{display:flex;gap:8px;font-size:15.5px;line-height:1.45}
.foot-addr .ic{margin-top:2px}
.foot :focus-visible{outline-color:var(--hmint)}
.legal{margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:8px 28px}
.legal p{margin:0;font-size:14px;color:#a9b8d6;max-width:none}

/* ---------- stub pages ---------- */
.stub{padding:50px 0 150px;position:relative;overflow:hidden;min-height:56vh}
.stub-in{position:relative}
.crumbs ol{list-style:none;margin:0 0 34px;padding:0;display:flex;flex-wrap:wrap;gap:6px 0;font-size:15px;color:var(--ink2)}
.crumbs li+li::before{content:"/";margin:0 10px;color:#a99f8c}
.crumbs a{color:var(--ink2)}
.stub-h1{max-width:12em;position:relative;z-index:2}
.stub .lede{position:relative;z-index:2}
.stub-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;position:relative;z-index:2}
.stub-a{right:12%;top:30px;width:150px;--z:.04}
.stub-b{right:4%;top:170px;width:110px;--z:.06}
.stub-form{position:relative;margin-top:44px;max-width:440px;z-index:2}
.stub-form .qcard{width:auto}
.stub-form-paper{left:-60px;top:120px;width:520px;z-index:0}
.stub .stub-in .lede{margin-top:26px}
@media (min-width:1100px){
  .quote-page .stub-form{position:absolute;right:var(--gut);top:0;margin:0;width:440px}
  .quote-page .stub-a,.quote-page .stub-b{display:none}
  .quote-page .stub{min-height:900px}
  .quote-page .stub-h1,.quote-page .stub .lede{max-width:min(12em,calc(100% - 520px))}
  .quote-page .stub .lede{max-width:calc(100% - 520px)}
}

/* ---------- phone-only paper tucked beside a hero headline ---------- */
.ph-tuck,.tuck{display:none}

/* ---------- small desktop ---------- */
@media (max-width:1360px) and (min-width:1100px){
  .hero-grid{gap:40px}
  .ph-wrap{right:-20px;width:400px}
  .ph-wrap .c-blue{right:-30px;width:360px}
  .ph-wrap .ph-hero{right:18px;width:300px}
  .ph-wrap .c-scrap{left:150px}
  .ph-wrap .c-note{right:-4px;width:286px}
  .erow.el,.erow.gs{gap:70px}
}
/* tablet */
@media (max-width:1180px){
  .nav-main{display:none}
  .icon-btn{display:inline-flex}
  .head-cta{display:none}
  .mnav{display:none;flex-direction:column;gap:2px;padding:12px var(--gut) 20px;border-bottom:1px solid var(--line);background:var(--paper)}
  .mnav.open{display:flex}
  .mnav a{padding:12px 4px;text-decoration:none;font-weight:600;font-size:17px;border-bottom:1px solid rgba(12,29,61,.06)}
  .mnav a[aria-current]{color:var(--green)}
  .mnav .sub{display:flex;flex-direction:column}
  .mnav .sub a{padding-left:20px;font-weight:500}
  .mnav .btn{margin-top:12px;border-bottom:0}
}
@media (max-width:1099px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-copy{padding-top:24px}
  .collage{min-height:0;display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:24px}
  .collage .c-mint{left:-40px;top:160px;bottom:auto;width:min(520px,90%)}
  .qcard{width:auto;margin:0}
  .ph-wrap{position:relative;right:auto;top:auto;width:auto;height:600px;z-index:2}
  .ph-wrap .c-blue{right:-30px;top:-10px;width:min(320px,88%)}
  .ph-wrap .ph-hero{right:6%;top:30px;width:min(270px,78%)}
  .ph-wrap .c-scrap{left:0;top:auto;bottom:90px;width:min(120px,30%)}
  .ph-wrap .c-note{right:auto;left:2%;top:auto;bottom:0;width:min(320px,96%)}
  .erow.el,.erow.gs{grid-template-columns:1fr;gap:56px}
  .erow.gs .gas-fig{order:-1;justify-self:start;max-width:600px}
  .el-photo{max-width:560px}
  .steps,.pop-rise .steps,.pop-split .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 28px}
  .pop-page{display:none}
  .pop-stage{padding-bottom:0}
  .pop-split .step:not(.you){margin:0;scale:none}
  .pop-rise .step:nth-child(n) .pop-card,.pop-split .step:nth-child(n) .pop-card{min-height:0}
  .also-grid{grid-template-columns:1fr;gap:64px}
  .small{grid-template-columns:1fr 1fr}
  .proof-grid{grid-template-columns:1fr;gap:56px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .flame-wrap{left:-20px;top:110px;width:130px}
}
/* phones */
@media (max-width:719px){
  :root{--gut:16px}
  body{font-size:16px}
  .site-head{padding:12px 0}
  .brand img{width:158px}
  .head-phone span{display:none}
  .head-phone{width:46px;height:46px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);justify-content:center}
  .head-right{gap:8px}
  .hero{padding:10px 0 40px}
  .h1{font-size:clamp(46px,14.2vw,60px)}
  .lede{font-size:17.5px;margin-top:0}
  .talk{display:none}
  .hero-grid{display:flex;flex-direction:column;gap:22px}
  .hero-copy{display:contents}
  .h1{order:1}.lede{order:2}.collage{order:3}.proof{order:4;margin-top:34px}
  .collage{grid-template-columns:1fr;gap:0}
  .collage .c-mint{left:-26px;top:200px;bottom:auto;width:88%}
  .qcard{padding:24px 20px 20px}
  /* the photo sits on its own cut sheet between the lede and the form (photoTuck), with its story note
     laid beside it (pt-cap), so the story travels with its photo; the desktop collage, which carries
     the same photo and note, is hidden on phones */
  .ph-tuck{display:block;order:2;position:relative;z-index:0;width:min(176px,46%);margin:0 6px -84px auto;align-self:flex-end}
  .ph-tuck .pt-pic{display:block;position:relative}
  .ph-tuck.pt-cap{display:flex;align-items:flex-end;width:auto;align-self:stretch;margin:2px 6px -14px 0}
  .pt-cap .pt-pic{flex:none;width:min(176px,46%)}
  .pt-cap .pt-note{position:relative;flex:1 1 auto;min-width:0;margin:0 -18px 34px -4px;z-index:2;--z:.045}
  .pt-cap .pt-note .note-txt{padding:24px 20px 22px 18px;font-size:13.5px;line-height:1.42}
  .pt-cap .pt-note .cap-lead{font-size:14px;margin-bottom:4px}
  .ph-tuck + .collage,.hero-grid > .collage{position:relative;z-index:1}
  .hero-grid > .collage .qcard{position:relative;z-index:2}
  .ph-tuck .pt-back{position:absolute;left:-22px;top:-12px;width:calc(100% + 34px);transform:rotate(-5deg);filter:var(--sh);--z:.03}
  .ph-tuck .pt-back svg{width:100%;height:auto;overflow:visible}
  .ph-tuck .photo-in{display:block;transform:rotate(-3deg)}
  .ph-wrap{display:none}
  .tuck{display:block;z-index:-1}
  .tuck-a{right:-66px;top:10px;width:124px}
  .tuck-b{right:16px;top:132px;width:52px}
  .sec{padding:80px 0}
  .energy{padding:70px 0 80px}
  .pylon-band{height:150px;margin:26px 0 -10px}
  .erow{margin-top:50px}
  .erow.gs{margin-top:90px}
  .ecopy p{font-size:17px}
  .flame-wrap{left:auto;right:-6px;bottom:auto;top:-40px;width:96px}
  .renew{height:200px}
  .renew .r-long{width:66%}
  .renew .r-short{left:63%;width:37%}
  .renew .r-short .lbl{padding-left:20px;padding-right:16px;font-size:14.5px}
  .renew .r-long .lbl{font-size:14.5px;padding-left:20px}
  .renew .r-tab{left:auto;right:0;width:250px}
  .how-sheet{padding:50px 0 80px}
  .how-head{grid-template-columns:1fr;gap:16px}
  .pop-stage{margin-top:44px}
  .steps,.pop-rise .steps,.pop-split .steps{grid-template-columns:1fr;gap:34px;perspective-origin:50% -10%}
  .step:nth-child(n) .pop-back{left:14%;right:-6px}
  .step:nth-child(even) .pop-back{left:-6px;right:14%}
  .pop-split .step:not(.you){margin-left:22px}
  .pop-bg > :nth-child(2),.pop-crease{display:none}
  .pop-card::before{content:"";position:absolute;top:10px;bottom:10px;left:96px;width:3px;background:linear-gradient(90deg,rgba(12,29,61,.13),rgba(255,255,255,.85));pointer-events:none}
  .pop-card::after{content:"";position:absolute;top:8px;bottom:8px;left:99px;right:8px;background:linear-gradient(90deg,rgba(12,29,61,.05),rgba(12,29,61,0) 40%);pointer-events:none;z-index:-1}
  .pop-split .step.you .pop-card{padding:24px 28px 30px 20px}
  .pop-split .step.you h3{font-size:21px}
  .pop-card{display:grid;grid-template-columns:70px minmax(0,1fr);column-gap:16px;padding:24px 28px 26px 20px}
  .pop-card h3,.pop-card p{grid-column:2}
  .mk{width:66px;height:60px;margin:0;grid-row:span 2}
  .mk .n{font-size:30px}
  .secure{margin-top:44px;font-size:16px}
  .pay{grid-template-columns:1fr;gap:40px}
  .pay-fig{min-height:420px;max-width:380px}
  .small{grid-template-columns:1fr;gap:36px}
  .proof-sheet{padding:60px 0 170px}
  .proof-photos{min-height:0;display:grid;gap:44px}
  .pf-a{width:100%}
  .pf-a .cap{margin-left:0}
  .pf-b{width:84%;margin-top:0}
  .tp-badge{width:220px}
  .faq{margin-top:80px}
  .qa summary{font-size:18px;padding:18px 0}
  .dusk{padding-top:70px}
  .dusk-in{grid-template-columns:1fr;gap:32px}
  .dusk .c-cm{right:-20px;top:-118px;width:100px}
  .cta-btns{align-items:flex-start}
  .sky-wrap{height:230px}
  .sky-close.sky-tear{margin-top:76px}
  .sky-close .sky-wrap{height:230px}
  .sky-close .dusk-sky .b1{top:22%}.sky-close .dusk-sky .b2{top:42%}.sky-close .dusk-sky .b3{top:62%}
  .dusk-sky .b1{top:calc(100% - 214px)}.dusk-sky .b2{top:calc(100% - 156px)}.dusk-sky .b3{top:calc(100% - 96px)}
  .dusk-in{padding-bottom:40px}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .stub-a{right:-44px;top:-36px;width:96px}
  .stub-b{display:none}
  .stub-form-paper{left:-30px;width:110%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .lay{animation:none}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .js .pl-cables path{stroke-dashoffset:0;transition:none}
  .js .flame .fl{animation:none}
  .js .step:not(.up) .pop-card{transform:none;filter:drop-shadow(0 1px 1px rgba(12,29,61,.16)) drop-shadow(0 14px 16px rgba(12,29,61,.15))}
  .js .step:not(.up) .pop-back{transform:rotate(var(--br))}
  .js .step:not(.up) .pop-shadow{opacity:1}
  .pop-card,.pop-back,.pop-shadow,.photo-in,.photo-back,.t-receipt,.btn,.more,.nav-link .ic,.drop,.qa summary .ic{transition:none}
  .js .pay-fig:not(.on) .t-receipt{transform:none}
  .js .skyline .w{transition:none}
}
@media print{
  .site-head,.foot,.dusk,.sky-close,.pylon-band,.flame-wrap,.ph-tuck,.tuck{display:none}
  body::before{display:none}
}

/* ---------- headline topic ----------
   A slogan headline carries its search topic inside the same h1, as a second, smaller line in the
   display face (never a kicker above it): <h1><span class="h1-slogan">...</span> <span class="h1-topic">...</span></h1> */
.h1 .h1-slogan{display:block}
.h1 .h1-topic{display:block;max-width:27em;margin-top:24px;font:720 clamp(20px,1.7vw,25px)/1.22 var(--hd);letter-spacing:-.016em;color:var(--midnavy);text-wrap:balance}
.svc-hero .h1 .h1-topic,.co-hero .h1 .h1-topic{margin-top:20px}
@media (max-width:719px){.h1 .h1-topic,.svc-hero .h1 .h1-topic,.co-hero .h1 .h1-topic{margin-top:14px;font-size:19px}}

/* ---------- Trustpilot, linked to the Ecosave Pay profile wherever it shows ---------- */
.proof .tp-link{display:inline-flex;align-items:baseline;gap:10px;color:inherit;text-decoration:none}
.proof .tp-link:hover span{text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:4px}
a.tp-in{text-decoration:none;color:inherit;border-radius:10px}
a.tp-in:focus-visible{outline-offset:-6px}
.tp-text{color:var(--navy);font-weight:650;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:4px}

/* ---------- a service page hero with the quote form (business energy, business water) ----------
   The home hero's collage (form on a paper sheet, the photo beside it) under the breadcrumbs. */
.hero.hero-q-sec{padding:26px 0 72px}
.hero-q-sec .hero-copy{padding-top:30px}
/* the slogan's longest line ("renewed on time.") is about 7.9em: sized to the copy column beside the form */
.hero-q-sec .h1 .h1-slogan{font-size:clamp(42px,calc((100vw - 760px) / 8.1),62px)}
.hero-q-sec .lede{margin-top:28px}
.hero-q-sec .proof{margin-top:36px}
@media (max-width:1099px){.hero-q-sec .hero-copy{padding-top:0}.hero-q-sec .h1 .h1-slogan{font-size:clamp(48px,6vw,70px)}}
@media (max-width:719px){
  .hero.hero-q-sec{padding:8px 0 40px}
  .hero-q-sec .h1 .h1-slogan{font-size:clamp(38px,10.8vw,54px)}
  .hero-q-sec .lede{margin-top:0}
  .hero-q-sec .hero-grid{gap:20px}
  .hero-q-sec .collage .c-mint{top:120px}
}

/* ---------- the enquiry form (contactForm, card payments) ---------- */
.ccard .c-row{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.ccard .opt{font-weight:500;color:var(--ink2)}
.ccard .c-msg{height:auto;min-height:104px;padding:11px 14px;line-height:1.5;resize:vertical}
.ccard .qform,.ccard .c-sent{display:none}
.js .ccard .qform{display:block}
.js .ccard .q-nojs,.js .ccard .qform[hidden]{display:none}
.js .ccard .c-sent:not([hidden]){display:flex}
.c-sent{gap:12px;align-items:flex-start;padding:4px 0}
.c-sent:focus{outline:none}
.c-sent .ic{width:26px;height:26px;color:var(--green);stroke-width:2.4;margin-top:2px}
.c-sent p{margin:0;color:var(--ink2);font-size:16px}
.c-sent .c-sent-h{font:760 24px/1.15 var(--hd);letter-spacing:-.02em;color:var(--navy);margin-bottom:6px}
@media (max-width:379px){.ccard .c-row{grid-template-columns:1fr}}

/* ---------- touch targets on phones: at least 44px to tap (padding, never bigger text) ---------- */
@media (max-width:719px){
  .site-head .brand{display:inline-flex;align-items:center;min-height:46px}
  .foot ul{gap:0}
  .foot nav ul{grid-template-columns:1fr 1fr;column-gap:16px}
  .foot ul a,.foot .brand{display:inline-flex;align-items:center;min-height:44px}
  .foot h2{margin-bottom:4px}
  .crumbs ol{margin-bottom:22px;align-items:center}
  .crumbs li{display:inline-flex;align-items:center;min-height:44px}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px}
  /* keep the logo on the text baseline (desktop rule) and centre the row in the taller tap area */
  .proof .tp-link{min-height:44px;align-items:baseline;flex-wrap:wrap;align-content:center}
  .proof .proof-tp{align-items:center}
  /* inline links in a sentence: a taller touch area without moving the text */
  a[href^="tel:"]:not(.btn):not(.head-phone):not(.foot-phone),.tp-text,.rv-link,.q-terms a{padding-block:12px}
  .rv-link{display:inline-block;padding-block:12px;margin-block:-6px}
  /* "more" links (Business electricity ->): 44px tall from padding above the words, the underline stays put */
  .more{min-height:44px;padding-top:13px;margin-top:9px}
}

/* ==========================================================================
   Brand guidelines (/brand). Every selector is prefixed br- or scoped under
   .br-page so nothing here touches another page. Uses the company kit
   (co- classes) from company.css for bands, heroes and paper backgrounds.
   The class sits on <body>, so element rules are scoped to main: a bare
   .br-page a also hit the site header, skip link and the navy footer.
   ========================================================================== */
.br-page main a:not(.btn){font-weight:700;color:var(--navy);text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:4px}
.br-page main a:not(.btn):hover{text-decoration-color:var(--green)}
.br-page main code{font:600 14px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink2)}
.br-sec{padding:110px 0 40px}
.br-page main a[href^="tel:"]{white-space:nowrap}
.br-p{font-size:18px;color:var(--ink2);max-width:33em;margin:18px 0 0}

/* hero */
.br-hero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:70px;align-items:center}
.br-hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.br-hero-fig{position:relative;padding:40px 10px}
.br-letter{position:relative;isolation:isolate;padding:58px 54px 52px;rotate:-2deg;filter:var(--sh);--z:.04}
.br-letter img{width:min(300px,100%);height:auto}
.br-letter-line{font:800 clamp(30px,3.2vw,44px)/1 var(--hd);letter-spacing:-.04em;color:var(--navy);margin:30px 0 0}
.br-letter-line span{color:var(--deep)}
.br-scrap-a{right:-10px;top:4px;width:110px;z-index:2}
.br-scrap-b{left:-18px;bottom:6px;width:120px;z-index:-1}

/* logo */
.br-logos{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.br-logo{display:flex;flex-direction:column;border-radius:4px;overflow:hidden;filter:drop-shadow(0 1px 1px rgba(12,29,61,.14)) drop-shadow(0 10px 14px rgba(12,29,61,.12))}
.br-logo-art{display:grid;place-items:center;min-height:170px;padding:30px 24px}
.br-logo-stock .br-logo-art{background:var(--ground)}
.br-logo-navy .br-logo-art{background:var(--navy)}
.br-logo-art img{max-width:100%;height:auto}
.br-logo-meta{background:var(--paper);padding:16px 18px 18px;display:flex;flex-direction:column;gap:4px;font-size:15px;color:var(--ink2);flex:1}
.br-logo-meta b{color:var(--navy);font:740 17px/1.2 var(--hd)}
.br-logo-meta a{margin-top:6px}
.br-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin:56px 0 0}
.br-rule h3,.br-h3{font:740 22px/1.15 var(--hd);letter-spacing:-.02em;margin:0 0 8px;color:var(--navy)}
.br-rule p{margin:0;color:var(--ink2);font-size:16.5px}
.br-donts{list-style:none;margin:46px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.br-dont{background:var(--paper);border-radius:4px;padding:22px 20px 18px;filter:drop-shadow(0 1px 1px rgba(12,29,61,.12))}
.br-dont-art{position:relative;display:grid;place-items:center;height:96px;overflow:hidden}
.br-dont p{margin:12px 0 0;font:650 15px/1.3 var(--bd);color:var(--navy);text-align:center}
.br-x{position:absolute;inset:8px 22%;pointer-events:none}
.br-x::before,.br-x::after{content:"";position:absolute;left:50%;top:50%;width:120%;height:4px;margin-left:-60%;background:var(--err);border-radius:2px;opacity:.85}
.br-x::before{rotate:28deg}.br-x::after{rotate:-28deg}
.br-dot-wrap{position:relative;display:block}
.br-dot{position:absolute;right:-4px;bottom:-2px;width:18px;height:18px;border-radius:50%;background:var(--pay)}
.br-crop{display:block;width:64px;height:38px;overflow:hidden;border-bottom:2px dashed var(--line)}
.br-crop img{margin-top:-14px;margin-left:10px}

/* colour */
.br-swatches{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 26px}
.br-sw{position:relative;rotate:var(--r)}
.br-sw-chip{width:100%;height:120px;overflow:visible;filter:drop-shadow(0 1px 1px rgba(12,29,61,.18)) drop-shadow(0 8px 10px rgba(12,29,61,.12))}
.br-sw-txt{display:flex;flex-direction:column;gap:3px;margin-top:14px;font-size:15px;color:var(--ink2);rotate:calc(var(--r) * -1)}
.br-sw-txt b{font:740 18px/1.2 var(--hd);color:var(--navy)}

/* type */
.br-type-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;margin-top:52px}
.br-spec{position:relative;isolation:isolate;padding:44px 46px 40px;filter:drop-shadow(0 1px 1px rgba(12,29,61,.14)) drop-shadow(0 12px 16px rgba(12,29,61,.13))}
.br-spec-name{font:650 15px/1.3 var(--bd);color:var(--deep);margin:0}
.br-spec-big{font:800 clamp(40px,4.4vw,64px)/.95 var(--hd);letter-spacing:-.04em;color:var(--navy);margin:20px 0 0}
.br-spec-body{font:400 20px/1.55 var(--bd);color:var(--ink);margin:20px 0 0}
.br-spec-note{font-size:15px;color:var(--ink2);margin:22px 0 0}

/* the idea */
.br-idea-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:80px;align-items:center}
.br-idea-copy .h2{max-width:12em}
.br-idea-lede{font-size:20px;line-height:1.55;color:var(--ink2);max-width:31em;margin:22px 0 0}
.br-idea-fig{position:relative;padding:10px 30px 60px 0}
.br-idea-photo{margin:0;max-width:400px;margin-left:auto}
.br-idea-photo .photo-back{inset:-4% -8% -6% 6%}
.br-idea-note{left:-34px;bottom:18px;width:300px;z-index:3}
.br-tenets{list-style:none;margin:84px 0 0;padding:0;border-top:2px solid var(--navy)}
.br-tenet{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);gap:40px;padding:30px 0 32px;border-bottom:1.5px dashed var(--line)}
.br-tenet h3{font:760 clamp(24px,2.2vw,30px)/1.08 var(--hd);letter-spacing:-.03em;color:var(--navy);margin:0}
.br-why{margin:0;font-size:17px;color:var(--ink2)}
.br-so{margin:0;display:flex;gap:12px;font-size:17px;color:var(--ink);font-weight:500}
.br-so .ic{flex:none;width:20px;height:20px;margin-top:3px;color:var(--green)}

/* words */
.br-words{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:70px;align-items:start}
.br-line{position:relative;isolation:isolate;padding:26px 34px 30px;margin:16px 0 0;rotate:-1deg;filter:var(--sh);--z:.03}
.br-line p{font:800 clamp(28px,3.4vw,48px)/1 var(--hd);letter-spacing:-.04em;color:#fff;margin:0}
.br-line p span{color:var(--hmint)}
.br-h3{margin-top:40px}
.br-facts{list-style:none;margin:14px 0 0;padding:0;border-top:2px solid var(--navy)}
.br-facts li{padding:12px 0;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink2)}
.br-facts b{color:var(--navy)}
.br-small{font-size:15px;color:var(--ink2);margin:16px 0 0;max-width:34em}
.br-say table{width:100%;border-collapse:collapse;background:var(--paper);border-radius:4px;overflow:hidden;filter:drop-shadow(0 1px 1px rgba(12,29,61,.14)) drop-shadow(0 12px 16px rgba(12,29,61,.12))}
.br-say th{text-align:left;font:740 18px/1.2 var(--hd);color:#fff;background:var(--navy);padding:16px 22px}
.br-say th:last-child{background:var(--midnavy)}
.br-say td{padding:16px 22px;border-top:1px solid var(--line);vertical-align:top;font-size:16.5px;color:var(--ink)}
.br-h3-top{margin-top:0}
.br-about{position:relative;isolation:isolate;margin-top:14px;padding:28px 32px 30px;filter:drop-shadow(0 1px 1px rgba(12,29,61,.14)) drop-shadow(0 12px 16px rgba(12,29,61,.12))}
.br-about p{margin:0;font-size:17.5px;color:var(--ink)}
.br-say table{margin-top:14px}
.br-say td:last-child{color:var(--ink2);text-decoration:line-through;text-decoration-color:rgba(180,35,24,.6);text-decoration-thickness:2px}

/* downloads */
.br-dl{padding-bottom:120px}
.br-files{list-style:none;margin:40px 0 0;padding:0;border-top:2px solid var(--navy);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
.br-files li{border-bottom:1px solid var(--line)}
.br-files a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 2px;text-decoration:none}
.br-files a:hover span{text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px}
.br-files span{font-weight:700;color:var(--navy)}

@media (max-width: 1100px){
  .br-logos,.br-donts,.br-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .br-idea-top{grid-template-columns:1fr;gap:40px}
  .br-idea-fig{max-width:520px}
  .br-tenet{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px 32px}
  .br-tenet h3{grid-row:span 2}
  .br-hero-grid,.br-words{gap:44px}
}
@media (max-width: 719px){
  .br-hero-grid,.br-words,.br-type-grid,.br-rules,.br-files{grid-template-columns:1fr}
  .br-hero-fig{padding:10px 6px 20px}
  .br-letter{padding:38px 32px 34px}
  .br-scrap-a{width:64px;right:-6px;top:-8px}
  .br-line{padding:24px 22px 26px}
  .br-sec{padding:76px 0 24px}
  .br-swatches{gap:24px 18px}
  .br-sw-chip{height:90px}
  .br-say th,.br-say td{padding:13px 14px;font-size:15px}
  .br-files a{flex-direction:column;gap:4px}
  .br-tenet{grid-template-columns:1fr;gap:10px;padding:24px 0 26px}
  .br-tenet h3{grid-row:auto}
  .br-tenets{margin-top:56px}
  .br-idea-fig{padding:0 4px 70px}
  .br-idea-note{left:-6px;bottom:6px;width:min(280px,82%)}
  .br-idea-lede{font-size:18px}
  .br-files code{font-size:13px}
}

/* ==========================================================================
   Company pages: about-us, contact-us, get-a-quote, 404. Every selector here is
   prefixed co- (or scoped under a .co-page body class) so it can't touch other pages.
   Rotations on revealed elements use the `rotate` property, because [data-reveal]
   resets `transform` when it comes in.
   ========================================================================== */

/* ---------- shared ---------- */
.co-hero{padding:34px 0 96px;position:relative;overflow-x:clip}
.co-h1{font-size:clamp(48px,5.6vw,84px)}
.co-bg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1;pointer-events:none}
.co-page .lede{margin-top:30px}
.co-proof{margin-top:36px}
.co-band{position:relative;margin:20px 0 0}
.co-band-sheet{background:var(--pale);padding:56px 0 100px;position:relative}
.co-head p{margin-top:18px}
.co-page .co-faq .faq-list{margin-top:34px}
.co-faqsec{padding:110px 0 130px}
.co-page main a[href^="mailto:"]:not(.co-strong){font-weight:700;color:var(--navy);text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:4px}
.co-w a:not(.btn):not(.more),.co-careers a,.co-addr a,.co-page .qa p a{font-weight:700;color:var(--navy);text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:4px}
.co-w a:hover,.co-careers a:hover,.co-addr a:hover,.co-page .qa p a:hover{text-decoration-color:var(--green)}

/* paper pieces that hold text: a cut sheet stretched behind the content */
.co-w{position:relative;isolation:isolate;padding:34px 36px 32px;filter:drop-shadow(0 1px 1px rgba(12,29,61,.14)) drop-shadow(0 12px 16px rgba(12,29,61,.13))}
.co-w h3{font:740 24px/1.15 var(--hd);letter-spacing:-.02em;margin:0 0 10px;color:var(--navy);text-wrap:balance}
.co-w p{margin:0;font-size:16.5px;color:var(--ink2);text-wrap:pretty}
.co-w a[href^="tel:"]{white-space:nowrap}
.co-tape{position:absolute;top:-17px;left:50%;width:118px;margin-left:-59px;rotate:-3deg;z-index:2}
.co-tape svg{width:100%;height:auto}
.co-w-tag{padding-left:78px}
.co-hole{position:absolute;left:28px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:var(--pale);box-shadow:inset 0 2px 3px rgba(12,29,61,.32),0 0 0 4px rgba(255,255,255,.55)}
.co-string{position:absolute;left:-80px;top:calc(50% - 40px);width:120px;height:60px;overflow:visible;fill:none;stroke:var(--navy);stroke-opacity:.5;stroke-width:1.6;stroke-linecap:round;z-index:-2}

/* closing navy sheet (About) */
.co-close{position:relative;background:var(--navy);color:#fff;padding:76px 0 64px;margin-top:110px;z-index:2}
.co-close>.torn{position:absolute;left:0;right:0}
.co-close-mint{top:-84px}
.co-close-navy{top:-58px}
.co-close-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end}
.co-close h2{font:800 clamp(40px,4.8vw,72px)/.98 var(--hd);letter-spacing:-.04em;margin:0;max-width:12em;text-wrap:balance}
.co-close p{color:#d9e3f5;font-size:19px;max-width:30em;margin:22px 0 0}
.co-close :focus-visible{outline-color:var(--hmint)}
.co-close .co-close-cut{right:3%;top:-150px;width:104px}

/* ==========================================================================
   About
   ========================================================================== */
.co-ab-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:76px;align-items:start}
.co-ab-copy{padding-top:24px;position:relative;z-index:2}
.co-p{font-size:18px;color:var(--ink2);max-width:33em;margin:18px 0 0}
.co-ab-fig{position:relative;padding-top:16px}
.co-ab-photo .photo-back{position:absolute;left:5%;top:-6%;width:100%}
.co-ab-photo .cap{max-width:30em;margin:40px 0 0 6%}
.co-ab-scrap{left:-52px;top:52%;width:104px;z-index:3}

/* how we work: four pieces of paper, each a different kind */
.co-wgrid{list-style:none;margin:58px 0 0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 34px;align-items:start}
.co-w-slab{grid-column:1/8;grid-row:1/3;padding:52px 56px 54px;rotate:-.8deg;filter:drop-shadow(0 1px 1px rgba(12,29,61,.2)) drop-shadow(0 18px 22px rgba(12,29,61,.2))}
.co-w-slab h3{color:#fff;font-size:clamp(28px,2.7vw,38px);letter-spacing:-.03em;margin-bottom:16px;max-width:12em}
.co-w-slab p{color:#d6e0f3;font-size:18px;max-width:30em}
.co-w-slab .co-w-sup{margin-top:22px;padding-top:20px;border-top:1px dashed rgba(255,255,255,.28);font-size:16px;color:#c3d2ee}
.co-w-slab .co-w-sup b{color:#fff;font-weight:650}
.co-wgrid .co-w-note{grid-column:8/13;rotate:1.6deg;margin-top:14px}
.co-wgrid .co-w-tag{grid-column:8/13;rotate:-1.2deg;margin-left:20px}
.co-wgrid .co-w-slip{grid-column:2/8;rotate:-.5deg;margin-top:-6px;padding:30px 36px 32px}
.co-w-slip p,.co-w-slip h3{color:var(--navy)}

/* offices: a cut-paper map */
.co-offices{padding:120px 0 90px}
.co-off-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end}
.co-off-head p{font-size:19px;color:var(--ink2);margin:0;max-width:30em}
.co-off-head p a{font-weight:700;color:var(--navy);text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:4px;white-space:nowrap}
.co-map{position:relative;margin:60px 0 0}
.co-map-in{position:relative;z-index:1}
.co-map-art{width:100%;height:auto;overflow:visible;--z:.025;filter:var(--sh)}
.co-map .co-map-under{right:-1.8%;bottom:-7%;width:15%;z-index:0}
.co-sea{fill:var(--blue)}
.co-waves path{stroke:#fff;stroke-opacity:.55;stroke-width:3}
.co-river{fill:none;stroke:var(--blue);stroke-width:6;stroke-linecap:round}
.co-route{fill:none;stroke:var(--navy);stroke-opacity:.42;stroke-width:2.6;stroke-dasharray:1 11;stroke-linecap:round}
.co-maplbl{font:italic 600 21px var(--bd);fill:var(--navy);fill-opacity:.62}
.co-maplbl-sea{fill:#fff;fill-opacity:.92}
.co-pins{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.co-pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.co-pin-head{position:absolute;left:-15px;bottom:-2px;width:30px;filter:drop-shadow(0 5px 4px rgba(12,29,61,.3));transition:translate 1s var(--ease) calc(.55s + var(--i) * .24s),opacity .35s ease calc(.55s + var(--i) * .24s)}
.co-pin-big .co-pin-head{left:-21px;width:42px}
.co-pin-head svg{width:100%;height:auto;overflow:visible}
.co-pin-lbl{position:absolute;white-space:nowrap;background:var(--paper);padding:9px 14px 8px;box-shadow:0 1px 1px rgba(12,29,61,.14),0 10px 16px -8px rgba(12,29,61,.3);rotate:-1.5deg;transition:opacity .7s ease calc(1s + var(--i) * .24s)}
.co-pin-lbl b{display:block;font:760 19px/1.1 var(--hd);color:var(--navy);letter-spacing:-.01em}
.co-pin-lbl span{display:block;font-size:14px;color:var(--ink2);margin-top:2px}
.co-pin-liv .co-pin-lbl{left:16px;top:6px}
.co-pin-man .co-pin-lbl{left:28px;top:-74px;rotate:1.2deg}
.co-pin-shf .co-pin-lbl{left:16px;top:6px;rotate:2deg}
.js .co-map:not(.in) .co-pin-head{opacity:0;translate:0 -54px}
.js .co-map:not(.in) .co-pin-lbl{opacity:0}
.co-map .co-compass{right:3.2%;top:7%;width:46px}
.co-compass span{position:absolute;inset:0;display:grid;place-items:center;padding-top:30px;font:800 15px/1 var(--hd);color:var(--navy)}
.co-map-cap{font-size:15px;color:var(--ink2);margin:26px 0 0;max-width:46em}
.co-addr{display:flex;gap:12px;align-items:flex-start;margin-top:34px;font-size:17px}
.co-addr .ic{color:var(--deep);margin-top:3px}
.co-addr p{margin:0}

/* the two companies, on headed paper, and careers */
.co-papers{padding:40px 0 30px}
.co-papers-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:84px;align-items:center}
.co-slipwrap{position:relative;max-width:640px}
.co-letter{position:relative;isolation:isolate;padding:44px 54px 40px;rotate:-1deg;filter:drop-shadow(0 1px 1px rgba(12,29,61,.14)) drop-shadow(0 16px 20px rgba(12,29,61,.14))}
.co-letter-mark{width:150px;height:auto;margin-bottom:26px}
.co-letter-h{font:760 27px/1.15 var(--hd);margin:0 0 18px;color:var(--navy);letter-spacing:-.02em}
.co-cos{margin:0;display:grid;gap:14px}
.co-cos div{padding-top:14px;border-top:1px dashed var(--line)}
.co-cos dt{font:720 19px/1.2 var(--hd);color:var(--navy)}
.co-cos dd{margin:4px 0 0;color:var(--ink2);font-size:16px}
.co-letter-foot{margin:22px 0 0;font-size:15px;color:var(--ink2)}
.co-slipwrap .co-letter-scrap{right:-34px;top:-38px;width:104px;z-index:2}
.co-careers p{font-size:18px;color:var(--ink2);margin:0;max-width:30em}
.co-careers .co-more-links{display:flex;flex-wrap:wrap;gap:0 30px;margin-top:6px}

/* ==========================================================================
   Contact
   ========================================================================== */
/* one heading: "Ring us on" runs into the number on the same line, the number carrying the weight */
.co-contact .co-ct-h1{font:800 clamp(40px,8.2vw,120px)/.98 var(--hd);letter-spacing:-.04em;color:var(--navy)}
.co-ring{font-size:.5em;letter-spacing:-.03em;white-space:nowrap;margin-right:.08em}
.co-bignum{display:inline-block;text-decoration:none;color:var(--navy);font:inherit;letter-spacing:inherit;white-space:nowrap}
.co-bignum .in{margin-top:0}
.co-bignum:hover .strip{translate:0 -3px}
.co-bignum .strip{transition:translate .5s var(--ease)}
.co-ct-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:76px;margin-top:20px;align-items:start}
.co-ct-copy .lede{margin-top:24px}
.co-ledger{margin:36px 0 0;border-top:1.5px solid #cfc5b2}
.co-ledger>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:20px;padding:22px 0;border-bottom:1.5px solid #cfc5b2}
.co-ledger dt{display:flex;gap:10px;align-items:center;align-self:start;font:700 17px/1.4 var(--hd);color:var(--navy);padding-top:2px}
.co-ledger dt .ic{color:var(--deep)}
.co-ledger dd{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.co-ledger dd>span{color:var(--ink2);font-size:16px;max-width:30em}
.co-strong{font:760 24px/1.2 var(--hd);color:var(--navy);letter-spacing:-.01em;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:5px}
.co-strong:hover{text-decoration-color:var(--green)}
.co-ledger .co-addr-line{font-size:18px;color:var(--ink)}
.co-maplink{display:inline-flex;gap:6px;align-items:center;font-weight:700;color:var(--navy);text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:4px}
.co-maplink .ic{width:16px;height:16px;transition:translate .2s}
.co-maplink:hover .ic{translate:3px 0}

/* the envelope */
.co-ct-fig{position:relative;padding-top:42px}
.co-env{position:relative;width:100%;max-width:540px;aspect-ratio:560/360;--z:.03;filter:var(--sh);transform:rotate(var(--r))}
.co-env-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.co-env-flap{fill:none;stroke:#ddd3c1;stroke-width:1.6}
.co-stamp{position:absolute;right:5%;top:8%;width:15.5%;filter:drop-shadow(0 2px 2px rgba(12,29,61,.25));transform:rotate(var(--r))}
.co-stamp svg{width:100%;height:auto;overflow:visible}
.co-stamp img{position:absolute;left:50%;top:41%;width:50%;height:auto;translate:-50% -50%}
.co-stamp span{position:absolute;left:0;right:0;bottom:13%;text-align:center;color:#fff;font:800 clamp(10px,1vw,14px)/1 var(--hd)}
.co-postmark{position:absolute;right:15%;top:3%;width:30%;height:auto;overflow:visible;fill:none;stroke:var(--navy);stroke-opacity:.42;stroke-width:2;pointer-events:none}
.co-postmark text{fill:var(--navy);fill-opacity:.55;stroke:none;font:700 11px var(--bd);letter-spacing:.14em}
.co-postmark .co-pm-yr{font:800 19px var(--hd);letter-spacing:0}
.co-env-addr{position:absolute;left:24%;top:44%;font:500 clamp(13px,1.45vw,19px)/1.45 var(--bd);font-style:normal;color:var(--navy)}
.co-env-addr b{font-weight:700}
.co-ct-fig .co-env-scrap{left:-28px;top:auto;bottom:-34px;width:110px;z-index:2}

/* the form band (contact and quote) */
.co-ct-form-grid{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:84px;align-items:start}
.co-ct-form-copy{padding-top:20px}
.co-ct-form-copy>p{font-size:18px;color:var(--ink2);max-width:30em;margin:20px 0 0}
.co-ct-form-copy>p .more{margin:6px 16px 0 0;font-size:16px}
.co-ct-tag{margin-top:48px;max-width:480px;rotate:-1deg}
.co-ct-tag h3{display:flex;gap:10px;align-items:center}
.co-ct-tag h3 .ic{color:var(--deep);width:22px;height:22px}
.co-ct-tag .co-hole{background:var(--pale)}
.co-formstack{position:relative}
.co-formstack .qcard{width:auto}
.co-formstack .co-fs-blue{right:-64px;top:-44px;width:300px;z-index:0}
.co-formstack .co-fs-mint{left:-74px;top:170px;width:520px;z-index:0}
.co-legal-links{display:flex;flex-wrap:wrap;gap:8px 28px;margin:44px 0 0;font-size:15.5px}
.co-legal-links a{color:var(--ink2)}
.co-legal-links a:hover{color:var(--navy);text-decoration-color:var(--mint)}

/* ==========================================================================
   Get a quote
   ========================================================================== */
.co-gq-hero{padding-bottom:110px}
.co-gq-grid{display:grid;grid-template-columns:minmax(0,1fr) 440px;grid-template-areas:"head form" "side form";column-gap:110px;row-gap:46px;align-items:start}
.co-gq-head{grid-area:head;padding-top:22px}
.co-gq-form{grid-area:form}
.co-gq-side{grid-area:side}
.co-gq-h1{font-size:clamp(48px,5.4vw,82px)}
.co-gq-side .co-proof{margin-top:44px}

/* an example bill, with the S box picked out */
.co-bill{max-width:470px}
.co-bill-sheet{position:relative;isolation:isolate;padding:26px 32px 32px;filter:drop-shadow(0 1px 1px rgba(12,29,61,.14)) drop-shadow(0 14px 18px rgba(12,29,61,.14));transform:rotate(var(--r))}
.co-bill-top{display:flex;justify-content:space-between;align-items:center}
.co-bill-logo{width:96px;height:14px;background:#ddd3c1;border-radius:2px}
.co-bill-ex{font:750 13px/1 var(--bd);letter-spacing:.09em;text-transform:uppercase;color:var(--deep);border:1.5px solid var(--deep);padding:5px 8px 4px;border-radius:3px;rotate:4deg}
.co-bill-h{font:720 18px/1.2 var(--hd);margin:18px 0 8px;color:var(--navy)}
.co-bill-lines i{display:block;height:7px;background:#e9e1d2;border-radius:2px;margin:9px 0;width:78%}
.co-bill-lines i:nth-child(2){width:58%}
.co-bill-lines i:nth-child(3){width:68%}
.co-mpan{position:relative;isolation:isolate;display:flex;align-items:stretch;margin:28px 0 4px 6px;width:max-content;max-width:100%}
.co-mpan .co-mpan-hl{inset:auto;left:-18px;top:-12px;width:calc(100% + 36px);height:calc(100% + 24px);rotate:-1.2deg}
.co-mpan-s{display:grid;place-items:center;width:46px;border:2px solid var(--navy);font:800 26px/1 var(--hd);color:var(--navy);background:#fff}
.co-mpan-grid{display:grid;grid-template-columns:auto auto auto;border:2px solid var(--navy);border-left:0;background:#fff}
.co-mpan-grid span{padding:7px 12px;font:600 17px/1.2 var(--bd);font-variant-numeric:tabular-nums;color:var(--navy);border-left:1px solid #b9ae98;white-space:nowrap}
.co-mpan-grid span:nth-child(-n+3){border-bottom:1px solid #b9ae98}
.co-bill-cap{margin:30px 0 0;font-size:15.5px;line-height:1.55;color:var(--ink2);max-width:30em}
.co-bill-cap b{color:var(--navy)}

/* what happens next: a three-panel leaflet that unfolds */
/* side margins cancel the perspective, so the outer folds line up with the content grid */
.co-fold{list-style:none;margin:58px 19px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));perspective:1700px;filter:drop-shadow(0 1px 1px rgba(12,29,61,.14)) drop-shadow(0 18px 22px rgba(12,29,61,.15))}
.co-panel{position:relative;background:var(--paper);padding:40px 38px 46px;transition:transform 1.5s cubic-bezier(.2,.8,.2,1) .15s}
.co-panel::after{content:"";position:absolute;inset:0;pointer-events:none}
.co-panel:nth-child(1){transform-origin:100% 50%;transform:rotateY(9deg)}
.co-panel:nth-child(1)::after{background:linear-gradient(90deg,rgba(12,29,61,0) 55%,rgba(12,29,61,.07))}
.co-panel:nth-child(2)::after{background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(12,29,61,.03))}
.co-panel:nth-child(3){transform-origin:0 50%;transform:rotateY(-9deg)}
.co-panel:nth-child(3)::after{background:linear-gradient(90deg,rgba(12,29,61,.09),rgba(12,29,61,0) 45%)}
.js .co-fold:not(.in) .co-panel:nth-child(1){transform:rotateY(84deg)}
.js .co-fold:not(.in) .co-panel:nth-child(3){transform:rotateY(-84deg)}
.co-num{display:block;font:800 66px/1 var(--hd);color:var(--deep);letter-spacing:-.04em;margin:0 0 18px}
.co-panel h3{font:740 24px/1.15 var(--hd);letter-spacing:-.02em;margin:0 0 10px;color:var(--navy)}
.co-panel p{margin:0;color:var(--ink2);font-size:16.5px}
.co-secure{margin-top:56px}

.co-gq-proof{padding:110px 0 130px}
.co-gq-proof-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:80px;align-items:start;margin-bottom:100px}
.co-sup{font:500 clamp(19px,1.8vw,24px)/1.5 var(--bd);color:var(--ink2);margin:28px 0 0;max-width:34em;text-wrap:pretty}
.co-sup b{color:var(--navy);font-weight:650}
.co-gq-badges{display:grid;gap:44px;justify-items:start;padding-top:10px}
.co-gq-badges .co-tp{margin:0}
.co-also{padding:30px 36px 28px;rotate:1.2deg;max-width:420px}
.co-also h3{color:var(--navy)}
.co-also p{color:var(--navy)}
.co-also-links{display:flex;flex-wrap:wrap;gap:0 24px}
.co-also .more{margin-top:12px}
.co-back{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;margin:40px 0 0;color:var(--ink2)}
.co-back .more{margin-top:0}
.co-back span a{font-weight:700;color:var(--navy);text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:4px}

/* ==========================================================================
   404: this page has been cut out
   ========================================================================== */
.co-404{padding:44px 0 150px;position:relative}
.co-404-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"copy art" "nav art";column-gap:72px;align-items:start}
.co-404-copy{grid-area:copy;padding-top:40px}
.co-404-h1{font-size:clamp(46px,5.4vw,80px);max-width:8.5em}
.co-404-art{grid-area:art;position:relative;width:100%;max-width:640px;aspect-ratio:560/460;margin:16px 0 60px;justify-self:end}
.co-404-under{position:absolute;left:21%;top:15%;width:56%;height:63%;background:var(--navy);display:grid;place-items:center}
.co-404-under span{font:800 clamp(60px,8.6vw,132px)/1 var(--hd);color:var(--hmint);letter-spacing:-.04em;margin-top:-.08em}
.co-404-sheet{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1px 1px rgba(12,29,61,.16)) drop-shadow(0 8px 14px rgba(12,29,61,.18))}
.co-404-guide{fill:none;stroke:var(--navy);stroke-opacity:.38;stroke-width:1.6;stroke-dasharray:7 6}
.co-404-scrawl path,.co-404-ghost path{fill:none;stroke:#e6ddcc;stroke-width:9;stroke-linecap:round}
.co-404-ghost path:first-child{stroke:#cfdbee;stroke-width:16}
.co-404-piece{position:absolute;width:51%;right:-9%;bottom:-17%;--z:.05;filter:var(--sh);transform:rotate(var(--r));z-index:2}
.co-404-piece svg{width:100%;height:auto;overflow:visible}
.co-404-nav{grid-area:nav}
.co-404-links{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 30px;max-width:540px}
.co-404-links a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 2px;border-bottom:1.5px solid #cfc5b2;font:700 17px/1.25 var(--hd);color:var(--navy);text-decoration:none}
.co-404-links a .ic{width:18px;height:18px;color:var(--deep);transition:translate .2s}
.co-404-links a:hover{text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:5px}
.co-404-links a:hover .ic{translate:4px 0}
.co-404-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.co-404-help{font-size:15.5px;color:var(--ink2);margin:22px 0 0;max-width:30em}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1099px){
  .co-ab-grid,.co-ct-grid,.co-papers-grid,.co-gq-proof-grid,.co-off-head{grid-template-columns:1fr;gap:48px}
  .co-ab-fig{max-width:620px}
  .co-ct-fig{max-width:560px}
  .co-wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .co-w-slab{grid-column:1/-1;grid-row:auto}
  .co-wgrid .co-w-note,.co-wgrid .co-w-tag,.co-wgrid .co-w-slip{grid-column:auto;margin:0}
  .co-wgrid .co-w-slip{grid-column:1/-1;max-width:640px}
  .co-ct-form-grid{grid-template-columns:1fr;gap:56px}
  .co-ct-form-grid .co-formstack{max-width:460px}
  .co-gq-grid{grid-template-columns:1fr;grid-template-areas:"head" "form" "side";row-gap:44px}
  .co-gq-form{max-width:480px}
  .co-404-grid{grid-template-columns:1fr;grid-template-areas:"copy" "art" "nav"}
  .co-404-art{justify-self:start;max-width:560px;margin:30px 0 70px}
}
@media (max-width:719px){
  .co-hero{padding:10px 0 64px}
  .co-h1,.co-gq-h1{font-size:clamp(40px,12.2vw,56px)}
  .co-page .lede{margin-top:22px}
  .co-p{font-size:16.5px}
  .co-ab-scrap{left:auto;right:-26px;top:-18px;width:76px}
  .co-ab-photo .cap{margin-left:0}
  .co-band-sheet{padding:44px 0 76px}
  .co-wgrid{grid-template-columns:1fr;gap:30px;margin-top:40px}
  .co-w{padding:30px 28px 28px}
  .co-w-slab{padding:38px 28px 40px}
  .co-w-slab p{font-size:16.5px}
  .co-w-tag{padding-left:62px}
  .co-hole{left:22px}
  .co-string{display:none}
  .co-wgrid .co-w-slip{padding:28px 28px 30px}
  .co-offices{padding:80px 0 60px}
  .co-off-head p{font-size:17px}
  .co-map{margin-top:40px}
  .co-maplbl{font-size:28px}
  .co-maplbl:not(.co-maplbl-sea){display:none}
  .co-pin-head{left:-11px;width:22px}
  .co-pin-big .co-pin-head{left:-15px;width:30px}
  .co-pin-lbl{padding:5px 8px 4px}
  .co-pin-lbl b{font-size:14px}
  .co-pin-lbl span{display:none}
  .co-pin-liv .co-pin-lbl{left:10px;top:4px}
  .co-pin-man .co-pin-lbl{left:16px;top:-50px}
  .co-pin-shf .co-pin-lbl{left:auto;right:12px;top:4px}
  .co-map .co-compass{width:28px}
  .co-compass span{font-size:13px;padding-top:18px}
  .co-addr{font-size:16px}
  .co-papers{padding:20px 0 10px}
  .co-letter{padding:34px 26px 30px}
  .co-letter-h{font-size:23px}
  .co-slipwrap .co-letter-scrap{right:-18px;top:-30px;width:70px}
  .co-careers p{font-size:16.5px}
  .co-faqsec{padding:80px 0 100px}
  .co-close{padding:64px 0 46px;margin-top:90px}
  .co-close-in{grid-template-columns:1fr;gap:32px}
  .co-close .co-close-cut{right:-18px;top:-112px;width:78px}
  .co-close .cta-btns{align-items:flex-start}

  .co-contact .co-ct-h1{font-size:clamp(38px,10.6vw,46px);line-height:1.02}
  .co-ring{display:block;font-size:1em;letter-spacing:-.04em}
  .co-ledger>div{grid-template-columns:1fr;gap:8px;padding:18px 0}
  .co-strong{font-size:21px}
  .co-ct-fig{padding-top:20px}
  .co-ct-fig .co-env-scrap{left:-16px;bottom:-26px;width:72px}
  .co-ct-form-copy{padding-top:0}
  .co-ct-form-copy>p{font-size:16.5px}
  .co-ct-tag{padding:28px 26px 28px 58px}
  .co-formstack .co-fs-blue{right:-34px;top:-30px;width:220px}
  .co-formstack .co-fs-mint{left:-26px;top:150px;width:100%}

  .co-gq-hero{padding-bottom:70px}
  .co-gq-head{padding-top:0}
  .co-quote .talk{display:flex}
  .co-bill-sheet{padding:22px 20px 26px}
  .co-mpan{margin-left:4px}
  .co-mpan-s{width:36px;font-size:21px}
  .co-mpan-grid span{padding:6px 8px;font-size:14.5px}
  .co-fold{grid-template-columns:1fr;perspective:none;margin:40px 0 0}
  .co-panel,.co-panel:nth-child(n),.js .co-fold:not(.in) .co-panel:nth-child(n){transform:none}
  .co-panel{padding:30px 26px 32px}
  .co-panel+.co-panel{border-top:1.5px dashed var(--line)}
  .co-panel::after{display:none}
  .co-num{font-size:52px;margin-bottom:12px}
  .co-secure{margin-top:40px}
  .co-gq-proof{padding:80px 0 100px}
  .co-gq-proof-grid{margin-bottom:70px}
  .co-also{padding:30px 28px 28px}

  .co-404{padding:16px 0 100px}
  .co-404-copy{padding-top:0}
  .co-404-h1{font-size:clamp(40px,12vw,56px)}
  .co-404-art{margin:26px 0 64px;width:92%}
  .co-404-piece{right:-12%;bottom:-18%}
  .co-404-links{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .co-pin-head,.co-pin-lbl,.co-panel,.co-bignum .strip,.co-maplink .ic,.co-404-links a .ic{transition:none}
  .js .co-map:not(.in) .co-pin-head{opacity:1;translate:none}
  .js .co-map:not(.in) .co-pin-lbl{opacity:1}
  .js .co-fold:not(.in) .co-panel:nth-child(1){transform:rotateY(9deg)}
  .js .co-fold:not(.in) .co-panel:nth-child(3){transform:rotateY(-9deg)}
}
@media (prefers-reduced-motion:reduce) and (max-width:719px){
  .js .co-fold:not(.in) .co-panel:nth-child(n){transform:none}
}

/* ==========================================================================
   Cookie banner: a paper note pinned to the bottom of the screen.
   Shared by the static pages (site.js builds it) and the Next.js landing pages
   (src/components/shared/CookieConsent.tsx, which imports this file through the root layout).
   ========================================================================== */
.ck{position:fixed;left:24px;bottom:24px;z-index:80;width:min(560px,calc(100vw - 48px))}
.ck-card{position:relative;background:var(--paper);color:var(--ink);border:1px solid rgba(12,29,61,.1);border-radius:6px;padding:22px 24px 20px;box-shadow:0 1px 2px rgba(12,29,61,.1),0 24px 48px -18px rgba(12,29,61,.38);max-height:calc(100vh - 48px);overflow:auto}
.ck-card:focus{outline:none}
.ck-card::before{content:"";position:absolute;top:-9px;left:28px;width:96px;height:20px;background:var(--mint);opacity:.88;transform:rotate(-2.5deg);clip-path:polygon(3% 12%,97% 0,95% 52%,100% 92%,2% 100%,6% 50%)}
.ck-text{margin:0;font-size:16px;line-height:1.5;color:var(--ink2)}
.ck-text a,.ck-row a{color:var(--navy);font-weight:650;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:3px}
.ck-btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.ck-btn{padding:12px 18px;font-size:15.5px}
.ck-link{background:none;border:0;padding:8px 4px;font:650 15.5px var(--bd);color:var(--deep);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.ck-title{font:760 22px/1.15 var(--hd);letter-spacing:-.02em;margin:0 0 8px;color:var(--navy)}
.ck-list{list-style:none;margin:0;padding:0}
.ck-list li{border-top:1px dashed var(--line)}
.ck-list li:first-child{border-top:0}
.ck-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:12px 0;cursor:pointer}
.ck-row b{display:block;font-weight:650;color:var(--navy);font-size:15.5px}
.ck-row span span{display:block;font-size:14.5px;line-height:1.45;color:var(--ink2);margin-top:2px}
.ck-row input{appearance:none;-webkit-appearance:none;flex:none;width:44px;height:26px;border-radius:999px;background:#cfc5b2;position:relative;cursor:pointer;margin:2px 0 0;transition:background-color .2s}
.ck-row input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(12,29,61,.25);transition:transform .2s}
.ck-row input:checked{background:var(--green)}
.ck-row input:checked::after{transform:translateX(18px)}
.ck-row input:disabled{opacity:.6;cursor:not-allowed}
.ck-row input:focus-visible{outline:3px solid var(--deep);outline-offset:2px}
/* phones: a slim bar along the bottom edge, so the hero's postcode box stays in view until a choice
   is made. The three choices are equal: one row, the same size, each at least 44px to tap. */
@media (max-width:719px){
  .ck{left:0;right:0;bottom:0;width:auto}
  .ck-card{border-radius:0;border-width:1px 0 0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));max-height:72vh;box-shadow:0 -10px 28px -14px rgba(12,29,61,.34)}
  .ck-card::before{display:none}
  .ck-text{font-size:13.5px;line-height:1.4}
  .ck-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
  .ck-btn,.ck-link{min-height:44px;padding:6px 8px;font:650 14px/1.15 var(--bd);white-space:normal;text-align:center;border-radius:999px}
  .ck-btns .btn-ghost{background:var(--navy);border-color:var(--navy);color:#fff}
  .ck-link{display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--navy);color:var(--navy);text-decoration:none}
  .ck-title{font-size:19px;margin-bottom:4px}
  .ck-row{padding:9px 0}
  .ck-text a{padding-block:12px}
}
@media (prefers-reduced-motion:reduce){.ck-row input,.ck-row input::after{transition:none}}
@media print{.ck{display:none}}
/* the cookie policy's "Change your cookie settings" button (static site only; needs JavaScript) */
.lg-ck-wrap{margin:22px 0 0}
.lg-ck{display:none}
.js .lg-ck{display:inline-flex}

/* ==========================================================================
   Energy pages: /business-energy, /business-electricity, /business-gas
   Everything here is scoped under body.en (set by the three page modules).
   ========================================================================== */
.en .f-ink{fill:var(--navy)}
.en .f-roll{fill:#d6ccb9}
.en .sheet{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.en b{font-weight:700;color:var(--navy)}

/* number markers cut from paper */
.en .en-mk{position:relative;display:inline-block;width:48px;height:44px;flex:none}
.en .en-mk .cut{inset:0;width:100%;--z:.01}
.en .en-mk .n{position:absolute;inset:0;display:grid;place-items:center;font:800 22px/1 var(--hd);color:#fff;letter-spacing:-.03em;padding-top:2px}
.en .en-mk.on-mint .n{color:var(--navy)}

/* ---------- hero ---------- */
.en-hero{padding:26px 0 96px;overflow:hidden}
.en-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:64px;align-items:start}
.en-hero-copy{position:relative;z-index:2;padding-top:6px}
.en .en-h1{font-size:clamp(44px,4.9vw,72px);line-height:.98;max-width:12.5em}
.en-hub .en-h1{font-size:clamp(48px,5.6vw,84px)}
.en-hero .lede{margin-top:28px;max-width:32em}
.en-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.en-hero .proof{margin-top:38px}
.en-hero-art{position:relative;height:640px}
.en-hero-art .eh-back{left:20px;top:4px;width:400px;--z:.04}
.en-hero-art .eh-photo{position:absolute;left:66px;top:34px;width:340px;z-index:1}
.en-hero-art .eh-scrap{right:6px;top:18px;width:120px;z-index:2}
.en-hero-art .eh-note{left:-40px;bottom:0;width:380px;z-index:3}
.el-art .eh-back{left:6px;top:10px;width:420px}
.el-art .eh-photo{left:44px;top:30px;width:380px}
.el-art .eh-scrap{right:-6px;top:300px}
.el-art .eh-note{bottom:-10px}

/* ---------- what a fixed price fixes ---------- */
.en-fixed{padding:110px 0 120px}
.en-fixed-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:90px;align-items:start}
.en-fixed-copy .h2{max-width:13em;margin-bottom:28px}
.en-fixed-copy p{font-size:18px;color:var(--ink2);max-width:34em;margin:0 0 18px}
.en-fixed-note{position:relative;padding:44px 40px 34px;transform:rotate(1.4deg);filter:var(--sh);--z:.035;margin-top:30px}
.en-fixed-note h3{position:relative;font:760 24px/1.15 var(--hd);letter-spacing:-.02em;margin:0 0 14px;color:var(--navy)}
.en-fixed-note dl{position:relative;margin:0}
.en-fixed-note dl div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px dashed var(--line);font-size:16px}
.en-fixed-note dt{font-weight:700;color:var(--navy)}
.en-fixed-note dd{margin:0;color:var(--ink2);text-align:right}
.en .en-tape{position:absolute;top:-17px;left:50%;width:120px;margin-left:-60px;transform:rotate(-3deg);z-index:2}
.en .en-tape svg{width:100%;height:auto}

/* ---------- end dates: the contract timeline ---------- */
.en-dates{position:relative;margin-top:10px}
.en-dates-sheet{background:var(--pale);padding:64px 0 100px}
.en-dates-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:70px;align-items:start}
.en-dates-head p{margin:0 0 14px;font-size:18px;color:var(--ink2);max-width:34em}
.en-tl{margin:70px 0 0}
.tl-board{position:relative;height:290px}
.tl-years{position:absolute;left:0;right:0;top:0;height:270px;display:grid;grid-template-columns:24.3% 24.3% 24.3% 1fr;font:650 14px/1 var(--bd);color:var(--ink2)}
.tl-years span{border-left:1.5px dashed #b6c4da;padding:2px 0 0 10px}
.tl-years .tl-after{border-left:0;padding-left:30px}
.tl-piece{position:absolute;display:flex;align-items:center;filter:var(--sh);--z:.02;transform:rotate(var(--r,0deg))}
.tl-lbl{position:relative;z-index:1;padding:4px 22px 0;font:650 16px/1.3 var(--bd);text-wrap:balance}
.tl-fixed{left:0;width:73%;top:164px;height:66px;--r:-.4deg}
.tl-fixed .tl-lbl{color:#fff;font-size:17px}
.tl-window{left:48.6%;width:24.4%;top:76px;height:80px;--r:1.2deg;--z:.03}
.tl-window .tl-lbl{color:var(--navy);font-weight:500;font-size:15.5px;padding:6px 18px 0}
.tl-window .tl-lbl b{display:block}
.tl-end{left:72.4%;top:26px;height:250px;width:130px;align-items:flex-start;filter:none}
.tl-end .tl-pole{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--navy);border-radius:2px;box-shadow:1px 2px 2px rgba(12,29,61,.2)}
.tl-end .sheet{inset:auto;left:2px;top:0;width:118px;height:42px;filter:var(--sh)}
.tl-end .tl-lbl{color:#fff;padding:10px 0 0 16px;font:760 15px/1 var(--hd);letter-spacing:-.01em}
.tl-next{left:74.4%;width:25.6%;top:100px;height:auto;min-height:56px;--r:-.8deg}
.tl-next .tl-lbl{color:var(--navy);font-size:15px;padding:16px 24px 14px 28px}
.tl-roll{left:74.6%;width:25.4%;top:194px;height:auto;min-height:74px;--r:3deg;--z:.008}
.tl-roll .tl-lbl{color:#4a4436;font-size:15px;padding:18px 26px 16px 28px}
.tl-cap{margin:22px 0 0;font-size:14.5px;color:var(--ink2)}
/* laid down piece by piece when it scrolls in */
.js .en-tl .tl-piece{opacity:0;transform:translate(-14px,-12px) rotate(calc(var(--r,0deg) + 3deg));transition:opacity .6s ease,transform 1s var(--ease),clip-path 1.4s cubic-bezier(.45,.1,.2,1);transition-delay:calc(.25s + var(--k,0) * .38s)}
.js .en-tl .tl-fixed{opacity:1;transform:rotate(var(--r));clip-path:inset(-24px 100% -24px -24px)}
.js .en-tl.in .tl-piece{opacity:1;transform:rotate(var(--r,0deg))}
.js .en-tl.in .tl-fixed{clip-path:inset(-24px -24px -24px -24px)}
.tl-window{--k:2}.tl-end{--k:3}.tl-next{--k:4.2}.tl-roll{--k:5}
.en-dates-foot{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:56px}
.en-dates-foot p{margin:0;font-size:17px;color:var(--ink2);max-width:32em}

/* ---------- electricity and gas routes (hub) ---------- */
.en-routes{padding:120px 0 90px}
.en-route-grid{display:grid;gap:90px;margin-top:64px}
.en-route{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}
.en-route-copy p{font-size:18px;color:var(--ink2);max-width:30em;margin:0}
.en-route-art{position:relative;height:330px}
.en-route-art .rt-back{left:6%;top:0;width:78%;--z:.02}
.en-route.el .rt-back{width:86%;left:2%;top:10px}
.rt-sbox{position:absolute;left:12%;top:70px;width:400px;max-width:84%;aspect-ratio:400/228;transform:rotate(-2.5deg);filter:var(--sh);--z:.035}
.rt-sgrid{position:absolute;left:12%;right:12%;top:22%;bottom:22%;display:grid;grid-template-columns:auto 1fr 1fr 1fr;border:2px solid var(--navy);font:700 clamp(15px,1.6vw,20px)/1 var(--bd);font-variant-numeric:tabular-nums;color:var(--navy)}
.rt-sgrid span{display:grid;place-items:center;padding:6px 4px;white-space:nowrap;border-left:1.5px solid rgba(12,29,61,.35)}
.rt-sgrid span:nth-child(n+5){border-top:1.5px solid rgba(12,29,61,.35)}
.rt-sgrid .s{grid-row:span 2;border-left:0;font:800 clamp(26px,3vw,38px)/1 var(--hd);padding:0 14px}
.rt-ex{position:absolute;right:-10px;top:-14px;background:var(--mint);color:var(--navy);font:700 13px/1 var(--bd);padding:7px 12px 6px;transform:rotate(5deg);clip-path:polygon(3% 6%,98% 0,100% 90%,1% 100%)}
.en .flame-wrap.rt-flame{position:absolute;left:calc(50% - 90px);top:10px;right:auto;bottom:auto;width:170px}

/* ---------- what we check ---------- */
.en-check{padding:110px 0}
.en-check-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:start}
.en-check-head p{font-size:18px;color:var(--ink2);margin:22px 0 0;max-width:28em}
.en-check-paper{position:relative;padding:52px 48px 40px;filter:var(--sh);--z:.03;transform:rotate(-.8deg)}
.en-check-paper ul{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 36px}
.en-check-paper li{display:flex;gap:12px;padding:14px 0;border-top:1px dashed var(--line);font-size:16.5px;line-height:1.45;color:var(--ink2)}
.en-check-paper li:nth-child(-n+2){border-top:0}
.en-check-paper li .ic{color:var(--green);margin-top:2px}
.en-check-paper b{display:block}

/* ---------- switch steps (electricity, gas) ---------- */
.en-switch{padding:40px 0 110px}
.en-switch-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:start}
.en-switch-head{position:sticky;top:30px}
.en-switch-head p{font-size:18px;color:var(--ink2);margin:22px 0 0;max-width:28em}
.en-steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.en-step{display:grid;grid-template-columns:60px minmax(0,1fr);gap:18px;padding:22px 0;border-top:1.5px solid #ddd3c1}
.en-step:last-child{border-bottom:1.5px solid #ddd3c1}
.en-step:nth-child(2n) .en-mk{margin-left:8px}
.en-step h3{font:740 21px/1.2 var(--hd);letter-spacing:-.02em;margin:4px 0 6px;color:var(--navy)}
.en-step p{margin:0;color:var(--ink2);font-size:16.5px;max-width:36em}
.en-step .who{display:inline-block;vertical-align:3px;margin-left:8px;padding:5px 10px 4px;font:700 13px/1 var(--bd);letter-spacing:.01em;background:var(--pale);color:var(--navy);transform:rotate(-2deg);clip-path:polygon(4% 4%,97% 0,100% 94%,0 100%)}
.en-step.you .who{background:var(--mint)}
.js .en-step[data-reveal]{transition-delay:calc(var(--i,0) * 90ms)}

/* ---------- small cross-links ---------- */
.en-also{padding:0 0 30px}
.en-also-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:34px 0;border-top:1.5px solid #cfc5b2;border-bottom:1.5px solid #cfc5b2}
.en-also p{margin:0;font-size:17px;color:var(--ink2)}
.en-also .more{margin-top:10px;display:flex;width:max-content}

/* ---------- questions ---------- */
.en-faq{padding:110px 0 150px}
.en-faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:70px;align-items:start}
.en-faq-head p{font-size:17.5px;color:var(--ink2);margin:20px 0 0;max-width:22em}
.en-faq-head a{font-weight:700;color:var(--navy);text-decoration-color:var(--mint);text-decoration-thickness:2px}
.en-faq .faq-list{margin-top:6px}

/* ---------- closing quote panel ---------- */
.en-close{position:relative;background:var(--navy);color:#fff;padding:80px 0 64px;z-index:2}
.en-close>.torn{position:absolute;left:0;right:0}
.en-close>.en-torn-mint{top:-84px}
.en-close>.en-torn-navy{top:-56px}
.en-close-grid{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:90px;align-items:start}
.en-close-h{font:800 clamp(40px,4.6vw,68px)/.98 var(--hd);letter-spacing:-.04em;margin:0;max-width:11em;text-wrap:balance}
.en-close-h span{display:block;color:var(--hmint)}
.en-close-copy>p{font-size:19px;color:#d9e3f5;max-width:30em;margin:26px 0 0}
.en-close .en-send{list-style:none;margin:30px 0 0;padding:0;max-width:34em}
.en-close .en-send li{display:flex;gap:12px;padding:13px 0;border-top:1px solid rgba(255,255,255,.14);font-size:16.5px;color:#d9e3f5}
.en-close .en-send .ic{color:var(--hmint);margin-top:2px}
.en-close-call{display:flex;align-items:center;gap:10px;margin:28px 0 0;font-size:18px;color:#d9e3f5}
.en-close-call .ic{color:var(--hmint)}
.en-close-call a{color:#fff;font-weight:700;text-decoration-color:var(--hmint);text-decoration-thickness:2px;text-underline-offset:4px}
.en-close :focus-visible{outline-color:var(--hmint)}
.en-close-form{position:relative}
.en-close-mint{left:-70px;top:90px;width:540px;z-index:0}
.en-close .qcard{width:auto;z-index:3}

/* ==========================================================================
   Electricity: the annotated example bill
   ========================================================================== */
.el-pylons{margin:-30px 0 0}
.el-read{padding:90px 0 120px}
.el-read-head{max-width:760px}
.bill-wrap{display:grid;grid-template-columns:540px minmax(0,1fr);gap:80px;align-items:start;margin-top:64px}
.bill-fig{position:relative}
.bill{position:relative;padding:46px 46px 42px;filter:var(--sh);--z:.045;transform:rotate(-1.2deg)}
.bill-in{position:relative;z-index:1;font-size:15px;line-height:1.45;color:var(--ink)}
.bill-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.bill-sup{display:grid;grid-template-columns:30px auto;column-gap:12px;margin:0;align-items:center}
.bill-logo{grid-row:span 2;width:28px;height:28px;background:var(--blue);clip-path:polygon(50% 0,100% 30%,88% 100%,10% 92%,0 28%)}
.bill-sup b{font:760 18px/1.1 var(--hd);letter-spacing:-.01em}
.bill-sup span:last-child{font-size:13.5px;color:var(--ink2)}
.bill-stamp{display:inline-block;padding:8px 14px 7px;border:2.5px solid var(--green);color:var(--green);font:800 15px/1 var(--hd);letter-spacing:.02em;transform:rotate(7deg);border-radius:4px;opacity:.9}
.bill-acct{display:flex;flex-wrap:wrap;gap:8px 28px;margin:22px 0 0;padding:14px 0 0;border-top:1px dashed var(--line)}
.bill-acct div{min-width:0}
.bill-acct dt{font-size:13px;color:#5d6679}
.bill-acct dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums}
.bill-sec{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.bill-h{margin:0 0 8px;font-weight:700;font-size:13px;color:#5d6679}
.bill-sbox{display:inline-grid;grid-template-columns:auto auto auto auto;border:2px solid var(--navy);font:700 19px/1 var(--bd);font-variant-numeric:tabular-nums;color:var(--navy);background:var(--paper)}
.bill-sbox span{padding:9px 12px 8px;border-left:1.5px solid rgba(12,29,61,.35);text-align:center;white-space:nowrap}
.bill-sbox span:nth-child(n+5){border-top:1.5px solid rgba(12,29,61,.35)}
.bill-sbox .s{grid-row:span 2;border-left:0;display:grid;place-items:center;font:800 32px/1 var(--hd);padding:0 14px}
.bill-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:8px 0}
.bill-row>div{margin:0}
.bill-row .sub{display:block;font-size:14px;color:var(--ink2);margin-top:3px}
.bill-row .amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.bill-total{border-top:1px solid var(--line);margin-top:4px;font-weight:700}
.bill-small{margin:4px 0 0;font-size:13px;color:#5d6679}
.bill-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bill-big{margin:0;font:760 19px/1.2 var(--hd);letter-spacing:-.01em;color:var(--navy)}
.bill-mark{position:relative;isolation:isolate}
.bill-mark .hl{position:absolute;inset:-6px -10px;z-index:-1;transform:rotate(var(--r,0deg));opacity:.9}
.m-sbox{display:inline-block}
.m-sbox .hl{inset:-10px -14px}
.m-inline{display:inline-block;white-space:nowrap;margin-left:6px}
.m-inline .hl{inset:-3px -6px -3px -5px}
.m-inline b{color:var(--navy)}
.m-block{display:block;padding:22px 20px 18px;margin:0 -10px}
.m-block .hl{inset:0}
.bill-pin{position:absolute;z-index:2;width:38px;height:35px;right:-30px;top:-22px}
.bill-pin .en-mk{width:100%;height:100%}
.bill-pin .en-mk .n{font-size:18px}
.m-inline .bill-pin{right:-40px;top:50%;margin-top:-18px;width:34px;height:31px}
.m-inline .bill-pin .en-mk .n{font-size:16px}
.m-block .bill-pin{right:-12px;top:-20px}
.bill-cap{margin:30px 0 0;font-size:14.5px;color:var(--ink2);max-width:34em}
.bill-notes{list-style:none;margin:0;padding:10px 0 0;display:grid;gap:30px}
.bill-notes li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;align-items:start}
.bill-notes h3{font:740 22px/1.2 var(--hd);letter-spacing:-.02em;margin:6px 0 6px;color:var(--navy)}
.bill-notes p{margin:0;color:var(--ink2);font-size:16.5px;max-width:34em}
/* the strips and pins are laid on one by one when the bill scrolls in */
.js .bill-fig .hl{transform:rotate(var(--r,0deg)) scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease);transition-delay:calc(.55s + var(--i,0) * .42s)}
.js .bill-fig.in .hl{transform:rotate(var(--r,0deg)) scaleX(1)}
.js .bill-fig .bill-pin{opacity:0;transform:translate(10px,-16px) rotate(14deg) scale(1.08);transition:opacity .45s ease,transform .8s var(--ease);transition-delay:calc(.85s + var(--i,0) * .42s)}
.js .bill-fig.in .bill-pin{opacity:1;transform:none}
.js .bill-notes li[data-reveal]:nth-child(2){transition-delay:.08s}
.js .bill-notes li[data-reveal]:nth-child(3){transition-delay:.16s}
.js .bill-notes li[data-reveal]:nth-child(4){transition-delay:.24s}
.js .bill-notes li[data-reveal]:nth-child(5){transition-delay:.32s}

/* how a price is made up (also the gas MPRN band) */
.en-price,.gas-mprn{position:relative;margin:20px 0}
.en .en-band{background:var(--pale);padding:70px 0 100px}
.en-price-grid{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:80px;align-items:start}
.en-price-copy>p{font-size:18px;color:var(--ink2);max-width:30em;margin:22px 0 0}
.en-facts{list-style:none;margin:30px 0 0;padding:0;max-width:36em}
.en-facts li{padding:14px 0;border-top:1px dashed #b6c4da;font-size:16.5px;color:var(--ink2)}
.en-sum{position:relative;background:var(--paper);padding:34px 34px 28px;transform:rotate(1.2deg);box-shadow:0 1px 1px rgba(12,29,61,.12),0 18px 30px -16px rgba(12,29,61,.3)}
.en-sum h3,.gm-sum h3{font:760 22px/1.2 var(--hd);letter-spacing:-.02em;margin:0 0 22px;color:var(--navy)}
.en-sum h3 span,.gm-sum h3 span{display:block;font:600 13.5px/1.3 var(--bd);color:var(--green);margin-top:6px;letter-spacing:0}
.sum-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.sum-lbl{margin:6px 0 18px;font-size:14px;color:#5d6679}
.chip{display:inline-block;padding:9px 14px 8px;font:740 19px/1 var(--hd);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--navy);clip-path:polygon(2% 6%,98% 0,100% 90%,0 100%)}
.chip.c-deep{background:var(--deep);color:#fff}
.chip.c-blue{background:var(--blue);color:var(--navy)}
.chip.c-mint{background:var(--mint);color:var(--navy)}
.chip.c-paper{background:var(--pale);color:var(--navy)}
.en-sum .chip.c-paper{background:#e9e1d1}
.sum-row .op{font:600 20px/1 var(--bd);color:var(--ink2)}
.sum-row .res{font:800 22px/1 var(--hd);color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sum-total{padding-top:16px;border-top:1.5px solid var(--line)}
.sum-total .chip{font-size:22px}
.sum-total .plus{font-size:15px;color:var(--ink2);font-weight:600}
.sum-note{margin:16px 0 0;font-size:14.5px;color:var(--ink2)}

/* ==========================================================================
   Gas
   ========================================================================== */
/* the hero's paper flame and MPRN tag, beside the quote form (in the collage's .ph-wrap, desktop and tablet) */
.ga-wrap .ga-sheet{--z:.03}
.en .flame-wrap.gas-flame{position:absolute;left:auto;right:40px;top:110px;bottom:auto;width:220px;z-index:3}
.ga-tag{position:absolute;right:18px;top:476px;width:220px;aspect-ratio:300/180;z-index:4;filter:var(--sh);--z:.05;transform:rotate(var(--r))}
.ga-tag .ga-string{position:absolute;left:-36px;top:-58px;width:60px;height:80px;overflow:visible}
.ga-hole{position:absolute;left:14px;top:50%;width:13px;height:13px;margin-top:-6px;border-radius:50%;background:var(--ground);box-shadow:inset 0 1px 2px rgba(12,29,61,.35);z-index:1}
.ga-tag p{position:absolute;inset:0;margin:0;padding:0 18px 0 40px;display:flex;flex-direction:column;justify-content:center;gap:5px;z-index:1}
.ga-tag .t{font:700 13px/1 var(--bd);color:#5d6679}
.ga-tag .v{font:800 23px/1 var(--hd);color:var(--navy);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ga-tag .x{align-self:flex-start;background:var(--mint);color:var(--navy);font:700 13px/1 var(--bd);padding:5px 8px 4px;clip-path:polygon(3% 6%,98% 0,100% 92%,0 100%)}

.gas-where{padding:110px 0 120px}
.gw-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 72px;margin-top:70px;align-items:start}
/* a zigzag: pub top left, cafe tucked under it towards the middle, Sedge Lynn on the right centred between them */
.gw-pub{grid-column:1;grid-row:1;max-width:460px}
.gw-pub .photo-back{position:absolute;left:-7%;top:-5%;width:100%}
.gw-bakery{grid-column:2;grid-row:1/span 2;align-self:center}
.gw-bakery .photo-back{position:absolute;left:4%;top:-8%;width:100%}
.gw-cafe{grid-column:1;grid-row:2;width:62%;max-width:300px;justify-self:end;margin:6px 0 0}
.gw-cafe .cap{max-width:none}

.gm-grid{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:80px;align-items:start}
.gm-copy p{font-size:18px;color:var(--ink2);max-width:32em;margin:22px 0 0}
.gm-sum{position:relative;background:var(--paper);padding:34px 34px 26px;transform:rotate(-1deg);box-shadow:0 1px 1px rgba(12,29,61,.12),0 18px 30px -16px rgba(12,29,61,.3)}
.gm-chain{list-style:none;margin:0;padding:0}
.gm-chain li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px dashed var(--line)}
.gm-chain li:first-child{border-top:0;padding-top:0}
.gm-chain .chip{margin-top:4px}
.gm-chain p{margin:8px 0 0;font-size:15.5px;color:var(--ink2);line-height:1.5}
.gm-chain .gm-res{border-top:1.5px solid var(--line)}
.gm-chain .gm-res .chip{font-size:22px}

.gas-price{padding:110px 0 40px}
.gp-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:start}
.gp-list p{margin:0;padding:18px 0;border-top:1.5px solid #ddd3c1;font-size:17.5px;color:var(--ink2)}
.gp-list p:last-child{border-bottom:1.5px solid #ddd3c1}

/* ---------- small desktop ---------- */
@media (max-width:1240px) and (min-width:1100px){
  .en-hero-grid{grid-template-columns:minmax(0,1fr) 460px;gap:44px}
  .en-hero-art .eh-back{width:370px}
  .en-hero-art .eh-photo{left:50px;width:320px}
  .el-art .eh-photo{width:350px}
  .en .flame-wrap.gas-flame{right:40px;width:200px}
  .bill-wrap{grid-template-columns:500px minmax(0,1fr);gap:60px}
}
/* ---------- tablet ---------- */
@media (max-width:1099px){
  .en-hero-grid{grid-template-columns:1fr;gap:40px}
  .en-hero-art{width:100%;max-width:540px;justify-self:center;height:620px}
  .en-fixed-grid,.en-dates-head,.en-check-grid,.en-switch-grid,.en-faq-grid,.en-price-grid,.gm-grid,.gp-grid{grid-template-columns:1fr;gap:44px}
  .en-switch-head{position:static}
  .en-route{grid-template-columns:1fr;gap:30px}
  .en-route.gs .en-route-art{order:-1}
  .en-route-art{max-width:540px;width:100%}
  .en-close-grid{grid-template-columns:minmax(0,1fr);gap:56px}
  .en-close-form{max-width:460px}
  .bill-wrap{grid-template-columns:minmax(0,540px);gap:56px}
  .bill-notes{grid-template-columns:1fr 1fr;gap:30px 40px}
  .gw-grid{grid-template-columns:1fr 1fr}
  .gw-pub,.gw-cafe{grid-column:auto;grid-row:auto}
  .gw-cafe{width:80%;justify-self:end;margin:30px 4% 0 0}
  .gw-bakery{grid-column:1/-1;grid-row:auto;align-self:start;order:-1;margin-top:0;max-width:640px}
  .en-fixed-note{max-width:440px}
  .en .flame-wrap.gas-flame{right:12%;top:70px;width:min(190px,60%)}
  .ga-tag{right:0;top:auto;bottom:90px;width:190px}
  .ga-tag .ga-string{display:none}
  .ga-tag .v{font-size:20px}
}
/* ---------- phones ---------- */
@media (max-width:719px){
  .en-hero{padding:14px 0 60px}
  .en .en-h1,.en-hub .en-h1{font-size:clamp(38px,11vw,50px);line-height:1}
  .en-hero .lede{font-size:17.5px;margin-top:20px}
  .en-cta .btn{flex:1 1 auto}
  .en-hero-art{height:520px}
  .en-hero-art .eh-back{left:auto;right:-30px;width:300px}
  .en-hero-art .eh-photo{left:auto;right:16px;top:24px;width:min(250px,70vw)}
  .el-art .eh-photo{width:min(270px,72vw)}
  .en-hero-art .eh-scrap{right:auto;left:4px;top:auto;bottom:150px;width:90px}
  .en-hero-art .eh-note{left:0;bottom:0;width:min(360px,100%)}
  .en-fixed,.en-check,.en-routes,.el-read,.gas-where{padding:70px 0 80px}
  .en-fixed-copy p,.en-dates-head p,.en-route-copy p,.en-check-head p,.en-switch-head p,.gm-copy p,.en-price-copy>p{font-size:17px}
  .en-fixed-note{padding:40px 24px 26px;transform:rotate(.8deg)}
  .en-fixed-note dl div{flex-direction:column;gap:2px}
  .en-fixed-note dd{text-align:left}
  .en-dates-sheet{padding:44px 0 70px}
  .en-tl{margin-top:44px}
  .tl-board{height:auto;display:flex;flex-direction:column;gap:14px}
  .tl-years,.tl-end .tl-pole{display:none}
  .tl-piece{position:relative;left:auto;top:auto;width:100%;height:auto;min-height:62px}
  .tl-lbl{padding:19px 24px 17px}
  .tl-window{width:84%;margin-left:16%;min-height:76px}
  .tl-end{height:auto;min-height:0;width:140px;margin-left:6px}
  .tl-end .sheet{position:absolute;inset:0;width:100%;height:100%}
  .tl-end .tl-lbl{padding:12px 16px 10px}
  .tl-next .tl-lbl,.tl-roll .tl-lbl{padding-left:24px}
  .tl-roll{--r:1.2deg;width:96%}
  .en-dates-foot{grid-template-columns:1fr;gap:20px;margin-top:40px}
  .en-route-grid{gap:70px;margin-top:44px}
  .en-route-art{height:260px}
  .rt-sbox{left:4%;top:50px;max-width:92%}
  .en .flame-wrap.rt-flame{width:130px;left:calc(50% - 65px)}
  .en-check-paper{padding:44px 22px 26px;transform:rotate(-.5deg)}
  .en-check-paper ul{grid-template-columns:1fr}
  .en-check-paper li:nth-child(2){border-top:1px dashed var(--line)}
  .en-switch{padding:20px 0 80px}
  .en-step{grid-template-columns:52px minmax(0,1fr);gap:14px}
  .en-step h3{font-size:19px}
  .en-also-in{grid-template-columns:1fr;gap:24px}
  .en-faq{padding:80px 0 120px}
  .en-close{padding:60px 0 50px}
  .en-close-copy>p{font-size:17.5px}
  .en-close-mint{left:-30px;width:110%}
  .el-pylons{margin:-20px 0 0}
  .bill-wrap{margin-top:44px;grid-template-columns:minmax(0,1fr)}
  .bill{padding:34px 22px 30px;transform:rotate(-.6deg);margin-right:14px}
  .bill-in{font-size:14px}
  .bill-sbox{font-size:15.5px}
  .bill-sbox span{padding:7px 7px 6px}
  .bill-sbox .s{font-size:24px;padding:0 9px}
  .bill-two{grid-template-columns:1fr;gap:12px}
  .bill-big{font-size:17px}
  .bill-pin{width:32px;height:30px;right:-22px;top:-18px}
  .m-inline .bill-pin{right:-36px;width:30px;height:28px;margin-top:-15px}
  .m-block .bill-pin{right:-8px}
  .bill-notes{grid-template-columns:1fr;gap:24px}
  .bill-notes li{grid-template-columns:46px minmax(0,1fr);gap:14px}
  .bill-notes .en-mk{width:44px;height:40px}
  .bill-notes h3{font-size:20px}
  .en .en-band{padding:46px 0 70px}
  .en-sum,.gm-sum{padding:28px 20px 22px;transform:none}
  .sum-row .res{font-size:20px}
  .chip{font-size:17px}
  .gw-grid{grid-template-columns:1fr;gap:56px;margin-top:44px}
  .gw-cafe{width:78%;justify-self:start;margin:0}
  .gw-bakery{margin-right:8px}
  .gas-price{padding:80px 0 30px}
}
@media (prefers-reduced-motion:reduce){
  .js .en-tl .tl-piece,.js .en-tl .tl-fixed{opacity:1;transform:rotate(var(--r,0deg));clip-path:none;transition:none}
  .js .bill-fig .hl{transform:rotate(var(--r,0deg));transition:none}
  .js .bill-fig .bill-pin{opacity:1;transform:none;transition:none}
}
@media print{
  .en-close,.el-pylons,.ga-wrap,.en-hero-art{display:none}
}

/* ---------- legal documents (src/lib/legal-ui.mjs) ----------
   Read mode: the world owns the frame (title band on the stock, cut scraps, a taped paper sheet)
   and the column stays calm: Hanken at a 65 to 72 character measure, clear numbered headings. */
.lg{padding:34px 0 120px}
.lg-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.lg-head{position:relative;z-index:1}
.lg-h1{font:780 clamp(38px,4.2vw,58px)/1.02 var(--hd);letter-spacing:-.035em;color:var(--navy);margin:0;max-width:15em;text-wrap:balance}
.lg-lede{margin-top:22px;max-width:36em}
.lg-lede p{margin:0 0 10px;font-size:19px;line-height:1.55;color:var(--ink2);text-wrap:pretty}
.lg-tpi-code .lg-lede p{font-size:17px}
.lg-art{position:relative;pointer-events:none}
.lg-art .cut{--z:.03}
.lg-scrap-a{width:84px;left:6px;top:34px}
.lg-scrap-b{width:48px;left:82px;top:96px;--z:.05}

/* contents */
.lg-toc{font-size:15px;line-height:1.35}
.lg-toc-label{font:700 16px/1.2 var(--hd);color:var(--navy);margin:0 0 12px;letter-spacing:-.01em}
.lg-toc-btn{display:none}
.lg-toc-list{list-style:none;margin:0;padding:0}
.lg-toc-list li{margin:0}
.lg-toc-list a{display:flex;gap:.45em;padding:6px 0;color:var(--ink2);text-decoration:none;border-radius:4px}
.lg-toc-list a .lg-n{color:var(--deep);font-variant-numeric:tabular-nums;flex:none;min-width:1.4em}
.lg-toc-list a:hover{color:var(--navy);text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px}
.lg-toc-list a[aria-current]{color:var(--navy);font-weight:650;text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:4px}

/* the sheet: paper with a scissor cut top and bottom (clip-path from sheetClip()), taped down.
   The shadow is drawn by ::before so the clip doesn't cut it off. */
.lg-sheet{position:relative;margin-top:44px;min-width:0}
.lg-sheet::before{content:"";position:absolute;inset:6px 0 5px;box-shadow:0 1px 3px rgba(12,29,61,.1),0 26px 50px -24px rgba(12,29,61,.3);pointer-events:none}
.lg-paper{position:relative;padding:68px 72px 52px;background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .28  0 0 0 .3 -.12'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
.lg-tape{position:absolute;z-index:2;top:-13px;left:64px;width:132px;transform:rotate(-2.5deg);filter:var(--sh);--z:.012}
.lg-tape svg{width:100%;height:auto;overflow:visible}

/* the document */
.lg-doc{max-width:35.5em;font-size:17px;line-height:1.65;color:var(--ink2);overflow-wrap:break-word}
.lg-doc p{margin:0 0 14px;text-wrap:pretty}
.lg-doc strong{color:var(--ink);font-weight:650}
.lg-doc a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
.lg-doc a:hover{text-decoration-color:var(--green)}
.lg-pre{margin-bottom:8px}
.lg-sec{padding-top:40px;margin-top:40px;border-top:1px dashed var(--line)}
.lg-pre + .lg-sec,.lg-doc > .lg-sec:first-child{border-top:0;margin-top:0;padding-top:0}
.lg-pre + .lg-sec{margin-top:36px;padding-top:36px;border-top:1px dashed var(--line)}
.lg-doc h2{font:760 clamp(25px,2.3vw,30px)/1.15 var(--hd);letter-spacing:-.025em;color:var(--navy);margin:0 0 18px;text-wrap:balance;scroll-margin-top:24px}
.lg-doc h3{font:720 19px/1.3 var(--hd);letter-spacing:-.012em;color:var(--navy);margin:30px 0 10px;text-wrap:balance}
.lg-doc h2 + h3{margin-top:4px}
.lg-n{color:var(--deep);font-variant-numeric:tabular-nums}
.lg-doc h2 .lg-n{margin-right:.12em}

/* lists: a small cut mint scrap for bullets; clause lists keep the document's own (i), (ii) */
.lg-doc ul{list-style:none;margin:4px 0 18px;padding:0 0 0 1.5em}
.lg-doc ul > li{position:relative;margin:0 0 8px}
.lg-doc ul > li::before{content:"";position:absolute;left:-1.25em;top:.62em;width:8px;height:8px;background:var(--mint);clip-path:polygon(12% 4%,96% 18%,84% 96%,4% 82%);transform:rotate(-8deg)}
.lg-doc ul > li:nth-child(even)::before{clip-path:polygon(6% 14%,90% 2%,98% 86%,16% 96%);transform:rotate(6deg)}
.lg-doc ol.lg-roman{list-style:none;margin:4px 0 18px;padding:0}
.lg-doc ol.lg-roman > li{display:grid;grid-template-columns:3em minmax(0,1fr);margin:0 0 10px}
.lg-doc ol.lg-roman ol.lg-roman{grid-column:2;margin:12px 0 0}
.lg-m{color:var(--deep);font-weight:600;font-variant-numeric:tabular-nums}
.lg-doc ul.lg-defs{padding:0;margin-top:0}
.lg-doc ul.lg-defs > li{margin:0 0 12px}
.lg-doc ul.lg-defs > li::before{display:none}

/* notes inside the document */
.lg-attn{background:var(--pale);color:var(--ink);padding:14px 18px;border-radius:6px;font-size:16px;line-height:1.55}
.lg-doc .lg-sum{font-size:19px;line-height:1.5;color:var(--ink);margin-bottom:18px}
.lg-contact{margin:18px 0 22px;padding:12px 0 10px;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);font-size:16px}
.lg-doc .lg-contact p{margin:4px 0}
.lg-sec > .lg-contact:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.lg-org h3{margin-top:28px}
.lg-org .lg-contact{margin-bottom:8px}
.lg-box{background:var(--ground);border-radius:6px;padding:20px 22px 8px;margin:22px 0}
.lg-box h3{margin-top:0;font-size:17.5px}
.lg-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:6px 0 26px}
.lg-points > div{padding:14px 0;border-top:1px dashed var(--line)}
.lg-points dt{font:720 18px/1.25 var(--hd);color:var(--navy);letter-spacing:-.01em}
.lg-points dd{margin:4px 0 0;font-size:16px;line-height:1.5}
.lg-gloss{margin:0}
.lg-gloss dt{font:720 17.5px/1.3 var(--hd);color:var(--navy);letter-spacing:-.01em;margin-top:20px}
.lg-gloss dt:first-child{margin-top:0}
.lg-gloss dd{margin:4px 0 0}

/* tables */
.lg-table{margin:12px 0 22px}
.lg-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.lg-table th{text-align:left;font-weight:650;color:var(--navy);background:var(--pale);padding:11px 14px;vertical-align:bottom}
.lg-table td{padding:13px 14px;vertical-align:top;border-bottom:1px solid var(--line)}
.lg-table td:first-child{color:var(--ink)}

/* see also */
.lg-also{margin-top:44px;padding-top:20px;border-top:1px dashed var(--line);font-size:15.5px}
.lg-also p{margin:0;display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline}
.lg-also span{font-weight:650;color:var(--navy)}
.lg-also a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:4px}
.lg-also a:hover{color:var(--navy);text-decoration-color:var(--green)}

/* wide screens: contents beside the sheet, sticky while you read */
@media (min-width:1100px){
  .lg-grid{grid-template-columns:236px minmax(0,780px);column-gap:60px;justify-content:center;align-items:start}
  .lg-art{grid-column:1;grid-row:1}
  .lg-head{grid-column:2;grid-row:1}
  .lg-toc{grid-column:1;grid-row:2;position:sticky;top:24px;margin-top:44px;max-height:calc(100vh - 48px);overflow:auto;padding:4px 10px 12px 2px;scrollbar-width:thin}
  .lg-sheet{grid-column:2;grid-row:2}
}
/* tablets and phones: contents as a collapsible list above the sheet */
@media (max-width:1099px){
  .lg{padding-top:20px}
  .lg-grid{max-width:820px}
  .lg-art{position:absolute;inset:0;z-index:0}
  .lg-scrap-a{left:auto;right:-26px;top:-6px;width:84px}
  .lg-scrap-b{left:auto;right:52px;top:56px;width:40px}
  .lg-head{padding-right:64px}
  .lg-toc{margin-top:32px;background:var(--paper);border-radius:6px;box-shadow:0 1px 2px rgba(12,29,61,.08),0 12px 24px -16px rgba(12,29,61,.28);padding:16px 18px}
  .lg-toc-list{columns:2;column-gap:28px}
  .lg-toc-list li{break-inside:avoid}
  .js .lg-toc{padding:0}
  .js .lg-toc-label{display:none}
  .js .lg-toc-btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;background:none;border:0;padding:16px 18px;font:700 17px/1.2 var(--hd);color:var(--navy);cursor:pointer;border-radius:6px}
  .js .lg-toc-btn .ic{transition:transform .25s var(--ease)}
  .js .lg-toc-btn[aria-expanded="true"] .ic{transform:rotate(45deg)}
  .js .lg-toc-list{display:none;padding:0 18px 14px}
  .js .lg-toc-list.open{display:block}
}
@media (max-width:719px){
  .lg{padding:12px 0 80px}
  .lg-h1{font-size:clamp(34px,9.6vw,44px)}
  .lg-head{padding-right:40px}
  .lg-scrap-a{right:-34px;width:70px}
  .lg-scrap-b{right:22px;top:50px;width:32px}
  .lg-lede p{font-size:17.5px}
  .lg-tpi-code .lg-lede p{font-size:16px}
  .lg-toc-list{columns:1}
  .lg-sheet{margin:30px -6px 0}
  .lg-paper{padding:46px 20px 36px}
  .lg-tape{left:22px;width:104px;top:-11px}
  .lg-doc{font-size:16.5px}
  .lg-sec{padding-top:32px;margin-top:32px}
  .lg-doc ol.lg-roman > li{grid-template-columns:2.6em minmax(0,1fr)}
  .lg-points{grid-template-columns:1fr}
  .lg-attn{padding:12px 14px}
  /* the table's rows become stacked cards, each cell labelled with its column */
  .lg-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .lg-table table,.lg-table tbody,.lg-table tr,.lg-table td{display:block}
  .lg-table tr{border-top:1px dashed var(--line);padding:10px 0 6px}
  .lg-table td{border:0;padding:4px 0 8px}
  .lg-table td::before{content:attr(data-label);display:block;font-weight:650;color:var(--navy);font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .js .lg-toc-btn .ic{transition:none}
}
@media print{
  .lg-art,.lg-toc,.lg-tape,.lg-also,.crumbs,.skip{display:none!important}
  body,.legal-page{background:#fff!important;color:#000}
  .lg{padding:0}
  .lg-grid{display:block;max-width:none}
  .lg-head{padding:0}
  .lg-h1{font-size:26pt;color:#000;max-width:none}
  .lg-lede p{color:#000;font-size:12pt}
  .lg-sheet{margin:16pt 0 0}
  .lg-sheet::before{display:none}
  .lg-paper{clip-path:none!important;background:none!important;padding:0}
  .lg-doc{max-width:none;font-size:11pt;line-height:1.5;color:#000}
  .lg-doc *,.lg-n,.lg-m{color:#000!important}
  .lg-doc .lg-sum{font-size:12.5pt}
  .lg-contact,.lg-attn,.lg-points dd,.lg-table table{font-size:10.5pt}
  .lg-doc h2{font-size:15pt;break-after:avoid}
  .lg-doc h3{font-size:12pt;break-after:avoid}
  .lg-doc a{text-decoration:underline;text-decoration-color:#000;text-decoration-thickness:1px}
  .lg-doc a[href^="http"]::after{content:" (" attr(href) ")";font-size:.9em}
  .lg-doc ul > li::before{background:#000}
  .lg-sec{border-top:1px solid #bbb;padding-top:14pt;margin-top:14pt}
  .lg-attn,.lg-box,.lg-table th{background:none!important;border:1px solid #bbb}
  .lg-contact,.lg-points > div,.lg-table td{border-color:#bbb}
  li,tr,dt,.lg-attn,.lg-contact{break-inside:avoid}
  @page{margin:18mm 16mm}
}

/* ---------- Trustpilot review slips (src/lib/reviews-ui.mjs) ----------
   Taped paper slips, each its own cut, colour and turn. The wall drifts in two rows (site.js adds
   .rv-live); without JS or with reduced motion the slips sit still in a wrapped layout. */
.f-stock{fill:var(--ground)}

.rv{margin-top:130px;position:relative}
.rv-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 56px;align-items:end}
.rv-head .h2{max-width:13em;margin:0}
.rv-note{margin:18px 0 0;font-size:15.5px;color:var(--ink2);max-width:40em;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.rv-pause{font:650 14px/1 var(--bd);color:var(--navy);background:transparent;border:1.5px solid #b9ae98;border-radius:999px;padding:9px 14px;cursor:pointer}
.rv-pause:hover{border-color:var(--navy)}
.rv-pause[hidden]{display:none}
.rv-badge{margin:0 0 6px;width:260px}
.rv-badge .tp-in{text-decoration:none;color:inherit;border-radius:10px}
.rv-badge .tp-in:focus-visible{outline-offset:-6px}
.rv-all{font-size:14px;font-weight:650;color:var(--navy);text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:4px}
.tp-in:hover .rv-all,.rv-strip-score:hover .rv-all{text-decoration-color:var(--green)}

/* rows: still and wrapped by default */
.rv-rows{margin-top:34px}
.rv-row{padding:24px 0 30px}
.rv-track{list-style:none;margin:0 auto;padding:0 var(--gut);max-width:var(--wrap);display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:58px 34px;position:relative}
/* drifting (desktop with a mouse, site.js adds .rv-live): the rows run off both edges of the page.
   Each track is moved by one compositor animation; nothing in it repaints while it drifts. */
.rv-live .rv-row{overflow:hidden;overflow:clip;overflow-y:visible;padding:26px 0 62px}
.rv-live .rv-row+.rv-row{margin-top:-46px}
.rv-live .rv-track{flex-wrap:nowrap;justify-content:flex-start;width:max-content;max-width:none;padding:0;margin:0;contain:layout style}

/* one slip */
.rv-slip{position:relative;flex:none;width:min(var(--w),82vw);margin-top:var(--y,0);transform:rotate(var(--r,0deg));--z:.022;transition:transform .5s var(--ease)}
.rv-bg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:var(--sh)}
.rv-tape{position:absolute;top:-15px;left:var(--tx,30%);width:92px;transform:rotate(var(--tr,2deg));opacity:.9;z-index:1}
.rv-tape svg{width:100%;height:auto}
.rv-in{position:relative;margin:0;padding:28px 24px 22px}
.rv-stars{display:block;width:100px}
.rv-stars svg{width:100%;height:auto;fill:var(--deep);overflow:visible;filter:drop-shadow(0 1px 0 rgba(12,29,61,.22))}
.rv-q{margin:12px 0 0}
.rv-q p{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
.rv-q .rv-t{font:720 18px/1.2 var(--hd);letter-spacing:-.01em;color:var(--navy);margin-bottom:6px}
.rv-by{margin-top:14px;padding-top:11px;border-top:1px dashed #cbbfa8;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:14px;line-height:1.4}
.rv-name{font-weight:650;color:var(--navy)}
.rv-date{color:#5d6679}
.rv-link{flex-basis:100%;margin-top:6px;font-weight:650;color:var(--navy);text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:4px}
.rv-link:hover{text-decoration-color:var(--green)}
.rv-link:focus-visible{border-radius:4px}
/* the mint slip carries its own ink */
.rv-mint .rv-stars svg{fill:var(--midnavy)}
.rv-mint .rv-date{color:var(--navy)}
.rv-mint .rv-by{border-top-color:rgba(12,29,61,.35)}
.rv-mint .rv-link{text-decoration-color:var(--navy)}
.rv-pale .rv-by{border-top-color:#b8c6d8}

/* the shop tag hanging off a slip that names its business */
.rv-tag{position:absolute;right:20px;bottom:-42px;height:34px;transform:rotate(var(--tr,-6deg));transform-origin:14px 17px;z-index:2;--z:.03}
.rv-tag-bg{display:block;overflow:visible;filter:var(--sh)}
.rv-string{fill:none;stroke:var(--navy);stroke-width:1.3;stroke-linecap:round;opacity:.75}
.rv-tag-txt{position:absolute;inset:0 6px 0 26px;display:flex;align-items:center;justify-content:center;white-space:nowrap;color:#fff;font:650 13.5px/1 var(--bd);letter-spacing:.005em}

@media (hover:hover){
  .rv-slip:hover{transform:rotate(calc(var(--r,0deg) * .4)) translateY(-4px);--z:.045}
}

/* the static strip beside a form */
.rv-strip{margin-top:84px}
.rv-strip-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.rv-strip-h{font:740 21px/1.15 var(--hd);letter-spacing:-.02em;color:var(--navy);margin:0}
.rv-strip-score{display:inline-flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink2);font-size:16px;border-radius:6px}
.rv-strip-score img{width:auto;height:1.45em;position:relative;top:.225em}
.rv-strip-score b{font:800 19px/1 var(--hd);color:var(--navy);margin-right:3px}
.rv-few{padding:34px 0 0;margin:0;max-width:none;justify-content:flex-start;gap:58px 40px}
.rv-strip .rv-note{margin-top:30px}

@media (max-width:1099px){
  .rv-head{grid-template-columns:1fr}
  .rv-badge{margin:4px 0 0 4px}
}
@media (max-width:719px){
  .rv{margin-top:90px}
  .rv-badge{width:230px}
  .rv-track{gap:56px 24px;padding:0 16px}
  .rv-live .rv-track{padding:0}
  .rv-in{padding:26px 20px 20px}
  .rv-q p{font-size:15.5px}
  .rv-few{padding:30px 0 0;gap:52px}
  .rv-few .rv-slip{width:min(var(--w),100%)}
  .rv-few .rv-slip:nth-child(even){margin-left:auto}
}
@media (prefers-reduced-motion:reduce){
  .rv-slip{transition:none}
}

/* touch screens and narrow windows: no drift, no clones. Both rows sit end to end in one native
   horizontal row the visitor swipes, snapping slip by slip, with the badges above. */
.rv-hint{display:none}
@media (max-width:720px),(hover:none){
  .rv-rows{display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);margin-top:18px;padding:30px 0 66px;scrollbar-width:thin;scrollbar-color:#c9bfab transparent}
  .rv-row,.rv-row+.rv-row{flex:none;padding:0;margin:0}
  .rv-rows .rv-track{flex-wrap:nowrap;justify-content:flex-start;width:max-content;max-width:none;margin:0;padding:0 var(--gut);gap:26px}
  .rv-rows .rv-row+.rv-row .rv-track{padding-left:0}
  .rv-rows .rv-slip{width:min(var(--w),80vw);scroll-snap-align:start}
  .rv-pause{display:none}
  .rv-hint{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:14.5px;font-weight:650;color:var(--navy)}
  .rv-hint .ic{width:18px;height:18px;color:var(--green)}
}
@media print{
  .rv-pause{display:none}
}

/* Trustpilot and Google badges side by side in the wall heading */
.rv-badges{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.rv-g{font:700 22px/1 var(--hd);letter-spacing:-.01em;color:var(--navy)}
.rv-badge-g .tp-in p{font-size:15px}
@media (max-width: 719px){
  .rv-badges{flex-wrap:nowrap;gap:10px;margin-top:6px}
  .rv-badges .rv-badge{width:calc(50% - 5px);min-width:0;margin:0}
  .rv-badges .tp-in img{width:92px}
  .rv-badges .tp-in p{font-size:13.5px}
  .rv-badges .tp-in b{font-size:21px}
  .rv-g{font-size:18px}
  .rv-badges .rv-all{font-size:13px}
}

/* ===== services group: /business-water, /business-waste, /card-payments =====
   Everything here is scoped to the svc- prefix or the .svc body class. */

/* ---------- hero ---------- */
.svc-hero{padding:34px 0 96px;overflow:hidden}
.svc .crumbs ol{margin-bottom:26px}
.svc-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:64px;align-items:start}
.svc-hero-wide{grid-template-columns:minmax(0,1fr) 600px;gap:56px}
.svc-hero-copy{padding-top:26px;position:relative;z-index:2}
.svc-h1{font-size:clamp(46px,5.1vw,78px)}
.svc-pay .svc-h1{font-size:clamp(44px,4.7vw,72px)}
.svc-hero .lede{margin-top:30px}
.svc-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.svc-small{margin:18px 0 0;font-size:16px;color:var(--ink2)}
.svc-small a,.svc-p a{font-weight:700;color:var(--navy);text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:4px}

.svc-collage{position:relative}
.svc-collage .cut{position:absolute}
.svc-collage-tall{height:650px}
.svc-collage-tall .svc-c-back{right:-6px;top:-18px;width:370px}
.svc-collage-tall .svc-ph{position:absolute;right:52px;top:22px;width:330px}
.svc-collage-tall .svc-c-scrap{left:4px;top:372px;width:120px}
.svc-collage-tall .svc-c-note{right:-14px;top:418px;width:380px;z-index:2}
.svc-collage-wide{height:600px}
.svc-collage-wide .svc-c-back{left:-26px;top:-16px;width:620px}
.svc-collage-wide .svc-ph{position:absolute;left:0;top:14px;width:600px}
.svc-collage-wide .svc-c-note{left:110px;bottom:12px;width:440px;z-index:2}

/* ---------- section basics ---------- */
.svc-sec{padding:110px 0}
.svc-head-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:end}
.svc-head-split p{margin:0}
.svc-h3{font:760 26px/1.15 var(--hd);letter-spacing:-.02em;color:var(--navy);margin:0 0 10px;display:flex;align-items:center;gap:12px}
.svc-dot{width:16px;height:15px;border-radius:44% 56% 48% 60%;background:var(--c);flex:none;transform:rotate(-8deg);box-shadow:0 1px 1px rgba(12,29,61,.18)}
.svc-p{font-size:18px;color:var(--ink2);margin:20px 0 0;max-width:32em}
.svc-band{position:relative;margin:10px 0}
.svc-band-sheet{background:var(--pale);padding:56px 0 100px;position:relative}
.svc-band-warm{background:var(--ground2)}
.svc-note{max-width:450px;margin-top:34px}
.svc-note h3{font:700 17px/1.2 var(--hd);margin:0 0 10px;letter-spacing:-.01em;color:var(--navy)}
.svc-thread{fill:none;stroke:#0c1d3d;stroke-width:1.6;stroke-dasharray:4 5;stroke-linecap:round;opacity:.5}
.svc-tag-h{font:800 30px var(--hd);fill:var(--navy);letter-spacing:-.02em}
.svc-tag-s{font:500 16px var(--bd);fill:var(--ink2)}

/* ---------- water: wholesaler and retailer ---------- */
.svc-pipes-wrap{margin:56px auto 0;max-width:1120px}
.svc-pipes{width:100%;height:auto;overflow:visible}
.svc-pipes .pipe{fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 2px rgba(12,29,61,.22))}
.svc-pipes .run{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1}
.js .svc-pipes .run{stroke-dashoffset:1;transition:stroke-dashoffset 2.6s cubic-bezier(.45,.1,.2,1) .25s}
.js .svc-pipes .run-b{transition-delay:2.4s}
.js .svc-pipes-wrap.on .run{stroke-dashoffset:0}
.svc-pipe-lbl{font:650 15px var(--bd);fill:#6b6150}
.svc-drip{transform-box:fill-box;transform-origin:50% 0}
.js .svc-drip-on.on .svc-drip{animation:svcDrip 3.6s ease-in 2.8s infinite both}
@keyframes svcDrip{
  0%{opacity:0;transform:scale(.3)}
  22%,58%{opacity:1;transform:scale(1)}
  80%{opacity:1;transform:translateY(25px) scale(.95,1.08)}
  86%,100%{opacity:0;transform:translateY(27px) scale(1.3,.5)}
}
.svc-env-move{transform-box:fill-box;transform-origin:50% 50%;transition:transform 1.5s var(--ease) 1.8s,opacity .7s ease 1.8s}
.js .svc-pipes-wrap:not(.on) .svc-env-move{transform:translate(-70px,-120px) rotate(-16deg);opacity:0}
.svc-two{display:grid;grid-template-columns:1fr 1fr;gap:72px;margin-top:44px;max-width:1120px}
.svc-two p{color:var(--ink2);margin:0;font-size:17.5px;max-width:34em}

.svc-years{margin-top:56px;max-width:1040px;position:relative}
.svc-scale{position:relative;height:34px;border-bottom:1.5px dashed #9db6dd}
.svc-scale span{position:absolute;bottom:8px;left:calc(var(--x) * 100%);transform:translateX(calc(var(--x) * -100%));font:700 15px var(--bd);color:var(--midnavy)}
.svc-years ol{list-style:none;margin:0;padding:0}
.yr{padding:26px 0 0}
.yr .bar{position:relative;height:46px}
.yr .bar .cut{position:absolute;inset:0;--z:.015}
.yr .bar .cut svg{height:100%}
.yr.yr-en .bar,.yr.yr-en h3,.yr.yr-en p{margin-left:50%}
.yr-wa .bar{margin-left:calc(100% - 110px);width:110px;height:34px}
.yr.yr-wa h3,.yr.yr-wa p{margin-left:calc(100% - 430px)}
.yr h3{font:740 22px/1.2 var(--hd);letter-spacing:-.015em;margin:16px 0 4px;color:var(--navy)}
.yr p{margin:0;color:var(--ink2);max-width:28em;font-size:16.5px}
.yr-sc p{max-width:30em}

.svc-quote-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:80px;align-items:center}
.svc-canal{max-width:600px}
.svc-canal .photo-back{position:absolute;left:5%;top:-7%;width:100%}
.svc-quote-copy>p{font-size:18px;color:var(--ink2);margin:20px 0 0;max-width:30em}
.svc-lines{margin:0}
.svc-lines div{padding:9px 0;border-top:1px dashed var(--line)}
.svc-lines div:first-child{border-top:0;padding-top:0}
.svc-lines dt{font-weight:700;color:var(--navy);font-size:16.5px}
.svc-lines dd{margin:2px 0 0;font-size:15.5px;color:var(--ink2);line-height:1.45}
.svc-spid{margin:12px 0 0;padding-top:12px;border-top:1.5px solid var(--line);font-size:15.5px;line-height:1.45;color:var(--ink2)}
.svc-spid b{display:inline-block;background:var(--pale);color:var(--navy);padding:1px 8px;border-radius:3px;margin-right:6px;font-size:14px;letter-spacing:.04em}
.quote-copy .svc-fine,.svc-fine{font-size:14.5px;color:var(--ink2);margin:30px 0 0;max-width:34em}

/* ---------- waste: bins and lifts ---------- */
.svc-bins-wrap{margin:50px auto 0;max-width:1120px}
.svc-bins{width:100%;height:auto;overflow:visible}
.svc-stencil{font-family:var(--hd);font-weight:800;letter-spacing:.01em}
.svc-bin-name{font:650 19px var(--bd);fill:var(--navy)}
.svc-bin{filter:drop-shadow(0 3px 3px rgba(12,29,61,.16))}
.svc-lid{transform-box:fill-box;transform-origin:3% 100%}
.js .svc-bins-wrap.on .svc-lid{animation:svcLift 1.7s cubic-bezier(.45,.05,.25,1) calc(.5s + var(--i) * .5s) both}
@keyframes svcLift{0%,100%{transform:none}38%,62%{transform:translateY(-5px) rotate(-16deg)}}
.svc-streams-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px;margin:44px 0 0;max-width:1120px}
.svc-streams-list>div{padding:20px 0 22px;border-top:1.5px solid #d6ccb8}
.svc-streams-list dt{font:740 21px/1.2 var(--hd);letter-spacing:-.015em;color:var(--navy);display:flex;align-items:center;gap:12px}
.svc-streams-list dd{margin:8px 0 0;color:var(--ink2);font-size:16.5px;max-width:34em}

.svc-duty-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:80px;align-items:center}
.svc-duty-copy p{font-size:18px;color:var(--ink2);margin:20px 0 0;max-width:32em}
.svc-duty-note{margin:0;justify-self:end;transform:rotate(1.4deg)}
.svc-recycle{margin-top:120px}
.svc-cal{display:grid;grid-template-columns:260px 260px minmax(0,1fr);gap:60px;align-items:center;margin-top:60px}
.svc-cal-page{width:260px}
.svc-cal-in{position:relative;isolation:isolate;min-height:312px;padding:0 22px 40px;transform:rotate(var(--r,0deg));filter:drop-shadow(0 1px 1px rgba(12,29,61,.14)) drop-shadow(0 14px 16px rgba(12,29,61,.15))}
.svc-cal-bg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}
.svc-cal-month{position:absolute;left:0;right:0;top:32px;margin:0;text-align:center;font:700 17px var(--bd);color:#fff;letter-spacing:.02em}
.svc-cal-day{margin:0;padding-top:84px;text-align:center;font:800 118px/1 var(--hd);color:var(--navy);letter-spacing:-.05em}
.svc-cal-who{margin:12px 0 0;text-align:center;font:600 16.5px/1.38 var(--bd);color:var(--ink2)}
.svc-cal .svc-cal-tab{position:absolute;right:-34px;bottom:-30px;width:168px;--z:.03}
.svc-cal-tab span{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:6px 18px 2px;font:700 15px/1.2 var(--bd);color:var(--navy)}
.svc-cal-note{font-size:17px;color:var(--ink2);max-width:24em;margin:0}

/* ---------- card payments ---------- */
.svc-lineup-wrap{margin:44px auto 0;max-width:1100px}
.svc-lineup{width:100%;height:auto;overflow:visible}
.svc-t{transition:transform 1.1s var(--ease),opacity .7s ease;transition-delay:calc(.15s + var(--i) * .22s);filter:drop-shadow(0 4px 5px rgba(12,29,61,.2))}
.js .svc-lineup-wrap:not(.on) .svc-t{opacity:0;transform:translateY(-36px)}
.svc-rcpt{transition:transform 2.8s cubic-bezier(.33,.55,.25,1) 1.4s}
.js .svc-lineup-wrap:not(.on) .svc-rcpt{transform:translateY(128px)}
.svc-r-h{font:700 10.5px var(--bd);fill:var(--navy);letter-spacing:.01em}
.svc-r-s{font:600 10px var(--bd);fill:#5d6679}
.svc-scr{font:700 21px var(--bd);fill:var(--navy)}
.svc-scr-s{font:700 15px var(--bd);fill:var(--navy)}
.svc-scr-xs{font:800 11px var(--bd);fill:var(--navy)}
.svc-model{font:650 22px var(--bd);fill:#fff}
.svc-machine-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin:34px auto 0;max-width:1100px}
.svc-machine-list>div{border-top:1.5px solid #b9cde6;padding-top:16px}
.svc-machine-list dt{font:760 21px/1.2 var(--hd);letter-spacing:-.015em;color:var(--navy)}
.svc-machine-list dd{margin:8px 0 0;font-size:16px;color:var(--ink2);line-height:1.5}
.svc-machine-list dd b{display:block;color:var(--ink);font-weight:650;margin-bottom:2px}

.svc-settle-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:80px;align-items:center}
.svc-days{list-style:none;margin:46px 0 0;padding:0;display:flex;gap:20px;align-items:flex-end;max-width:620px}
.svc-days li{position:relative;flex:1 1 0;min-width:0}
.svc-days li.svc-payday{flex-grow:1.25}
.svc-days .cut{position:relative;width:100%;--z:.016}
.svc-days .d{position:absolute;left:0;right:0;top:27%;text-align:center;font:800 30px/1 var(--hd);letter-spacing:-.03em;color:var(--navy)}
.svc-days .t{position:absolute;left:0;right:0;top:58%;text-align:center;font:600 14px/1.2 var(--bd);color:var(--ink2)}
.svc-days .svc-payday .t{color:var(--navy);font-weight:750}
.svc-days li:nth-child(3) .d{top:33%}.svc-days li:nth-child(3) .t{top:62%} /* the pentagon is widest low down */
.svc-days li+li::before{content:"";position:absolute;left:-17px;top:50%;width:14px;border-top:2.5px dotted #a99f8c}
.svc-eg{font-size:15.5px;color:var(--ink2);margin:24px 0 0;max-width:36em}
.svc-eg b{color:var(--navy)}
.svc-cardonly{max-width:420px;width:100%;justify-self:end}
.svc-cardonly .photo-back{position:absolute;left:6%;top:-6%;width:100%}

.svc-care{padding-top:20px}
.svc-care-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:center}
.svc-care-fig{display:flex;justify-content:center;padding:20px 0 20px 30px}
.svc-ptag{position:relative;width:min(410px,100%);--r:-6deg;--z:.03;transform:rotate(var(--r));filter:var(--sh)}
.svc-ptag svg{width:100%;height:auto;overflow:visible}
.svc-ptag p{position:absolute;left:22%;right:4%;top:0;bottom:0;margin:0;display:flex;flex-direction:column;justify-content:center}
.svc-price{font:800 clamp(56px,6vw,82px)/1 var(--hd);color:var(--navy);letter-spacing:-.04em}
.svc-per{font:650 16px/1.3 var(--bd);color:var(--navy);margin-top:6px}
.svc-ticks{list-style:none;padding:0;margin:26px 0 0;max-width:30em}
.svc-ticks li{display:flex;gap:12px;padding:12px 0;border-top:1px dashed #cfc5b2;font-size:17px}
.svc-ticks li:last-child{border-bottom:1px dashed #cfc5b2}
.svc-ticks .ic{color:var(--green);margin-top:3px}

.svc-more{padding-top:40px}
.svc-more-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:start}
.svc-more-list article{display:grid;grid-template-columns:70px minmax(0,1fr);gap:26px;padding:30px 0;border-top:1.5px solid #d6ccb8}
.svc-more-list article:last-child{border-bottom:1.5px solid #d6ccb8}
.svc-mk{position:relative;width:62px;height:58px;margin-top:2px}
.svc-mk .cut{inset:0;width:100%;--z:.012}
.svc-more-list p{margin:0;color:var(--ink2);font-size:17px;max-width:34em}

/* ---------- questions, related links, closing ---------- */
.svc-faq{padding-top:30px;padding-bottom:70px}
.svc .svc-faq-in{margin-top:0}
.svc-related{margin:44px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px;color:var(--ink2)}
.svc-related .more{margin-top:0}
.svc-close{position:relative;margin-top:40px}
.svc-close-sheet{background:var(--navy);color:#fff;padding:46px 0 60px}
.svc-close-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end}
.svc-close h2{font:800 clamp(40px,4.8vw,70px)/.98 var(--hd);letter-spacing:-.04em;margin:0;max-width:13em;text-wrap:balance}
.svc-close h2 .in{color:var(--hmint);display:block}
.svc-close h2+p{font-size:19px;color:#d9e3f5;max-width:32em;margin:22px 0 0}
.svc-close h2+p a{color:#fff;font-weight:700;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:4px}
.svc-close :focus-visible{outline-color:var(--hmint)}
.svc-close-in .svc-close-cut{right:2%;top:-128px;width:104px;--z:.05}
/* the postcode form in the closing panel (water and waste): a paper card carrying its own ink */
.svc-close-in:has(.svc-close-form){align-items:center}
.svc-close-form{position:relative;z-index:2;scroll-margin-top:24px}
.svc-close-form .qcard{width:424px}
.svc-close .qcard :focus-visible{outline-color:var(--deep)}

/* ---------- small desktop and tablet ---------- */
@media (max-width:1240px) and (min-width:1100px){
  .svc-hero-grid{grid-template-columns:minmax(0,1fr) 460px;gap:44px}
  .svc-hero-wide{grid-template-columns:minmax(0,1fr) 520px}
  .svc-collage-wide .svc-ph,.svc-collage-wide .svc-c-back{width:520px}
  .svc-collage-wide .svc-c-note{left:60px}
  .svc-collage-tall .svc-ph{right:30px;width:310px}
  .svc-collage-tall .svc-c-note{right:-10px;width:360px}
}
@media (max-width:1099px){
  .svc-hero-grid,.svc-hero-wide{grid-template-columns:1fr;gap:44px}
  .svc-collage-tall{max-width:540px;height:640px;width:100%}
  .svc-collage-wide{max-width:640px;width:100%;height:600px}
  .svc-head-split{grid-template-columns:1fr;gap:18px}
  .svc-two,.svc-quote-grid,.svc-duty-grid,.svc-settle-grid,.svc-care-grid,.svc-more-grid{grid-template-columns:1fr;gap:56px}
  .svc-duty-note{justify-self:start}
  .svc-cal{grid-template-columns:260px 260px;gap:60px}
  .svc-cal-note{grid-column:1/-1}
  .svc-machine-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-cardonly{justify-self:start}
  .svc-care-fig{justify-content:flex-start}
  .yr.yr-wa h3,.yr.yr-wa p{margin-left:calc(100% - 400px)}
}
/* phones */
@media (max-width:719px){
  .svc-hero{padding:8px 0 60px}
  .svc .crumbs ol{margin-bottom:18px}
  .svc-h1{font-size:clamp(40px,11.6vw,54px)}
  .svc-pay .svc-h1{font-size:clamp(34px,11vw,46px)}
  .svc-hero-copy{padding-top:0}
  .svc-hero .lede{margin-top:20px}
  .svc-cta .btn{flex:1 1 auto}
  .svc-collage-tall{height:540px}
  .svc-collage-tall .svc-c-back{right:-46px;top:-8px;width:300px}
  .svc-collage-tall .svc-ph{right:8px;top:14px;width:min(250px,72vw)}
  .svc-collage-tall .svc-c-scrap{left:-6px;top:268px;width:86px}
  .svc-collage-tall{height:auto}
  .svc-collage-tall .svc-c-note{position:relative;left:0;right:auto;top:auto;width:100%;margin-top:324px}
  .svc-collage-wide{height:470px}
  .svc-collage-wide .svc-c-back{left:-14px;top:-8px;width:100%}
  .svc-collage-wide .svc-ph{width:100%}
  .svc-collage-wide{height:auto}
  .svc-collage-wide .svc-ph{position:relative}
  .svc-collage-wide .svc-c-note{position:relative;left:0;top:auto;bottom:auto;width:100%;margin-top:-30px}
  .svc-sec{padding:70px 0}
  .svc-hero{padding-bottom:40px}
  .svc-band-sheet{padding:40px 0 70px}
  .svc-h3{font-size:23px}
  .svc-pipes-wrap,.svc-bins-wrap,.svc-lineup-wrap{margin:34px -10px 0}
  .svc-two{gap:36px;margin-top:30px}
  .svc-years{margin-top:40px}
  .yr.yr-en h3,.yr.yr-en p,.yr.yr-wa h3,.yr.yr-wa p{margin-left:0}
  .svc-streams-list{grid-template-columns:1fr;margin-top:30px}
  .svc-duty-note{transform:rotate(.8deg)}
  .svc-recycle{margin-top:84px}
  .svc-cal{grid-template-columns:1fr;gap:56px;margin-top:44px}
  .svc-cal-page{width:240px}
  .svc-cal .svc-cal-tab{right:-40px}
  .svc-machine-list{grid-template-columns:1fr;gap:0}
  .svc-machine-list>div{padding:16px 0}
  .svc-days{gap:14px;margin-top:34px}
  .svc-days li+li::before{left:-12px;width:10px}
  .svc-days li.svc-payday{flex-grow:1.55}
  .svc-days .d{font-size:20px;top:29%}
  .svc-days .t{font-size:13px;padding:0 4px}
  .svc-cardonly{max-width:330px}
  .svc-care-fig{padding:0 0 0 24px}
  .svc-ptag{width:300px}
  .svc-ptag p{left:23%}
  .svc-price{font-size:58px}
  .svc-per{font-size:14px}
  .svc-more-list article{grid-template-columns:52px minmax(0,1fr);gap:18px;padding:24px 0}
  .svc-mk{width:48px;height:45px}
  .svc-related{gap:6px 20px}
  .svc-close-sheet{padding:34px 0 46px}
  .svc-close-in{grid-template-columns:1fr;gap:30px}
  .svc-close-in .svc-close-cut{right:-6px;top:-96px;width:76px}
  .svc-close .cta-btns{align-items:flex-start}
  .svc-close-form .qcard{width:auto}
}
@media (prefers-reduced-motion:reduce){
  .js .svc-pipes .run{stroke-dashoffset:0;transition:none}
  .js .svc-drip-on.on .svc-drip{animation:none}
  .svc-env-move,.svc-t,.svc-rcpt{transition:none}
  .js .svc-pipes-wrap:not(.on) .svc-env-move{transform:none;opacity:1}
  .js .svc-bins-wrap.on .svc-lid{animation:none}
  .js .svc-lineup-wrap:not(.on) .svc-t{opacity:1;transform:none}
  .js .svc-lineup-wrap:not(.on) .svc-rcpt{transform:none}
}