/* The scene spans the viewport; readable copy keeps its own measure. */
[data-hero="noise"] .site-header,
[data-hero="noise"] .hero{max-width:none}
[data-hero="noise"] .hero{overflow:hidden;isolation:isolate}
.hero-noise{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;mask-image:linear-gradient(180deg,transparent,#000 10%,#000 78%,transparent 98%)}
.hero-noise canvas{display:block;width:100%;height:100%}
@media(min-width:1550px){
 [data-hero="noise"] .site-header,[data-hero="noise"] .hero{padding-inline:clamp(64px,4.45vw,100px)}
 [data-hero="noise"] .hero h1{font-size:clamp(110px,7.1vw,138px);max-width:1400px}
}
@media(min-width:1550px) and (max-height:850px){[data-hero="noise"] .hero h1{font-size:clamp(74px,9.5svh,86px)}}
@media(max-width:600px){
 .hero-noise{mask-image:linear-gradient(180deg,transparent,#000 10%,#000 76%,transparent 96%)}
}