/* J and H Glass. Tokens live in DESIGN.md. */
@font-face{font-family:"Archivo";src:url(../fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --ink:#0E2226;--ink2:#16333A;--slate:#46595E;--clear:#F1F6F5;--pane:#E0EBE9;--white:#FBFDFC;
  --edge:#12A08A;--edge-d:#0A7F6D;--edge-l:#2CCDB2;
  --page-max:1440px;--page-gut:clamp(20px,3.4vw,48px);
  --sec:clamp(56px,8vw,116px);
  --r:4px;--ease:cubic-bezier(.22,.8,.2,1);
  --fh:"Archivo",system-ui,sans-serif;--fb:"Instrument Sans",system-ui,sans-serif;
  --hw:640;--hs:118%;--hls:-.02em;--hscale:1;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--clear);color:var(--ink);font:400 17px/1.55 var(--fb);-webkit-font-smoothing:antialiased}
main{overflow-x:clip;display:block}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--edge-l);outline-offset:3px}
.wrap{width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--page-gut)}
.skip{position:fixed;left:12px;top:-60px;z-index:10001;background:var(--white);padding:10px 14px;border-radius:var(--r)}
.skip:focus{top:12px}

/* headings */
.h,.hero__t,.card h3,.b h3,.steps__l h3,.q button,.hrs h3,.ftr__mega,.code b,.fact b,.ftr__tel,.nav a,.menu__nav a,.col h2{font-family:var(--fh);font-stretch:var(--hs);font-weight:var(--hw);letter-spacing:var(--hls)}
.h{font-size:calc(clamp(32px,4.1vw,60px)*var(--hscale));line-height:1.06;max-width:21ch}
.h em{font-style:normal;color:var(--edge-d)}
.lead{max-width:60ch;margin-top:16px;color:var(--slate)}

/* buttons: the box never moves */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border:1px solid transparent;border-radius:var(--r);font:600 16px/1 var(--fb);text-decoration:none;white-space:nowrap;cursor:pointer;overflow:hidden;isolation:isolate;background:none;transition:color .35s var(--ease),border-color .35s var(--ease)}
.btn{gap:0}
.btn__t{position:relative;z-index:2;display:block}
.ico{display:none;position:relative;z-index:2;flex:none;width:18px;height:18px}
.btn--solid{background:var(--white);color:var(--ink)}
.btn--ghost{border-color:rgba(255,255,255,.55);color:var(--white)}
.btn--line{border-color:currentColor}
/* 1. Glint: a brand fill wipes across behind a bright diagonal line */
.btn::before{content:"";position:absolute;inset:-1px;z-index:0;background:var(--edge);transform:translateX(-112%) skewX(-18deg);transform-origin:left;transition:transform .55s var(--ease)}
.btn::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:10px;z-index:1;background:rgba(255,255,255,.75);transform:translateX(-30px) skewX(-18deg);transition:transform .55s var(--ease)}
@media (hover:hover){
  .btn:hover::before{transform:translateX(0) skewX(0)}
  .btn:hover::after{transform:translateX(calc(var(--bw,320px) + 30px)) skewX(-18deg)}
  .btn:hover{color:var(--white);border-color:var(--edge)}
}
.est .form .btn--solid,.b--est .btn--solid{background:var(--ink);color:var(--white)}
/* 2. Bloom: pill, the fill grows from where the cursor came in */
html[data-btn="2"] .btn{border-radius:999px;padding:0 28px}
html[data-btn="2"] .btn::before{inset:auto;left:var(--mx,50%);top:var(--my,50%);width:12px;height:12px;margin:-6px;border-radius:50%;transform:scale(0);transition:transform .6s var(--ease)}
html[data-btn="2"] .btn::after{display:none}
@media (hover:hover){html[data-btn="2"] .btn:hover::before{transform:scale(70)}}
/* 3. Polished edge: square pane with a thick green edge that floods the button, label rolls */
html[data-btn="3"] .btn{border-radius:0;padding:0 34px 0 24px}
html[data-btn="3"] .btn::before{inset:-1px -1px -1px auto;width:8px;transform:none;transition:width .5s var(--ease)}
html[data-btn="3"] .btn::after{display:none}
html[data-btn="3"] .btn__t{overflow:hidden;line-height:1.3}
html[data-btn="3"] .btn__t b{display:block;font-weight:inherit;transition:transform .5s var(--ease)}
html[data-btn="3"] .btn__t b+b{position:absolute;left:0;top:100%}
@media (hover:hover){
  html[data-btn="3"] .btn:hover::before{width:calc(100% + 2px)}
  html[data-btn="3"] .btn:hover .btn__t b{transform:translateY(-100%)}
}
.tlink{display:inline-block;font-weight:600;color:var(--edge-d);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .3s var(--ease)}
.tlink:hover{color:var(--ink)}

/* the signature: glass frames with polished green edges, standoff bolts and spigot feet */
.frame{position:relative;padding:9px;background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(205,226,222,.5));border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),inset -3px 0 0 var(--edge),inset 0 -1px 0 rgba(18,160,138,.55),0 18px 40px -22px rgba(14,34,38,.45)}
.frame__in{position:relative;overflow:hidden;height:100%;border-radius:2px;background:var(--pane)}
.frame__in img,.frame__in picture{display:block;width:100%;height:100%;object-fit:cover}
.frame__in picture img{height:100%}
.bolt{position:absolute;width:13px;height:13px;border-radius:50%;z-index:2;background:radial-gradient(circle at 34% 30%,#fff 0 12%,#c5cfd0 30%,#6f7f83 64%,#2e3e42 100%);box-shadow:0 1px 2px rgba(14,34,38,.5)}
.bolt--tl{left:-1px;top:-1px;transform:translate(14px,14px)}.bolt--tr{right:-1px;top:-1px;transform:translate(-14px,14px)}
.bolt--bl{left:-1px;bottom:-1px;transform:translate(14px,-14px)}.bolt--br{right:-1px;bottom:-1px;transform:translate(-14px,-14px)}
.spig{position:absolute;bottom:-23px;width:22px;height:30px;z-index:3;border-radius:3px 3px 1px 1px;background:linear-gradient(90deg,#51646a 0,#e9f0f0 22%,#fff 34%,#8e9ea2 58%,#d7e0e1 78%,#46585d 100%);box-shadow:0 2px 3px rgba(14,34,38,.25)}
.spig::after{content:"";position:absolute;left:-7px;right:-7px;bottom:-4px;height:6px;border-radius:50%/60%;background:linear-gradient(90deg,#51646a,#f4f8f8 38%,#8e9ea2 64%,#46585d)}
.spig--a{left:13%}.spig--b{right:13%}.spig--c{left:50%;margin-left:-11px}

/* header */
.hdr{position:absolute;inset:0 0 auto 0;z-index:9999;color:var(--white);--logo-edge:var(--edge-l)}
.hdr__in{position:relative;display:flex;align-items:center;justify-content:space-between;height:78px;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--page-gut)}
.logo{display:block;color:inherit;line-height:0}.logo svg{height:27px;width:auto}
.nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:clamp(20px,2.6vw,38px)}
.nav a{position:relative;text-decoration:none;font-size:calc(16px*var(--hscale));padding:8px 0;font-weight:560}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--edge-l);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hdr__cta{display:flex;gap:10px;align-items:center}
.hdr .btn--line{color:var(--white);min-height:44px;padding:0 18px;border-color:rgba(255,255,255,.6)}
.burger{display:none;width:46px;height:46px;border:0;background:none;position:relative;padding:0;cursor:pointer;color:inherit}
.burger i{position:absolute;left:10px;right:10px;height:2px;background:currentColor;transition:transform .5s var(--ease),top .5s var(--ease)}
.burger i:nth-child(1){top:18px}.burger i:nth-child(2){top:27px}
.is-menu .burger i{top:22px}.is-menu .burger i:nth-child(1){transform:rotate(45deg)}.is-menu .burger i:nth-child(2){transform:rotate(-45deg)}
@media (max-width:999px){
  .nav{display:none}.burger{display:block}
  .hdr__in{height:66px}.logo svg{height:21px}
  .hdr__cta{gap:14px}.hdr__cta .btn{min-height:42px;padding:0 12px;font-size:14px;gap:6px;border-color:rgba(255,255,255,.6);background:transparent}
  .hdr__cta .btn .ico{display:block;width:16px;height:16px}
  .burger{margin-right:-8px}
  .hdr{position:fixed;transform:translate3d(0,0,0);will-change:transform;transition:transform .6s var(--ease),opacity .6s var(--ease),background-color .35s ease}
  .hdr.is-solid{background:var(--ink)}
  .hdr.is-hidden{transform:translate3d(0,calc(-100% - 24px),0);opacity:0;pointer-events:none}
  .is-menu .hdr{background:none;transform:translate3d(0,0,0);opacity:1;pointer-events:auto}
}

/* mobile menu: same movement open and closed */
.menu{position:fixed;inset:0;z-index:9998;background:var(--ink);color:var(--white);padding:112px var(--page-gut) 36px;display:flex;flex-direction:column;justify-content:space-between;transform:translate3d(0,-100%,0);visibility:hidden;transition:transform .6s var(--ease),visibility 0s linear .6s}
.is-menu .menu{transform:none;visibility:visible;transition:transform .6s var(--ease),visibility 0s}
.menu__nav{display:flex;flex-direction:column;gap:10px}
.menu__nav a{text-decoration:none;font-size:calc(clamp(30px,8.6vw,48px)*var(--hscale));line-height:1.2}
.menu__nav a,.menu__foot{opacity:0;transform:translateY(22px);transition:opacity .4s var(--ease),transform .4s var(--ease);transition-delay:calc((5 - var(--i))*40ms)}
.is-menu .menu__nav a,.is-menu .menu__foot{opacity:1;transform:none;transition-duration:.6s;transition-delay:calc(180ms + var(--i)*60ms)}
.menu__foot p{margin-top:12px;color:#b7c9ca}
.menu__foot .btn{width:100%}

/* hero */
.hero{position:relative;background:var(--ink)}
.hero__t{font-size:calc(clamp(34px,3.7vw,56px)*var(--hscale));line-height:1.06;color:var(--white)}
.hero__s{margin-top:16px;font-size:clamp(17px,1.3vw,19px);line-height:1.45;color:#E4EEED;max-width:44ch}
.hero__c{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.h2{position:relative;height:100svh;min-height:600px;overflow:hidden}
.h2__slides{position:absolute;inset:0;z-index:0;isolation:isolate}
.h2__s{position:absolute;inset:0;display:block;opacity:0;will-change:opacity;transition:opacity 1.4s cubic-bezier(.37,0,.63,1)}
.h2__s.is-on{opacity:1}
.h2__s img{width:100%;height:100%;object-fit:cover;will-change:transform}
.h2__s.z-in img{animation:hzIn 5.2s linear forwards}
.h2__s.z-out img{animation:hzOut 5.2s linear forwards}
@keyframes hzIn{from{transform:scale(1)}to{transform:scale(1.18)}}
@keyframes hzOut{from{transform:scale(1.18)}to{transform:scale(1)}}
.h2__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,34,38,.5),rgba(14,34,38,.1) 34%,rgba(14,34,38,.78))}
.h2__wrap{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:30px}
.h2 .hero__t{max-width:17ch}
.h2__bar{margin-top:30px;height:2px;background:rgba(255,255,255,.28);overflow:hidden}
.h2__bar i{display:block;height:100%;background:var(--edge-l);transform-origin:left;animation:hBar 3s linear both}
@keyframes hBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* at a glance */
.facts{background:var(--ink);color:var(--white)}
.facts__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-block:clamp(30px,3.6vw,48px)}
.fact b{display:block;font-size:calc(clamp(30px,3.2vw,46px)*var(--hscale));line-height:1.05;color:var(--edge-l);font-variant-numeric:tabular-nums}
.fact>span{display:block;margin-top:6px;color:#C9D9D9;max-width:26ch;font-size:16px}

/* marquee */
.mq{overflow:hidden;background:var(--pane);padding-block:15px}
.mq__t{display:flex;width:max-content;animation:mq 42s linear infinite;will-change:transform}
.mq__t span{font-family:var(--fh);font-stretch:var(--hs);font-weight:var(--hw);font-size:calc(19px*var(--hscale));white-space:nowrap;padding-right:64px;position:relative}
.mq__t span::after{content:"";position:absolute;right:26px;top:50%;width:12px;height:3px;margin-top:-1px;background:var(--edge);transform:rotate(-30deg)}
@keyframes mq{to{transform:translate3d(-50%,0,0)}}

/* services: pinned sideways */
.svc{position:relative;z-index:1;background:var(--clear);overflow:hidden}
.svc__head{max-width:var(--page-max);margin-inline:auto;padding-inline:var(--page-gut);padding-top:clamp(20px,6svh,64px)}
.svc__head p{margin-top:10px;color:var(--slate);max-width:56ch}
.svc__rail{padding-block:clamp(18px,4svh,40px) 16px}
.svc__track{display:flex;gap:clamp(20px,2.2vw,32px);width:max-content;padding-inline:max(var(--page-gut),calc((100vw - var(--page-max))/2 + var(--page-gut)));will-change:transform}
.card{--fh2:clamp(170px,calc(100svh - 360px),540px);width:calc(var(--fh2)*.86);min-width:270px;flex:none}
.card .frame{height:var(--fh2);margin-bottom:30px}
.card h3{font-size:calc(clamp(20px,1.7vw,25px)*var(--hscale));line-height:1.12}
.card p{margin:6px 0 8px;font-size:16px;line-height:1.4;color:var(--slate);max-width:32ch}
.card .tlink{font-size:15px}
.svc.is-static .svc__rail{overflow-x:auto}

@media (min-width:768px){.card{--fh2:clamp(240px,calc(100svh - 450px),620px)}}
@media (min-height:601px) and (max-height:780px) and (min-width:768px){.svc__head{padding-top:22px}.svc__head p{display:none}.svc .h{max-width:none;font-size:calc(clamp(32px,3.2vw,44px)*var(--hscale))}.svc__rail{padding-top:18px}.card{--fh2:clamp(200px,calc(100svh - 300px),470px)}}
@media (max-height:600px) and (min-width:768px){.svc__head{padding-top:14px}.svc__head p{display:none}.svc .h{font-size:calc(30px*var(--hscale));max-width:none}.svc__rail{padding-top:14px}.card{--fh2:clamp(150px,calc(100svh - 268px),300px)}.card .frame{margin-bottom:26px}.card h3{font-size:calc(19px*var(--hscale))}.card p{margin:3px 0 4px;font-size:14.5px;max-width:none}}

/* why bento */
.why{position:relative;z-index:2;background:var(--clear);padding-block:var(--sec)}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;margin-top:clamp(28px,3.4vw,48px)}
.b{border-radius:var(--r);min-width:0}
.b h3{font-size:calc(clamp(21px,1.8vw,27px)*var(--hscale));line-height:1.12}
.b p{margin-top:8px;color:var(--slate)}
.b--van{grid-column:span 7;grid-row:span 2;display:flex;flex-direction:column}
.b--van .frame{flex:1;min-height:320px}
.b--van .frame__in{position:absolute;inset:9px;height:auto}
.b--van .frame__in img{position:absolute;inset:-8% 0;height:116%}
.b__txt{padding:18px 4px 0}
.b--hrs{grid-column:span 5;background:var(--ink);color:var(--white);padding:clamp(22px,2.4vw,34px)}
.b--hrs p{color:#C9D9D9}.b--hrs a{color:var(--edge-l);font-weight:600;white-space:nowrap}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:18px}
.days li{position:relative;padding-top:50px;text-align:center;font-size:14px;color:#C9D9D9}
.days li::before{content:"";position:absolute;inset:0 0 auto 0;height:42px;border-radius:2px;background:linear-gradient(180deg,var(--edge-l),var(--edge))}
.b--est{grid-column:span 5;background:var(--pane);padding:clamp(22px,2.4vw,34px)}
.b--est .btn{margin-top:18px}
.b--edge{grid-column:span 5;position:relative;overflow:hidden;min-height:220px}
.b--edge img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover}
.b--who{grid-column:span 7;background:var(--white);padding:clamp(22px,2.4vw,34px);box-shadow:inset 0 0 0 1px rgba(14,34,38,.1)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tags li{padding:8px 14px;border-radius:var(--r);background:var(--pane);font-weight:500}

/* about */
.about{background:var(--white);padding-block:var(--sec)}
.about__g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5vw,80px)}
.about__txt>p{margin:18px 0 18px;color:var(--slate);max-width:48ch}
.about__txt{position:sticky;top:60px;align-self:start}
.about__pics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px}
.pic figcaption{margin-top:9px;font-size:15px;color:var(--slate)}
.pic .frame{aspect-ratio:4/3}
.pic .frame__in{position:absolute;inset:9px;height:auto}
.pic .frame__in img{position:absolute;inset:-8% 0;height:116%}
.pic--a{grid-column:1/-1}.pic--b{grid-column:span 3;margin-top:8px}.pic--c{grid-column:span 3;margin-top:44px}

/* steps */
.steps{position:relative;overflow:hidden;background:var(--ink);color:var(--white);padding-block:clamp(70px,10vw,140px)}
.steps__bg{position:absolute;inset:-14% 0}
.steps__bg img{width:100%;height:100%;object-fit:cover;opacity:.62}
.steps::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,34,38,.94) 0,rgba(14,34,38,.72) 60%,rgba(14,34,38,.4))}
.steps__in{position:relative;z-index:2}
.steps .h em{color:var(--edge-l)}
.steps__l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(30px,4vw,56px)}
.steps__l>li>span{font-family:var(--fh);font-stretch:var(--hs);font-weight:var(--hw);font-size:calc(clamp(50px,6vw,88px)*var(--hscale));line-height:1;color:var(--edge-l)}
.steps__l h3{margin-top:10px;font-size:calc(clamp(21px,1.8vw,27px)*var(--hscale));line-height:1.15}
.steps__l p{margin-top:8px;color:#D5E2E2;max-width:32ch}

/* expect */
.rev{background:var(--clear);padding-block:var(--sec)}
.rev__g{margin-top:clamp(26px,3vw,44px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px}
.rev blockquote{position:relative;padding:clamp(24px,2.6vw,38px);background:linear-gradient(135deg,var(--white),#E8F1EF);border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(14,34,38,.08),inset -4px 0 0 var(--edge)}
.rev blockquote p{font-family:var(--fh);font-stretch:var(--hs);font-weight:560;font-size:calc(clamp(21px,2vw,30px)*var(--hscale));line-height:1.2;letter-spacing:var(--hls)}
.rev blockquote:first-child{grid-row:span 2;background:var(--ink);box-shadow:inset -5px 0 0 var(--edge-l);display:flex;align-items:flex-end;min-height:280px}
.rev blockquote:first-child p{color:var(--white);font-size:calc(clamp(27px,3vw,46px)*var(--hscale));line-height:1.1;max-width:15ch}
.rev__g-review{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:26px}
.rev__g-review p{max-width:60ch;color:var(--slate)}.rev__g-review strong{color:var(--ink)}

/* standards */
.std{background:var(--white);padding-block:var(--sec)}
.std__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);margin-top:clamp(26px,3vw,44px)}
.code b{display:block;font-size:calc(clamp(24px,2.5vw,38px)*var(--hscale));line-height:1.08;padding-bottom:12px;border-bottom:3px solid var(--edge);white-space:nowrap}
.code>span{display:block;margin-top:12px;color:var(--slate);max-width:26ch}

/* areas */
.areas{background:var(--clear);padding-block:var(--sec)}
.areas__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:stretch}
.subs{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.subs a{display:block;padding:8px 13px;border-radius:var(--r);background:var(--white);box-shadow:inset 0 0 0 1px rgba(14,34,38,.13);font-size:15.5px;font-weight:500;text-decoration:none;transition:background .3s var(--ease),color .3s var(--ease)}
.subs a:hover{background:var(--edge-d);color:var(--white)}
.hrs{margin-top:28px}
.hrs h3{font-size:calc(22px*var(--hscale))}
.hrs p{margin-top:6px;color:var(--slate)}.hrs b{color:var(--ink);font-weight:600;margin-right:6px}
.hrs a{color:var(--edge-d);font-weight:600;text-underline-offset:3px}
.map{min-height:clamp(340px,44vw,600px)}
.map .frame__in{position:absolute;inset:9px;height:auto}
.map iframe{width:100%;height:100%;border:0;display:block;pointer-events:none}
.map.is-active iframe{pointer-events:auto}

/* estimate */
.est{position:relative;overflow:hidden;background:var(--ink);color:var(--white);padding-block:var(--sec)}
.est__bg{position:absolute;inset:-12% 0}
.est__bg img{width:100%;height:100%;object-fit:cover}
.est::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,34,38,.86),rgba(14,34,38,.55))}
.est__g{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.est .h em{color:var(--edge-l)}
.est__l>p{margin-top:16px;max-width:42ch;color:#E4EEED}
.est__tel{font-family:var(--fh);font-stretch:var(--hs);font-weight:var(--hw);font-size:calc(clamp(21px,2vw,28px)*var(--hscale))}
.est__tel a{color:var(--edge-l);white-space:nowrap}
.form{position:relative;padding:clamp(22px,2.6vw,36px);background:var(--white);color:var(--ink);border-radius:var(--r);box-shadow:inset -5px 0 0 var(--edge),0 34px 70px -30px rgba(0,0,0,.7);display:grid;gap:16px}
.form .pane__glint::before{animation:none}
.f{display:grid;gap:6px;min-width:0}
.f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.f label{font-weight:600;font-size:15.5px}.f label i{font-style:normal;font-weight:400;color:var(--slate)}
.f input,.f select,.f textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid #8EA3A6;border-radius:var(--r);background:#fff;font-size:17px}
.f textarea{resize:vertical;min-height:88px}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--edge);outline-offset:0;border-color:var(--edge)}
.f__e{display:none;color:#B3261E;font-size:14.5px}
.f.is-bad input,.f.is-bad select{border-color:#B3261E}.f.is-bad .f__e{display:block}
.form .btn{width:100%;min-height:56px}
.form__ok{font-size:15.5px;color:var(--edge-d);font-weight:500}

/* faq */
.faq{background:var(--clear);padding-block:var(--sec)}
.faq__g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px)}
.faq .h{align-self:start}
.q{border-bottom:1px solid rgba(14,34,38,.16)}
.q:first-child{border-top:1px solid rgba(14,34,38,.16)}
.q button{display:flex;width:100%;gap:18px;align-items:center;justify-content:space-between;padding:20px 0;border:0;background:none;text-align:left;cursor:pointer;font-size:calc(clamp(18px,1.5vw,22px)*var(--hscale));line-height:1.2;font-weight:560}
.q button i{position:relative;flex:none;width:18px;height:18px}
.q button i::before,.q button i::after{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:var(--edge-d);transition:transform .5s var(--ease)}
.q button i::after{transform:rotate(90deg)}
.q.is-open button i::after{transform:rotate(0)}
.q__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.q__a>div{overflow:hidden}
.q__a p{padding:0 34px 22px 0;color:var(--slate);opacity:0;transition:opacity .4s ease}
.q.is-open .q__a{grid-template-rows:1fr}
.q.is-open .q__a p{opacity:1}

/* footer */
.ftr{position:relative;background:var(--ink);color:var(--white);overflow:hidden;--logo-edge:var(--edge-l)}
.ftr__g{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,56px);padding-block:clamp(48px,6vw,84px) clamp(36px,4vw,56px);position:relative;z-index:1}
.ftr__line{margin-top:16px;max-width:30ch;color:#C9D9D9}
.ftr__tel{display:inline-block;margin-top:14px;font-size:calc(clamp(24px,2.3vw,34px)*var(--hscale));color:var(--edge-l);text-decoration:none;white-space:nowrap}
.col h2{font-size:calc(clamp(21px,1.75vw,26px)*var(--hscale));color:var(--edge-l);margin:0 0 14px;line-height:1.1}
.col a,.col p{display:block;margin-bottom:8px;font-size:15.5px;color:#E0EBEA;text-decoration:none;line-height:1.35}
.col a:hover{color:var(--edge-l)}
.ftr__base{position:relative;z-index:1;padding-bottom:26px}
.ftr__base p{padding-top:18px;font-size:14.5px;color:#B7C9CA}
.ftr__base a{color:var(--edge-l);font-weight:600}
/* big wordmark along the very bottom */
.ftr__mega{position:relative;z-index:0;text-align:center;line-height:.86;white-space:nowrap;font-size:17.6vw;color:transparent;background:linear-gradient(180deg,var(--edge-l),var(--edge) 70%,rgba(18,160,138,.15));-webkit-background-clip:text;background-clip:text;padding-top:clamp(10px,2vw,28px);font-stretch:112%;letter-spacing:-.03em}

/* quick contact dock on phones */
.dock{display:none}
@media (max-width:767px){
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--ink);transform:translate3d(0,110%,0);transition:transform .5s var(--ease)}
  .dock.is-on{transform:none}
  .dock .btn{min-height:48px;padding:0 8px;font-size:15px;gap:7px}.dock .ico{display:block;width:17px;height:17px}.dock .btn--line{color:var(--white);border-color:rgba(255,255,255,.55)}
}

/* responsive */
@media (max-width:999px){
  .about__g,.faq__g,.areas__g,.est__g{grid-template-columns:minmax(0,1fr)}
  .about__txt{position:static}
  .b--van,.b--hrs,.b--est,.b--edge,.b--who{grid-column:1/-1}
  .b--van{grid-row:auto}
  .std__g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr__g{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ftr__brand{grid-column:1/-1}
}
@media (max-width:767px){
  body{font-size:16.5px}
  .h{max-width:none;width:100%;font-size:calc(clamp(30px,8.4vw,42px)*var(--hscale))}
  .hero__t{font-size:calc(clamp(31px,8.6vw,44px)*var(--hscale))}
  .hero__c .btn{flex:1 1 100%}
  .facts__g{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}
  .svc__head{padding-top:18px;padding-bottom:50px}
  .svc__head p{font-size:15.5px}
  .svc__rail{padding-top:0}
  .card{--fh2:clamp(150px,calc(100svh - 470px),400px);width:min(76vw,330px);min-width:0}
  .card p{font-size:15px}
  .bento{gap:14px}
  .about__pics{gap:16px}
  .pic--a{grid-column:1/-1}.pic--b,.pic--c{grid-column:1/-1;margin-top:0}
  .steps__l{grid-template-columns:minmax(0,1fr)}
  .steps::before{background:rgba(14,34,38,.82)}
  .rev__g{grid-template-columns:minmax(0,1fr)}
  .rev blockquote:first-child{min-height:0}
  .rev__g-review .btn{width:100%}
  .std__g{gap:24px 16px}
  .code b{font-size:calc(clamp(22px,6.2vw,30px)*var(--hscale))}
  .f2{grid-template-columns:minmax(0,1fr)}
  .ftr__g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr{padding-bottom:70px}
}
@media (max-width:400px){.logo svg{height:17px}.hdr__cta .btn{padding:0 9px;font-size:13px;gap:5px}.hdr__cta .btn .ico{width:14px;height:14px}.burger{width:40px}.burger i{left:8px;right:8px}}

.rail{display:none}
.exp,.only-m{display:none}

/* phone-only section work */
@media (max-width:767px){
  .h2__shade{background:linear-gradient(180deg,rgba(14,34,38,.5),rgba(14,34,38,.12) 26%,rgba(14,34,38,.72) 52%,rgba(14,34,38,.88))}
  /* about: button and proper titles under the photos */
  .only-d{display:none}
  .only-m{display:inline-flex}
  .about .btn--solid{background:var(--ink);color:var(--white)}
  .pic figcaption{margin-top:12px;font-family:var(--fh);font-stretch:var(--hs);font-weight:var(--hw);letter-spacing:var(--hls);font-size:21px;line-height:1.15;color:var(--ink)}
  .ftr__brand{display:none}
  /* counters */
  .fact b{font-size:30px}
  .fact--n b{font-size:clamp(62px,18vw,88px);line-height:1}
  /* marquee */
  .mq{background:var(--edge-l)}
  .mq__t span::after{background:var(--ink)}
  /* more room above the sideways section */
  .svc__head{padding-top:48px}
  .card{--fh2:clamp(150px,calc(100svh - 500px),400px)}
  /* process: panes run the full width, a green rail fills down their left edge with a chrome bolt riding it */
  .steps{padding-block:64px}
  .steps__l{position:relative;gap:18px;margin-top:30px}
  .rail{display:block;z-index:3;position:absolute;left:0;top:0;bottom:0;width:3px;background:rgba(255,255,255,.18);border-radius:2px}
  .rail b{position:absolute;inset:0;background:var(--edge-l);transform:scaleY(0);transform-origin:top}
  .rail .bolt{left:-5px;top:-6px;transform:none}
  .steps__l>li{position:relative;overflow:hidden;padding:18px 20px 20px;border-radius:var(--r);background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset -4px 0 0 rgba(44,205,178,.28);transition:box-shadow .6s var(--ease),background .6s var(--ease)}
  .steps__l>li>span{display:block;font-size:68px;transition:color .6s var(--ease)}
  .steps__l.mo>li>span{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55)}
  .steps__l.mo>li.is-on>span{color:var(--edge-l);-webkit-text-stroke-color:var(--edge-l)}
  .steps__l.mo>li.is-on{background:linear-gradient(135deg,rgba(44,205,178,.2),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset -4px 0 0 var(--edge-l)}
  .steps__l>li::before{content:"";position:absolute;top:-30%;bottom:-30%;left:-150px;width:90px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transform:rotate(16deg)}
  .steps__l.mo>li.is-on::before{animation:sweep 1.3s var(--ease) forwards}
  /* expect: each promise is a framed photo on spigots with a glass plate bolted across it, offset side to side */
  .rev__g{display:none}
  .exp{display:block;margin-top:34px}
  .ex{position:relative;margin-bottom:54px}
  .ex:last-child{margin-bottom:0}
  .ex__f{width:84%;height:clamp(300px,92vw,460px)}
  .ex__f .frame__in{position:absolute;inset:9px;height:auto}
  .ex__f .frame__in img{position:absolute;inset:-9% 0;height:118%}
  .ex--r .ex__f{margin-left:auto}
  .ex__f::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.34) 50%,transparent 58%) no-repeat;background-size:260% 100%;background-position:130% 0}
  .ex.is-in .ex__f::after{transition:background-position 1.5s var(--ease) .25s;background-position:-60% 0}
  .ex__c{position:relative;z-index:4;width:86%;margin-top:-74px;margin-left:auto;padding:22px 26px 24px;background:var(--ink);color:var(--white);border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset -5px 0 0 var(--edge-l),0 26px 44px -22px rgba(14,34,38,.75)}
  .ex--r .ex__c{margin-left:0}
  .ex__c b{display:block;font-family:var(--fh);font-stretch:var(--hs);font-weight:var(--hw);letter-spacing:var(--hls);font-size:clamp(42px,12.4vw,58px);line-height:1;color:var(--edge-l)}
  .ex__c p{margin-top:10px;font-size:17px;line-height:1.4;color:#E4EEED}
  .ex__c .bolt{width:10px;height:10px;opacity:.9}
  .ex__c .bolt--tl{transform:translate(9px,9px)}.ex__c .bolt--tr{transform:translate(-14px,9px)}
  .ex__c .bolt--bl{transform:translate(9px,-9px)}.ex__c .bolt--br{transform:translate(-14px,-9px)}
  /* standards: big counters in rows */
  .std__g{grid-template-columns:minmax(0,1fr);gap:30px}
  .code b{font-size:clamp(50px,15vw,72px);line-height:1;font-variant-numeric:tabular-nums;padding-bottom:14px}
  .code .pre{display:block;font-size:20px;line-height:1.2;margin-bottom:4px;color:var(--edge-d);letter-spacing:0}
  .code>span{margin-top:12px;max-width:none;font-size:17px}
}
@keyframes sweep{to{left:120%}}

@media (prefers-reduced-motion:reduce){
  .h2__s img,.h2__bar i{animation:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .mq__t{animation:none}
}