@font-face { font-family: "Archivo"; src: url(/fonts/archivo-variable.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  --white: #fff; --ink: #1d1d1b; --g3: #424242; --g2: #757575; --g1: #bdbdbd; --canvas: #ededeb; --line: #d8d8d6;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

.mark { position: relative; display: inline-block; width: 30px; height: 22px; flex: none }
.mark i { position: absolute; width: 22px; height: 14px; border: 2px solid currentColor; background: var(--white) }
.mark i:nth-child(1) { left: 0; top: 8px } .mark i:nth-child(2) { left: 4px; top: 4px } .mark i:nth-child(3) { left: 8px; top: 0; background: currentColor }
.mark.big { width: 60px; height: 44px } .mark.big i { width: 44px; height: 28px; border-width: 3px }
.mark.big i:nth-child(1) { top: 16px } .mark.big i:nth-child(2) { left: 8px; top: 8px } .mark.big i:nth-child(3) { left: 16px }
.mark.sm { width: 18px; height: 13px } .mark.sm i { width: 13px; height: 8px; border-width: 1.5px }
.mark.sm i:nth-child(1) { top: 5px } .mark.sm i:nth-child(2) { left: 2.5px; top: 2.5px } .mark.sm i:nth-child(3) { left: 5px }


.brand-lockup{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font:700 20px/1.1 var(--sans);font-stretch:110%;white-space:nowrap}
.brand-lockup .mark{color:var(--ink)}
@media(max-width:700px){.brand-lockup{font-size:17px;gap:9px}}