/* Brandvizer: cases, gedeeld door de homepage en /werk */
.cs{display:grid;grid-template-columns:minmax(var(--pad),1fr) minmax(0,780px) minmax(0,620px) minmax(var(--pad),1fr);column-gap:clamp(28px,5vw,80px);align-items:start;background:var(--white);border-top:1px solid var(--line);padding:clamp(44px,6vw,90px) 0;margin-top:48px}
.cs:last-of-type{border-bottom:1px solid var(--line)}
.cs-media{grid-column:1/3;position:sticky;top:100px}
.cs-text{grid-column:3/4;padding-right:var(--pad)}
.cs.flip{grid-template-columns:minmax(var(--pad),1fr) minmax(0,620px) minmax(0,780px) minmax(var(--pad),1fr)}
.cs.flip .cs-media{grid-column:3/5;order:2}
.cs.flip .cs-text{grid-column:2/3;padding-right:0;padding-left:var(--pad)}
.cs-main{margin:0;border-radius:0 28px 28px 0;overflow:hidden;box-shadow:0 30px 70px rgba(15,27,45,.16);background:var(--paper2)}
.cs.flip .cs-main{border-radius:28px 0 0 28px}
.cs-main img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:opacity .35s}
.cs-main img.swap{opacity:0}
.cs-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;padding-left:var(--pad)}
.cs-media,.cs-text{min-width:0}
.cs.flip .cs-thumbs{padding-left:0;padding-right:var(--pad);justify-content:flex-end}
.cs-thumbs button,.csm-thumbs button{width:76px;height:57px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;background:var(--paper2);cursor:pointer;opacity:.7;transition:opacity .2s,border-color .2s,transform .3s var(--ease)}
.cs-thumbs button img,.csm-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.cs-thumbs button:hover,.csm-thumbs button:hover{opacity:1;transform:translateY(-2px)}
.cs-thumbs button.on,.csm-thumbs button.on{opacity:1;border-color:var(--pink)}
.cs-client{font-size:var(--small);font-weight:600;color:var(--mute)}
.cs h3{margin:10px 0 26px;letter-spacing:-.03em;line-height:1.05}
.cs-block{padding:18px 0;border-top:1px solid var(--line)}
.cs-block h4{margin:0 0 8px;font-family:var(--hand);font-weight:600;font-size:var(--hand-l);line-height:1;color:var(--pink)}
.cs-block p{color:var(--ink2)}
.cs-block.why{background:var(--green-soft);border:none;border-radius:16px;padding:20px 22px;margin:6px 0}
.cs-block.why h4{color:var(--green)}
.cs-block.why p{color:var(--ink)}
.cs-quote{margin:22px 0 0;padding:18px 22px;border-left:4px solid var(--note);background:var(--paper);border-radius:0 14px 14px 0;font-family:var(--display);font-weight:500;font-size:var(--h5);line-height:1.35;letter-spacing:-.01em}
.cs-quote cite{display:block;margin-top:8px;font-family:var(--font-body);font-style:normal;font-size:var(--small);color:var(--mute);font-weight:500}
.cs-quote.sm{font-size:var(--body);padding:14px 16px;margin-top:14px}
.cs-more-head{margin-top:clamp(60px,9vw,120px)}
.cs-more-head h3{max-width:22ch}
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px}
.csm{background:var(--white);border:1px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s}
.csm:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(15,27,45,.12)}
.csm-media{position:relative;background:var(--paper2)}
.csm-main{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:opacity .35s}
.csm-main.swap{opacity:0}
.csm-thumbs{display:flex;gap:6px;padding:10px 14px 0;position:absolute;left:0;bottom:12px}
.csm-thumbs button{width:48px;height:36px;border-radius:7px;border-color:rgba(255,255,255,.9);opacity:.85;box-shadow:0 4px 12px rgba(15,27,45,.25)}
.csm-text{padding:24px 26px 28px}
.csm-text h4{margin:8px 0 14px}
.csm-text p{color:var(--ink2);margin-bottom:12px}
.csm-text p b{color:var(--ink);font-weight:600}

@media(max-width:960px){
  .cs,.cs.flip{grid-template-columns:minmax(0,1fr);row-gap:26px;padding:28px 0 40px}
  .cs-thumbs button{width:60px;height:45px}
  .cs-media,.cs.flip .cs-media{grid-column:1;order:0;position:relative;top:auto}
  .cs-text,.cs.flip .cs-text{grid-column:1;padding:0 var(--pad)}
  .cs-main,.cs.flip .cs-main{border-radius:0 24px 24px 0;margin-right:var(--pad)}
  .cs.flip .cs-thumbs{padding-left:var(--pad);padding-right:0;justify-content:flex-start}
  .cs-grid{grid-template-columns:1fr}
}