/* The invisible word keeps the exact width, line height and baseline of each
   original credit. The official artwork fits inside that footprint. */
:root {
  --talk4you-artwork: url('../assets/logos/talk4you-oficial.png');
}
.talk4you-inline {
  position: relative;
  display: inline-block;
  color: #04132b;
  line-height: inherit;
  vertical-align: baseline;
  white-space: nowrap;
}
.talk4you-size {
  visibility: hidden;
}
.talk4you-art {
  position: absolute;
  display: block;
  width: 100%;
  aspect-ratio: 1407 / 215;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  pointer-events: none;
}
.talk4you-art::before,
.talk4you-art::after {
  content: "";
  position: absolute;
  display: block;
  width: 106.609808%;
  aspect-ratio: 1;
  left: -3.198294%;
  top: -284.186047%;
}
.talk4you-art::before {
  background: currentColor;
  -webkit-mask: var(--talk4you-artwork) center / 100% 100% no-repeat;
  mask: var(--talk4you-artwork) center / 100% 100% no-repeat;
}
.talk4you-art::after {
  background: var(--talk4you-artwork) center / 100% 100% no-repeat;
  /* Retain the original yellow numeral over the colour-adapted lettering.
     These coordinates follow its outline in the untouched 1500px PNG. */
  clip-path: polygon(46.6% 49.4%, 52.8% 40.7%, 57.1333% 40.7%,
    57.1333% 49.0667%, 58.8667% 49.0667%, 58.8667% 52.3333%,
    57.1333% 52.3333%, 57.1333% 55%, 53.6667% 55%,
    53.6667% 52.3333%, 46.6% 52.3333%);
}
.dark .talk4you-inline,
.hero-dark .talk4you-inline {
  color: #fff;
}
.hero-light .talk4you-inline {
  color: #04132b;
}