/* "Next" banner at the end of every case study: a card like the Labs ones, the next project's
   name and headline on the left, its screenshot tilted into the corner. The whole card is the link. */
.nxb{--c:#956BFE; --tint:rgba(149,107,254,.14); --r:-2deg; position:relative; display:block; box-sizing:border-box; min-height:172px; margin:40px 0 28px; padding:26px 32px; border-radius:18px; overflow:hidden; text-decoration:none; color:#1E1A2E;
  background:linear-gradient(180deg, var(--tint), transparent 75%), rgba(255,255,255,.75); border:1px solid rgba(30,26,46,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 22px 44px -32px rgba(30,26,46,.32); transition:transform .4s cubic-bezier(.22,1,.36,1)}
.nxb:hover{transform:translateY(-3px)}
.nxb:focus-visible{outline:2px solid var(--c); outline-offset:3px}
.nxb-b{position:relative; z-index:2; display:block; max-width:50%}
.nxb-ey{display:block; font:600 11px/1 "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif; letter-spacing:.14em; text-transform:uppercase; color:rgba(30,26,46,.6)}
.nxb-h{display:block; margin-top:10px; font:500 clamp(24px, 2.6vw, 34px)/1.12 "PP Valve", "Schibsted Grotesk", sans-serif; letter-spacing:-.01em; color:#1E1A2E}
.nxb-h em{font-style:italic; color:var(--c)}
.nxb-shot{position:absolute; right:-2%; bottom:-34%; width:min(28%, 340px); aspect-ratio:16/10; border-radius:10px 0 0 0; overflow:hidden; border:1px solid rgba(30,26,46,.1); box-shadow:0 20px 40px -20px rgba(30,26,46,.45); transform:rotate(var(--r)); transition:transform .6s cubic-bezier(.22,1,.36,1)}
.nxb-shot img{width:100%; height:100%; object-fit:cover; object-position:top left; display:block; border:0; border-radius:0; box-shadow:none; transition:transform 6s linear}
.nxb:hover .nxb-shot{transform:rotate(0) translateY(-10px)}
.nxb:hover .nxb-shot img{transform:translateY(-8%)}
.nxb-go{display:inline-block; margin-left:.25em; color:var(--c); font-style:normal; font-weight:400; transition:transform .35s cubic-bezier(.22,1,.36,1)}
.nxb:hover .nxb-go{transform:translateX(6px)}
.nxb-nw{white-space:nowrap}
.nxb-sp{position:absolute; z-index:1; fill:var(--c); opacity:.75; pointer-events:none; animation:nxtw 3.6s ease-in-out infinite}
.nxb-sp.s1{left:56%; top:22px; width:14px; height:14px} .nxb-sp.s2{left:62%; top:58px; width:8px; height:8px; fill:#F5D68C; opacity:1; animation-delay:1.2s} .nxb-sp.s3{left:50%; bottom:26px; width:10px; height:10px; animation-delay:2.3s}
@keyframes nxtw{0%,100%{transform:scale(.6) rotate(0); opacity:.35} 50%{transform:scale(1) rotate(25deg); opacity:.9}}
@media (prefers-reduced-motion:reduce){ .nxb, .nxb-shot, .nxb-shot img, .nxb-go{transition:none} .nxb-sp{animation:none} }
@media (max-width:760px){ .nxb{min-height:0; padding:24px 22px 0} .nxb-b{max-width:100%} .nxb-sp.s1{left:auto; right:22px} .nxb-sp.s2{left:auto; right:44px; top:46px} .nxb-sp.s3{display:none} .nxb-shot{position:relative; display:block; right:auto; bottom:auto; width:auto; margin:22px -22px 0 18%; transform:none} .nxb:hover .nxb-shot{transform:none} }