*{margin:0;padding:0;box-sizing:border-box}
:root{--lime:#DAFF02;--orange:#FE572A;--purple:#685BC7;--cream:#EFEBD8;--black:#201E1F;--padding:4vw;--title:-.07em;--sub:-.05em;--body:-.03em}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--black);color:var(--cream);font-family:Inter,sans-serif;overflow-x:hidden;cursor:none}
a{color:inherit;text-decoration:none}
img{width:100%;display:block}
.cursor{position:fixed;width:14px;height:14px;border-radius:50%;background:var(--lime);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:.08}
.header{position:fixed;top:0;left:0;width:100%;padding:28px var(--padding);display:flex;align-items:center;justify-content:space-between;z-index:100;mix-blend-mode:difference}
.logo{display:flex;align-items:center;width:clamp(130px,12vw,185px);line-height:0}
.logo img{display:block;width:100%;height:auto;max-height:42px;object-fit:contain;filter:brightness(0) invert(1)}
.footer-logo{font-size:24px;font-weight:900;letter-spacing:var(--title)}
.footer-logo span{color:var(--lime)}
.nav{display:flex;gap:35px;font-size:13px;font-weight:700;letter-spacing:var(--body);text-transform:uppercase}
.nav a{position:relative}
.nav a:after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:currentColor;transition:.3s}
.nav a:hover:after{width:100%}
.menu-button{display:none}
.hero{min-height:100vh;position:relative;overflow:hidden;background:var(--black);display:flex;align-items:flex-end;padding:150px var(--padding) 70px}
.hero-content{width:100%;position:relative;z-index:3}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:var(--body);text-transform:uppercase;margin-bottom:35px}
.hero h1{font-size:clamp(75px,13vw,210px);line-height:.78;letter-spacing:var(--title);font-weight:900;text-transform:lowercase}
.hero h1 span{color:var(--lime)}
.hero h1 i{color:var(--orange);font-style:normal}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:60px}
.hero-bottom p{max-width:320px;font-size:17px;line-height:1.15;letter-spacing:var(--body)}
.scroll-link{font-size:13px;font-weight:700;text-transform:uppercase}
.hero-shape{position:absolute;border-radius:50%;z-index:1}
.hero-shape-lime{width:30vw;height:30vw;right:-5vw;top:10vh;background:var(--lime)}
.hero-shape-orange{width:15vw;height:15vw;right:23vw;bottom:-5vw;background:var(--orange)}
.hero-shape-purple{width:12vw;height:12vw;left:43vw;top:20vh;background:var(--purple)}
.intro{min-height:80vh;background:var(--cream);color:var(--black);padding:120px var(--padding);display:grid;grid-template-columns:20% 80%;column-gap:2vw}
.intro-number{font-size:14px;font-weight:700;line-height:1.5;letter-spacing:var(--body);padding-top:3px}
.intro-text{max-width:950px}
.label{font-size:12px;font-weight:700;text-transform:lowercase;letter-spacing:var(--body);line-height:1.5;margin-bottom:42px}
.intro h2{font-size:clamp(50px,7vw,110px);line-height:.88;letter-spacing:var(--title);font-weight:900;margin-bottom:70px}
.intro h2 span{color:var(--purple)}
.body-copy{max-width:500px;font-size:18px;line-height:1.2;letter-spacing:var(--body)}
.work{padding:150px var(--padding);background:var(--black)}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:100px}
.section-heading h2{font-size:clamp(70px,10vw,150px);line-height:.8;letter-spacing:var(--title);font-weight:900;text-transform:lowercase}
.section-heading h2 span{color:var(--orange)}
.section-description{max-width:270px;font-size:15px;line-height:1.1;letter-spacing:var(--body)}
.projects{display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px;row-gap:75px;max-width:1040px;margin:0 auto}
.project{position:relative;min-width:0}
.project-large{grid-column:1/span 4}
.project-medium{grid-column:5/span 4}
.project-small{grid-column:9/span 4}
.project-image{display:block;position:relative;overflow:hidden;background:var(--purple);aspect-ratio:1.25}
.project-large .project-image,.project-medium .project-image,.project-small .project-image{aspect-ratio:1.05}
.project-image img{height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.project-image:hover img{transform:scale(1.04)}
.project-number{position:absolute;top:14px;left:14px;font-size:12px;font-weight:700}
.project-arrow{position:absolute;right:20px;bottom:15px;font-size:35px;line-height:1;transition:.3s}
.project-image:hover .project-arrow{transform:translate(5px,-5px)}
.behance-tag{position:absolute;right:12px;top:12px;background:var(--lime);color:var(--black);padding:7px 9px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:var(--body);transform:rotate(-2deg);transition:.3s}
.project-image:hover .behance-tag{transform:rotate(2deg) translateY(-2px)}
.behance-more{grid-column:8/span 4;display:flex;flex-direction:column;justify-content:flex-end;gap:25px;padding-bottom:10px}
.behance-more p{font-size:clamp(28px,3.5vw,52px);line-height:.9;letter-spacing:var(--title);font-weight:800}
.behance-more p span{color:var(--lime)}
.behance-button{align-self:flex-start;padding:15px 18px;background:var(--orange);color:var(--black);font-size:11px;font-weight:800;text-transform:uppercase;transition:.3s}
.behance-button:hover{transform:rotate(-1deg) translateY(-3px);background:var(--lime)}
.project-info{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding-top:14px;border-top:1px solid rgba(239,235,216,.3);margin-top:10px}
.project-info h3{font-size:18px;letter-spacing:var(--sub);font-weight:800}
.project-info p,.project-info span{font-size:11px;margin-top:5px;letter-spacing:var(--body)}
.manifesto{background:var(--lime);color:var(--black);min-height:100vh;padding:40px var(--padding) 70px;display:flex;flex-direction:column;justify-content:space-between}
.manifesto-top{display:flex;justify-content:space-between;font-size:12px;font-weight:700;text-transform:lowercase;line-height:1.6;letter-spacing:var(--body);padding-bottom:24px}
.manifesto h2{font-size:clamp(65px,11vw,180px);line-height:.77;letter-spacing:var(--title);font-weight:900;max-width:1100px;text-transform:lowercase}
.manifesto h2 span{color:var(--orange)}
.manifesto-bottom{display:flex;justify-content:space-between;align-items:flex-end}
.manifesto-bottom p{max-width:400px;font-size:18px;line-height:1.1;letter-spacing:var(--body)}
.asterisk{font-size:180px;line-height:.5;color:var(--purple)}
.about{min-height:100vh;background:var(--cream);color:var(--black);padding:130px var(--padding);display:grid;grid-template-columns:1fr 1fr;gap:100px}
.about-title h2{font-size:clamp(70px,10vw,150px);line-height:.84;letter-spacing:var(--title);font-weight:900;text-transform:lowercase;margin-top:12px}
.about-title h2 span{color:var(--purple)}
.about-content{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:52px}
.big-text{font-size:clamp(35px,4vw,65px);line-height:.9;letter-spacing:var(--title);font-weight:800;max-width:600px}
.button{display:inline-block;padding:18px 25px;background:var(--black);color:var(--cream);font-size:13px;font-weight:700;text-transform:uppercase;transition:.3s}
.button:hover{background:var(--orange);color:var(--black);transform:rotate(-1deg) translateY(-2px)}
.contact{min-height:100vh;background:var(--purple);color:var(--cream);padding:40px var(--padding);display:flex;flex-direction:column;justify-content:space-between}
.contact-top{display:flex;justify-content:space-between;font-size:12px;font-weight:700;text-transform:lowercase;line-height:1.6;letter-spacing:var(--body);padding-bottom:24px}
.contact-content p{font-size:18px;font-weight:700;margin-bottom:28px;line-height:1.5;letter-spacing:var(--body)}
.email{font-size:clamp(45px,9vw,145px);line-height:.8;letter-spacing:var(--title);font-weight:900;word-break:break-word;transition:.3s}
.email:hover{color:var(--lime)}
.whatsapp-button{display:inline-flex;align-items:center;gap:12px;margin-top:34px;padding:16px 20px;border:1px solid var(--cream);font-size:12px;font-weight:800;letter-spacing:var(--body);text-transform:lowercase;transition:background .25s,color .25s,border-color .25s,transform .25s}
.whatsapp-button svg{width:21px;height:21px;fill:currentColor;flex-shrink:0}
.whatsapp-button:hover{background:var(--lime);border-color:var(--lime);color:var(--black);transform:translateY(-3px)}
.whatsapp-button{display:inline-flex;align-items:center;gap:12px;margin-top:34px;padding:16px 20px;border:1px solid var(--cream);font-size:12px;font-weight:800;letter-spacing:var(--body);text-transform:lowercase;transition:background .25s,color .25s,border-color .25s,transform .25s}
.whatsapp-button svg{width:21px;height:21px;fill:currentColor;flex-shrink:0}
.whatsapp-button:hover{background:var(--lime);border-color:var(--lime);color:var(--black);transform:translateY(-3px)}
.contact-footer{display:flex;justify-content:space-between;gap:20px;font-size:12px;font-weight:700;text-transform:uppercase}
.footer{background:var(--black);padding:30px var(--padding);display:flex;justify-content:space-between;align-items:center;gap:20px}
.footer p{font-size:11px;text-transform:uppercase}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
::selection{background:var(--orange);color:var(--black)}
@media(max-width:900px){
  :root{--padding:6vw}
  body{cursor:auto}
  .cursor{display:none}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--black);padding:25px var(--padding);flex-direction:column;gap:22px;mix-blend-mode:normal}
  .nav.open{display:flex}
  .menu-button{display:flex;flex-direction:column;gap:6px;border:0;background:transparent;padding:8px;cursor:pointer}
  .menu-button span{width:28px;height:2px;background:var(--cream)}
  .hero{padding-top:130px}
  .hero h1{font-size:clamp(60px,18vw,130px)}
  .hero-shape-lime{width:45vw;height:45vw}
  .hero-bottom{align-items:flex-start;flex-direction:column;gap:35px}
  .intro{grid-template-columns:1fr;gap:34px}
  .section-heading{flex-direction:column;align-items:flex-start;gap:50px;margin-bottom:70px}
  .projects{display:grid;grid-template-columns:1fr 1fr;gap:55px 20px}
  .project,.project-large,.project-medium,.project-small{grid-column:auto;width:100%;margin:0}
  .project-image,.project-large .project-image,.project-medium .project-image,.project-small .project-image{aspect-ratio:1.05}
  .behance-more{grid-column:1/-1;margin:0;padding:20px 0 0;gap:25px}
  .about{grid-template-columns:1fr;gap:80px}
  .about-content{gap:58px}
  .manifesto h2{font-size:17vw}
  .manifesto-bottom{flex-direction:column;align-items:flex-start;gap:50px}
  .asterisk{font-size:100px}
  .email{font-size:13vw}
}
@media(max-width:600px){
  .hero{min-height:90vh}
  .hero h1{font-size:19vw}
  .intro,.work,.about{padding-top:90px;padding-bottom:90px}
  .section-heading h2{font-size:20vw}
  .projects{grid-template-columns:1fr;gap:55px}
  .project-image,.project-large .project-image,.project-medium .project-image,.project-small .project-image{aspect-ratio:1.15}
  .manifesto,.contact{min-height:80vh}
  .manifesto-top,.contact-top{gap:20px}
  .contact-footer{flex-direction:column;gap:12px}
  .footer{flex-direction:column;align-items:flex-start;gap:15px}
  .intro h2{margin-bottom:52px}
}