html { overflow-x: hidden; }

.hero-mattress {
  position: absolute;
  z-index: 1;
  right: -10%;
  bottom: 3%;
  width: 118%;
  height: 75%;
  object-fit: contain;
  object-position: center bottom;
}

.hero-vacuum { position: absolute; z-index: 3; right: 0; bottom: 27%; width: 58%; height: auto; filter: drop-shadow(7px 9px 0 rgba(0, 0, 0, .42)); animation: vacuum-pass 3.8s ease-in-out infinite; }
.hero-bacil { position: absolute; z-index: 4; right: 53%; bottom: 27%; width: 16%; height: auto; filter: drop-shadow(4px 6px 0 rgba(0, 0, 0, .4)); animation: bacil-shake .22s steps(2, end) infinite; }
.speech { z-index: 5; }
.service-art { width: 100%; height: 200px; display: block; object-fit: contain; background: white; border: 3px solid var(--black); padding: 6px; }
.service.scent { background: #ffd4e7; }
.sleep-story, .process, .pricing { position: relative; isolation: isolate; overflow: hidden; }
.background-vacuum, .background-bacil { position: absolute; z-index: 0; pointer-events: none; user-select: none; }
.background-vacuum { width: 340px; opacity: .12; filter: grayscale(1) contrast(1.25); }
.background-bacil { width: 105px; opacity: .18; filter: grayscale(.3); animation: background-bacil-float 5s ease-in-out infinite; }
.sleep-story .story-layout, .process .process-inner, .pricing > .heading, .pricing > .price-grid, .pricing > .note { position: relative; z-index: 1; }
.vacuum-story { right: -85px; bottom: -105px; transform: rotate(-13deg); }
.bacil-story-large { width: 130px; left: 3%; bottom: 7%; animation-delay: .7s; }
.bacil-story-small { width: 57px; right: 10%; top: 10%; animation-delay: 1.8s; }
.bacil-story-mid { width: 88px; right: 4%; bottom: 22%; animation-delay: 2.6s; }
.vacuum-process { width: 390px; right: -110px; top: -55px; opacity: .1; transform: rotate(15deg); }
.bacil-process-one { width: 78px; left: 4%; top: 13%; animation-delay: 1.1s; }
.bacil-process-two { width: 145px; right: 20%; bottom: -45px; animation-delay: 2.2s; }
.bacil-process-three { width: 52px; left: 34%; bottom: 10%; animation-delay: 3.1s; }
.bacil-price-one { width: 84px; left: 1%; top: 20%; animation-delay: .5s; }
.bacil-price-two { width: 130px; right: 2%; bottom: 9%; animation-delay: 1.5s; }
.bacil-price-three { width: 64px; right: 17%; top: 13%; animation-delay: 2.8s; }
.price .price-art {
  position: absolute;
  inset: auto 5% 3%;
  display: block;
  width: 90%;
  height: 48%;
  padding: 0;
  border: 0;
  background: none;
  object-fit: contain;
  object-position: center bottom;
}

@media (min-width: 821px) {
  .service-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .service { min-height: 400px; padding: 14px; }
  .service h3 { font-size: 1.55rem; }
  .service-art { height: 170px; }
}
.order-art .sleep-layer, .order-art .filter-layer { position: absolute; display: block; object-fit: contain; filter: drop-shadow(7px 8px 0 rgba(0, 0, 0, .3)); }
.order-art .sleep-layer { width: 82%; left: 3%; bottom: 3%; animation: bob 3.4s ease-in-out infinite; }
.order-art .filter-layer { width: 48%; right: -1%; top: 8%; animation: float 2.8s ease-in-out infinite; }

@media (max-width: 820px) {
  .hero-mattress { right: -17%; bottom: 4%; width: 130%; height: 73%; }
  .hero-vacuum { right: -3%; bottom: 27%; width: 64%; }
  .hero-bacil { right: 56%; bottom: 28%; width: 18%; }
  .background-vacuum { display: none; }
  .bacil-story-large { width: 85px; left: -18px; }
  .bacil-story-small, .bacil-story-mid, .bacil-process-two, .bacil-process-three, .bacil-price-two, .bacil-price-three { display: none; }
  .order-art .sleep-layer { width: 88%; left: 0; }
  .order-art .filter-layer { width: 43%; right: 3%; }
}

@keyframes vacuum-pass {
  0%, 100% { transform: translateX(8%) rotate(1deg); }
  50% { transform: translateX(-12%) rotate(-2deg); }
}

@keyframes bacil-shake {
  0% { transform: translate(-3px, 2px) rotate(-5deg) scale(1); }
  100% { transform: translate(3px, -2px) rotate(5deg) scale(1.05); }
}

@keyframes background-bacil-float {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-13px) rotate(6deg); }
}