/* ============================================================
   PICCOLO STUDIOS — WORK (v3)
   Extends piccolo-v3.css — Loos / Normalidad type, brand palette.
   ============================================================ */

/* progress bar */
.prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--orange);z-index:120;transition:width .1s linear}

/* ── reveal system (base states; JS adds .is-in) ─────────── */
[data-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity .85s cubic-bezier(.65,0,.35,1),transform .85s cubic-bezier(.65,0,.35,1)}
[data-reveal].is-in{opacity:1;transform:none}
.wipe .ln{transform:translateY(112%)}
.wipe.is-in .ln{transform:none;transition:transform .95s cubic-bezier(.65,0,.35,1)}
.wipe.is-in .ln.d2{transition-delay:.09s}
.no-motion [data-reveal],
.no-motion .wipe .ln{opacity:1!important;transform:none!important;transition:none!important}

/* ── work hero (dark) ────────────────────────────────────── */
.work-hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding-top:clamp(140px,18vh,230px);padding-bottom:clamp(48px,6vw,100px)}
.work-hero::before{content:"";position:absolute;right:-14vw;top:-18vw;width:64vw;height:64vw;
  max-width:760px;max-height:760px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(87,6,143,.95),rgba(87,6,143,0) 66%)}
.work-hero::after{content:"";position:absolute;left:-8vw;bottom:-14vw;width:38vw;height:38vw;
  max-width:460px;max-height:460px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(39,194,255,.26),rgba(39,194,255,0) 64%)}
.work-hero-in{position:relative;z-index:2}
.work-klabel{display:flex;align-items:center;gap:16px;margin-bottom:clamp(26px,3.4vw,46px)}
.work-klabel .kicker{color:rgba(255,255,255,.8)}
.wk-mark{display:flex;align-items:flex-start;gap:5px;flex:none}
.wk-mark .eye{width:22px;height:22px;border-radius:50%;background:var(--yellow);position:relative}
.wk-mark .eye::after{content:"";position:absolute;left:50%;top:50%;width:36%;height:36%;border-radius:50%;
  background:var(--ink);transform:translate(-50%,-50%)}
.wk-mark .nose{width:9px;height:30px;background:var(--yellow);border-radius:0 0 0 7px}
.work-hero .h-hero{margin-bottom:0}
.work-hero-row{display:grid;grid-template-columns:1.5fr .9fr;gap:clamp(28px,4vw,80px);
  align-items:end;margin-top:clamp(28px,3.4vw,52px)}
.work-hero .lead{color:rgba(255,255,255,.82)}
.work-idx{display:flex;flex-direction:column;gap:6px;align-items:flex-end;text-align:right}
.work-idx .big{font-family:var(--cond);font-weight:700;font-size:clamp(64px,9vw,150px);
  line-height:.82;letter-spacing:-.01em}
.work-idx .big .u{color:var(--orange)}
.work-idx .cap{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.55)}
@media(max-width:820px){.work-hero-row{grid-template-columns:1fr}
  .work-idx{align-items:flex-start;text-align:left}}

/* ── filter / control bar (sticky) ───────────────────────── */
.work-bar{position:sticky;top:0;z-index:80;background:rgba(251,250,248,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(16,16,20,.1)}
.work-bar-in{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-block:14px;flex-wrap:wrap}
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid rgba(16,16,20,.2);background:transparent;color:#4c4a52;border-radius:999px;
  padding:.72em 1.15em;display:inline-flex;align-items:center;gap:.6em;cursor:pointer;
  transition:color .28s,border-color .28s,background .28s,transform .28s cubic-bezier(.65,0,.35,1)}
.chip .n{font-size:10px;opacity:.7}
.chip:hover{color:var(--ink);border-color:var(--purple);transform:translateY(-2px)}
.chip.on{background:var(--purple);border-color:var(--purple);color:#fff}
.chip.on .n{color:var(--yellow);opacity:1}
.work-meta{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);display:flex;align-items:center;gap:10px;white-space:nowrap}
.work-meta b{color:var(--ink);font-weight:700}
.work-meta .dotsep{width:5px;height:5px;border-radius:50%;background:var(--orange)}
@media(max-width:680px){.work-meta{display:none}}

/* ── grid section ────────────────────────────────────────── */
.work-grid-sec{padding-top:clamp(34px,4.4vw,64px);padding-bottom:clamp(60px,7vw,110px)}

/* ── card (shared) ───────────────────────────────────────── */
.pf-card{position:relative;display:flex;flex-direction:column;gap:16px;cursor:pointer}
.pf-card.no-click{cursor:default}
.pf-card.no-click:hover .pf-media img,.pf-card.no-click:hover .pf-media video{transform:none}
.pf-media{position:relative;border-radius:26px;overflow:hidden;background:var(--panel);aspect-ratio:4/3}
.pf-media img,.pf-media video{width:100%;height:100%;object-fit:cover;
  transition:transform .85s cubic-bezier(.3,0,.2,1)}
.pf-card:hover .pf-media img,.pf-card:hover .pf-media video{transform:scale(1.05)}
.pf-media image-slot{position:absolute;inset:0;width:100%;height:100%}
.pf-badges{position:absolute;right:16px;left:auto;top:16px;z-index:4;display:flex;gap:6px;pointer-events:none}
.pf-badges.badge-left{left:16px;right:auto}
.pf-media.media-3-2{aspect-ratio:3/2!important}
/* a solo card gets stretched to fill the row (see .row-solo below); at full
   row width that makes a 3/2 image tower well past the fold. Shrink the
   card itself instead of reshaping the frame, so it keeps the image's own
   3/2 ratio (no letterboxing/pillarboxing) just at a smaller footprint */
.pf-editorial .pf-card.row-solo:not(.s-feat){max-width:820px;margin-inline:0}
.pf-media img.img-glow{object-fit:contain;background:#e6dacd}
.pf-media img.img-contain{object-fit:contain;background:var(--panel);padding:clamp(14px,2.2vw,28px);box-sizing:border-box}
.lb-media img.img-glow{object-fit:contain!important;background:#e6dacd}
.lb-media img.img-contain{object-fit:contain!important;background:var(--panel);padding:clamp(28px,4vw,56px);box-sizing:border-box}

.pf-vid-overlay{position:absolute;top:0;left:0;width:0;height:0;object-fit:contain;background:#ebded1;z-index:2;pointer-events:none}
.delay-1{transition-delay:.1s}
.pf-tag{font-family:var(--display);font-weight:700;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;background:rgba(255,229,0,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);color:var(--ink)}
.pf-tag.acc{background:rgba(87,6,143,.55);color:#fff}
.pf-play{position:absolute;right:16px;bottom:16px;z-index:4;width:52px;height:52px;border-radius:50%;
  background:var(--purple);display:grid;place-items:center;pointer-events:none;
  transform:scale(.92);transition:transform .4s cubic-bezier(.65,0,.35,1)}
.pf-play svg{width:18px;height:18px;margin-left:3px;fill:var(--yellow)}
.pf-card:hover .pf-play{transform:scale(1.06)}
.pf-meta{display:flex;flex-direction:column;gap:9px}
.pf-eyebrow{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.pf-eyebrow .client{color:var(--purple)}
.pf-eyebrow .sep,.lb-eyebrow .sep{width:16px;height:2px;background:var(--orange)}
.pf-title{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:-.005em;line-height:1;font-size:clamp(21px,1.8vw,32px);
  overflow-wrap:break-word;hyphens:auto}
.pf-title.is-compact{font-size:clamp(17px,1.4vw,24px)}
.pf-one{font-size:clamp(14px,1.05vw,16px);line-height:1.55;color:#4c4a52;max-width:46ch}
.pf-open{margin-top:2px;display:inline-flex;align-items:center;gap:8px;font-family:var(--display);
  font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  opacity:.85;transition:.38s cubic-bezier(.65,0,.35,1)}
.pf-open svg{width:14px;height:14px}
.pf-card:hover .pf-open{opacity:1;color:var(--purple);transform:translateX(3px)}

/* ── layout A — editorial mosaic ─────────────────────────── */
.pf-editorial{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.4vw,40px) clamp(18px,1.8vw,30px);align-items:start}
.pf-editorial .pf-card{grid-column:span 1}
.pf-editorial .pf-card.s-lg{grid-column:span 1}
.pf-editorial .pf-card.s-feat{grid-column:span 3}
.pf-editorial .pf-card.row-solo{grid-column:1 / -1}
.pf-editorial .pf-card.s-feat .pf-media{aspect-ratio:16/7;min-height:clamp(280px,26vw,440px)}
/* editorial rhythm: each row of three pairs a portrait, a square and a landscape */
.pf-editorial .pf-card:not(.s-feat) .pf-media{aspect-ratio:var(--ar,4/5)}
.pf-editorial .pf-card:not(.s-feat):nth-of-type(3n+1){--ar:4/5}
.pf-editorial .pf-card:not(.s-feat):nth-of-type(3n+2){--ar:1/1}
.pf-editorial .pf-card:not(.s-feat):nth-of-type(3n){--ar:3/2}
.pf-editorial .pf-card.row-solo:not(.s-feat):not(#x){--ar:16/7}
.pf-editorial .pf-card.s-feat .pf-title{font-size:clamp(30px,3.4vw,58px)}
.pf-editorial .pf-card.s-feat .pf-one{font-size:clamp(15px,1.2vw,19px);max-width:52ch}
@media(max-width:1080px){
  .pf-editorial{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-editorial .pf-card.s-feat{grid-column:span 2}
  .pf-editorial .pf-card.row-solo{grid-column:1 / -1}
  .pf-editorial .pf-card.row-solo:not(.s-feat):not(#x){--ar:16/7}
  /* 2-col: alternate portrait / landscape so each row reads as a deliberate pair */
  .pf-editorial .pf-card:not(.s-feat):nth-of-type(2n+1){--ar:4/5;margin-top:0}
  .pf-editorial .pf-card:not(.s-feat):nth-of-type(2n){--ar:3/2;margin-top:0}
}
@media(max-width:600px){.pf-editorial{grid-template-columns:minmax(0,1fr)}
  .pf-editorial .pf-card,.pf-editorial .pf-card.s-lg,.pf-editorial .pf-card.s-feat{grid-column:span 1;min-width:0}}

/* ── layout B — uniform grid ─────────────────────────────── */
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:clamp(24px,2.6vw,44px) clamp(18px,1.8vw,30px)}
@media(max-width:520px){.pf-grid{grid-template-columns:1fr}}

/* ── layout C — wall (masonry, overlay text) ─────────────── */
.pf-wall{column-count:4;column-gap:clamp(16px,1.8vw,26px)}
@media(max-width:1200px){.pf-wall{column-count:3}}
@media(max-width:820px){.pf-wall{column-count:2}}
@media(max-width:520px){.pf-wall{column-count:1}}
.pf-wall .pf-card{break-inside:avoid;margin-bottom:clamp(16px,1.8vw,26px);display:block;gap:0}
.pf-wall .pf-media{aspect-ratio:var(--ar,4/3)}
.pf-wall .pf-card:nth-child(4n+1) .pf-media{--ar:3/4}
.pf-wall .pf-card:nth-child(4n+2) .pf-media{--ar:1/1}
.pf-wall .pf-card:nth-child(4n+3) .pf-media{--ar:4/3}
.pf-wall .pf-card:nth-child(4n)   .pf-media{--ar:4/5}
.pf-wall .pf-meta{position:absolute;inset:0;justify-content:flex-end;gap:7px;z-index:5;
  background:linear-gradient(transparent 42%,rgba(16,16,20,.85));color:#fff;
  opacity:0;transition:opacity .4s cubic-bezier(.65,0,.35,1);padding:clamp(18px,1.8vw,26px);border-radius:26px}
.pf-wall .pf-card:hover .pf-meta{opacity:1}
.pf-wall .pf-eyebrow{color:rgba(255,255,255,.7)}
.pf-wall .pf-eyebrow .client{color:var(--yellow)}
.pf-wall .pf-title{color:#fff}
.pf-wall .pf-one,.pf-wall .pf-open{display:none}

/* ── work marquee ────────────────────────────────────────── */
.work-marq{background:var(--purple);color:#fff;padding:clamp(10px,1.4vw,20px) 0;overflow:hidden}
.marq-32{--marq-s:32s}
.work-marq .marq-t span::after{background:var(--yellow)}

/* ── work CTA ────────────────────────────────────────────── */
.work-cta{background:var(--panel);border-top:1px solid rgba(16,16,20,.1);
  padding-block:clamp(72px,9vw,140px);text-align:center}
.work-cta .kicker{color:var(--orange);margin-bottom:18px}
.work-cta .display{font-size:clamp(40px,7vw,120px);margin-bottom:clamp(28px,3.4vw,48px)}
.work-cta .hero-cta{justify-content:center}

/* ── lightbox ────────────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(14px,3vw,48px);
  background:rgba(16,16,20,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .35s cubic-bezier(.65,0,.35,1)}
.lb.open{opacity:1;pointer-events:auto}
.lb-card{width:min(1180px,100%);max-height:92vh;overflow:hidden;background:var(--paper);
  border-radius:30px;display:grid;grid-template-columns:1.2fr .85fr;
  transform:translateY(20px) scale(.985);transition:transform .42s cubic-bezier(.65,0,.35,1);
  box-shadow:0 40px 100px -30px rgba(16,16,20,.6)}
.lb.open .lb-card{transform:none}
.lb-media{position:relative;background:var(--panel);min-height:clamp(280px,52vh,640px);overflow:hidden}
.lb-media img,.lb-media video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.lb-media image-slot{position:absolute;inset:0;width:100%;height:100%}
.lb-count{position:absolute;bottom:18px;left:20px;z-index:6;font-family:var(--display);font-weight:700;
  font-size:12px;letter-spacing:.14em;color:#fff;mix-blend-mode:difference}
.lb-side{padding:clamp(26px,2.6vw,46px);display:flex;flex-direction:column;overflow-y:auto}
.lb-eyebrow{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:20px}
.lb-eyebrow .client{color:var(--purple)}
.lb-eyebrow .tag{margin-left:auto;background:var(--yellow);color:var(--ink);
  padding:6px 12px;border-radius:999px;font-size:10px;letter-spacing:.14em}
.lb-title{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,3.4vw,58px);line-height:.94;letter-spacing:-.01em;margin-bottom:18px;
  overflow-wrap:break-word;hyphens:auto}
.lb-title.is-compact{font-size:clamp(22px,2.4vw,40px);line-height:1.04}
.lb-desc{font-size:clamp(15px,1.2vw,19px);line-height:1.6;color:#4c4a52;margin-bottom:28px;max-width:48ch}
.lb-specs{display:flex;flex-direction:column;border-top:1px solid rgba(16,16,20,.14);margin-top:auto}
.lb-spec{display:grid;grid-template-columns:8em 1fr;gap:16px;padding:14px 0;
  border-bottom:1px solid rgba(16,16,20,.14)}
.lb-spec dt{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey)}
.lb-spec dd{font-size:15px;color:var(--ink);line-height:1.5}
.lb-result{display:flex;gap:14px;align-items:flex-start;margin-top:22px;padding-top:22px;
  border-top:2px solid var(--ink)}
.lb-result .mk{color:var(--orange);font-family:var(--display);font-weight:700;font-size:24px;line-height:1;flex:none}
.lb-result p{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(16px,1.3vw,22px);line-height:1.05;letter-spacing:-.005em}
.lb-x{position:absolute;top:16px;right:16px;z-index:6;width:46px;height:46px;border-radius:50%;
  border:2px solid rgba(255,255,255,.55);background:rgba(16,16,20,.35);color:#fff;
  display:grid;place-items:center;cursor:pointer;transition:.3s cubic-bezier(.65,0,.35,1)}
.lb-x:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.lb-x svg{width:16px;height:16px;stroke:currentColor}
.lb-nav{position:absolute;bottom:16px;right:16px;z-index:6;display:flex;gap:9px}
.lb-nav button{width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.55);
  background:rgba(16,16,20,.35);color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:.3s cubic-bezier(.65,0,.35,1)}
.lb-nav button:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.lb-nav svg{width:17px;height:17px;stroke:currentColor}
@media(max-width:820px){
  .lb-card{grid-template-columns:1fr;max-height:94vh;overflow-y:auto}
  .lb-media{min-height:clamp(220px,40vh,360px)}
  .lb-nav{position:static;margin-top:20px;justify-content:flex-end}
  .lb-count{display:none}
}

/* ── branded poster placeholder (projects without supplied media) ── */
.pf-poster{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:14px;padding:clamp(22px,2.4vw,34px);overflow:hidden;
  background:linear-gradient(150deg,var(--purple),var(--ink) 82%)}
.pf-poster::after{content:"";position:absolute;right:-22%;top:-30%;width:70%;height:80%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,229,0,.16),rgba(255,229,0,0) 68%);pointer-events:none}
.pf-poster[data-cat="photo"]{background:linear-gradient(150deg,#3b0764,var(--ink) 82%)}
.pf-poster[data-cat="photo"]::after{background:radial-gradient(circle,rgba(39,194,255,.2),rgba(39,194,255,0) 68%)}
.pf-poster[data-cat="worlds"]{background:linear-gradient(150deg,#1d1440,var(--ink) 82%)}
.pf-poster[data-cat="worlds"]::after{background:radial-gradient(circle,rgba(255,120,0,.2),rgba(255,120,0,0) 68%)}
.pf-poster[data-cat="hybrid"]{background:linear-gradient(150deg,#0c2b3a,var(--ink) 82%)}
.pf-poster-mark{display:flex;align-items:flex-start;gap:6px;position:relative;z-index:2;margin-bottom:auto}
.pf-poster-mark .e{width:26px;height:26px;border-radius:50%;background:var(--yellow);position:relative}
.pf-poster-mark .e::after{content:"";position:absolute;left:50%;top:50%;width:36%;height:36%;border-radius:50%;
  background:var(--ink);transform:translate(-50%,-50%)}
.pf-poster-mark .n{width:11px;height:34px;background:var(--yellow);border-radius:0 0 0 8px}
.pf-poster-cat{position:relative;z-index:2;font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.pf-poster-client{position:relative;z-index:2;font-family:var(--cond);font-weight:700;line-height:.86;
  letter-spacing:-.01em;text-transform:uppercase;color:#fff;font-size:clamp(38px,4.4vw,72px)}
.s-feat .pf-poster-client{font-size:clamp(52px,6vw,104px)}
.pf-card:hover .pf-poster::after{transform:scale(1.15);transition:transform .85s cubic-bezier(.3,0,.2,1)}
.lb-media .pf-poster{position:absolute}