/* V8: actual app viewports, fewer competing frames, distinct mobile captures. */
body.v8 .v7-product-preview {
  padding: 18px;
}
body.v8 .v7-preview-meta {
  justify-content: space-between;
  padding-bottom: 10px;
}
body.v8 .v7-product-preview .v5-case-copy {
  padding-top: 15px;
}
body.v8 .v7-product-preview #role-title {
  font-size: 23px;
  max-width: 480px;
}
body.v8 .v7-product-preview .v5-case-stage {
  gap: 12px;
}
body.v8.v7 .v7-product-preview [data-current-role] .v6-role-crop {
  position: relative;
  aspect-ratio: auto;
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid #dbe5ed;
  border-radius: 5px;
  background: #fff;
}
body.v8 .v7-hero-grid {
  grid-template-rows: min-content 1fr;
}
body.v8 .v7-hero-secondary {
  align-self: start;
}
body.v8 .v7-role-extra #role-description {
  margin: 12px 0;
}
body.v8 .v7-product-preview .v6-role-crop picture {
  display: block;
}
body.v8.v7 .v7-product-preview [data-current-role] .v6-role-crop #role-image {
  position: static;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  left: auto;
  top: auto;
}
body.v8.v7 .v7-product-preview [data-current-role="kantoor"] .v6-role-crop {
  aspect-ratio: 984 / 869.140625;
  max-width: 100%;
}
body.v8.v7
  .v7-product-preview
  [data-current-role="kantoor"]
  .v6-role-crop
  #role-image {
  position: absolute;
  width: 101.626%;
  max-width: none;
  left: -0.813%;
  top: -36.46112%;
}
body.v8 .v7-product-preview .v5-case-figure figcaption {
  padding-top: 6px;
}
body.v8 .v7-product-preview .v5-zoom {
  min-height: 30px;
}
body.v8 .v7-product-preview #role-description {
  margin-top: 0;
  line-height: 1.7;
}
body.v8 .v7-evidence-note {
  padding-top: 8px;
}
body.v8 .v8-dossier-crop {
  position: relative;
  width: 100%;
  aspect-ratio: 1032 / 680;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
}
body.v8 .v8-dossier-crop picture {
  display: block;
}
body.v8 .v8-dossier-crop #v5-location {
  position: absolute;
  max-width: none;
  width: 124.031%;
  height: auto;
  left: -24.031%;
  top: 0;
}
body.v8.v5-detail
  .r-website
  .r-product-video:not(.v8-video-started)
  .r-product-video-frame {
  aspect-ratio: var(--v8-poster-ratio, 16 / 9);
  background: #fff;
  border: 1px solid #d8e3ec;
}
body.v8.v5-detail
  .r-website
  .r-product-video:not(.v8-video-started)
  .r-product-video-frame
  video {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}
body.v8.v5-detail
  .r-website
  .r-product-video:not(.v8-video-started)
  .r-product-video-frame.v8-poster-portrait {
  max-width: 280px;
  margin-inline: auto;
}
body.v8 .r-product-video .v5-video-start {
  align-items: flex-start;
  justify-content: flex-end;
  padding: 12px;
  background: transparent;
}
body.v8 .r-product-video .v5-video-play {
  width: 38px;
  height: 38px;
  font-size: 13px;
}
body.v8 .r-product-video .v5-video-label {
  padding: 9px 12px;
  font-size: 11px;
}
@media (max-width: 700px) {
  body.v8 .v8-dossier-crop {
    aspect-ratio: 390 / 620;
  }
  body.v8 .v8-dossier-crop #v5-location {
    width: 100%;
    left: 0;
  }
  body.v8.v5-detail
    .r-website
    .r-product-video:not(.v8-video-started)
    .r-product-video-frame.v8-poster-portrait {
    max-width: 100%;
  }
}
@media (max-width: 1050px) and (min-width: 701px) {
  body.v8 .v7-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  body.v8 .v6-hero-copy {
    grid-column: 1;
    grid-row: 1;
    max-width: 680px;
  }
  body.v8 .v7-product-preview {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, 620px);
    justify-self: center;
  }
  body.v8 .v7-hero-secondary {
    grid-column: 1;
    grid-row: 3;
  }
}
@media (max-width: 700px) {
  body.v8 .v7-product-preview {
    padding: 14px;
  }
  body.v8 .v7-product-preview #role-title {
    font-size: 21px;
    line-height: 1.2;
  }
  body.v8 .v7-product-preview .v6-role-crop {
    max-width: 100%;
  }
  body.v8.v7 .v7-product-preview [data-current-role="kantoor"] .v6-role-crop {
    aspect-ratio: 390 / 900;
  }
  body.v8.v7
    .v7-product-preview
    [data-current-role="kantoor"]
    .v6-role-crop
    #role-image {
    width: 100%;
    left: 0;
    top: -28.98872%;
  }
  body.v8 .v7-preview-meta {
    padding-bottom: 8px;
  }
}