/* Site-wide TW monogram. A single asset masks both light and dark header states. */
:is(.site-header,.health-header,.alt-header,.koto-header) .tw-site-brand{
  display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;
  width:6.6rem!important;min-width:6.6rem!important;height:2.65rem!important;
  padding:0!important;line-height:1!important;text-decoration:none!important;
  transform:none!important;position:relative;isolation:isolate;overflow:visible!important;
}
:is(.site-header,.health-header,.alt-header,.koto-header) .tw-site-brand .tw-site-mark{
  position:relative;display:block!important;width:6.35rem;height:2.1rem;
  color:inherit!important;background:none!important;transform:none!important;
  transition:none!important;overflow:visible;
}
:is(.site-header,.health-header,.alt-header,.koto-header) .tw-site-brand .tw-site-mark::before,
:is(.site-header,.health-header,.alt-header,.koto-header) .tw-site-brand .tw-site-mark::after{
  content:"";position:absolute;inset:0;display:block;
  -webkit-mask:url('/assets/tw-monogram-black.png') center / contain no-repeat;
  mask:url('/assets/tw-monogram-black.png') center / contain no-repeat;
  pointer-events:none;
}
:is(.site-header,.health-header,.alt-header,.koto-header) .tw-site-brand .tw-site-mark::before{background:currentColor;z-index:1}
:is(.site-header,.health-header,.alt-header,.koto-header) .tw-site-brand .tw-site-mark::after{background:#3f4ed7;opacity:0;z-index:0}
:is(.site-header,.health-header,.alt-header,.koto-header) .tw-site-brand:is(:hover,:focus-visible) .tw-site-mark::before{animation:tw-echo-base .7s ease both}
:is(.site-header,.health-header,.alt-header,.koto-header) .tw-site-brand:is(:hover,:focus-visible) .tw-site-mark::after{animation:tw-echo-trail .72s ease both}
/* Black is the default on light headers. */
body.refined-system :is(.site-header,.health-header,.alt-header,.koto-header) .tw-site-brand,
:is(.site-header,.health-header,.alt-header,.koto-header) .tw-site-brand{color:#111113!important}
/* Dark and photographic headers use the white version of the same mark. */
body.refined-system .health-header .tw-site-brand,
body.home-hero-options[data-hero-image="on"] .alt-header .tw-site-brand,
body.home-tw-concept[data-hero-image="on"] .alt-header .tw-site-brand,
body.alt-refined-image .alt-header .tw-site-brand,
body.alt-koto .koto-header .tw-site-brand{
  color:#fff!important;
}
/* Light Services and About headers keep the visible monogram black. */
body.refined-system:is(.services-hub,.numbered-service-hero,.about-hero-aligned) .site-header .tw-site-brand .tw-site-mark{
  color:#111113!important;
}
/* Existing wordmark hover rules must not move or recolour the monogram span. */
body.refined-system :is(.brand,.health-brand).tw-site-brand:is(:hover,:focus-visible) .tw-site-mark,
body.refined-system .alt-wordmark.tw-site-brand:is(:hover,:focus-visible) .tw-site-mark{color:inherit!important;transform:none!important}
@keyframes tw-echo-base{0%,100%{transform:translateX(0)}40%{transform:translateX(6px)}65%{transform:translateX(-2px)}}
@keyframes tw-echo-trail{0%,100%{transform:translate(0);opacity:0}20%{transform:translate(-8px,4px);opacity:.8}55%{transform:translate(-13px,6px);opacity:.7}85%{transform:translate(-3px,1px);opacity:0}}
@media(max-width:800px){
  :is(.site-header,.health-header,.alt-header,.koto-header) .tw-site-brand{width:5.6rem!important;min-width:5.6rem!important;height:2.25rem!important}
  :is(.site-header,.health-header,.alt-header,.koto-header) .tw-site-brand .tw-site-mark{width:5.45rem;height:1.8rem}
}
@media(prefers-reduced-motion:reduce){
  :is(.site-header,.health-header,.alt-header,.koto-header) .tw-site-brand:is(:hover,:focus-visible) .tw-site-mark::before,
  :is(.site-header,.health-header,.alt-header,.koto-header) .tw-site-brand:is(:hover,:focus-visible) .tw-site-mark::after{animation:none!important}
}