/* SECTION / Brand bar — Figma mobile "SECTION" 402x52 (teal strip + wordmark).
   Desktop renders this bar inside the fixed lead panel instead (.top_bunner),
   so this component is mobile-only.

   It hides itself rather than leaning on the shared .only_mobile helper: both
   are single-class selectors, so .only_mobile{display:none} and
   .brandbar{display:flex} tie on specificity and this file — loaded last —
   would win and leak the bar onto desktop. Owning the default here makes the
   component correct regardless of stylesheet order. */

.brandbar {
  display: none;
  background: var(--freesbe-teal);
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {

  .brandbar,
  .mobile .brandbar {
    display: flex;
    height: 13.8667vw; /* 52 */
  }

  .brandbar__logo,
  .mobile .brandbar__logo {
    width: 18.6667vw; /* 70 */
    height: 5.3333vw; /* 20 */
    display: block;
  }
}