[data-case="monitors"] .hero-art .image-frame{aspect-ratio:1296/1089}
[data-case] .hero-art .image-frame img{width:100%;height:100%;object-fit:contain}
[data-case] .hero-description{margin-bottom:0}
.release-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;list-style-position:inside;margin:44px 0 0;padding:28px 0 0;border-top:1px solid var(--rule);font-size:18px;color:var(--body)}
.release-list li::marker{font-family:"Courier New",monospace;font-size:12px}
.artifact--focused{max-width:720px;margin-inline:auto}
.overview-artifact{margin-top:64px}
.context-photo{max-width:520px;margin:0 0 80px auto}
.design-options{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:56px}
.design-option{min-width:0}.design-option h3{font-size:clamp(2.1rem,3.1vw,3rem);line-height:1.04;margin-bottom:24px}
.design-option h4{font:12px/1.4 "Courier New",monospace;text-transform:uppercase;letter-spacing:.08em;margin:30px 0 12px}
.design-option ul{padding-left:20px;margin:0;color:var(--body);font-size:17px;line-height:1.6}.design-option li+li{margin-top:10px}
.case-demo{margin-top:64px}.case-demo video{display:block;width:100%;max-height:75svh;background:#fff;aspect-ratio:1590/1080}.case-demo figcaption{margin-top:14px}
.testimonials{margin-top:80px}.testimonials h3{font-size:clamp(2.1rem,3.1vw,3rem);line-height:1.04;margin-bottom:32px}
[data-case] .prose{overflow-wrap:break-word}
@media(max-width:760px){.release-list{grid-template-columns:1fr 1fr;gap:24px}.design-options{grid-template-columns:1fr;gap:64px}.context-photo{margin-bottom:60px}.overview-artifact{margin-top:44px}}
@media(max-width:480px){.release-list{grid-template-columns:1fr;gap:18px}.design-option ul{font-size:17px}.case-demo{margin-top:40px}}

@media(max-width:480px){[data-case] .chapter-nav a{font-size:11px}}

[data-case="netflow"] #overview .overview-artifact{margin-top:32px}
[data-case="netflow"] .context-photo{margin-bottom:40px}
[data-case="netflow"] .design-goals{position:relative;margin-top:0;padding-top:40px}
[data-case="netflow"] .design-goals::before{content:"";position:absolute;top:0;left:50%;width:100vw;height:1px;transform:translateX(-50%);background:var(--rule);pointer-events:none}

[data-case="netflow"] #impact .artifact img{background:transparent}

/* Display frames trim source gutters while enlargement keeps the complete artifact. */
.testimonials .testimonial-cards{display:grid;grid-template-columns:958fr 706fr 706fr;column-gap:calc(36 / 2500 * 100%);align-items:start}
.testimonial-panel{display:block;min-width:0;overflow:hidden;border:1px solid #f2ccbf;border-radius:12px;background:#fff}
.testimonial-panel img{display:block;width:calc(2500 / var(--crop-width) * 100%);max-width:none;height:auto;margin-top:calc(-12 / var(--crop-width) * 100%);transform:translateX(calc(-1 * var(--crop-left) / 2500 * 100%));background:transparent}
[data-case="netflow"] #overview .overview-artifact .image-button{aspect-ratio:2112/1175;overflow:hidden}
[data-case="netflow"] #overview .overview-artifact img{width:calc(2138 / 2112 * 100%);max-width:none;transform:translate(-.561272217%, -.836120401%)}
@media(max-width:760px){.testimonials .testimonial-cards{grid-template-columns:1fr;row-gap:14px}}

/* The case narrative groups each explanation beneath its own heading. */
[data-case="netflow"] #process .chapter-heading,
[data-case="netflow"] #explorations .chapter-heading{display:block;text-align:center;margin-bottom:44px}
[data-case="netflow"] #process{padding-top:96px}
[data-case="netflow"] #solution-title{font:12px/1.5 "Courier New",Courier,monospace;letter-spacing:.08em;text-transform:uppercase}
[data-case="netflow"] .strategy-context{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,80px);align-items:center;margin-bottom:96px}
[data-case="netflow"] .strategy-copy{display:grid;gap:44px;min-width:0}
[data-case="netflow"] .strategy-copy .story{margin:0}
[data-case="netflow"] .strategy-copy .story-heading,
[data-case="netflow"] #impact .story-heading{grid-template-columns:1fr;gap:20px}
[data-case="netflow"] .strategy-copy .story-heading{margin:0}
[data-case="netflow"] .strategy-context .context-photo{width:100%;max-width:none;margin:0}
[data-case="netflow"] .design-goals{padding-top:64px}
[data-case="netflow"] .design-goals .story-heading{display:block;text-align:center;max-width:69ch;margin:0 auto 44px}
[data-case="netflow"] .design-goals .story-heading h3{margin-bottom:28px}
[data-case="netflow"] #explorations .lead{margin-inline:auto;text-align:center}
[data-case="netflow"] #explorations-title{font-size:clamp(2.1rem,3.1vw,3rem);line-height:1.04}
[data-case="netflow"] #explorations .lead{font-size:inherit;line-height:inherit}
[data-case="netflow"] .design-option h3{text-align:center}
[data-case="netflow"] :is(#solution,#impact) .section-intro{grid-template-columns:1fr;gap:28px}
[data-case="netflow"] :is(#solution,#impact) .solution-intro{max-width:69ch}
@media(max-width:760px){[data-case="netflow"] #process{padding-top:72px}[data-case="netflow"] .strategy-context{grid-template-columns:1fr;gap:40px;margin-bottom:72px}[data-case="netflow"] .strategy-copy{gap:40px}[data-case="netflow"] .design-goals{padding-top:48px}}

/* Solution and outcomes share a centered reading axis. */
[data-case="netflow"] #solution > .chapter{padding-top:28px}
[data-case="netflow"] #solution .chapter-heading{position:relative;padding-bottom:28px}
[data-case="netflow"] #solution .chapter-heading::after{content:"";position:absolute;left:50%;bottom:0;width:100vw;height:1px;transform:translateX(-50%);background:var(--rule);pointer-events:none}
[data-case="netflow"] #solution{overflow-x:clip}
[data-case="netflow"] #solution :is(figure.artifact,figure.prototype){width:min(100%,1196px);margin-inline:auto}
[data-case="netflow"] #solution :is(figure.artifact,figure.prototype) img{width:100%}
[data-case="netflow"] :is(#solution,#impact) .section-intro,
[data-case="netflow"] #impact .story-heading{text-align:center;justify-items:center}
[data-case="netflow"] :is(#solution,#impact) .solution-intro{margin-inline:auto}

/* Scoped reading refinements for the two case studies. */
[data-case="netflow"] #solution .chapter-heading h2{width:100%;max-width:none;text-align:center;text-wrap:wrap}
[data-case="netflow"] #design-goals{scroll-margin-top:60px}
[data-case="monitors"] #strategy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:start}
[data-case="monitors"] #strategy .chapter-heading{margin-bottom:28px}
[data-case="monitors"] #strategy .release-list{align-self:end;grid-template-columns:1fr;gap:28px;margin:0;padding:0 0 0 28px;border-top:0;list-style-position:outside}
[data-case="monitors"] :is(#leadership,#design) .story-heading{grid-template-columns:1fr;gap:20px}
[data-case="monitors"] #solution .section-intro{grid-template-columns:1fr;gap:28px;justify-items:center;text-align:center}
[data-case="monitors"] #solution .solution-intro{max-width:69ch;margin-inline:auto}
[data-case="monitors"] .artifact--rounded .image-button{border-radius:12px;overflow:hidden}
[data-case="monitors"] #design .artifact--focused{margin-left:0;margin-right:auto}
[data-case="monitors"] #design .artifact--focused figcaption{text-align:left}
[data-case="monitors"] #impact-title{text-align:center}
[data-case="monitors"] #impact .impact-grid{text-align:center}
[data-case="monitors"] #impact .impact-title::after{margin-inline:auto}
[data-case="monitors"] #impact .impact-grid p{margin-inline:auto}
[data-case="monitors"] #impact .testimonials h3{text-align:center}
[data-case="monitors"] #opportunity .full-artifact{width:min(100%,780px);margin-inline:auto}
@media(max-width:760px){[data-case="monitors"] #strategy{grid-template-columns:1fr;gap:40px}[data-case="monitors"] #strategy .release-list{align-self:start}}
[data-case="monitors"] #leadership{position:relative}
[data-case="monitors"] #leadership::before{content:"";position:absolute;top:0;left:50%;width:100vw;height:1px;transform:translateX(-50%);background:var(--rule);pointer-events:none}
[data-case="monitors"] #leadership .chapter-heading{display:block}