/* Real artwork covers for concepts that have completed visual assets. */
.bean .shape,.wheelz .shape,.metalband .shape,.wingz .shape{width:48%;height:74%;right:18px;top:13%;border:0;border-radius:12px;transform:none;background-size:cover;background-repeat:no-repeat;box-shadow:0 18px 40px rgba(0,0,0,.22)}
.bean .shape{background-image:linear-gradient(rgba(36,83,63,.08),rgba(36,83,63,.2)),url("b3an-and-bun-counter.png");background-position:66% center}
.wheelz .shape{background-image:url("wh33lz-repair-shop.png");background-position:center 35%}
.metalband .shape{background-image:url("ch-zwiz-fault-animal.png");background-position:center}
.wingz .shape{background-image:url("bird-brain-wingz-hero.png");background-position:68% center}
@media(max-width:700px){.bean .shape,.wheelz .shape,.metalband .shape,.wingz .shape{width:58%;height:70%;right:-10%;top:15%;opacity:.42}.bean>div,.wheelz>div,.metalband>div,.wingz>div{position:relative;z-index:2}}

.cesrbhome .shape,.frethouse .shape,.stash .shape,.pulse .shape,.projectroom .shape,.bench .shape,.booked .shape,.release .shape{width:50%;height:72%;right:16px;top:14%;border:1px solid rgba(255,255,255,.18);border-radius:10px;transform:none;background-size:contain;background-repeat:no-repeat;background-position:center;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.cesrbhome .shape{background-color:#0d1015;background-image:url("cover-cesrbhome.png")}.frethouse .shape{background-color:#172232;background-image:url("cover-frethouse.png")}.stash .shape{background-color:#eef2f4;background-image:url("cover-stash.png")}.pulse .shape{background-color:#080b09;background-image:url("cover-pulse.png")}.projectroom .shape{background-color:#f3f0ea;background-image:url("cover-projectroom.png")}.bench .shape{background-color:#22241f;background-image:url("cover-bench.png")}.booked .shape{background-color:#eef1f5;background-image:url("cover-booked.png")}.release .shape{background-color:#08090c;background-image:url("cover-release.png")}
@media(max-width:700px){.cesrbhome .shape,.frethouse .shape,.stash .shape,.pulse .shape,.projectroom .shape,.bench .shape,.booked .shape,.release .shape{width:62%;height:68%;right:-12%;top:16%;opacity:.35}.cesrbhome>div,.frethouse>div,.stash>div,.pulse>div,.projectroom>div,.bench>div,.booked>div,.release>div{position:relative;z-index:2}}

/* Covers occupy their own column; text never sits underneath them. */
.demo-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,48%);grid-template-rows:1fr auto;gap:18px 24px;align-items:start;min-height:360px}.demo-card>.shape{position:relative!important;grid-column:2;grid-row:1 / 3;width:100%!important;height:100%!important;min-height:310px;right:auto!important;top:auto!important;align-self:stretch;border-radius:12px;opacity:1}.demo-card>div{grid-column:1;grid-row:1;max-width:none}.demo-card>.visit{grid-column:1;grid-row:2;align-self:end}.demo-card h2{font-size:clamp(2rem,3.7vw,3.45rem);overflow-wrap:anywhere}.demo-card p{max-width:30ch}
@media(max-width:900px) and (min-width:701px){.demo-card{grid-template-columns:1fr;grid-template-rows:auto auto auto}.demo-card>.shape{grid-column:1;grid-row:1;height:230px!important;min-height:230px}.demo-card>div{grid-column:1;grid-row:2}.demo-card>.visit{grid-column:1;grid-row:3}.demo-card h2{font-size:clamp(2rem,5vw,3rem)}}
@media(max-width:700px){.demo-card{grid-template-columns:1fr;grid-template-rows:auto auto auto;min-height:0}.demo-card>.shape{grid-column:1;grid-row:1;width:100%!important;height:230px!important;min-height:230px;right:auto!important;top:auto!important;opacity:1}.demo-card>div{grid-column:1;grid-row:2;max-width:none}.demo-card>.visit{grid-column:1;grid-row:3;margin-top:10px}.demo-card p{max-width:44ch}}

/* Screen concepts need a wide, readable preview instead of a narrow photo crop. */
.demo-card.cesrbhome,.demo-card.frethouse,.demo-card.stash,.demo-card.pulse,.demo-card.projectroom,.demo-card.bench,.demo-card.booked,.demo-card.release{grid-template-columns:1fr;grid-template-rows:260px auto auto;min-height:500px}.demo-card.cesrbhome>.shape,.demo-card.frethouse>.shape,.demo-card.stash>.shape,.demo-card.pulse>.shape,.demo-card.projectroom>.shape,.demo-card.bench>.shape,.demo-card.booked>.shape,.demo-card.release>.shape{grid-column:1;grid-row:1;width:100%!important;height:260px!important;min-height:260px;background-size:contain;background-position:center}.demo-card.cesrbhome>div,.demo-card.frethouse>div,.demo-card.stash>div,.demo-card.pulse>div,.demo-card.projectroom>div,.demo-card.bench>div,.demo-card.booked>div,.demo-card.release>div{grid-column:1;grid-row:2}.demo-card.cesrbhome>.visit,.demo-card.frethouse>.visit,.demo-card.stash>.visit,.demo-card.pulse>.visit,.demo-card.projectroom>.visit,.demo-card.bench>.visit,.demo-card.booked>.visit,.demo-card.release>.visit{grid-column:1;grid-row:3;margin-top:4px}.demo-card.cesrbhome h2,.demo-card.frethouse h2,.demo-card.stash h2,.demo-card.pulse h2,.demo-card.projectroom h2,.demo-card.bench h2,.demo-card.booked h2,.demo-card.release h2{font-size:clamp(2.2rem,4vw,3.4rem)}
@media(max-width:700px){.demo-card.cesrbhome,.demo-card.frethouse,.demo-card.stash,.demo-card.pulse,.demo-card.projectroom,.demo-card.bench,.demo-card.booked,.demo-card.release{grid-template-rows:210px auto auto;min-height:0}.demo-card.cesrbhome>.shape,.demo-card.frethouse>.shape,.demo-card.stash>.shape,.demo-card.pulse>.shape,.demo-card.projectroom>.shape,.demo-card.bench>.shape,.demo-card.booked>.shape,.demo-card.release>.shape{height:210px!important;min-height:210px}}