/* Preserve the original PNG artwork; only the lettering changes on dark surfaces. */
.brand-logo {
    --brand-logo-width: 252px;
    position: relative;
    display: inline-block;
    width: var(--brand-logo-width);
    max-width: 100%;
    aspect-ratio: 1027 / 224;
    flex-shrink: 0;
    vertical-align: middle;
    isolation: isolate;
}
.brand-logo > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}
.brand-logo__symbol { clip-path: inset(0 78.15% 0 0); }
.brand-logo__words { clip-path: inset(0 0 0 23.5%); }
.brand-logo--dark .brand-logo__words,
.fi-sidebar-header .brand-logo__words { filter: brightness(0) invert(1); }
.brand-logo--dark::before,
.fi-sidebar-header .brand-logo::before {
    /* The white strokes in the source emblem are transparent cutouts. */
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 21.81%;
    border-radius: 50%;
    background: #fff;
    z-index: -1;
}
.brand-logo--dark::after,
.fi-sidebar-header .brand-logo::after {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    width: calc(21.81% + 2px);
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: 50%;
    pointer-events: none;
}
.brand-logo--footer { --brand-logo-width: 280px; }
.brand-logo--admin { --brand-logo-width: 200px; }
@media (max-width: 359px) {
    .brand-logo { --brand-logo-width: 224px; }
    .brand-logo--admin { --brand-logo-width: 200px; }
}