.cs-hero-devices{min-height:calc(52vw + 150px)}
@media(min-width:1600px){.cs-hero-devices{min-height:850px}}
@media(max-width:800px){.cs-hero-devices{min-height:calc(52vw + 140px)}}
/* Shared content gutters and intrinsic device composition — Mixed Media 1.1.23. */
.cs-case .cs-hero,.cs-case .cs-brief,.cs-case .cs-chapter,.cs-case .cs-outcome,.cs-case .cs-contact{padding-inline:var(--pad,clamp(22px,4.5vw,84px))}
.cs-case .cs-hero-head,.cs-case .cs-brief,.cs-case .cs-outcome-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.cs-case .cs-hero-head>*,.cs-case .cs-brief>*,.cs-case .cs-story>*,.cs-case .cs-facts>*{min-width:0}
.cs-case .cs-hero-devices{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;position:relative;min-height:0;height:auto;margin:48px 0 0;padding:30px 0 0;row-gap:26px}
.cs-case .cs-hero-devices .cs-device{position:relative;top:auto;right:auto;left:auto;bottom:auto;width:100%;max-width:none;transform:none;margin:0}
.cs-case .cs-hero-devices .cs-device-desktop{grid-column:1/11;grid-row:1;align-self:start}
.cs-case .cs-hero-devices .cs-device-phone{grid-column:10/13;grid-row:1;width:90%;max-width:280px;justify-self:start;margin-top:80px;margin-bottom:24px}
.cs-case .cs-device-note{position:static;grid-column:1/-1;padding-bottom:28px;line-height:1.7}
.cs-case .cs-hero-word{font-size:clamp(50px,11vw,190px);max-width:100%;overflow:hidden}
.cs-case .cs-device-window{height:0;aspect-ratio:auto;padding-bottom:60.97561%;overflow:hidden}
.cs-case .cs-device-phone .cs-device-window{padding-bottom:208.33333%}
.cs-case .cs-device-window img{position:absolute;top:0;left:0;width:100%;height:auto;max-width:none;max-height:none;aspect-ratio:auto;object-fit:initial}
.cs-case .cs-story.is-enhanced{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(40px,6vw,120px)}
.cs-case .cs-story.is-enhanced.cs-story-reverse{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.cs-case .cs-story-visual{width:100%;min-width:0}
.cs-case .cs-scene-stack{width:100%;aspect-ratio:1.5;margin-bottom:0}
.cs-case .cs-scene{min-width:0}
.cs-case .cs-scene.is-active{pointer-events:auto}
.cs-case .cs-scene:not(.is-active){visibility:hidden}
.cs-case .cs-scene img{max-width:100%;height:auto}
.cs-case .cs-step-prose,.cs-case .cs-story-step h3{overflow-wrap:break-word}
@media(min-width:801px) and (max-width:1100px){.cs-case .cs-story.is-enhanced,.cs-case .cs-story.is-enhanced.cs-story-reverse{column-gap:40px}.cs-case .cs-story-step h3{font-size:34px}}
@media(max-width:800px){
.cs-case .cs-hero-head{display:block}.cs-case .cs-brief,.cs-case .cs-outcome-grid{grid-template-columns:minmax(0,1fr)}
.cs-case .cs-hero-devices{margin-top:28px;padding-top:18px;row-gap:22px;min-height:0}
.cs-case .cs-hero-devices .cs-device-phone{grid-column:9/13;width:94%;max-width:210px;margin-top:48px;margin-bottom:0}
.cs-case .cs-hero-devices .cs-device-desktop{grid-column:1/11}
.cs-case .cs-device-note{font-size:9px;padding-bottom:22px}
.cs-case .cs-preview-control{min-width:44px;min-height:44px}
.cs-case .cs-device-phone .cs-preview-control{width:44px;height:44px;min-width:44px;min-height:44px}
.cs-case .cs-inline-visual{margin-inline:0!important}
}
/* Case-study scope and generous chapter separation — 1.1.25. */
.cs-case .cs-facts{grid-template-columns:1.1fr 1fr 1.4fr 1fr;align-items:start}
.cs-case .cs-facts .cs-scope-links{display:flex;flex-wrap:wrap;align-items:start;gap:8px;margin-top:10px}
.cs-case .cs-scope-links a{display:inline-flex;align-items:center;gap:12px;min-height:36px;padding:7px 10px;border:1px solid var(--cs-line);border-radius:4px;font-size:12px;line-height:1.4;transition:background .25s,border-color .25s,color .25s}
.cs-case .cs-scope-links a span{color:var(--cs-gold)}
.cs-case .cs-scope-links a:hover,.cs-case .cs-scope-links a:focus-visible{background:var(--cs-gold);border-color:var(--cs-gold);color:var(--cs-ink)}
.cs-case .cs-scope-links a:hover span,.cs-case .cs-scope-links a:focus-visible span{color:var(--cs-ink)}
.cs-case .cs-chapter-heading{margin-bottom:clamp(44px,5vw,80px)}
.cs-case .cs-story.is-enhanced .cs-story-visual{padding-top:24px}
@media(max-width:800px){.cs-case .cs-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-case .cs-facts .cs-scope-links{gap:8px}.cs-case .cs-scope-links a{min-height:44px;font-size:11px;padding:8px}.cs-case .cs-chapter-heading{margin-bottom:36px}}