@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');
:root{--white:#fafafa;--black:#050505;--gray:#d7d7d7;--pink:#f0008b}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--white);color:var(--black);font:15px/1.6 "Space Mono",monospace;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%;image-rendering:auto}
.wrap{width:min(1220px,calc(100% - 44px));margin:auto}
.nav{height:78px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid}
.brand{font:26px "Archivo Black";text-decoration:none;text-transform:uppercase}
.brand span{color:var(--pink)}
.nav nav a{font-size:11px;text-transform:uppercase;text-decoration:none;margin-left:25px}
.hero{display:grid;grid-template-columns:.48fr .52fr;min-height:760px}
.hero-copy{padding:80px 5vw 70px max(22px,calc((100vw - 1220px)/2));display:flex;flex-direction:column;justify-content:space-between}
.micro{text-transform:uppercase;font-size:10px;letter-spacing:.12em}
.hero h1,.services h2,.case h2,.method h2,.scope h2,.contact h2{font-family:"Archivo Black";text-transform:uppercase;letter-spacing:-.065em;line-height:.82}
.hero h1{font-size:clamp(69px,8.5vw,125px);margin:30px 0}
.hero h1 b{color:var(--pink)}
.hero p{font-size:16px;max-width:500px}
.hero a{display:inline-block;background:var(--pink);color:white;padding:14px 18px;text-decoration:none;align-self:flex-start}
.hero-image{position:relative;border-left:1px solid}
.hero-image img{width:100%;height:100%;object-fit:cover}
.hero-image:after{content:"";position:absolute;width:90px;height:90px;background:var(--pink);right:8%;bottom:8%;mix-blend-mode:multiply}
.noise{background:var(--black);color:white}
.noise .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.noise div{padding:25px;border-right:1px solid #555}
.noise strong{display:block;color:var(--pink);font-family:"Archivo Black";text-transform:uppercase}
.intro{padding:120px 0}
.intro-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:8vw}
.intro h2{font:clamp(58px,8vw,104px)/.84 "Archivo Black";text-transform:uppercase;letter-spacing:-.06em;margin:0}
.intro p{font-size:18px}
.services{background:var(--gray);padding:120px 0}
.services h2{font-size:clamp(66px,9vw,125px);margin:0 0 70px}
.stack{position:relative;padding-bottom:70px}
.block{display:grid;grid-template-columns:.85fr 1.15fr;background:white;border:3px solid;margin-bottom:-25px;width:88%;position:relative}
.block:nth-child(even){margin-left:12%;grid-template-columns:1.15fr .85fr}
.block:nth-child(even) img{order:2}
.block img{width:100%;height:380px;object-fit:cover}
.block-copy{padding:50px}
.block h3{font:34px/.95 "Archivo Black";text-transform:uppercase;margin:0 0 18px}
.block:nth-child(1){z-index:4}
.block:nth-child(2){z-index:3}
.block:nth-child(3){z-index:2}
.block:nth-child(4){z-index:1}
.block:after{content:"";position:absolute;width:24px;height:24px;background:var(--pink);top:14px;right:14px}
.case{display:grid;grid-template-columns:1fr 1fr;background:var(--black);color:white}
.case img{height:650px;width:100%;object-fit:cover}
.case-copy{padding:90px 7vw;display:flex;flex-direction:column;justify-content:center}
.case h2{font-size:clamp(60px,7vw,100px);margin:20px 0}
.case h2 span{color:var(--pink)}
.fine{font-size:11px;border-top:1px solid var(--pink);padding-top:18px}
.method{padding:120px 0}
.method h2{font-size:clamp(65px,9vw,120px);margin:0 0 70px}
.matrix{display:grid;grid-template-columns:repeat(2,1fr);border-top:4px solid;border-left:4px solid}
.unit{padding:45px;border-right:4px solid;border-bottom:4px solid;min-height:250px}
.unit:before{content:"";display:block;width:35px;height:35px;background:var(--pink);margin-bottom:35px}
.unit:nth-child(2):before,.unit:nth-child(3):before{background:var(--black)}
.unit h3{font:27px "Archivo Black";text-transform:uppercase;margin:0 0 12px}
.scope{background:var(--pink);padding:120px 0}
.scope h2{font-size:clamp(64px,9vw,120px);margin:0 0 70px}
.positive-negative{display:grid;grid-template-columns:1fr 1fr}
.positive-negative article{padding:55px;background:white}
.positive-negative article:last-child{background:var(--black);color:white}
.positive-negative h3{font:29px "Archivo Black";text-transform:uppercase}
.positive-negative p,.positive-negative li{font-size:13px}
.contact{padding:120px 0}
.contact-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:7vw;align-items:end}
.contact h2{font-size:clamp(70px,11vw,145px);margin:0}
.contact-data{border-top:8px solid var(--pink);padding-top:25px}
.email{color:var(--pink);font-weight:700;overflow-wrap:anywhere}
.footer{background:var(--black);color:white;padding:28px 0;font-size:11px}
.footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap}
.footer a{margin-left:18px}
.legal-main{width:min(850px,calc(100% - 38px));margin:auto;padding:80px 0 120px}
.legal-main h1{font:clamp(57px,8vw,95px)/.87 "Archivo Black";text-transform:uppercase}
.legal-main h2{font:24px "Archivo Black";text-transform:uppercase;margin-top:45px}
.back{display:inline-block;margin-top:30px;color:var(--pink)}

@media(max-width:760px){.wrap{width:calc(100% - 28px)}
.nav nav{display:none}
.brand{font-size:20px}
.hero,.intro-grid,.block,.block:nth-child(even),.case,.contact-grid{grid-template-columns:1fr}
.hero-copy{padding:60px 14px}
.hero h1{font-size:67px;overflow-wrap:anywhere}
.hero-image{height:430px;border-left:0;border-top:1px solid}
.noise .wrap{grid-template-columns:1fr}
.noise div{border-right:0;border-bottom:1px solid #555}
.intro,.services,.method,.scope,.contact{padding:85px 0}
.intro-grid{gap:35px}
.block,.block:nth-child(even){width:100%;margin:0 0 18px}
.block:nth-child(even) img{order:0}
.block img{height:300px}
.block-copy{padding:32px 24px}
.case img{height:410px}
.case-copy{padding:65px 24px}
.matrix{grid-template-columns:1fr}
.unit{min-height:0}
.positive-negative{grid-template-columns:1fr}
.positive-negative article{padding:38px 26px}
.contact-grid{gap:45px}
.footer a{margin:0 14px 0 0}
.legal-main h1{font-size:55px;overflow-wrap:anywhere}
}