:root{
  --ink:#090909;
  --muted:#615955;
}

body{
  background:
    radial-gradient(circle at 80% 10%, rgba(255,90,54,.16), transparent 30vw),
    radial-gradient(circle at 12% 36%, rgba(140,53,255,.12), transparent 32vw),
    radial-gradient(circle at 70% 86%, rgba(255,112,190,.12), transparent 28vw),
    var(--bg);
}

.hero{
  min-height:650px;
  padding:40px 58px 70px;
  display:grid;
  grid-template-columns:1fr .75fr;
  gap:40px;
  align-items:end;
  position:relative;
  border-bottom:1px solid var(--line);
}

.hero::after{
  content:"";
  position:absolute;
  right:-110px;
  top:60px;
  width:540px;
  height:540px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.08);
  animation:spin 42s linear infinite;
}

.hero::before{
  content:"";
  position:absolute;
  right:70px;
  top:110px;
  width:380px;
  height:380px;
  border-radius:43% 57% 62% 38% / 45% 42% 58% 55%;
  background:
    radial-gradient(circle at 26% 70%, var(--purple), transparent 20%),
    radial-gradient(circle at 45% 48%, var(--orange), transparent 34%),
    radial-gradient(circle at 78% 20%, var(--pink), transparent 36%);
  filter:blur(22px);
  opacity:.82;
  animation:workBlob 8s var(--ease) infinite alternate;
}

.eyebrow{
  color:var(--purple);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:900;
  margin-bottom:18px;
}

.kicker{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:850;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:46px;
}

.kicker::before{
  content:"02";
  font-variant-numeric:tabular-nums;
}

.kicker::after{
  content:"";
  width:42px;
  height:1px;
  background:#111;
  opacity:.5;
}

h1{
  margin:0;
  font-size:clamp(76px, 12vw, 172px);
  line-height:.78;
  letter-spacing:-.105em;
  font-weight:950;
  max-width:900px;
  position:relative;
  z-index:2;
}

h1 .script{
  display:inline-block;
  font-family:Georgia, "Times New Roman", serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.09em;
  transform:translateY(.04em);
}

h1 .dot{color:var(--orange)}

.hero-text{
  max-width:390px;
  font-size:18px;
  line-height:1.4;
  color:#1d1917;
  letter-spacing:-.04em;
  position:relative;
  z-index:2;
}

.hero-meta{
  position:relative;
  z-index:2;
  align-self:start;
  margin-top:70px;
  border:1px solid var(--line);
  border-radius:28px;
  padding:26px;
  background:rgba(255,255,255,.43);
  backdrop-filter:blur(12px);
}

.hero-meta ul{
  padding:0;
  margin:0;
  list-style:none;
  display:grid;
  gap:18px;
}

.hero-meta li{
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding-bottom:14px;
  font-size:14px;
}

.hero-meta li:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.hero-meta b{
  font-size:24px;
  letter-spacing:-.07em;
}

.filter-bar{
  padding:28px 58px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  background:rgba(255,255,255,.32);
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(18px);
}

.filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.filter{
  border:1px solid rgba(0,0,0,.18);
  background:rgba(255,255,255,.42);
  border-radius:999px;
  padding:11px 16px;
  cursor:pointer;
  font-size:13px;
  font-weight:850;
  letter-spacing:-.03em;
  transition:.25s var(--ease);
}

.filter:hover,
.filter.active{
  background:#090909;
  color:white;
  transform:translateY(-2px);
}

.count{
  color:var(--muted);
  font-size:13px;
  font-weight:750;
}

.work-grid{
  padding:58px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:22px;
  border-bottom:1px solid var(--line);
}

.project{
  min-height:520px;
  grid-column:span 6;
  border:1px solid var(--line);
  border-radius:30px;
  background:rgba(255,255,255,.42);
  overflow:hidden;
  position:relative;
  display:grid;
  grid-template-rows:1.2fr .8fr;
  transition:.5s var(--ease);
}

.project.large{
  grid-column:span 12;
  min-height:620px;
  grid-template-columns:1.05fr .95fr;
  grid-template-rows:1fr;
}

.project:hover{
  transform:translateY(-12px);
  background:#fff;
  box-shadow:0 30px 80px rgba(30,10,0,.12);
}

.project-media{
  position:relative;
  overflow:hidden;
  min-height:280px;
  background:#080808;
}

.project.large .project-media{
  min-height:100%;
}

.mockup{
  position:absolute;
  inset:0;
  transform:scale(1.02);
  transition:.8s var(--ease);
}

.project:hover .mockup{
  transform:scale(1.08) rotate(.6deg);
}

.mockup.peaks{
  background:
    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.6)),
    radial-gradient(circle at 50% 25%, rgba(255,255,255,.9), transparent 5%),
    linear-gradient(140deg, #13161c 0%, #2d333c 32%, #070707 70%);
}

.mockup.peaks::before{
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  bottom:-8%;
  height:60%;
  background:
    linear-gradient(135deg, transparent 28%, rgba(255,255,255,.8) 29% 30%, transparent 31%),
    linear-gradient(40deg, transparent 34%, rgba(255,255,255,.22) 35% 36%, transparent 37%),
    linear-gradient(150deg, transparent 42%, rgba(255,255,255,.36) 43% 44%, transparent 45%);
  clip-path:polygon(0 100%, 18% 48%, 30% 72%, 48% 20%, 68% 84%, 82% 38%, 100% 100%);
  opacity:.92;
}

.mockup.mutatis{
  background:
    radial-gradient(circle at 68% 38%, rgba(228,211,179,.75), transparent 16%),
    radial-gradient(circle at 30% 25%, rgba(31,42,68,.9), transparent 28%),
    linear-gradient(135deg, #1f2a44, #0d1220 58%, #e4d3b3);
}

.mockup.mutatis::before{
  content:"MUTATIS";
  position:absolute;
  left:34px;
  top:36px;
  color:#e4d3b3;
  font-family:Georgia, serif;
  font-size:52px;
  letter-spacing:-.08em;
}

.mockup.melicello{
  background:
    radial-gradient(circle at 35% 46%, #f4d43a, transparent 10%),
    radial-gradient(circle at 65% 55%, rgba(255,255,255,.9), transparent 15%),
    linear-gradient(135deg, #080808, #111 55%, #f4d43a 56% 58%, #080808 59%);
}

.mockup.melicello::before{
  content:"Melicello";
  position:absolute;
  right:34px;
  bottom:34px;
  color:white;
  font-family:Georgia, serif;
  font-size:52px;
  font-style:italic;
}

.mockup.geneva{
  background:
    radial-gradient(circle at 54% 44%, rgba(255,255,255,.9), transparent 9%),
    radial-gradient(circle at 50% 45%, transparent 0 22%, rgba(255,255,255,.7) 23% 24%, transparent 25%),
    linear-gradient(145deg, #101010, #2b2b2b 48%, #eee 49%, #f8f8f8);
}

.mockup.geneva::before{
  content:"GENEVA WRIST";
  position:absolute;
  left:32px;
  top:32px;
  color:white;
  font-weight:950;
  font-size:38px;
  letter-spacing:-.08em;
}

.mockup.booby{
  background:
    radial-gradient(circle at 70% 32%, rgba(255,112,190,.9), transparent 18%),
    radial-gradient(circle at 35% 68%, rgba(140,53,255,.9), transparent 22%),
    linear-gradient(135deg, #050505, #121025 60%, #050505);
}

.mockup.booby::before{
  content:"BOOBY NIGHT";
  position:absolute;
  left:30px;
  bottom:30px;
  color:white;
  font-size:48px;
  font-weight:950;
  letter-spacing:-.08em;
}

.mockup.microwest{
  background:
    radial-gradient(circle at 68% 42%, #fff, transparent 9%),
    linear-gradient(120deg, #e8f0ff, #fff 45%, #0a0a0a 46%, #0a0a0a);
}

.mockup.microwest::before{
  content:"iPhone Repair";
  position:absolute;
  left:34px;
  top:42px;
  color:#0a0a0a;
  font-size:52px;
  line-height:.88;
  font-weight:950;
  letter-spacing:-.08em;
  max-width:280px;
}

.project-body{
  padding:30px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:30px;
}

.project-top{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
}

.project h2{
  margin:0;
  font-size:clamp(40px, 4.5vw, 82px);
  line-height:.84;
  letter-spacing:-.09em;
  max-width:620px;
}

.project:not(.large) h2{
  font-size:54px;
}

.tag-list{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.tag{
  border:1px solid rgba(0,0,0,.16);
  border-radius:999px;
  padding:8px 11px;
  font-size:12px;
  font-weight:850;
  color:#201c19;
  background:rgba(255,255,255,.36);
}

.project p{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.45;
  letter-spacing:-.04em;
  max-width:530px;
}

.project-footer{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
}

.year{
  color:var(--muted);
  font-weight:850;
  font-size:13px;
}

.arrow{
  width:58px;
  height:58px;
  border-radius:50%;
  background:#0a0a0a;
  color:white;
  display:grid;
  place-items:center;
  font-size:28px;
  transition:.3s var(--ease);
  flex:none;
}

.project:hover .arrow{
  background:var(--orange);
  transform:rotate(45deg);
}

.case-strip{
  padding:80px 58px;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:50px;
  align-items:start;
  background:#080808;
  color:white;
  position:relative;
  overflow:hidden;
}

.case-strip::before{
  content:"";
  position:absolute;
  right:-140px;
  top:-160px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,90,54,.28), transparent 62%);
}

.case-strip h2{
  margin:0;
  font-size:clamp(48px, 7vw, 108px);
  line-height:.82;
  letter-spacing:-.09em;
  position:relative;
  z-index:2;
}

.case-strip p{
  color:rgba(255,255,255,.7);
  line-height:1.5;
  max-width:680px;
  font-size:18px;
  letter-spacing:-.04em;
  position:relative;
  z-index:2;
}

.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:36px;
  position:relative;
  z-index:2;
}

.stat{
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  padding:22px;
  background:rgba(255,255,255,.04);
}

.stat b{
  display:block;
  font-size:42px;
  letter-spacing:-.08em;
  margin-bottom:8px;
}

.stat span{
  color:rgba(255,255,255,.62);
  font-size:13px;
  font-weight:750;
}

.contact{
  padding:90px 58px 48px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:50px;
  align-items:start;
}

.contact h2{
  margin:0;
  font-size:clamp(56px, 8vw, 128px);
  line-height:.84;
  letter-spacing:-.09em;
}

.contact p{
  max-width:390px;
  color:var(--muted);
  font-size:18px;
  line-height:1.4;
  letter-spacing:-.04em;
}

.cta-panel{
  border:1px solid var(--line);
  border-radius:30px;
  padding:34px;
  background:rgba(255,255,255,.45);
  display:grid;
  gap:18px;
}

.cta-link{
  min-height:86px;
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  transition:.3s var(--ease);
  font-weight:900;
  letter-spacing:-.04em;
}

.cta-link:hover{
  background:#0a0a0a;
  color:white;
  transform:translateX(8px);
}

.project.hidden{
  display:none;
}

@keyframes workBlob{
  0%{border-radius:43% 57% 62% 38% / 45% 42% 58% 55%; transform:translate3d(0,0,0) rotate(-4deg)}
  100%{border-radius:62% 38% 43% 57% / 56% 54% 46% 44%; transform:translate3d(18px,-18px,0) rotate(6deg)}
}

@media (max-width:980px){
  .hero{
    grid-template-columns:1fr;
    padding:28px 24px 54px;
    min-height:620px;
  }
  .hero-meta{
    margin-top:10px;
  }
  .hero::before{
    right:-90px;
    top:270px;
  }
  .filter-bar{
    padding:18px 24px;
    display:block;
  }
  .count{
    display:block;
    margin-top:14px;
  }
  .work-grid{
    padding:24px;
    grid-template-columns:1fr;
  }
  .project,
  .project.large{
    grid-column:1;
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    min-height:0;
  }
  .project-media,
  .project.large .project-media{
    min-height:320px;
  }
  .project:not(.large) h2{
    font-size:46px;
  }
  .project-footer{
    align-items:center;
  }
  .case-strip,
  .contact{
    padding:64px 24px;
    grid-template-columns:1fr;
  }
  .stats{
    grid-template-columns:1fr;
  }
}