@font-face{font-family:Skranji;src:url('assets/fonts/Skranji-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

:root{--ink:#050505;--lime:#dfff00;--pink:#ff2c9c;--teal:#00b9a7;--blue:#506bff;--white:#fff}
body{background:#050505;font-family:Arial,Helvetica,sans-serif}
h1,h2,h3,.global-end,.contact-title,.services li{font-family:Barlow,Impact,sans-serif;letter-spacing:-.025em;text-transform:uppercase}
h2 em,h1 em{font-family:Skranji,Barlow,Impact,sans-serif;letter-spacing:-.045em}

header{background:#050505e8;border-bottom:1px solid #fff3;height:88px}
header:after{display:none}
nav a:last-child{width:78px;height:78px;border-radius:50%;background:var(--lime);color:var(--ink);padding:10px;transform:none;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.08;font-size:11px;font-weight:700;white-space:normal;flex:0 0 78px}
nav a:last-child span{font-size:17px;margin-left:2px}

.hero{min-height:calc(100svh - 88px);grid-template-columns:58% 42%;padding-top:28px;background:#050505}
.hero:before{content:"";position:absolute;width:min(64vw,980px);aspect-ratio:1;border-radius:50%;right:-17vw;top:-9vw;background:var(--blue);z-index:-1}
.hero:after{content:"";position:absolute;width:22vw;aspect-ratio:1;border-radius:50%;left:-13vw;bottom:5vw;background:var(--pink);z-index:-1}
h1{font-size:clamp(78px,8.5vw,148px);line-height:.86;letter-spacing:-.045em}
.hero-lead{font-size:.55em;line-height:1.02}
h1 em{font-size:1.05em;line-height:1;transform:rotate(-5deg);color:var(--lime);text-shadow:6px 6px 0 #000;margin:.04em 0 .13em}
.hero-tail{font-size:.61em;line-height:.96;max-width:12ch;letter-spacing:-.025em}
.hero-art{width:145%;height:clamp(720px,68vw,1060px);margin:-70px -25% -80px -18%;transform:rotate(7deg);z-index:2}
.hero-copy{z-index:4}
.hero-sticker{position:absolute;z-index:3;pointer-events:none;filter:drop-shadow(7px 8px 0 #000)}
.hero-sticker--creative{width:clamp(150px,15vw,260px);right:-1%;top:1%;transform:rotate(9deg);z-index:1}
.hero-sticker--ball{width:clamp(90px,9vw,150px);left:48%;bottom:18%;transform:rotate(-18deg)}
.hero-bottom{background:var(--lime);font-family:Skranji,Barlow,sans-serif;font-size:clamp(16px,1.45vw,24px);text-transform:none;padding-top:17px;padding-bottom:17px;transform:rotate(-1deg);margin-bottom:-2px}
.text-link{font-family:Skranji,Barlow,sans-serif;font-size:19px;border-color:var(--pink)}

.marquee{position:relative;z-index:6;overflow:hidden;border-block:4px solid #050505;transform:rotate(-1.4deg);margin:-5px 0;background:var(--pink);color:#050505}
.marquee>div{width:max-content;display:flex;align-items:center;gap:0;animation:vi-marquee 28s linear infinite}
.marquee span{font:700 clamp(36px,5vw,78px)/1 Skranji,Barlow,sans-serif;white-space:nowrap;padding:.28em .55em .32em}
.marquee span:after{content:"•";padding-left:1.1em}
.marquee--lime{background:var(--lime);transform:rotate(1deg)}
@keyframes vi-marquee{to{transform:translateX(-50%)}}

.section{padding-top:120px;padding-bottom:120px}
.section-no{font-family:Skranji,Barlow,sans-serif;font-size:34px;opacity:1;border:3px solid currentColor;border-radius:50%;width:62px;height:62px;display:grid;place-items:center}
.intro{background:#050505;isolation:isolate}
.intro:before{content:"";position:absolute;width:61vw;aspect-ratio:1;border-radius:50%;right:-26vw;top:-15vw;background:var(--teal);z-index:-1}
.intro h2{font-size:clamp(65px,7vw,120px);line-height:.82}
.intro h2 em{font-size:clamp(190px,26vw,430px);color:var(--pink);text-shadow:9px 10px 0 var(--lime);line-height:.82}
.intro-details article{border-top:4px solid var(--white)}
.intro-details h3{font-size:clamp(38px,4vw,66px);line-height:.92}
.drone{height:clamp(480px,46vw,740px)}

.relationship{background:var(--blue);isolation:isolate;min-height:920px}
.relationship:before{content:"";position:absolute;width:66vw;aspect-ratio:1;border-radius:50%;left:-31vw;bottom:-26vw;background:var(--pink);z-index:-1}
.relationship-copy{background:var(--lime);padding:clamp(40px,5vw,85px);border-radius:50%;aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;transform:rotate(3deg);margin-left:-4%;box-shadow:14px 14px 0 #050505}
.relationship h2{font-size:clamp(50px,5.4vw,92px);line-height:.83;margin-bottom:28px}
.relationship h2 em{font-size:.78em;line-height:1;color:var(--pink);margin:12px 0 0}
.relationship p{font-size:19px;margin:0 auto;max-width:470px}
.relationship-art{height:clamp(720px,76vw,1100px);width:130%;margin-left:-24%;z-index:2}
.site-sticker{position:absolute;z-index:5;pointer-events:none;filter:drop-shadow(6px 7px 0 #050505)}
.site-sticker--attitude{width:clamp(260px,33vw,520px);left:2%;top:5%;transform:rotate(-8deg)}

.global{background:#050505;min-height:900px;isolation:isolate}
.global:before{content:"";position:absolute;width:min(72vw,1150px);aspect-ratio:1;border-radius:50%;right:-19vw;top:-9vw;background:var(--blue);z-index:0}
.global>div{position:relative;z-index:3}
.global h2{font-size:clamp(68px,8vw,136px);line-height:.82}
.global h2 em{color:var(--lime);text-shadow:6px 7px 0 var(--pink);transform:rotate(-4deg)}
.global .global-end{font-size:clamp(34px,4vw,65px);line-height:.9;text-transform:none}
.global>img{position:relative;z-index:2;width:205%;max-width:none;margin-left:-42%;filter:saturate(1.35) contrast(1.12);mix-blend-mode:normal}

.clients{background:var(--pink);isolation:isolate}
.clients:before{content:"";position:absolute;width:57vw;aspect-ratio:1;border-radius:50%;right:-18vw;bottom:-18vw;background:var(--lime);z-index:-1}
.clients .section-top h2,.services .section-top h2{font-family:Skranji,Barlow,sans-serif;font-size:clamp(95px,15vw,230px);letter-spacing:-.08em;transform:rotate(-3deg);text-shadow:7px 8px 0 #fff}
.clients-grid .lottie{height:clamp(580px,58vw,900px);width:145%;margin-left:-27%}
.clients-grid>img{border:6px solid #050505;box-shadow:18px 20px 0 #050505;transform:rotate(3deg);mix-blend-mode:normal;background:#fff;padding:clamp(12px,2vw,30px)}
.site-sticker--ethics{width:clamp(250px,26vw,430px);right:3%;top:5%;transform:rotate(10deg)}

.services{background:var(--teal);isolation:isolate}
.services:before{content:"";position:absolute;width:46vw;aspect-ratio:1;border-radius:50%;left:-17vw;bottom:-19vw;background:var(--lime);z-index:-1}
.services .section-top h2{text-shadow:7px 8px 0 var(--pink)}
.services-grid{grid-template-columns:minmax(0,52%) minmax(0,48%);column-gap:2%}
.services-grid .lottie{height:clamp(560px,55vw,850px);width:112%;margin-left:-12%;transform:rotate(-5deg);overflow:hidden;min-width:0}
.services ul{min-width:0;padding-left:2%;background:var(--teal);z-index:3}
.services li{font-size:clamp(31px,4vw,64px);line-height:.9;border-top:4px solid #050505;padding:22px 0}
.services li:nth-child(even){color:#fff;text-shadow:3px 3px 0 #050505}

.work{background:#050505}
.work:before{content:"";position:absolute;width:34vw;aspect-ratio:1;border-radius:50%;right:-14vw;top:2vw;background:var(--pink)}
.work h2{font-size:clamp(57px,7.8vw,132px);line-height:.82;position:relative}
.work h2 em{color:var(--pink);text-shadow:5px 6px 0 var(--blue)}
.video-shell{position:relative;border:6px solid #fff;box-shadow:18px 20px 0 var(--pink);transform:rotate(-1deg);overflow:hidden}
.video-play{position:absolute;z-index:3;left:50%;top:50%;width:clamp(90px,12vw,170px);aspect-ratio:1;border:0;border-radius:50%;background:var(--lime);transform:translate(-50%,-50%);box-shadow:8px 9px 0 var(--pink);cursor:pointer;transition:opacity .2s,transform .2s}
.video-play span{display:block;width:0;height:0;border-top:22px solid transparent;border-bottom:22px solid transparent;border-left:34px solid #050505;margin:auto;transform:translateX(10%)}
.video-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.video-shell.is-playing .video-play{opacity:0;visibility:hidden;pointer-events:none}
.ai-title+.video-shell{transform:rotate(1.3deg);box-shadow:18px 20px 0 var(--lime)}
.event-title{margin-top:140px}
.event-title em{color:var(--teal)!important;text-shadow:5px 6px 0 var(--blue)!important}
.event-title+.video-shell{transform:rotate(-.8deg);box-shadow:18px 20px 0 var(--blue)}

.team{background:var(--pink);isolation:isolate}
.team:before{content:"";position:absolute;width:50vw;aspect-ratio:1;border-radius:50%;left:-21vw;top:-18vw;background:var(--lime);z-index:-1}
.team-heading h2{font-size:clamp(86px,10vw,170px);line-height:.78}
.team-heading em{font-family:Skranji,Barlow,sans-serif;color:#fff;text-shadow:6px 7px 0 #050505}
.portraits{gap:0;transform:rotate(-1deg)}
.portraits img{border:5px solid #050505}

.contact{background:var(--blue);isolation:isolate;min-height:940px}
.contact:before{content:"";position:absolute;width:61vw;aspect-ratio:1;border-radius:50%;left:-25vw;bottom:-26vw;background:var(--lime);z-index:-1}
.contact h2{font-size:clamp(74px,9vw,150px);line-height:.78}
.contact h2 em{color:var(--lime);text-shadow:6px 7px 0 var(--pink)}
.contact-sticker{position:absolute;z-index:5;width:clamp(210px,30vw,500px);left:0;top:2%;transform:rotate(-10deg);filter:drop-shadow(9px 10px 0 #050505);pointer-events:none}
.contact-art{width:160%;margin-left:-38%}
.contact-title{font-size:clamp(35px,4vw,64px);line-height:.9}
.email{font-family:Skranji,Barlow,sans-serif;border-bottom:5px solid var(--lime)}
footer{background:#050505;min-height:460px}

@media(max-width:1000px){
  .hero-art{width:155%;margin-left:-25%}.hero-sticker--creative{right:-3%}
  .relationship{min-height:760px}.relationship-copy{padding:45px}.relationship-art{height:760px}
  .clients-grid .lottie{height:620px}.services-grid .lottie{height:650px}
}

@media(max-width:720px){
  .hero{padding-top:38px}.hero:before{width:112vw;right:-62vw;top:25vw}.hero:after{width:55vw;left:-32vw;bottom:28vw}
  h1{font-size:17vw;line-height:.88}.hero-lead{font-size:.52em}.hero-tail{font-size:.6em;line-height:.98}
  .hero-art{width:127%;height:145vw;margin:-18vw -13% -20vw;transform:rotate(5deg)}
  .hero-sticker--creative{width:30vw;right:-8%;top:58%;z-index:1}.hero-sticker--ball{width:22vw;left:4%;bottom:23%}
  .marquee span{font-size:11vw}.marquee>div{animation-duration:18s}
  .section{padding-top:82px;padding-bottom:82px}.section-no{width:48px;height:48px;font-size:25px}
  .intro:before{width:105vw;right:-63vw;top:21vw}.intro h2{font-size:14vw}.intro h2 em{font-size:55vw;text-shadow:5px 6px 0 var(--lime)}
  .relationship{min-height:0;padding-bottom:55px}.relationship-copy{aspect-ratio:auto;border-radius:54% 46% 48% 52%/45% 55% 45% 55%;padding:16vw 9vw;box-shadow:8px 9px 0 #050505;transform:rotate(2deg)}
  .relationship h2{font-size:13vw}.relationship h2 em{font-size:.72em}.relationship-art{height:130vw;width:118%;margin:-7vw -9% -12vw}
  .site-sticker--attitude{width:58vw;top:2%;left:1%}
  .global:before{width:132vw;right:-70vw;top:48vw}.global h2{font-size:14vw}.global>img{width:180%;margin-left:-40%;z-index:2}
  .clients .section-top h2,.services .section-top h2{font-size:22vw;text-shadow:4px 5px 0 #fff}.site-sticker--ethics{width:47vw;right:-5%;top:2%}
  .clients-grid .lottie{height:118vw;width:135%;margin-left:-18%}.clients-grid>img{border-width:4px;box-shadow:9px 10px 0 #050505}
  .services-grid{grid-template-columns:1fr;column-gap:0}.services-grid .lottie{height:105vw;width:112%;margin-left:-6%;overflow:hidden}.services ul{padding-left:0}.services li{font-size:8vw;padding:18px 0}
  .work h2{font-size:12vw}.video-shell{border-width:4px;box-shadow:8px 9px 0 var(--pink)}.ai-title+.video-shell{box-shadow:8px 9px 0 var(--lime)}.event-title+.video-shell{box-shadow:8px 9px 0 var(--blue)}
  .video-play{width:24vw;box-shadow:5px 6px 0 var(--pink)}.video-play span{border-top-width:13px;border-bottom-width:13px;border-left-width:21px}
  .event-title{margin-top:85px}.team-heading h2{font-size:19vw}.portraits img{border-width:3px}
  .contact{min-height:0;padding-top:56vw}.contact-sticker{width:69vw;top:2%;left:-7%}.contact-art{width:128%;margin:-25vw -14% -19vw}.contact h2{font-size:18vw}.contact-title{font-size:10vw}
}

@media(prefers-reduced-motion:reduce){.marquee>div{animation:none}}