/* Brand & Beyers refinement 2026-08-04: professional CTA on all screens;
   lighter mobile navigation and protected mobile logo. */

/* Professional contact action on desktop and mobile. */
#bb-personal .contact .btn,
#bb-personal .contact .btn.mobile-video-cta{
  position:relative!important;
  isolation:auto!important;
  overflow:hidden!important;
  min-height:50px!important;
  padding:13px 24px!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#35445f 0%,#293750 100%)!important;
  color:#fff!important;
  font-weight:600!important;
  letter-spacing:.01em!important;
  text-shadow:none!important;
  box-shadow:0 12px 28px rgba(18,30,50,.22),inset 0 1px rgba(255,255,255,.13)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease!important;
}
#bb-personal .contact .btn:after,
#bb-personal .contact .btn.mobile-video-cta:after{display:none!important;content:none!important}
#bb-personal .contact .btn:hover{
  background:linear-gradient(180deg,#3b4b68 0%,#2d3c57 100%)!important;
  box-shadow:0 15px 34px rgba(18,30,50,.27),inset 0 1px rgba(255,255,255,.15)!important;
  transform:translateY(-1px);
}
#bb-personal .contact .btn:focus-visible{outline:3px solid rgba(255,255,255,.72)!important;outline-offset:4px!important}
#bb-personal .mobile-cta-video{display:none!important}
#bb-personal .mobile-cta-label{position:static!important;z-index:auto!important}

@media (max-width:760px){
  /* Header: transparent premium glass, with the brand protected on every viewport. */
  #bb-personal .nav,
  #bb-personal .nav.is-scrolled{
    min-height:62px!important;
    padding-top:7px!important;
    padding-bottom:7px!important;
    padding-left:max(12px,env(safe-area-inset-left))!important;
    padding-right:max(12px,env(safe-area-inset-right))!important;
    background:linear-gradient(180deg,rgba(18,31,49,.52),rgba(18,31,49,.28))!important;
    border-bottom:1px solid rgba(255,255,255,.13)!important;
    box-shadow:0 6px 18px rgba(7,17,31,.07)!important;
    -webkit-backdrop-filter:blur(18px) saturate(115%)!important;
    backdrop-filter:blur(18px) saturate(115%)!important;
  }
  #bb-personal .nav .brand{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    min-width:0!important;
    max-width:calc(100% - 74px)!important;
    flex:1 1 auto!important;
    gap:8px!important;
    overflow:visible!important;
  }
  #bb-personal .nav .brand img{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:44px!important;
    min-width:44px!important;
    height:36px!important;
    flex:0 0 44px!important;
    object-fit:contain!important;
  }
  #bb-personal .nav .brand span{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    color:#fff!important;
    font-size:clamp(8.5px,2.55vw,10px)!important;
    line-height:1.15!important;
    letter-spacing:.075em!important;
    white-space:nowrap!important;
  }
  #bb-personal .nav .links{flex:0 0 auto!important;min-width:66px!important}

  /* Bottom navigation: lighter, more transparent and integrated. */
  #bb-personal .mobile-section-nav{
    background:linear-gradient(180deg,rgba(25,39,59,.68),rgba(20,33,51,.58))!important;
    border-top:1px solid rgba(255,255,255,.17)!important;
    box-shadow:0 -7px 22px rgba(5,13,27,.07),inset 0 1px rgba(255,255,255,.08)!important;
    -webkit-backdrop-filter:blur(24px) saturate(118%)!important;
    backdrop-filter:blur(24px) saturate(118%)!important;
  }
  #bb-personal .mobile-section-nav a{color:rgba(255,255,255,.68)!important}
  #bb-personal .mobile-section-nav a.is-active{color:#fff!important}
  #bb-personal .mobile-section-nav a[href="#talk"],
  #bb-personal .mobile-section-nav a[href="#talk"].is-active{
    border:1px solid rgba(255,255,255,.20)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.085)!important;
    color:#fff!important;
    box-shadow:inset 0 1px rgba(255,255,255,.13)!important;
  }

  #bb-personal .contact .btn,
  #bb-personal .contact .btn.mobile-video-cta{width:100%!important}

  /* Editorial spacing for the clarity arguments. */
  #bb-personal .mobile-clarity-list div{
    grid-template-columns:28px minmax(0,1fr)!important;
    gap:12px!important;
    padding:13px 0!important;
    color:rgba(255,255,255,.84)!important;
  }
}

@media (max-width:340px){
  #bb-personal .nav .brand img{width:40px!important;min-width:40px!important;height:34px!important;flex-basis:40px!important}
  #bb-personal .nav .brand span{font-size:8.5px!important;letter-spacing:.055em!important}
  #bb-personal .nav .lang button{width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important}
}

@media (prefers-reduced-motion:reduce){
  #bb-personal .contact .btn{transition:none!important}
}