/* Production qlk.to artwork and palette; keep the backoffice copy identical. */
:root {
  --qlk-primary: #205160;
  --qlk-primary-hover: #173d49;
  --qlk-accent: #41b5b2;
  --qlk-accent-hover: #75cecc;
  --qlk-accent-ink: #2d8684;
  --qlk-accent-text: #111111;
  --qlk-background: #ffffff;
  --qlk-surface: #f5f5f5;
  --qlk-tint: #eaf7f6;
  --qlk-border: #dddddd;
  --qlk-input-border: #aaaaaa;
  --qlk-muted: #666666;
  --qlk-on-primary: #ffffff;
  --qlk-on-primary-muted: #dcebed;
  --qlk-on-primary-border: #91b7bd;
}
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--qlk-primary); white-space: nowrap; line-height: 1; }
.brand-lockup .brand-mark { display: block; width: 48px; height: 48px; padding: 3px; object-fit: contain; background: #fff; border-radius: 5px; flex-shrink: 0; }
.brand-wordmark { font: 600 23px/1.1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .12em; }
.brand-context { font: 500 13px/1.3 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; border-left: 1px solid currentColor; padding-left: 12px; margin-left: 2px; }
.brand-link { display: inline-flex; text-decoration: none; color: inherit; }
.brand-lockup.on-dark { color: var(--qlk-on-primary); }
@media (max-width: 480px) { .brand-context { font-size: 12px; padding-left: 9px; } .brand-wordmark { font-size: 20px; } }