.roll-title .roll-window {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding-block: .16em;
  margin-block: -.16em;
  vertical-align: bottom;
  white-space: nowrap;
  color: inherit;
}
.roll-title .roll-original,
.roll-title .roll-duplicate {
  display: block;
  color: inherit;
  transition: transform .44s cubic-bezier(.76,0,.24,1);
  transition-delay: var(--roll-delay, 0ms);
}
.roll-title .roll-duplicate {
  position: absolute;
  inset: .16em 0 auto;
  transform: translateY(135%);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .roll-title:hover .roll-original,
  .work-card:hover .roll-title .roll-original,
  .service:hover .roll-title .roll-original,
  .brand:hover .roll-title .roll-original {
    transform: translateY(-135%);
  }
  .roll-title:hover .roll-duplicate,
  .work-card:hover .roll-title .roll-duplicate,
  .service:hover .roll-title .roll-duplicate,
  .brand:hover .roll-title .roll-duplicate {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .roll-title .roll-original, .roll-title .roll-duplicate { transition: none; }
  .roll-title .roll-original { transform: none; }
  .roll-title .roll-duplicate { display: none; }
}