/* BACTIF header bar — sober, professional, legible over the hero photograph. */

.workspace .topbar,
.workspace.home-mode .topbar{
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 0 clamp(16px, 2.6vw, 34px) !important;
  gap: 20px !important;
}
/* Let the photograph breathe: no black strip behind the wordmark or menu. */
.workspace .topbar::before{
  content:"";
  position:absolute; inset:0;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  pointer-events:none;
  z-index:0;
}
.workspace .topbar > *{ position:relative; z-index:1; }

/* Desktop: wordmark moves OUT of the rail into the top-left over the hero. */
@media (min-width: 901px){
  .sidebar{
    width:76px !important;
    padding:14px 6px !important;
  }
  .sidebar > .brand,
  .sidebar .focus-note,
  .sidebar .side-bottom{ display:none !important; }
  /* Keep the icon links low in the rail — never pulled up beside the wordmark. */
  .sidebar nav{ gap:4px !important; margin-top: 96px !important; }
  .sidebar nav button{
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:3px !important;
    padding:9px 2px !important;
  }
  .sidebar nav button span{
    font-size:8px !important;
    line-height:1.15 !important;
    max-width:100%;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .sidebar nav button b,
  .sidebar nav button i{ display:none !important; }
  .workspace{ margin-left:76px !important; }

  .workspace .topbar{ justify-content:space-between !important; }
  .workspace .topbar > .header-brand{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    border-right:0 !important;
    padding-left:2px !important;
    flex:0 0 auto !important;
  }
  .workspace .topbar > .header-brand .header-mark{ width:40px !important; height:40px !important; }
  .workspace .topbar > .header-brand strong{ font-size:24px !important; }
  .workspace .topbar .top-menu{ margin-left:auto !important; }
}

/* Brand block (mobile) */
.topbar .header-brand{ min-width:0 !important; }
.topbar .header-brand .header-mark{
  filter: drop-shadow(0 3px 9px rgba(41,214,175,.4));
}
.topbar .header-brand strong{
  color:#f4fdff !important; -webkit-text-fill-color:#f4fdff !important;
  letter-spacing:.14em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 10px rgba(60,190,190,.35) !important;
}
/* Give the wordmark the same visual span as the complete tagline below it. */
.topbar > .header-brand strong.wordmark{
  display:flex !important;
  width:100% !important;
  justify-content:space-between !important;
  align-items:center !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}
.topbar > .header-brand strong.wordmark > span{ display:inline-block; }
/* Both wordmark and tagline share the same track so their edges line up. */
.topbar > .header-brand strong.wordmark,
.topbar > .header-brand .tagline-words{
  grid-column:2 !important;
}
.topbar > .header-brand .tagline-words{
  justify-content:space-between !important;
  width:100% !important;
}
/* Tagline: larger, bold, high-contrast colors for the three brand words. */
.topbar .header-brand .tagline-words > span{
  font-size:10px !important;
  font-weight:900 !important;
  -webkit-text-stroke:.25px rgba(3,18,24,.9);
  text-shadow: 0 2px 2px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.65) !important;
}
.topbar .header-brand .tagline-words > span:nth-child(1){
  color:#ff4355 !important; -webkit-text-fill-color:#ff4355 !important;
}
.topbar .header-brand .tagline-words > span:nth-child(2){
  color:#36a9ff !important; -webkit-text-fill-color:#36a9ff !important;
}
.topbar .header-brand .tagline-words > span:nth-child(3){
  color:#ff9638 !important; -webkit-text-fill-color:#ff9638 !important;
}
.topbar .header-brand .tagline-words{
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}

/* Menu — text-only links with distinct strong colors and a crisp image-safe keyline. */
.topbar .top-menu{
  display:flex !important;
  align-items:center !important;
  gap: clamp(3px, .6vw, 9px) !important;
}
.topbar .top-menu > button,
.topbar .top-menu > a,
.topbar .top-menu > .pricing-menu-item,
.topbar .top-menu > .auth-text-link{
  background: transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding: 8px clamp(7px, 1vw, 14px) !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:normal !important;
  letter-spacing:.035em !important;
  text-decoration:none !important;
  -webkit-text-stroke:.25px rgba(3,18,24,.9);
  text-shadow: 0 2px 2px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.65) !important;
  filter:none !important;
  transition: color .18s ease, text-shadow .18s ease, transform .18s ease !important;
}
.topbar .top-menu > button:nth-child(1){ color:#ff4355 !important; -webkit-text-fill-color:#ff4355 !important; }
.topbar .top-menu > button:nth-child(2){ color:#36a9ff !important; -webkit-text-fill-color:#36a9ff !important; }
.topbar .top-menu > .pricing-menu-item{ color:#ffd166 !important; -webkit-text-fill-color:#ffd166 !important; cursor:default !important; }
.topbar .top-menu > button:nth-child(4){ color:#45d487 !important; -webkit-text-fill-color:#45d487 !important; }
.topbar .top-menu > .auth-text-link{ color:#f5cf45 !important; -webkit-text-fill-color:#f5cf45 !important; }

.topbar .top-menu > button:hover,
.topbar .top-menu > button:focus-visible,
.topbar .top-menu > .auth-text-link:hover,
.topbar .top-menu > .auth-text-link:focus-visible{
  background: transparent !important;
  border-color: transparent !important;
  filter: brightness(1.35) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 0 14px currentColor !important;
  transform: translateY(-1px);
}
.topbar .top-menu > button.active{
  background: transparent !important;
  border:0 !important;
  box-shadow:none !important;
  filter: brightness(1.4) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 0 16px currentColor !important;
}
.topbar .top-menu > .auth-text-link{
  margin-left: 8px !important;
  background: transparent !important;
}

/* Carousel pause control */
.topbar .top-actions button{
  background: rgba(255,255,255,.15) !important;
  border:1px solid rgba(255,255,255,.3) !important;
  color:#eafcff !important;
}

@media (max-width: 900px){
  .workspace .topbar,
  .workspace.home-mode .topbar{
    min-height:74px !important;
    height:auto !important;
    padding: 9px 12px !important;
    gap: 6px !important;
    align-items:flex-start !important;
  }
  .workspace .topbar::before{ inset:0 !important; background: transparent !important; }
  .topbar .header-brand{
    align-items:flex-start !important;
    padding-top:2px !important;
  }
  .topbar .header-brand strong{ font-size:20px !important; }
  .topbar .header-brand .tagline-words{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:3px 6px !important;
    line-height:1.25 !important;
  }
  .topbar .header-brand .tagline-words > span{ font-size:9px !important; }
  .topbar .top-menu{
    flex-wrap:wrap !important;
    justify-content:flex-end !important;
    row-gap:1px !important;
    column-gap:1px !important;
    max-width:58% !important;
  }
  .topbar .top-menu > button,
  .topbar .top-menu > .auth-text-link{
    padding: 5px 5px !important;
    font-size:10px !important;
    line-height:1.25 !important;
    border-radius:0 !important;
  }
  .topbar .top-menu > .auth-text-link{ margin-left:2px !important; }
}

/* Sidebar wordmark: keep the tagline on one line inside the 250px rail. */
@media (min-width: 901px){
  .sidebar .brand small{
    font-size:8px !important;
    letter-spacing:.06em !important;
    word-spacing:2px !important;
    white-space:nowrap !important;
  }
}
@media (min-width: 901px){
  .sidebar .brand{ padding-left:2px !important; padding-right:0 !important; }
  .sidebar .brand small .tagline-words,
  .sidebar .brand small .tagline-words > span{
    font-size:7px !important;
    letter-spacing:.05em !important;
    word-spacing:2px !important;
    white-space:nowrap !important;
  }
}

/* Keep one unmistakable brand lockup outside the sidebar at every viewport. */
.sidebar > .brand{ display:none !important; }
.topbar > .header-brand{
  display:grid !important;
  grid-template-columns:auto minmax(0, 1fr);
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:10px;
  row-gap:1px;
  min-width:0 !important;
  border-right:0 !important;
  padding-right:0 !important;
}
.topbar > .header-brand .header-mark{
  grid-column:1;
  grid-row:1;
  align-self:center;
  margin:0 !important;
}
/* Flatten the wrapper so the tagline can sit below the complete logo/title row. */
.topbar > .header-brand > div{ display:contents !important; }
.topbar > .header-brand strong{
  grid-column:2;
  grid-row:1;
  display:block !important;
  align-self:center;
  line-height:.95 !important;
  white-space:nowrap;
}
.topbar > .header-brand .tagline-words{
  grid-column:1 / -1;
  grid-row:2;
  display:flex !important;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap !important;
  gap:5px !important;
  margin-top:1px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  width:100%;
}

@media (max-width:900px){
  .topbar > .header-brand{
    column-gap:8px;
    row-gap:1px;
    align-self:flex-start;
  }
  .topbar > .header-brand .header-mark{
    width:36px !important;
    height:36px !important;
  }
  .topbar > .header-brand strong{
    font-size:20px !important;
  }
  .topbar > .header-brand .tagline-words{
    gap:4px !important;
    margin-top:1px !important;
    font-size:9px !important;
    letter-spacing:.08em !important;
  }
}

/* Keep the horizontal menu tight in the top-right corner over the banner. */
.workspace .topbar{ position:relative !important; }
.workspace .topbar > .top-menu{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  margin:0 !important;
  padding:0 !important;
  z-index:3 !important;
}

/* Remove the black “Ⅱ” pause badge from every photographic banner. */
.visual-hero .hero-control,
.visual-hero button[aria-label*="carousel"],
.visual-hero button[aria-label*="Carousel"]{
  display:none !important;
}

/* Final banner overlay: keep the source wording, remove the separate header-bar space. */
.workspace.home-mode > .topbar{
  position:absolute !important;
  inset:0 0 auto 0 !important;
  height:0 !important;
  min-height:0 !important;
  padding:0 !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  z-index:30 !important;
  pointer-events:none !important;
}
.workspace.home-mode > .topbar::before{ display:none !important; }
.workspace.home-mode > .topbar > *{ pointer-events:auto; }
.workspace.home-mode > .visual-hero{ position:relative !important; z-index:1 !important; }
.workspace.home-mode > .topbar > .header-brand{
  position:absolute !important;
  top:clamp(14px, 2vw, 24px) !important;
  left:clamp(14px, 2vw, 28px) !important;
  z-index:2 !important;
  margin:0 !important;
}
.workspace.home-mode > .topbar > .top-menu{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  z-index:2 !important;
  margin:0 !important;
  padding:0 !important;
  justify-content:flex-end !important;
  gap:0 !important;
}
.workspace.home-mode > .topbar > .top-menu > button,
.workspace.home-mode > .topbar > .top-menu > .auth-text-link{
  padding:4px 6px !important;
}
.workspace.home-mode > .topbar > .mobile-brand{ display:none !important; }

@media (max-width:900px){
  .workspace.home-mode > .topbar > .header-brand{
    top:12px !important;
    left:12px !important;
  }
  .workspace.home-mode > .topbar > .top-menu{
    top:10px !important;
    right:8px !important;
    left:auto !important;
    max-width:calc(100% - 220px) !important;
    overflow-x:auto !important;
    scrollbar-width:none;
    justify-content:flex-end !important;
  }
  .workspace.home-mode > .topbar > .top-menu::-webkit-scrollbar{ display:none; }
  .workspace.home-mode > .visual-hero{ min-height:clamp(430px, 76vh, 650px) !important; }
}

@media (max-width:590px){
  .workspace.home-mode > .topbar > .header-brand{
    top:10px !important;
    left:10px !important;
  }
  .workspace.home-mode > .topbar > .top-menu{
    top:10px !important;
    right:6px !important;
    left:auto !important;
    max-width:calc(100% - 190px) !important;
    justify-content:flex-end !important;
    gap:0 !important;
  }
  .workspace.home-mode > .topbar > .top-menu > button,
  .workspace.home-mode > .topbar > .top-menu > .auth-text-link{
    padding:3px 4px !important;
    font-size:clamp(9px, 2.35vw, 11px) !important;
  }
}


/* ============ FINAL HEADER LOCKUP ============ */
/* Menu: always a single line, on every screen. */
.workspace .topbar .top-menu,
.topbar .top-menu{
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  max-width: none !important;
}
@media (max-width: 900px){
  .workspace .topbar > .top-menu,
  .topbar .top-menu{
    top: 6px !important;
    right: 6px !important;
    gap: 0 !important;
    max-width: calc(100% - 20px) !important;
  }
  .topbar .top-menu > button,
  .topbar .top-menu > .auth-text-link{
    padding: 4px 3px !important;
    font-size: 8.5px !important;
    letter-spacing: 0 !important;
  }
  .topbar .top-menu > .auth-text-link{ margin-left: 3px !important; }
}
@media (max-width: 380px){
  .topbar .top-menu > button,
  .topbar .top-menu > .auth-text-link{ font-size: 7.5px !important; padding: 4px 2px !important; }
}

/* Desktop: logo out of the rail, sitting immediately before BACTIF at the
   top-left over the banner, with the tagline tucked beneath both. */
@media (min-width: 901px){
  .workspace .topbar{ padding-left: 90px !important; }
  .workspace .topbar > .header-brand,
  .topbar > .header-brand{
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    align-items: center !important;
    justify-items: start !important;
    padding-left: 0 !important;
    flex: 0 0 auto !important;
  }
  .workspace .topbar > .header-brand .header-mark{ grid-column: 1 !important; grid-row: 1 !important; }
  .workspace .topbar > .header-brand strong{ grid-column: 2 !important; grid-row: 1 !important; }
  .workspace .topbar > .header-brand .tagline-words{
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-content: flex-start !important;
    margin-top: 2px !important;
  }
}
@media (min-width: 901px){
  .workspace.home-mode > .topbar > .header-brand,
  .workspace > .topbar > .header-brand{ margin-left: 62px !important; }
}

/* ===== Wordmark stretched to the exact tagline width (all viewports) ===== */
.workspace .topbar > .header-brand strong.wordmark,
.topbar > .header-brand strong.wordmark{
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  width: 100% !important;
  justify-content: space-between !important;
  letter-spacing: 0 !important;
}
.workspace .topbar > .header-brand .tagline-words,
.topbar > .header-brand .tagline-words{
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: flex !important;
  width: 100% !important;
  justify-content: space-between !important;
  gap: 0 !important;
}

/* ===== Larger, deeper brand lockup + bigger menu icon ===== */
.workspace .topbar > .header-brand strong.wordmark,
.topbar > .header-brand strong.wordmark{
  font-size: clamp(40px, 6vw, 74px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 3px rgba(0,0,0,.6), 0 4px 18px rgba(0,0,0,.45), 0 0 16px rgba(70,205,205,.35) !important;
  -webkit-text-stroke: .4px rgba(2,20,26,.55);
}
/* Tagline sits under the logo + title together, spanning the whole lockup. */
.workspace .topbar > .header-brand .tagline-words,
.topbar > .header-brand .tagline-words{
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 0 !important;
  margin-top: 3px !important;
}
.workspace .topbar > .header-brand .tagline-words > span,
.topbar > .header-brand .tagline-words > span{
  font-size: clamp(12px, 1.6vw, 18px) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
}
.workspace .topbar > .header-brand .header-mark,
.topbar > .header-brand .header-mark{
  width: clamp(52px, 5.6vw, 72px) !important;
  height: clamp(52px, 5.6vw, 72px) !important;
}
@media (max-width: 900px){
  .topbar > .header-brand strong.wordmark{ font-size: 38px !important; }
  .topbar > .header-brand .tagline-words > span{ font-size: 11px !important; }
  .topbar > .header-brand .header-mark{ width: 48px !important; height: 48px !important; }
}

.menu-toggle{
  width: 40px !important;
  height: 40px !important;
  padding: 8px !important;
  border-radius: 11px !important;
  gap: 3px !important;
}
.menu-toggle i{ height: 3px !important; }
.workspace .topbar > .header-brand strong.wordmark > span,
.topbar > .header-brand strong.wordmark > span{
  color:#ffffff !important; -webkit-text-fill-color:#ffffff !important;
  -webkit-text-stroke:.7px rgba(2,26,34,.85);
  text-shadow: 0 2px 3px rgba(0,0,0,.85), 0 4px 16px rgba(0,0,0,.6) !important;
}
.workspace .topbar > .header-brand strong.wordmark > span,
.topbar > .header-brand strong.wordmark > span{
  -webkit-text-stroke: 0 !important;
  paint-order: stroke fill;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 3px 12px rgba(0,0,0,.65), 0 0 14px rgba(45,190,200,.4) !important;
}

/* Option 5: balanced responsive emphasis — compact, clear, and proportional. */
.workspace .topbar > .header-brand strong.wordmark,
.topbar > .header-brand strong.wordmark{
  font-size: clamp(26px, 3.3vw, 42px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
.workspace .topbar > .header-brand strong.wordmark > span,
.topbar > .header-brand strong.wordmark > span{
  font-size: inherit !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
/* Keep the logo and tagline legible without competing with the wordmark. */
.workspace .topbar > .header-brand .header-mark,
.topbar > .header-brand .header-mark{
  width: clamp(36px, 4.6vw, 56px) !important;
  height: clamp(36px, 4.6vw, 56px) !important;
}
.workspace .topbar > .header-brand .tagline-words > span,
.topbar > .header-brand .tagline-words > span{
  font-size: clamp(9px, 1.25vw, 14px) !important;
  line-height: 1.15 !important;
}
@media (max-width: 380px){
  .topbar > .header-brand strong.wordmark,
  .topbar > .header-brand strong.wordmark{
    font-size: 26px !important;
  }
  .topbar > .header-brand .header-mark{
    width: 36px !important;
    height: 36px !important;
  }
  .topbar > .header-brand .tagline-words > span{
    font-size: 9px !important;
  }
}
@media (min-width: 901px){
  .workspace .topbar > .header-brand strong.wordmark,
  .topbar > .header-brand strong.wordmark{
    font-size: 42px !important;
  }
  .workspace .topbar > .header-brand .header-mark,
  .topbar > .header-brand .header-mark{
    width: 56px !important;
    height: 56px !important;
  }
  .workspace .topbar > .header-brand .tagline-words > span,
  .topbar > .header-brand .tagline-words > span{
    font-size: 14px !important;
}

}

/* Center BACTIF on the logo's visual midline at every responsive size. */
.workspace .topbar > .header-brand strong.wordmark,
.topbar > .header-brand strong.wordmark{
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  min-height: clamp(36px, 4.6vw, 56px) !important;
  /* Optical correction for the font's lower-heavy glyph box. */
  transform: translateY(clamp(-3px, -0.22vw, -1px));
}

/* Distinct color coding keeps every top-menu destination scannable. */
.topbar .top-menu > .top-menu-home{
  color:#8eeaff !important; -webkit-text-fill-color:#8eeaff !important;
}
.topbar .top-menu > .top-menu-diseases{
  color:#ff8191 !important; -webkit-text-fill-color:#ff8191 !important;
}
.topbar .top-menu > .top-menu-pricing{
  color:#ffd166 !important; -webkit-text-fill-color:#ffd166 !important;
}
.topbar .top-menu > .top-menu-faq{
  color:#83f0b0 !important; -webkit-text-fill-color:#83f0b0 !important;
}
.topbar .top-menu > .top-menu-contact-us{
  color:#ffb36b !important; -webkit-text-fill-color:#ffb36b !important;
}
.topbar .top-menu > .top-menu-sign-in{
  color:#b8c7ff !important; -webkit-text-fill-color:#b8c7ff !important;
}
.topbar .top-menu > .top-menu-sign-up{
  color:#d5a8ff !important; -webkit-text-fill-color:#d5a8ff !important;
}
.topbar .top-menu > .top-menu-sign-out{
  color:#72f2e4 !important; -webkit-text-fill-color:#72f2e4 !important;
}

/* Preserve those accents inside the light vertical menu panel. */
.topbar .menu-dock .top-menu.open > .top-menu-home{ color:#087d9a !important; -webkit-text-fill-color:#087d9a !important; }
.topbar .menu-dock .top-menu.open > .top-menu-diseases{ color:#c44759 !important; -webkit-text-fill-color:#c44759 !important; }
.topbar .menu-dock .top-menu.open > .top-menu-pricing{ color:#b87900 !important; -webkit-text-fill-color:#b87900 !important; }
.topbar .menu-dock .top-menu.open > .top-menu-faq{ color:#198a55 !important; -webkit-text-fill-color:#198a55 !important; }
.topbar .menu-dock .top-menu.open > .top-menu-contact-us{ color:#b86518 !important; -webkit-text-fill-color:#b86518 !important; }
.topbar .menu-dock .top-menu.open > .top-menu-sign-in{ color:#596bb7 !important; -webkit-text-fill-color:#596bb7 !important; }
.topbar .menu-dock .top-menu.open > .top-menu-sign-up{ color:#8b50b7 !important; -webkit-text-fill-color:#8b50b7 !important; }
.topbar .menu-dock .top-menu.open > .top-menu-sign-out{ color:#008f9c !important; -webkit-text-fill-color:#008f9c !important; }
.topbar .menu-dock .top-menu.open > .top-menu-link:hover,
.topbar .menu-dock .top-menu.open > .top-menu-link.active{
  filter:brightness(1.08) !important;
  text-shadow:0 0 10px currentColor !important;
}