*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --black:#0a0a0a;--white:#f0ece4;--red:#e03c31;--yellow:#f2e205;
  --grey:#888;--border:3px solid var(--black);
  --color-primary:#e03c31;--color-secondary:#f2e205;--color-accent:#0a0a0a;
  --color-base:#f0ece4;--color-text:#0a0a0a;
}
html{overflow:hidden;height:100vh;cursor:crosshair}
body{
  height:100vh;overflow-x:auto;overflow-y:hidden;
  display:flex;flex-direction:row;
  background:var(--white);color:var(--black);
  font-family:'JetBrains Mono',monospace;
  scrollbar-width:none;
}
body::-webkit-scrollbar{display:none}

/* NAV */
nav{
  position:fixed;top:0;left:0;width:60px;height:100vh;z-index:100;
  background:var(--black);display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;padding:20px 0;
}
nav .logo{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:'Anton',sans-serif;font-size:18px;letter-spacing:4px;
  color:var(--red);transform:rotate(180deg);
}
nav .dots{display:flex;flex-direction:column;gap:12px}
nav .dot{
  width:10px;height:10px;border:2px solid var(--white);
  cursor:pointer;transition:all .2s;
}
nav .dot:hover,nav .dot.active{background:var(--red);border-color:var(--red)}
nav .year{
  writing-mode:vertical-rl;font-size:11px;color:var(--grey);
  letter-spacing:2px;
}

/* TRACK */
.track{display:flex;flex-direction:row;margin-left:60px}
section{
  min-width:100vw;width:100vw;height:100vh;
  padding:60px 80px;position:relative;
  display:flex;flex-direction:column;justify-content:center;
  border-right:var(--border);overflow:hidden;
}

/* HERO */
.hero{padding:0}
.hero-grid{
  display:grid;height:100%;
  grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
}
.hero-cell{
  border-bottom:var(--border);border-right:var(--border);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.hero-cell:nth-child(1){
  background:var(--black);color:var(--white);
  flex-direction:column;align-items:flex-start;padding:60px 80px;
}
.hero-cell:nth-child(1) h1{
  font-family:'Anton',sans-serif;font-size:clamp(60px,8vw,140px);
  line-height:.85;letter-spacing:-3px;text-transform:uppercase;
}
.hero-cell:nth-child(1) h1 span{color:var(--red)}
.hero-cell:nth-child(1) .tagline{
  margin-top:24px;font-size:13px;color:var(--grey);
  letter-spacing:3px;text-transform:uppercase;
}
.hero-cell:nth-child(2){background:var(--red);flex-direction:column}
.hero-cell:nth-child(2) .big-num{
  font-family:'Anton',sans-serif;font-size:clamp(120px,18vw,280px);
  color:var(--black);opacity:.15;position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.hero-cell:nth-child(2) .cta{
  font-size:14px;letter-spacing:4px;text-transform:uppercase;
  color:var(--black);border:3px solid var(--black);
  padding:16px 40px;cursor:pointer;transition:all .2s;
  font-family:'JetBrains Mono',monospace;
  background:transparent;font-weight:700;z-index:2;
}
.hero-cell:nth-child(2) .cta:hover{background:var(--black);color:var(--red)}
.hero-cell:nth-child(3){
  background:var(--yellow);padding:60px;
  align-items:flex-start;justify-content:flex-end;flex-direction:column;
}
.hero-cell:nth-child(3) .stat-label{
  font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--black);opacity:.6;
}
.hero-cell:nth-child(3) .stat-val{
  font-family:'Anton',sans-serif;font-size:72px;color:var(--black);margin-top:4px;
}
.hero-cell:nth-child(4){
  background:var(--white);padding:60px;
  flex-direction:column;align-items:flex-start;justify-content:flex-end;
}
.hero-cell:nth-child(4) p{font-size:14px;line-height:1.8;max-width:360px;color:var(--black)}
.hero-cell:nth-child(4) .scroll-hint{
  position:absolute;bottom:30px;right:40px;
  font-size:11px;letter-spacing:3px;color:var(--grey);
  text-transform:uppercase;animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ABOUT */
.about{background:var(--black);color:var(--white)}
.about .section-num{
  font-family:'Anton',sans-serif;font-size:clamp(200px,25vw,400px);
  color:var(--red);opacity:.08;position:absolute;
  top:-60px;right:-40px;line-height:1;
}
.about h2{
  font-family:'Anton',sans-serif;font-size:clamp(48px,5vw,80px);
  text-transform:uppercase;letter-spacing:-2px;line-height:.95;max-width:700px;
}
.about h2 em{font-family:'Instrument Serif',serif;font-style:italic;color:var(--red)}
.about .about-body{
  margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:900px;
}
.about .about-body p{font-size:13px;line-height:2;color:var(--grey)}
.about .divider{width:120px;height:3px;background:var(--red);margin-top:40px}

/* WORK */
.work{background:var(--white);padding:0}
.work-inner{
  display:grid;height:100%;width:100%;
  grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;
}
.work-card{
  border-right:var(--border);border-bottom:var(--border);
  position:relative;overflow:hidden;cursor:pointer;
  display:flex;align-items:flex-end;padding:30px;transition:all .3s;
}
.work-card::before{content:'';position:absolute;inset:0;transition:all .4s}
.work-card:nth-child(1)::before{background:var(--red)}
.work-card:nth-child(2)::before{background:var(--black)}
.work-card:nth-child(3)::before{background:var(--yellow)}
.work-card:nth-child(4)::before{background:#2d2d2d}
.work-card:nth-child(5)::before{background:var(--white)}
.work-card:nth-child(6)::before{background:var(--red);opacity:.7}
.work-card .card-content{position:relative;z-index:2}
.work-card .card-num{font-family:'Anton',sans-serif;font-size:60px;opacity:.2;line-height:1}
.work-card .card-title{
  font-family:'Anton',sans-serif;font-size:22px;
  text-transform:uppercase;letter-spacing:1px;margin-top:8px;
}
.work-card .card-cat{font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:6px;opacity:.5}
.work-card:nth-child(1),.work-card:nth-child(2),
.work-card:nth-child(4),.work-card:nth-child(6){color:var(--white)}
.work-card:nth-child(3),.work-card:nth-child(5){color:var(--black)}
.work-card:hover::before{transform:scale(1.05)}
.work-card .hover-label{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0);
  font-family:'Anton',sans-serif;font-size:14px;
  letter-spacing:6px;text-transform:uppercase;
  border:2px solid currentColor;padding:12px 28px;
  transition:all .3s;opacity:0;z-index:3;
}
.work-card:hover .hover-label{transform:translate(-50%,-50%) scale(1);opacity:1}

/* SERVICES */
.services{background:var(--red);color:var(--black)}
.services .section-num{
  font-family:'Anton',sans-serif;font-size:clamp(200px,25vw,400px);
  color:var(--black);opacity:.08;position:absolute;
  top:-60px;left:-40px;line-height:1;
}
.services h2{
  font-family:'Anton',sans-serif;font-size:clamp(48px,5vw,80px);
  text-transform:uppercase;letter-spacing:-2px;
}
.service-list{margin-top:50px;display:flex;flex-direction:column;gap:0;max-width:800px}
.service-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:24px 0;border-top:2px solid rgba(0,0,0,.2);
  cursor:pointer;transition:all .2s;
}
.service-item:last-child{border-bottom:2px solid rgba(0,0,0,.2)}
.service-item:hover{padding-left:20px}
.service-item .svc-name{
  font-family:'Anton',sans-serif;font-size:28px;
  text-transform:uppercase;letter-spacing:1px;
}
.service-item .svc-num{font-family:'JetBrains Mono',monospace;font-size:12px;opacity:.4;letter-spacing:2px}

/* MANIFESTO */
.manifesto{background:var(--black);color:var(--white);align-items:center;text-align:center}
.manifesto .big-quote{
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:clamp(32px,4vw,64px);line-height:1.3;max-width:800px;
}
.manifesto .big-quote span{color:var(--red)}
.manifesto .attribution{
  margin-top:30px;font-size:11px;letter-spacing:4px;
  text-transform:uppercase;color:var(--grey);
}
.manifesto .corner-mark{
  position:absolute;font-family:'Anton',sans-serif;
  font-size:14px;letter-spacing:4px;text-transform:uppercase;
  color:var(--grey);opacity:.3;
}
.manifesto .corner-mark.tl{top:40px;left:80px}
.manifesto .corner-mark.br{bottom:40px;right:80px}

/* CONTACT */
.contact{
  background:var(--yellow);color:var(--black);
  display:grid;grid-template-columns:1fr 1fr;padding:0;
}
.contact-left{
  padding:80px;display:flex;flex-direction:column;
  justify-content:center;border-right:var(--border);
}
.contact-left h2{
  font-family:'Anton',sans-serif;
  font-size:clamp(48px,5vw,90px);
  text-transform:uppercase;letter-spacing:-2px;line-height:.9;
}
.contact-left .email{
  margin-top:30px;font-size:16px;letter-spacing:2px;
  text-decoration:none;color:var(--black);
  border-bottom:3px solid var(--black);
  display:inline-block;padding-bottom:4px;transition:all .2s;
}
.contact-left .email:hover{color:var(--red);border-color:var(--red)}
.contact-right{
  background:var(--black);color:var(--white);
  padding:80px;display:flex;flex-direction:column;
  justify-content:space-between;
}
.contact-right .social-list{display:flex;flex-direction:column;gap:16px}
.contact-right .social-item{
  font-size:13px;letter-spacing:4px;text-transform:uppercase;
  color:var(--grey);cursor:pointer;transition:all .2s;
}
.contact-right .social-item:hover{color:var(--red);padding-left:12px}
.contact-right .copyright{
  font-size:10px;letter-spacing:3px;color:var(--grey);text-transform:uppercase;
}

/* PROGRESS BAR */
.progress-bar{
  position:fixed;bottom:0;left:60px;right:0;height:4px;
  background:rgba(0,0,0,.1);z-index:100;
}
.progress-fill{height:100%;background:var(--red);width:0%;transition:width .1s linear}

/* NOISE */
.noise{
  position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
}

/* TICKER */
.ticker{
  position:fixed;top:0;left:60px;right:0;height:36px;
  background:var(--red);z-index:99;overflow:hidden;
  display:flex;align-items:center;
}
.ticker-track{
  display:flex;white-space:nowrap;
  animation:ticker 20s linear infinite;
}
.ticker-track span{
  font-family:'Anton',sans-serif;font-size:12px;
  letter-spacing:5px;text-transform:uppercase;
  color:var(--black);padding:0 40px;
}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* COORDS */
.coords{
  position:fixed;bottom:20px;right:20px;z-index:100;
  font-size:10px;letter-spacing:2px;color:var(--grey);
  font-family:'JetBrains Mono',monospace;
  mix-blend-mode:difference;
}

/* SECTION TRANSITIONS */
section .section-num,section h2,section p,.service-item,.work-card .card-content{
  opacity:0;transform:translateY(30px);
  transition:all .6s cubic-bezier(.25,.46,.45,.94);
}
section.visible .section-num,section.visible h2,section.visible p,
section.visible .service-item,section.visible .work-card .card-content{
  opacity:1;transform:translateY(0);
}
section.visible .service-item:nth-child(1){transition-delay:.1s}
section.visible .service-item:nth-child(2){transition-delay:.2s}
section.visible .service-item:nth-child(3){transition-delay:.3s}
section.visible .service-item:nth-child(4){transition-delay:.4s}
section.visible .service-item:nth-child(5){transition-delay:.5s}
section.visible .service-item:nth-child(6){transition-delay:.6s}
.hero .hero-cell *{opacity:1;transform:none}

/* RESPONSIVE */
@media(max-width:768px){
  nav{width:40px;padding:12px 0}
  nav .logo{font-size:14px;letter-spacing:3px}
  nav .dot{width:8px;height:8px}
  .track{margin-left:40px}
  section{padding:40px}
  .hero-grid{grid-template-columns:1fr;grid-template-rows:repeat(4,1fr)}
  .hero-cell:nth-child(1){padding:40px}
  .hero-cell:nth-child(1) h1{font-size:48px;letter-spacing:-1px}
  .hero-cell:nth-child(3){padding:30px}
  .hero-cell:nth-child(3) .stat-val{font-size:48px}
  .hero-cell:nth-child(4){padding:30px}
  .about .about-body{grid-template-columns:1fr;gap:24px}
  .work-inner{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr)}
  .contact{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .contact-left{padding:40px;border-right:none;border-bottom:var(--border)}
  .contact-right{padding:40px}
  .ticker{left:40px}
  .progress-bar{left:40px}
}