.hero-focus-title {
  max-width: 470px;
  min-height: 145px;
}

.true-focus {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  column-gap: 0.22em;
  row-gap: 0.02em;
  width: max-content;
  max-width: 100%;
  outline: none;
  user-select: none;
}

.true-focus__word {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: var(--ink);
  cursor: default;
  filter: blur(var(--true-focus-blur, 5px));
  transition: filter var(--true-focus-duration, 0.65s) ease, color var(--true-focus-duration, 0.65s) ease;
  will-change: filter;
}

.true-focus__word.is-active {
  color: var(--primary-deep);
  filter: blur(0);
}

.true-focus__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  box-sizing: content-box;
  transition: transform var(--true-focus-duration, 0.65s) cubic-bezier(.22,.8,.25,1), width var(--true-focus-duration, 0.65s) cubic-bezier(.22,.8,.25,1), height var(--true-focus-duration, 0.65s) cubic-bezier(.22,.8,.25,1);
}

.true-focus__corner {
  position: absolute;
  width: 0.22em;
  height: 0.22em;
  border: 2px solid var(--true-focus-border, #2e8d76);
  border-radius: 3px;
  filter: drop-shadow(0 0 4px var(--true-focus-glow, rgba(46,141,118,.42)));
}

.true-focus__corner--tl { top: -0.12em; left: -0.12em; border-right: 0; border-bottom: 0; }
.true-focus__corner--tr { top: -0.12em; right: -0.12em; border-left: 0; border-bottom: 0; }
.true-focus__corner--bl { bottom: -0.12em; left: -0.12em; border-right: 0; border-top: 0; }
.true-focus__corner--br { right: -0.12em; bottom: -0.12em; border-left: 0; border-top: 0; }

@media (max-width: 520px) {
  .hero-focus-title { min-height: 122px; }
  .true-focus { column-gap: 0.16em; }
  .true-focus__corner { border-width: 1.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .true-focus__word,
  .true-focus__frame { transition: none; }
}