/* 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}
.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 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,.qcard .thanks p{color:var(--ink2)}
.qcard .thanks li{color:var(--ink)}
.thanks{display:none}
.qcard.done .qform{display:none}
.qcard.done .thanks{display:block;animation:fade .5s ease both}
.thanks .tick{width:54px;height:54px;border-radius:50%;background:#dcf3e6;color:var(--green);display:grid;place-items:center;margin-bottom:16px}
.thanks .tick .ic{width:28px;height:28px;stroke-width:2.2}
.thanks-title{margin-bottom:8px}
.thanks p{margin:0 0 14px;color:var(--ink2)}
.thanks p a{font-weight:700;color:var(--navy)}
.thanks ul{margin:0 0 18px;padding:0;list-style:none}
.thanks li{display:flex;gap:10px;padding:10px 0;border-top:1px dashed var(--line);font-size:16px}
.thanks li .ic{color:var(--deep);margin-top:3px}
.again{background:none;border:0;padding:6px 0;font:650 16px var(--bd);color:var(--deep);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
@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 15px var(--bd);fill:var(--navy)}
.terminal .t-r-s{font:600 12.5px 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}
.legal .foot-credit a{color:inherit;text-decoration:underline;text-decoration-color:rgba(169,184,214,.4);text-underline-offset:3px}
.legal .foot-credit a:hover{color:#fff;text-decoration-color:var(--mint)}

/* ---------- 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); its story note stays below the form */
  .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 + .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{height:auto;margin-top:40px;padding-top:26px}
  .ph-wrap .ph-hero,.ph-wrap .c-blue{display:none}
  .ph-wrap .c-scrap{left:auto;right:14px;top:0;bottom:auto;width:84px}
  .ph-wrap .c-note{position:relative;left:0;bottom:auto;width:min(330px,94%)}
  .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 path: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,.qcard.done .thanks{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}
}

/* ==========================================================================
   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 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 12px/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:11px;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}
@media (max-width:719px){
  .ck{left:10px;right:10px;bottom:10px;width:auto}
  .ck-card{padding:14px 14px 12px}
  .ck-card::before{width:72px;height:16px;top:-7px}
  .ck-text{font-size:14px;line-height:1.45}
  .ck-btns{gap:8px;margin-top:10px}
  .ck-btn{flex:1 1 0;padding:10px 12px;font-size:14.5px}
  .ck-link{flex-basis:100%;padding:2px 0;font-size:14px;text-align:left}
}
@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 12.5px/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:12.5px;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
   ========================================================================== */
.gas-art{position:relative;height:640px}
.gas-art .ga-mint{left:-30px;bottom:40px;width:360px;--z:.05}
.gas-art .ga-sheet{right:40px;top:0;width:410px;--z:.03}
.en .flame-wrap.gas-flame{position:absolute;left:auto;right:120px;top:84px;bottom:auto;width:250px;z-index:3}
.ga-tag{position:absolute;right:-10px;top:430px;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 12px/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}
.gw-pub{grid-row:span 2;max-width:460px}
.gw-pub .photo-back{position:absolute;left:-7%;top:-5%;width:100%}
.gw-bakery{margin-top:40px}
.gw-bakery .photo-back{position:absolute;left:4%;top:-8%;width:100%}
.gw-cafe{width:50%;max-width:300px;justify-self:end;margin:30px 4% 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}
  .gas-art .ga-sheet{width:400px;right:10px}
  .en .flame-wrap.gas-flame{right:90px;width:230px}
  .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,.gas-art{width:100%;max-width:540px;justify-self:center;height:620px}
  .gas-art{height:600px}
  .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{grid-row:auto}
  .gw-cafe{width:80%}
  .gw-bakery{grid-column:1/-1;order:-1;margin-top:0;max-width:640px}
  .en-fixed-note{max-width:440px}
}
/* ---------- 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}
  .gas-art{height:470px}
  .gas-art .ga-sheet{right:auto;left:calc(50% - 150px);width:300px}
  .gas-art .ga-mint{left:-40px;bottom:20px;width:260px}
  .en .flame-wrap.gas-flame{right:auto;left:calc(50% - 82px);top:66px;width:164px}
  .ga-tag{right:0;top:auto;bottom:6px;width:190px}
  .ga-tag .ga-string{display:none}
  .ga-tag .v{font-size:20px}
  .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,.gas-art,.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: the rows run off both edges of the page */
.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;will-change:transform}

/* 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}
}
@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:12.5px}
}

/* ===== 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 13px var(--bd);fill:var(--navy)}
.svc-r-s{font:600 11.5px 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 p{font-size:19px;color:#d9e3f5;max-width:32em;margin:22px 0 0}
.svc-close 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}

/* ---------- 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:11.5px;padding:0 6px}
  .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}
}
@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}
}