.brand-word {
  position: relative;
  display: inline-block;
  justify-self: start;
  padding-bottom: .3rem;
  line-height: 1;
}

.brand-underline {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: .3em;
  overflow: visible;
  pointer-events: none;
}

.brand-underline path {
  fill: none;
  stroke: var(--coral);
  stroke-width: 2.3px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: brand-underline-draw 4.8s ease-in-out infinite;
}

@keyframes brand-underline-draw {
  0%, 8% { stroke-dashoffset: 1; opacity: 0; }
  10% { opacity: 1; }
  42%, 82% { stroke-dashoffset: 0; opacity: 1; }
  94%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-underline path {
    animation: none !important;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}