/* One original logo bitmap; CSS masks preserve its lettering and details. */
.brand-lettermark { position:relative; display:block; flex:none; width:auto; height:44px; aspect-ratio:743 / 276; --brand-name:#1a1a1a; --brand-surname:#b94e2a; }
.brand-lettermark > img { display:block; height:100%; width:100%; }
.brand-lettermark::before,.brand-lettermark::after { content:""; position:absolute; inset:0; pointer-events:none; mask:url("brand-text.webp") center / 100% 100% no-repeat; -webkit-mask:url("brand-text.webp") center / 100% 100% no-repeat; }
.brand-lettermark::before { background:var(--brand-surname); clip-path:inset(12% 80% 27% 0); }
.brand-lettermark::after { background:var(--brand-name); clip-path:inset(12% 42% 27% 20%); }
.topnav-brand .brand-lettermark { --brand-name:#fff; --brand-surname:#999; }
@media(max-width:900px) { .brand-lettermark { height:30px; } }
@media(max-width:600px) { .topnav-brand .brand-lettermark { height:28px; } }