/* ═══ WORK PAGE ═══ */

/* ═══ HERO ═══ */
#zxn .zx-whero{padding:clamp(10rem,18vh,14rem) 0 clamp(4rem,7vh,6rem);position:relative;overflow:hidden;background:var(--ink) !important;text-align:center}
#zxn .zx-whero-atmo{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 55% 42% at 50% 0%,rgba(31,69,68,.65),transparent 65%),radial-gradient(ellipse 40% 32% at 12% 72%,rgba(215,181,122,.07),transparent 60%)}
#zxn .zx-whero-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
#zxn .zx-whero .zx-display{margin:1.6rem 0 1.4rem !important;font-size:clamp(3rem,7.5vw,6.6rem) !important}
#zxn .zx-whero-sub{color:var(--ivdim) !important;font-size:clamp(1.05rem,1.5vw,1.2rem) !important;max-width:620px;line-height:1.75 !important}

/* ═══ FILTER BAR ═══ */
#zxn .zx-console{position:sticky;top:81px;z-index:900;background:rgba(10,20,20,.92) !important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.3rem 0}
#zxn .zx-console-in{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;justify-content:center}
#zxn .zx-pill{font-family:var(--sans) !important;font-size:.72rem !important;font-weight:700 !important;letter-spacing:.14em !important;text-transform:uppercase !important;color:var(--ivdim) !important;background:transparent !important;border:1px solid var(--line) !important;border-radius:0 !important;padding:.7rem 1.4rem !important;cursor:pointer;transition:all .3s var(--ease)}
#zxn .zx-pill:hover{border-color:var(--goldline) !important;color:var(--ivory) !important}
#zxn .zx-pill.zx-on{background:var(--gold) !important;border-color:var(--gold) !important;color:#0A1414 !important}
#zxn .zx-count{font-family:var(--serif) !important;font-style:italic !important;font-size:.92rem !important;color:var(--ivmute) !important;white-space:nowrap}
#zxn .zx-count b{color:var(--gold) !important;font-weight:500}

/* ═══ WORK GRID ═══ */
#zxn .zx-grid-sec{padding:clamp(4rem,8vw,6.5rem) 0 clamp(6rem,10vw,8rem);background:var(--ink) !important;min-height:55vh}
#zxn .zx-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
#zxn .zx-wk{
  position:relative;overflow:hidden;display:block;
  border:1px solid var(--line);aspect-ratio:16/11;background:#000 !important;
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s,opacity .45s;
}
#zxn .zx-wk:hover{border-color:var(--goldline);transform:translateY(-8px);box-shadow:0 28px 56px rgba(0,0,0,.55)}
#zxn .zx-wk.zx-hide{display:none}
#zxn .zx-wk.zx-pop{animation:zxPop .5s var(--ease)}
@keyframes zxPop{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
#zxn .zx-wk-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .9s var(--ease)}
#zxn .zx-wk:hover .zx-wk-bg{transform:scale(1.07)}
#zxn .zx-wk-logo{opacity:.2;filter:grayscale(1) brightness(1.4);width:32%;transition:all .5s;object-fit:contain;max-height:45%}
#zxn .zx-wk:hover .zx-wk-logo{opacity:.09}
#zxn .zx-wk-mono{
  font-family:var(--serif) !important;font-style:italic;font-size:clamp(4rem,8vw,7rem);
  color:rgba(243,239,228,.08);line-height:1;transition:all .5s;
}
#zxn .zx-wk:hover .zx-wk-mono{color:rgba(243,239,228,.04)}
#zxn .zx-wk-ol{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,20,20,.96) 0%,rgba(10,20,20,.35) 55%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.6rem,3.5vw,2.6rem)}
#zxn .zx-wk-meta{display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem;flex-wrap:wrap}
#zxn .zx-wk-tag{font-family:var(--sans) !important;font-size:10px !important;font-weight:700 !important;letter-spacing:.28em !important;text-transform:uppercase !important;color:var(--gold) !important}
#zxn .zx-plat{
  font-family:var(--sans) !important;font-size:9px !important;font-weight:800 !important;
  letter-spacing:.18em !important;text-transform:uppercase !important;color:var(--ivory) !important;
  border:1px solid rgba(243,239,228,.22);padding:.32rem .8rem;background:rgba(10,20,20,.5);backdrop-filter:blur(4px);
}
#zxn .zx-wk-t{font-family:var(--serif) !important;font-weight:400 !important;font-size:clamp(1.8rem,3.2vw,2.6rem) !important;letter-spacing:-.01em !important;margin-bottom:.6rem !important;color:var(--ivory) !important;line-height:1.1 !important}
#zxn .zx-wk-d{font-size:.93rem !important;color:var(--ivdim) !important;max-width:420px;line-height:1.65 !important;margin-bottom:1.1rem !important}
#zxn .zx-wk-visit{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans) !important;font-size:.72rem !important;font-weight:800 !important;
  letter-spacing:.18em !important;text-transform:uppercase !important;color:var(--gold) !important;
  transition:gap .3s var(--ease);
}
#zxn .zx-wk:hover .zx-wk-visit{gap:1rem}
#zxn .zx-wk-visit svg{width:14px;height:14px;stroke:var(--gold)}
#zxn .zx-wk-arr{position:absolute;top:1.7rem;right:1.7rem;width:50px;height:50px;border-radius:50%;background:rgba(243,239,228,.04);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);transition:all .4s cubic-bezier(.34,1.56,.64,1)}
#zxn .zx-wk-arr svg{stroke:var(--ivory);width:18px;height:18px;transition:stroke .3s}
#zxn .zx-wk:hover .zx-wk-arr{background:var(--gold);border-color:var(--gold);transform:rotate(-45deg) scale(1.1)}
#zxn .zx-wk:hover .zx-wk-arr svg{stroke:#0A1414}

/* No results */
#zxn .zx-none{display:none;text-align:center;padding:5rem 1rem;border:1px dashed var(--line)}
#zxn .zx-none.zx-show{display:block}
#zxn .zx-none-t{font-family:var(--serif) !important;font-style:italic !important;font-size:1.6rem !important;color:var(--ivory) !important}

/* ═══ STATS BAND ═══ */
#zxn .zx-stats{padding:clamp(4.5rem,8vw,6.5rem) 0;border-top:1px solid var(--line);background:linear-gradient(150deg,var(--green) 0%,#0D2120 78%) !important;position:relative;overflow:hidden}
#zxn .zx-stats-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(215,181,122,.12) 1px,transparent 1px);background-size:28px 28px;opacity:.4}
#zxn .zx-st-grid{display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:1}
#zxn .zx-st{padding:0 1.6rem;text-align:center}
#zxn .zx-st+.zx-st{border-left:1px solid rgba(243,239,228,.14)}
#zxn .zx-st-n{font-family:var(--serif) !important;font-size:clamp(2.4rem,4vw,3.6rem) !important;font-weight:400 !important;line-height:1 !important;color:var(--ivory) !important}
#zxn .zx-st-n i{font-style:italic;color:var(--gold) !important}
#zxn .zx-st-l{font-family:var(--sans) !important;font-size:10px !important;font-weight:700 !important;letter-spacing:.24em !important;text-transform:uppercase !important;color:rgba(243,239,228,.55) !important;margin-top:.8rem !important}

/* ═══ CTA ═══ */
#zxn .zx-cta{padding:clamp(6rem,11vw,9rem) 0;border-top:1px solid var(--line);position:relative;overflow:hidden;background:var(--ink) !important;text-align:center}
#zxn .zx-cta-glow{position:absolute;top:-160px;left:50%;transform:translateX(-50%);width:860px;height:430px;background:radial-gradient(ellipse,rgba(215,181,122,.13),transparent 70%);pointer-events:none}
#zxn .zx-cta-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
#zxn .zx-cta .zx-display{margin:1.6rem 0 1.4rem !important}
#zxn .zx-cta-s{color:var(--ivdim) !important;font-size:1.1rem !important;max-width:540px;margin:0 auto 2.8rem !important;line-height:1.75 !important}
#zxn .zx-cta-b{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap}

/* ═══ RESPONSIVE ═══ */
@media(max-width:860px){
  #zxn .zx-nav-links,#zxn .zx-nav-cta{display:none}
  #zxn .zx-burger{display:flex}
  #zxn .zx-grid{grid-template-columns:1fr}
  #zxn .zx-st-grid{grid-template-columns:repeat(2,1fr);gap:2.5rem 0}
  #zxn .zx-st:nth-child(3){border-left:none}
  #zxn .zx-ft-top{flex-direction:column;text-align:center}
  #zxn .zx-ft-links{justify-content:center}
  #zxn .zx-ft-btm{flex-direction:column;text-align:center}
}
@media(max-width:640px){
  #zxn .zx-st-grid{grid-template-columns:1fr;gap:2.2rem}
  #zxn .zx-st+.zx-st{border-left:none}
  #zxn .zx-cta-b{flex-direction:column;width:100%}
  #zxn .zx-btn-gold,#zxn .zx-btn-ghost{justify-content:center;width:100%}
}
@media(prefers-reduced-motion:reduce){
  #zxn *,#zxn *::before,#zxn *::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}