.overa-cycle5{
  --accent: #FFA401;
  --muted:  var(--bs-secondary-color, #6c757d);
  --ring-w: 9; --ring-w-active: 11;
  font-size: 1em;
  display:inline-grid; place-items:center;
  width: 100%;

}
.overa-svg{ width:85%; height:85%; }

.ring path{
  fill:none; stroke: var(--muted);
  stroke-width: var(--ring-w); stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: stroke .25s, stroke-width .25s, filter .25s;
}
.labels text{
  fill: var(--muted); opacity:.85; letter-spacing:.2px;
  transition: fill .25s, opacity .25s, filter .25s;
  dominant-baseline: middle; 
}

/* Active */
.ring path.active{
  stroke: var(--accent);
  stroke-width: var(--ring-w-active);
  filter: drop-shadow(0 0 .45rem color-mix(in oklab, var(--accent) 60%, transparent));
}
.labels text.active{
  fill: var(--accent); opacity:1;
  filter: drop-shadow(0 0 .35rem color-mix(in oklab, var(--accent) 55%, transparent));
}

/* Reduced motion: freeze on first term */
@media (prefers-reduced-motion: reduce){ .overa-cycle5{ animation:none !important; } }

#overaCycle5 .center-logo image{
  width: 20%;
  height: 20%;
  transform: translate(-50%, -50%);
  transform-box: fill-box;     /* needed so % in transform uses the image’s own box */
  pointer-events: none;
}