/* The supplied 3D animation is isolated from the site's layout and controls. */
.quality-story { padding-top: clamp(64px, 8vw, 104px); background: var(--bg); border-top: 1px solid var(--line); overflow: hidden; }
.quality-story__heading { text-align: center; position: relative; z-index: 1; }
.quality-story__heading .h2 { margin: 16px 0 20px; font-size: clamp(2rem, 4.8vw, 3.9rem); line-height: 1.08; }
.quality-story__heading .lead-muted { margin-inline: auto; max-width: 58ch; }
.quality-story__visual { position: relative; width: 100%; max-width: 1440px; height: clamp(390px, 48vw, 680px); margin: 28px auto 0; }
.quality-story__frame, .quality-story__poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.quality-story__poster { object-fit: contain; padding: 70px 12%; }
.quality-story__frame { display: block; opacity: 0; pointer-events: none; }
.quality-story.is-loaded .quality-story__frame { opacity: 1; }
.quality-story.is-loaded .quality-story__poster { visibility: hidden; }
@media (max-width: 640px) {
  .quality-story__visual { height: clamp(360px, 108vw, 520px); margin-top: 20px; }
  .quality-story__heading .lead-muted { font-size: .94rem; }
}
