/* The supplied PNGs share the photograph's native canvas. The mask keeps the
   foreground armrests in front of the people without modifying that photo. */
.home-page .hero > .art { aspect-ratio: 4 / 5; }
.home-page .art > .office-silhouettes {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: url("images/silhouettes/armchair-occlusion.svg?v=7fcfd9357078");
  mask-image: url("images/silhouettes/armchair-occlusion.svg?v=7fcfd9357078");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
  filter: url(#office-people-opacity);
}
.home-page .office-silhouettes > .office-figure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  transform: scale(1.05);
}
.home-page .office-figure--left {
  clip-path: inset(0 50% 0 0);
  transform-origin: 25% 56%;
}
.home-page .office-figure--right {
  clip-path: inset(0 0 0 50%);
  transform-origin: 84% 58%;
}
.home-page .hero .art > .art-note {
  z-index: 2;
  bottom: 10px;
  left: 12px;
  right: 12px;
  padding: 10px 12px;
}
html body.home-page .hero .art .art-note :is(.art-note-opening,.art-note-rest) {
  font-size: clamp(17px, 4.5vw, 24px) !important;
  line-height: 1.3 !important;
}
html body.home-page .hero .art .art-note .art-note-title {
  font-size: clamp(24px, 5.5vw, 32px);
  line-height: 1.15;
}

.home-page .art > .office-insight {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  overflow: hidden;
}
.home-page .art > .office-insight {
  background: radial-gradient(ellipse at 74% 72%, #ffe2a240, transparent 48%);
  filter: blur(clamp(3px, .65vw, 10px));
}
.home-page .art > .office-insight::before,
.home-page .art > .office-insight::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(107deg, #fff3d0b8 7%, #fff0c378 53%, #ffe5b72e 100%);
}
.home-page .art > .office-insight::before {
  clip-path: polygon(5% 21%, 17% 24%, 100% 65%, 100% 75%);
}
.home-page .art > .office-insight::after {
  clip-path: polygon(8% 29%, 15% 31%, 100% 80%, 100% 92%);
}
@media (prefers-reduced-motion: reduce) {
  .home-page .art > .office-insight { display: none; }
}