/* Owner-supplied FyPDz artwork. The logo is never recreated with a font. */
.brand:has(.brand-logo-img) {
  flex-shrink: 0;
  gap: 0;
}
.brand-logo-img {
  display: block;
  width: 160px;
  max-width: 100%;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
}
.footer-brand .brand-logo-img {
  width: 180px;
}
.preloader .brand-logo-img {
  width: 180px;
  height: auto;
}
.preloader-logo {
  display: block;
  width: 260px;
  max-width: 70vw;
  height: auto;
  margin: 0 auto var(--space-5, 20px);
}
#brand-3d {
  position: relative;
  isolation: isolate;
  width: 300px;
  height: 88px;
  max-width: 100%;
  margin: 0 0 var(--space-5, 20px);
  direction: ltr;
  contain: layout;
}
/* Visible immediately, even if JavaScript or its CDN cannot load. */
#brand-3d:empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../brand/fypdz-logo.svg") center / 91% auto no-repeat;
}
#brand-3d > img {
  position: absolute;
  inset: 0;
  width: 91%;
  height: 100%;
  margin: auto;
  object-fit: contain;
  opacity: 1;
}
#brand-3d canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  /* Standard alpha compositing, never screen/additive blending. */
  mix-blend-mode: normal;
}
#brand-3d.is-ready canvas { opacity: 1; }
#brand-3d.is-ready > img { opacity: 0; }
html[dir="rtl"] #brand-3d { margin-left: auto; margin-right: 0; }
@media (max-width: 640px) {
  .brand-logo-img { width: 150px; }
  #brand-3d {
    width: 240px;
    height: 74px;
    margin-bottom: var(--space-4, 16px);
  }
}