/* Door-download hero only. Background and original product share one coordinate plane.
   Source crop [591,96]–[834,592]; fitted door [1321,98]–[1588.994,645]
   on the unchanged 1942×809 courtyard. No source walls/glass/floor are overlaid. */
body[class*="page-list-76-"] .category-hero--service .category-hero-photo {
  position:absolute; inset:0; overflow:hidden; background:#343537;
}

body[class*="page-list-76-"] .door-scene {
  position:absolute; inset:0;
  background:url("home/service-20260921/door-courtyard-background.png") center / 100% 100% no-repeat;
}
body[class*="page-list-76-"] .door-scene::before {
  content:""; position:absolute;
  left:calc(100% * 1290 / 1942); top:calc(100% * 98 / 809);
  width:calc(100% * 330 / 1942); height:calc(100% * 547 / 809);
  background:linear-gradient(90deg,#111416,#252728 12%,#202223 88%,#111416);
  box-shadow:inset 0 3px 8px #0009;
}
body[class*="page-list-76-"] .door-product {
  position:absolute; overflow:hidden;
  left:calc(100% * 1321 / 1942); top:calc(100% * 98 / 809);
  width:calc(100% * 243 * 547 / 496 / 1942); height:calc(100% * 547 / 809);
}
body[class*="page-list-76-"] .category-hero--service .door-product img {
  position:absolute; display:block;
  left:calc(-100% * 591 / 243); top:calc(-100% * 96 / 496);
  width:calc(100% * 960 / 243); height:calc(100% * 640 / 496);
  max-width:none; object-fit:fill;
}
@media(max-width:760px) {
  /* Move the whole 460px-high scene, keeping the fitted door intact above the title. */
  body[class*="page-list-76-"] .door-scene {
    inset:0 auto auto calc(64% - 460px * 1455 / 809);
    width:calc(460px * 1942 / 809); height:460px;
  }
}
@media(min-width:430px) and (max-width:760px) {
  /* Wider phone titles sit beside the door; keep both inside the same scene. */
  body[class*="page-list-76-"] .door-scene {
    left:calc(80% - 460px * 1455 / 809);
  }
}