/* Hero-only video styling. The archived photo page does not load this stylesheet. */
.design-video .preview-variants {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 5px var(--page-edge);
  border-bottom: 1px solid #ffffff14;
  color: #aaa9a6;
  background: #101113;
  font: 400 .875rem/1.5 "Manrope", "Segoe UI", sans-serif;
}
.design-video .preview-variants a { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; color: #efc16b; }
.design-video .preview-variants a:hover { color: #f7e939; }
.design-video .preview-variants a:focus-visible { outline: 2px solid #f7e939; outline-offset: 3px; }
.design-video .hero {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  min-height: 670px;
  padding-top: 78px;
  padding-bottom: 110px;
  overflow: hidden;
  background: var(--carbon);
}
.design-video .hero-media { position: absolute; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; }
.design-video .hero-media img,
.design-video .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
.design-video .hero-media img { object-position: 72% center; filter: saturate(.6); }
.design-video .hero-media video { opacity: 0; filter: saturate(.7); transition: opacity .65s ease; }
.design-video .hero.has-video-frame .hero-media video { opacity: 1; }
.design-video .hero::before {
  background:
    linear-gradient(0deg, #101113 0%, #10111324 23%, transparent 75%, #10111366 100%),
    linear-gradient(90deg, #101113f5 0%, #101113e3 22%, #101113ba 43%, #10111345 72%, #1011134d 100%);
}
.design-video .hero-copy { width: 100%; max-width: 780px; }
.design-video .hero-lead { max-width: 510px; color: #d0cfca; }
.design-video .hero-location { color: #c0beb9; }
.design-video .hero .button-outline { background: #10111365; border-color: #ffffff45; }
.design-video .hero-video-bottom {
  position: absolute;
  z-index: 2;
  left: var(--page-edge);
  right: var(--page-edge);
  bottom: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.design-video .hero-reference-link { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; color: #e5d6b4; font-size: .875rem; }
.design-video .hero-reference-link:hover { color: #f7e939; }
.design-video .hero-video-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #ffffff35;
  border-radius: 7px;
  color: #f4f3ef;
  background: #101113b3;
  font: 500 .875rem/1.4 "Manrope", "Segoe UI", sans-serif;
  cursor: pointer;
}
.design-video .hero-video-toggle[hidden] { display: none; }
.design-video .hero-video-toggle:hover { border-color: #efc16b; background: #101113e6; }
.design-video .hero-video-toggle:focus-visible { outline: 2px solid #f7e939; outline-offset: 4px; }
.design-video .video-toggle-icon { width: 14px; color: #ffcc63; text-align: center; }
@media (min-width: 1600px) {
  .design-video .hero { min-height: 740px; }
}
@media (max-width: 800px) {
  .design-video .hero { min-height: 620px; padding-top: 64px; padding-bottom: 100px; }
  .design-video .hero-media video { display: none; }
  .design-video .hero::before { background: linear-gradient(90deg, #101113e8, #101113a8), linear-gradient(0deg, #101113, transparent 40%); }
}
@media (max-width: 480px) {
  .design-video .preview-variants { align-items: center; gap: 8px; font-size: .8125rem; }
  .design-video .preview-variants > span { flex-shrink: 0; }
  .design-video .preview-variants a { text-align: right; }
  .design-video .hero { min-height: 650px; padding-top: 44px; padding-bottom: 95px; }
  .design-video .hero-media img { object-position: 78% center; }
}
@media (prefers-reduced-motion: reduce) {
  .design-video .hero-media video { display: none; transition: none; }
}