/* The treasure trail stays beneath the headline's normal text. */
.hero .qk-headline {
  --qk-trail: #bc873e;
  line-height: 1.2;
  letter-spacing: -.052em;
  margin-bottom: .84em;
}
.qk-headline .qk-first { display: block; }
.qk-headline .qk-word {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  isolation: isolate;
  padding-right: .28em;
}
.qk-headline .qk-baseline {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: baseline;
}
.qk-headline .qk-lettering {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: visible;
  pointer-events: none;
  color: var(--qk-trail);
}
.qk-headline [data-trail] { opacity: 0; transition: opacity .36s ease; }
.qk-headline .qk-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: #edaa55;
  box-shadow: 0 0 0 3px #edaa5520, 0 0 9px #edaa5570;
  opacity: 0;
  pointer-events: none;
}
.qk-headline .qk-pennant {
  position: absolute;
  left: 0;
  top: 0;
  width: .35em;
  height: .38em;
  opacity: 0;
  transform: translateY(2px) scale(.82);
  transform-origin: 7% 60%;
  pointer-events: none;
}
.qk-headline .qk-pennant svg { display: block; width: 100%; height: 100%; overflow: visible; }
.qk-headline.is-landed .qk-pennant {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .12s ease, transform .2s cubic-bezier(.2,.8,.25,1.1);
}
@media (max-width: 440px) {
  .hero .qk-headline { font-size: clamp(30px, 10vw, 44px); }
  .qk-headline .qk-spark { width: 4px; height: 4px; margin: -2px; }
}
@media (prefers-reduced-motion: reduce) {
  .qk-headline [data-trail], .qk-headline .qk-pennant { transition: none; }
}