/* Brand header bar (optitower.com-inspired hero strip) + theme toggle */
.brandbar{position:relative;background:var(--wc-deep-navy);color:var(--wc-white);overflow:hidden;margin-bottom:20px;border-bottom:var(--divider) solid var(--wc-teal);}
.brandbar::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--wc-green) 0%,var(--wc-teal) 40%,transparent 100%);opacity:.5;z-index:1;pointer-events:none;}
.brandbar-inner{position:relative;z-index:2;display:flex;align-items:center;gap:24px;padding:20px 28px;max-width:1400px;margin:0 auto;}
.brandbar-logo{height:38px;width:auto;display:block;flex-shrink:0;}
.brandbar-logo.sonnen{height:28px;color:var(--wc-white);}
.brandbar-logo.sonnen svg{width:auto;height:100%;}
.brandbar-title{flex:1;min-width:0;}
.brandbar-eyebrow{font-family:var(--font-display);font-weight:900;font-size:10px;letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--wc-teal);margin-bottom:6px;}
.brandbar-title h1{font-family:var(--font-display);font-weight:900;font-size:24px;line-height:1.05;letter-spacing:var(--title-ls);text-transform:uppercase;color:var(--wc-white);margin:0;}
.brandbar-title h1 .accent{color:var(--wc-teal);}
.brandbar-subtitle{font-family:var(--font-body);font-size:12px;color:var(--wc-navy-300);margin-top:5px;font-style:italic;}
.brandbar-right{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.brandbar-right .brandbar-logo{height:34px;}

/* Theme toggle (lives in brandbar-right) */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--wc-white);cursor:pointer;transition:background .15s,border-color .15s;padding:0;}
.theme-toggle:hover{background:rgba(50,175,182,.14);border-color:var(--wc-teal);}
.theme-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.theme-toggle svg{width:10px;height:10px;display:block;}
.theme-toggle .icon-sun{display:none;}
.theme-toggle .icon-moon{display:block;}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none;}

/* ─── Mobile / narrow viewports ───────────────────────────────
   Drop the eyebrow's wide letter-spacing so it doesn't wrap into
   three lines, scale the title down, and stack the logos + theme
   toggle onto their own row beneath the title so nothing crops. */
@media(max-width:720px){
  .brandbar-inner{
    flex-wrap:wrap;
    padding:12px 14px;
    gap:10px 12px;
    align-items:center;
  }
  .brandbar-logo{height:30px;}
  .brandbar-logo.sonnen{height:22px;}
  .brandbar-right .brandbar-logo{height:26px;}
  .brandbar-title{flex:1 1 100%;order:3;min-width:0;}
  .brandbar-right{order:2;margin-left:auto;}
  .brandbar-title h1{font-size:18px;line-height:1.1;}
  .brandbar-eyebrow{font-size:9px;letter-spacing:.06em;margin-bottom:4px;}
  .brandbar-subtitle{font-size:11px;margin-top:3px;}
}
@media(max-width:420px){
  .brandbar-title h1{font-size:16px;}
  .brandbar-eyebrow{letter-spacing:.04em;}
}