/* Separate painted canvases, extended above and below the flow.
   The entire section is photographed material; HTML occupies the reserved areas. */
@media(max-width:900px){
 .hero{display:block;padding:0;background:#f4f9fc;position:relative}
 .hero .hero-layout{display:grid;width:100%;max-width:none;height:max(820px,125vw);min-height:0;margin:0;padding:0;grid-template-columns:minmax(0,1fr);grid-template-rows:34% 40% 26%;grid-template-areas:"intro" "visual" "actions";gap:0;align-content:stretch}
 .hero .hero-copy{display:contents}
 .hero .hero-intro{grid-area:intro;align-self:start;width:100%;max-width:720px;padding:34px 30px 0;margin-inline:auto;z-index:1}
 .hero>.hero-canvas{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;z-index:0}
 .hero-canvas picture{position:absolute;inset:0;width:100%;height:100%;transform:none}
 .hero-canvas img{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;object-position:center;transform:none;mask-image:none;-webkit-mask-image:none}
 .hero .hero-actions{grid-area:actions;align-self:end;width:100%;max-width:720px;padding:18px 30px 28px;margin-inline:auto;z-index:1}
 .hero .hero-actions .meeting-highlight{margin:0 auto 20px}
 .hero .hero-actions .hero-footnote{margin:12px 0 0}
}
@media(max-width:600px){
 .hero .hero-layout{height:max(860px,250vw);grid-template-rows:25% 54% 21%}
 .hero .hero-intro{padding:27px 22px 0}
 .hero .hero-intro h1{margin-bottom:0;text-shadow:0 1px 8px #ffffffb3}
 .hero .hero-actions{max-width:464px;padding:15px 22px 20px}
 .hero .hero-actions .meeting-highlight{margin-bottom:16px}
 .hero .hero-actions .hero-footnote{font-size:11px;line-height:1.7;margin-top:10px}
}
@media(max-width:360px){
 .hero .hero-intro h1{font-size:34px}
 .hero .meeting-highlight{padding:12px 11px}
 .hero .hero-actions>.button{font-size:13px}
}