/* Case studies page only. Shared rules live in css/style.css. */
.hero-band h1{max-width:20ch}
.strip figcaption.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}
.jump{border-bottom:1px solid var(--rule);padding:22px 0}
.jump .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px}
.jump span{color:var(--dim)}
.jump a{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--dim);padding:4px 0;border-bottom:1px solid transparent}
.jump a:hover{color:var(--text);border-bottom-color:var(--text)}
.jump a:active{transform:translateY(1px)}

.cs{padding:96px 0;border-top:1px solid var(--rule);scroll-margin-top:var(--nav)}
.jump + .cs{border-top:0}
.cs-top{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start;margin-bottom:48px}
.cs-top h2{font-size:36px;letter-spacing:-.03em;line-height:1.05}
.cs-top .sub{font-size:22px;letter-spacing:-.01em;line-height:1.25;max-width:26ch}
.cs-top .meta{display:block;margin-top:12px;color:var(--dim)}
.cs-body{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.cs-body figure{position:sticky;top:calc(var(--nav) + 32px)}
.cs-body img{width:100%;aspect-ratio:4/5;object-fit:cover}
.cs-block{border-top:1px solid var(--rule);padding:24px 0 32px;display:grid;grid-template-columns:160px 1fr;gap:24px}
.cs-block .head{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding-top:4px}
.cs-block .bullets li:first-child{margin-top:0}
.cs-block .bullets li{color:var(--text)}
.cs-body .tags{border-top:1px solid var(--rule);padding-top:20px}
.cs .disclaimer{margin-top:48px}

@media (max-width:1024px){
  .cs-top,.cs-body{grid-template-columns:1fr;gap:28px}
  .cs-body figure{position:static}
  .cs-body img{aspect-ratio:3/2}
}
@media (max-width:767px){
  .cs{padding:64px 0}
  .cs-top{margin-bottom:28px}
  .cs-top h2{font-size:30px}
  .cs-top .sub{font-size:19px}
  .cs-block{grid-template-columns:1fr;gap:12px;padding:20px 0 24px}
}