body.preloading { overflow: hidden; }
.brand-loader {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center; background: #f5fafa;
  opacity: 1; visibility: visible;
  transition: opacity .4s cubic-bezier(.22, 1, .36, 1), visibility .4s;
}
.brand-loader::before { content: none; }
.brand-loader-mark {
  display: grid; justify-items: center; gap: 18px;
  opacity: 1; transform: none;
  animation: notresEnter .5s cubic-bezier(.22, 1, .36, 1) both;
  transition: opacity .32s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}
.brand-loader-symbol {
  position: relative; display: block; width: 64px;
  aspect-ratio: 471 / 438; overflow: hidden;
}
/* Crop the original logo to its N symbol without altering the brand artwork. */
.brand-loader-symbol img {
  position: absolute; width: 372.6115%; height: auto;
  max-width: none; left: -25.0531%; top: -69.1781%;
}
.brand-loader-line {
  width: 56px; height: 2px; overflow: hidden;
  border-radius: 3px; background: #d4e8e8;
}
.brand-loader-line::after {
  content: ''; display: block; width: 42%; height: 100%;
  background: #007f83; animation: notresLoading .9s cubic-bezier(.45, 0, .55, 1) infinite;
}
body.loaded .brand-loader { opacity: 0; visibility: hidden; pointer-events: none; }
body.loaded .brand-loader-mark { opacity: 0; transform: translateY(-4px) scale(.96); }
@keyframes notresEnter {
  from { opacity: 0; transform: translateY(6px) scale(.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes notresLoading { from { transform: translateX(-110%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
  .brand-loader { transition: none; }
  .brand-loader-mark { animation: none; transition: none; }
  .brand-loader-line::after { animation: none; margin: auto; }
}