/* Give the first viewport to the artwork. Its height is limited by both the
   usable viewport and the actual middle-column width, so nothing is cropped. */
.topbar{height:34px;padding:0 20px}
.workspace-title{font-size:13px;line-height:1.4;font-weight:500;color:#53657e;margin:0}
.workspace-title span{font-size:10px;font-weight:400;color:#a0acbd;margin-left:5px}
.top-actions{font-size:9px;gap:13px}
.contact-link{padding:3px 8px}
main{container-type:inline-size;padding-top:8px}
.hero-card{scroll-margin-top:42px}
.hero-heading{height:40px;min-height:40px;padding:5px 13px;gap:9px}
.hero-heading h2{font-size:18px;line-height:1.35}
.hero-heading .project-link{padding:5px 10px;font-size:10px;gap:10px}
.supplied-office.scene{height:min(calc(100svh - 174px),calc((100cqw - 22px)*.75));min-height:180px;max-height:none;aspect-ratio:auto}
.scene-canvas{height:100%;width:auto;aspect-ratio:4/3;max-width:100%}
.office-agent-caption{min-height:22px;padding:4px 12px 0;line-height:1.5;gap:6px}
.office-agent-caption b{font-size:9px}
.office-agent-caption>span{font-size:8px}
.journey{margin:4px 10px 0;gap:4px}
.journey-step{padding:5px 6px;gap:6px}
.journey-step>span{width:18px;height:18px;font-size:7px}
.journey-step b{font-size:10px;line-height:1.5}
.journey-step small{display:none}
.journey-detail{margin:0 12px;min-height:0;padding:4px 0 6px;gap:6px;line-height:1.5}
.journey-detail p{font-size:9px;line-height:1.5}
.journey-detail>span{font-size:7px}
.insights{top:34px;height:calc(100svh - 34px)}
@media(min-width:1600px){main{padding-top:8px}.hero-heading{padding:5px 14px}.hero-heading h2{font-size:19px}}
@media(max-width:1200px){main{padding-top:8px}.topbar{padding:0 15px}.workspace-title span{display:none}}
@media(max-width:780px){
 .topbar{display:none}
 main{padding-top:7px}
 .hero-heading{height:38px;min-height:38px;padding:5px 11px}
 .hero-heading h2{font-size:18px}
 .hero-card{scroll-margin-top:60px}
 .supplied-office.scene{height:auto;min-height:0;aspect-ratio:4/3}
 .scene-canvas{width:100%;height:100%}
 .office-agent-caption{min-height:24px;padding:5px 11px 1px}
 .journey-step b{font-size:9px}
}
@media(max-width:520px){
 .hero-heading h2{font-size:17px}
 .hero-heading .project-link{font-size:8px;padding:5px 7px;gap:5px}
 .office-agent-caption{min-height:24px;gap:4px;flex-wrap:nowrap}
 .office-agent-caption b{font-size:8px}
 .office-agent-caption>span{font-size:7px;flex-basis:auto;padding-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .journey{margin:3px 6px 0;gap:1px}
 .journey-step{padding:5px 4px;gap:4px}
 .journey-step b{font-size:8px}
 .journey-detail{margin:0 10px;padding:4px 0 6px}
 .journey-detail p{font-size:8px}
}