/* Credit Passport glow, confined to the project overview hero. */
#passport .preview-phone-surface::after{content:none}
#passport .passport-glow{position:absolute;top:0;left:-60px;width:calc(100% + 120px);height:100%;pointer-events:none;z-index:-2}
/* Match the homepage phone viewport and scale at every breakpoint. */
#passport .preview-phone-surface{width:308px;height:644px;margin-inline:auto}
#passport .preview-phone-surface iframe{width:384px;height:802px;max-width:none;transform:scale(.802);transform-origin:top left}
@media(max-width:359px){
  #passport .preview-phone-surface{width:264px;height:552px}
  #passport .preview-phone-surface iframe{transform:scale(.6875)}
}

@media(min-width:761px){
body.project-overview .brief-hero{grid-template-columns:minmax(0,1.2fr) minmax(356px,1fr);gap:60px;padding:65px max(40px,calc((100vw - 1200px)/2)) 120px;min-height:100svh;align-items:start}
#passport.hero-demo{width:100%;max-width:none;margin:0;padding-top:24px;position:relative;margin-top:max(0px,calc((100svh - 877px)/2))}
#passport .demo-heading{position:absolute;bottom:100%;left:0;right:0}
}
@media(max-width:760px){
body.project-overview .brief-hero{display:flex;flex-direction:column;gap:28px;padding:32px 22px 88px;align-items:stretch}
.brief-hero .hero-copy{display:contents}
.brief-hero .overview-intro{order:0;min-height:480px}
.brief-hero .overview-intro h1{font-size:42px}
.brief-hero .overview-intro>.eyebrow{margin-bottom:20px}
.brief-hero .overview-intro .hero-lede{font-size:18px}
#passport.hero-demo{order:1;padding-top:20px;margin:0 auto;position:relative}
#passport .demo-heading{position:absolute;bottom:100%;left:0;right:0}
.brief-hero .project-statement{order:2;margin:0}
.brief-hero .hero-actions{order:3;margin:0}
.brief-hero .hero-footnote{order:4;margin:0}
}
@media(max-width:359px){body.project-overview .brief-hero{padding-inline:18px}}