/* Hypha Capture motion layer. Everything here is progressive: with JS off the page is the plain page. */
:root{--ease:cubic-bezier(.2,.7,.2,1);--glow:rgba(62,224,196,.35)}
@media (prefers-color-scheme:light){:root{--glow:rgba(4,122,104,.25)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stat b,.job .amt{font-variant-numeric:tabular-nums}

/* nav: shrink on scroll without moving the page (fixed outer height, inner visuals scale) */
header.site{height:61px;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0}
header.site::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transform-origin:top;transition:transform .35s var(--ease),box-shadow .35s}
header.site .wrap{transition:transform .35s var(--ease)}
.brand img{transition:transform .35s var(--ease)}
header.site.shrunk::before{transform:scaleY(.8);box-shadow:0 8px 30px -12px rgba(0,0,0,.5)}
header.site.shrunk .wrap{transform:translateY(-6px)}
header.site.shrunk .brand img{transform:scale(.86)}

/* buttons: magnetic + press */
.btn{transform:translate(var(--mx,0px),var(--my,0px)) scale(var(--s,1));transition:transform .25s var(--ease),filter .2s,box-shadow .25s}
.btn:active{--s:.96}
.btn:not(.ghost):hover{box-shadow:0 8px 28px -8px color-mix(in srgb,var(--amber) 70%,transparent)}
.btn.ghost:hover{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal) inset}

/* hero */
.hero .wrap{z-index:1}
#threads{opacity:1;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
@media(max-width:700px){#threads{opacity:.85}}

/* reveal (only elements JS tagged with .rv; failsafe .hy-fail shows everything) */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease) var(--d,0ms),transform .8s var(--ease) var(--d,0ms)}
.js .rv.in,.hy-fail .rv{opacity:1;transform:none}
.js section h2::after{content:"";display:block;height:2px;width:96px;margin-top:10px;background:linear-gradient(90deg,var(--teal),transparent);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) .15s}
.js section.lit h2::after,.hy-fail section h2::after{transform:none}

/* scroll thread */
.spine{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:5;overflow:visible}
.spine path{fill:none;stroke-linecap:round}
.spine .sp-glow{stroke:var(--teal);stroke-width:7;opacity:.16}
.spine .sp-core{stroke:var(--teal);stroke-width:2}
.spine .sp-ghost{stroke:var(--line);stroke-width:1.5;opacity:.7}
.spine .stub{stroke:var(--teal);stroke-width:2;transition:stroke-dashoffset .8s var(--ease)}
.spine .node{fill:var(--bg);stroke:var(--teal);stroke-width:2;transition:fill .5s,stroke .5s}
.spine .node.on{fill:var(--amber);stroke:var(--amber)}
.spine .ring{fill:none;stroke:var(--amber);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.spine .ring.on{animation:ringout 1.4s var(--ease) 1}
.spine .head{fill:var(--teal)}.spine .head-g{fill:var(--teal);opacity:.22}
@keyframes ringout{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(3.2)}}
main[data-spine]{position:relative}

/* job cards: lights up, pulse travels the border */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.job{position:relative;transition:border-color .6s,box-shadow .6s,transform .35s var(--ease)}
.job.lit{border-color:color-mix(in srgb,var(--teal) 55%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--teal) 25%,transparent),0 12px 40px -18px var(--glow)}
.job::after{content:"";position:absolute;inset:-1px;border-radius:12px;padding:1.5px;pointer-events:none;opacity:0;background:conic-gradient(from var(--a),transparent 0 78%,var(--amber) 92%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.job.lit::after{animation:jobpulse 1.7s var(--ease) .1s 1 both}
@keyframes jobpulse{0%{--a:0deg;opacity:1}85%{opacity:1}100%{--a:360deg;opacity:0}}
.job .amt{transition:text-shadow .8s}
.job.lit .amt{text-shadow:0 0 24px color-mix(in srgb,var(--amber) 45%,transparent)}

/* Colorado map */
.where{padding-top:56px}
.comap{margin:0;max-width:760px}
.comap svg{display:block;width:100%;height:auto;overflow:visible}
.co-outline{fill:color-mix(in srgb,var(--teal) 5%,var(--card));stroke:var(--line);stroke-width:2}
.net path{fill:none;stroke-linecap:round}
.net .trunk{stroke:var(--teal);stroke-width:2.6;opacity:.95}
.net .twig{stroke:var(--teal);stroke-width:1.5;opacity:.6}
.net .flow{stroke:var(--amber);stroke-width:3.2;opacity:0;stroke-dasharray:26 974}
.armed .net .draw{stroke-dasharray:1000;stroke-dashoffset:1000}
.on .net .draw{stroke-dashoffset:0;transition:stroke-dashoffset var(--t,1.6s) cubic-bezier(.3,.6,.3,1) var(--d,0s)}
.on .net .flow{opacity:.95;animation:flow 3.6s linear var(--fd,2s) infinite}
@keyframes flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-1000}}
.pin-dot{fill:var(--amber)}
.pin-ring{fill:none;stroke:var(--amber);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.pin-lab{fill:var(--ink);font:600 15px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;paint-order:stroke;stroke:color-mix(in srgb,var(--teal) 5%,var(--card));stroke-width:5px;stroke-linejoin:round}
.armed .pin-in{opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center}
.on .pin-in{opacity:1;transform:none;transition:opacity .6s var(--d,0s),transform .6s cubic-bezier(.3,1.6,.5,1) var(--d,0s)}
.on .pin-ring{animation:pinring 2.8s ease-out var(--d,0s) infinite}
@keyframes pinring{0%{opacity:.9;transform:scale(.6)}70%,100%{opacity:0;transform:scale(3.4)}}
@media(max-width:700px){.pin-lab{font-size:25px;stroke-width:7px}.where{padding-top:40px}}

/* pricing: lift + light sweep + glow */
.plan{position:relative;overflow:hidden;transition:transform .4s var(--ease),border-color .3s,box-shadow .4s}
.plan::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);transform:translateX(0) skewX(-14deg);opacity:0;pointer-events:none}
@media (hover:hover){.plan:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--teal) 60%,var(--line));box-shadow:0 18px 44px -22px var(--glow)}
.plan:hover::before{opacity:1;animation:sweep .9s var(--ease) 1}}
.plan:focus-within{border-color:var(--teal)}
@keyframes sweep{from{transform:translateX(0) skewX(-14deg)}to{transform:translateX(420%) skewX(-14deg)}}
.plan.pop{animation:popglow 3.6s ease-in-out infinite}
@keyframes popglow{0%,100%{box-shadow:0 0 0 1px var(--amber),0 0 18px -6px color-mix(in srgb,var(--amber) 40%,transparent)}50%{box-shadow:0 0 0 1px var(--amber),0 0 34px -4px color-mix(in srgb,var(--amber) 62%,transparent)}}
@media (hover:hover){.plan.pop:hover{animation:none;box-shadow:0 0 0 1px var(--amber),0 18px 48px -18px color-mix(in srgb,var(--amber) 70%,transparent)}}
.step,.dont li,.contact .box{transition:transform .35s var(--ease),border-color .3s}
@media (hover:hover){.step:hover,.dont li:hover,.contact .box:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--teal) 45%,var(--line))}}

/* cross-page transition: a wipe of light (no-op where unsupported) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:hy-out .5s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:hy-wipe .65s cubic-bezier(.65,0,.2,1) both}
@keyframes hy-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hy-out{to{opacity:.4;filter:brightness(.7) saturate(1.3)}}

@media (prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 .rv{opacity:1!important;transform:none!important;transition:none!important}
 .js section h2::after{transform:none;transition:none}
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
 .plan.pop{animation:none;box-shadow:0 0 0 1px var(--amber),0 0 24px -6px color-mix(in srgb,var(--amber) 50%,transparent)}
 .net .flow,.pin-ring,.spine .ring{display:none}
 .job::after{display:none}
}

/* hero stats: big amber numbers, small muted caption (counter spans must not inherit the caption style) */
.stat b{font-size:clamp(36px,5vw,56px);font-weight:800;line-height:1.05;margin-bottom:4px}
.stat b span{font-size:inherit;color:inherit}
.stat b .sr{position:absolute}
.stat>span{font-size:15px;color:var(--mute)}
/* quiet zone behind the headline block so text stays sacred */
.hero .wrap::before{content:"";position:absolute;inset:-20px 0 auto 0;height:62%;z-index:-1;pointer-events:none;background:radial-gradient(60% 70% at 32% 42%,color-mix(in srgb,var(--bg) 78%,transparent),transparent 78%)}

/* phones: no scroll thread (it crowded text); stack the start box */
@media(max-width:700px){.spine{display:none!important}}
.contact .box.go{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.contact .box.go strong{flex:1 1 auto}
@media(max-width:520px){.contact .box.go{display:block}.contact .box.go strong{display:block;margin-bottom:6px}.contact .box.go .btn{display:block;width:100%;text-align:center;margin-top:8px!important}}