:root{
  --black:#0a0a09;--ink:#151513;--muted:#77756e;--line:#dedbd2;
  --paper:#f7f5ef;--gold:#c8a24a;--gold2:#ead38a;--max:1100px;
  --ease:cubic-bezier(.2,.75,.2,1);--ease-slow:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--max),calc(100% - 40px));margin:auto}

.site-topnav{
  background:var(--black);border-bottom:1px solid #222;
  position:sticky;top:0;z-index:50;
}
.site-topnav .inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;
}
.site-topnav a{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#bdb9b0;
  padding:8px 14px;border:1px solid transparent;border-radius:999px;
  transition:color .3s, border-color .3s, background .3s;
}
.site-topnav a:hover,.site-topnav a.active{
  color:var(--gold2);border-color:rgba(200,162,74,.45);background:rgba(200,162,74,.08);
}

.page-header{
  background:var(--black);color:#fff;padding:48px 0 40px;
}
.page-header .eyebrow{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.page-header h1{margin:0 0 12px;font-size:clamp(28px,4vw,48px);font-weight:600;letter-spacing:-.03em}
.page-header p{margin:0;color:#9b9991;max-width:560px}

.process-list{padding:48px 0 80px;display:flex;flex-direction:column;gap:22px}
.process-card{
  position:relative;overflow:hidden;border-radius:4px;background:#ddd;
  cursor:zoom-in;aspect-ratio:21/9;min-height:220px;
  box-shadow:0 8px 28px rgba(0,0,0,.06);
  transition:transform .5s var(--ease), box-shadow .5s;
}
.process-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.12)}
.process-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-slow), filter .5s;
  background:#1a1a18;
}
.process-card:hover img{transform:scale(1.04)}
.process-card .label{
  position:absolute;left:0;right:0;bottom:0;padding:22px 24px;
  background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;z-index:2;
}
.process-card .label span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#e0ca86}
.process-card .label h2{margin:6px 0 0;font-size:22px;font-weight:500}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .4s, visibility .4s;
}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{
  max-width:min(96vw,1400px);max-height:90vh;object-fit:contain;
  border-radius:2px;box-shadow:0 20px 60px rgba(0,0,0,.5);
  transform:scale(.96);transition:transform .45s var(--ease-slow);
}
.lightbox.open img{transform:scale(1)}
.lightbox-close{
  position:absolute;top:18px;right:22px;width:44px;height:44px;border:1px solid #555;
  background:transparent;color:#fff;font-size:28px;cursor:pointer;border-radius:8px;
  transition:border-color .3s, color .3s;
}
.lightbox-close:hover{border-color:var(--gold);color:var(--gold2)}
.lightbox-cap{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  color:#ccc;font-size:13px;letter-spacing:.08em;text-align:center;max-width:90%;
}

.site-footer{background:#050505;color:#666;padding:28px 0;font-size:11px;text-align:center;margin-top:40px}
.site-footer a{color:#999;margin:0 8px}
.site-footer a:hover{color:var(--gold2)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease-slow), transform 1s var(--ease-slow)}
.reveal.visible{opacity:1;transform:none}

@media(max-width:700px){
  .process-card{aspect-ratio:16/10;min-height:180px}
  .process-card .label h2{font-size:18px}
}