@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');

:root{
  --black:#050505;
  --white:#f1efe9;
  --grey:#8b8983;
  --red:#ff3b30;
  --line:rgba(241,239,233,.18);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:'Space Mono',monospace;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.grain{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.nav{
  height:76px;padding:0 4vw;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  position:absolute;top:0;left:0;width:100%;z-index:10;
}
.logo,.footer-logo{font:800 30px/1 'Archivo Black',sans-serif;letter-spacing:-1.5px}
.logo span,.footer-logo span{font:10px 'Space Mono',monospace;color:var(--red);vertical-align:top;margin-left:3px}
.nav-middle{display:flex;gap:30px}
.nav-middle a,.nav-cta{font-size:9px;letter-spacing:1.6px}
.nav-middle a:hover{color:var(--red)}
.nav-cta{justify-self:end;border:1px solid var(--white);padding:12px 15px}
.nav-cta b{color:var(--red);margin-left:8px}
.nav-cta:hover{background:var(--red);border-color:var(--red);color:var(--black)}
.nav-cta:hover b{color:var(--black)}

.hero{min-height:100vh;position:relative;padding:150px 7vw 70px;display:flex;flex-direction:column;justify-content:space-between;border-bottom:1px solid var(--line);overflow:hidden}
.hero:before{content:'';position:absolute;width:45vw;height:45vw;border-radius:50%;right:-15vw;top:20vh;background:radial-gradient(circle,rgba(255,59,48,.14),transparent 65%);filter:blur(10px)}
.hero-top,.hero-foot{display:flex;justify-content:space-between;position:relative;z-index:2}
.hero-top{font-size:9px;letter-spacing:1.8px;color:var(--grey)}
.hero-copy{position:relative;z-index:2}
.kicker{font-size:9px;letter-spacing:2.4px;color:var(--red);margin-bottom:22px}
.hero h1{font:800 clamp(85px,15vw,210px)/.77 'Archivo Black',sans-serif;letter-spacing:-8px}
.hero h1 i,.reel h2 i,.craft h3 i,.work h3 i,.statement-big i,.process-step h3 i,.cta h2 i{font-style:italic;color:var(--red)}
.hero-foot{align-items:end}
.hero-foot p{max-width:420px;color:#aaa79f;font-size:11px;line-height:1.8}
.scroll{font-size:9px;letter-spacing:1.5px}
.hero-mark{position:absolute;right:5vw;bottom:70px;font:800 180px 'Archivo Black',sans-serif;color:transparent;-webkit-text-stroke:1px rgba(241,239,233,.16);z-index:1}

section{position:relative}
.reel,.craft,.work,.process{padding:105px 7vw 130px}
.section-line{border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.6px;color:var(--grey);margin-bottom:60px}
.video-shell{position:relative;background:#000;border:1px solid var(--line);max-width:850px;margin:auto;box-shadow:0 30px 100px rgba(0,0,0,.5)}
.video-shell video{display:block;width:100%;max-height:780px;object-fit:contain;background:#000}
.video-label{position:absolute;z-index:2;top:14px;font-size:8px;letter-spacing:1.3px;color:var(--white);mix-blend-mode:difference}
.video-label.top-left{left:16px}.video-label.top-right{right:16px}
.video-caption{padding:12px 15px;border-top:1px solid var(--line);font-size:8px;color:var(--grey);letter-spacing:1.5px}
.reel-intro{max-width:1050px;margin:110px auto 0;display:grid;grid-template-columns:1.5fr 1fr;gap:7vw;align-items:end}
.reel-intro h2{font:800 clamp(54px,7vw,100px)/.82 'Archivo Black',sans-serif;letter-spacing:-4px}
.reel-intro>p:last-child{font-size:12px;color:#99968f;line-height:1.9;max-width:410px}

.craft{background:#0c0c0c}
.craft-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.craft-grid article{min-height:340px;padding:25px;border-right:1px solid var(--line);display:flex;flex-direction:column;transition:.25s}
.craft-grid article:last-child{border:0}
.craft-grid article:hover{background:var(--red);color:var(--black)}
.craft-grid article>span{font-size:9px;color:var(--grey)}
.craft-grid article:hover>span{color:var(--black)}
.craft-grid h3{margin-top:auto;font:800 clamp(38px,4vw,65px) 'Archivo Black',sans-serif;letter-spacing:-2px}
.craft-grid p{font-size:10px;line-height:1.8;color:#8f8d87;max-width:240px;margin-top:18px}
.craft-grid article:hover p{color:#24100f}

.work-list{border-top:1px solid var(--line)}
.work-item{display:grid;grid-template-columns:70px 34% 1fr 50px;min-height:260px;border-bottom:1px solid var(--line);align-items:center;gap:25px;transition:.25s}
.work-item:hover{padding-left:18px;background:#0c0c0c}
.work-number{font-size:10px;color:var(--red)}
.work-thumb{height:190px;position:relative;background-size:cover;background-position:center;filter:grayscale(100%);transition:.35s}
.work-item:hover .work-thumb{filter:grayscale(0)}
.thumb-one{background-image:url('https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&w=1000&q=80')}
.thumb-two{background-image:url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1000&q=80')}
.thumb-three{background-image:url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1000&q=80')}
.work-thumb span{position:absolute;bottom:10px;left:10px;background:var(--red);color:#000;font-size:7px;padding:5px 7px}
.work-title h3{font:800 clamp(35px,4.5vw,65px)/.8 'Archivo Black',sans-serif;letter-spacing:-2px}
.work-title p{font-size:9px;color:var(--grey);margin-top:22px}
.arrow{font-size:22px;color:var(--red);text-align:right}

.statement{min-height:650px;padding:130px 7vw;display:flex;flex-direction:column;justify-content:center;background:var(--red);color:var(--black)}
.statement-big{font:800 clamp(70px,13vw,180px)/.78 'Archivo Black',sans-serif;letter-spacing:-7px}
.statement-big i{color:var(--black)}
.statement>p{font-size:11px;max-width:300px;line-height:1.8;margin-top:60px}

.process-list{max-width:1000px;margin-left:auto;border-top:1px solid var(--line)}
.process-step{display:grid;grid-template-columns:70px 220px 1fr;gap:25px;padding:32px 0;border-bottom:1px solid var(--line);align-items:center}
.process-step>span{font-size:9px;color:var(--red)}
.process-step h3{font:800 48px 'Archivo Black',sans-serif;letter-spacing:-2px}
.process-step p{font-size:10px;line-height:1.8;color:#8e8c86;max-width:390px}

.cta{padding:150px 7vw 170px;border-top:1px solid var(--line);background:#090909}
.cta h2{font:800 clamp(70px,12vw,175px)/.78 'Archivo Black',sans-serif;letter-spacing:-7px}
.cta-button{display:inline-block;margin-top:70px;border:1px solid var(--white);padding:17px 22px;font-size:10px;letter-spacing:1.5px}
.cta-button span{color:var(--red);margin-left:15px}
.cta-button:hover{background:var(--red);border-color:var(--red);color:#000}
.cta-button:hover span{color:#000}

footer{padding:30px 4vw;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;align-items:center;color:#6e6c67;font-size:8px;letter-spacing:1px}
footer>div:nth-child(2){text-align:center}
footer>div:last-child{text-align:right}

@media(max-width:900px){
  .nav{grid-template-columns:1fr auto}.nav-middle{display:none}
  .hero{padding:125px 6vw 55px}
  .hero h1{font-size:22vw;letter-spacing:-4px}
  .hero-mark{font-size:120px}
  .reel,.craft,.work,.process{padding:85px 6vw 100px}
  .reel-intro{grid-template-columns:1fr;margin-top:80px}
  .craft-grid{grid-template-columns:1fr 1fr}
  .craft-grid article:nth-child(2){border-right:0}
  .craft-grid article{min-height:280px;border-bottom:1px solid var(--line)}
  .work-item{grid-template-columns:35px 1fr 35px;gap:15px;padding:20px 0}
  .work-thumb{grid-column:2;height:160px}
  .work-title{grid-column:2;grid-row:2}
  .arrow{grid-column:3;grid-row:1}
  .process-step{grid-template-columns:45px 1fr}
  .process-step p{grid-column:2}
  footer{grid-template-columns:1fr}
  footer>div:nth-child(2),footer>div:last-child{text-align:left}
}
@media(max-width:540px){
  .nav{height:68px;padding:0 5vw}.nav-cta{font-size:7px;padding:10px}
  .logo{font-size:25px}
  .hero{min-height:760px}
  .hero h1{font-size:25vw}
  .hero-top span:last-child,.hero-foot .scroll{display:none}
  .hero-foot p{font-size:10px}
  .section-line{font-size:7px}
  .craft-grid{grid-template-columns:1fr}
  .craft-grid article{border-right:0}
  .statement{min-height:520px;padding:90px 6vw}
  .statement-big{font-size:18vw;letter-spacing:-3px}
  .cta h2{font-size:18vw;letter-spacing:-3px}
}


/* ===== VANTA FINAL POLISH ===== */

body{
  background:
    radial-gradient(circle at 82% 18%,rgba(255,59,48,.055),transparent 24%),
    var(--black);
}

body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:90;
  border:1px solid rgba(241,239,233,.035);
}

.nav{
  backdrop-filter:blur(8px);
  background:rgba(5,5,5,.48);
}

.nav-middle a{
  position:relative;
}

.nav-middle a:after{
  content:"";
  position:absolute;
  left:0;
  bottom:-7px;
  width:0;
  height:1px;
  background:var(--red);
  transition:width .25s ease;
}

.nav-middle a:hover:after{
  width:100%;
}

.hero-copy{
  animation:vantaHeroIn .9s cubic-bezier(.2,.8,.2,1) both;
}

.hero-top{
  animation:vantaFade .8s .15s both;
}

.hero-foot{
  animation:vantaFade .8s .35s both;
}

@keyframes vantaHeroIn{
  from{opacity:0;transform:translateY(30px);clip-path:inset(0 0 100% 0)}
  to{opacity:1;transform:none;clip-path:inset(0)}
}

@keyframes vantaFade{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

.hero-mark{
  animation:markPulse 7s ease-in-out infinite alternate;
}

@keyframes markPulse{
  from{transform:rotate(-3deg) scale(1)}
  to{transform:rotate(3deg) scale(1.04)}
}

.video-shell{
  max-width:900px;
  transform:translateZ(0);
  transition:transform .5s ease,box-shadow .5s ease,border-color .3s ease;
}

.video-shell:hover{
  transform:translateY(-6px);
  border-color:rgba(255,59,48,.55);
  box-shadow:0 40px 110px rgba(0,0,0,.7),0 0 60px rgba(255,59,48,.055);
}

.video-shell video{
  aspect-ratio:9/16;
  max-height:none;
  object-fit:cover;
}

.video-progress{
  height:2px;
  width:100%;
  background:rgba(255,255,255,.09);
  overflow:hidden;
}

.video-progress span{
  display:block;
  width:34%;
  height:100%;
  background:var(--red);
  animation:reelProgress 5s ease-in-out infinite;
  transform-origin:left;
}

@keyframes reelProgress{
  0%{transform:scaleX(.1)}
  45%{transform:scaleX(1)}
  100%{transform:scaleX(.1)}
}

.video-caption{
  display:flex;
  justify-content:space-between;
  align-items:center;
  letter-spacing:1.4px;
}

.video-caption span:last-child{
  color:#5e5c58;
}

.reel-intro h2{
  transition:transform .5s ease;
}

.reel-intro:hover h2{
  transform:translateX(8px);
}

.craft-grid article{
  position:relative;
  overflow:hidden;
}

.craft-grid article:before{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  right:-45px;
  top:-45px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  transition:transform .5s ease;
}

.craft-grid article:hover:before{
  transform:scale(2.3);
  border-color:rgba(0,0,0,.12);
}

.work-item{
  position:relative;
  overflow:hidden;
}

.work-item:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:2px;
  height:100%;
  background:var(--red);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .35s ease;
}

.work-item:hover:before{
  transform:scaleY(1);
}

.work-title h3{
  transition:transform .35s ease;
}

.work-item:hover .work-title h3{
  transform:translateX(8px);
}

.work-thumb{
  overflow:hidden;
}

.work-thumb:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,59,48,.16),transparent 45%);
  opacity:0;
  transition:opacity .35s ease;
}

.work-item:hover .work-thumb:after{
  opacity:1;
}

.statement{
  overflow:hidden;
}

.statement:before{
  content:"VANTA";
  position:absolute;
  right:-5vw;
  bottom:-12vw;
  font:800 30vw/1 'Archivo Black',sans-serif;
  color:transparent;
  -webkit-text-stroke:1px rgba(0,0,0,.12);
  pointer-events:none;
}

.statement-big{
  position:relative;
  z-index:1;
}

.statement>p{
  position:relative;
  z-index:1;
}

.process-step{
  position:relative;
  transition:padding-left .3s ease,background .3s ease;
}

.process-step:hover{
  padding-left:15px;
  background:rgba(255,255,255,.018);
}

.process-step:after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:0;
  height:1px;
  background:var(--red);
  transition:width .35s ease;
}

.process-step:hover:after{
  width:100%;
}

.cta{
  overflow:hidden;
}

.cta:before{
  content:"V";
  position:absolute;
  right:2vw;
  bottom:-9vw;
  font:800 40vw/1 'Archivo Black',sans-serif;
  color:transparent;
  -webkit-text-stroke:1px rgba(241,239,233,.045);
}

.cta h2,.cta .kicker,.cta-button{
  position:relative;
  z-index:1;
}

.cta-button{
  transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
}

.cta-button:hover{
  transform:translateX(8px);
}

footer{
  background:#030303;
}

.reveal{
  animation:sectionIn .8s ease both;
}

@keyframes sectionIn{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

@media(max-width:900px){
  .video-shell{max-width:620px}
  .statement:before{font-size:45vw}
}

@media(max-width:540px){
  .video-caption{font-size:7px}
  .video-shell:hover{transform:none}
  .hero-mark{font-size:95px}
}