/* ════ case studies ════ */
.hlbox.yelbox{background:var(--yellow)}
.pal-cyan{--bg:#38C5F0;--fg:#111;--fr:#111;--p1:#2FB6E0;--p2:#34BDE8;--chipbg:#111;--chipfg:#38C5F0}
.pal-ink{--bg:#121212;--fg:#fff;--fr:#fff;--p1:#1D1D1D;--p2:#232323;--chipbg:#fff;--chipfg:#121212}
.pal-yellow{--bg:#F0B22F;--fg:#111;--fr:#111;--p1:#E5A724;--p2:#EBAD28;--chipbg:#111;--chipfg:#F0B22F}
.pal-pink{--bg:#E5245E;--fg:#fff;--fr:#fff;--p1:#D51E55;--p2:#DC2259;--chipbg:#fff;--chipfg:#111}
.pal-mint{--bg:#A8E5C6;--fg:#111;--fr:#111;--p1:#9CDDBC;--p2:#A2E1C1;--chipbg:#111;--chipfg:#A8E5C6}
.pal-cream{--bg:#F6DFA0;--fg:#111;--fr:#111;--p1:#EED596;--p2:#F2DA9B;--chipbg:#111;--chipfg:#F6DFA0}
.pal-navy{--bg:#15235E;--fg:#fff;--fr:#fff;--p1:#1A2A6C;--p2:#1E2F75;--chipbg:#fff;--chipfg:#15235E}
.pal-green{--bg:#2EBF7F;--fg:#111;--fr:#111;--p1:#29B274;--p2:#2CB97A;--chipbg:#111;--chipfg:#2EBF7F}
.cv{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px;text-align:center;color:var(--fg)}
.cv .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.cv .w{font-size:clamp(34px,4.4vw,62px);font-weight:600;line-height:1;letter-spacing:-.04em}
.cv .w-spaced{font-weight:500;letter-spacing:.24em;margin-right:-.24em;padding-block:.14em;border-block:2px solid currentColor}
.cv .w-hand{font-family:var(--hand);font-weight:400;letter-spacing:0}
.cv .w-pixel{font-family:var(--pixel);font-weight:700;letter-spacing:.04em}
.cv svg{width:clamp(70px,8vw,120px);height:auto}

.cases{padding-bottom:20px}
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:6px auto 50px}
.fchip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1.5px solid var(--text);border-radius:999px;background:var(--paper);color:var(--text);
  font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;cursor:pointer}
.fchip b{padding:1px 7px;border-radius:999px;background:var(--chip);font-weight:700}
.fchip[hidden]{display:none}
.fchip.on{background:var(--text);color:var(--paper)}
.fchip.on b{background:var(--cyan);color:#111}
.csgrid{max-width:1290px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:36px 28px}
.csc{--th:46px;position:relative;display:flex;flex-direction:column;min-width:0;background:var(--bg);color:var(--fg);padding:calc(var(--th) + 14px) 14px 18px;
  clip-path:polygon(0 var(--th),0 0,170px 0,214px var(--th),100% var(--th),100% 100%,0 100%);transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.csc[hidden]{display:none}
.csc:hover{transform:translateY(-4px)}
.csc-tab{position:absolute;top:0;left:0;width:170px;height:var(--th);display:flex;align-items:center;padding-left:16px;font-family:var(--mono);font-size:12px;
  text-transform:uppercase;letter-spacing:.05em}
.csc-cover{position:relative;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;border:2px solid var(--fr)}
.csc-cover .pat,.csd-cover .pat{position:absolute;inset:0;background:repeating-linear-gradient(135deg,var(--p1) 0 22px,var(--p2) 22px 44px);transition:transform .6s}
.csc:hover .pat{transform:scale(1.08)}
.csc-foot{display:flex;flex-direction:column;gap:4px;padding:16px 4px 2px}
.csc-k{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.8}
.csc-t{font-size:clamp(28px,3vw,38px);font-weight:500;line-height:1.02;letter-spacing:-.045em}
.csc-m{font-size:14px;opacity:.8}
.csc-go{align-self:flex-start;margin-top:12px;padding-bottom:4px;border-bottom:1.5px solid currentColor;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em}

.csd{max-width:1290px;margin-inline:auto;padding-top:44px}
.crumbs{display:flex;align-items:center;gap:10px;margin-bottom:40px;font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.crumbs a{border-bottom:1.5px solid currentColor}
.crumbs span{color:var(--ink-2)}
.csd-hero{--th:64px;position:relative;display:grid;grid-template-columns:1fr 1.15fr;gap:32px;min-height:560px;background:var(--bg);color:var(--fg);
  padding:calc(var(--th) + 22px) 22px 22px;clip-path:polygon(0 var(--th),0 0,240px 0,300px var(--th),100% var(--th),100% 100%,0 100%)}
.csd-tab{position:absolute;top:0;left:0;width:240px;height:var(--th);display:flex;align-items:center;padding-left:24px;font-family:var(--mono);font-size:14px;
  text-transform:uppercase;letter-spacing:.05em}
.csd-text{display:flex;flex-direction:column;justify-content:center;min-width:0}
.csd-title{font-size:clamp(52px,7.4vw,112px);font-weight:500;line-height:.95;letter-spacing:-.05em;margin:16px 0 18px;overflow-wrap:anywhere}
.csd-line{max-width:28ch;font-size:clamp(17px,1.6vw,21px);line-height:1.35}
.csd-btns{margin-top:34px}
.csd-btns .cta{background:var(--fg);color:var(--bg)}
.csd-cover{position:relative;min-height:380px;display:grid;place-items:center;border:2px solid var(--fr)}
.csd-cover .cv .w{font-size:clamp(46px,6vw,96px)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border:2px solid var(--text);border-top:0}
.facts div{padding:18px 20px;border-right:1.5px solid var(--line)}
.facts div:last-child{border-right:0}
.facts dt{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.facts dd{margin:6px 0 0;font-size:20px;font-weight:500;letter-spacing:-.02em}
.frames{display:grid;grid-template-columns:1fr 1fr;gap:56px 34px;margin-top:100px}
.frame.wide{grid-column:1/-1}
.flab{display:block;margin-bottom:8px;font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.fbody{position:relative;min-height:260px;padding:26px;border:1.5px dashed var(--text);background:var(--paper)}
.frame.wide .fbody{min-height:360px}
.fbody h2{font-size:clamp(28px,3vw,40px);font-weight:500;letter-spacing:-.04em}
.fsticky{display:inline-block;max-width:30ch;margin-top:20px;padding:16px 18px;background:var(--sk);color:#111;font-size:15px;line-height:1.4;rotate:-2deg;box-shadow:0 8px 14px rgba(0,0,0,.08)}
.frame:nth-child(even) .fsticky{rotate:2deg}
.onbeh{margin-top:110px;text-align:center}
.onbeh-h{margin-bottom:18px;font-family:var(--hand);font-size:26px}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:100px}
.pn-a{display:flex;flex-direction:column;gap:6px;padding:26px;background:var(--bg);color:var(--fg);transition:transform .2s}
.pn-a:hover{transform:translateY(-4px)}
.pn-a span{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.pn-a b{font-size:clamp(26px,3vw,40px);font-weight:500;letter-spacing:-.04em}
.pn-a:last-child{text-align:right}
@media(max-width:760px){
  .csd-hero{grid-template-columns:1fr;--th:54px;clip-path:polygon(0 var(--th),0 0,200px 0,250px var(--th),100% var(--th),100% 100%,0 100%)}
  .csd-tab{width:200px}
  .csd-cover{min-height:260px}
  .facts{grid-template-columns:1fr 1fr}
  .facts div{border-right:0;border-bottom:1.5px solid var(--line)}
  .frames,.pn{grid-template-columns:1fr}
  .pn-a:last-child{text-align:left}
}

/* case study content */
.csc-cover img.real,.csd-cover img.real{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.csc:hover .csc-cover img.real{transform:scale(1.06)}
.csc-cover img.real.fit{object-fit:contain;padding:12px}
.csc.gfx:hover .csc-cover img.real{transform:scale(1.04) rotate(-1deg)}
.cimg .pat img{transition:transform .6s}
.cs-sec{margin-top:90px}
.cs-two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:30px;padding-top:22px;border-top:2px solid var(--text)}
.cs-h{font-size:clamp(32px,4vw,56px);font-weight:500;line-height:1;letter-spacing:-.045em}
.cs-copy p{max-width:56ch;font-size:clamp(25px,calc(1.4vw + 11px),30px);line-height:1.45;color:var(--text-2)}
.cs-copy p+p{margin-top:14px}
.cs-copy p:first-child{font-size:clamp(30px,calc(2vw + 11px),38px);line-height:1.25;letter-spacing:-.02em;color:var(--text)}
.cs-quote{position:relative;margin-top:90px;padding:44px clamp(20px,5vw,70px);background:var(--bg);color:var(--fg)}
.cs-quote .qmark{display:block;margin-bottom:6px;font-family:var(--pixel);font-size:96px;line-height:.7}
.cs-quote p{max-width:24ch;font-size:clamp(26px,3.4vw,46px);font-weight:500;line-height:1.15;letter-spacing:-.035em}
.cs-quote .qby{display:block;margin-top:20px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;opacity:.8}
.tagstrip{margin-top:90px;padding-block:16px;overflow:hidden;border-block:2px solid var(--text)}
.tagstrip .trk{display:flex;gap:40px;width:max-content;animation:tsl 34s linear infinite}
.tagstrip span{display:flex;align-items:center;gap:40px;font-family:var(--pixel);font-size:clamp(24px,3vw,40px);white-space:nowrap}
.tagstrip span::after{content:"\2726";font-size:.6em;color:var(--pink)}
@keyframes tsl{to{transform:translateX(-50%)}}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.shot{margin:0}
.shot.wide{grid-column:1/-1}
.shot img{display:block;width:100%;height:auto;border:2px solid var(--text);aspect-ratio:var(--ratio,4/3);object-fit:cover}
.shot.wide img{aspect-ratio:2/1}
.story{padding:clamp(28px,5vw,64px);border:2px solid var(--text)}
.story h3{margin-bottom:24px;font-size:clamp(26px,3.2vw,44px);font-weight:500;line-height:1.1;letter-spacing:-.03em}
.story p{max-width:62ch;font-size:clamp(17px,1.5vw,21px);line-height:1.6;opacity:.92}
.story p+p{margin-top:16px}
.story .sgrid{display:grid;grid-template-columns:repeat(var(--sc,2),minmax(0,1fr));gap:12px;margin-top:22px}
.story .sgrid div{padding:18px 18px 20px;border:1.5px solid currentColor;border-radius:4px}
.story .sgrid h4{margin:0 0 8px;font-size:clamp(17px,1.4vw,20px);font-weight:600;letter-spacing:-.01em}
.story .sgrid p{max-width:none;font-size:clamp(15px,1.15vw,17px);line-height:1.55;opacity:.88}
.story .sgrid s{opacity:.55}
.story .sfoot{margin-top:22px;max-width:70ch;font-weight:500}
@media (max-width:900px){.story .sgrid{grid-template-columns:repeat(min(var(--sc,2),2),minmax(0,1fr))}}
@media (max-width:600px){.story .sgrid{grid-template-columns:1fr}}
.scr{padding:clamp(24px,4.5vw,60px) clamp(16px,4vw,56px) clamp(28px,4.5vw,56px);border:2px solid var(--text);overflow:hidden}
.scr-h{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:baseline;margin-bottom:clamp(26px,4vw,48px)}
.scr-k{grid-row:span 2;padding:5px 10px;border:1.5px solid var(--ac);border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ac);white-space:nowrap}
.scr-h h3{font-size:clamp(24px,2.8vw,38px);font-weight:500;line-height:1.1;letter-spacing:-.03em}
.scr-h p{max-width:60ch;font-size:clamp(15px,1.25vw,18px);line-height:1.55;opacity:.85}
.scr-row{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(14px,3.5vw,56px);align-items:start;max-width:calc(var(--n,3)*330px);margin-inline:auto}
.scr .ph{display:flex;flex-direction:column;align-items:center;gap:16px}
.scr .ph:nth-child(2){margin-top:clamp(0px,3vw,40px)}
.shot .scr .ph img{display:block;width:100%;max-width:280px;height:auto;aspect-ratio:auto;border:0;object-fit:contain;filter:drop-shadow(0 22px 28px rgba(0,0,0,.22));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.shot .scr .ph:hover img{transform:translateY(-10px) rotate(-1.2deg)}
.scr .ph span{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.scr .ph span b{color:var(--ac);font-weight:700}
@media (max-width:640px){
  .scr-h{grid-template-columns:1fr}.scr-k{grid-row:auto;justify-self:start}
  .scr-row{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*clamp(16px,4vw,56px));padding:4px clamp(16px,4vw,56px) 10px;scrollbar-width:none}
  .scr-row::-webkit-scrollbar{display:none}
  .scr .ph{flex:0 0 62%;scroll-snap-align:center}.scr .ph:nth-child(2){margin-top:0}
}