/* One phone/tablet gutter shared by navigation, content, and ending. */
@media(max-width:1100px){body{--mobile-page-gutter:clamp(12px,3.4375vw,20px)}}
@media(max-width:800px){
 body .wrap,
 body>.wrap:has(>header),
 body>.wrap.sticky-site-menu{padding-left:var(--mobile-page-gutter);padding-right:var(--mobile-page-gutter)}
 body .site-ending{width:calc(100% - 2 * var(--mobile-page-gutter));max-width:none}
 body main.case-shell{width:100%;max-width:none;padding-inline:var(--mobile-page-gutter)}
 body .case-index-shell{padding-inline:var(--mobile-page-gutter)}
 body #work{padding-inline:0!important}
 body #work .portfolio-heading h2{font-size:clamp(22px,6vw,30px)}
 body .site-ending #next-step.handshake-section{padding-inline:0}

 /* Follow the reference's phone order: offer, examples, primary action. */
 body .hero{display:flex!important;flex-direction:column;gap:0!important;height:auto!important;min-height:0!important;padding:0!important}
 body .hero .hero-copy{display:contents!important}
 body .hero h1{order:0;width:100%;margin:24px 0 0!important}
 body .hero .hero-lead-secondary{display:inline;margin:0}
 body .hero .lead{order:1;width:100%;max-width:none;padding-left:0;margin:18px 0 0}
 body .hero .visual.montage{order:2!important;width:100%;height:clamp(230px,64vw,320px)!important;min-height:0!important;max-height:320px!important;margin:24px 0 0!important;align-self:stretch}
 body .hero .actions{order:3!important;width:100%;display:grid;justify-items:center;gap:12px;margin:24px 0 28px}
 body .hero .actions .btn{width:86%;max-width:340px;min-height:68px;padding:18px 22px;font-size:18px}
}
@media(max-width:600px){body #work .portfolio-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:360px){
 body .mobile-copy-contacts{gap:6px}
 body .mobile-copy-contacts .contact-detail{padding-left:0;padding-right:0}
}
@media(max-width:800px){
 body .wrap .wrap.samples-page{width:100%;max-width:none;padding-left:0;padding-right:0}
}

/* Keep case content aligned with the compact header on tablets. */
@media(min-width:801px) and (max-width:1100px){
 body main.case-shell{width:100%;max-width:none;padding-inline:32px}
}