/* ---------- work page ---------- */

/* hero */
.wk-hero{position:relative;z-index:2;padding:calc(var(--nav-h) + clamp(50px,10vh,110px)) clamp(18px,5vw,90px) clamp(30px,5vh,50px)}
.wk-hero__in{max-width:1300px;margin:0 auto}
.wk-hero h1{font-family:var(--heading);font-weight:300;font-size:clamp(46px,8.4vw,120px);line-height:.96;letter-spacing:-.012em;margin-top:6px}
.wk-hero h1 em{font-style:italic;color:var(--accent-2)}
.wk-hero .lede{max-width:54ch;margin-top:clamp(20px,3vh,30px);color:var(--concrete-dim);font-size:clamp(15px,1.5vw,19px);line-height:1.66}
.wk-hero__meta{margin-top:28px;display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--concrete-dim);flex-wrap:wrap}
.wk-hero__meta i{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block}

/* gallery + tools */
.wk-gallery{position:relative;z-index:2;padding:clamp(8px,2vh,18px) clamp(18px,5vw,90px) clamp(30px,5vh,50px)}
.wk-filters{max-width:1300px;margin:0 auto clamp(22px,3.4vh,34px);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filter-btn{font-family:var(--heading);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--warm-white-dim);
  background:transparent;border:1px solid rgba(244,244,244,.16);padding:11px 20px;border-radius:40px;cursor:pointer;transition:.35s var(--ease)}
.filter-btn:hover{border-color:rgba(244,244,244,.42);color:var(--warm-white)}
.filter-btn.is-active{background:var(--accent);border-color:var(--accent);color:#141414}
.wk-count{margin-left:auto;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--stone);white-space:nowrap}
@media(max-width:600px){
  .wk-filters{gap:8px}
  .filter-btn{padding:9px 15px;letter-spacing:.14em}
  .wk-count{margin-left:0;order:9;flex-basis:100%;margin-top:2px}   /* count drops to its own line, no collision */
}

/* masonry — CSS multi-column; each cell's --ar sets its crop for varied heights */
.grid{max-width:1400px;margin:0 auto;column-count:3;column-gap:14px}
.cell{position:relative;overflow:hidden;border-radius:12px;background:var(--charcoal);cursor:pointer;display:block;width:100%;margin:0 0 14px;break-inside:avoid;-webkit-column-break-inside:avoid}
.cell img{width:100%;height:auto;display:block;aspect-ratio:var(--ar,4 / 5);object-fit:cover;transition:transform 1.3s var(--ease)}
.cell:hover img{transform:scale(1.05);will-change:transform}
.cell::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.62),transparent 46%);opacity:0;transition:.5s}
.cell:hover::after{opacity:1}
.cell .tag{position:absolute;left:15px;bottom:13px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--warm-white);
  opacity:0;transform:translateY(8px);transition:.5s var(--ease);z-index:2}
.cell:hover .tag{opacity:1;transform:none}
.cell .zoom{position:absolute;top:13px;right:14px;width:34px;height:34px;border-radius:50%;z-index:2;
  border:1px solid rgba(244,244,244,.4);background:rgba(13,11,10,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.85);transition:.45s var(--ease);pointer-events:none}
.cell .zoom svg{width:17px;height:17px;color:var(--warm-white);display:block}
.cell:hover .zoom{opacity:1;transform:none}
.cell.is-hidden{display:none}
.wk-load-more{display:flex;margin:42px auto 0}.wk-load-more[hidden]{display:none}
@media(max-width:860px){.grid{column-count:2}}
@media(max-width:520px){
  .grid{column-count:1;column-gap:12px}
  .cell{margin-bottom:12px}
  .cell .tag,.cell .zoom{opacity:1;transform:none}
}

/* lightbox */
.lb{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:clamp(12px,4vw,60px);
  background:rgba(6,4,3,.93);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s var(--ease)}
.lb.open{opacity:1;visibility:visible}
.lb__stage{position:relative;max-width:min(1080px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:15px}
.lb__img{max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain;border-radius:10px;
  box-shadow:0 44px 130px -34px rgba(0,0,0,.85);transform:scale(.955);opacity:0;transition:transform .55s var(--ease),opacity .55s var(--ease)}
.lb.open .lb__img{transform:none;opacity:1}
.lb__cap{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--concrete-dim)}
.lb__cap .c-tag{color:var(--accent-2)}
.lb__close{position:absolute;top:clamp(12px,2.4vw,26px);right:clamp(12px,2.4vw,26px);z-index:3;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(244,244,244,.22);background:rgba(20,16,12,.42);
  color:var(--warm-white);font-size:20px;line-height:1;cursor:pointer;transition:.35s var(--ease)}
.lb__close:hover{background:var(--accent);border-color:var(--accent);color:#141414}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(244,244,244,.2);background:rgba(20,16,12,.42);color:var(--warm-white);font-family:var(--heading);font-size:26px;line-height:1;
  cursor:pointer;transition:.35s var(--ease);display:flex;align-items:center;justify-content:center}
.lb__nav:hover{background:var(--accent);border-color:var(--accent);color:#141414}
.lb__prev{left:clamp(8px,2.5vw,30px)}
.lb__next{right:clamp(8px,2.5vw,30px)}
@media(max-width:600px){.lb{padding:12px}.lb__nav{width:42px;height:42px;font-size:22px}.lb__prev{left:6px}.lb__next{right:6px}.lb__img{max-height:74vh}.lb__close{width:42px;height:42px}}

/* cta */
.wk-cta{position:relative;z-index:2;text-align:center;overflow:hidden;border-top:1px solid rgba(244,244,244,.06);
  padding:clamp(80px,13vh,150px) clamp(18px,5vw,90px) clamp(74px,11vh,124px)}
.wk-cta::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(62% 84% at 50% 26%,var(--accent-soft),transparent 68%)}
.wk-cta__in{position:relative;z-index:1;max-width:900px;margin:0 auto}
.wk-cta .eyebrow{justify-content:center}
.wk-cta h2{font-family:var(--heading);font-weight:300;font-size:clamp(42px,7vw,94px);line-height:1.02;margin-top:6px}
.wk-cta h2 em{font-style:italic;color:var(--accent-2)}
.wk-cta p{max-width:48ch;margin:18px auto 0;color:var(--warm-white-dim);font-size:clamp(14px,1.4vw,18px)}
.wk-cta__btns{margin-top:clamp(28px,4vh,38px);display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){.cell img{transition:none}.lb__img{transition:opacity .3s}}