/* Final review notes: only the five requested banners. */
body .clear-hero-copy,body .about-hero-copy{background:rgba(10,24,40,.46);padding:28px 32px;max-width:760px}
body .clear-hero-copy h1,body .about-hero-copy h2{color:#fff;font-weight:700;text-shadow:0 2px 5px #0009;line-height:1.22}
body .clear-hero-copy li,body .about-hero-copy p{color:#fff;font-size:20px;line-height:1.75;font-weight:500;text-shadow:0 1px 3px #0009}
body .clear-hero-copy .eyebrow{color:#fff;text-shadow:0 1px 3px #0009;font-size:14px!important}
body .clear-hero-copy ul{max-width:720px;gap:12px;margin-top:24px}
body .about-hero-copy p{max-width:680px}
@media(min-width:1101px){
 body:has(.clear-hero img[src="assets/clear/24.webp"]) .clear-hero-copy,
 body:has(.clear-hero img[src="assets/color/30.webp"]) .clear-hero-copy{max-width:none;width:100%}
 body:has(.clear-hero img[src="assets/clear/24.webp"]) .clear-hero h1,
 body:has(.clear-hero img[src="assets/color/30.webp"]) .clear-hero h1{font-size:clamp(30px,2.55vw,52px);white-space:nowrap;letter-spacing:-.045em}
 body:has(.clear-hero img[src="assets/clear/24.webp"]) .clear-hero h1 br,
 body:has(.clear-hero img[src="assets/color/30.webp"]) .clear-hero h1 br{display:none}
 body:has(.clear-hero img[src="assets/matte/43.webp"]) .clear-hero>.backdrop{aspect-ratio:2.55;height:auto;object-fit:cover;object-position:center}
 body:has(.clear-hero img[src="assets/matte/43.webp"]) .clear-hero h1,body .barrier-hero h1,body .about-hero h2{font-size:clamp(32px,2.8vw,48px)}
}
/* Match the Clear banner treatment; longer headings need a wider panel. */
@media(min-width:1101px){
 body .barrier-hero>.container,body .about-hero>.container{left:15%;width:70%;max-width:none}
 body .barrier-hero .clear-hero-copy,body .about-hero-copy{width:100%;max-width:none}
 body .barrier-hero h1,body .about-hero h2{font-size:clamp(30px,2.8vw,56px);white-space:nowrap;letter-spacing:-.045em}
 body .barrier-hero h1{font-size:clamp(28px,2.55vw,52px)}
 body .about-hero h2 br{display:none}
 body .barrier-hero .clear-hero-copy li,body .about-hero-copy p{font-size:clamp(20px,1.3vw,24px)}
 body .barrier-hero .clear-hero-copy ul,body .about-hero-copy p{max-width:1000px}
}
@media(max-width:1100px){body .clear-hero-copy,body .about-hero-copy{background:#f1f4f8;padding:28px}body .clear-hero-copy h1,body .clear-hero-copy li,body .clear-hero-copy .eyebrow,body .about-hero-copy h2,body .about-hero-copy p{color:#14243b;text-shadow:none}body .clear-hero-copy li,body .about-hero-copy p{font-size:18px}body .clear-hero h1{white-space:normal}}
@media(max-width:720px){body .clear-hero-copy,body .about-hero-copy{padding:22px}body .clear-hero-copy h1,body .about-hero-copy h2{font-size:30px}body .clear-hero-copy li,body .about-hero-copy p{font-size:17px;line-height:1.75}}