/* Work case studies: themed per client (--bg, --fg, --ac set on body). Layout after Locomotive / Studio Naam case pages. */
body.work{background:var(--bg);color:var(--fg)}
body.work:not(.dark) .top img{filter:invert(1)}
body.work .pill{background:var(--ac);color:var(--bg)}
body.work footer,body.work footer a{color:color-mix(in srgb,var(--fg) 55%,transparent)}
.w-hero{padding-top:6vh}
.w-meta{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;font-size:14px;line-height:1.5;border-top:1px solid color-mix(in srgb,var(--fg) 18%,transparent);padding-top:14px}
.w-meta b{display:block;font-weight:700;font-size:12px;letter-spacing:.5px;color:color-mix(in srgb,var(--fg) 50%,transparent);margin-bottom:4px}
.w-meta a{border-bottom:1px solid currentColor}
.w-title{direction:ltr;text-align:left;font-family:Blauer;font-weight:400;text-transform:uppercase;font-size:clamp(54px,13.5vw,240px);line-height:.92;letter-spacing:-.01em;margin-top:9vh}
.w-sub{font-weight:700;font-size:clamp(20px,2.6vw,34px);margin-top:14px}
.w-full{margin:6vh calc(-1 * var(--g)) 0;overflow:hidden;height:min(62vw,92vh)}
.w-full img{width:100%;height:115%;object-fit:cover;display:block}
.w-statement{margin-top:12vh;font-size:clamp(26px,4.4vw,68px);line-height:1.18;font-weight:300}
.w-statement a{direction:ltr;display:inline-block;font-family:Blauer;color:var(--ac);border-bottom:2px solid var(--ac);margin-left:.3em}
.w-row{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12vh;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--fg) 18%,transparent)}
.w-row .lbl{font-size:13px;font-weight:700;letter-spacing:.5px;color:color-mix(in srgb,var(--fg) 50%,transparent)}
.w-row .lbl span{font-family:Blauer;font-weight:400;letter-spacing:2px;margin-left:8px;direction:ltr;display:inline-block}
.w-row p{font-size:clamp(18px,2vw,26px);line-height:1.5}
/* before / after */
.cmp{position:relative;margin-top:28px;border-radius:24px;overflow:hidden;aspect-ratio:16/9;touch-action:pan-y;user-select:none;cursor:ew-resize;--pos:50%}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.cmp .cb{clip-path:inset(0 0 0 var(--pos))}
.cmp .h{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--fg);transform:translateX(-1px)}
.cmp .h i{position:absolute;top:50%;left:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--fg);color:var(--bg);display:flex;align-items:center;justify-content:center;font-style:normal;font-family:Blauer;font-size:18px;letter-spacing:2px}
.cmp .t{position:absolute;top:18px;padding:8px 16px;border-radius:999px;font-weight:700;font-size:15px}
.cmp .t.b{left:18px;background:#2a2a2a;color:#fff}.cmp .t.a{right:18px;background:var(--ac);color:var(--bg)}
/* result */
.w-result{margin-top:12vh;display:flex;flex-direction:column;gap:6px}
.w-num{direction:ltr;text-align:left;font-family:Blauer;font-size:clamp(110px,26vw,420px);line-height:.85;color:var(--ac)}
.w-result p{font-weight:700;font-size:clamp(20px,2.6vw,36px);max-width:22ch}
/* services table */
.w-table{margin-top:12vh}
.w-table .head{display:flex;justify-content:space-between;align-items:baseline;direction:ltr;font-family:Blauer;font-size:clamp(34px,6vw,84px);text-transform:uppercase;line-height:1}
.w-table .head small{font-family:Polin;font-weight:700;font-size:15px;color:color-mix(in srgb,var(--fg) 50%,transparent);direction:rtl}
.w-table ol{list-style:none;margin-top:18px;border-top:1px solid color-mix(in srgb,var(--fg) 18%,transparent)}
.w-table li{display:grid;grid-template-columns:48px 1fr;gap:6px 14px;padding:18px 0;border-bottom:1px solid color-mix(in srgb,var(--fg) 18%,transparent)}
.w-table .n{font-family:Blauer;font-size:22px;color:color-mix(in srgb,var(--fg) 45%,transparent);direction:ltr;grid-row:span 2}
.w-table h3{font-weight:700;font-size:clamp(19px,2vw,26px)}.w-table p{font-size:16px;color:color-mix(in srgb,var(--fg) 70%,transparent)}
/* identity */
.w-id{margin-top:12vh}
.pal{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:22px;border-radius:24px;overflow:hidden}
.pal div{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 10%,transparent);height:clamp(140px,22vw,340px);display:flex;flex-direction:column;justify-content:flex-end;padding:16px 18px;direction:ltr;text-align:left;font-family:Blauer;font-size:15px;letter-spacing:1px}
.pal div b{font-family:Polin;font-weight:700;font-size:18px;letter-spacing:0;direction:rtl;text-align:right;margin-bottom:auto}
.w-img{margin-top:14px;border-radius:24px;overflow:hidden}
.w-img img{width:100%;height:auto;display:block}
/* gallery */
.w-gal{display:grid;grid-template-columns:1fr;gap:14px;margin-top:12vh}
.w-gal figure{margin:0}
.w-gal figure > img{width:100%;height:auto;display:block;border-radius:24px}
.w-gal figure[data-img]{overflow:visible}
.w-gal figcaption{font-size:14px;color:color-mix(in srgb,var(--fg) 60%,transparent);padding:10px 4px 0}
/* next */
.w-next{display:block;margin-top:14vh;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--fg) 18%,transparent)}
.w-next .lbl{font-size:13px;font-weight:700;color:color-mix(in srgb,var(--fg) 50%,transparent)}
.w-next .nt{direction:ltr;text-align:left;font-family:Blauer;text-transform:uppercase;font-size:clamp(44px,9vw,150px);line-height:1;margin-top:10px;transition:color .3s}
.w-next:hover .nt{color:var(--ac)}
.w-next .nh{font-weight:700;font-size:clamp(18px,2vw,26px);margin-top:8px}
.w-next .ni{margin-top:18px;border-radius:24px;overflow:hidden;aspect-ratio:21/9}
.w-next .ni img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.w-next:hover .ni img{transform:scale(1.04)}
body.work .cta{background:var(--fg);color:var(--bg);border:0}
body.work .cta .btn{background:var(--ac);color:var(--bg)}
@media (min-width:900px){
  .w-meta{grid-template-columns:repeat(4,1fr)}
  .w-row{grid-template-columns:1fr 2fr;gap:40px}
  .w-result{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .w-result p{text-align:right;padding-bottom:3vw}
  .w-table li{grid-template-columns:80px 1fr 1.3fr;align-items:baseline}
  .w-table .n{grid-row:auto}
  .pal{grid-template-columns:repeat(4,1fr)}
  .w-gal{grid-template-columns:repeat(12,1fr);gap:18px}
  .w-gal .full{grid-column:1/-1}.w-gal .half{grid-column:span 6}.w-gal .wide{grid-column:span 8}.w-gal .narrow{grid-column:span 4}
  /* images that share a row get one height */
  .w-gal .half > img,.w-gal .wide > img,.w-gal .narrow > img{height:clamp(300px,32vw,620px);object-fit:cover}
}