[data-video-slot] { position: relative; }

.mobile-video-trigger {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  padding: .15rem;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-video-trigger:focus-visible { outline: 2px solid #fff2c7; outline-offset: -3px; }

.mobile-site .mobile-video-trigger > .mobile-video-label {
  display: inline-grid;
  place-items: center;
  max-width: 100%;
  min-height: 1.75rem;
  padding: .2em .53em;
  border: 1px solid #ffe2a4;
  border-radius: 999px;
  background: #500920ee;
  color: #fff4dd;
  font: 750 clamp(.625rem, 2.6vw, 1.35rem)/1.25 var(--body);
  white-space: nowrap;
  box-shadow: 0 1px .45em #230009aa;
}

.mobile-video-trigger:is(:hover, :focus-visible, :active) > .mobile-video-label { background: #8c1942; }

.service-relationship .service-videos > figure:not(:first-child) .mobile-video-trigger {
  place-items: end;
  padding: .25rem;
}

.mobile-site .service-relationship .service-videos > figure:not(:first-child) figcaption {
  padding-bottom: 2.15rem;
}

.service-separation .service-videos > figure:not(:first-child) .mobile-video-trigger,
.service-video-list .mobile-video-trigger {
  align-items: start;
}

html:has(#video-dialog[open]) { overflow: hidden; }

#video-dialog {
  position: fixed;
  inset: max(.5rem, env(safe-area-inset-top)) max(.5rem, env(safe-area-inset-right))
         max(.5rem, env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left));
  box-sizing: border-box;
  width: auto;
  max-width: 38rem;
  max-height: calc(100vh - 1rem);
  max-height: min(48rem, calc(100dvh - max(.5rem, env(safe-area-inset-top)) - max(.5rem, env(safe-area-inset-bottom))));
  padding: 0;
  border: 1px solid #d3a660;
  border-radius: .85rem;
  background: #1f0a10;
  color: #fff3d4;
  overscroll-behavior: contain;
}

#video-dialog::backdrop { background: #080004cc; }

.video-dialog-header {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  padding: .55rem .7rem;
  border-bottom: 1px solid #795137;
  background: #260e14;
}

.video-dialog-header h2 { margin: 0; font-size: clamp(.95rem, 3.65vw, 1.25rem); line-height: 1.25; }
.video-dialog-header form { flex: none; margin: 0; }

.video-close {
  min-height: 44px;
  padding: .36rem .75rem;
  border: 1px solid #f7d583;
  border-radius: 999px;
  background: linear-gradient(#fff1c3, #d9af65);
  color: #321711;
  font: 750 .9rem/1.25 var(--body);
  white-space: nowrap;
}

#video-dialog :is(img, video):not([hidden]), .video-detail :is(img, video) {
  display: block;
  width: 100%;
  max-height: 60vh;
  max-height: 60dvh;
  object-fit: contain;
  background: #14060a;
}

.video-dialog-status { margin: 0; padding: .65rem .8rem; text-align: center; }
.video-dialog-status:empty { display: none; }
.video-detail .case-back { display: inline-block; margin-top: .75rem; }