h1,h2,h3,p{word-break:keep-all;overflow-wrap:break-word}
.demo.profile{background:#d3caff;color:#232323}
.demo.profile .demo-content{width:70%}
.demo.profile:after{content:'↗';position:absolute;right:8%;bottom:9%;font-size:50px;font-weight:400}
.demo.archive{background:#fff;color:#202020}
.demo.archive .demo-content{border-left:4px solid #252525;padding-left:7%}
.demo.cinematic{background:#252525;color:#fff}
.demo.cinematic:before{content:'';position:absolute;inset:0;background:url(architecture.jpg) center/cover;filter:brightness(.45)}
.demo.spatial{background:#1f2523;color:white}
.demo.spatial:before{content:'';position:absolute;inset:0;background:url(studio-hero.png) 70% center/cover;filter:grayscale(1) brightness(.5)}
.tile .demo.profile h3,.tile .demo.archive h3,.tile .demo.cinematic h3,.tile .demo.spatial h3{font-size:28px}
.demo.architecture:before{background:url(architecture.jpg) center/cover;filter:brightness(.58)}
.demo.saas h3{width:100%}
.tile .demo h3{font-size:28px}
.tile .demo.editorial h3{font-size:43px}
.tile .demo.architecture h3{font-size:37px}
.tile .demo.product-visual h3{font-size:23px}
.tile .demo.manufacturing h3{font-size:24px}
.tile .demo.saas h3{font-size:21px}
.tile .demo small{display:none}
.tile .demo-content{margin:auto 0}
.icon:disabled{opacity:.35;cursor:default;background:#eee}
@media(max-width:650px){
 .tile .demo h3{font-size:18px}
 .tile .demo.editorial h3{font-size:22px}
 .tile .demo.architecture h3{font-size:21px}
 .tile .demo.product-visual h3{font-size:12px}
 .tile .demo.manufacturing h3{font-size:13px}
 .tile .demo.saas h3{font-size:12px}
 .tile .demo p{display:none}
 .tile .demo.contact-demo h3,.tile .demo.flow h3{font-size:16px}
 .tile .demo-link{margin-top:3px!important}
 .hero-copy{max-width:88%}
 .closing h2{font-size:31px}
 .tile .demo.profile h3,.tile .demo.archive h3,.tile .demo.cinematic h3,.tile .demo.spatial h3{font-size:18px}
 .tile .demo.profile:after{font-size:25px}
 .header .brand{width:179px;height:76px;gap:13px;transform:scale(.85);transform-origin:left center;margin-right:-27px}
 .header .symbol,.header .wordmark{transform:none;margin-right:0}
}
@media(max-width:360px){
 .grid{grid-template-columns:1fr}
 .tile .demo h3{font-size:28px}
 .tile .demo.editorial h3{font-size:34px}
 .tile .demo.architecture h3{font-size:35px}
 .tile .demo.product-visual h3{font-size:20px}
 .tile .demo.manufacturing h3{font-size:22px}
 .tile .demo.saas h3{font-size:20px}
 .tile .demo.contact-demo h3,.tile .demo.flow h3{font-size:27px}
 .tile .demo-nav strong{font-size:10px}
 .tile .demo-nav{font-size:7px}
}