/* Keep the header surface fully transparent throughout the page. */
body > header,
body > header.is-frosted {
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Keep the contact action at the right edge at every viewport width. */
body > header > .header-cta { margin-left: auto; }

/* The wordmark reserves the same space while the original symbol turns in. */
body > header > .brand {
  position: relative;
  perspective: 520px;
}
body > header > .brand .brand-wordmark {
  display: block;
  backface-visibility: hidden;
  transform-origin: center;
  transition: opacity 240ms ease, transform 420ms cubic-bezier(.22,.7,.25,1);
}
body > header > .brand .brand-symbol {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.3em;
  height: 2.3em;
  max-width: none;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  transform: translate(-50%, -50%) rotateY(-80deg) scale(.9);
  transition: opacity 280ms ease, transform 420ms cubic-bezier(.22,.7,.25,1);
}
@media (hover: hover) and (pointer: fine) {
  body > header > .brand:hover .brand-wordmark {
    opacity: 0;
    transform: rotateY(80deg) scale(.96);
  }
  body > header > .brand:hover .brand-symbol {
    opacity: 1;
    transform: translate(-50%, -50%) rotateY(0) scale(1);
  }
}
body > header > .brand:focus-visible .brand-wordmark {
  opacity: 0;
  transform: rotateY(80deg) scale(.96);
}
body > header > .brand:focus-visible .brand-symbol {
  opacity: 1;
  transform: translate(-50%, -50%) rotateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  body > header > .brand .brand-wordmark,
  body > header > .brand .brand-symbol { transition: none; }
  body > header > .brand .brand-wordmark { transform: none !important; }
  body > header > .brand .brand-symbol { transform: translate(-50%, -50%) !important; }
}