/* =========================================================
   V345 MOBILE HEADER + CLEAN BRAND ICON — DARK / FROSTED
   Purpose: keep the v344 dark/frosted mobile header everywhere and
   refine the brand icon so no pale outline/box is visible. The icon
   receives a subtle crop/zoom only on mobile. Desktop remains untouched.
   ========================================================= */
@media (max-width: 850px) {
  html body .site-header,
  html body header.site-header,
  html body .site-header.page-header,
  html body header.site-header.page-header,
  html body .site-header.home-dynamic-header,
  html body header.site-header.home-dynamic-header,
  html body .site-header.home-dynamic-header.is-solid,
  html body header.site-header.home-dynamic-header.is-solid,
  html body .site-header.home-dynamic-header.menu-open,
  html body header.site-header.home-dynamic-header.menu-open,
  html body .contact-header {
    background: linear-gradient(180deg, rgba(7, 15, 26, .92), rgba(7, 15, 26, .86)) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.18) !important;
    backdrop-filter: blur(16px) saturate(1.18) !important;
  }


  /* V345 — mobile logo: no white/pale box, subtle zoom to crop the
     baked outer rim and make the mark feel integrated with the header. */
  html body .site-header .brand-mark,
  html body .site-header.home-dynamic-header .brand-mark,
  html body .site-header.home-dynamic-header.is-solid .brand-mark,
  html body .site-header.home-dynamic-header.menu-open .brand-mark,
  html body .site-header .brand-mark.brand-mark-logo {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body .site-header .brand-mark.brand-mark-logo {
    overflow: hidden !important;
    border-radius: 13px !important;
  }

  html body .site-header .brand-mark.brand-mark-logo .brand-logo-img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    transform: scale(1.085) !important;
    transform-origin: 50% 50% !important;
  }

  html body .site-header .brand-text strong,
  html body .site-header.home-dynamic-header .brand-text strong,
  html body .site-header.home-dynamic-header.is-solid .brand-text strong,
  html body .site-header.home-dynamic-header.menu-open .brand-text strong {
    color: #ffffff !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .16) !important;
  }

  html body .site-header .brand-text small,
  html body .site-header.home-dynamic-header .brand-text small,
  html body .site-header.home-dynamic-header.is-solid .brand-text small,
  html body .site-header.home-dynamic-header.menu-open .brand-text small {
    color: rgba(255, 255, 255, .66) !important;
  }

  html body .site-header .nav-toggle,
  html body .site-header.home-dynamic-header .nav-toggle,
  html body .site-header.home-dynamic-header.is-solid .nav-toggle,
  html body .site-header.home-dynamic-header.menu-open .nav-toggle {
    background: rgba(13, 29, 49, .58) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
    color: #ffffff !important;
  }

  html body .site-header .nav-toggle span,
  html body .site-header.home-dynamic-header .nav-toggle span,
  html body .site-header.home-dynamic-header.is-solid .nav-toggle span,
  html body .site-header.home-dynamic-header.menu-open .nav-toggle span,
  html body .page-header .nav-toggle span {
    background: #ffffff !important;
  }

  /* Keep desktop navigation hidden on mobile; if a page exposes it through
     legacy CSS, its colors still remain coherent with the dark bar. */
  html body .site-header .main-nav,
  html body .site-header .main-nav a,
  html body .site-header.home-dynamic-header.is-solid .main-nav,
  html body .site-header.home-dynamic-header.is-solid .main-nav a {
    color: rgba(255, 255, 255, .90) !important;
  }
}