/* A full-width edited portrait replaces the small, masked source photo. */
.reference-hero {
  background: #c7c5c1;
}
.reference-hero-portrait {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 35%;
  transform: none;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  pointer-events: none;
}
.reference-hero-shade {
  background: linear-gradient(to top, #111 0%, rgba(17,17,17,.85) 12%, rgba(17,17,17,.22) 34%, transparent 56%);
}
.reference-hero-side, .reference-hero-portfolio { color: #151515; }
.is-home .site-header.on-hero:not(.is-scrolled) {
  background: transparent;
  color: #111;
  text-shadow: none;
}
.is-home .site-header.on-hero:not(.is-scrolled) .desktop-nav {
  background: rgba(242,241,236,.88);
  border-radius: 24px;
  padding: 3px 8px;
}
.is-home.menu-is-open .site-header.on-hero:not(.is-scrolled) {
  background: #10110f;
  color: #f2f1ec;
}
@media (max-width:760px) {
  .is-home .site-header.on-hero:not(.is-scrolled) {
    background: #e4e3e0;
  }
  .is-home.menu-is-open .site-header.on-hero:not(.is-scrolled) {
    background: #10110f;
  }
  .reference-hero-portrait {
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-position: center 28%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .reference-hero-shade {
    background: linear-gradient(to top, #111 0%, rgba(17,17,17,.9) 14%, rgba(17,17,17,.4) 36%, transparent 58%);
  }
  .reference-hero-portfolio { color: #fff; }
}