.como-site-header {

  position: sticky;

  top: 0;

  z-index: 70;

  padding: 12px 14px 0;

  background: transparent !important;

  box-shadow: none !important;

  backdrop-filter: none;

  -webkit-backdrop-filter: none;

  pointer-events: none;

}

.como-site-header.is-static {

  position: relative;

}

.como-header-ambient {

  position: absolute;

  top: -62px;

  left: 50%;

  width: min(980px, 82vw);

  height: 120px;

  transform: translateX(-50%);

  opacity: .18;

  background:

    radial-gradient(circle at 34% 50%, rgba(4,160,221,.55), transparent 36%),

    radial-gradient(circle at 68% 50%, rgba(242,141,1,.38), transparent 32%);

  filter: blur(34px);

  pointer-events: none;

  transition: opacity .35s ease;

}

.como-header-2030-shell {

  position: relative;

  width: min(100%, 1340px);

  min-height: 70px;

  margin: 0 auto;

  padding: 10px 12px 10px 16px;

  pointer-events: auto;

  background: #fff;

  border: 0;

  border-radius: 22px;

  box-shadow: none;

  backdrop-filter: blur(22px) saturate(175%);

  -webkit-backdrop-filter: blur(22px) saturate(175%);

  transition:

    min-height .28s ease,

    padding .28s ease,

    border-color .28s ease,

    border-radius .28s ease,

    box-shadow .28s ease,

    background .28s ease,

    transform .28s ease;

}

.como-site-header.is-scrolled .como-header-2030-shell {

  min-height: 62px;

  padding-top: 7px;

  padding-bottom: 7px;

  background: #fff;

  border-color: transparent;

  border-radius: 18px;

  box-shadow: none;

}

.como-site-header.is-scrolled .como-header-ambient {

  opacity: .08;

}

.como-header-brand {

  position: relative;

  min-width: 0;

  padding: 2px 6px 2px 2px;

  border-radius: 14px;

}

.como-header-logo-wrap {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  transition: transform .25s ease;

  max-width: 100%;

  min-width: 0;

}

.como-header-logo-wrap img {

  display: block;

  width: auto !important;

  max-width: 100% !important;

  height: auto !important;

  max-height: 38px !important;

  object-fit: contain;

}

.como-header-brand:hover .como-header-logo-wrap {

  transform: translateY(-1px) scale(1.015);

}

.como-desktop-nav {

  position: relative;

  display: flex;

  align-items: center;

  gap: 4px;

  padding: 5px;

  background: rgba(3,46,77,.035);

  border: 1px solid rgba(3,46,77,.055);

  border-radius: 16px;

}

.como-nav-item {

  position: relative;

}

.como-nav-link {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  min-height: 42px;

  padding: 0 14px;

  overflow: hidden;

  color: #3c5663;

  border-radius: 11px;

  font: 520 14px/1 var(--cms-site-body-font);

  letter-spacing: -.01em;

  transition:

    color .18s ease,

    background .18s ease,

    transform .18s ease,

    box-shadow .18s ease;

}

.como-nav-link::before {

  position: absolute;

  content: "";

  inset: auto 14px 5px;

  height: 2px;

  opacity: 0;

  transform: scaleX(.35);

  transform-origin: center;

  background: linear-gradient(90deg,#04A0DD,#F28D01);

  border-radius: 999px;

  transition:

    opacity .2s ease,

    transform .22s ease;

}

.como-nav-link:hover,

.como-nav-item:focus-within > .como-nav-link {

  color: #032E4D;

  background: rgba(255,255,255,.78);

  box-shadow:

    0 7px 18px -15px rgba(3,46,77,.7),

    inset 0 0 0 1px rgba(3,46,77,.055);

  transform: translateY(-1px);

}

.como-nav-link:hover::before,

.como-nav-item:focus-within > .como-nav-link::before {

  opacity: 1;

  transform: scaleX(1);

}

.como-nav-label {

  position: relative;

  z-index: 1;

}

.como-nav-chevron {

  position: relative;

  z-index: 1;

  display: inline-flex;

  color: #79909b;

  transition:

    transform .2s ease,

    color .2s ease;

}

.como-nav-item:hover > .como-nav-link .como-nav-chevron,

.como-nav-item:focus-within > .como-nav-link .como-nav-chevron {

  color: #054D7F;

  transform: rotate(180deg);

}

.como-nav-link.is-button {

  min-height: 40px;

  padding: 0 17px;

  color: #fff;

  background:

    linear-gradient(135deg,#054D7F 0%,#036f9d 100%);

  box-shadow:

    0 10px 22px -16px rgba(5,77,127,.85),

    inset 0 1px 0 rgba(255,255,255,.16);

}

.como-nav-link.is-button::before {

  display: none;

}

.como-nav-link.is-button:hover {

  color: #fff;

  background:

    linear-gradient(135deg,#032E4D 0%,#065f84 100%);

  box-shadow:

    0 14px 28px -18px rgba(3,46,77,.9),

    inset 0 1px 0 rgba(255,255,255,.18);

}

.como-nav-dropdown {

  position: absolute;

  top: calc(100% + 10px);

  left: 50%;

  min-width: 248px;

  padding-top: 9px;

  visibility: hidden;

  opacity: 0;

  transform: translate(-50%, 10px) scale(.985);

  transform-origin: top center;

  background: transparent;

  border: 0;

  box-shadow: none;

  transition:

    opacity .18s ease,

    transform .2s ease,

    visibility .18s ease;

}

.como-nav-dropdown::before {

  position: absolute;

  content: "";

  top: 3px;

  left: 50%;

  width: 12px;

  height: 12px;

  transform: translateX(-50%) rotate(45deg);

  background: rgba(241, 246, 248, 0.98);

  border-top: 1px solid rgba(3,46,77,.10);

  border-left: 1px solid rgba(3,46,77,.10);

}

.como-nav-dropdown .como-nav-link:hover,

.como-nav-dropdown .como-nav-item:focus-within > .como-nav-link {

  color: #032E4D;

  background:

    linear-gradient(

      135deg,

      rgba(255, 255, 255, 0.72),

      rgba(255, 255, 255, 0.48)

    );

  box-shadow:

    inset 0 0 0 1px rgba(3, 46, 77, 0.06),

    0 8px 18px -16px rgba(3, 46, 77, 0.55);

}

.como-nav-dropdown-inner {

  position: relative;

  padding: 8px;

  overflow: visible;

  background:

    linear-gradient(

      145deg,

      rgba(241, 246, 248, 0.98),

      rgba(231, 239, 243, 0.97)

    );

  border: 1px solid rgba(3, 46, 77, 0.10);

  border-radius: 16px;

  box-shadow:

    0 28px 70px -28px rgba(3, 46, 77, 0.50),

    0 8px 22px -18px rgba(3, 46, 77, 0.30),

    inset 0 1px 0 rgba(255, 255, 255, 0.72);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

}

.como-nav-item:hover > .como-nav-dropdown,

.como-nav-item:focus-within > .como-nav-dropdown {

  visibility: visible;

  opacity: 1;

  transform: translate(-50%, 0) scale(1);

}

.como-nav-dropdown .como-nav-item {

  width: 100%;

}

.como-nav-dropdown .como-nav-link {

  width: 100%;

  min-height: 42px;

  padding: 0 12px;

  justify-content: space-between;

  border-radius: 10px;

  text-align: left;

}

.como-nav-dropdown .como-nav-link::before {

  inset: 8px auto 8px 4px;

  width: 2px;

  height: auto;

  transform: scaleY(.3);

  background: linear-gradient(180deg,#04A0DD,#F28D01);

}

.como-nav-dropdown .como-nav-link:hover::before {

  transform: scaleY(1);

}

.como-nav-dropdown .como-nav-dropdown {

  top: -9px;

  left: calc(100% + 8px);

  transform: translate(8px,0) scale(.985);

  transform-origin: left top;

}

.como-nav-dropdown .como-nav-item:hover > .como-nav-dropdown,

.como-nav-dropdown .como-nav-item:focus-within > .como-nav-dropdown {

  transform: translate(0,0) scale(1);

}

.como-nav-dropdown .como-nav-dropdown::before {

  display: none;

}

.como-header-actions {

  gap: 10px;

}

.como-language-switcher {

  gap: 2px;

  padding: 4px;

  color: transparent;

  background: rgba(3,46,77,.045);

  border: 1px solid rgba(3,46,77,.065);

  border-radius: 999px;

}

.como-language-switcher > span {

  display: none;

}

.como-language-link {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 36px;

  height: 32px;

  padding: 0 8px;

  color: #80939c;

  border-radius: 999px;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: .04em;

  transition:

    color .18s ease,

    background .18s ease,

    box-shadow .18s ease;

}

.como-language-link:hover {

  color: #032E4D;

}

.como-language-link.is-active {

  color: #032E4D;

  background: #fff;

  box-shadow:

    0 5px 14px -10px rgba(3,46,77,.75),

    inset 0 0 0 1px rgba(3,46,77,.055);

}

.como-header-cta {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  height: 44px;

  padding: 0 17px 0 19px;

  overflow: hidden;

  color: #fff;

  background:

    linear-gradient(135deg,#F28D01 0%,#ff9f1c 100%);

  border: 1px solid rgba(218,128,0,.30);

  border-radius: 13px;

  box-shadow:

    0 12px 24px -18px rgba(242,141,1,.95),

    inset 0 1px 0 rgba(255,255,255,.30);

  font: 560 14px var(--cms-site-body-font);

  white-space: nowrap;

  transition:

    transform .2s ease,

    box-shadow .2s ease,

    background .2s ease;

}

.como-header-cta::before {

  position: absolute;

  content: "";

  inset: 0;

  transform: translateX(-115%);

  background:

    linear-gradient(

      100deg,

      transparent 20%,

      rgba(255,255,255,.28) 48%,

      transparent 75%

    );

  transition: transform .55s ease;

}

.como-header-cta > span {

  position: relative;

  z-index: 1;

}

.como-header-cta:hover {

  color: #fff;

  transform: translateY(-2px);

  background:

    linear-gradient(135deg,#e78300 0%,#f59a14 100%);

  box-shadow:

    0 18px 32px -20px rgba(242,141,1,.95),

    inset 0 1px 0 rgba(255,255,255,.30);

}

.como-header-cta:hover::before {

  transform: translateX(115%);

}

.como-header-cta-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 25px;

  height: 25px;

  color: #F28D01;

  background: rgba(255,255,255,.92);

  border-radius: 8px;

  font-size: 13px;

  transition: transform .2s ease;

}

.como-header-cta:hover .como-header-cta-icon {

  transform: translate(2px,-2px);

}

.como-burger {

  width: 46px;

  height: 46px;

  background:

    linear-gradient(145deg,#fff,#f5fafc);

  border: 1px solid rgba(3,46,77,.10);

  border-radius: 14px;

  box-shadow: none;

  transition:

    transform .18s ease,

    box-shadow .18s ease;

}

.como-burger:hover {

  transform: translateY(-1px);

  box-shadow: none;

}

/* Mobile menu inherits the CMS menu tree but feels like the same system */

.como-mobile-menu {

  min-height: 100dvh;

  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));

  background:

    radial-gradient(circle at 12% 0%, rgba(4,160,221,.14), transparent 32%),

    radial-gradient(circle at 100% 75%, rgba(242,141,1,.10), transparent 35%),

    #032E4D;

}

.como-mobile-menu-head {

  margin-bottom: 26px;

  padding: 8px 8px 14px;

  border-bottom: 1px solid rgba(255,255,255,.10);

}

.como-mobile-brand {

  display: flex;

  align-items: center;

  width: min(230px, calc(100vw - 104px));

  min-width: 0;

  padding: 8px 11px;

  border-radius: 12px;

  box-shadow: none;

}

.como-mobile-brand img {

  display: block;

  width: auto !important;

  max-width: 100% !important;

  height: auto !important;

  max-height: 38px !important;

  object-fit: contain;

}

.como-mobile-close {

  background: rgba(255,255,255,.06);

  border-color: rgba(255,255,255,.16);

  backdrop-filter: blur(12px);

}

.como-mobile-nav {

  gap: 7px;

}

.como-mobile-nav-link,

.como-mobile-nav-group summary {

  min-height: 58px;

  padding: 13px 14px;

  border: 1px solid rgba(255,255,255,.08);

  border-radius: 14px;

  background: rgba(255,255,255,.035);

  font-size: 23px;

  transition:

    background .18s ease,

    border-color .18s ease,

    transform .18s ease;

}

.como-mobile-nav-link:hover,

.como-mobile-nav-group summary:hover {

  background: rgba(255,255,255,.075);

  border-color: rgba(127,199,232,.22);

  transform: translateX(3px);

}

.como-mobile-nav-children {

  margin: 7px 0 2px 17px;

  padding: 3px 0 3px 12px;

  border-left: 1px solid rgba(127,199,232,.28);

}

.como-mobile-nav-children .como-mobile-nav-link {

  min-height: 46px;

  margin: 5px 0;

  padding: 9px 12px;

  border: 0;

  border-radius: 10px;

  background: rgba(255,255,255,.025);

  font-size: 17px;

}

.como-mobile-languages {

  margin-top: 22px;

}

.como-mobile-languages a {

  background: rgba(255,255,255,.04);

}

.como-mobile-cta {

  gap: 9px;

  min-height: 56px;

  margin-top: 22px;

  border-radius: 15px;

  box-shadow: 0 18px 34px -24px rgba(242,141,1,.95);

}

@media (max-width: 1120px) {

  .como-header-2030-shell {

    padding-left: 12px;

  }

  .como-desktop-nav {

    gap: 2px;

  }

  .como-nav-link {

    padding-left: 10px;

    padding-right: 10px;

    font-size: 13px;

  }

  .como-header-cta {

    padding-left: 14px;

    padding-right: 12px;

  }

}

@media (max-width: 960px) {

  .como-site-header {

    padding: 8px 10px 0;

  }

  .como-header-2030-shell,

  .como-site-header.is-scrolled .como-header-2030-shell {

    min-height: 62px;

    padding: 7px 8px 7px 12px;

    border-radius: 17px;

  }

  .como-header-brand {

    flex: 1 1 auto;

    max-width: calc(100% - 62px);

    overflow: hidden;

  }

  .como-header-logo-wrap {

    width: min(220px, 58vw);

    justify-content: flex-start;

  }

  .como-burger {

    flex: 0 0 46px;

  }

}

@media (max-width: 520px) {

  .como-site-header {

    padding-left: 8px;

    padding-right: 8px;

  }

  .como-header-2030-shell {

    gap: 12px;

  }

  .como-header-brand img {

    max-width: 100% !important;

    height: auto !important;

    max-height: 34px !important;

  }

}

@media (prefers-reduced-motion: reduce) {

  .como-header-2030-shell,

  .como-nav-link,

  .como-nav-chevron,

  .como-header-cta,

  .como-header-cta::before,

  .como-header-cta-icon,

  .como-burger {

    transition: none !important;

  }

}

/* Modern navigation separators ------------------------------------ */

.como-desktop-nav > .como-nav-item:not(:last-child)::after {

  content: "";

  position: absolute;

  top: 50%;

  right: -3px;

  width: 1px;

  height: 17px;

  transform: translateY(-50%);

  background:

    linear-gradient(

      180deg,

      transparent 0%,

      rgba(3, 46, 77, 0.16) 24%,

      rgba(4, 160, 221, 0.34) 50%,

      rgba(3, 46, 77, 0.16) 76%,

      transparent 100%

    );

  border-radius: 999px;

  pointer-events: none;

  transition:

    opacity 0.2s ease,

    height 0.2s ease;

}

.como-desktop-nav > .como-nav-item:hover::after {

  opacity: 0.35;

  height: 12px;

}

.como-desktop-nav > .como-nav-item:has(+ .como-nav-item:hover)::after {

  opacity: 0.35;

  height: 12px;

}

/* ========================================================================== */

/* Bannforst v2 desktop header fidelity                                       */

/* ========================================================================== */

@media (min-width: 961px) {

  .como-site-header,

  .como-site-header.is-scrolled {

    padding: 0 !important;

    background: #fff !important;

    border-bottom: 1px solid #d8dedf !important;

    box-shadow: none !important;

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

  }

  .como-header-ambient {

    display: none !important;

  }

  .como-header-2030-shell,

  .como-header-inner,

  .como-site-header.is-scrolled .como-header-2030-shell {

    width: calc(100% - 48px) !important;

    max-width: 1240px !important;

    min-height: 82px !important;

    margin-left: auto !important;

    margin-right: auto !important;

    padding: 0 40px !important;

    box-sizing: border-box !important;

    gap: 22px !important;

    background: #fff !important;

    border: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

  }

  .como-header-brand {

    flex: 0 0 auto !important;

    margin: 0 !important;

    padding: 0 !important;

    border-radius: 0 !important;

  }

  .como-header-logo-wrap {

    justify-content: flex-start !important;

    padding: 0 !important;

  }

  .como-header-logo-wrap img {

    width: auto !important;

    max-width: 220px !important;

    height: auto !important;

    max-height: 30px !important;

  }

  .como-desktop-nav {

    position: static !important;

    display: flex !important;

    align-items: stretch !important;

    gap: 0 !important;

    margin-left: auto !important;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

  }

  .como-desktop-nav > .como-nav-item {

    display: flex !important;

    align-items: stretch !important;

  }

  .como-desktop-nav > .como-nav-item:not(:last-child)::after {

    display: none !important;

  }

  .como-nav-link {

    min-height: 81px !important;

    padding: 0 16px !important;

    gap: 6px !important;

    overflow: visible !important;

    color: #0f1a1c !important;

    background: transparent !important;

    border: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    font: 500 15px/1 var(--cms-site-body-font) !important;

    letter-spacing: 0 !important;

    transform: none !important;

  }

  .como-nav-link::before {

    display: none !important;

  }

  .como-nav-link:hover,

  .como-nav-item:focus-within > .como-nav-link,

  .como-nav-item:hover > .como-nav-link {

    color: #1e5bff !important;

    background: transparent !important;

    box-shadow: none !important;

    transform: none !important;

  }

  .como-nav-chevron {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: auto !important;

    height: auto !important;

    color: currentColor !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    line-height: 1 !important;

    transform: none !important;

    transition: none !important;

  }

  .como-nav-item:hover > .como-nav-link .como-nav-chevron,

  .como-nav-item:focus-within > .como-nav-link .como-nav-chevron {

    color: currentColor !important;

    transform: none !important;

  }

  .como-nav-dropdown {

    top: 100% !important;

    left: -14px !important;

    width: 294px !important;

    min-width: 294px !important;

    padding: 0 !important;

    visibility: hidden;

    opacity: 0;

    transform: translateY(4px) !important;

    background: #fff !important;

    border: 1px solid #d8dedf !important;

    border-radius: 0 !important;

    box-shadow: 0 16px 34px rgba(15, 26, 28, .07) !important;

    transition: opacity .14s ease, transform .14s ease, visibility .14s ease !important;

  }

  .como-nav-dropdown::before {

    display: none !important;

  }

  .como-nav-dropdown-inner {

    padding: 8px !important;

    overflow: visible !important;

    background: #fff !important;

    border: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

  }

  .como-nav-item:hover > .como-nav-dropdown,

  .como-nav-item:focus-within > .como-nav-dropdown {

    visibility: visible !important;

    opacity: 1 !important;

    transform: translateY(0) !important;

  }

  .como-nav-dropdown .como-nav-item {

    display: block !important;

    width: 100% !important;

  }

  .como-nav-dropdown .como-nav-item:not(:last-child) {

    border-bottom: 1px solid #e3e8e9 !important;

  }

  .como-nav-dropdown .como-nav-link {

    width: 100% !important;

    min-height: 40px !important;

    padding: 0 14px !important;

    justify-content: flex-start !important;

    color: #0f1a1c !important;

    background: #fff !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    font-size: 14px !important;

    text-align: left !important;

  }

  .como-nav-dropdown .como-nav-link:hover,

  .como-nav-dropdown .como-nav-item:focus-within > .como-nav-link {

    color: #0f1a1c !important;

    background: #f7f9f9 !important;

    box-shadow: none !important;

  }

  .como-nav-dropdown .como-nav-link::before {

    display: none !important;

  }

  .como-nav-dropdown .como-nav-dropdown {

    top: -1px !important;

    left: calc(100% + 8px) !important;

    transform: translateX(4px) !important;

  }

  .como-nav-dropdown .como-nav-item:hover > .como-nav-dropdown,

  .como-nav-dropdown .como-nav-item:focus-within > .como-nav-dropdown {

    transform: translateX(0) !important;

  }

  /* v2 desktop header intentionally has no language pills. */

  .como-header-actions .como-language-switcher {

    display: none !important;

  }

  .como-header-actions {

    display: flex !important;

    flex: 0 0 auto !important;

    align-items: center !important;

    gap: 0 !important;

  }

  .como-header-cta {

    height: 44px !important;

    padding: 0 20px !important;

    gap: 6px !important;

    color: #fff !important;

    background: #1e5bff !important;

    border: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    font: 600 14px/1 var(--cms-site-body-font) !important;

    transform: none !important;

  }

  .como-header-cta::before {

    display: none !important;

  }

  .como-header-cta:hover {

    color: #fff !important;

    background: #174bd7 !important;

    box-shadow: none !important;

    transform: none !important;

  }

  .como-header-cta-icon {

    width: auto !important;

    height: auto !important;

    color: #fff !important;

    background: transparent !important;

    border-radius: 0 !important;

    font-size: 12px !important;

    line-height: 1 !important;

  }

  .como-header-cta:hover .como-header-cta-icon {

    transform: none !important;

  }

}

@media (min-width: 961px) and (max-width: 1180px) {

  .como-header-2030-shell,

  .como-header-inner,

  .como-site-header.is-scrolled .como-header-2030-shell {

    width: calc(100% - 32px) !important;

    padding-inline: 24px !important;

    gap: 12px !important;

  }

  .como-nav-link {

    padding-inline: 11px !important;

    font-size: 14px !important;

  }

  .como-header-cta {

    padding-inline: 16px !important;

  }

}