/* Hero line "Digital design tuned to purpose. Meaning made visible.": a blue hue running through
   it. The words are the template's split boxes, so each word shows its slice of one gradient laid
   across the whole paragraph (hero-tagline.js sets the slices): ink on the left, cobalt toward the
   ends of the lines, and a lighter blue current drifting slowly through. Theme-aware ink. */
@property --pw-tg { syntax: '<length>'; inherits: true; initial-value: 0px; }
.hero-description.pw-tg {
  --pw-tg-w: 600px;
  animation: pw-tg-flow 9s linear infinite;
}
.hero-description.pw-tg > div {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image:
    linear-gradient(100deg, transparent 0%, transparent 30%, rgb(108 197 225 / .0) 38%, rgb(108 197 225 / .85) 46%, rgb(108 197 225 / 0) 54%, transparent 62%, transparent 100%),
    linear-gradient(90deg, var(--c-dark-primary) 0%, var(--c-dark-primary) 42%, #1238e8 74%, #1a5cff 100%);
  background-size: calc(var(--pw-tg-w) * 2) 100%, var(--pw-tg-w) 100%;
  background-repeat: repeat-x, no-repeat;
  background-position: calc(var(--pw-tg-x, 0px) * -1 + var(--pw-tg)) 0, calc(var(--pw-tg-x, 0px) * -1) 0;
  -webkit-background-clip: text;
  background-clip: text;
}
@keyframes pw-tg-flow { from { --pw-tg: 0px; } to { --pw-tg: calc(var(--pw-tg-w) * 2); } }
@media (prefers-reduced-motion: reduce) { .hero-description.pw-tg { animation: none; } }