*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#F5F4F0}
img,svg{max-width:100%}
[hidden]{display:none!important}
a{color:#121212}a:hover{color:#2B44FF}
.ln{display:block;overflow:hidden;padding-bottom:0.16em;margin-bottom:-0.08em}
.ln>span{display:block;animation:up 1.1s cubic-bezier(.19,1,.22,1) both}
.d1>span{animation-delay:.15s}.d2>span{animation-delay:.3s}.d3>span{animation-delay:.45s}
@keyframes up{from{transform:translateY(110%)}to{transform:none}}
.fade{animation:fade 1.2s ease .9s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.spin{animation:spin 20s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scrollbar{animation:drop 2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes drop{0%{transform:translateY(-100%)}100%{transform:translateY(200%)}}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid currentColor;border-radius:999px;text-decoration:none;transition:background .35s,color .35s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.navpill:hover{background:#121212;color:#F5F4F0;transform:rotate(-4deg)}
.wobble{animation:wobble 3.2s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(-6deg) translateY(-8px)}}
.wobble2{animation:wobble2 3.8s ease-in-out infinite}
@keyframes wobble2{0%,100%{transform:rotate(8deg)}50%{transform:rotate(14deg)}}
.hop{animation:hop 1.8s ease-in-out infinite}
.h2{animation-delay:.12s}.h3{animation-delay:.24s}.h4{animation-delay:.36s}.h5{animation-delay:.48s}
@keyframes hop{0%,55%,100%{transform:none}25%{transform:translateY(-10px) scale(1.15)}}
.tone{background-image:radial-gradient(#121212 1.3px,transparent 1.6px);background-size:9px 9px}
.card{position:relative;isolation:isolate;overflow:hidden;text-decoration:none;color:#121212;transition:transform .6s cubic-bezier(.34,1.56,.64,1),color .5s}
.card::before{content:"";position:absolute;inset:0;background:#121212;clip-path:ellipse(70% 0% at 50% 100%);transition:clip-path .8s cubic-bezier(.19,1,.22,1);z-index:-1}
.card:hover{color:#F5F4F0;transform:translateY(-10px) rotate(-1.5deg)}
.card:hover::before{clip-path:ellipse(140% 160% at 50% 100%)}
.card .desc{color:#5E5E5A;transition:color .5s}
.card:hover .desc{color:#C9C8C2}
.card .go{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.card:hover .go{transform:translateX(6px) rotate(-6deg)}
.st2{margin-top:72px}.st3{margin-top:144px}
@media (max-width: 1100px){.st2,.st3{margin-top:0}}
.cta{position:relative;overflow:hidden;isolation:isolate;text-decoration:none}
.cta::before{content:"";position:absolute;inset:0;border-radius:999px;background:#2B44FF;transform:translateY(101%);transition:transform .55s cubic-bezier(.19,1,.22,1);z-index:-1}
.cta:hover{color:#F5F4F0}
.cta:hover::before{transform:translateY(0)}
.fi{background:transparent;border:0;border-bottom:1.5px solid #6B6E80;color:#121212;font:inherit;font-size:17px;padding:12px 0;border-radius:0;transition:border-color .3s}
.fi:focus{outline:none;border-bottom-color:#121212}
.chip{position:relative;cursor:pointer;font-size:14px}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;padding:10px 20px;border:1.5px solid #6B6E80;border-radius:999px;color:#121212;transition:background .3s,color .3s,border-color .3s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.chip:hover span{border-color:#121212;transform:rotate(-3deg)}
.chip input:checked+span{background:#121212;color:#F5F4F0;border-color:#121212}
.chip input:focus-visible+span{outline:2px solid #121212;outline-offset:3px}
.draw{stroke-dasharray:1;stroke-dashoffset:0;animation:draw 2.8s cubic-bezier(.65,0,.35,1) both}
.dr2{animation-delay:.2s}.dr3{animation-delay:.4s}.dr4{animation-delay:.6s}.dr5{animation-delay:.8s}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.sway{animation:sway 9s ease-in-out infinite alternate}
.sway2{animation:sway 13s ease-in-out infinite alternate-reverse}
@keyframes sway{from{transform:translateY(-22px)}to{transform:translateY(22px)}}
.blob,.blob2{border-radius:62% 38% 46% 54%/55% 44% 56% 45%}
.blob{animation:morph 12s ease-in-out infinite,spin 48s linear infinite}
.blob2{animation:morph 16s ease-in-out infinite reverse,spin 60s linear infinite reverse}
@keyframes morph{0%,100%{border-radius:62% 38% 46% 54%/55% 44% 56% 45%}33%{border-radius:40% 60% 62% 38%/38% 58% 42% 62%}66%{border-radius:55% 45% 35% 65%/62% 36% 64% 38%}}
.float{animation:float 7s ease-in-out infinite alternate}
@keyframes float{from{transform:translate(0,0)}to{transform:translate(-18px,26px)}}
@supports (animation-timeline: view()){
.rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
@keyframes rv{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
.wdraw{animation:wd linear both;animation-timeline:view();animation-range:entry 5% cover 45%}
.clipin{animation:clipin linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
@keyframes clipin{from{clip-path:inset(10% 8% round 40px)}to{clip-path:inset(0 0 round 0)}}
.zoomin{animation:zoomin linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
@keyframes zoomin{from{transform:scale(1.18)}to{transform:scale(1)}}
@keyframes wd{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
@media (max-width: 640px){
.site-header{padding:20px 24px!important}
.site-nav{gap:6px!important}
.site-nav .pill{padding:9px 14px!important;font-size:11px}
#top{padding:40px 32px 48px!important;min-height:0!important;gap:40px!important}
.hero-vis{zoom:.72;margin:0 auto}
#service,#company{padding-left:24px!important;padding-right:24px!important}
#contact>div,#contact>footer{padding-left:24px!important;padding-right:24px!important}
}