@font-face{font-family:'Aeonik';src:url('../fonts/AeonikPro-Light.woff2') format('woff2'),url('../fonts/AeonikPro-Light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Aeonik';src:url('../fonts/AeonikPro-Regular.woff2') format('woff2'),url('../fonts/AeonikPro-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Aeonik';src:url('../fonts/AeonikPro-Medium.woff2') format('woff2'),url('../fonts/AeonikPro-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Aeonik';src:url('../fonts/AeonikPro-Bold.woff2') format('woff2'),url('../fonts/AeonikPro-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Aeonik';src:url('../fonts/AeonikPro-Black.woff2') format('woff2'),url('../fonts/AeonikPro-Black.woff') format('woff');font-weight:900;font-style:normal;font-display:swap}

:root{
  --yellow:#E3E935;
  --black:#000000;
  --white:#FFFFFF;
  --ink:#0d0d0d;
  --paper:#f4f4ef;
  --maxw:1680px;
  --gut:clamp(20px,5vw,80px);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.62,.05,.01,.99);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:'Aeonik',system-ui,sans-serif;
  font-weight:400;
  background:var(--black);
  color:var(--white);
  line-height:1.3;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:900;line-height:.92;letter-spacing:-.02em;text-transform:uppercase}
::selection{background:var(--yellow);color:var(--black)}

@media (hover:hover) and (pointer:fine){
  body{cursor:none}
  a,button{cursor:none}
}

.cursor{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  width:10px;height:10px;border-radius:50%;background:var(--yellow);
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease),height .35s var(--ease),background .35s var(--ease);
  display:grid;place-items:center;mix-blend-mode:difference;
}
.cursor__label{
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--black);opacity:0;transform:scale(.6);transition:opacity .3s,transform .3s;mix-blend-mode:normal;
}
.cursor.is-media{width:104px;height:104px;background:var(--yellow);mix-blend-mode:normal}
.cursor.is-media .cursor__label{opacity:1;transform:scale(1)}
.cursor.is-link{width:46px;height:46px;background:var(--white)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(12px,1.8vw,20px) var(--gut);
  color:var(--black);background:transparent;
  transition:background .45s var(--ease),color .45s var(--ease),transform .5s var(--ease);
}
.site-header.nav-dark{
  color:var(--white);
  background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.site-header[data-hidden]{transform:translateY(-110%)}
.site-header__logo{
  display:block;width:clamp(30px,3vw,40px);aspect-ratio:617/597;
  background-color:currentColor;
  -webkit-mask:url(../assets/chunk-logo-letters.svg) center/contain no-repeat;
  mask:url(../assets/chunk-logo-letters.svg) center/contain no-repeat;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.site-header__logo:hover{opacity:.65}

.site-header.at-hero .site-header__logo{opacity:0;transform:translateY(-8px);pointer-events:none}
.site-nav{display:flex;gap:clamp(18px,2vw,34px)}
.site-nav a{font-size:15px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;position:relative}
.site-nav a::after{content:'';position:absolute;left:0;bottom:-3px;width:100%;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.site-nav a:hover::after{transform:scaleX(1);transform-origin:left}

.menu-toggle{display:none;background:none;border:none;color:currentColor;font-family:inherit;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.mobile-nav{position:fixed;inset:0;z-index:99;background:var(--yellow);color:var(--black);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:clamp(96px,16vh,140px) var(--gut) calc(var(--gut) + 10px);transform:translateY(-100%);transition:transform .6s var(--ease);visibility:hidden}
.mobile-nav.is-open{transform:none;visibility:visible}
.mobile-nav a{font-size:clamp(40px,13vw,72px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02}
.mobile-nav__foot{margin-top:auto;padding-top:30px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:680px){
  .site-nav{display:none}
  .menu-toggle{display:block}
}

.intro{
  position:fixed;inset:0;z-index:2000;background:#000;overflow:hidden;
}
.intro.is-done{display:none}
.intro__reel{
  position:absolute;inset:0;
  background:#000 center/cover no-repeat;
  will-change:transform;transform:scale(1.1);
}
.intro__veil{position:absolute;inset:0;width:100%;height:100%;display:block}
.intro__flash{position:absolute;inset:0;background:var(--yellow);opacity:0;pointer-events:none}
.intro__grain{
  position:absolute;inset:-100px;pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainJump .42s steps(4) infinite;
}
@keyframes grainJump{
  0%{transform:translate(0,0)}25%{transform:translate(-52px,34px)}
  50%{transform:translate(38px,-60px)}75%{transform:translate(-30px,-24px)}100%{transform:translate(48px,52px)}
}
.intro::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.78) 100%);
}
.intro__skip{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:5;
  background:none;border:none;color:#fff;font-family:inherit;
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.22em;
  opacity:0;transition:opacity .6s var(--ease);padding:10px 16px;
}
.intro.show-skip .intro__skip{opacity:.55}
.intro__skip:hover{opacity:1}

.hero{
  min-height:100svh;background:var(--yellow);color:var(--black);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(96px,13vh,150px) var(--gut) clamp(40px,7vh,80px);
  position:relative;
}
.hero__inner{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2.6vw,36px)}
.hero__logo{
  flex:none;width:clamp(56px,8vw,132px);aspect-ratio:617/597;background-color:var(--black);
  -webkit-mask:url(../assets/chunk-logo-letters.svg) center/contain no-repeat;
  mask:url(../assets/chunk-logo-letters.svg) center/contain no-repeat;
  position:relative;
}

.hero__logo.is-3d{-webkit-mask:none;mask:none;background:transparent}
.hero__logo3d{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  touch-action:none;
}
.hero__text{width:100%}
.hero__headline{
  font-size:clamp(40px,9vw,168px);
  letter-spacing:-.035em;
}
.hero__headline .line{display:block;overflow:hidden}
.hero__headline .line>span{display:block;will-change:transform}
.hero__headline .line--glitch.is-live{overflow:visible}

.glitch{
  position:relative;display:inline-block;white-space:nowrap;
  transform-origin:left 70%;will-change:transform,filter;
}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;
  opacity:0;pointer-events:none;-webkit-text-stroke:0;color:inherit;
}
.glitch.fx-rgb::before{
  opacity:.85;color:#ff1744;mix-blend-mode:multiply;
  transform:translate(calc(var(--gx1,0)*1px),calc(var(--gy1,0)*1px));
  clip-path:inset(var(--gc1,0%) 0 var(--gc2,0%) 0);
}
.glitch.fx-rgb::after{
  opacity:.85;color:#2979ff;mix-blend-mode:multiply;
  transform:translate(calc(var(--gx2,0)*1px),calc(var(--gy2,0)*1px));
  clip-path:inset(var(--gc3,0%) 0 var(--gc4,0%) 0);
}

.glitch.gs-serif{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.015em}
.glitch.gs-serif-caps{font-family:'Times New Roman',Georgia,serif;font-weight:700;letter-spacing:.01em}
.glitch.gs-mono{font-family:'Courier New',Courier,monospace;font-weight:700;letter-spacing:-.07em}
.glitch.gs-light{font-weight:300;letter-spacing:0}
.glitch.gs-outline{color:transparent;-webkit-text-stroke:clamp(1.5px,.22vw,4px) var(--black)}
.glitch.gs-outline::before,.glitch.gs-outline::after{-webkit-text-stroke:clamp(1.5px,.22vw,4px) currentColor;color:transparent}
.glitch.gs-white{color:var(--white);text-shadow:0 0 0 rgba(0,0,0,0), .04em .04em 0 var(--black)}

.glitch.gs-red{color:#E62E2E}
.glitch.gs-blue{color:#1F3BFF;font-family:'Courier New',Courier,monospace;font-weight:700;letter-spacing:-.05em}
.glitch.gs-pink{color:#FF3EA5;font-family:Georgia,'Times New Roman',serif;font-style:italic;text-transform:none}
.glitch.gs-rainbow{
  background:linear-gradient(92deg,#FF3EA5 0%,#1F3BFF 34%,#00B865 62%,#E62E2E 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.glitch.gs-rainbow::before,.glitch.gs-rainbow::after{background:none;-webkit-background-clip:initial;background-clip:initial}
.hero__sub{
  max-width:46ch;margin-top:clamp(22px,3vw,40px);
  font-size:clamp(16px,1.5vw,23px);font-weight:500;line-height:1.32;letter-spacing:-.01em;text-transform:none;
}
.hero__scroll{
  position:absolute;bottom:clamp(20px,4vh,40px);right:var(--gut);
  display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
}
.hero__scroll i{width:46px;height:1.5px;background:var(--black);position:relative;overflow:hidden}
.hero__scroll i::after{content:'';position:absolute;inset:0;background:var(--yellow);animation:scrollLine 1.8s var(--ease-io) infinite}
@keyframes scrollLine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

@media(max-width:680px){
  .hero{padding:clamp(84px,12vh,120px) 16px clamp(30px,5vh,50px)}
  .hero__inner{gap:clamp(24px,5vh,44px)}
  .hero__logo{width:clamp(96px,26vw,132px)}
  .hero__headline{font-size:clamp(48px,15.5vw,76px);letter-spacing:-.04em;line-height:.94}
  .hero__sub{font-size:clamp(17px,4.8vw,21px);margin-top:clamp(18px,3vh,28px);max-width:none}
  .hero__scroll{left:16px;right:auto}
}

.work{padding:clamp(80px,12vh,170px) var(--gut) clamp(40px,8vh,90px)}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:clamp(40px,6vh,80px)}
.section-head__title{font-size:clamp(40px,8vw,128px);letter-spacing:-.03em}
.section-head__meta{font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding-top:.8em;color:var(--yellow)}

.work__grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,1.6vw,26px) clamp(14px,1.6vw,26px);
}
.tile{
  grid-column:span 6;position:relative;overflow:hidden;background:#000;
  aspect-ratio:16/9;border-radius:2px;border:0;padding:0;
  font:inherit;color:inherit;text-align:left;
}
.tile--wide{grid-column:span 12;aspect-ratio:21/9}
@media(max-width:760px){
  .tile,.tile--wide{grid-column:span 12;aspect-ratio:16/9}
}
.tile__media{position:absolute;inset:0;width:100%;height:100%}
.tile__poster,.tile__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile__video{opacity:0;transition:opacity .6s var(--ease)}
.tile.is-playing .tile__video{opacity:1}
.tile__poster{transition:transform 1.1s var(--ease),opacity .6s var(--ease)}
.tile.is-playing .tile__poster{opacity:0}
.tile:hover .tile__poster{transform:scale(1.04)}

.tile__meta{
  position:absolute;left:0;bottom:0;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;gap:3px;
  padding:clamp(16px,1.8vw,28px);text-align:left;
  opacity:0;transform:translateY(14px);
  transition:opacity .35s var(--ease),transform .5s var(--ease);
}
.tile:hover .tile__meta,.tile:focus-visible .tile__meta{opacity:1;transform:none}
.tile__title{
  font-size:clamp(17px,1.5vw,24px);font-weight:700;line-height:1.15;
  color:var(--white);text-transform:none;letter-spacing:0;
  text-shadow:0 1px 14px rgba(0,0,0,.4);
}
.tile__client{
  font-size:clamp(13px,1.05vw,17px);font-weight:400;line-height:1.2;
  color:rgba(255,255,255,.88);text-transform:none;
  text-shadow:0 1px 12px rgba(0,0,0,.4);
}

@media (hover:none),(pointer:coarse){
  .tile__meta{display:none}
}

.tile{opacity:0;transform:translateY(40px)}
.tile.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}

.tile--more{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  gap:6px;background:var(--yellow);color:var(--black);
  padding:clamp(18px,2vw,30px);
}
.tile--more::before{
  content:'';position:absolute;inset:0;background:var(--black);
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.tile--more:hover::before{transform:none}
.tile--more>*{position:relative;z-index:1;transition:color .45s var(--ease)}
.tile--more:hover>*{color:var(--yellow)}
.tile--more .tile-more__big{
  font-size:clamp(34px,4.6vw,76px);font-weight:900;text-transform:uppercase;
  letter-spacing:-.03em;line-height:.92;
}
.tile--more .tile-more__count{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}

.tile--cat{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  gap:6px;background:var(--yellow);color:var(--black);
  padding:clamp(18px,2vw,30px);
}
.tile--cat::before{
  content:'';position:absolute;inset:0;background:var(--black);
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.tile--cat:hover::before{transform:none}
.tile--cat>*{position:relative;z-index:1;transition:color .45s var(--ease)}
.tile--cat:hover>*{color:var(--yellow)}
.tile-cat__big{
  font-size:clamp(34px,4.6vw,76px);font-weight:900;text-transform:uppercase;
  letter-spacing:-.03em;line-height:.92;
}
.tile-cat__count{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.tile-cat__count--open{display:none}
.tile--cat.is-open{background:var(--black);color:var(--yellow);box-shadow:inset 0 0 0 2px var(--yellow)}
.tile--cat.is-open::before{background:var(--yellow)}
.tile--cat.is-open:hover>*{color:var(--black)}
.tile--cat.is-open .tile-cat__count--open{display:block}

.cat-divider{grid-column:1/-1;height:3px;background:var(--yellow);margin:clamp(4px,.8vw,12px) 0}

.marquee{background:var(--yellow);color:var(--black);overflow:hidden;padding:clamp(14px,2vw,26px) 0;border-top:2px solid #000;border-bottom:2px solid #000}
.marquee__track{display:inline-flex;gap:28px;white-space:nowrap;will-change:transform;font-size:clamp(28px,5vw,72px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em}
.marquee__track span{display:inline-block}

.about{padding:clamp(90px,16vh,200px) var(--gut);background:var(--black)}
.about__lead{font-size:clamp(26px,4.4vw,72px);font-weight:500;line-height:1.06;letter-spacing:-.02em;max-width:20ch}
.about__lead b,.about__lead .hl{color:var(--yellow)}
.about__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,80px);margin-top:clamp(50px,8vh,110px);max-width:880px}
.about__cols h3{font-size:14px;letter-spacing:.06em;color:var(--yellow);margin-bottom:12px}
.about__cols p{font-size:clamp(16px,1.5vw,21px);font-weight:400;line-height:1.4;color:#cfcfcf}
@media(max-width:600px){.about__cols{grid-template-columns:1fr;gap:30px}}

.contact{padding:clamp(80px,12vh,150px) var(--gut) clamp(40px,6vh,70px);background:var(--yellow);color:var(--black)}
.contact__eyebrow{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.contact__mail{
  display:inline-block;max-width:100%;margin:clamp(14px,2vh,26px) 0 clamp(50px,8vh,100px);
  font-size:clamp(24px,6.8vw,92px);font-weight:900;text-transform:uppercase;letter-spacing:-.035em;line-height:.9;
  will-change:transform;
}
.contact__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:2px solid #000;padding-top:clamp(24px,3vw,40px)}
.contact__label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:10px}
.contact__grid p{font-size:clamp(15px,1.4vw,19px);font-weight:500;line-height:1.45}
.contact__grid a{position:relative}
.contact__grid a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1.4px;background:#000;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.contact__grid a:hover::after{transform:scaleX(1);transform-origin:left}
@media(max-width:680px){.contact__grid{grid-template-columns:1fr;gap:26px}}

.site-footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--yellow);color:var(--black);padding:clamp(18px,2vw,26px) var(--gut) clamp(30px,4vh,44px);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.03em}

.lightbox{
  position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.96);
  display:flex;align-items:center;justify-content:center;padding:var(--gut);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__close{
  position:absolute;top:clamp(16px,2.4vw,30px);right:var(--gut);
  background:none;border:none;color:var(--white);font-family:inherit;
  font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;z-index:2;
}
.lightbox__close::after{content:'';display:block;height:1.5px;background:var(--yellow);transform:scaleX(0);transition:transform .4s var(--ease)}
.lightbox__close:hover::after{transform:scaleX(1)}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  background:none;border:none;color:var(--white);font-family:inherit;
  font-size:clamp(28px,3vw,42px);line-height:1;padding:clamp(10px,1.5vw,20px);
  opacity:.65;transition:opacity .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.lightbox__nav:hover{opacity:1;color:var(--yellow)}
.lightbox__nav--prev{left:clamp(4px,2vw,30px)}
.lightbox__nav--next{right:clamp(4px,2vw,30px)}
.lightbox__nav--prev:hover{transform:translateY(-50%) translateX(-4px)}
.lightbox__nav--next:hover{transform:translateY(-50%) translateX(4px)}
.lightbox__stage{width:min(100%,1400px);transform:scale(.96);transition:transform .6s var(--ease)}
.lightbox.is-open .lightbox__stage{transform:none}
.lightbox__player{aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:2px}
.lightbox__player iframe{width:100%;height:100%;border:0}
.lightbox__player video{width:100%;height:100%;border:0;object-fit:contain;background:#000}
.lightbox__meta{display:flex;justify-content:space-between;margin-top:16px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.lightbox__meta span:last-child{color:var(--yellow)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .tile{opacity:1;transform:none}
}