/*
 * VectorTech Controls ? global mobile Header brand layout guard
 * Keeps the approved readable social icons while stacking the bilingual brand label
 * below VECTORTECH on mobile so device/font rendering cannot cause overlap.
 */
@media (max-width: 767px) {
  header .site-brand-link {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }

  header .site-brand-copy {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }

  header .site-brand-name-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0.16rem !important;
    min-width: 0 !important;
  }

  header .site-brand-wordmark {
    font-size: 0.8125rem !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  header .site-brand-cn-label {
    margin-left: 0 !important;
    font-size: 0.625rem !important;
    letter-spacing: 0.07em !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  header .site-brand-strapline {
    display: none !important;
  }

  header .site-social-links {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
  }
}