/*
 * Our Work grid ([pb_work]) and reel ([pb_work_reel]).
 *
 * Structure only, coloured through custom properties so any site can restyle it from its
 * own CSS without fighting specificity:
 *   --pbw-text, --pbw-muted, --pbw-line, --pbw-card, --pbw-accent, --pbw-accent-ink,
 *   --pbw-radius, --pbw-gap, --pbw-head-font
 */
.pbw{--_tx:var(--pbw-text,inherit);--_mu:var(--pbw-muted,#8a8178);--_ln:var(--pbw-line,rgba(127,127,127,.3));
 --_cd:var(--pbw-card,rgba(127,127,127,.12));--_ac:var(--pbw-accent,#ff7a2f);--_ai:var(--pbw-accent-ink,#1b0d04);
 --_r:var(--pbw-radius,16px);--_g:var(--pbw-gap,28px)}

.pbw-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 36px}
.pbw-filters button{font:inherit;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;min-height:44px;padding:0 20px;
 border-radius:999px;border:1.5px solid var(--_ln);background:transparent;color:var(--_tx);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.pbw-filters button:hover,.pbw-filters button.is-on{background:var(--_tx);border-color:var(--_tx);color:var(--pbw-on-text,#0d0b0a)}
.pbw-filters button:focus-visible{outline:2px solid var(--_ac);outline-offset:2px}

.pbw-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--_g)}
.pbw-card{grid-column:span 4;position:relative;display:flex;flex-direction:column;text-decoration:none!important;color:var(--_tx)!important;min-width:0}
.pbw--feature .pbw-grid:not(.is-filtered) .pbw-card:nth-child(7n+1){grid-column:span 8}
.pbw--feature .pbw-grid:not(.is-filtered) .pbw-card:nth-child(7n+6),
.pbw--feature .pbw-grid:not(.is-filtered) .pbw-card:nth-child(7n+7){grid-column:span 6}
.pbw--even .pbw-card{grid-column:span 6}
.pbw-card[hidden]{display:none}

.pbw-card__media{position:relative;display:block;border-radius:var(--_r);overflow:hidden;aspect-ratio:16/11;background:var(--_cd);isolation:isolate}
.pbw--feature .pbw-grid:not(.is-filtered) .pbw-card:nth-child(7n+1) .pbw-card__media{aspect-ratio:16/9.2}
.pbw-card__shot{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover;object-position:50% 0;
 transition:object-position 8s cubic-bezier(.35,0,.2,1)}
.pbw-card__phone{position:absolute;right:16px;bottom:-45%;width:20%;aspect-ratio:9/19;border-radius:16px;border:4px solid #0a0807;overflow:hidden;
 box-shadow:0 20px 40px rgba(0,0,0,.45);transition:bottom .6s cubic-bezier(.2,.8,.2,1);z-index:1}
.pbw-card__phone-img{width:100%!important;height:100%!important;object-fit:cover;object-position:50% 0;display:block}
.pbw-card__go{position:absolute;top:16px;right:16px;width:50px;height:50px;border-radius:50%;background:var(--_ac);color:var(--_ai);display:grid;place-items:center;
 font-size:22px;font-weight:700;opacity:0;transform:scale(.6) rotate(-45deg);transition:.35s;z-index:2}
.pbw-card__label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:18px}
.pbw-card__name{font-family:var(--pbw-head-font,inherit);font-weight:800;font-size:clamp(26px,2.6vw,40px);line-height:1;text-transform:uppercase}
.pbw-card__where{font-size:13px;color:var(--_mu);text-align:right}
.pbw-card__blurb{margin-top:8px;font-size:15px;color:var(--_mu)}
.pbw-card__did{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pbw-card__did span{font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--_cd)}

@media (hover:hover){
 .pbw-card:hover .pbw-card__shot{object-position:50% 100%}
 .pbw-card:hover .pbw-card__phone{bottom:16px}
 .pbw-card:hover .pbw-card__go{opacity:1;transform:none}
}
.pbw-card:focus-visible{outline:2px solid var(--_ac);outline-offset:6px;border-radius:var(--_r)}
@media (hover:none){.pbw-card__phone{bottom:14px;width:22%}}

@media (max-width:991px){
 .pbw-card,.pbw--feature .pbw-grid .pbw-card:nth-child(n){grid-column:span 6}
}
@media (max-width:640px){
 .pbw-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-right:-20px}
 .pbw-filters button{flex:none}
 .pbw-card,.pbw--feature .pbw-grid .pbw-card:nth-child(n){grid-column:1/-1}
 .pbw--feature .pbw-grid .pbw-card:nth-child(n) .pbw-card__media{aspect-ratio:16/11}
}

/* reel: three tilted columns of full-page shots drifting past each other */
.pbw-reel{height:760px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;transform:rotate(-6deg) scale(1.08);
 -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);pointer-events:none}
.pbw-reel__col{overflow:hidden}
.pbw-reel__track{display:flex;flex-direction:column;gap:22px;animation:pbw-up 60s linear infinite}
.pbw-reel__col--2 .pbw-reel__track{animation-direction:reverse;animation-duration:72s}
.pbw-reel__col--3 .pbw-reel__track{animation-duration:54s}
.pbw-reel__img{width:100%!important;height:auto!important;display:block;border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
@keyframes pbw-up{to{transform:translateY(-50%)}}
@media (max-width:767px){.pbw-reel{height:420px;transform:rotate(-6deg) scale(1.15)}}

@media (prefers-reduced-motion:reduce){
 .pbw-reel__track{animation:none}
 .pbw-card__shot,.pbw-card__phone,.pbw-card__go{transition:none}
}