/* Use the same viewport composition as the sticky homepage project stage. */
html[data-project-page]:not([data-project-page="overview"]){--header-height:10svh}
.case-hero{overflow:clip}
.case-hero .hero-inner{height:80svh;min-height:0;padding-block:0;position:relative}
.case-hero .hero-copy{position:relative;z-index:1;padding-bottom:80px}
.case-hero .hero-description{margin:22px 0 0}
.case-hero .hero-art{isolation:isolate}
.case-hero .hero-art>.image-frame{position:relative;z-index:1}
[data-project-page="monitors"] .hero-art,[data-project-page="netflow"] .hero-art{aspect-ratio:1}
[data-project-page="monitors"] .hero-art>.image-frame{position:absolute;inset:calc(15.75% - 14px) calc(8.54% - 14px);aspect-ratio:auto}
[data-project-page="netflow"] .hero-art>.image-frame{position:absolute;top:calc(23.3% - 14px);right:calc(4.2% - 14px);bottom:calc(23.9% - 14px);left:calc(4.2% - 14px);aspect-ratio:auto;translate:0 var(--netflow-grid-offset,0px)}
.hero-asset-grid{position:absolute;z-index:0;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse at 48% 52%,#000 38%,transparent 76%);mask-image:radial-gradient(ellipse at 48% 52%,#000 38%,transparent 76%)}
.hero-asset-grid-line{position:absolute;background:rgba(70,67,63,.12)}
.hero-asset-grid-line--vertical{top:0;bottom:0;width:1px}
.hero-asset-grid-line--horizontal{left:0;right:0;height:1px}
.hero-asset-grid-diamond{position:absolute;width:4px;height:4px;background:rgba(70,67,63,.12);transform:translate(-50%,-50%) rotate(45deg)}
.hero-grid-accent{position:absolute;z-index:0;width:4px;height:4px;background:#c9c6c0;transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}
@media(max-width:760px){.case-hero .hero-inner{height:auto;min-height:80svh;align-content:center;padding-block:28px}.case-hero .hero-copy{padding-bottom:80px}.case-hero .hero-art:not([data-actions-art]){width:min(100%,34svh);justify-self:center}}
@media(max-width:600px){.case-hero h1{font-size:clamp(2.9rem,11vw,3.8rem)}.case-hero .hero-description{font-size:1rem}.case-hero .hero-art[data-actions-art]{width:100%;justify-self:stretch}}

/* Case heroes reuse the homepage SVG canvases at their authored proportions. */
[data-project-page="monitors"] .hero-art>.image-frame{inset:0;padding:0;background:transparent}
[data-project-page="monitors"] .hero-window{background:transparent}
[data-project-page="monitors"] .hero-window img{object-fit:contain}
[data-project-page="netflow"] .hero-art>.image-frame{padding:0;background:transparent;top:23.3%;right:4.2%;bottom:23.9%;left:4.2%}