.cases-section{order:8;padding:100px var(--gutter) 90px;background:var(--paper);color:var(--ink);scroll-margin-top:110px;min-width:0}
main>.faq-section{order:9}main>.brief{order:10}
.cases-eyebrow{font-size:12px;letter-spacing:.12em;margin:0 0 22px}.cases-heading h2{font-family:var(--display);font-size:clamp(58px,5.6vw,96px);line-height:.88;margin:0;letter-spacing:-.055em}
.cases-carousel{position:relative;min-width:0}.cases-window{width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding:80px 0;scrollbar-width:none;cursor:grab;touch-action:pan-x pan-y;user-select:none}.cases-window::-webkit-scrollbar{display:none}.cases-window.is-dragging{cursor:grabbing}.cases-strip{display:flex;width:max-content;gap:16px}.case-card{position:relative;isolation:isolate;flex:0 0 320px;width:320px;height:384px;overflow:hidden;border-radius:0;background:#252525;opacity:0;transform:translateY(20px)}
.cases-section.is-visible .case-card{animation:case-enter .5s ease-out both;animation-delay:calc(var(--case-index)*.2s)}
.case-card{color:inherit;text-decoration:none}
.case-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);pointer-events:none}.case-card:after{content:"";position:absolute;inset:33% 0 0;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.4),transparent);pointer-events:none}.case-overlay{position:absolute;z-index:1;bottom:0;left:0;right:0;padding:26px;color:white;pointer-events:none}.case-overlay p{margin:0;font-family:var(--text,ATyp,Arial,sans-serif);font-size:10px;font-weight:600;line-height:1;letter-spacing:.035em;text-transform:uppercase;white-space:nowrap}.case-overlay h3{max-width:100%;margin:9px 0 0;font-family:var(--display,Benzin,Impact,sans-serif);font-size:13px;font-weight:700;line-height:1;letter-spacing:-.055em;text-transform:uppercase;white-space:nowrap;text-wrap:nowrap;overflow-wrap:normal;hyphens:none}
.cases-controls{display:flex;justify-content:center;gap:12px;margin-top:16px}.cases-controls button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #ceccc5;border-radius:50%;background:var(--paper);color:#66645e;cursor:pointer;transition:background .2s,opacity .2s}.cases-controls button svg{width:24px;height:24px}.cases-controls button:hover:not(:disabled){background:#e4e1d8}.cases-controls button:disabled{opacity:.45;cursor:default}.cases-controls button:focus-visible,.cases-window:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
@keyframes case-enter{to{opacity:1;transform:translateY(0)}}
@media(max-width:767px){.cases-section{padding-block:72px}.cases-window{padding-block:40px}.case-card{width:224px;flex-basis:224px;height:240px}.case-overlay{padding:18px}.case-overlay h3{font-size:8.5px}.case-overlay p{font-size:7px}.cases-eyebrow{font-size:10px}}
@media(prefers-reduced-motion:reduce){.case-card{opacity:1;transform:none}.cases-section.is-visible .case-card{animation:none}}

@media(max-width:620px){.cases-heading h2{font-size:48px}}

@media(min-width:1600px){.cases-section{padding-inline:max(var(--gutter),calc((100vw - 1760px)/2))}}

/* Reveal the original artwork on hover. */
.case-card img{transition:filter .45s ease}
@media(hover:hover){.case-card:hover img{filter:grayscale(0)}}
@media(prefers-reduced-motion:reduce){.case-card img{transition:none}}

/* A gentle alternating tilt; the four-card pattern also matches each loop. */
.case-card{rotate:var(--case-tilt,-3deg);transform-origin:center;}
.case-card:nth-child(4n+1){--case-tilt:-3deg}
.case-card:nth-child(4n+2){--case-tilt:3deg}
.case-card:nth-child(4n+3){--case-tilt:-2deg}
.case-card:nth-child(4n+4){--case-tilt:2deg}
.cases-carousel::before{content:"";position:absolute;z-index:3;inset:64px 0 auto;height:94px;background:linear-gradient(to bottom,var(--paper) 0%,color-mix(in srgb,var(--paper) 85%,transparent) 24%,color-mix(in srgb,var(--paper) 30%,transparent) 62%,transparent 100%);pointer-events:none}
@media(max-width:767px){.cases-carousel::before{top:28px;height:70px}}

/* Layered collage; repeat the same geometry for a seamless carousel loop. */
.cases-strip{gap:0;padding-block:12px}
.case-card{margin-right:-22px;box-shadow:0 12px 24px rgb(35 30 20 / 18%),0 3px 7px rgb(35 30 20 / 12%);translate:0 var(--case-offset,0px)}
.case-card:nth-child(4n+1){--case-tilt:-6deg;--case-offset:8px;z-index:2}
.case-card:nth-child(4n+2){--case-tilt:4deg;--case-offset:-7px;z-index:3}
.case-card:nth-child(4n+3){--case-tilt:-2deg;--case-offset:14px;z-index:1}
.case-card:nth-child(4n+4){--case-tilt:7deg;--case-offset:-3px;z-index:4}
.cases-carousel::before{z-index:5}
@media(max-width:767px){.case-card{margin-right:-14px;box-shadow:0 8px 18px rgb(35 30 20 / 18%),0 2px 5px rgb(35 30 20 / 12%)}}

/* Air between clusters, with uneven overlaps inside each repeating group. */
.cases-strip{padding-block:26px}
.case-card{margin-right:var(--case-space,28px);box-shadow:0 24px 34px -10px rgb(30 25 16 / 38%),0 9px 16px -4px rgb(30 25 16 / 24%),0 2px 4px rgb(30 25 16 / 15%)}
.case-card:nth-child(4n+1){--case-tilt:-7deg;--case-offset:12px;--case-space:46px;z-index:2}
.case-card:nth-child(4n+2){--case-tilt:5deg;--case-offset:-13px;--case-space:-12px;z-index:3}
.case-card:nth-child(4n+3){--case-tilt:-3deg;--case-offset:24px;--case-space:54px;z-index:1}
.case-card:nth-child(4n+4){--case-tilt:8deg;--case-offset:-6px;--case-space:12px;z-index:4}
.cases-carousel::before{top:76px}
@media(max-width:767px){
.case-card{margin-right:calc(var(--case-space)*.7);box-shadow:0 18px 26px -7px rgb(30 25 16 / 36%),0 6px 12px -2px rgb(30 25 16 / 24%)}
.cases-carousel::before{top:40px}
}

/* Mask the raised corners of overlapping cards at the top of the collage. */
.cases-carousel::before{top:34px;height:150px;background:linear-gradient(to bottom,var(--paper) 0 38%,color-mix(in srgb,var(--paper) 92%,transparent) 52%,color-mix(in srgb,var(--paper) 38%,transparent) 75%,transparent 100%)}
@media(max-width:767px){.cases-carousel::before{top:14px;height:108px}}