/* ==========================================================================
   ProxyPacket effects layer
   Ambient motion and background patterns added after the homepage (hero glows, dotted/hex backgrounds, reveal-on-scroll, scroll bar). Loaded on every page except the homepage, which opts out to stay exactly as designed. Add this file to index.html to opt in.
   ========================================================================== */
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 "Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-text-size-adjust:100%;overflow-x:clip}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
nav a[aria-current=page]{color:var(--ink)}
.ticks{display:grid;gap:10px;margin-top:22px}
.ticks li{display:flex;gap:10px;font-weight:600}
.ticks li:before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;background:var(--b2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-4.8' fill='none' stroke='%2304251D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tg{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
@media(max-width:600px){
  .cta .btn{flex:1 1 100%}
}
:root{--fxn:rgba(124,240,203,.09);--hl:color-mix(in srgb,var(--sun) 72%,transparent)}
.rel{position:relative;isolation:isolate;overflow:hidden}
.rel>.w{position:relative;z-index:1}
.fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx-glow{position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(18,184,134,.26),transparent 68%);animation:fx-drift 16s ease-in-out infinite alternate}
.fx-glow.sun{width:340px;height:340px;background:radial-gradient(circle,rgba(255,197,61,.22),transparent 68%);animation-delay:-7s}
.fx-grid{position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 79px,var(--fxn) 79px),linear-gradient(0deg,transparent 79px,var(--fxn) 79px);background-size:80px 80px;animation:fx-grid 14s linear infinite;-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 50%,#000 10%,transparent 72%)}
.fx-dots{position:absolute;inset:0;background-image:radial-gradient(var(--dot) 1.3px,transparent 1.7px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 85% 90% at 50% 50%,#000,transparent 85%);mask-image:radial-gradient(ellipse 85% 90% at 50% 50%,#000,transparent 85%)}
.fx-rings{position:absolute;left:50%;top:50%;width:0;height:0}
.fx-rings i{position:absolute;left:-150px;top:-150px;width:300px;height:300px;border-radius:50%;border:1.5px solid rgba(18,184,134,.55);opacity:0;animation:fx-ring 7s ease-out infinite}
.fx-rings i:nth-child(2){animation-delay:2.3s}
.fx-rings i:nth-child(3){animation-delay:4.6s}
@keyframes fx-drift{to{transform:translate(-44px,32px) scale(1.12)}}
@keyframes fx-grid{to{background-position:80px 80px,80px 80px}}
@keyframes fx-ring{0%{transform:scale(.3);opacity:.7}100%{transform:scale(3.4);opacity:0}}
@keyframes fx-hl{to{background-size:100% .3em}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hl{background:linear-gradient(var(--hl),var(--hl)) 0 92%/0 .3em no-repeat;animation:fx-hl .9s .7s cubic-bezier(.2,.7,.2,1) forwards}
.prog{position:absolute;left:0;bottom:-1px;width:100%;height:3px;background:linear-gradient(90deg,var(--b2),var(--sun));transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
header{transition:box-shadow .25s}
header.sc{box-shadow:0 10px 26px -20px rgba(8,23,31,.55)}
.hero{position:relative;overflow:hidden}
.hero>.w{position:relative;z-index:1}
.soft{background-color:var(--soft);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='56' viewBox='0 0 48 56'%3E%3Cpath d='M24 2l22 13v26L24 54 2 41V15z' fill='none' stroke='%230A7D68' stroke-opacity='.07'/%3E%3Cpath d='M2 15l22 13 22-13M24 28v26' fill='none' stroke='%230A7D68' stroke-opacity='.07'/%3E%3C/svg%3E")}
.night{background-color:var(--night);background-image:radial-gradient(circle,#16303C 1px,transparent 1.4px);background-size:22px 22px}
.lift{transition:transform .25s,box-shadow .25s,border-color .25s}
.lift:hover,.js .lift.rv.in:hover{transform:translateY(-4px);box-shadow:0 18px 30px -22px var(--ink);border-color:var(--b2)}
.hero .crumb,.hero h1,.hero .lead,.hero .cta,.hero .ind,.hero .net{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero h1{animation-delay:.05s}
.hero .lead{animation-delay:.15s}
.hero .cta{animation-delay:.25s}
.hero .ind{animation-delay:.35s}
.hero .net{animation-delay:.45s}
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}