/* Keep every desktop/tablet product hero at the shared measured height. */
@media(min-width:641px){
html body .po-page--strings .po-hero{height:504px!important;min-height:504px!important}
}

/* Copy the homepage hero's exact top text offset. */
@media(min-width:981px){
html body .po-page--strings .po-hero{align-items:flex-start!important}
html body .po-page--strings .po-hero__content{padding-top:44px!important;padding-bottom:0!important}
html body .po-page--strings .po-hero .po-kicker{display:flex!important;width:max-content;max-width:100%}
}
@media(min-width:700px) and (max-width:980px){
html body .po-page--strings .po-hero{align-items:flex-start!important}
html body .po-page--strings .po-hero__content{padding-top:38px!important;padding-bottom:0!important}
html body .po-page--strings .po-hero .po-kicker{display:flex!important;width:max-content;max-width:100%}
}
@media(min-width:700px) and (max-width:980px) and (max-height:500px){
html body .po-page--strings .po-hero__content{padding-top:26px!important}
}

/* The string-waterfall reference has no product modifier. Mirror the photo
   without zooming or shifting it. */
html body .po-page--strings:not(.po-page--glass-mirror):not(.po-page--mesh):not(.po-page--sealed):not(.po-page--stone) .po-hero__media img{
transform:scaleX(-1)!important
}

/* Keep the waterfall visible behind the hero copy on all five product pages. */
html body .po-page--strings .po-hero:after{
background:linear-gradient(90deg,rgba(248,246,242,.96) 0%,rgba(248,246,242,.90) 32%,rgba(248,246,242,.68) 48%,rgba(248,246,242,.34) 60%,rgba(248,246,242,.10) 72%,rgba(248,246,242,.01) 88%)!important
}

/* Fit the complete two-column solution block below the desktop site header.
   Use the viewport-derived value as the minimum row height, not as a fixed
   height: longer copy can then enlarge the shared grid row, keeping the image,
   dark panel and following section on the same bottom edge. */
@media(min-width:801px){
html body .po-page--strings .po-solution{
height:auto!important;
min-height:clamp(520px,calc(100svh - 180px),580px)!important;
grid-auto-rows:minmax(clamp(520px,calc(100svh - 180px),580px),auto)!important;
align-items:stretch!important
}
html body .po-page--strings .po-solution__image,
html body .po-page--strings .po-solution__body{height:auto!important;min-height:0!important;align-self:stretch!important}
html body .po-page--strings .po-solution__body{padding:26px 48px!important;background:#213431!important}
html body .po-page--strings .po-solution .po-eyebrow{margin-bottom:10px!important}
html body .po-page--strings .po-solution h2{margin-bottom:12px!important;font-size:clamp(30px,2.1vw,34px)!important;line-height:1.18!important}
html body .po-page--strings .po-solution p{margin:0!important;font-size:14px!important;line-height:1.6!important}
html body .po-page--strings .po-solution .po-list{margin-top:12px!important}
html body .po-page--strings .po-solution .po-list li{padding:8px 0 8px 24px!important;font-size:13px!important;line-height:1.4!important}
html body .po-page--strings .po-solution .po-list li:before{top:17px!important}
}

/* Keep the shared CTA sketch below the rendered request form on narrow screens. */
@media(max-width:640px){
html body .po-page--strings .po-hero:after{background:linear-gradient(180deg,rgba(248,246,242,.06) 0%,rgba(248,246,242,.42) 42%,rgba(248,246,242,.80) 68%,rgba(248,246,242,.94) 100%)!important}
html body .po-page--strings .po-request__sketch{order:10!important;width:100%!important;margin:24px 0 0!important;aspect-ratio:auto!important;background:#fff!important;border:0!important;box-shadow:none!important}
html body .po-page--strings .po-request__sketch .po-request__sketch-base{max-height:none!important;mask-image:none!important;-webkit-mask-image:none!important}
}