/* Case study pages (/work/...): short copy, big visuals. Film and comparisons run wider than the text column. */
.case-study h1,.case-study h2{letter-spacing:-.055em}
.cs-wide{width:min(1440px,calc(100% - 48px));margin-inline:auto}
.cs-hero{padding-block:120px 40px}
.cs-crumbs{display:flex;gap:10px;align-items:center;margin-bottom:28px;color:var(--muted);font-size:14px}
.cs-crumbs a{color:var(--ink);font-weight:600}
.cs-hero h1{margin:14px 0 0;font-size:clamp(52px,7.4vw,108px);line-height:.98}
.cs-lede{max-width:620px;margin:28px 0 0;font-size:clamp(19px,1.7vw,24px);line-height:1.45}
.cs-meta{margin:14px 0 0;color:var(--muted);font-size:14px;font-weight:600;letter-spacing:.02em}
.cs-film{border-radius:28px;box-shadow:0 40px 90px -50px rgba(0,0,0,.55)}
.cs-section{padding-top:120px}
.cs-head{margin-bottom:36px}
.cs-head h2{margin:12px 0 0;font-size:clamp(40px,5.2vw,76px);line-height:1.02}
.cs-head p:not(.eyebrow){margin:18px 0 0;color:var(--muted);font-size:18px}

/* Before/after slider: one video holds both halves, drawn into a canvas. */
.cs-compare{position:relative;overflow:hidden;border-radius:28px;background:#111;aspect-ratio:1280/552;touch-action:pan-y}
.cs-compare video{display:none}
.cs-compare canvas,.cs-compare-still{position:absolute;inset:0;width:100%;height:100%;display:block}
.cs-compare-still{object-fit:cover;transition:opacity .3s ease}
.cs-compare.is-live .cs-compare-still{opacity:0}
.cs-compare-line{position:absolute;top:0;bottom:0;left:var(--split);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.4);pointer-events:none}
.cs-compare-line::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6 3 12l6 6M15 6l6 6-6 6' fill='none' stroke='%23161619' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.cs-compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.cs-compare-tag{position:absolute;top:18px;padding:7px 12px;border-radius:100px;background:rgba(22,22,25,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.cs-compare-before{left:18px}
.cs-compare-after{right:18px}
.cs-compare input:focus-visible~.cs-compare-line::after{outline:3px solid var(--red,#e50914);outline-offset:3px}

/* Cast: big reference sheets, names only. */
.cs-cast-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cs-cast-grid figure,.cs-pair,.cs-end-frame{margin:0}
.cs-cast-grid img{display:block;width:100%;height:auto;aspect-ratio:9/5;object-fit:cover;border-radius:20px;background:#fff}
.cs-cast-grid figcaption{margin-top:12px;font-size:15px;font-weight:600}

/* Worlds: reference and final frame side by side, as large as the column allows. */
.cs-pairs{display:grid;gap:44px}
.cs-pair-media{display:grid;grid-template-columns:1.8fr 2.296fr;gap:14px;align-items:start}
.cs-pair img{display:block;width:100%;height:auto;border-radius:20px}
.cs-pair-media img:first-child{aspect-ratio:900/500}
.cs-pair-media img:last-child{aspect-ratio:992/432}
.cs-pair figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:15px}
.cs-pair figcaption span{color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

.cs-end{padding-bottom:120px}
/* Reel: the finale loop with the numbers on a dark panel beneath, one card. */
.cs-reel{overflow:hidden;border-radius:28px;background:#111114;color:#fff;box-shadow:0 40px 90px -50px rgba(0,0,0,.55)}
.cs-reel video{display:block;width:100%;height:auto;aspect-ratio:992/432;object-fit:cover;background:#111114}
.cs-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:30px 0 32px;list-style:none}
.cs-stats li{margin:0;padding:0 32px;border-left:1px solid rgba(255,255,255,.12)}
.cs-stats li:first-child{border-left:0}
.cs-stats strong{display:block;color:#fff;font-size:clamp(40px,4.8vw,72px);line-height:1;letter-spacing:-.05em}
.cs-stats span{display:block;margin-top:12px;color:rgba(255,255,255,.55);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.cs-cta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:28px;margin-top:56px}
.cs-cta h2{margin:0;font-size:clamp(40px,5.2vw,76px);line-height:1.02}
.cs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}

@media (max-width:900px){.cs-cast-grid{grid-template-columns:1fr 1fr}.cs-pair-media{grid-template-columns:1fr}}
@media (max-width:760px){
  .cs-wide{width:100%}
  .cs-hero{padding-block:96px 28px}
  .cs-film,.cs-compare,.cs-reel{border-radius:0}
  .cs-reel{box-shadow:none}
  .cs-section{padding-top:80px}
  .cs-head{margin-bottom:24px}
  .cs-cast-grid{display:flex;gap:12px;width:100%;padding-inline:20px;box-sizing:border-box;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cs-cast-grid::-webkit-scrollbar{display:none}
  .cs-cast-grid figure,.cs-cast-grid figure:nth-child(n+4){flex:0 0 84%;scroll-snap-align:start}
  .cs-cast-grid figcaption{font-size:13px;margin-top:8px}
  .cs-cast-grid img,.cs-pair img{border-radius:14px}
  .cs-pairs{gap:34px}
  .cs-pair-media{gap:10px}
  .cs-stats{padding:20px 0 22px}
  .cs-stats li{padding:0 12px}
  .cs-stats strong{font-size:28px}
  .cs-stats span{margin-top:8px;font-size:10px;letter-spacing:.08em}
  .cs-end{padding-bottom:80px}
  .cs-cta{margin-top:36px}
}