/* The supplied architectural still and all six cutouts are 1672 × 941 pixels.
   Every layer keeps that exact full-canvas geometry at every viewport size. */
.hero.hero-v8 {
  height:calc(100svh + 930px);
  min-height:1490px;
  max-height:none;
  overflow:clip;
  background:linear-gradient(180deg,#fff 0%,#fff 85%,#f8fbfd 100%);
}
.hero-v8 .hero-sticky {
  position:sticky;
  top:78px;
  height:calc(100svh - 78px);
  min-height:625px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:14px;
  overflow:hidden;
}
.hero-v8 .hero-copy {flex:none;padding:0 16px;}
.hero-v8 .hero h1,.hero-v8 h1 {line-height:1.3;}
.hero-v8 .house-scene {
  position:relative;
  width:min(96vw,1350px,calc(177.68svh - 457px));
  max-width:1350px;
  aspect-ratio:1672/941;
  flex:none;
  margin:0 auto;
  overflow:hidden;
  isolation:isolate;
  border:1px solid #e9edf0;
  border-radius:15px;
  background:#f8f3eb;
  box-shadow:0 24px 65px #263c5214,0 3px 15px #263c5207;
  direction:ltr;
}
.hero-v8 .house-scene>img.house-background,
.hero-v8 .house-scene>.house-layer,
.hero-v8 .house-scene>.house-layer>img,
.hero-v8 .house-complete {
  position:absolute;
  inset:0;
  width:100%;height:100%;
  max-width:none;
  display:block;
  object-fit:fill;
}
.hero-v8 .house-background {z-index:0;pointer-events:none;}
.hero-v8 .house-scene>.house-layer {
  z-index:2;
  opacity:var(--drop-opacity,0);
  transform:translate3d(0,var(--drop-y,-500px),0);
  will-change:transform,opacity;
  filter:drop-shadow(0 6px 4px #31404a16);
}
.hero-v8 .house-scene>.house-layer>img {pointer-events:none;}
/* Clip the clickable surface to the original appliance pixels. The cutout
   itself is still a 1672 × 941 image, so positioning cannot drift. */
.hero-v8 .house-layer[data-appliance="vacuum"]{clip-path:inset(48.3% 69.5% 27.8% 18.5%);z-index:7;}
.hero-v8 .house-layer[data-appliance="washer"]{clip-path:inset(47.8% 52.1% 31.2% 38.2%);z-index:6;}
.hero-v8 .house-layer[data-appliance="fridge"]{clip-path:inset(35.5% 31.8% 30.9% 52.2%);z-index:5;}
.hero-v8 .house-layer[data-appliance="oven"]{clip-path:inset(45% 22.7% 31.1% 66.5%);z-index:8;}
.hero-v8 .house-layer[data-appliance="microwave"]{clip-path:inset(40.8% 16% 48.5% 75.5%);z-index:9;}
.hero-v8 .house-layer[data-appliance="dishwasher"]{clip-path:inset(49.7% 1% 31% 90.4%);z-index:6;}
.hero-v8 .house-layer:focus-visible {outline:0;filter:drop-shadow(0 0 4px #16447caa);}
.hero-v8 .house-layer:hover {filter:drop-shadow(0 7px 8px #0c477341);}
.hero-v8 .house-complete {z-index:1;}
.hero-v8 .house-mobile {display:none;}
.hero-v8 .hero-bottom {
  position:relative;
  bottom:auto;left:auto;right:auto;
  width:min(1320px,94vw);
  margin:0 auto;
  flex:none;
}

@media(max-width:780px) {
  .hero.hero-v8 {
    height:auto;min-height:0;max-height:none;
    padding:0 0 28px;
    overflow:visible;
  }
  .hero-v8 .hero-sticky {
    position:relative;top:auto;height:auto;min-height:0;
    overflow:visible;display:block;padding:32px 0 0;
  }
  .hero-v8 .hero-copy {padding:0 22px;}
  .hero-v8 .house-scene {display:none;}
  .hero-v8 .house-mobile {
    display:grid;
    gap:14px;
    width:min(520px,calc(100% - 24px));
    margin:26px auto 16px;
  }
  .hero-v8 .house-mobile-zone {
    overflow:hidden;
    border:1px solid #e7eaec;
    border-radius:15px;
    background:#fbf8f3;
    box-shadow:0 12px 30px #253e5210;
  }
  .hero-v8 .house-mobile-window {
    width:100%;position:relative;overflow:hidden;
    isolation:isolate;direction:ltr;
    background:#f8f4ee;
  }
  .hero-v8 .zone-living .house-mobile-window{aspect-ratio:575/540;}
  .hero-v8 .zone-laundry .house-mobile-window{aspect-ratio:430/545;}
  .hero-v8 .zone-kitchen .house-mobile-window{aspect-ratio:792/620;}
  .hero-v8 .house-mobile-stage {
    position:absolute;
    aspect-ratio:1672/941;
    height:auto;
  }
  .hero-v8 .zone-living .house-mobile-stage{width:290.7826%;left:0;top:-42.5926%;}
  .hero-v8 .zone-laundry .house-mobile-stage{width:388.8372%;left:-116.2791%;top:-35.7798%;}
  .hero-v8 .zone-kitchen .house-mobile-stage{width:211.1111%;left:-111.1111%;top:-26.6129%;}
  .hero-v8 .house-mobile-stage>img {
    display:block;position:absolute;inset:0;width:100%;height:100%;
    object-fit:fill;max-width:none;pointer-events:none;
  }
  .hero-v8 .house-mobile-stage>img.house-mobile-layer {
    opacity:var(--drop-opacity,0);
    transform:translate3d(0,var(--drop-y,-420px),0);
    will-change:transform,opacity;
  }
  .hero-v8 .house-zone-caption {
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:13px 16px 14px;
    border-top:1px solid #ecf0f3;
    background:#fff;
  }
  .hero-v8 .house-zone-caption>span {
    font:600 10px 'DM Sans','Cairo',sans-serif;
    color:#7895aa;white-space:nowrap;
  }
  .hero-v8 .house-zone-caption a {font-size:12px;color:#16447c;font-weight:700;}
  .hero-v8 .house-zone-caption a span{margin-inline-start:5px;}
  .hero-v8 .hero-bottom{width:calc(100% - 32px);}
  .hero-v8 .hero-caption{display:none;}
  .hero-v8 .scroll-down{font-size:10px;}
}
@media(prefers-reduced-motion:reduce){
  .hero-v8 .house-scene>.house-layer,
  .hero-v8 .house-mobile-stage>.house-mobile-layer{
    opacity:1!important;transform:none!important;will-change:auto;
  }
}