/* V10 — a single registered kitchen and genuinely vertical mobile chapters.
   The kitchen frame is a crop of the ORIGINAL 1672x941 panorama and every
   product layer retains those exact source coordinates. No product is resized
   or repositioned independently in the hero. */
.hero.hero-v8 {
  height:calc(100svh + 590px);
  min-height:1150px;
  background:#fff;
}
.hero-v8 .hero-sticky {gap:13px}
.hero-v8 .house-panorama {
  position:relative;
  width:min(90vw,860px,calc((100svh - 280px)*1.181));
  max-width:860px;
  aspect-ratio:862/730;
  height:auto;
  overflow:hidden;
  border:1px solid #e9edf0;
  border-radius:16px;
  background:#f7f4f0;
  box-shadow:0 17px 50px #2345620c;
  isolation:isolate;
  direction:ltr;
}
.hero-v8 .house-panorama .house-scene {
  position:absolute;
  display:block;
  width:193.967517%;
  height:auto;
  max-width:none;
  left:-93.967517%;
  top:-17.808219%;
  margin:0;
  aspect-ratio:1672/941;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}
.hero-v8 .house-scene>.house-layer {filter:none}
.hero-v8 .house-scene>.house-layer:hover {filter:drop-shadow(0 5px 7px #24527b40)}
.hero-v8 .panorama-hint {display:none}
.story .scene-art {overflow:visible}
.story .scene-film--oven {height:min(83svh,740px);width:min(100%,590px)}
.story .scene-film--microwave {width:min(100%,820px);max-height:min(84svh,730px)}
.oven-story .scene-art,.microwave-story .scene-art,.dishwasher-story .scene-art {background:#fff}
.story .scene-film--oven .scene-scroll-video {
  background:#fff;
  mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 68% 68% at 50% 50%,#000 74%,transparent 99%);
  mask-image:radial-gradient(ellipse 68% 68% at 50% 50%,#000 74%,transparent 99%);
}
.story .scene-film--dishwasher .scene-scroll-video {background:#fff;mix-blend-mode:normal}
.story .scene-film--microwave .scene-scroll-video {transform:scale(1.13)}
.story .scene-film--oven .scene-scroll-video {transform:scale(1.12)}

@media(max-width:780px) {
  .hero.hero-v8 {
    height:calc(100svh + 345px);
    min-height:0;
    max-height:none;
    padding:0;
    overflow:clip;
  }
  .hero-v8 .hero-sticky {
    position:sticky;
    top:68px;
    height:calc(100svh - 68px);
    min-height:0;
    padding:10px 0 18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:12px;
    overflow:hidden;
  }
  .hero-v8 .hero-copy {padding:0 17px}
  .hero-v8 .hero-copy h1 {font-size:clamp(27px,7vw,38px)}
  .hero-v8 .house-panorama {
    width:min(calc(100% - 24px),490px,calc((100svh - 228px)*1.181));
    max-width:none;
    flex:0 1 auto;
    overflow:hidden;
    border-radius:13px;
    box-shadow:0 10px 30px #2345620d;
    touch-action:pan-y;
    scrollbar-width:none;
  }
  .hero-v8 .house-panorama .house-scene {
    position:absolute;
    width:193.967517%;
    max-width:none;
    left:-93.967517%;
    top:-17.808219%;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  .hero-v8 .panorama-hint {
    display:block;
    text-align:center;
    color:#7795ab;
    font-size:10px;
    margin:0;
    padding:0 15px;
  }
  .hero-v8 .panorama-hint span {font-size:13px}
  .hero-v8 .hero-bottom {width:calc(100% - 32px);justify-content:space-between;align-items:center}
  .hero-v8 .hero-bottom .scroll-down {font-size:10px}

  /* Shorter, cohesive panels: sticky motion still has 250+px of travel,
     but the art and copy occupy the available viewport together. */
  .chapter-divider {height:64px;padding:0 16px;gap:10px}
  .chapter-divider p {font-size:14px}
  .story {
    height:calc(100svh + 190px);
    min-height:0;
    max-height:none;
    margin:0;
    border-top:1px solid #e7edf2;
    overflow:visible;
  }
  .story .story-pin {
    position:sticky;
    top:68px;
    height:calc(100svh - 68px);
    min-height:0;
    display:flex;
    align-items:stretch;
    justify-content:center;
    overflow:hidden;
    background:#fff;
  }
  .story .scene-layout {
    width:calc(100% - 26px);
    height:100%;
    display:flex;
    flex-direction:column-reverse;
    justify-content:space-between;
    align-items:stretch;
    gap:0;
    padding:12px 0 20px;
  }
  .story .scene-art {
    order:initial;
    width:100%;
    min-width:0;
    min-height:0;
    height:auto;
    flex:1 1 auto;
    overflow:hidden;
    align-self:center;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
  }
  .story .scene-copy {
    order:initial;
    width:min(100%,535px);
    max-width:none;
    min-width:0;
    margin:0 auto;
    padding:5px 9px 1px;
    flex:0 0 auto;
    text-align:start;
    opacity:1;
    transform:none;
    background:#fff;
  }
  .story .scene-copy .chapter {font-size:9px;letter-spacing:1.2px}
  .story .scene-copy .type {font-size:11px;margin:3px 0 1px;line-height:1.5}
  .story .scene-copy h2 {
    font-size:clamp(27px,7.3vw,38px);
    line-height:1.27;
    margin:3px 0 5px;
    letter-spacing:-.5px;
  }
  .story .scene-copy h2 br {display:none}
  .story .scene-copy p {font-size:11px;line-height:1.7;margin:4px 0 10px;max-width:500px}
  .story .category-link {
    min-height:39px;
    padding:8px 14px;
    border:0;
    border-radius:9px;
    background:#16447c;
    color:#fff;
    font-size:11px;
    gap:13px;
  }
  .story .category-link span {font-size:16px}
  .story .appliance {transform:none;filter:none}
  .story .scene-film,.story .fridge-film {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:570px;
    height:100%;
    max-height:none;
    aspect-ratio:auto;
  }
  .story .scene-film .scene-scroll-video,
  .story .fridge-film .fridge-scroll-video {
    width:100%;
    height:100%;
    object-fit:contain;
    max-width:100%;
  }
  .story .scene-film--microwave {width:100%;height:100%;max-height:none}
  .story .scene-film--microwave .scene-scroll-video {transform:scale(1.38)}
  .story .scene-film--oven .scene-scroll-video {transform:scale(1.21)}
  .story .washer-visual {height:100%;width:100%;max-width:385px;aspect-ratio:1638/2048}
  .story .washer-visual>img {width:100%;height:100%;object-fit:contain}
  .story .fridge-film {width:100%;max-width:440px}
  .story .scene-film--dishwasher .scene-scroll-video {filter:brightness(1.01) contrast(1.025)}
  .categories {padding-top:56px}
}

@media(max-width:380px) {
  .story .scene-layout {width:calc(100% - 20px);padding:8px 0 14px}
  .story .scene-copy {padding:3px 7px 0}
  .story .scene-copy h2 {font-size:25px}
  .story .scene-copy p {font-size:10px;line-height:1.65;margin-bottom:8px}
  .story .category-link {min-height:35px;padding:6px 11px;font-size:10px}
  .hero-v8 .hero-sticky {gap:7px}
}