/* Feather the original homepage navigation into its hero. */
.concept-page #siteHeader,
.concept-page #siteHeader.is-scrolled {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: isolate;
}
.concept-page #siteHeader::before {
  content: '';
  position: absolute;
  inset: 0 0 calc(-1 * var(--header-feather, 38px));
  z-index: -1;
  pointer-events: none;
  background: rgba(12, 12, 12, var(--header-tint, 0));
  backdrop-filter: blur(var(--header-blur, 0px));
  -webkit-backdrop-filter: blur(var(--header-blur, 0px));
  mask-image: linear-gradient(#000 0, #000 calc(100% - var(--header-feather, 38px)), transparent 100%);
  -webkit-mask-image: linear-gradient(#000 0, #000 calc(100% - var(--header-feather, 38px)), transparent 100%);
  transition: background 180ms linear, backdrop-filter 180ms linear, -webkit-backdrop-filter 180ms linear;
}
.concept-page.menu-open #siteHeader::before {
  inset: 0;
  background: #0c0c0c;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  mask-image: none;
  -webkit-mask-image: none;
}
@media(prefers-reduced-motion:reduce) {
  .concept-page #siteHeader,.concept-page #siteHeader::before { transition: none; }
}
