.brand-logo-frame { position: relative; display: block; max-width: 100%; }
.brand-header-frame { width: 180px; }
.brand-login-frame { width: 240px; margin: 0 auto; }
.brand-header-logo, .brand-login-logo { display: block; width: 100%; height: auto; }
.brand-white-lettering { display: none; }
/* The provided PNG has its symbol left of 35%; preserve it and whiten only the lettering. */
[data-theme="dark"] .brand-header-logo, [data-theme="dark"] .brand-login-logo {
    clip-path: inset(0 65% 0 0);
}
[data-theme="dark"] .brand-white-lettering {
    display: block; position: absolute; inset: 0; width: 100%; height: auto;
    filter: brightness(0) invert(1); clip-path: inset(0 0 0 35%); pointer-events: none;
}
@media (max-width: 768px) {
    .brand-header-frame { width: 150px; }
}