/* v21: use the contact hero's height and full-height stage.
   Frame the trio from the head down to the upper thighs, not as an inset card. */
.hero.hero-trio{padding:0;gap:0}
.hero-trio:after{display:none}
.hero-trio .portrait-stage{container-type:size;overflow:hidden}
.hero-trio .portrait-stage:after{display:none}
.hero-trio .portrait-stage #hero-poster,
.hero-trio .portrait-stage #hero-video{
 inset:auto;top:-3cqh;right:-43cqh;bottom:auto;left:auto;
 width:257.06cqh;max-width:none;height:140cqh;
 object-fit:fill;object-position:center top;transform:none!important;
}
.hero-trio .hero-copy{max-width:38%;padding-left:5%;padding-right:0}
.hero-trio h1{font-size:clamp(44px,4.3vw,70px)}
.hero-trio .hero-description{max-width:340px}
.hero-trio .hero-actions{gap:18px}
.hero-comparison{display:flex;gap:20px;align-items:center;justify-content:center;padding:12px 5%;background:#1a1a1a;color:#eee;font-size:12px;flex-wrap:wrap}
.hero-comparison a{padding:6px 13px;border:1px solid #777;border-radius:999px}
.hero-comparison a[aria-current]{border-color:#ef263b;background:#ef263b}
@media(min-width:1100px){
 .hero-trio .hero-copy{max-width:min(500px,34%);padding-left:0}
}
@media(max-width:1099px){
 .hero.hero-trio{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;align-items:stretch}
 .hero-trio .portrait-stage{position:relative;inset:auto;width:100%;height:64vw;flex:none;transform:none;z-index:0}
 .hero-trio .portrait-stage #hero-poster,.hero-trio .portrait-stage #hero-video{height:132cqh;width:242.35cqh;right:auto;left:50%;transform:translateX(-50%)!important}
 .hero-trio .hero-copy{max-width:100%;margin:0;padding:32px 6% 95px}
 .hero-trio h1{font-size:clamp(48px,7vw,70px)}
 .hero-trio .hero-description{max-width:450px}
}

/* Keep the trio inside its own column on ordinary desktop screens. */
@media (min-width:1100px){
 .hero.hero-trio{height:clamp(540px,44vw,690px);min-height:540px;max-height:690px}
 .hero.hero-trio .hero-copy{width:36%;max-width:500px;margin-left:max(5%,calc((100% - 1500px)/2));padding:35px 0 65px}
 .hero.hero-trio .portrait-stage{width:min(57%,1000px);height:100%;left:auto;right:max(2%,calc((100% - 1600px)/2));top:0;transform:none}
 .hero.hero-trio .portrait-stage #hero-poster,.hero.hero-trio .portrait-stage #hero-video{width:159%;height:auto;aspect-ratio:3900/2124;left:-30%;right:auto;top:0;bottom:auto;object-fit:contain;transform:none!important}
 .hero.hero-trio h1{font-size:clamp(34px,3.15vw,50px)}
 .hero.hero-trio .hero-description{max-width:365px;font-size:16px}
}
@media (min-width:700px) and (max-width:1099px){
 .hero.hero-trio .hero-copy{display:grid;grid-template-columns:1fr 1fr;column-gap:7%;padding:30px 6% 85px}
 .hero.hero-trio .hero-copy .eyebrow{grid-column:1/-1}
 .hero.hero-trio h1{grid-row:2/4;margin-top:10px;font-size:clamp(34px,4.2vw,46px)}
 .hero.hero-trio .hero-description{margin-top:10px;margin-bottom:18px}
 .hero.hero-trio .hero-actions{align-self:start}
}