/* The KLRE header on every page a candidate sees (Tyler, Oct 27 2026): the same header as the KLRE candidate page in the
   app (PR #31): charcoal band, 5px KLRE red underline, the arms-out logo, Barlow Condensed kicker and title.
   One file so the start page, video interview, assessments and interview times stay in sync. Markup: /assess/brand.js.
   Colors and fonts come from /assess/klre.css (load it first), the same tokens the app uses. */
.kbrand{display:flex;align-items:center;gap:16px;background:var(--band);color:var(--on-band);border-bottom:5px solid var(--red);border-radius:10px;padding:20px 22px;
  font-family:var(--display);-webkit-font-smoothing:antialiased}
.kbrand img{height:40px;width:auto;display:block;flex:none}
.kbrand .kwho{min-width:0}
.kbrand .kkick{font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-band-muted);line-height:1.25}
.kbrand .ktitle{font-weight:900;font-size:46px;line-height:.92;letter-spacing:.005em;text-transform:uppercase;color:var(--on-band);margin:4px 0 0}
@media (max-width:700px){.kbrand{padding:16px}.kbrand .ktitle{font-size:36px}}
@media (max-width:420px){.kbrand{gap:12px}.kbrand img{height:32px}.kbrand .ktitle{font-size:30px}}