/* Case study hero: full-screen picture first, zooms out on the first scroll.
   The picture is always laid out at its final size (10px side margins, like the slides);
   the full-screen state is just that same picture scaled up with transform. */
.case-hero{position:relative;margin:0;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#fff}
.case-hero img{position:absolute;left:50%;top:50%;width:calc(100vw - 20px);max-width:none;height:auto;aspect-ratio:2880/1834;object-fit:cover;
  transform:translate(-50%,-50%) scale(1);transition:transform 1.15s cubic-bezier(.65,0,.35,1);will-change:transform}
html.cz-intro .case-hero img{transform:translate(-50%,-50%) scale(var(--s0,1));transition:none}
html.cz-lock{overflow:hidden;overscroll-behavior:none}
@media (prefers-reduced-motion:reduce){.case-hero img{transition:none}}

/* Slide lock (desktop): each slide settles full-screen, one scroll moves to the next.
   Hero, text, slides, contact block and "next project" are all snap points, so nothing gets skipped or cut. */
@media (min-width:900px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  html:has(.case-hero){scroll-snap-type:y mandatory}
  .case-hero{scroll-snap-align:start}
  .case-info{scroll-snap-align:start}
  .slides>img,.slides>video{scroll-snap-align:center;scroll-snap-stop:always}
  .case-end{scroll-snap-align:start}
  .case-next{scroll-snap-align:end}
}
/* Past the last slide the lock is off, so the contact block and the rest scroll freely */
@media (min-width:900px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  html.cz-free:has(.case-hero){scroll-snap-type:none}
}
/* Zoom back in when returning to the hero */
html.cz-intro.cz-again .case-hero img{transition:transform 1.15s cubic-bezier(.65,0,.35,1)}

/* Laptop fit: on any landscape screen the text block and each slide fill the viewport exactly,
   so no white gap shows above or below while a slide is locked. Pictures are cropped to fit. */
@media (min-width:900px) and (min-aspect-ratio:1/1){
  .case-info{display:flex;flex-direction:column}
  .case-info .ci-top{flex:none}
  .case-info .ci-row{flex:1 1 auto}
  .slides{gap:10px !important}
  .slides>img,.slides>video{width:100% !important;height:calc(100vh - 20px) !important;height:calc(100svh - 20px) !important;aspect-ratio:auto !important;object-fit:cover !important;object-position:50% 50%}
}

/* Phones: hero picture fills a 62% screen band (no tiny picture in a big white screen); no zoom intro, normal scrolling */
@media (max-width:899px){
  .case-hero{height:62vh;height:62svh;min-height:0}
  .case-hero img{height:calc(100% - 10px);aspect-ratio:auto;object-fit:cover}
  html.cz-intro .case-hero img{transform:translate(-50%,-50%) scale(1)!important}
  html.cz-lock{overflow:auto!important}
  .case-info{padding-top:20px}
}