@font-face{font-family:'HND';font-style:normal;font-weight:100;font-display:swap;src:url(../fonts/hnd-100.woff2) format('woff2')}
@font-face{font-family:'HND';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/hnd-300.woff2) format('woff2')}
@font-face{font-family:'HND';font-style:italic;font-weight:300;font-display:swap;src:url(../fonts/hnd-300-italic.woff2) format('woff2')}
@font-face{font-family:'HND';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/hnd-400.woff2) format('woff2')}
@font-face{font-family:'HND';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/hnd-500.woff2) format('woff2')}
@font-face{font-family:'HND';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/hnd-700.woff2) format('woff2')}
@font-face{font-family:'HND';font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/hnd-900.woff2) format('woff2')}
body{margin:0;background:#0b0b0b}
a{color:#fbf5d4}a:hover{color:#ffdd15}
.k-grain{background-image:url(../img/grao.png);background-size:256px 256px;animation:kGrain .9s steps(4) infinite}
@keyframes kGrain{0%{background-position:0 0}25%{background-position:-60px 40px}50%{background-position:80px -30px}75%{background-position:-30px -70px}100%{background-position:0 0}}
.k-bob{animation:kBob 3.4s ease-in-out infinite}
@keyframes kBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(3deg)}}
.k-marq{animation:kMarq 90s linear infinite}
.k-band{animation:kMarq 38s linear infinite}
@keyframes kMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.k-fade-x{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.k-case .k-img{transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.k-case:hover .k-img{transform:scale(1.05)}
.k-case .k-tag{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.k-case:hover .k-tag{transform:rotate(180deg)}
.k-case .k-go{transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s,color .35s}
.k-case:hover .k-go{transform:translateX(6px);background:#ffdd15;color:#0b0b0b}
.k-cell{transition:background .2s}
.k-cell:hover{background:rgba(251,245,212,0.06)}
.k-mark{width:80%;height:80%;display:block;overflow:visible}.k-mark path{fill:none;stroke:currentColor;stroke-width:11;stroke-linecap:round;stroke-linejoin:round}.k-x path{stroke-dasharray:96 400;stroke-dashoffset:108;animation:kDraw .2s cubic-bezier(.5,.05,.35,1) forwards}.k-x path+path{animation-delay:.26s}.k-o1{stroke-dasharray:250 600;stroke-dashoffset:262}.k-o2{stroke-dasharray:240 600;stroke-dashoffset:252}.k-o3{stroke-dasharray:260 600;stroke-dashoffset:272}.k-o path{animation:kDraw .5s cubic-bezier(.45,.05,.3,1) forwards}.k-r1{transform:rotate(-4deg)}.k-r2{transform:rotate(3deg)}.k-r3{transform:rotate(-1.5deg)}@keyframes kDraw{to{stroke-dashoffset:0}}
@keyframes kPop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.k-link{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:4px;transition:background-size .35s}
.k-link:hover{background-size:0% 1px}
.k-btn{transition:transform .25s,background .25s,color .25s}
.k-btn:hover{transform:translateY(-3px) rotate(-1.5deg)}
.k-hero-media{position:relative;width:100%;aspect-ratio:1456/816;overflow:hidden}
.k-hero-img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 80%,transparent 100%)}
.k-hero-txt{position:absolute;left:clamp(16px,5vw,80px);top:50%;transform:translateY(-46%);width:min(46%,640px)}
.c-stack{position:sticky;top:32px}
.c-glyph{font-size:420px}
.k-band-txt{font-size:clamp(56px,8vw,120px)}
@media (max-width:860px){.k-hero-media{aspect-ratio:4/5}.k-hero-txt{position:static;transform:none;width:auto;padding:28px 16px 8px}.c-stack{position:relative;top:0}.c-glyph{font-size:220px;opacity:.6}.k-deco{display:none}}
@supports (animation-timeline: view()){
.p-hero-img{animation:pHeroImg linear both;animation-timeline:scroll(root);animation-range:0 900px}
@keyframes pHeroImg{to{transform:translateY(280px) scale(1.08)}}
.p-hero-txt{animation:pHeroTxt linear both;animation-timeline:scroll(root);animation-range:0 640px}
@keyframes pHeroTxt{to{translate:0 -140px;opacity:0}}
.p-curtain{animation:pCurtain linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
@keyframes pCurtain{from{clip-path:inset(12% 6% 0 6% round 48px);opacity:.4}to{clip-path:inset(0 0 0 0 round 0);opacity:1}}
.p-reveal{animation:pReveal linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
@keyframes pReveal{from{opacity:0;transform:translateY(80px)}to{opacity:1;transform:none}}
.p-card-1{animation:pCard1 linear both;animation-timeline:view()}
@keyframes pCard1{from{transform:translateY(120px)}to{transform:translateY(-40px)}}
.p-card-2{animation:pCard2 linear both;animation-timeline:view()}
@keyframes pCard2{from{transform:translateY(200px)}to{transform:translateY(-100px)}}
.p-card-3{animation:pCard3 linear both;animation-timeline:view()}
@keyframes pCard3{from{transform:translateY(160px)}to{transform:translateY(-70px)}}
.p-inner{animation:pInner linear both;animation-timeline:view()}
@keyframes pInner{from{transform:translateY(-7%) scale(1.15)}to{transform:translateY(7%) scale(1.15)}}
.p-band{animation:pBand linear both;animation-timeline:view()}
@keyframes pBand{from{transform:rotate(-7deg) translateX(-6%)}to{transform:rotate(-1deg) translateX(4%)}}
.p-band-2{animation:pBand2 linear both;animation-timeline:view()}
@keyframes pBand2{from{transform:rotate(5deg) translateX(5%)}to{transform:rotate(1deg) translateX(-5%)}}
.p-zoom{animation:pZoom linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
@keyframes pZoom{from{transform:scale(.55) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
.p-title{animation:pTitle linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
@keyframes pTitle{from{transform:translateX(-14%);opacity:0}to{transform:none;opacity:1}}
.p-title-r{animation:pTitleR linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
@keyframes pTitleR{from{transform:translateX(14%);opacity:0}to{transform:none;opacity:1}}
.p-board{animation:pBoard linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
@keyframes pBoard{from{transform:rotate(-10deg) scale(.82);opacity:0}to{transform:none;opacity:1}}
.p-panel{animation:pPanel linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
@keyframes pPanel{from{transform:scale(.9) translateY(60px);border-radius:80px}to{transform:none}}
.p-glyph{animation:pGlyph linear both;animation-timeline:view()}
@keyframes pGlyph{from{transform:translateY(120px) rotate(-25deg)}to{transform:translateY(-120px) rotate(25deg)}}
.p-float{animation:pFloat linear both;animation-timeline:view()}
@keyframes pFloat{from{transform:translateY(260px) rotate(-40deg)}to{transform:translateY(-260px) rotate(70deg)}}
.p-float2{animation:pFloat2 linear both;animation-timeline:view()}
@keyframes pFloat2{from{transform:translateY(-140px) rotate(30deg)}to{transform:translateY(180px) rotate(-60deg)}}
}
@media (max-width:700px){.k-nav{flex-wrap:nowrap !important;padding:10px 16px !important}.k-logo{height:92px !important}.k-navlink{display:none !important}.k-menu{flex-wrap:nowrap !important;gap:10px !important}.k-menu .k-btn{padding:12px 18px !important;font-size:12px}.k-hero-media{aspect-ratio:1/1}}
@media (max-width:700px){.k-t{flex-basis:100%}.k-t,.k-t>span{font-size:min(calc((100vw - 40px) / 7.6),64px) !important}.k-t-mid,.k-t-mid>span{font-size:min(calc((100vw - 40px) / 8.6),58px) !important}.k-t-long,.k-t-long>span{font-size:min(calc((100vw - 40px) / 11.6),44px) !important}.k-t-work{margin-bottom:28px !important}.k-works{gap:36px !important}.k-works .k-case{gap:14px !important;animation:none !important;transform:none !important}.k-marq{animation-duration:30s !important}.k-band{animation-duration:15s !important}.p-band-2 .k-band{animation-duration:38s !important}.k-flogo{height:120px !important}.k-foot{gap:20px !important}.k-foot-r{font-size:13px !important}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}
.v-ig{transition:background .25s,color .25s,border-color .25s}.v-ig:hover{background:#fbf5d4;color:#0b0b0b !important;border-color:#fbf5d4 !important}.v-close{transition:background .2s,color .2s}.v-close:hover{background:#fbf5d4;color:#0b0b0b}@media (max-width:860px){.v-ovl{position:fixed !important;inset:0 !important;border-radius:0 !important;z-index:100 !important}}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
.v-ovl[hidden],.k-cta[hidden]{display:none !important}
.k-form-msg{margin:0;min-height:1.4em;font-size:15px;font-weight:600}
.k-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
input:focus-visible,textarea:focus-visible{outline:2px solid #0b0b0b;outline-offset:4px}
a:focus-visible,button:focus-visible{outline:2px solid #ffdd15;outline-offset:4px}