/* The supplied hardware arrangement has a transparent background and no extra equipment. */
.hero.updated-hero.hero-assortment{
  height:clamp(540px,43vw,740px);
  min-height:0;
  background:#071d2b;
}
.hero-assortment .hero-bg{
  background:#071d2b url('assets/hero-installation.webp') 30% center/cover no-repeat;
  filter:saturate(.45);
  animation:none;
}
.hero.updated-hero.hero-assortment::before{
  background:linear-gradient(90deg,#041a2bf2,#041a2be8 36%,#041a2b96 70%,#041a2bbf);
  pointer-events:none;
}
.hero-assortment .hero-shine,.hero-assortment::after,.scenic-products .scenic-shine{display:none}
.hero-assortment .hero-grid{z-index:2;pointer-events:none}
.hero-assortment .hero-copy{width:43%;max-width:520px;padding:0 28px 0 0;pointer-events:auto}
.hero-assortment h1{font-size:clamp(38px,3.65vw,58px);line-height:1.35;letter-spacing:-.6px;margin-bottom:22px}
.hero-assortment .hero-copy>p.hero-description{font-size:16px;line-height:1.9;color:#deebf2;text-shadow:none;margin-bottom:28px}
.hero-assortment .hero-actions{gap:12px;flex-wrap:wrap}
.hero-assortment .hero-actions .btn{padding:13px 22px;font-size:13px}
.real-product-scene{
  position:absolute;
  inset:0 0 0 auto;
  width:55%;
  height:100%;
  background:transparent;
  overflow:hidden;
  pointer-events:none;
}
.real-product-scene::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 58% 55%,#67a6c035,transparent 69%)}
.studio-assortment{position:absolute;inset:26px 32px 28px 0;margin:0;display:flex;align-items:center;justify-content:center}
.studio-assortment img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 18px 14px #0005)}
.scenic-products{min-height:clamp(390px,31vw,550px);background:#071d2b}
.scenic-products::before{
  background:linear-gradient(100deg,#061d2cf5,#0b344bce 60%,#0a2a3ddc),url('assets/hero-installation.webp') left center/cover;
}
.scenic-products .banner-artwork{opacity:1}
.scenic-products .real-product-scene{width:51%}
.scenic-products .studio-assortment{inset:24px 34px 28px 6px}
.scenic-products .scenic-content{padding-top:clamp(64px,7vw,110px);padding-bottom:64px;pointer-events:none}
.scenic-products .breadcrumbs{max-width:45%;margin-bottom:20px;pointer-events:auto}
.scenic-products h1{max-width:45%;font-size:clamp(34px,3.2vw,48px);line-height:1.35;margin-top:0;margin-bottom:20px}
.scenic-products p{max-width:42%;font-size:14px;line-height:1.9;margin:0;color:#d4e5ee}
.topline .wrap{gap:15px}
.topline .wrap>span{margin-right:auto}
.topline .wrap>a{white-space:nowrap}
.contact-item a[href^="mailto:"]{overflow-wrap:anywhere}
@media(min-width:1650px){
  .hero-assortment .hero-copy{width:43%;max-width:510px}
  .hero-assortment h1{font-size:58px}
  .real-product-scene{width:calc(50% + 62px)}
  .studio-assortment{inset:28px max(28px,calc((100vw - 1700px)/2)) 28px 20px}
  .scenic-products .real-product-scene{width:51%}
}
@media(max-width:1100px) and (min-width:801px){
  .hero-assortment .hero-copy{width:43%;padding-right:16px}
  .hero-assortment h1{font-size:37px}
  .hero-assortment .hero-copy>p.hero-description{font-size:14px}
  .hero-assortment .hero-actions{gap:10px}
  .hero-assortment .hero-actions .btn{font-size:12px;padding:12px 15px}
  .studio-assortment{inset:20px 16px}
  .scenic-products .studio-assortment{inset:20px 16px}
  .scenic-products p{font-size:13px}
}
@media(max-width:800px){
  .hero.updated-hero.hero-assortment{height:auto;padding-bottom:0;display:flex;flex-direction:column}
  .hero-assortment .hero-grid{order:0;height:auto;padding-top:38px;padding-bottom:36px;align-items:flex-start}
  .hero-assortment .hero-copy{width:100%;max-width:100%;padding:0}
  .hero-assortment h1{font-size:40px;line-height:1.3;margin-bottom:18px}
  .hero-assortment .hero-copy>p.hero-description{font-size:15px;line-height:1.8;margin-bottom:22px;max-width:100%}
  .hero-assortment .hero-bg{background-position:left top}
  .hero.updated-hero.hero-assortment::before{background:linear-gradient(180deg,#041a2be8,#041a2bbf)}
  .hero-assortment .real-product-scene{position:relative;inset:auto;order:1;width:100%;height:auto;aspect-ratio:1.6}
  .hero-assortment .studio-assortment{inset:4px 24px 30px 16px}
  .scenic-products{display:flex;flex-direction:column;min-height:0}
  .scenic-products .scenic-content{order:0;padding-top:30px;padding-bottom:32px}
  .scenic-products .breadcrumbs{max-width:100%;margin-bottom:16px;font-size:11px}
  .scenic-products h1{max-width:100%;font-size:36px;margin-bottom:14px}
  .scenic-products p{max-width:100%;font-size:13px;line-height:1.85;margin:0}
  .scenic-products .banner-artwork{position:relative;inset:auto;order:1}
  .scenic-products .real-product-scene{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1.6}
  .scenic-products .studio-assortment{inset:4px 24px 30px 16px}
  .topline .wrap{flex-wrap:wrap;justify-content:flex-end;gap:3px 14px;padding-top:7px;padding-bottom:7px}
  .topline .wrap>span{width:100%;font-size:8px}
  .topline .wrap>a{font-size:11px}
}
@media(max-width:480px){
  .hero-assortment .hero-grid{padding-top:30px;padding-bottom:30px}
  .hero-assortment h1{font-size:32px;letter-spacing:-.3px}
  .hero-assortment .hero-copy>p.hero-description{font-size:13px;line-height:1.85;margin-bottom:21px}
  .hero-assortment .hero-actions .btn{font-size:12px;padding:12px 18px}
  .hero-assortment .real-product-scene,.scenic-products .real-product-scene{aspect-ratio:1.3}
  .hero-assortment .studio-assortment,.scenic-products .studio-assortment{inset:4px 16px 26px 8px}
  .scenic-products .scenic-content{padding-top:26px;padding-bottom:28px}
  .scenic-products h1{font-size:32px}
  .scenic-products p{font-size:12px}
  .topline .wrap>span{letter-spacing:0}
}