:root{--p:#f4f3ee;--p2:#eae8e0;--k:#121512;--mut:#7a807a;--ln:rgba(18,21,18,.12);--g:#45b549;--l:#85c340;--y:#cada2a;--bp:#2b5f8a;--d:'Big Shoulders Display',Impact,sans-serif;--u:'Inter Tight',system-ui,sans-serif;--m:'JetBrains Mono',monospace;--pad:clamp(1.25rem,5vw,5rem);--e:cubic-bezier(.2,.7,0,1)}
*{box-sizing:border-box;margin:0;padding:0}body{background:var(--p);color:var(--k);font:300 17px/1.6 var(--u);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}ul,ol{list-style:none}:focus-visible{outline:2px solid var(--g);outline-offset:3px}
.skip{position:fixed;left:-999px;top:.5rem;background:var(--l);padding:.5rem 1rem;z-index:99}.skip:focus{left:.5rem}
.mono{font:300 .72rem/1.5 var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
h1,h2,h3{font-family:var(--d);font-weight:900;text-transform:uppercase;line-height:1.04;letter-spacing:-.005em}
.thin{font-family:var(--u);font-weight:200;text-transform:none;letter-spacing:-.04em;font-style:normal}
h1{font-size:clamp(3rem,8vw,8.5rem)}h2{font-size:clamp(2.4rem,5.5vw,5.5rem)}h3{font-size:clamp(1.4rem,2vw,1.9rem)}
.wrap{padding-inline:var(--pad);max-width:1500px;margin:auto}.sec{padding-block:clamp(4rem,9vw,8rem)}
.lede{font-size:clamp(1.05rem,1.4vw,1.3rem);max-width:34ch;color:#3e443e;margin-top:1.4rem}
.pill{display:inline-flex;align-items:center;padding:.7rem 1.25rem;border-radius:99px;font:400 .9rem var(--u);border:1px solid var(--k);transition:.3s var(--e);cursor:pointer;background:none;color:inherit}
.pill:hover{background:var(--k);color:var(--p)}.pill-g{background:var(--g);border-color:var(--g);color:var(--k)}.pill-g:hover{background:var(--k);border-color:var(--k);color:var(--p)}
.arrow{font-weight:400;border-bottom:1px solid;padding-bottom:2px;transition:color .2s}.arrow:hover{color:var(--g)}
.ph,.ph-block{color:#b8741a}.ph-block{border:1px dashed #d9a050;padding:1rem;margin-top:2rem;font-size:.9rem}
/* header */
.hd{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:1.6rem;padding:.7rem var(--pad);font-size:.88rem;transition:background .4s,backdrop-filter .4s}
.hd.s{background:rgba(244,243,238,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--ln)}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:500}.brand img{width:26px}.brand em{font-style:normal;color:var(--g)}
#menu{margin-left:auto}#menu ul{display:flex;gap:1.4rem}#menu a{position:relative;font-weight:400}#menu a:after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:.35s var(--e)}#menu a:hover:after,#menu a[aria-current]:after{transform:none}
.hd-tel{font-family:var(--m);font-size:.78rem}.hd .pill{padding:.45rem .95rem;font-size:.82rem}
.burger{display:none;width:40px;height:40px;border:1px solid var(--k);border-radius:50%;background:none;position:relative;cursor:pointer}.burger i{position:absolute;left:11px;right:11px;height:1px;background:var(--k);transition:.3s}.burger i:first-child{top:16px}.burger i:last-child{top:22px}.burger[aria-expanded=true] i{top:19px}.burger[aria-expanded=true] i:first-child{transform:rotate(45deg)}.burger[aria-expanded=true] i:last-child{transform:rotate(-45deg)}
/* depth gauge */
.gauge{position:fixed;right:1rem;top:50%;transform:translateY(-50%);z-index:40;display:flex;gap:.7rem;font:300 .64rem var(--m);text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
.g-line{width:1px;background:var(--ln);position:relative}.g-line i{position:absolute;left:-1px;top:0;width:3px;height:var(--gp,0%);background:var(--g);transition:height .2s}
.gauge ol{display:grid;gap:1.1rem}.gauge li span{display:none}.gauge li{display:grid;opacity:.45;transition:.3s}.gauge li b{font-weight:400;color:var(--k)}.gauge li.on{opacity:1}.gauge li.on b{color:var(--g)}
.gauge.dark{color:rgba(255,255,255,.6)}.gauge.dark li b{color:#fff}
/* hero */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:1fr 1.3fr;align-items:center;padding:6rem var(--pad) 3rem;gap:3rem}
.core{position:relative;aspect-ratio:4/3;margin-right:calc(var(--pad)*-1);order:2;overflow:hidden;border-radius:2px;cursor:crosshair}
.core img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.core:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);background-size:40px 40px;mix-blend-mode:overlay}
.core{background:#203a52}.h-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.5) brightness(1.1) sepia(.3) hue-rotate(170deg) saturate(1.7);animation:drift 24s ease-in-out infinite alternate}
.h-real-w{position:absolute;inset:0;z-index:2;clip-path:circle(var(--r,16%) at var(--x) var(--y));transition:clip-path .15s linear}.h-real-w img{animation:kb3 22s ease-in-out infinite alternate;transform-origin:var(--x) var(--y)}
@keyframes kb3{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.3) translate(-4%,-3%)}}@keyframes drift{from{transform:scale(1.04)}to{transform:scale(1.14) translate(2%,1%)}}
.core:before{animation:grid 8s linear infinite}@keyframes grid{to{background-position:40px 40px,40px 40px}}
.scan{position:absolute;left:0;right:0;top:0;height:30%;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(133,195,64,.18) 85%,rgba(202,218,42,.9) 100%);border-bottom:1px solid var(--y);animation:scan 5.5s cubic-bezier(.6,0,.4,1) infinite;mix-blend-mode:screen}
@keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(340%)}}
.hud{position:absolute;z-index:4;left:1rem;top:1rem;color:#fff;font-size:.62rem;display:flex;gap:.5rem;align-items:center}.hud b{font-weight:400;color:#ff5a4a;display:flex;gap:.35rem;align-items:center}.hud b:before{content:"";width:7px;height:7px;border-radius:50%;background:#ff5a4a;animation:blink 1.2s steps(2) infinite}@keyframes blink{50%{opacity:0}}
.core-ring{position:absolute;z-index:3;left:var(--x);top:var(--y);width:calc(var(--r,16%)*1.77);aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid #fff;border-radius:50%;pointer-events:none;mix-blend-mode:difference}
.hero-t h1{margin-top:1.4rem}.cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* blueprint -> photo */
.bp{position:relative;overflow:hidden;background:var(--bp)}.bp img{filter:grayscale(1) contrast(1.3) brightness(1.2);mix-blend-mode:luminosity;opacity:.55;transition:filter .9s var(--e) .35s,opacity .9s var(--e) .35s,mix-blend-mode 0s .8s,transform 1s var(--e)}
.bp:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px);background-size:24px 24px;transition:opacity .8s .35s;pointer-events:none}
.trace{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke;z-index:2}
.trace *{vector-effect:non-scaling-stroke;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset .8s var(--e),opacity .5s .8s}
.in .bp img,.bp.in img{filter:none;opacity:1;mix-blend-mode:normal}.in .bp:after,.bp.in:after{opacity:0}.in .trace *,.bp.in .trace *{stroke-dashoffset:0;opacity:0}
/* projects */
.row-h{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:3rem}.row-h h2{margin-top:.8rem}
.projs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,2rem)}.proj .bp{aspect-ratio:4/5}.proj .bp img{width:100%;height:100%;object-fit:cover}.proj:hover img{transform:scale(1.04)}
.proj .mono{margin-top:1rem}.proj h3{font-size:1.35rem;margin:.4rem 0}.pd{font-size:.88rem;color:var(--mut)}.proj:nth-child(even){margin-top:3rem}
/* bedrock */
.bedrock{background:var(--p2);padding-top:clamp(4rem,9vw,8rem);overflow:hidden}.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:2rem;border-top:1px solid var(--ln)}
.facts div{padding:2rem 1.5rem 2rem 0;border-right:1px solid var(--ln)}.facts div+div{padding-left:1.5rem}.facts div:last-child{border:0}.facts b{display:block;font:900 clamp(4rem,9vw,8rem)/.85 var(--d)}.facts span{font-size:.9rem;color:var(--mut)}
.motto{font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:clamp(2.2rem,6vw,6rem);line-height:1.04;margin:clamp(3rem,7vw,6rem) 0}
.logo-mq{overflow:hidden;padding:2.2rem 0;border-top:1px solid var(--ln);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}.mq-t{display:flex;width:max-content;animation:mq 70s linear infinite!important;will-change:transform}.logo-mq:hover .mq-t{animation-play-state:paused!important}.mq-t img{width:110px;height:110px;margin-right:2.5rem;object-fit:contain;mix-blend-mode:multiply;background:#fff;border-radius:10px;padding:8px;flex:none}@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* footer: the final layer. Since 2026-11-06 evening it is DARK with the user's daytime drone photo of a street being resurfaced (layout A + slogan 4 of footer-mockups.html): the photo fills the first screen and the words sit on the old road at the bottom, over a dark shade that runs into the details row. It still pins its own palette instead of using the page tokens. Mobile-first: on phones and upright tablets the photo fills one screen with the words at the bottom; from 901px wide (or 701px+ landscape) the whole footer is one screen, and from 1100px the phone number moves to the right of the headline. */
.ft{--k:#eef1ea;--p2:#0a0d0c;--g:#5fd35a;--l:#9be15a;--gd:#5fd35a;--ink2:#c3cac4;--mut2:#8d978f;--fe:cubic-bezier(.16,1,.3,1);position:relative;isolation:isolate;display:flex;flex-direction:column;background:var(--p2);color:var(--k)}.ft .mono{color:var(--mut2)}
.ft-stage{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh;min-height:100svh}
.ft-photo{position:absolute;inset:0;z-index:-1;overflow:hidden}.ft-edge{position:absolute;inset:0;overflow:hidden}.ft-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 72%}
.ft-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--p2) 0,rgba(10,13,12,.86) 27%,rgba(10,13,12,.42) 46%,rgba(10,13,12,0) 64%),linear-gradient(180deg,rgba(10,13,12,.55),rgba(10,13,12,0) 14%)}
.ft-copy{position:relative;padding:1.4rem var(--pad) 2.4rem}.ft-copy .mono{color:rgba(238,241,234,.8);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.ft-eye{display:flex;align-items:center;gap:.9rem}.ft-eye:before{content:"";width:2.2rem;height:1px;background:var(--gd)}
.ft-big{font:900 clamp(2.9rem,14.6vw,8rem)/1 var(--d);text-transform:uppercase;letter-spacing:-.005em;color:var(--k);margin:1.1rem 0 1.8rem}.ft-big span{display:block}
.ft-l1{overflow:hidden}.ft-l2{position:relative;overflow:hidden;width:max-content;max-width:100%;color:var(--gd);padding-right:.04em}
.ft-l2:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(100% - .045em),var(--g) calc(100% - .045em));transform:translateX(-100%);opacity:0}
.ft-act{display:grid;gap:1.4rem}
.ft-tel{display:block}.ft-tel .mono{display:block;margin-bottom:.5rem}
.ft-tel b{position:relative;display:block;width:max-content;max-width:100%;font:800 clamp(2.6rem,14.5vw,4.8rem)/.95 var(--d);letter-spacing:.012em;color:var(--k);transition:color .5s var(--fe)}
.ft-tel b:after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:2px;background:var(--gd);transform:scaleX(.16);transform-origin:left;transition:transform .7s var(--fe)}
.ft-tel:hover b{color:var(--gd)}.ft-tel:hover b:after{transform:none}
/* mobile number under the office one (2026-11-07, option A of phone-number-mockups.html): smaller, same short green line that grows on hover */
.ft-mob{display:block;width:max-content;max-width:100%;margin-top:1.3rem}.ft-mob .mono{display:block;margin-bottom:.4rem}
.ft-mob b{position:relative;display:block;font:800 clamp(2rem,9vw,2.7rem)/.95 var(--d);letter-spacing:.015em;color:var(--k);transition:color .5s var(--fe)}
.ft-mob b:after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:2px;background:var(--gd);transform:scaleX(.16);transform-origin:left;transition:transform .7s var(--fe)}
.ft-mob:hover b{color:var(--gd)}.ft-mob:hover b:after{transform:none}
.ft-mail{display:block;margin-top:.9rem;font:300 .8rem/1.45 var(--m);letter-spacing:.02em;color:var(--ink2);transition:color .4s}.ft-mail:hover{color:var(--gd)}
.ft-info{position:relative;padding:1.6rem var(--pad) 0}
.ft-road{position:absolute;left:0;right:0;top:0;height:2px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ft-road i{display:block;width:calc(100% + 64px);height:100%;background:repeating-linear-gradient(90deg,rgba(238,241,234,.55) 0 36px,transparent 36px 64px);animation:ft-drive 1.9s linear infinite}
@keyframes ft-drive{to{transform:translateX(-64px)}}
.ft-cols{display:grid;grid-template-columns:1fr;gap:1.6rem 2.4rem}
.ft-cols dt{display:flex;align-items:center;gap:.6rem}.ft-cols dt:before{content:"";width:5px;height:5px;background:var(--gd)}
.ft-cols dd{margin-top:.65rem;font:300 1.18rem/1.4 var(--u);letter-spacing:-.005em}.ft-cols dd small{display:block;margin-top:.15rem;font:300 .7rem/1.5 var(--m);letter-spacing:.07em;text-transform:uppercase;color:var(--mut2)}
.ft-cols dd a{border-bottom:1px solid rgba(238,241,234,.35);padding-bottom:1px;transition:color .4s,border-color .4s}.ft-cols dd a:hover{color:var(--gd);border-color:var(--gd)}.ft-cols dd a+a{margin-left:1.1rem}
.ft-ack{margin-top:1.6rem;max-width:96ch;font-size:.76rem;line-height:1.6;color:var(--mut2)}
.ft-base{display:flex;flex-direction:column;gap:.4rem;font-size:.76rem;color:var(--mut2);padding:.9rem 0 1.4rem}.ft-base a{text-decoration:underline;text-underline-offset:3px}
@media (min-width:560px){.ft-cols{grid-template-columns:1fr 1fr}}
@media (min-width:901px),(min-width:701px) and (orientation:landscape){
 .ft{min-height:100vh;min-height:100svh}
 .ft-stage{flex:1;min-height:26rem}
 .ft-photo img{object-position:50% 64%}
 .ft-photo:after{background:linear-gradient(0deg,var(--p2) 0,rgba(10,13,12,.78) 17%,rgba(10,13,12,.22) 44%,rgba(10,13,12,0) 62%),linear-gradient(90deg,rgba(10,13,12,.62),rgba(10,13,12,0) 58%),linear-gradient(180deg,rgba(10,13,12,.5),rgba(10,13,12,0) 15%)}
 .ft-copy{padding:clamp(5.5rem,12vh,8rem) var(--pad) clamp(2rem,5vh,3.2rem)}
 .ft-big{font-size:clamp(3.6rem,min(9.6vw,19vh),13rem);margin-bottom:clamp(1.4rem,3.4vh,2.2rem)}
 .ft-tel b{font-size:clamp(2.8rem,min(5vw,9vh),4.8rem)}
 .ft-info{padding-top:clamp(1.6rem,3.6vh,2.4rem)}.ft-ack{margin-top:clamp(1.4rem,3.6vh,2.4rem)}
 .ft-base{flex-direction:row;justify-content:space-between;gap:1rem}}
@media (min-width:901px){.ft-cols{grid-template-columns:1.25fr 1.15fr .8fr .8fr}}
@media (min-width:1100px){.ft-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(2rem,5vw,6rem);align-items:end}.ft-eye,.ft-big{grid-column:1}.ft-big{margin-bottom:0}.ft-act{grid-column:2;grid-row:1/3;align-self:end}}
@media (min-width:901px) and (max-height:820px),(min-width:701px) and (orientation:landscape) and (max-height:820px){
 .ft-copy{padding-top:4.8rem;padding-bottom:1.8rem}.ft-big{font-size:clamp(3.6rem,min(9.6vw,18vh),13rem)}.ft-tel b{font-size:clamp(2.6rem,min(5vw,8vh),4.8rem)}
 .ft-info{padding-top:1.3rem}.ft-ack{margin-top:1rem}.ft-base{padding:.6rem 0 1rem}}
/* footer entrance: only when JS is on (so nothing stays hidden without it); .in is added by the shared reveal observer in v4.js */
.js .ft-l1>span{transform:translateY(106%)}.js .ft-l2>span{clip-path:inset(0 100% 0 0)}.js .ft-l2:after{opacity:1}
.js .ft-eye{opacity:0}.js .ft-rise{opacity:0;transform:translateY(22px)}.js .ft-photo{clip-path:inset(0 0 0 100%)}.js .ft-photo img{transform:scale(1.14)}.js .ft-road{transform:scaleX(0);transform-origin:left}
.js .ft.in .ft-photo{clip-path:inset(0 0 0 0);transition:clip-path 1.6s var(--fe)}.js .ft.in .ft-photo img{transform:none;transition:transform 3.2s var(--fe)}
.js .ft.in .ft-eye{opacity:1;transition:opacity 1s var(--fe) .1s}
.js .ft.in .ft-l1>span{transform:none;transition:transform 1.15s var(--fe) .15s}
.js .ft.in .ft-l2>span{clip-path:inset(0 0 0 0);transition:clip-path 1.35s var(--fe) .55s}
.js .ft.in .ft-l2:after{transform:none;opacity:0;transition:transform 1.35s var(--fe) .55s,opacity .6s linear 1.7s}
.js .ft.in .ft-rise{opacity:1;transform:none;transition:opacity 1s var(--fe),transform 1.1s var(--fe);transition-delay:calc(1.1s + var(--i,0)*.11s)}
.js .ft.in .ft-road{transform:none;transition:transform 1.8s var(--fe) 1.2s}
/* inner */
.ih{padding-top:clamp(7rem,13vw,10rem)}.crumb{margin-bottom:1.5rem}.crumb a:hover{color:var(--g)}.ih h1{font-size:clamp(2.8rem,7vw,7rem);max-width:16ch}
.band{margin-top:clamp(3rem,6vw,5rem);position:relative}.band img{width:100%;height:clamp(260px,46vw,620px);object-fit:cover}.stock figcaption{position:absolute;right:var(--pad);bottom:.8rem;background:rgba(244,243,238,.85);padding:.25rem .55rem;color:var(--k);font-size:.62rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}.split>.bp{max-width:520px;aspect-ratio:1}.split>.bp img{width:100%;height:100%;object-fit:cover}
.prose p{margin-bottom:1rem;color:#3e443e}.prose .big{font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.38;color:var(--k);letter-spacing:-.02em}
.svc-ix li a{display:grid;grid-template-columns:3rem 1fr 1fr 90px;gap:1rem;align-items:center;padding:1.4rem 0;border-top:1px solid var(--ln);transition:padding .4s var(--e)}.svc-ix li:last-child a{border-bottom:1px solid var(--ln)}
.svc-ix b{font:800 clamp(1.5rem,3vw,2.6rem)/1.06 var(--d);text-transform:uppercase}.svc-ix .sd{font-size:.92rem;color:var(--mut)}.svc-ix .thumb{width:90px;height:90px;object-fit:cover;filter:grayscale(1);transition:.4s}.svc-ix a:hover{padding-left:1rem}.svc-ix a:hover .thumb{filter:none}.svc-ix a:hover b{color:var(--g)}
.faq{max-width:900px}.faq details{border-top:1px solid var(--ln)}.faq summary{cursor:pointer;padding:1.1rem 0;font-weight:400;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between}.faq summary:after{content:"+";color:var(--g)}.faq details[open] summary:after{content:"−"}.faq p{padding-bottom:1.2rem;color:var(--mut)}
.scope .mono{margin-bottom:2rem}.scope .two-card,.scope .three-card,.scope .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem 3rem}
.scope h3{font-size:1.4rem;margin:.5rem 0 .6rem}.scope .num{font:300 .72rem var(--m);color:var(--g)}.scope p{font-size:.92rem;color:var(--mut)}.scope .col{border-top:1px solid var(--k);padding-top:1rem}
.ticks li{display:flex;gap:.6rem;padding:.45rem 0;border-bottom:1px solid var(--ln);font-size:.92rem}.ticks svg{width:14px;height:14px;color:var(--g);margin-top:5px;fill:none;flex:none}
.next{display:block;padding:clamp(3rem,7vw,5rem) var(--pad);border-top:1px solid var(--ln)}.next b{display:block;font:900 clamp(2.4rem,7vw,6.5rem)/1 var(--d);text-transform:uppercase;margin-top:.6rem;transition:color .3s}.next:hover b{color:var(--g)}
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:1.5rem}.vals div{border-top:1px solid var(--k);padding-top:1rem}.vals h3{font-size:1.4rem;margin:.6rem 0}.vals p{font-size:.9rem;color:var(--mut)}
.accred{display:flex;flex-wrap:wrap;gap:3rem;align-items:center;margin-top:3rem}.accred img{height:64px;width:auto;mix-blend-mode:multiply;filter:grayscale(1);opacity:.8}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.5rem}.gi{border:0;padding:0;background:var(--p2);cursor:zoom-in;aspect-ratio:1;overflow:hidden}.gi img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e)}.gi:hover img{transform:scale(1.05)}
.lb{border:0;background:none;margin:auto;max-width:92vw}.lb::backdrop{background:rgba(18,21,18,.9)}.lb img{max-height:86vh}.lb-x{position:absolute;right:.5rem;top:.5rem;width:40px;height:40px;border-radius:50%;border:0;background:var(--l);font-size:1.4rem;cursor:pointer}
.lwall{display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid var(--ln);border-top:1px solid var(--ln)}.lwall div{aspect-ratio:1;display:grid;place-items:center;padding:1.2rem;border-right:1px solid var(--ln);border-bottom:1px solid var(--ln)}.lwall img{mix-blend-mode:multiply;filter:grayscale(1);opacity:.75;transition:.3s;max-height:100%;object-fit:contain}.lwall div:hover img{filter:none;opacity:1}
.cinfo a,.cinfo p{display:block;font:800 clamp(1.6rem,3.4vw,3rem)/1.05 var(--d);text-transform:uppercase;padding:1.2rem 0;border-top:1px solid var(--ln);word-break:break-word}.cinfo a:nth-child(2){font-size:clamp(1.1rem,2vw,1.6rem)}.cinfo p{font-size:1.2rem}.cinfo .mono{display:block;margin-bottom:.4rem}.cinfo a:hover{color:var(--g)}
.qf{display:grid;gap:1.4rem}.f2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}.qf label{display:grid;gap:.2rem;font:300 .72rem var(--m);text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.qf input,.qf select,.qf textarea{font:300 1.05rem var(--u);background:none;border:0;border-bottom:1px solid rgba(18,21,18,.3);padding:.5rem 0;color:var(--k);border-radius:0}.qf :is(input,select,textarea):focus{outline:0;border-color:var(--g)}.qf .bad{border-color:#d4442e}.qf button{justify-self:start}.fnote{color:var(--g);font-weight:400}.small{font-size:.76rem;color:var(--mut)}
/* reveal */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--e),transform .9s var(--e)}.js .reveal.in{opacity:1;transform:none}
/* responsive */
@media (max-width:1000px){#menu,.hd-tel{display:none}.burger{display:block;margin-left:auto}.hd .pill{margin-left:auto}#menu{position:fixed;inset:0;background:var(--p);z-index:-1;display:flex;align-items:center;padding:var(--pad);opacity:0;pointer-events:none;transition:opacity .4s}#menu.open{opacity:1;pointer-events:auto}#menu ul{flex-direction:column;gap:.4rem}#menu a{font:900 clamp(2.6rem,12vw,4rem)/1 var(--d);text-transform:uppercase}
.gauge{display:none}.hero{grid-template-columns:1fr;padding-top:5.5rem;gap:2rem;align-content:center}.core{order:0}
.projs{grid-template-columns:1fr 1fr}.proj:nth-child(even){margin-top:0}.split,.vals{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}.lwall{grid-template-columns:repeat(4,1fr)}.svc-ix li a{grid-template-columns:2.4rem 1fr 70px}.svc-ix .sd{grid-column:2;grid-row:2}.svc-ix .thumb{grid-row:1/3;grid-column:3;width:70px;height:70px}}
@media (max-width:600px){body{font-size:16px}.brand span{font-size:.8rem}.hd{gap:.6rem}.facts{grid-template-columns:1fr}.facts div{border-right:0;border-bottom:1px solid var(--ln);padding-left:0!important}.vals,.f2{grid-template-columns:1fr}.gal{grid-template-columns:1fr 1fr}.lwall{grid-template-columns:repeat(3,1fr)}.row-h{flex-direction:column;align-items:start}}
@media (max-width:1px){*:not(.mq-t):not(.h-vid),*:before,*:after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}.bp img{filter:none;opacity:1;mix-blend-mode:normal}.bp:after,.trace{display:none}}


@media (max-width:1000px){.core{margin-right:0;aspect-ratio:4/3}}

@media (max-width:1299px){.gauge{display:none}}
.hd.s{background:rgba(244,243,238,.95)}.hd.up{transform:translateY(-100%)}.hd{transition:transform .4s var(--e),background .4s}
section{scroll-margin-top:70px}

/* ================= v4 — night-works tech theme ================= */
:root{--p:#0a0d0c;--p2:#121816;--k:#eef1ea;--mut:#8d978f;--ln:rgba(255,255,255,.1);--g:#5fd35a;--l:#9be15a;--y:#d8ec3a;--bp:#14324a;--glass:rgba(22,30,27,.55);--gb:rgba(255,255,255,.09)}
body{background:var(--p);color:var(--k);background-image:radial-gradient(1200px 600px at 80% -10%,rgba(95,211,90,.07),transparent 60%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,48px 48px,48px 48px;background-attachment:fixed}
.lede,.prose p{color:#b9c2bb}
.glass{background:var(--glass);border:1px solid var(--gb);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-radius:14px}
.hd{color:#fff}.hd.s{background:rgba(10,13,12,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--ln)}
.hd-tel{margin-left:.4rem;border:1px solid rgba(255,255,255,.25);padding:.4rem .8rem;border-radius:99px}.hd-tel:hover{border-color:var(--g);color:var(--g)}
.burger{border-color:#fff}.burger i{background:#fff}
.pill{border-color:rgba(255,255,255,.5)}.pill:hover{background:#fff;color:#0a0d0c;border-color:#fff}
.pill-g{background:var(--g);border-color:var(--g);color:#06120a;font-weight:500;box-shadow:0 0 0 0 rgba(95,211,90,.5);animation:glow 3s infinite}
@keyframes glow{50%{box-shadow:0 0 28px 2px rgba(95,211,90,.35)}}
.ph,.ph-block{color:#e3a54f}
/* road-line motif: draws as you scroll */
.roadline{position:fixed;left:clamp(.3rem,1.4vw,1.2rem);top:0;height:100vh;width:14px;z-index:30;pointer-events:none;opacity:.55}
.rl-edge{stroke:rgba(255,255,255,.12);stroke-width:1;vector-effect:non-scaling-stroke}
.rl-c{stroke:var(--y);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:22 18;fill:none;clip-path:inset(0 0 calc(100% - var(--sp,0%)) 0)}
/* page curtain transition */
.curtain{position:fixed;inset:0;z-index:200;pointer-events:none;background:#0a0d0c;transform:scaleY(0);transform-origin:bottom}
.curtain span{position:absolute;left:0;right:0;top:50%;height:2px;background:repeating-linear-gradient(90deg,var(--y) 0 30px,transparent 30px 52px)}
.js .curtain{animation:cur-out .7s var(--e) both}
@keyframes cur-out{from{transform:scaleY(1);transform-origin:top}to{transform:scaleY(0);transform-origin:top}}
.curtain.go{animation:cur-in .45s var(--e) forwards}
@keyframes cur-in{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
/* hero */
.hero{display:block;min-height:100svh;padding:0;position:relative;overflow:hidden;background:#000;color:#fff}
.h-media{position:absolute;inset:0}
.h-media .h-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.1) contrast(1.05);animation:none;transform:scale(1.04)}
.h-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,7,.88) 0%,rgba(5,8,7,.55) 45%,rgba(5,8,7,.1) 100%),linear-gradient(0deg,rgba(10,13,12,1) 0%,transparent 30%)}
.h-grid{position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:64px 64px;mask:radial-gradient(ellipse at 70% 40%,#000,transparent 70%)}
.hero .scan{display:none}
.hero-t{position:relative;z-index:3;padding:clamp(8rem,22vh,14rem) var(--pad) 6rem;max-width:1100px}
.hero h1{font-size:clamp(3.2rem,9vw,9.5rem);text-shadow:0 4px 40px rgba(0,0,0,.4)}
.hero .lede{color:#d5ddd6}.hero .mono{color:rgba(255,255,255,.75)}
.rec{display:inline-flex;align-items:center;gap:.35rem;color:#ff5a4a;font-weight:400;margin-right:.6rem}.rec:before{content:"";width:7px;height:7px;border-radius:50%;background:#ff5a4a;animation:blink 1.2s steps(2) infinite}
.hero .cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.hero .hud{position:absolute;z-index:3;right:var(--pad);top:6.5rem;left:auto;display:grid;gap:.3rem;text-align:right;color:rgba(255,255,255,.6);font-size:.66rem}
.scroll-cue{position:absolute;z-index:3;left:var(--pad);bottom:1.2rem;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:.6rem;font-size:.65rem}
.scroll-cue i{width:1px;height:38px;background:linear-gradient(var(--y),transparent);animation:cue 1.8s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.split-h{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--e)}.split-h.in,.static .split-h{clip-path:inset(0)}
/* the hero comes in in reading order: .js .reveal's transition used to replace the headline's wipe, so it snapped open,
   and the lede and button arrived before it */
.js .reveal.split-h{transition:opacity .9s var(--e),transform .9s var(--e),clip-path 1.1s var(--e)}
.js .hero .lede.reveal{transition-delay:.35s}.js .hero .cta.reveal{transition-delay:.45s}
html:not(.js) .split-h{clip-path:none}
/* sections on dark */
.proof{padding-bottom:clamp(3rem,6vw,5rem)}
/* slideshow */
.ss{position:relative;margin-top:2.2rem}
.ss-track{display:flex;gap:clamp(.8rem,2vw,1.6rem);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:0 var(--pad) .5rem;scrollbar-width:none;overscroll-behavior-x:contain;scroll-padding-inline:var(--pad)}
.ss-track::-webkit-scrollbar{display:none}
.sl{flex:0 0 min(66vw,1100px);scroll-snap-align:start;scroll-snap-stop:always}
.sl figure{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/10;background:#111;transform:scale(.94);opacity:.45;transition:transform .8s var(--e),opacity .8s var(--e)}
.sl.on figure{transform:none;opacity:1}
.sl img{width:100%;height:100%;object-fit:cover;transition:transform 6s linear}
.sl.on img{transform:scale(1.05)}
.sl figcaption{position:absolute;left:1rem;bottom:1rem;right:auto;max-width:min(30rem,calc(100% - 2rem));padding:1rem 1.2rem}
.sl figcaption h3{font-size:clamp(1.3rem,2.2vw,2rem);margin:.35rem 0}
.sl .pd{font-size:.9rem;color:#c9d1ca}.sl .arrow{display:inline-block;margin-top:.5rem;font-size:.85rem}
.ss-ui{display:flex;align-items:center;gap:.8rem;padding:1.2rem var(--pad) 0}
.ss-ui button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.04);color:#fff;font-size:1.05rem;cursor:pointer;transition:.3s}
.ss-ui button:hover{background:var(--g);color:#06120a;border-color:var(--g)}
.ss-ui .ss-pp{font-size:.7rem;margin-left:auto}
.ss-dots{display:flex;gap:.4rem;flex-wrap:wrap}
.ss-dots button{width:26px;height:26px;border:0;background:none;position:relative;padding:0}
.ss-dots button:after{content:"";position:absolute;left:3px;right:3px;top:12px;height:2px;background:rgba(255,255,255,.25);transition:.3s}
.ss-dots button[aria-selected=true]:after{background:var(--y);top:11px;height:4px}
.ss-dots button:hover{background:none}
.ss-bar{display:block;height:2px;margin:1rem var(--pad) 0;background:var(--ln)}.ss-bar i{display:block;height:100%;width:var(--t,0%);background:var(--g)}
@media(max-width:800px){.sl{flex-basis:88vw}.sl figure{aspect-ratio:4/5}.sl figcaption{left:.6rem;right:.6rem;bottom:.6rem;max-width:none;padding:.8rem .9rem}.sl .pd{font-size:.82rem}.ss-dots{display:none}.ss-ui .ss-pp{margin-left:0}}
/* showreel */
.reel{padding-block:clamp(3rem,7vw,6rem)}
.reel .row-h{align-items:end}
.reel-main{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:#000;margin-top:1.8rem;border:1px solid var(--gb)}
.reel-v{width:100%;height:100%;object-fit:cover;display:block}
.reel-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.8rem;padding:1rem 1.6rem 1rem 1rem;border-radius:99px;border:1px solid rgba(255,255,255,.35);background:rgba(10,13,12,.55);backdrop-filter:blur(10px);color:#fff;font:400 1rem var(--u);cursor:pointer;transition:.3s}
.reel-play span{width:48px;height:48px;border-radius:50%;background:var(--g);color:#06120a;display:grid;place-items:center;font-size:1rem}
.reel-play:hover{transform:translate(-50%,-50%) scale(1.05)}
.reel.playing .reel-play{opacity:0;pointer-events:none}
.reel-clips{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.reel-clips figure{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#000}
.reel-clips video{width:100%;height:100%;object-fit:cover}
.reel-clips figcaption{position:absolute;left:.7rem;bottom:.6rem;color:#fff;font-size:.6rem}
@media(max-width:700px){.reel-clips{grid-template-columns:1fr 1fr}.reel-clips figure:last-child{display:none}.reel-play{padding:.6rem 1rem .6rem .6rem;font-size:.85rem}.reel-play span{width:38px;height:38px}}
/* bedrock + marquee */
.mq-t img{mix-blend-mode:normal;background:#fff;filter:none;opacity:1}
.bedrock .arrow{display:inline-block;margin-top:2rem}
/* bedrock is one full screen: the motto, the accreditations it stands on, then the client logos along the bottom */
.bedrock{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding-top:clamp(5rem,12vh,8rem)}
.bedrock .bd-main{width:100%;flex:1;display:flex;flex-direction:column;justify-content:center;padding-bottom:clamp(1rem,3vh,2rem)}
.bedrock .bd-more{width:100%;margin:0 auto;padding-bottom:clamp(.9rem,2.6vh,1.6rem)}
.bedrock .bd-more .arrow{margin:0}
.bedrock .motto{margin:clamp(1.2rem,4vh,3rem) 0 clamp(1.8rem,5vh,3.5rem)}
.bd-acc{border-top:1px solid var(--ln);padding-top:clamp(1rem,2.4vh,1.5rem)}
.bd-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 2rem}.bd-cap span:first-child{color:var(--l)}
.bd-acc .accred{margin-top:clamp(.9rem,2.2vh,1.4rem);gap:1rem clamp(.9rem,2.2vw,2rem)}
.bd-acc .accred img{height:clamp(52px,9vh,88px);opacity:1}
@media (min-width:901px){.bd-acc .accred{justify-content:space-between}}
@media (max-width:700px){.bd-acc .accred{gap:.8rem .9rem}.bd-acc .accred img{height:48px}.bedrock .motto{margin-top:1rem}}
/* phones + tablets: the five badges always share ONE line. Their height follows the row width: 8.4 = the five logos' width/height ratios added up (8.26, rounded up for safety); 98.4px = five 12px tile paddings + four .6rem gaps */
@supports (width:1cqw){@media (max-width:900px){.bd-acc{container-type:inline-size}.bd-acc .accred{flex-wrap:nowrap;justify-content:space-between;column-gap:.6rem}.bd-acc .accred img{flex:none;height:min(clamp(48px,7vh,88px),calc((100cqw - 98.4px)/8.4 + 12px))}}}
/* upright screens (phones, tablets held upright): too little content to fill a tall screen, so Bedrock is only as tall as what is in it, instead of a full screen with an empty gap under the badges */
@media (orientation:portrait){.bedrock{min-height:0}.bedrock .bd-main{flex:none;padding-bottom:clamp(2rem,5vh,3rem)}}
/* inner pages */
.ih{padding-top:clamp(7rem,14vw,10rem)}
.band{border-radius:0;overflow:hidden}.band img{height:clamp(280px,48vw,640px)}
.band:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--p),transparent 40%),linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:auto,48px 48px,48px 48px;pointer-events:none}
.split>.bp{border-radius:14px}
.svc-ix .thumb{border-radius:8px}
.accred img{mix-blend-mode:normal;background:#fff;filter:none;opacity:1;padding:6px;border-radius:6px}
.qf.glass{padding:clamp(1.2rem,3vw,2.2rem)}
.qf input,.qf select,.qf textarea{border-bottom-color:rgba(255,255,255,.25);color:var(--k)}.qf select option{color:#111}
.faq details.glass{padding:.4rem 1.2rem;margin-bottom:.6rem}
.vals>div.glass{padding:1.4rem}
.gal .gi{border-radius:10px}
.lb{background:#000;border:0}
.next{color:var(--k)}
/* clients network map */
.nm-key i{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin:0 .3rem 0 .6rem}.k-hub{background:var(--y)}.k-node{background:#fff;border:2px solid var(--g)}
.nm-grid{display:grid;grid-template-columns:1.35fr 1fr;align-items:start;gap:1.2rem;margin-top:2rem}
.nm-panel{padding:1rem;position:relative}.nm-panel figcaption{margin-bottom:.6rem}
.nm-panel svg{width:100%;height:auto;display:block;overflow:visible}
.gl{stroke:rgba(255,255,255,.05);stroke-width:1}
.nsw{fill:rgba(95,211,90,.06);stroke:rgba(155,225,90,.55);stroke-width:1.5;stroke-linejoin:round}
.coast{fill:none;stroke:rgba(155,225,90,.45);stroke-width:2;stroke-dasharray:6 6}
.sydbox{fill:rgba(216,236,58,.08);stroke:var(--y);stroke-width:1.5;stroke-dasharray:4 4}.sydlab{fill:var(--y);font:400 13px var(--m);letter-spacing:.08em}
.lk{fill:none;stroke:rgba(95,211,90,.35);stroke-width:1.2}
.js .lk{stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.6s var(--e)}
.js .nm-panel.in .lk{stroke-dashoffset:0}
.lks:after{content:none}
.lk.pulse{stroke:var(--y);stroke-width:2.2;stroke-dasharray:6 var(--len);animation:pulse var(--dur) linear infinite}
@keyframes pulse{from{stroke-dashoffset:6}to{stroke-dashoffset:calc(var(--len)*-1)}}
.ld{stroke:rgba(255,255,255,.4);stroke-width:1;stroke-dasharray:2 3}.loc{fill:#fff}
.hub .hc{fill:var(--y)}.hub .ping{fill:none;stroke:var(--y);stroke-width:2;animation:ping 2.4s ease-out infinite}.hub .p2{animation-delay:1.2s}
.hl{fill:var(--y);font:400 18px var(--m);letter-spacing:.08em}
@keyframes ping{from{transform:scale(1);opacity:.9}to{transform:scale(4);opacity:0}}
.nd{cursor:pointer;outline:none}.nd .bg{fill:#fff;stroke:var(--g);stroke-width:2}.nd .halo{fill:rgba(95,211,90,.15);opacity:0;transition:.3s}
.nd:hover .halo,.nd:focus .halo,.nd.on .halo{opacity:1}.nd:focus .bg{stroke:var(--y);stroke-width:3}
.nd image{pointer-events:none}
.nm-tip{position:fixed;z-index:60;pointer-events:none;background:rgba(10,13,12,.92);border:1px solid var(--g);color:#fff;padding:.4rem .7rem;border-radius:6px;opacity:0;transition:opacity .2s;font-size:.7rem;transform:translate(-50%,-140%)}
.nm-tip.on{opacity:1}
.nm-state{margin-top:1.2rem;padding:1rem 1.2rem}.nm-state ul{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;margin-top:.8rem}
.st{display:flex;align-items:center;gap:.6rem;font-size:.9rem}.st img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:50%;padding:4px;border:2px solid var(--g)}
.h-sm{font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:1.5rem}
.lwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.lwall li{display:grid;justify-items:center;gap:.5rem;padding:1rem .6rem;border:1px solid var(--ln);border-radius:12px;text-align:center;font-size:.78rem;color:#b9c2bb}
.lwall img{width:84px;height:84px;object-fit:contain;mix-blend-mode:normal;background:#fff;border-radius:10px;padding:6px;filter:none;opacity:1}
@media(max-width:900px){.nm-grid{grid-template-columns:1fr}}
@media(max-width:1px){.lk.pulse,.hub .ping,.pill-g,.scroll-cue i{animation:none}.sl img{transition:none}.js .curtain{animation:none}}
@media(max-width:700px){.hero-t{padding:7.5rem var(--pad) 7rem}.hero .hud{display:none}.h-media:after{background:linear-gradient(0deg,rgba(10,13,12,1) 0%,rgba(5,8,7,.55) 50%,rgba(5,8,7,.65) 100%)}.roadline{display:none}}
.nm-syd{overflow:hidden!important}
/* headings never under fixed header */
html{scroll-padding-top:92px}section,[id],h1,h2{scroll-margin-top:92px}
/* splash: the backoffice's map splash (js/splash.js, js/splash-map.js), once per browser session.
   Values are the backoffice's (backoffice/app/design/door.css, .door- renamed .sp-); its colours are read by the map's shaders. */
.splash{display:none;position:fixed;inset:0;z-index:300;overflow:hidden;isolation:isolate;cursor:pointer;background:var(--sp-sea);color:var(--sp-fg);font-weight:400;
 --sp-lime:#cada2a;--sp-logo-2:#85c340;--sp-green:#45b549;--sp-leaf:#8cc63f;--sp-head:#f4f8d8;--sp-logo-road:#e6e8ea;--sp-page:#111214;
 --sp-sea:#0b0c0e;--sp-deep:#0d1012;--sp-grid:#191d1f;--sp-land:#16181b;--sp-council:#17191c;--sp-state:#5d636b;--sp-council-line:#2e3238;--sp-highway:#3a3f46;--sp-road:#30353b;
 --sp-fg:#f1f2f3;--sp-fg-2:#cfd1d3;--sp-fg-3:#a8adb5;--sp-ease:cubic-bezier(.22,1,.36,1);--sp-dissolve:cubic-bezier(.4,0,.2,1)}
.splash-on .splash,.splash.sp-out{display:block}
.splash-on body{overflow:hidden}
/* the hand-off (js/splash.js): the map dissolves over .9s, even rather than front-loaded so it never reads as a cut;
   the logo stays whole until it has landed on the header's, then fades into it */
.splash.sp-out{pointer-events:none;cursor:auto;background-color:transparent;transition:background-color .9s var(--sp-dissolve)}
.splash.sp-out .sp-glhost,.splash.sp-out .sp-skip,.splash.sp-out .sp-credit{opacity:0;transition:opacity .9s var(--sp-dissolve)}
.splash.sp-landed .sp-lockup{opacity:0!important;transition:opacity .4s var(--sp-ease)}
.sp-glhost{position:absolute;inset:0}
.sp-gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .2s var(--sp-ease)}.sp-gl.sp-in{opacity:1}
/* the logo, as it builds */
.sp-lockup{position:absolute;left:50%;top:50%;z-index:6;width:170px;transform:translate(-50%,-58%);pointer-events:none;opacity:0}
.sp-lockup svg{display:block;width:100%;height:auto;overflow:visible}
.sp-tower{transform-box:fill-box;transform-origin:50% 100%}
/* flex, not text-align: the second line starts wider than the logo (.4em apart) and must stay centred as it tightens */
.sp-word{margin-top:14px;display:flex;justify-content:center;text-align:center;font-family:'Poppins',sans-serif;line-height:1}
.sp-word-in{display:inline-block;transform-origin:50% 50%}
.sp-word b{display:block;font-weight:700;font-size:34px;letter-spacing:.01em;color:var(--sp-fg)}
.sp-word span{display:block;margin-top:4.83px;font-weight:400;font-size:28.27px;letter-spacing:0;color:var(--sp-fg-2);white-space:nowrap}
.sp-t1{fill:var(--sp-lime)}.sp-t2{fill:var(--sp-logo-2)}.sp-t3{fill:var(--sp-green)}
.sp-road{fill:var(--sp-logo-road)}.sp-dash{fill:var(--sp-page)}.sp-glow{fill:var(--sp-lime)}.sp-core{fill:var(--sp-head)}
/* what is said around it */
.sp-skip{position:absolute;left:0;right:0;bottom:44px;z-index:4;text-align:center;font:400 12px/1.4 var(--u);color:var(--sp-fg-3);opacity:.8;pointer-events:none}
.sp-credit{position:absolute;left:12px;right:12px;bottom:10px;z-index:3;text-align:center;font:400 9px/1.4 var(--u);color:var(--sp-fg-3);opacity:0;transition:opacity .2s var(--sp-ease)}
.sp-ready .sp-credit{opacity:.55}
@media (min-width:721px){.sp-lockup{width:230px}.sp-word b{font-size:46px}.sp-word span{font-size:38.25px;margin-top:6.54px}.sp-skip{bottom:22px}.sp-credit{left:auto;text-align:right;font-size:10.5px}}
/* v4.1: continuous marquee slideshow */
.ss-view{overflow:hidden;touch-action:pan-y;cursor:grab;padding-left:var(--pad)}
.ss-view:active{cursor:grabbing}
.ss-track{display:flex;width:max-content;overflow:visible;padding:0;scroll-snap-type:none;will-change:transform;gap:clamp(.8rem,2vw,1.6rem)}
.ss-track .sl{flex:0 0 min(56vw,940px)}
.sl figure,.sl.on figure{transform:none;opacity:1}
.sl img,.sl.on img{transform:scale(1.02);animation:kb 16s ease-in-out infinite alternate;transition:none;user-select:none;-webkit-user-drag:none}
.sl:nth-child(3n+2) img{animation-delay:-5s}.sl:nth-child(3n) img{animation-delay:-10s}
@keyframes kb{to{transform:scale(1.1) translate(-1.5%,-1%)}}
.ss-ui .ss-n{margin-left:auto}
@media(max-width:800px){.ss-track .sl{flex-basis:82vw}}
@media(max-width:1px){.sl img{animation:none}}
/* hero clearer: lighter overlay, text kept readable */
.h-media .h-vid{filter:none;transform:none}
.h-media:after{background:linear-gradient(90deg,rgba(5,8,7,.72) 0%,rgba(5,8,7,.32) 42%,rgba(5,8,7,0) 75%),linear-gradient(0deg,rgba(10,13,12,1) 0%,transparent 22%)}
.hero h1,.hero .lede{text-shadow:0 2px 24px rgba(0,0,0,.65)}
@media(max-width:700px){.h-media:after{background:linear-gradient(0deg,rgba(10,13,12,1) 0%,rgba(5,8,7,.45) 45%,rgba(5,8,7,.5) 100%)}}
.nd .nb{transition:transform .45s cubic-bezier(.3,1.6,.5,1),filter .45s}
.nd.pop .nb{transform:scale(1.3);filter:drop-shadow(0 0 10px rgba(95,211,90,.9))}
.nd.pop .halo{opacity:1}
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.cc{display:grid;gap:.6rem;padding:clamp(1.6rem,3vw,2.6rem);min-height:220px;align-content:space-between;transition:border-color .3s,transform .4s var(--e)}
a.cc:hover{border-color:var(--g);transform:translateY(-4px)}
.cc b{font:900 clamp(2rem,3.6vw,3.4rem)/1 var(--d);text-transform:uppercase;color:#fff}
.cc b.em{font:500 clamp(1rem,1.6vw,1.35rem)/1.38 var(--u);text-transform:none;word-break:break-all}
.cc i{font-style:normal;color:var(--g);font-size:.95rem}
@media(max-width:900px){.ccards{grid-template-columns:1fr}.cc{min-height:0}}
.nd .nb{transform-box:fill-box;transform-origin:center;will-change:transform}.nd.hv .nb,.nd:hover .nb,.nd:focus .nb{transform:scale(2.1)!important;transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}.nd.hv .bg,.nd:hover .bg{stroke:var(--y);stroke-width:2.5}

.ss-view{cursor:grab;user-select:none;touch-action:pan-y}.ss-view.grabbing{cursor:grabbing}.ss-view img{-webkit-user-drag:none;pointer-events:none}
.bp{background:#0b100e url(../img/logo.png) center/30% no-repeat}

/* perf */
.glass,.hd.s{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.glass{background:rgba(16,21,19,.9)}.hd.s{background:rgba(10,13,12,.94)}
.h-media.off .scan,.h-media.off .h-grid,.h-media.off *{animation-play-state:paused!important}
.nd.pop .nb{filter:none}
.ss-view:not(:hover) .sl img{will-change:auto}
.nd .nb{transform:scale(1.3)}.nd.pop .nb{transform:scale(1.65)}.nd.hv .nb,.nd:hover .nb,.nd:focus .nb{transform:scale(2.5)!important}.lk.pulse{stroke-width:3}
.hd-tel{font-family:var(--u)!important;font-weight:500;letter-spacing:.02em}

:root{--bp:#0b100e}
/* living photo: gentle Ken Burns on big static photos */
.band,.ab-ph,.ah-media{overflow:hidden}
.band img,.ab-ph img,.ah-media img{animation:kb 20s ease-in-out infinite alternate;transform-origin:50% 50%;will-change:transform;backface-visibility:hidden}
.ab-ph img{animation-duration:24s}.ah-media img{animation-duration:26s}
.kb-off img{animation-play-state:paused!important}
@keyframes kb{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-2%,-1.5%,0)}}
@media (prefers-reduced-motion:reduce){.band img,.ab-ph img,.ah-media img{animation:none}}
.cc b.em{word-break:normal;overflow-wrap:anywhere;font-size:clamp(.95rem,1.35vw,1.2rem)}

/* ================= section 01: blueprint → block → five layers (scroll-scrubbed, js/section01.js) =================
   A drawing on blue paper is wiped away, bottom to top, by the finished block: a short video that the scroll plays
   forward (the block opens into layers) and backward (they close again). In between, the camera visits each layer and
   its name sits beside it. The scene is laid out in "clip pixels" by the script, so the drawing, the video and the
   spotlight all stay in register. */
.blk{position:relative;height:820vh;height:820svh;--dk:0;--fg:#121512;--bpc:#2b5f8a;--tk:#2f7a18}
.blk-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#f8fbfd;color:var(--fg)}
.blk-bg,.blk-grid,.blk-frame{position:absolute;inset:0;pointer-events:none}
.blk-bg{background:#f8fbfd}
.blk-grid{opacity:calc(1 - var(--dk)*1.25);background-image:linear-gradient(rgba(43,95,138,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(43,95,138,.09) 1px,transparent 1px),linear-gradient(rgba(43,95,138,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(43,95,138,.05) 1px,transparent 1px);background-size:96px 96px,96px 96px,24px 24px,24px 24px;-webkit-mask-image:radial-gradient(ellipse 80% 75% at 50% 52%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 80% 75% at 50% 52%,#000 30%,transparent 100%)}
.blk-frame{inset:70px 18px 18px;border:1px solid rgba(43,95,138,.32);opacity:calc(1 - var(--dk)*1.4)}
.blk-frame::before,.blk-frame::after{content:"";position:absolute;width:14px;height:14px;border:1px solid var(--bpc)}
.blk-frame::before{left:-1px;top:-1px;border-right:0;border-bottom:0}.blk-frame::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.blk-tb{position:absolute;right:-1px;bottom:-1px;display:grid;grid-template-columns:auto auto;border:1px solid rgba(43,95,138,.32);background:rgba(248,251,253,.8)}
.blk-tb span{padding:.28rem .7rem;font:400 .6rem/1.4 var(--m);letter-spacing:.1em;text-transform:uppercase;color:var(--bpc);border-bottom:1px solid rgba(43,95,138,.18)}
.blk-tb span:nth-child(odd){border-right:1px solid rgba(43,95,138,.18);opacity:.65}.blk-tb span:nth-last-child(-n+2){border-bottom:0}

.blk-cam{position:absolute;left:0;top:0;transform-origin:0 0}
.blk-scene{position:relative}
.blk-scene>*{position:absolute}
.blk-scene img{max-width:none}
/* the clip's floor carries on past its edges, so the picture never ends in a hard line */
.blk-floor{left:-60%;top:-70%;width:220%;height:240%;opacity:var(--dk);background:linear-gradient(to right,#eee8e4 27%,#b8b4b4 50%,#9c9ea4 73%,#9c9ea4)}
.blk-bp{-webkit-mask-image:linear-gradient(to top,transparent var(--w0,0%),#000 var(--w1,0%));mask-image:linear-gradient(to top,transparent var(--w0,0%),#000 var(--w1,0%))}
.blk-rend{left:0;top:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(to top,#000 var(--w0,0%),transparent var(--w1,0%));mask-image:linear-gradient(to top,#000 var(--w0,0%),transparent var(--w1,0%))}
.blk-vid{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill;
 -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.blk-scan{height:0;border-top:1px solid #3f8a1e;box-shadow:0 0 14px 1px rgba(63,138,30,.45);opacity:0}
.blk-scan b{position:absolute;right:0;bottom:6px;font:400 .6rem var(--m);letter-spacing:.1em;color:var(--tk);text-transform:uppercase;white-space:nowrap}
/* a soft pale haze over every layer except the one being described */
.blk-haze{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.blk-haze rect{fill:rgba(226,223,223,.62)}

.blk-copy{position:absolute;left:var(--pad);right:var(--pad);top:clamp(5.5rem,13vh,8rem);pointer-events:none}
.blk-copy .mono{color:var(--bpc)}
.blk-copy h2{font-size:clamp(2.4rem,5.5vw,5.5rem);margin-top:.8rem;color:var(--fg)}
.blk-hint{position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);display:flex;align-items:center;gap:.7rem;color:var(--bpc)}
.blk-hint i{width:1px;height:28px;background:linear-gradient(var(--bpc),transparent)}

/* the names of the layers: a list beside the block on computers, a card at the bottom on phones */
.blk-idx{position:absolute;left:var(--pad);top:50%;width:min(23rem,30vw);transform:translateY(-50%);opacity:0;pointer-events:none;display:grid;gap:.15rem}
.blk-idx li{display:grid;grid-template-columns:2.3rem 1fr;gap:.2rem .5rem;padding:.7rem 0 .7rem .9rem;border-left:2px solid rgba(18,21,18,.2);opacity:.5;transition:opacity .4s,border-color .4s}
.blk-idx li.on{opacity:1;border-color:#3f8a1e}
.blk-idx li.all{opacity:.9}
.blk-idx .n{padding-top:.28rem;color:var(--tk)}
.blk-idx h3{font-size:clamp(1.3rem,1.9vw,1.75rem);color:var(--fg)}
.blk-idx p{grid-column:2;font-size:.95rem;line-height:1.5;color:#3b423c;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--e),opacity .4s,margin .4s}
.blk-idx li.on p{max-height:9rem;opacity:1;margin-top:.45rem}
.blk-card{display:none}

/* phone layout: only the left half of the block, big; the heading above and a card below */
.blk.mob .blk-idx{display:none}
.blk.mob .blk-frame{inset:62px 10px 10px}
.blk.mob .blk-tb{display:none}
.blk.mob .blk-copy{top:5.2rem}
.blk.mob .blk-copy h2{font-size:clamp(2.5rem,12.5vw,4.2rem)}
.blk.mob .blk-card{display:block;position:absolute;left:14px;right:14px;bottom:max(16px,env(safe-area-inset-bottom));padding:.85rem 1rem 1rem;background:rgba(9,12,11,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-left:2px solid var(--l);border-radius:3px;opacity:0;transform:translateY(14px);transition:opacity .35s,transform .45s var(--e);pointer-events:none}
.blk.mob .blk-card.on{opacity:1;transform:none}
.blk-card .top{display:flex;align-items:center;gap:.7rem;margin-bottom:.55rem}
.blk-card .n{color:var(--l)}
.blk-card .dots{display:flex;gap:4px;margin-left:auto}.blk-card .dots i{width:16px;height:2px;background:rgba(238,241,234,.22);transition:background .3s}.blk-card .dots i.on{background:var(--l)}
.blk-card h3{font-size:1.7rem;color:var(--k)}
.blk-card p.d{margin-top:.4rem;font-size:.92rem;line-height:1.45;color:#bcc3bb}
.blk.mob .blk-hint{bottom:1.4rem}
/* without scripts: just the heading and the list of layers */
html:not(.js) .blk{height:auto}html:not(.js) .blk-pin{position:relative;height:auto;min-height:100svh;padding:7rem var(--pad) 3rem}
html:not(.js) .blk-cam,html:not(.js) .blk-frame,html:not(.js) .blk-grid,html:not(.js) .blk-hint,html:not(.js) .blk-haze{display:none}
html:not(.js) .blk-copy{position:relative;inset:auto}
html:not(.js) .blk-idx{position:relative;left:auto;top:auto;transform:none;width:auto;opacity:1;margin-top:2rem}
html:not(.js) .blk-idx li{opacity:1}html:not(.js) .blk-idx p{max-height:none;opacity:1;margin-top:.45rem}
/* services: full-screen stories — each photo fills the screen, pushes in and moves on by itself (js: // services) */
.svs{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;background:#0b100e;color:#fff;touch-action:pan-y;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.svs-media{position:absolute;inset:0;z-index:-2}.svs-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease,transform 9s linear;-webkit-user-drag:none;-webkit-touch-callout:none}.svs-media img.on{opacity:1;transform:scale(1.08)}.svs.rm .svs-media img{transform:none;transition:opacity .6s ease}
.svs:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--p) 0%,rgba(10,13,12,.55) 10%,rgba(10,13,12,0) 26%,rgba(10,13,12,0) 42%,rgba(10,13,12,.55) 64%,rgba(10,13,12,.96) 92%,var(--p) 100%),linear-gradient(90deg,rgba(10,13,12,.5),transparent 55%)}
.svs-ui{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(5rem,10vh,6.5rem) var(--pad) clamp(1.8rem,5vh,3.2rem)}
.svs-bars{display:flex;gap:5px}.svs-bars i{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}.svs-bars b{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.svs-row{display:flex;align-items:center;justify-content:space-between;margin-top:1rem}.svs-row .mono{color:#d3dad4}
.svs-pp,.svs-nav button{display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(10,13,12,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;cursor:pointer;transition:border-color .25s,color .25s}.svs-pp:hover,.svs-nav button:hover{border-color:var(--g);color:var(--g)}
.svs-pp{width:36px;height:36px}.svs-pp i{width:10px;height:12px;border-inline:3px solid currentColor}.svs-pp.off i{width:0;height:0;border:0;border-left:11px solid currentColor;border-block:7px solid transparent;margin-left:3px}
.svs-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.svs-s{max-width:46rem;animation:svIn .8s var(--e)}.svs-s[hidden]{display:none}@keyframes svIn{from{opacity:0;transform:translateY(18px)}}
.svs-s .mono{color:var(--g)}.svs-s h3{font-size:clamp(3rem,7vw,6.8rem);margin:.6rem 0 1rem}.svs-s p:not(.mono){max-width:40ch;font-size:clamp(1rem,1.3vw,1.15rem);color:#d3dad4;margin-bottom:1.4rem}
.svs-nav{display:flex;gap:.6rem;flex:none}.svs-nav button{width:52px;height:52px;font:400 1.05rem var(--u)}
.svs-hint{display:none;position:absolute;right:var(--pad);top:50%;align-items:center;gap:.5rem;color:#d3dad4;pointer-events:none;transition:opacity .4s}.svs-hint i{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;font-style:normal}.svs.used .svs-hint{opacity:0}
@media (hover:none){.svs-hint{display:flex}}
@media (max-width:700px){.svs-nav{display:none}.svs-ui{padding-top:5rem}.svs-s h3{font-size:clamp(2.6rem,11vw,3.6rem)}.svs:after{background:linear-gradient(180deg,var(--p) 0%,rgba(10,13,12,.55) 9%,rgba(10,13,12,0) 24%,rgba(10,13,12,0) 38%,rgba(10,13,12,.6) 58%,rgba(10,13,12,.97) 92%,var(--p) 100%)}}
/* recent work: expanding cards (js: // recent work).
   wide screens: the open card is big and in colour, the rest are black-and-white strips with their place written up the side.
   phones: the same cards in a sideways swipe, one per swipe; --c (0–1, set by js) is how centred a card is: colour, size and its details follow it */
.rw{padding-block:clamp(4rem,9vw,8rem)}
.rw-list{list-style:none;display:flex}
.rw-c{position:relative;border-radius:14px;overflow:hidden;background:#000;isolation:isolate;outline-offset:3px}
.rw-c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.rw-c:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,.84));pointer-events:none}
.rw-n{position:absolute;left:1.1rem;top:1rem;z-index:2;color:rgba(255,255,255,.75)}
.rw-t{position:absolute;left:clamp(1.2rem,2.4vw,2.4rem);right:clamp(1.2rem,2.4vw,2.4rem);bottom:clamp(1.2rem,2.6vw,2.4rem);z-index:2;pointer-events:none}
.rw-t .mono{color:var(--y)}
.rw-t h3{font-size:clamp(2rem,3.6vw,4.2rem);margin:.5rem 0 .2rem;max-width:14ch}
.rw-pl{font:200 clamp(1.1rem,1.7vw,1.6rem)/1.3 var(--u);letter-spacing:-.03em}
.rw-d{font-size:.96rem;color:#d3dad4;margin-top:.8rem;max-width:40ch}
.rw-t .arrow{display:inline-block;margin-top:1rem;font-size:.88rem;color:#fff}
.rw-c.on .rw-t .arrow{pointer-events:auto}
.js .rw:not(.in) .rw-c{opacity:0}
.rw.in .rw-c{animation:rwRise .9s var(--e) backwards;animation-delay:calc(var(--i)*90ms)}
@keyframes rwRise{from{opacity:0;transform:translateY(36px)}}
.rw-f{display:none}
@media (min-width:701px){
 .rw-list{gap:10px;height:clamp(460px,72vh,720px)}
 .rw-c{flex:1 1 0;min-width:0;cursor:pointer;transition:flex-grow .85s var(--e)}
 .rw-c.on{flex-grow:5.2}
 .rw-c img{filter:grayscale(1) brightness(.58);transform:scale(1.1);transition:filter .9s ease,transform 1.4s var(--e)}
 .rw-c.on img{filter:grayscale(0) brightness(.92);transform:scale(1)}
 .rw-c:hover:not(.on) img{filter:grayscale(1) brightness(.75)}
 .rw-v{position:absolute;left:1.05rem;bottom:1.3rem;z-index:2;writing-mode:vertical-rl;transform:rotate(180deg);font:400 .7rem/1 var(--m);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.9);white-space:nowrap;transition:opacity .4s}
 .rw-c.on .rw-v{opacity:0;transition-duration:.2s}
 .rw-t>*{opacity:0;transform:translateY(14px);transition:opacity .3s,transform .5s var(--e)}
 .rw-c.on .rw-t>*{opacity:1;transform:none;transition:opacity .7s ease,transform .9s var(--e)}
 .rw-c.on .rw-t>:nth-child(1){transition-delay:.3s}.rw-c.on .rw-t>:nth-child(2){transition-delay:.37s}.rw-c.on .rw-t>:nth-child(3){transition-delay:.44s}.rw-c.on .rw-t>:nth-child(4){transition-delay:.51s}.rw-c.on .rw-t>:nth-child(5){transition-delay:.58s}
}
@media (max-width:700px){
 .rw .row-h{margin-bottom:1.8rem}.rw .row-h>.arrow{display:none}
 .rw-list{gap:10px;margin-inline:calc(var(--pad)*-1);padding:.4rem 12vw 1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-tap-highlight-color:transparent}
 .rw-list::-webkit-scrollbar{display:none}
 .rw-c{flex:0 0 76vw;aspect-ratio:4/5;scroll-snap-align:center;scroll-snap-stop:always;transform:scale(calc(.94 + .06*var(--c,1)));box-shadow:0 18px 50px rgba(0,0,0,calc(.45*var(--c,1)))}
 .rw-c img{filter:grayscale(calc(1 - var(--c,1))) brightness(calc(.62 + .3*var(--c,1)))}
 .rw-v{display:none}
 .rw-n{color:rgba(255,255,255,calc(.4 + .45*var(--c,1)))}
 .rw-t h3{font-size:clamp(1.8rem,8.6vw,2.4rem)}
 .rw-t .rw-d,.rw-t .arrow{opacity:calc(var(--c,1)*1.6 - .6)}
 .rw-d{font-size:.88rem;margin-top:.55rem}
 .rw.nudge .rw-c{animation:rwNudge 1.25s var(--e)}/* stays on: removing it would replay the rise */
 @keyframes rwNudge{38%{translate:-13vw}}
 .rw-f{display:flex;align-items:center;gap:1rem;margin-top:.6rem}
 .rw-f .mono{color:#e5e8e2;flex:none}
 .rw-f i{flex:1;height:2px;background:rgba(255,255,255,.18);position:relative;overflow:hidden}
 .rw-f b{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(.2);transition:transform .5s var(--e)}
 .rw-hint{transition:opacity .5s}.rw-hint span{display:inline-block;animation:rwHint 1.6s ease-in-out infinite}
 .rw.used .rw-hint{opacity:0}
 @keyframes rwHint{50%{transform:translateX(5px)}}
}
/* hero numbers: a camera readout in the hero's bottom right, matching .hud (was a .stats strip that overlapped the hero's bottom edge) */
.h-stats{position:absolute;z-index:3;right:var(--pad);bottom:1.6rem;min-width:300px;padding:1rem 1.1rem}
.h-stats:before,.h-stats:after,.h-stats .vf:before,.h-stats .vf:after{content:"";position:absolute;width:14px;height:14px;border:1px solid rgba(255,255,255,.55)}
.h-stats:before{left:0;top:0;border-right:0;border-bottom:0}.h-stats:after{right:0;top:0;border-left:0;border-bottom:0}
.h-stats .vf{position:absolute;inset:0;pointer-events:none}.h-stats .vf:before{left:0;bottom:0;border-right:0;border-top:0}.h-stats .vf:after{right:0;bottom:0;border-left:0;border-top:0}
.hero .hs-h{display:flex;justify-content:space-between;gap:1rem;font-size:.6rem;color:rgba(255,255,255,.55);margin-bottom:.5rem}.hs-h b{font-weight:400;color:var(--g)}
.hs-r{display:grid;grid-template-columns:5.2rem 1fr;align-items:center;gap:1rem;padding:.45rem 0;border-top:1px dashed rgba(255,255,255,.18)}.hs-r:first-of-type{border-top:0}
.hs-r b{font:900 clamp(2.4rem,3.4vw,3.4rem)/1 var(--d);color:var(--g)}.hs-r span{font:300 .62rem/1.45 var(--m);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.js .hero .h-stats.reveal{transition-delay:.6s}
@media(max-height:700px) and (min-width:701px){.hs-r{padding:.25rem 0}.hs-r b{font-size:2.2rem}}
@media(max-width:700px){.hero-t{padding-bottom:11rem}.scroll-cue{display:none}.h-stats{left:var(--pad);min-width:0;bottom:1.2rem;display:grid;grid-template-columns:repeat(3,1fr);column-gap:.6rem;padding:.8rem}.hero .hs-h{grid-column:1/-1}.hs-r{grid-template-columns:1fr;gap:.25rem;border-top:0;padding:0}.hs-r b{font-size:2.2rem}.hs-r span{font-size:.54rem}}
/* home: when a scroll comes to rest near the top of a full-screen section, the page eases it into line with the screen.
   proximity never forces it, and the stack is taller than the screen, so inside it the browser scrolls freely.
   the 92px header offsets are for anchor jumps; snapping wants the edges flush */
html:has(body.home){scroll-snap-type:y proximity;scroll-padding-top:0}.home .hero,.home .blk,.home .svs,.home .bedrock{scroll-snap-align:start;scroll-margin-top:0}
/* projects: draggable photo gallery (js: // projects gallery). Phone first: two rows of tiles with the names showing.
   Screens with a mouse get the names on hover, and arrows. --gut is the page's side margin: on phones and tablets the row runs off the right edge
   (that edge says "swipe"); from 1000px it sits in the same column as the heading, the video and the photos below, so both edges line up */
.pj{padding-block:clamp(1.5rem,3vw,2.5rem) clamp(3rem,6vw,5rem)}
.pj-hd{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.pj-nav{display:none;gap:.6rem}
.pj-nav button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.04);color:#fff;font-size:1.05rem;cursor:pointer;transition:.3s}
.pj-nav button:hover:not(:disabled){background:var(--g);color:#06120a;border-color:var(--g)}
.pj-nav button:disabled{opacity:.3;cursor:default}
.pj-view{--gut:max(var(--pad),calc((100% - 1500px)/2 + var(--pad)));overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;-webkit-user-select:none;user-select:none}
.pj-view::-webkit-scrollbar{display:none}.pj-view.grabbing{cursor:grabbing}
.pj-grid{--col:150px;--row:190px;display:grid;grid-auto-flow:column dense;grid-template-rows:repeat(2,var(--row));grid-auto-columns:var(--col);gap:.75rem;width:max-content;padding:.4rem var(--gut)}
.pj-t{grid-column:span var(--c,1);grid-row:span var(--r,1);position:relative;overflow:hidden;border-radius:14px;background:var(--p2);border:1px solid var(--gb);transition:transform .4s var(--e)}
.pj-b{display:block;position:relative;width:100%;height:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:inherit}
.pj-b:focus-visible{outline:2px solid var(--y);outline-offset:-4px;border-radius:14px}
.pj-b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform .8s var(--e);-webkit-user-drag:none;pointer-events:none}
.pj-b:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,9,8,.88),rgba(6,9,8,.38) 45%,rgba(6,9,8,0) 72%);transition:opacity .5s;pointer-events:none}
.pj-c{position:absolute;z-index:1;left:.75rem;right:.75rem;bottom:.75rem;transition:opacity .5s var(--e),transform .5s var(--e)}
.pj-c .mono{display:block;margin-bottom:.35rem;font-size:.58rem;color:#d3dad3}
.pj-c h3{font-size:1.15rem;line-height:1.08;color:#fff}
.pj-c .pd{display:none;margin-top:.5rem;font-size:.85rem;line-height:1.35;color:#d3dad3;max-width:36ch}
.pj-big .pd{display:block}
.js .pj:not(.in) .pj-t{opacity:0}
.pj.in .pj-t{animation:pj-in .7s var(--e) backwards;animation-delay:calc(var(--i,0)*.1s)}
@keyframes pj-in{from{opacity:0;transform:translateY(20px) scale(.95)}}
@media (min-width:600px){.pj-grid{--col:220px;--row:260px}.pj-c{left:1rem;right:1rem;bottom:1rem}.pj-c .mono{font-size:.68rem}.pj-c h3{font-size:1.4rem}.pj-c .pd{display:block}}
@media (min-width:1000px){.pj-view{margin-inline:var(--gut)}.pj-grid{--col:300px;--row:330px;padding-inline:0}.pj-c{left:1.25rem;right:1.25rem;bottom:1.1rem}.pj-c h3{font-size:clamp(1.6rem,2.3vw,2.1rem)}}
@media (hover:hover){.pj-nav{display:flex}.pj-b:after,.pj-c{opacity:0}.pj-c{transform:translateY(.9rem)}.pj-t:hover{transform:scale(1.02)}.pj-b:hover img{transform:scale(1.05)}.pj-b:hover:after,.pj-b:focus-visible:after,.pj-b:hover .pj-c,.pj-b:focus-visible .pj-c{opacity:1}.pj-b:hover .pj-c,.pj-b:focus-visible .pj-c{transform:none}}
/* services page: a full-screen stage (one service on the photo, the other seven as cards on a band below) and an in-page detail panel.
   On a computer the panel pushes the photo left and arrives from the right; on phones and tablets it is a sheet from the bottom.
   Mobile first: base = phone. 700px adds the three points and arrows. 1000px = the computer layout with the side panel. */
.e-stage{--pw:min(46vw,46rem);position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;background:#0b100e;color:#fff;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.e-photo{position:relative;flex:1 1 auto;min-height:60svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.e-pic{position:absolute;inset:0;z-index:0;clip-path:inset(0 0 0 0);transition:clip-path .9s var(--e),filter .9s var(--e)}
.e-bg,.e-grow{position:absolute;inset:0}
.e-grow{z-index:1}
.e-bg img,.e-grow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;translate:var(--sx,0) 0;transition:translate .9s var(--e)}
.e-bg img{animation:eKb 22s var(--e) both}
@keyframes eKb{from{transform:scale(1)}to{transform:scale(1.1)}}
.e-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(10,13,12,.64) 0%,rgba(10,13,12,0) 22%,rgba(10,13,12,.45) 48%,rgba(10,13,12,.95) 100%)}
.e-copy{position:relative;z-index:3;padding:6rem var(--pad) 1.6rem;transition:opacity .5s}
.is-open .e-copy{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.e-copy .mono{color:var(--g)}
.e-t{font-size:clamp(2.6rem,12.5vw,3.6rem);margin:.55rem 0 .85rem;max-width:12ch;text-shadow:0 1px 16px rgba(0,0,0,.5)}
.e-l{font-size:1.02rem;line-height:1.5;color:#dde3dd;max-width:36ch;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.e-pts{display:none}
.e-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;margin-top:1.1rem}
.e-cta .pill:not(.pill-g){border-color:rgba(255,255,255,.7);background:rgba(10,13,12,.3)}
.e-more{font:400 1rem/1.6 var(--u);color:inherit;background:none;border:0;border-bottom:1px solid;padding:0 0 2px;cursor:pointer;transition:color .2s}
.e-more:hover{color:var(--g)}
.e-more:focus-visible{outline:2px solid var(--g);outline-offset:4px}
.e-copy.in>*{animation:eRise .8s var(--e) both;animation-delay:calc(var(--k,0)*70ms)}
.e-copy.in>:nth-child(2){--k:1}.e-copy.in>:nth-child(3){--k:2}.e-copy.in>:nth-child(4){--k:3}.e-copy.in>:nth-child(5){--k:4}
@keyframes eRise{from{opacity:0;transform:translateY(18px)}}
/* the band under the photo: the other seven + arrows, line, counter */
.e-dock{position:relative;z-index:3;background:var(--p);border-top:1px solid rgba(255,255,255,.16)}
.e-cards{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);padding:.9rem var(--pad) .4rem;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain}
.e-cards::-webkit-scrollbar{display:none}
.e-card{flex:none;position:relative;width:136px;aspect-ratio:16/10;border-radius:10px;overflow:hidden;border:0;padding:0;background:#16201c;color:#fff;text-align:left;cursor:pointer;scroll-snap-align:start;transition:transform .5s var(--e)}
.e-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e)}
.e-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,13,12,0) 40%,rgba(10,13,12,.78) 100%)}
.e-cc{position:absolute;left:.6rem;right:.6rem;bottom:.55rem;z-index:1;display:grid;gap:.15rem}
.e-cc .mono{color:var(--g);font-size:.6rem}
.e-cn{font:900 .88rem/1.15 var(--d);text-transform:uppercase}
.e-card:focus-visible{outline:2px solid var(--g);outline-offset:3px}
.e-ctl{display:flex;align-items:center;gap:1rem;padding:.2rem var(--pad) clamp(1.3rem,4svh,2.2rem)}
.e-arrows{display:none;gap:.6rem}
.e-arr{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(10,13,12,.35);color:#fff;font:400 1.05rem var(--u);cursor:pointer;transition:border-color .25s,background .25s}
.e-arr:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.e-arr:focus-visible{outline:2px solid var(--g);outline-offset:3px}
.e-line{flex:1;height:1px;background:rgba(255,255,255,.28);position:relative;overflow:hidden}
.e-line i{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(var(--p,.125));transition:transform .9s var(--e)}
.e-n{font:900 2.3rem/1 var(--d)}
.e-n small{font:300 .72rem var(--m);letter-spacing:.06em;color:rgba(255,255,255,.65);margin-left:.35rem}
@media (hover:hover){.e-card:hover{transform:translateY(-5px)}.e-card:hover img{transform:scale(1.07)}}
/* check lists (the three points on the photo, and the lists in the panel) */
.e-stage .pts li svg{flex:none;width:1.05rem;height:1.05rem;margin-top:.28rem;color:var(--g)}
.e-stage .pts li.ph,.e-stage .pts li.ph span,.e-stage .pts li.ph svg{color:#e0a64e}  /* placeholder wording stays visibly flagged, as it was on the old page */
/* the detail panel. Base = phone/tablet: a sheet that rises from the bottom over a dimmed page. It never reaches up under the header. */
.e-back{position:fixed;inset:0;z-index:57;background:rgba(5,8,7,.62);opacity:0;pointer-events:none;touch-action:none;transition:opacity .5s}
.is-open .e-back{opacity:1;pointer-events:auto}
.e-panel{--pp:clamp(1.25rem,5vw,2.2rem);position:fixed;left:0;right:0;bottom:0;height:min(86vh,calc(100vh - 4.6rem));height:min(86svh,calc(100svh - 4.6rem));z-index:58;display:flex;flex-direction:column;background:var(--p);color:var(--k);border-radius:22px 22px 0 0;border-top:1px solid rgba(255,255,255,.2);transform:translateY(104%);visibility:hidden;touch-action:pan-y;transition:transform .75s var(--e),visibility 0s .75s}
.is-open .e-panel{transform:none;visibility:visible;transition:transform .75s var(--e),visibility 0s}
.e-x{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(10,13,12,.7);color:#fff;font:300 1.5rem/1 var(--u);cursor:pointer;display:grid;place-items:center;transition:border-color .25s,background .25s}
.e-ptop{flex:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem var(--pp);border-bottom:1px solid var(--ln);touch-action:none}
.e-ptop .mono{color:var(--g)}
.e-x:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.e-x:focus-visible{outline:2px solid var(--g);outline-offset:3px}
.e-pin{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:1.4rem var(--pp) calc(1.8rem + env(safe-area-inset-bottom))}
.e-ph{font-size:clamp(2.2rem,9vw,3rem);margin:0 0 .8rem}
.e-pl{font-size:1.1rem;line-height:1.5;color:#e4eae4;max-width:46ch}
.e-pp{margin-top:.9rem;font-size:.97rem;line-height:1.6;color:#b9c2bb;max-width:62ch}
.e-pp b{color:#e8eee8;font-weight:500}
.e-pp.ph-block{margin-top:1.1rem}
.e-pb{margin-top:1.8rem;display:grid;gap:1.8rem}
.e-steps li{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.2rem .5rem;padding:1.05rem 0;border-top:1px solid var(--ln)}
.e-steps .n{font:300 .72rem/2 var(--m);letter-spacing:.08em;color:var(--g)}
.e-steps h3{font-size:1.3rem;margin-bottom:.3rem}
.e-steps p{font-size:.93rem;line-height:1.55;color:#b9c2bb;max-width:60ch}
.e-lists{display:grid;gap:1.6rem 2rem}
.e-lists h3{font-size:1.25rem;margin-bottom:.6rem}
.e-lists .pts{display:grid;gap:.5rem}
.e-lists .pts li{display:flex;gap:.6rem;font-size:.93rem;line-height:1.4;color:#c3cbc4}
.e-pin.in .e-pa>*,.e-pin.in .e-pb>*{animation:eRise .8s var(--e) both;animation-delay:calc(var(--k,0)*70ms + 220ms)}
@media (min-width:700px){
 .e-pts{display:grid;gap:.5rem;margin-top:1.1rem;max-width:44ch}
 .e-pts li{display:flex;gap:.6rem;font-size:.95rem;color:#cfd7d0;line-height:1.4;text-shadow:0 1px 12px rgba(0,0,0,.5)}
 .e-t{font-size:clamp(3rem,8vw,4.6rem)}
 .e-card{width:190px}
 .e-arrows{display:flex}
 .e-panel{height:min(82vh,calc(100vh - 4.6rem));height:min(82svh,calc(100svh - 4.6rem))}
 .e-lists{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
}
@media (min-width:1000px){
 .e-stage{height:100vh;height:100svh;min-height:640px}
 .e-photo{min-height:0}
 .e-scrim{background:linear-gradient(90deg,rgba(10,13,12,.78) 0%,rgba(10,13,12,.35) 44%,rgba(10,13,12,0) 68%),linear-gradient(180deg,rgba(10,13,12,.6) 0%,rgba(10,13,12,0) 20%,rgba(10,13,12,0) 62%,rgba(10,13,12,.82) 100%)}
 .e-copy{position:absolute;left:0;bottom:2.4rem;width:min(46vw,40rem);box-sizing:content-box;padding:0 0 0 var(--pad)}
 .e-t{font-size:clamp(3rem,5.4vw,5.6rem);max-width:none}
 .e-l{font-size:1.12rem;max-width:40ch}
 /* the band is ONE row on a computer: cards on the left, arrows and counter on the right, the progress line along its top edge.
    Cards are sized by screen height too, so on a short window the photo and the text panel keep their room. */
 .e-dock{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:1.6rem;padding-right:var(--pad)}
 .e-cards{padding:.95rem 3.5rem 1.1rem var(--pad);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 3.5rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 3.5rem),transparent)}  /* soft fade on the right edge = "there are more" */
 .e-card{--cw:clamp(170px,min(15vw,24vh),250px);--cw:clamp(170px,min(15vw,24svh),250px);flex:0 1 var(--cw);min-width:170px}  /* all seven fit when there is room, otherwise the row scrolls */
 .e-cn{font-size:1rem}
 .e-ctl{display:contents}
 .e-arrows{gap:.5rem}
 .e-arr{width:42px;height:42px}
 .e-line{position:absolute;left:0;right:0;top:0;height:2px;flex:none;background:none}
 /* detail panel on a computer: a column on the right, standing on top of the band (so the cards stay usable) */
 .e-back{opacity:0!important;pointer-events:none!important}
 .e-panel{position:absolute;left:auto;top:4.6rem;right:0;bottom:var(--dock,0px);width:var(--pw);height:auto;border-radius:0;border-top:0;border-left:1px solid rgba(255,255,255,.14);transform:translateX(104%);transition:transform .8s var(--e),visibility 0s .8s}
 .is-open .e-panel{transition:transform .8s var(--e),visibility 0s}
 .e-lists{grid-template-columns:1fr 1fr}
 /* PUSH: the photo slides left and is cropped by the arriving panel, recentred so the subject stays in view */
 .e-stage.is-open .e-pic{--sx:calc(var(--pw) * -.5);clip-path:inset(0 var(--pw) 0 0)}
}
@media (prefers-reduced-motion:reduce){.e-stage *,.e-stage *:before,.e-stage *:after{animation:none!important;transition:none!important}}
/* the wording for all eight services lives in the page as plain text (services.js reads it). Hidden on screen; shown when scripts are off. */
.svc-src{display:none}
.svc-src article{padding:2.2rem 0;border-top:1px solid var(--ln)}
.svc-src h2{font-size:clamp(2rem,6vw,3rem);margin-bottom:.8rem}
.svc-src h3{font-size:1.2rem;margin:1.2rem 0 .3rem}
.svc-src .lede{font-size:1.1rem}
.svc-src p,.svc-src li{max-width:62ch;color:#c3cbc4}
.svc-src .prose p{margin-top:.8rem}
.svc-src ul{display:grid;gap:.35rem;margin:.8rem 0}
.svc-src ul li{list-style:disc;margin-left:1.2rem}
.svc-src .ph,.svc-src .ph-block{color:#e3a54f}
/* clients: crest sphere + profile panel (js/clients.js, data in #cs-data in clients.html) */
.dummy-note{display:flex;gap:.9rem;align-items:baseline;max-width:46rem;margin:0 0 1.8rem;padding:.85rem 1.05rem;border:1px dashed var(--y);border-radius:10px;background:rgba(216,236,58,.08);color:var(--k);font-size:.92rem;line-height:1.45}
.dummy-note b{flex:none;color:var(--y)}.dummy-note strong{font-weight:500;color:var(--y)}
.cs,.cs-panel{--pw:min(30rem,36vw)}
.cs{overflow-x:clip}
.cs .row-h{margin-bottom:1rem}
.cs-hint .cs-h-touch{display:none}
@media (hover:none){.cs-hint .cs-h-mouse{display:none}.cs-hint .cs-h-touch{display:inline}}
.cs-stage{position:relative;isolation:isolate;width:min(100%,46rem,94vh);width:min(100%,46rem,94svh);aspect-ratio:1;margin:0 auto;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .8s var(--e)}
.cs-stage.is-drag{cursor:grabbing}
.cs-stage:before{content:"";position:absolute;inset:4%;border-radius:50%;background:radial-gradient(closest-side,rgba(95,211,90,.17),rgba(95,211,90,.06) 62%,transparent 74%);pointer-events:none}
.cs-n{position:absolute;left:50%;top:50%;width:var(--nz,80px);height:var(--nz,80px);margin:calc(var(--nz,80px)/-2) 0 0 calc(var(--nz,80px)/-2);padding:0;border:0;border-radius:50%;overflow:hidden;background:#fff;cursor:pointer;outline:none;box-shadow:0 0 0 2px rgba(95,211,90,.6),0 10px 26px rgba(0,0,0,.5);transition:box-shadow .25s}
.cs-n img{position:absolute;inset:11%;width:78%;height:78%;object-fit:contain;pointer-events:none}
.cs-n:hover,.cs-n:focus-visible{box-shadow:0 0 0 3px var(--y),0 0 0 9px rgba(216,236,58,.18),0 10px 26px rgba(0,0,0,.5)}
.cs-n.on{box-shadow:0 0 0 3px var(--y),0 0 0 11px rgba(216,236,58,.3),0 10px 26px rgba(0,0,0,.5)}
.cs-tip{position:absolute;left:50%;top:50%;z-index:3000;pointer-events:none;opacity:0;white-space:nowrap;background:rgba(10,13,12,.94);border:1px solid var(--g);color:#fff;padding:.4rem .7rem;border-radius:6px;transition:opacity .2s}
.cs-tip.on{opacity:1}
@media (min-width:1100px){.cs.is-open .cs-stage{transform:translateX(calc(var(--pw)/-2))}}

/* list of every client: not drawn, but left in the page for screen readers (the sphere shows them all by spinning) */
.cs-ix{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* profile + jobs: drawer from the right on desktop, sheet from the bottom on phones */
.cs-panel{position:fixed;z-index:58;top:0;right:0;bottom:0;width:var(--pw);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding:clamp(1.3rem,3vw,2.2rem);background:var(--p2);color:var(--k);border-left:1px solid var(--gb);transform:translateX(104%);visibility:hidden;transition:transform .7s var(--e),visibility 0s .7s}
.cs-panel.is-open{transform:none;visibility:visible;transition:transform .7s var(--e),visibility 0s}
.cs-panel:focus{outline:none}
.cs-x{position:sticky;top:0;z-index:2;align-self:flex-end;flex:none;display:grid;place-items:center;width:2.6rem;height:2.6rem;margin:-.5rem -.5rem 0 0;padding:0;background:var(--p2);border:1px solid var(--gb);border-radius:50%;color:var(--k);cursor:pointer;transition:border-color .25s,color .25s}
.cs-x svg{width:1.2rem;height:1.2rem}.cs-x:hover,.cs-x:focus-visible{border-color:var(--y);color:var(--y);outline:none}
.cs-ph{display:flex;align-items:center;gap:1.1rem;margin-top:.3rem}
.cs-crest{flex:none;width:5.4rem;height:5.4rem;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 3px rgba(95,211,90,.6);position:relative}
.cs-crest img{position:absolute;inset:11%;width:78%;height:78%;object-fit:contain}
.cs-pk{color:var(--g);margin-bottom:.5rem}
.cs-ph h3{font-size:clamp(1.8rem,2.6vw,2.5rem);line-height:1.08;overflow-wrap:anywhere}
.cs-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:1.6rem 0 1.5rem;border-block:1px solid var(--ln)}
.cs-stats>div{padding:.85rem 0 .85rem 1rem;border-left:1px solid var(--ln)}.cs-stats>div:first-child{padding-left:0;border-left:0}
.cs-stats dd{margin:.35rem 0 0;font:800 2rem/1 var(--d)}
.cs-pj-h{margin-bottom:.3rem}
.cs-jobs{list-style:none;margin:0;padding:0}
.cs-jobs li{display:grid;grid-template-columns:3.2rem 1fr auto;gap:.2rem .8rem;align-items:baseline;padding:.95rem 0;border-top:1px solid var(--ln)}
.cs-jobs li:last-child{border-bottom:1px solid var(--ln)}
.cs-jobs .y{color:var(--mut)}.cs-jobs .t{font-size:1.02rem;line-height:1.3}
.cs-jobs .s{grid-column:2;color:var(--g)}
.cs-jobs .sm{grid-column:3;grid-row:1;padding:.1rem .4rem;border:1px dashed var(--y);border-radius:4px;color:var(--y);font-size:.6rem;font-style:normal}
.cs-jobs .none{display:block;color:var(--mut)}
.cs-scrim{position:fixed;inset:0;z-index:57;background:rgba(5,8,7,.6);opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.cs-scrim.is-open{opacity:1;visibility:visible;transition:opacity .5s,visibility 0s}
@media (min-width:1100px){.cs-scrim{display:none}}
@media (max-width:1099px){.cs,.cs-panel{--pw:min(30rem,calc(100vw - 3rem))}}
@media (max-width:899px){
 .cs-panel{top:auto;left:0;width:auto;height:min(86vh,calc(100vh - 4.6rem));height:min(86svh,calc(100svh - 4.6rem));border-left:0;border-top:1px solid rgba(255,255,255,.2);border-radius:22px 22px 0 0;transform:translateY(104%)}
 .cs-panel.is-open{transform:none}
 .cs-crest{width:4.4rem;height:4.4rem}
}
@media (prefers-reduced-motion:reduce){.cs-panel,.cs-scrim,.cs-stage,.cs-n{transition:none}}

/* ================= about page (rebuilt 2026-10-27; street drawing + founders 2026-10-28) =================
   two parts: the hero ("WHO WE ARE" behind a street at dusk that turns into its own line drawing) and the founders (mission, then vision, each with
   one founder). Phone is the base; min-width queries add room. The hero and the founders have no background of their own, so the drawing (fixed
   behind them) can show through; that is also why this page drops the site's faint grid (body.pg-about). */
body.pg-about{background-image:radial-gradient(1200px 600px at 80% -10%,rgba(95,211,90,.07),transparent 60%)}

/* hero: the title rises from behind a street at dusk (js: // about hero). While you scroll the hero is held in place and the street turns into its
   own line drawing where it stands (js: // about street drawing): --mu pushes the street's bottom fade (--ah-fade) up the screen, the sky goes with
   it, the dark ground and the shade step aside, and a grey copy of the street (.ah-grey) fills a band under the colour edge, on the road only (above
   the road the cut-out's leftover sky patches would show in grey), so the road goes colour -> grey -> lines. Then the title stands alone on the drawing.
   Layers, back to front: the drawing (.ah-dw, fixed to the screen), the sky (.ah-plate), the dark ground (.ah-ground), the title, the grey street, the
   street (.ah-street = the street cut out of the same photo + the shade). The photo is AI-generated and cut with scripts, one set for wide screens and
   one for phones. Without scripts it is one still screen. */
.ah-run{position:relative}
.ah-run.on .ah{position:sticky;top:0}
.ah{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;color:#fff}
.ah-plate,.ah-fg{position:absolute;inset:0;display:block}
.ah-plate{z-index:1}
.ah-plate img,.ah-fg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.ah-ground{position:absolute;z-index:2;left:0;right:0;top:calc(100% - 40svh);height:200%;background:var(--p);will-change:opacity}
.ah-title{position:absolute;z-index:3;left:0;right:0;top:14%;margin:0;text-align:center;white-space:nowrap;font-size:min(19vw,30svh);line-height:.86;color:#f7f6f0}
.ah-title.rdy{right:auto;text-align:left;width:max-content}
.ah-l{display:inline}/* "WHO WE ARE" on ONE line on every screen (2026-11-06, user: phones used to break it into "WHO WE" / "ARE") */
.ah-title .ch{display:inline-block;will-change:transform}
.js .ah-title:not(.rdy){visibility:hidden}
.js .ah-title .ch{transform:translate3d(0,118%,0);transition:transform 1.3s var(--e) calc(.3s + var(--k)*55ms)}
.js .ah.go .ah-title .ch{transform:none}
.ah-street{position:absolute;inset:0;z-index:4}
.ah-street,.ah-plate{--ah-fade:linear-gradient(180deg,#000 calc(100% - 40svh - var(--mu,0px)),rgba(0,0,0,.92) calc(100% - 34svh - var(--mu,0px)),rgba(0,0,0,.74) calc(100% - 27svh - var(--mu,0px)),rgba(0,0,0,.5) calc(100% - 20svh - var(--mu,0px)),rgba(0,0,0,.26) calc(100% - 12svh - var(--mu,0px)),rgba(0,0,0,.09) calc(100% - 5svh - var(--mu,0px)),transparent calc(100% - var(--mu,0px)));-webkit-mask-image:var(--ah-fade);mask-image:var(--ah-fade)}
.ah-grey{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;--gm:linear-gradient(180deg,#000 calc(100% - 8svh - var(--mu,0px)),rgba(0,0,0,.5) calc(100% + 6svh - var(--mu,0px)),transparent calc(100% + 20svh - var(--mu,0px)));-webkit-mask-image:var(--gm),linear-gradient(180deg,transparent 55%,#000 63%);-webkit-mask-composite:source-in;mask-image:var(--gm),linear-gradient(180deg,transparent 55%,#000 63%);mask-composite:intersect}
.ah-grey picture{position:absolute;inset:0;display:block}
.ah-grey img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:grayscale(1) brightness(.62) contrast(1.15)}
.ah-shade{position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;background:linear-gradient(0deg,var(--p) 0%,rgba(10,13,12,.88) 40%,rgba(10,13,12,0))}
.ah-crumb{position:absolute;z-index:3;left:max(var(--pad),calc((100vw - 1500px)/2 + var(--pad)));top:clamp(4.6rem,10vh,6rem);margin:0}
.ah-cap{position:absolute;z-index:5;left:max(var(--pad),calc((100vw - 1500px)/2 + var(--pad)));bottom:1.1rem;margin:0;font-size:.6rem;color:rgba(255,255,255,.5)}
@media (min-width:701px){
 .ah-shade{height:38%}
 .ah-cap{left:auto;right:max(var(--pad),calc((100vw - 1500px)/2 + var(--pad)))}
}
@media (prefers-reduced-motion:reduce){.js .ah-title .ch{transform:none;transition:none}}

/* the street drawing: drawn in the hero picture's own pixels (2048x1152, "slice" = the photo's cover), so it lies exactly on the wide photo; strokes
   stay 1px at any size. Its strength is set by js: off at rest, full while the title stands alone, barely there behind the founders. Phones and
   portrait screens use another photo, so they get their own drawing (.ah-dw-m, below). The labels are real civil terms with made-up numbers. */
.ah-dw{position:fixed;left:0;top:0;z-index:0;width:100%;height:100vh;height:100svh;min-height:520px;pointer-events:none;opacity:0;
 -webkit-mask-image:radial-gradient(120% 95% at 50% 52%,#000 58%,rgba(0,0,0,.4) 100%);mask-image:radial-gradient(120% 95% at 50% 52%,#000 58%,rgba(0,0,0,.4) 100%)}
.ah-dw line,.ah-dw polyline,.ah-dw polygon,.ah-dw circle,.ah-dw rect{fill:none;stroke:#f7f6f0;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.ah-dw .k1{stroke-opacity:.5;stroke-width:1}
.ah-dw .k2{stroke-opacity:.26;stroke-width:.8}
.ah-dw .k3{stroke-opacity:.1;stroke-width:.7}
.ah-dw .ann{stroke-opacity:.42;stroke-width:.8}
.ah-dw .hid{stroke-opacity:.4;stroke-width:.9;stroke-dasharray:7 5}
.ah-dw .chain{stroke-dasharray:22 6 3 6}
.ah-dw .sect{stroke-dasharray:30 7 3 7}
.ah-dw .bdy{stroke-dasharray:26 5 3 5 3 5}
.ah-dw text{fill:#f7f6f0;fill-opacity:.5;font:300 13px var(--m);letter-spacing:.08em}
.ah-dw .s{font-size:11px;fill-opacity:.4}
.ah-dw .b{font-size:14px;font-weight:400;fill-opacity:.62;letter-spacing:.14em}
/* phones + portrait screens use the other photo, so they get their own drawing (#ah-dw-m, traced on ab-fg-m, 1152x2048). That picture is shown
   at about .45 of its size, so its text is drawn bigger to land at the same size on screen. */
.ah-dw-m{display:none}
.ah-dw-m text{font-size:21px}.ah-dw-m .s{font-size:18px}.ah-dw-m .b{font-size:23px}
@media (max-width:700px),(max-aspect-ratio:4/5){#ah-dw{display:none}.ah-dw-m{display:block}}

/* vision + mission (2026-11-06, js: // about vision + mission). No founder photos (the founders don't want their faces shown). Since 6 Nov evening:
   a clean company hard hat (it replaced the dirty one), cut out of the user's own picture onto the page colour. The background was dropped because
   the footer right after opens with its own full-screen street photo and the two competed. First it is a line drawing next to "Our vision", then
   colour rises up through it from the bottom until it is the real hat next to "Our mission", the mirror of the hero, where the street drains into
   its drawing. Four layers share one box in the cut-out's own pixels (1864 x 1404): the grey copy and the colour hat (ab-hatc-grey-*, ab-hatc-*),
   the traced lines (ab-hatc-lines) and the measurements and labels (svg.fd-hd, street-drawing style). Sized so the whole hat shows, measurements
   included on computers. --x (0..1, set by js) is how far the colour has risen: a grey band leads it and the lines fade just above it. The picture
   is AI-made (the user's); the real logo was printed onto the hat in black by script. The words sit in a solid black column
   on the left (like a film poster's band); the handwritten heading is bigger than the column and runs out of it. The section has no background, so
   the street drawing shows faintly behind it. */
.fd{position:relative}
.fd-stage{position:relative;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.fd.on .fd-stage{position:sticky;top:0}
.fd-col{position:absolute;z-index:1;top:0;bottom:0;left:0;width:66vw;background:#030404;pointer-events:none}
/* phones: the hat big beside the words, its back cut off by the screen's right edge (like a film frame), peak and logo turned towards the text;
   sized so the whole logo stays on screen. Computers: see the min-width:901px block. */
.fd-hat{--x:0;--edge:calc(var(--x) * 150% - 40%);position:absolute;z-index:2;aspect-ratio:1864/1404;width:140vw;left:20vw;bottom:2svh;pointer-events:none;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(0deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(0deg,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
.fd-hat>*{position:absolute;inset:0;width:100%;height:100%;display:block}
/* a soft dark halo behind the hat, so the street's faint lines don't run through the hat drawing */
.fd-hat:before{content:"";position:absolute;inset:6% 4% 4%;background:radial-gradient(closest-side,rgba(10,13,12,.94),rgba(10,13,12,.8) 62%,rgba(10,13,12,0))}
.fd-hat img{object-fit:cover}
.fd-hc{-webkit-mask-image:linear-gradient(0deg,#000 calc(var(--edge) - 8%),transparent calc(var(--edge) + 4%));mask-image:linear-gradient(0deg,#000 calc(var(--edge) - 8%),transparent calc(var(--edge) + 4%))}
.fd-hg{-webkit-mask-image:linear-gradient(0deg,#000 calc(var(--edge) + 8%),transparent calc(var(--edge) + 24%));mask-image:linear-gradient(0deg,#000 calc(var(--edge) + 8%),transparent calc(var(--edge) + 24%))}
.fd-hl,.fd-hd{-webkit-mask-image:linear-gradient(0deg,transparent calc(var(--edge) + 2%),#000 calc(var(--edge) + 18%));mask-image:linear-gradient(0deg,transparent calc(var(--edge) + 2%),#000 calc(var(--edge) + 18%))}
.fd-hd line,.fd-hd polyline,.fd-hd path,.fd-hd circle{fill:none;stroke:#f7f6f0;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.fd-hd .k1{stroke-opacity:.62;stroke-width:1.15}.fd-hd .k2{stroke-opacity:.36;stroke-width:.9}.fd-hd .k3{stroke-opacity:.16;stroke-width:.8}.fd-hd .ann{stroke-opacity:.5;stroke-width:.9}
.fd-hd .chain{stroke-dasharray:22 6 3 6}
.fd-hd text{fill:#f7f6f0;fill-opacity:.55;font:300 22px var(--m);letter-spacing:.08em}
.fd-hd .s{font-size:18px;fill-opacity:.42}.fd-hd .b{font-size:24px;font-weight:400;fill-opacity:.7;letter-spacing:.14em}
.fd-hd .tb{display:none}
.fd-txt{position:absolute;z-index:5;left:var(--pad);right:var(--pad);top:calc(4.6rem + 1svh);transform:translateY(var(--ty,0rem))}
/* heading: handwritten (Loved by the King), tilted up 4.5deg like a note on a poster, with a green pen line under it that draws itself (js). Letters a
   touch tighter, the font's very wide word space cut down, the I before S pulled in (.k). The line has the letters' tilt (it is inside the heading)
   and stroke (.036em) and runs just past the word; width:0 + min-width keeps it out of the heading's own width (an svg counts as 300px otherwise). */
.fd-txt .fd-hw{display:inline-block;margin:0;font:400 clamp(3.6rem,19vw,5.6rem)/.95 'Loved by the King',var(--u);text-transform:uppercase;letter-spacing:-.03em;word-spacing:-.2em;
 white-space:nowrap;color:var(--k);transform:rotate(-4.5deg);transform-origin:0 100%}
.fd-hw .k{margin-right:-.05em}
.fd-ul{display:block;width:0;min-width:108%;height:.3em;margin:-.1em 0 0 -2%;overflow:visible}
.fd-ul path{fill:none;stroke:var(--g);stroke-width:.036em;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:0}
/* statement: the lead-in small, then the promise stacked in the title font, one phrase per line (breaks set by hand in the markup); js sizes the lines
   so the longest one just fills the column. The words are the company's own, unchanged. */
.fd-txt .fd-st{margin:1.1rem 0 0;max-width:calc(58vw - var(--pad));font:300 clamp(.9rem,1.05vw,1.15rem)/1.4 var(--u);color:var(--k)}
/* lines broken by meaning, not by the screen (2026-11-06, user: "the way you divided the text is random"): the lead-in one phrase per line
   (what we do / to what / for whom), quieter than the promises; one promise per line, all the same size, with the joining "and" set small and
   lower-case so the promises read as equal beats; the proof line one item per line. A line only wraps if a very narrow screen forces it. */
.fd-lead{display:block;color:rgba(247,246,240,.74)}
.fd-lead>span{display:block;white-space:nowrap}
.fd-proof>span{display:block}
.fd-and{display:inline-block;margin-right:.18em;font:italic 300 .4em/1 var(--u);text-transform:none;letter-spacing:0;vertical-align:.18em;color:rgba(247,246,240,.74)}
.fd-stack{display:block;margin-top:.8rem}
.fd-stack>span{display:block;width:max-content;font:900 var(--fz,2.6rem)/.95 var(--d);text-transform:uppercase;letter-spacing:-.005em;white-space:nowrap;color:var(--k)}
.fd-stack>span+span{margin-top:.1em}
/* the small line under each statement (trusted by / ISO) in our green */
.fd-txt .fd-proof{margin:1.1rem 0 0;max-width:calc(80vw - var(--pad));color:var(--g)}
/* vision shows first; mission waits until the colour has risen (without scripts only vision and the drawing show) */
.fd-m{display:none}
.js .fd-m{display:block;opacity:0;visibility:hidden}
.fd-grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.06;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* the grain and the left shading would slide up over the fixed lines as one block with a hard top edge: they fade in from the top instead */
.fd-grain,.fd-stage:before{-webkit-mask-image:linear-gradient(180deg,transparent,#000 35svh);mask-image:linear-gradient(180deg,transparent,#000 35svh)}
@media (min-width:901px){
 .fd-stage:before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,var(--p) 0%,rgba(10,13,12,.72) 24%,rgba(10,13,12,0) 46%)}
 .fd-col{z-index:4;left:calc(max(var(--pad),calc((100vw - 1500px)/2 + var(--pad))) - 2rem);width:calc(clamp(17rem,19vw,21rem) + 4rem)}
 .fd-hat{width:auto;height:90svh;left:auto;right:0;bottom:auto;top:50%;transform:translateY(-50%)}
 .fd-hd .tb{display:inline}
 .fd-txt{left:max(var(--pad),calc((100vw - 1500px)/2 + var(--pad)));right:auto;width:clamp(17rem,19vw,21rem);top:50%;transform:translateY(calc(-50% + var(--ty,0rem)))}
 .fd-txt .fd-hw{font-size:clamp(5rem,10vw,11rem)}
 .fd-txt .fd-st{margin-top:1.5rem;max-width:none}
 .fd-txt .fd-proof{max-width:none}
}
@media (min-width:600px) and (max-width:900px){.fd-hat{width:96vw;left:30vw}}
@media (max-width:900px) and (max-height:700px){.fd-hat{width:116vw;left:30vw}}
/* phones + tablets: no solid black box (2026-11-06, user: "the black box does not look right"). The 66vw column had hard top and right edges that cut
   through the street lines and the hat. Now a soft shade, darkest behind the words on the left, fading out to the right and before the hat, no edges. */
@media (max-width:900px){.fd-col{width:auto;right:0;background:linear-gradient(90deg,rgba(3,4,4,.9) 0%,rgba(3,4,4,.7) 45%,rgba(3,4,4,0) 92%);
 -webkit-mask-image:linear-gradient(180deg,transparent,#000 14svh,#000 52svh,transparent 74svh);mask-image:linear-gradient(180deg,transparent,#000 14svh,#000 52svh,transparent 74svh)}}
@media (prefers-reduced-motion:reduce){.fd-hat,.fd-txt{transition:opacity .28s}.fd-dip .fd-hat,.fd-dip .fd-txt{opacity:0!important}.fd-ul path{stroke-dashoffset:0!important}}

/* ===== individual service pages (2026-11-05, option A from service-page-mockups): full-screen photo opener with an "at a glance" readout,
   intro that lights up word by word, steps / lists joined by a road line that paints itself as you scroll, next service as a full-width photo.
   Markup .svp-* in the 9 service pages; scroll effects in the "service pages" block at the end of js/v4.js. Without scripts everything shows lit. */
@keyframes svp-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes svp-push{from{transform:scale(1.16)}to{transform:scale(1.03)}}
.svp-open{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;background:#0b100e;color:#fff}
.svp-media{position:absolute;inset:0;z-index:-1}
.svp-media img{width:100%;height:100%;object-fit:cover;animation:svp-push 11s cubic-bezier(.2,.6,.1,1) both}
.svp-media:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,13,12,1) 0%,rgba(10,13,12,.62) 30%,rgba(10,13,12,0) 62%),linear-gradient(90deg,rgba(10,13,12,.55) 0%,rgba(10,13,12,0) 60%),linear-gradient(180deg,rgba(10,13,12,.6) 0%,rgba(10,13,12,0) 20%)}
.svp-crumb{position:absolute;left:var(--pad);top:clamp(5.4rem,10vh,7rem);color:rgba(255,255,255,.72);animation:svp-in 1s var(--e) .2s both}
.svp-crumb a{transition:color .3s}.svp-crumb a:hover{color:var(--g)}
.svp-foot{position:absolute;left:0;right:0;bottom:0;max-width:1500px;margin:auto;padding:0 var(--pad) clamp(2rem,6vh,4.2rem);display:flex;align-items:flex-end;justify-content:space-between;gap:2.5rem}
.svp-copy{flex:1 1 auto;min-width:0;max-width:60rem}
.svp-copy>*{animation:svp-in 1.1s var(--e) both}.svp-copy>:nth-child(1){animation-delay:.25s}.svp-copy>:nth-child(2){animation-delay:.35s}.svp-copy>:nth-child(3){animation-delay:.5s}
.svp-eye{color:var(--g);margin-bottom:1.1rem}
.svp-eye,.svp-crumb{text-shadow:0 1px 14px rgba(0,0,0,.7)}
.svp-copy h1{font-size:clamp(3.2rem,8.4vw,9.4rem);line-height:1;max-width:none;text-shadow:0 4px 40px rgba(0,0,0,.35)}
.svp-lede{font-size:clamp(1.05rem,1.35vw,1.28rem);line-height:1.5;color:#d9e0da;max-width:40ch;margin-top:1.3rem}
/* the readout box, same viewfinder corners as the home hero numbers */
.svp-read{position:relative;flex:0 0 auto;width:clamp(270px,24vw,340px);padding:1rem 1.15rem .55rem;background:rgba(10,13,12,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:svp-in 1.1s var(--e) .7s both}
.svp-read:before,.svp-read:after,.svp-read .vf:before,.svp-read .vf:after{content:"";position:absolute;width:14px;height:14px;border:1px solid rgba(255,255,255,.55);pointer-events:none}
.svp-read:before{left:0;top:0;border-right:0;border-bottom:0}.svp-read:after{right:0;top:0;border-left:0;border-bottom:0}
.svp-read .vf{position:absolute;inset:0;pointer-events:none}.svp-read .vf:before{left:0;bottom:0;border-right:0;border-top:0}.svp-read .vf:after{right:0;bottom:0;border-left:0;border-top:0}
.svp-rh{display:flex;justify-content:space-between;color:rgba(255,255,255,.66);margin-bottom:.45rem}
.svp-rh b{font-weight:300;color:var(--g)}
.svp-read li{display:grid;grid-template-columns:1.9rem 1fr;align-items:baseline;padding:.6rem 0;border-top:1px solid rgba(255,255,255,.14);font-size:.95rem;line-height:1.35;color:#eef1ea}
.svp-read li .mono{color:var(--g)}
.svp-read li.ph{color:#e3a54f;font-size:.85rem}
/* intro */
.svp-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:1.4rem clamp(2rem,5vw,5rem);padding-block:clamp(5rem,11vw,9.5rem) clamp(3rem,6vw,5rem)}
.svp-lab{align-self:start;display:flex;align-items:center;gap:.7rem;padding-top:.9rem}
.svp-lab:before{content:"";width:28px;height:1px;background:var(--g)}
.svp-big{grid-column:2;font:300 clamp(1.45rem,2.5vw,2.4rem)/1.38 var(--u);letter-spacing:-.02em;color:var(--k);max-width:46ch}
.svp-big .w{opacity:.16;transition:opacity .35s linear}.svp-big .w.on{opacity:1}
.svp-small{grid-column:2;max-width:60ch;font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.7}
.svp-small:not(.ph-block){color:#b9c2bb}
.svp-intro .ph-block{margin-top:0}
/* steps and lists */
.svp-scope{padding-block:clamp(2.5rem,6vw,5rem) clamp(5rem,10vw,9rem)}
.svp-sh{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem 2rem;padding-bottom:1.3rem;margin-bottom:clamp(2.6rem,5vw,4.6rem);border-bottom:1px solid var(--ln)}
.svp-sh h2{font-size:clamp(2.4rem,5.2vw,5rem)}
.svp-sh .mono{padding-bottom:.4rem}
.svp-steps{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:clamp(3rem,5vw,4.6rem) clamp(1.6rem,3vw,3rem)}
.svp-row{position:relative;--f:1}
.svp-steps .svp-row{padding-top:2.2rem}
.svp-row:before,.svp-row:after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:repeating-linear-gradient(90deg,currentColor 0 24px,transparent 24px 42px)}
.svp-row:before{color:rgba(255,255,255,.12)}
.svp-row:after{color:var(--y);clip-path:inset(0 calc((1 - var(--f))*100%) 0 0)}
.svp-num{display:block;font:900 clamp(4.4rem,7.4vw,7.6rem)/.78 var(--d);color:var(--g);-webkit-text-stroke:1.5px var(--g);margin-bottom:1.5rem;transition:color .7s var(--e),-webkit-text-stroke-color .7s}
.svp-steps h3{font-size:clamp(1.5rem,2vw,2.05rem);margin-bottom:.75rem}
.svp-steps p{font-size:.98rem;line-height:1.6;color:#b9c2bb;max-width:34ch}
.svp-steps h3,.svp-steps p{transition:opacity .7s var(--e)}
.js .svp-row:not(.on) .svp-num{color:transparent;-webkit-text-stroke-color:rgba(238,241,234,.3)}
.js .svp-steps .svp-row:not(.on) h3,.js .svp-steps .svp-row:not(.on) p{opacity:.35}
/* amber placeholder cards (wording still to come from the business), and a link inside a card */
.svp-row.ph h3,.svp-row.ph p{color:#e3a54f}.svp-row.ph .svp-num{color:#e3a54f;-webkit-text-stroke-color:#e3a54f}
.svp-steps p a{color:var(--k);text-decoration:underline;text-decoration-color:var(--g);text-underline-offset:3px;transition:color .3s}.svp-steps p a:hover{color:var(--g)}
/* next service */
.svp-next{position:relative;display:block;height:clamp(440px,74svh,800px);overflow:hidden;isolation:isolate;color:#fff;--q:0}
.svp-nm{position:absolute;inset:-10% 0;z-index:-1}
.svp-nm img{width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.85);transform:translateY(calc(var(--q)*7%));transition:filter .9s var(--e)}
.svp-nm:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--p) 0%,rgba(10,13,12,0) 30%,rgba(10,13,12,0) 50%,rgba(10,13,12,.88) 100%)}
.svp-next:hover .svp-nm img,.svp-next:focus-visible .svp-nm img{filter:brightness(.8) saturate(1.05)}
.svp-nc{position:absolute;left:0;right:0;bottom:0;max-width:1500px;margin:auto;padding:0 var(--pad) clamp(2.5rem,7vh,4.5rem);display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.svp-nc .mono{color:rgba(255,255,255,.75)}.svp-nc em{font-style:normal;color:var(--g)}
.svp-nc b{display:block;font:900 clamp(3rem,9vw,9.4rem)/1 var(--d);text-transform:uppercase;margin-top:.9rem;transition:transform .8s var(--e)}
.svp-next:hover .svp-nc b{transform:translateX(.7rem)}
.svp-arw{flex:none;display:grid;place-items:center;width:clamp(64px,7vw,108px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.5);transition:background .5s var(--e),border-color .5s,transform .6s var(--e)}
.svp-arw svg{width:36%;fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.svp-next:hover .svp-arw{background:var(--g);border-color:var(--g);transform:rotate(-45deg)}.svp-next:hover .svp-arw svg{stroke:#06120a}
@media (min-width:701px) and (max-width:1000px){.svp-steps{--cols:2!important}.svp-intro{grid-template-columns:1fr}.svp-big,.svp-small{grid-column:1}}
@media (max-width:700px){
 .svp-crumb{top:4.9rem;font-size:.6rem}
 .svp-foot{flex-direction:column;align-items:stretch;gap:1.5rem;padding-bottom:1.5rem}
 .svp-copy h1{font-size:clamp(2.9rem,14vw,4.6rem)}
 .svp-read{width:auto}
 .svp-intro{grid-template-columns:1fr;padding-top:4rem}.svp-big,.svp-small{grid-column:1}
 .svp-steps{--cols:1!important;gap:2.6rem}
 .svp-steps .svp-row{padding:0 0 0 1.6rem}
 .svp-steps .svp-row:before,.svp-steps .svp-row:after{right:auto;bottom:0;width:2px;height:auto;background:repeating-linear-gradient(180deg,currentColor 0 18px,transparent 18px 32px)}
 .svp-steps .svp-row:after{clip-path:inset(0 0 calc((1 - var(--f))*100%) 0)}
 .svp-num{font-size:3.6rem;margin-bottom:1rem}
 .svp-next{height:62svh}
 .svp-nc b{font-size:clamp(2.6rem,13vw,4rem)}
 .svp-arw{display:none}
}
/* service pages on short, wide screens (a phone on its side): the opener grows to fit its text instead of cutting the title */
@media (orientation:landscape) and (max-height:560px){
 .svp-open{height:auto;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
 .svp-crumb{top:4.3rem}
 .svp-foot{position:relative;left:auto;right:auto;bottom:auto;width:100%;padding-top:6.4rem;padding-bottom:1.4rem}
 .svp-copy h1{font-size:clamp(2.4rem,7vw,3.8rem)}
 .svp-lede{font-size:.98rem;margin-top:.8rem}
 .svp-read{width:clamp(250px,34vw,320px)}
}
/* projects "On the job" uses the draggable gallery above (.pj). Its photos have no job names, so they get no dark fade */
.pj-oj .pj-b:after{display:none}
/* projects opening (.pjh, js: // projects opening): the service-page opening (.svp-open) with the showreel's clips playing behind the title in
   place of a photo; the readout lights the clip on screen. "Play the showreel" plays the full reel right there: the words fade away, the video
   shows whole (letterboxed) with controls, and a Close button brings the page back */
.pjh .svp-media video{width:100%;height:100%;object-fit:cover;display:block;background:#0b100e}
.pjh .svp-media:after{transition:opacity .6s}
.pjh .svp-copy>:nth-child(4){animation-delay:.62s}
.pjh .reel-play{position:relative;left:auto;top:auto;transform:none;margin-top:1.8rem}
.pjh .reel-play:hover{transform:scale(1.04)}
.pjh-ch li{opacity:.45;transition:opacity .5s}.pjh-ch li.on{opacity:1}
.pjh-note{padding:.6rem 0 .15rem;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.55);font-size:.62rem}
.pjh .svp-foot{transition:opacity .5s}
.pjh-x{position:absolute;z-index:2;right:var(--pad);top:clamp(5.2rem,10vh,6.8rem);padding:.75rem 1.15rem;border-radius:99px;border:1px solid rgba(255,255,255,.35);background:rgba(10,13,12,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:.7rem;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s,background .3s,color .3s}
.pjh-x:hover,.pjh-x:focus-visible{background:var(--g);color:#06120a;border-color:var(--g)}
.pjh.playing{background:#000}
.pjh.playing .svp-media{z-index:1}.pjh.playing .svp-media:after{opacity:0}
.pjh.playing .svp-media video{object-fit:contain;background:#000}
.pjh.playing .svp-foot{opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}.pjh.playing .svp-crumb{visibility:hidden}
.pjh.playing .pjh-x{opacity:1;visibility:visible;transition:opacity .4s .3s,background .3s,color .3s}
@media (max-width:700px){.pjh-note{display:none}.pjh .reel-play{margin-top:1.3rem}.pjh-x{top:4.6rem}}
/* the "On the job" gallery is the page's main section now, so it gets a proper heading and room above it */
.pj-oj{padding-top:clamp(4.5rem,9vw,8rem)}
.pj-oj .pj-hd{align-items:flex-end;margin-bottom:clamp(1.2rem,2.6vw,2.2rem)}
.pj-oj .pj-hd h2{margin-top:.8rem}