/* Faded phrase beside the Method. logo */
.logo .logo-phrase {
  display: inline-block;
  margin-left: 0.3em;
  font-weight: 500;
  opacity: 0.15;
  transition: opacity 0.9s ease;
  white-space: nowrap;
  /* own gradient, because a faded child can't share the parent's text clip */
  background: linear-gradient(135deg, #5A6169 0%, #A6ADB4 40%, #7C838B 70%, #B0B7BE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.logo .logo-phrase.is-hidden { opacity: 0; }

/* Incall: slow breathe in and out */
.logo .logo-phrase[data-mode="breathe"] {
  transition: none;
  animation: logoPhraseBreathe 7s ease-in-out infinite;
}
@keyframes logoPhraseBreathe {
  0%, 100% { opacity: 0.04; }
  50%      { opacity: 0.15; }
}

.logo .logo-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Keep the header tidy on small phones */
@media (max-width: 420px) {
  .logo .logo-phrase { font-size: 0.82em; margin-left: 0.25em; }
}
@media (max-width: 340px) {
  .logo .logo-phrase { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .logo .logo-phrase { transition: none; }
  .logo .logo-phrase[data-mode="breathe"] { animation: none; opacity: 0.15; }
}

.logo { white-space: nowrap; }