/* /work hero — headline, the filmstrip of every project, the ledger. */
.wrk-hero{padding-top:var(--bdh-hero-t);padding-bottom:clamp(56px,6vw,96px);overflow:hidden}
.wrk-hero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--bdh-gap);row-gap:28px;align-items:end}
.wrk-hero__say{grid-column:1 / span 7;display:flex;flex-direction:column;gap:22px}
.wrk-hero__say .d1{max-width:13ch}
.wrk-hero__side{grid-column:9 / 13;display:flex;flex-direction:column;gap:26px;padding-bottom:6px}
.wrk-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
@media (max-width:1100px){
  .wrk-hero__say{grid-column:1 / -1}
  .wrk-hero__side{grid-column:1 / span 9}
}
@media (max-width:860px){.wrk-hero__side{grid-column:1 / -1}}

/* the filmstrip: full bleed, first tile aligned with the content column; scrolls sideways (JS adds the slow drift) */
.wrk-strip{position:relative;margin-top:clamp(48px,6vw,88px)}
.wrk-strip__view{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline-offset:-2px}
.wrk-strip__view::-webkit-scrollbar{display:none}
.wrk-strip__track{display:flex;gap:clamp(10px,1vw,14px);width:max-content;
  padding-inline:max(var(--gutter),calc((100vw - var(--wrap)) / 2))}
.wrk-strip__item{flex:none;height:clamp(220px,26vw,380px);aspect-ratio:var(--ar,1.5)}
.wrk-strip__a{position:relative;display:block;height:100%;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-4);color:var(--on-ink);isolation:isolate}
.wrk-strip__ph,.wrk-strip__ph picture,.wrk-strip__ph img{display:block;width:100%;height:100%}
.wrk-strip__ph img{object-fit:cover;transition:transform 1s var(--e)}
/* the caption block always sits on solid ink (opaque to a third of the tile), whatever the picture */
.wrk-strip__a::after{content:"";position:absolute;inset:0;z-index:1;background:var(--ink);opacity:.82;pointer-events:none;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 30%,transparent 64%);mask-image:linear-gradient(0deg,#000 0%,#000 30%,transparent 64%)}
.wrk-strip__cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;display:flex;flex-direction:column;gap:6px}
.wrk-strip__n{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;color:var(--on-ink)}
.wrk-strip__t{font-family:var(--f-h);font-size:clamp(.95rem,1.15vw,1.12rem);font-weight:500;line-height:1.25;letter-spacing:-.006em;color:var(--on-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wrk-strip__a:hover img,.wrk-strip__a:focus-visible img{transform:scale(1.045)}
.wrk-strip__a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrk-strip__view .is-clone .wrk-strip__a{pointer-events:auto}

/* pause / play the drift (shown by JS only when the strip moves) */
.wrk-strip__ctl{display:flex;justify-content:flex-end;margin-top:14px}
.wrk-strip__btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;font-size:var(--t-xs);font-weight:500;color:var(--muted)}
.wrk-strip__btn:hover{color:var(--ink)}
.wrk-strip__ico{position:relative;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-3)}
.wrk-strip__ico::before,.wrk-strip__ico::after{content:"";position:absolute;top:5px;width:2px;height:6px;background:var(--ink)}
.wrk-strip__ico::before{left:5px}.wrk-strip__ico::after{left:9px}
.wrk-strip__btn.is-held .wrk-strip__ico::before{left:6px;width:0;height:0;background:none;border-left:6px solid var(--ink);border-top:3px solid transparent;border-bottom:3px solid transparent}
.wrk-strip__btn.is-held .wrk-strip__ico::after{display:none}

/* the ledger */
.wrk-led{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(40px,4.4vw,64px);border-top:1px solid var(--ink)}
.wrk-led>div{padding:18px 22px 0 0;border-right:1px solid var(--line)}
.wrk-led>div+div{padding-left:22px}
.wrk-led>div:last-child{border-right:0}
.wrk-led dt{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.4}
.wrk-led dd{margin-top:12px;font-family:var(--f-h);font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:500;letter-spacing:-.02em;color:var(--ink);line-height:1.05;font-variant-numeric:tabular-nums}
.wrk-led .wrk-led__txt dd{font-family:var(--f);font-size:var(--t-xs);font-weight:400;letter-spacing:0;line-height:1.55;color:var(--txt)}
@media (max-width:860px){
  .wrk-led{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wrk-led>div{padding:16px 16px 18px 0;border-right:0;border-bottom:1px solid var(--line)}
  .wrk-led>div+div{padding-left:0}
  .wrk-led>div:nth-child(2n){padding-left:16px;border-left:1px solid var(--line)}
  .wrk-led>div:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:640px){
  /* a 2 × 2 ledger on phones, never four tall rows of one figure each */
  .wrk-led>div{padding:14px 12px 16px 0}
  .wrk-led>div:nth-child(2n){padding-left:14px}
  .wrk-led dd{margin-top:8px;font-size:1.65rem}
  .wrk-led dt{font-size:var(--t-lbl);letter-spacing:.1em}
  .wrk-led .wrk-led__txt dd{font-size:var(--t-lbl);line-height:1.5}
}

/* the whole title shows: a two-line clamp cut the case names on phones and tablets (integrator, responsive pass) */
@media (max-width:1279px){.wrk-strip__t{display:block;overflow:visible;-webkit-line-clamp:unset}}