/* Case index only. Native films/embeds and every case detail stay intact. */
.case-scroll-page #main-content { background: var(--bg); color: var(--ink); overflow: clip; }
.case-scroll-page #main-content::before { display: none; }
.case-scroll-page .case-hero { position: relative; max-width: none; min-height: 88svh; padding: 130px 4vw 0; border: 0; }
.case-scroll-page .case-hero h1 { position: relative; margin: 0; padding-top: 40px; font-size: clamp(140px,25.5vw,460px); font-weight: 800; line-height: .77; letter-spacing: -.075em; color: var(--ink); }
.case-scroll-page .case-hero h1 > span { display: block; }
.case-scroll-page .case-hero h1 > span:last-child { text-align: right; }
.case-scroll-page .case-hero p { position: absolute; right: 4vw; top: 142px; width: 28ch; color: var(--muted); font-size: 14px; line-height: 1.5; }
.case-scroll-page .case-hero-index { position: absolute; top: 110px; left: 4vw; right: 4vw; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--accent); font-size: 10px; }
.case-scroll-page .case-list { position: relative; display: block; max-width: none; width: 100%; margin-top: -37svh; padding: 0 3vw 100px; }
.case-scroll-page .case-list .case-study {
  display: block; position: relative; padding: 0; margin: 0 0 70px; border: 0; border-radius: 0;
  background: none; box-shadow: none; transition: none; scroll-margin-top: 120px;
}
.case-scroll-page .case-panel {
  position: relative; display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr);
  min-height: min(640px,70svh); border: 1px solid #375b4238; border-radius: 10px; overflow: hidden;
  background: #e0e6d3; color: #183d2b; box-shadow: 0 -6px 36px #09211418;
  transform-origin: 50% 15%;
}
.case-scroll-page .case-study:nth-child(2) .case-panel { background: #1d412f; color: #edf0e3; }
.case-scroll-page .case-study:nth-child(3) .case-panel { background: #c2d2b5; }
.case-scroll-page .case-study:nth-child(4) .case-panel { background: #f1efdf; }
.case-scroll-page .case-list .case-details { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; order: -1; padding: clamp(26px,2.6vw,44px); color: inherit; }
.case-scroll-page .case-list .case-number { color: inherit; font: 12px var(--font-body); letter-spacing: .08em; opacity: .65; }
.case-scroll-page .case-list .case-number::before { background: currentColor; }
.case-scroll-page .case-list .case-details h2 { font-size: clamp(40px,4.8vw,76px); font-weight: 600; letter-spacing: -.05em; line-height: 1; margin: 18px 0 22px; color: inherit; }
.case-scroll-page .case-details h2 > span { display: block; font-size: .49em; color: inherit; opacity: .7; margin-top: 10px; }
.case-scroll-page .case-list .case-result { font-size: clamp(60px,6vw,92px); font-weight: 500; line-height: .95; color: inherit; margin-bottom: 22px; }
.case-scroll-page .case-list .case-description { color: inherit; font-size: clamp(15px,1.2vw,18px); line-height: 1.5; max-width: 29ch; }
.case-scroll-page .case-description > span { color: inherit; opacity: .75; }
.case-scroll-page .case-list .case-facts { width: 100%; margin-top: 22px; padding-top: 16px; gap: 14px 30px; border-color: currentColor; }
.case-scroll-page .case-facts dt { color: inherit; opacity: .65; }
.case-scroll-page .case-facts dd { color: inherit; font-size: 12px; }
.case-scroll-page .case-list .case-arrow { background: #214d37; border: 1px solid #214d37; color: #eff2e5; border-radius: 50px; padding: 14px 22px; margin-top: 30px; }
.case-scroll-page .case-study:nth-child(2) .case-arrow { background: #e0e9d2; border-color: #e0e9d2; color: #1b3b28; }
.case-scroll-page .case-arrow:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.case-scroll-page .case-list .case-media { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 20px; border: 0; border-left: 1px solid #abc5b32b; border-radius: 0; background: #0e2016; box-shadow: none; }
.case-scroll-page .case-list .case-screen { width: 100%; aspect-ratio: 16/9; border-radius: 4px; border: 0; }
.case-scroll-page .case-screen iframe { display: block; width: 100%; height: 100%; border: 0; }
.case-scroll-page .case-list .case-caption { padding: 18px 0 0; color: #c4d2c3; font-size: 12px; }
.case-scroll-page .case-list .case-caption > :last-child { display: none; }
.case-scroll-page.case-stack-ready .case-list { padding-bottom: 0; }
.case-scroll-page.case-stack-ready .case-list::after { content: ''; display: block; height: var(--case-tail-space,0px); }
.case-scroll-page.case-stack-ready .case-list .case-study { position: sticky; top: var(--case-pin-top); height: auto; margin-bottom: 30svh; z-index: var(--case-order); }
.case-scroll-page.case-stack-ready .case-panel { height: auto; transform: translateY(var(--case-lift,0px)) rotate(var(--case-turn,0deg)) scale(var(--case-scale,1)); }
.case-scroll-page.case-stack-ready .case-study:last-child { margin-bottom: 0; }
@media(max-height:780px) and (min-width:901px) {
 .case-scroll-page .case-list .case-details { padding: 26px 32px; }
 .case-scroll-page .case-list .case-details h2 { font-size: 48px; margin: 18px 0 22px; }
 .case-scroll-page .case-list .case-result { font-size: 68px; margin-bottom: 16px; }
 .case-scroll-page .case-list .case-facts { margin-top: 20px; padding-top: 14px; }
 .case-scroll-page .case-list .case-arrow { margin-top: 20px; }
}
@media(max-width:900px) {
 .case-scroll-page .case-hero { min-height: 65svh; padding: 126px 22px 0; }
 .case-scroll-page .case-hero h1 { padding-top: 34px; font-size: 25vw; }
 .case-scroll-page .case-hero p { position: static; margin-top: 32px; font-size: 14px; }
 .case-scroll-page .case-hero-index { left: 22px; right: 22px; top: 104px; }
 .case-scroll-page .case-list { margin-top: -4svh; padding: 0 20px 50px; }
 .case-scroll-page .case-list .case-study { margin-bottom: 26px; }
 .case-scroll-page .case-panel { grid-template-columns: 1fr; min-height: 0; border-radius: 9px; }
 .case-scroll-page .case-list .case-details { padding: 28px; display: grid; grid-template-columns: 1fr auto; gap: 0 20px; }
 .case-scroll-page .case-list .case-number { grid-column: 1/-1; }
 .case-scroll-page .case-list .case-details h2 { font-size: 44px; grid-column: 1; margin: 18px 0; }
 .case-scroll-page .case-list .case-result { font-size: 50px; grid-column: 2; grid-row: 2; margin: 0; align-self: center; }
 .case-scroll-page .case-list .case-description { grid-column: 1/-1; max-width: none; }
 .case-scroll-page .case-list .case-facts { grid-column: 1/-1; margin-top: 20px; padding-top: 16px; }
 .case-scroll-page .case-list .case-arrow { grid-column: 1/-1; grid-row: auto; width: fit-content; margin-top: 24px; }
 .case-scroll-page .case-list .case-media { padding: 22px; border-left: 0; }
}
@media(max-width:560px) {
 .case-scroll-page .case-hero { min-height: 540px; }
 .case-scroll-page .case-hero h1 { font-size: 25vw; line-height: .87; }
 .case-scroll-page .case-hero p { max-width: 27ch; }
 .case-scroll-page .case-list { margin-top: -105px; padding-inline: 14px; }
 .case-scroll-page .case-list .case-details { padding: 24px; display: block; }
 .case-scroll-page .case-list .case-details h2 { font-size: 40px; }
 .case-scroll-page .case-list .case-result { font-size: 62px; margin: 20px 0; }
 .case-scroll-page .case-list .case-facts { gap: 18px; }
 .case-scroll-page .case-list .case-media { padding: 14px; }
 .case-scroll-page .case-list .case-caption { font-size: 11px; padding-top: 12px; }
}
@media(prefers-reduced-motion:reduce) {
 .case-scroll-page .case-list .case-study { position: relative !important; height: auto !important; top: auto !important; }
 .case-scroll-page .case-panel { transform: none !important; }
}

/* A compact Launches introduction keeps the first film in the landing view. */
.case-scroll-page .case-hero { min-height: 0; padding: 140px 4vw 40px; }
.case-scroll-page .case-hero h1 { padding-top: 24px; font-size: clamp(64px,15vw,230px); }
.case-scroll-page .case-hero h1 > span:last-child { text-align: left; }
.case-scroll-page .case-list { margin-top: 0; }
@media (max-width: 860px) {
 .case-scroll-page .case-hero { padding: 126px 22px 28px; }
 .case-scroll-page .case-hero h1 { font-size: 17vw; }
 .case-scroll-page .case-list .case-media { order: -2; }
}

/* Keep the longer Case studies title within phone and desktop gutters. */
.case-scroll-page .case-hero h1 { font-size:clamp(40px,12vw,190px); }
@media(max-width:900px) { .case-scroll-page .case-hero h1 { font-size:13vw; } }