/* Case Studies — editorial, studio-lit presentation (Respondent Portal direction). */
.cs{--cs-bg:#f6f6f3;--cs-stage:#efeeea;--cs-line:#d9d8d2;--cs-ink:#151a21;--cs-ink2:#5d6670;--cs-accent:#2f4fd6;background:var(--cs-bg);color:var(--cs-ink)}
body.dark .cs{--cs-bg:#0c1118;--cs-stage:#121923;--cs-line:#26303c;--cs-ink:#eef2f6;--cs-ink2:#9aa7b4;--cs-accent:#9bb1ff}
.cs-serif{font-family:Manrope,'DM Sans',system-ui,sans-serif;font-weight:400;letter-spacing:-.015em}
.cs-cap{font:500 12px/1.4 'DM Sans',Inter,system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--cs-ink2)}
.cs-wrap{width:min(1320px,calc(100% - 12vw));margin:0 auto}

.cs-hero{padding:clamp(120px,16vh,180px) 0 clamp(60px,9vh,100px)}
.cs-hero h1{font-size:clamp(56px,7.4vw,124px);line-height:.94;margin:22px 0 28px;max-width:13ch;color:var(--cs-ink)}
.cs-hero h1 em{font-style:italic;color:var(--cs-accent)}
.cs-hero p{font-size:clamp(17px,1.35vw,21px);line-height:1.6;color:var(--cs-ink2);max-width:600px;margin:0}
.cs-hero .cs-note{font-size:13px;margin-top:18px;max-width:600px}
.cs-index{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:44px}
.cs-index a{font:500 12px 'DM Sans',Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-ink);text-decoration:none;opacity:.7;transition:opacity .3s}
.cs-index a:hover{opacity:1}


.cs-stage{position:relative;margin:0;background:var(--cs-stage);border:1px solid var(--cs-line);aspect-ratio:16/8.4;display:grid;place-items:center;overflow:hidden;perspective:1800px}
.cs-stage:before{content:'';position:absolute;left:10%;right:10%;bottom:9%;height:14%;background:radial-gradient(closest-side,rgba(20,30,45,.22),transparent);filter:blur(10px)}
.cs-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:44px;flex-wrap:wrap}
.cs-meta h2{font-size:clamp(46px,5.6vw,92px);line-height:.98;margin:0;color:var(--cs-ink)}
.cs-meta .cs-cap{margin:16px 0 0}
.cs-detail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:46px}
.cs-detail h3{font:600 12px Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-ink2);margin:0 0 12px}
.cs-detail p{font-size:16px;line-height:1.7;color:var(--cs-ink);margin:0;opacity:.86}
.cs-link{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--cs-ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}

/* Devices */


















/* Demos kept below the cases */
.cs-demos{padding:20px 0 0}
.cs-demos-head{padding:60px 0 10px}
.cs-demos-head h2{font-size:clamp(42px,4.8vw,76px);line-height:1;margin:16px 0 0;color:var(--cs-ink)}
.cs .case-narrative,.cs .laptop-scroll{display:none}

@media(max-width:900px){.cs-detail{grid-template-columns:1fr;gap:26px}.cs-stage{aspect-ratio:4/3}}
@media(max-width:560px){.cs-wrap{width:calc(100% - 40px)}.cs-stage{aspect-ratio:1/1}}


.cs-serif{font-weight:700;letter-spacing:-.05em}
.cs-hero h1{line-height:1;max-width:14ch}.cs-hero h1 em{font-style:normal}
.cs-meta h2{font-size:clamp(40px,4.6vw,76px);line-height:1.02}
.cs-cap{font-weight:600;letter-spacing:.2em}
/* Runner opening on Case Studies: the hero below follows naturally */
.cs .reel{margin-top:-88px}
.cs .reel h2{font-size:clamp(46px,5.6vw,92px)}
.cs .reel + .cs-hero{padding-top:clamp(90px,12vh,140px)}
@media(max-width:760px){.cs .reel{margin-top:-76px}}
/* More from the field */