/* Small ingredients, broad canvas. The existing title and hero geometry stay. */
.service-detail-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #000;
}
.detail-bit {
  position: absolute;
  display: block;
  width: max-content;
  font-size: var(--bit-size);
  line-height: 1;
  transform: translate(-50%, -50%) rotate(var(--bit-turn));
  transform-origin: center;
  user-select: none;
}
.detail-bit--dot,
.detail-bit--dash {
  width: var(--bit-size);
  height: var(--bit-size);
  border-radius: 50%;
  background: currentcolor;
}
.detail-bit--dash {
  width: 7px;
  height: 1px;
  border-radius: 0;
}
.detail-bit--word {
  opacity: 0.14;
  letter-spacing: -0.025em;
}
.service-detail-play {
  position: absolute;
  z-index: 2;
  inset: var(--paak-inner-header-height) 0 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: transparent;
  cursor: default;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.service-detail-play[hidden] {
  display: none;
}
.service-detail-play[data-detail-play="brand"],
.service-detail-play[data-detail-play="digital"],
.service-detail-play[data-detail-play="automation"] {
  cursor: grab;
}
.service-detail-play[data-held="true"] {
  cursor: grabbing;
}
.service-detail-play:focus-visible {
  outline: 1px dashed #000;
  outline-offset: -14px;
}
.service-detail-title {
  pointer-events: none;
}
@media (width < 768px) {
  .detail-bit--desktop {
    display: none;
  }
  .detail-bit--glyph {
    font-size: min(var(--bit-size), 15px);
  }
  .detail-bit--word {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .detail-bit--word {
    opacity: 0.5;
  }
}

/* Digital uses the hero surface for pointer input; its dot remains a separate target. */
.service-detail-play[data-detail-play="digital"] {
  pointer-events: none;
}