/* ── work.css — shared project page styles ─────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#050505;--div:rgba(255,255,255,.07);
  --g3:rgba(255,255,255,.3);--g5:rgba(255,255,255,.52);--g7:rgba(255,255,255,.72);
  --cg:linear-gradient(110deg,#e0e0e0 0%,#fff 30%,#b0b0b0 52%,#fff 70%,#999 100%);
  --col:52px;
}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:#fff;font-family:'Barlow',sans-serif;overflow-x:hidden;cursor:none;}
::selection{background:#fff;color:#000;}
::-webkit-scrollbar{width:2px;}::-webkit-scrollbar-track{background:#000;}::-webkit-scrollbar-thumb{background:#1a1a1a;}

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

#cr{position:fixed;z-index:9999;pointer-events:none;width:34px;height:34px;
  border:1px solid rgba(255,255,255,.4);border-radius:50%;
  transform:translate(-50%,-50%);left:-200px;top:-200px;transition:width .18s,height .18s;}
#cd{position:fixed;z-index:10000;pointer-events:none;width:4px;height:4px;
  background:#fff;border-radius:50%;transform:translate(-50%,-50%);left:-200px;top:-200px;}

/* NAV */
.work-nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:64px;
  padding:0 var(--col);display:flex;align-items:center;justify-content:space-between;
  background:rgba(5,5,5,.88);backdrop-filter:blur(20px);border-bottom:1px solid var(--div);}
.nav-back{display:flex;align-items:center;gap:8px;color:var(--g3);text-decoration:none;
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  transition:color .15s;cursor:none;}
.nav-back:hover{color:#fff;}
.nav-back svg{width:14px;height:14px;stroke:currentColor;}
.nav-brand-sm{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:800;
  text-transform:uppercase;letter-spacing:.02em;color:#fff;text-decoration:none;}
.nav-cta-sm{padding:8px 18px;background:#fff;color:#000;border-radius:100px;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;cursor:none;transition:transform .15s;}
.nav-cta-sm:hover{transform:scale(1.06);}
@media(max-width:680px){.work-nav{padding:0 20px;}.nav-cta-sm{display:none;}}

/* HERO */
.w{max-width:1360px;margin:0 auto;}
.project-hero{display:grid;grid-template-columns:1fr 360px;gap:60px;
  align-items:end;padding:120px var(--col) 64px;position:relative;z-index:1;}
.project-eyebrow{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.18em;
  color:var(--g3);text-transform:uppercase;margin-bottom:20px;}
.project-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:clamp(56px,8.5vw,116px);line-height:.88;
  letter-spacing:-.03em;text-transform:uppercase;margin-bottom:28px;}
.project-title .chrome{background:var(--cg);background-size:220% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:csh 6s linear infinite;}
@keyframes csh{to{background-position:220% center;}}
.project-tagline{font-size:16px;line-height:1.7;color:var(--g5);max-width:520px;}
.project-meta-block{border:1px solid var(--div);border-radius:12px;padding:28px;
  background:rgba(255,255,255,.02);}
.project-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.meta-label{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;
  color:var(--g3);text-transform:uppercase;margin-bottom:4px;}
.meta-val{font-size:14px;font-weight:600;}
@media(max-width:880px){.project-hero{grid-template-columns:1fr;gap:32px;padding:100px 20px 48px;}}

/* FULL WIDTH IMAGE */
.full-img{display:block;width:100%;height:72vh;object-fit:cover;object-position:top;
  border-top:1px solid var(--div);border-bottom:1px solid var(--div);}
.full-img-caption{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;
  color:rgba(255,255,255,.2);text-transform:uppercase;
  padding:14px var(--col);border-bottom:1px solid var(--div);}

/* SECTION */
.section{padding:88px var(--col);max-width:1360px;margin:0 auto;}
.sl{display:flex;align-items:center;gap:12px;margin-bottom:44px;}
.sl::after{content:'';flex:1;height:1px;background:var(--div);}
.s-lbl{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.18em;
  color:var(--g3);text-transform:uppercase;white-space:nowrap;}
.div{border:none;border-top:1px solid var(--div);margin:0;}
.challenge-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.section-big-h{font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:clamp(42px,5.8vw,84px);letter-spacing:-.025em;text-transform:uppercase;line-height:.9;}
.body-text p{font-size:16px;line-height:1.78;color:var(--g5);margin-bottom:16px;}
.body-text em{color:#fff;font-style:normal;font-weight:600;}
.body-text strong{color:#fff;font-weight:600;}
@media(max-width:860px){.challenge-grid{grid-template-columns:1fr;gap:44px;}}

/* DELIVERABLES */
.deliverables{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  border:1px solid var(--div);border-radius:2px;overflow:hidden;}
.del-item{padding:36px 32px;border-right:1px solid var(--div);border-bottom:1px solid var(--div);
  background:#060606;transition:background .2s;}
.del-item:nth-child(even){background:#080808;}
.del-item:hover{background:#0e0e0e;}
.del-title{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800;
  text-transform:uppercase;letter-spacing:-.01em;margin:12px 0 10px;}
.del-desc{font-size:14px;line-height:1.68;color:var(--g5);}
@media(max-width:720px){.deliverables{grid-template-columns:1fr;}}

/* RESULTS */
.results-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  border:1px solid var(--div);border-radius:2px;overflow:hidden;}
.result-card{padding:40px 28px;border-right:1px solid var(--div);background:#060606;}
.result-card:last-child{border-right:none;}
.result-val{font-family:'Barlow Condensed',sans-serif;font-size:52px;font-weight:800;
  letter-spacing:-.04em;line-height:1;background:var(--cg);background-size:220% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:csh 6s linear infinite;}
.result-lbl{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;
  color:var(--g3);text-transform:uppercase;margin-top:8px;}
@media(max-width:720px){.results-row{grid-template-columns:1fr 1fr;}.result-card{border-right:none;border-bottom:1px solid var(--div);}.result-card:nth-child(odd){border-right:1px solid var(--div);}}

/* QUOTE */
.project-quote{padding:64px 0;max-width:800px;}
.quote-text{font-family:'Barlow Condensed',sans-serif;font-style:italic;
  font-size:clamp(26px,3.5vw,46px);font-weight:700;letter-spacing:-.02em;
  line-height:1.2;color:var(--g7);}

/* NEXT PROJECT */
.next-project{border-top:1px solid var(--div);}
.next-project a{display:flex;align-items:center;justify-content:space-between;
  padding:52px var(--col);text-decoration:none;color:inherit;cursor:none;
  transition:background .18s;}
.next-project a:hover{background:rgba(255,255,255,.02);}
.next-lbl{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.18em;
  color:var(--g3);text-transform:uppercase;margin-bottom:10px;}
.next-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(36px,5.5vw,72px);
  font-weight:800;letter-spacing:-.03em;text-transform:uppercase;line-height:.9;}
.next-arrow{font-size:48px;color:rgba(255,255,255,.15);
  transition:color .2s,transform .2s;}
.next-project a:hover .next-arrow{color:#fff;transform:translate(5px,-5px);}
@media(max-width:680px){.next-project a{padding:40px 20px;}}

/* FOOTER */
.work-footer{border-top:1px solid var(--div);padding:20px var(--col);
  display:flex;justify-content:space-between;align-items:center;}
.work-footer p{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;
  color:rgba(255,255,255,.16);text-transform:uppercase;}
.work-footer a{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.08em;
  color:rgba(255,255,255,.18);text-decoration:none;transition:color .15s;}
.work-footer a:hover{color:#fff;}
@media(max-width:640px){.work-footer{flex-direction:column;gap:10px;padding:16px 20px;}}

/* SECTION PADDING MOBILE */
@media(max-width:880px){.section{padding:64px 20px;}.full-img-caption{padding:12px 20px;}}

/* SCROLL REVEAL */
.sr{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease;}
.sr.d1{transition-delay:.09s;}.sr.d2{transition-delay:.18s;}.sr.d3{transition-delay:.26s;}
.sr.vis{opacity:1;transform:translateY(0);}

/* Feature Showcase & Browser Mockup */
.feature-showcase {
  display: flex;
  flex-direction: column-reverse; /* Text first on mobile */
  gap: 40px;
  margin-bottom: 120px;
  align-items: center;
}
@media (min-width: 768px) {
  .feature-showcase {
    flex-direction: row;
    align-items: center;
  }
  .feature-showcase:nth-child(even) {
    flex-direction: row-reverse;
  }
}
.browser-mockup {
  flex: 1.6;
  width: 100%;
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 40px 80px rgba(0,0,0,0.8);
}
.browser-header {
  height: 40px;
  background: #161616;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.dot.r { background: #ff5f56; }
.dot.y { background: #ffbd2e; }
.dot.g { background: #27c93f; }
.mockup-img {
  width: 100%;
  display: block;
}
.feature-text {
  flex: 1;
  padding: 0 20px;
}
.feature-text h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 42px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  color: #fff;
  line-height: 1.1;
}
.feature-text p {
  font-family: 'Barlow', sans-serif;
  color: var(--g5);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
}
.feature-text strong {
  color: #fff;
  font-weight: 600;
}


@media (hover: none) and (pointer: coarse) { body, a, .nav-back, .nav-cta-sm { cursor: auto !important; } #cr, #cd { display: none !important; } }