/* BRIX Templates header partial.
   Owns the native replacement for Webflow's header dropdowns and mobile nav. */

html.is-mobile-menu-open,
html.is-mobile-menu-open body {
  overflow: hidden;
}

.header-position-absolute {
  z-index: 1000;
}

.header {
  z-index: 1000;
}

.header__content {
  position: relative;
  z-index: 2;
}

.header .header__dropdown-wrapper.is-open > .header__dropdown-toggle,
.header .header__dropdown-wrapper.w--open > .header__dropdown-toggle {
  background-color: var(--new--secondary--color-2);
  color: var(--new--primary-color);
  border-color: #e2dfff;
  box-shadow: 0 2px 4px #4a3aff1c;
}

.header .header__nav-link,
.header .header__nav-link:hover,
.header .header__nav-link:focus,
.header .header__dropdown-toggle,
.header .header__dropdown-toggle:hover,
.header .header__dropdown-toggle:focus,
.header .dropdown-link-wrapper,
.header .dropdown-link-wrapper:hover,
.header .mega-menu__link-wrap,
.header .mega-menu__link-wrap:hover {
  text-decoration: none;
}

.header .dropdown-arrow {
  display: inline-block;
  transition: transform 180ms ease;
}

.header .header-dropdown-chevron {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-left: -1px;
}

/* Refined thin chevron (was the exported stroke-width:2.2). */
.header .header-dropdown-chevron path {
  stroke-width: 1.6;
}

.header .header__dropdown-wrapper.is-open .dropdown-arrow,
.header .header__dropdown-wrapper.w--open .dropdown-arrow {
  transform: rotate(180deg);
}

.header .dropdown-column-wrapper.header-dropdown {
  display: block !important;
  top: calc(100% + 16px);
  left: 50%;
  right: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: blur(8px);
  transform: translate3d(-50%, 10px, 0);
  transition:
    opacity 190ms ease,
    transform 190ms ease,
    filter 190ms ease,
    visibility 190ms ease;
  will-change: opacity, transform, filter;
}

.header .header__dropdown-wrapper.is-closing > .dropdown-column-wrapper.header-dropdown {
  display: block !important;
  visibility: visible !important;
  pointer-events: none !important;
}

.header .dropdown-column-wrapper.header-dropdown.resources {
  transform: translate3d(-56%, 10px, 0);
}

.header .header__dropdown-wrapper.is-open > .dropdown-column-wrapper.header-dropdown,
.header .header__dropdown-wrapper.w--open > .dropdown-column-wrapper.header-dropdown,
.header .dropdown-column-wrapper.header-dropdown.w--open {
  display: block !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  filter: blur(0);
  transform: translate3d(-50%, 0, 0);
}

.header .header__dropdown-wrapper.is-open > .dropdown-column-wrapper.header-dropdown.resources,
.header .header__dropdown-wrapper.w--open > .dropdown-column-wrapper.header-dropdown.resources,
.header .dropdown-column-wrapper.header-dropdown.resources.w--open {
  transform: translate3d(-56%, 0, 0);
}

.header .header__dropdown-wrapper:not(.is-open):not(.w--open) > .dropdown-column-wrapper.header-dropdown,
.header .header__dropdown-wrapper:not(.is-open):not(.w--open) > .dropdown-column-wrapper.header-dropdown * {
  pointer-events: none !important;
}

.header .flex-horizontal.dropdown-link-wrapper {
  transition: color 180ms ease, transform 180ms ease, background-color 180ms ease;
  align-items: center;
}

.header .flex-horizontal.dropdown-link-wrapper:hover {
  color: var(--new--primary-color);
}

.header .dropdown-link-wrapper > div:not(.relative) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

.header .text-100.bold.color-neutral-800.dropdown-text {
  margin: 0;
  color: #0d0a2c;
  line-height: 1.2;
}

.header .text-100.mg-bottom-0.dropdown-text {
  margin: 0 !important;
  color: var(--new--neutral--color-600);
  line-height: 1.35;
}

.header .dropdown-column-wrapper.templates-dropdown .dropdown_grid {
  row-gap: 22px;
}

.header .dropdown-link-wrapper.templates-dropdown > .relative {
  flex: 0 0 52px;
  width: 52px;
  max-width: 52px;
  height: 52px;
  max-height: 52px;
  margin-right: 12px;
  padding: 0;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.header .dropdown-link-wrapper.templates-dropdown > .relative .mega-menu__link-icon-wraper {
  width: 52px;
  max-width: 52px;
  height: 52px;
  max-height: 52px;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
}

.header .dropdown-link-wrapper.templates-dropdown > .relative .dropdown-menu-icon-wrapper {
  width: 52px;
  max-width: 52px;
  height: 52px;
  max-height: 52px;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
}

.header .dropdown-link-wrapper.templates-dropdown > .relative img {
  flex: 0 0 52px;
  width: 52px;
  max-width: none;
  height: 52px;
  max-height: none;
  object-fit: cover;
  display: block;
}

.header .dropdown-link-wrapper.templates-dropdown > .relative img.dropdown-menu-icon.templates-icons.exclusive {
  box-shadow: none;
}

.header .dropdown-link-wrapper.templates-dropdown > .relative .dropdown-blur-bg {
  display: none !important;
}

/* Shared BRIX button hover used by the header CTA and matching homepage buttons. */
.btn .btn__dot,
.btn .btn__text,
.btn .btn__icon {
  transition: transform 300ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

.btn .btn__dot {
  transform: translate3d(0, 0, 0);
}

.btn:hover .btn__dot,
.btn:focus-visible .btn__dot {
  transform: translate3d(13px, 0, 0);
}

.btn:hover .btn__text,
.btn:hover .btn__icon,
.btn:focus-visible .btn__text,
.btn:focus-visible .btn__icon {
  transform: translate3d(16px, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .btn .btn__dot,
  .btn .btn__text,
  .btn .btn__icon,
  .header .dropdown-arrow,
  .header .dropdown-column-wrapper.header-dropdown,
  .header .flex-horizontal.dropdown-link-wrapper {
    transition-duration: 1ms !important;
  }
}

@media screen and (min-width: 992px) {
  .header .header__nav-link,
  .header .header__dropdown-toggle {
    /* Brand dark navy (matches the dropdown titles / mobile nav) instead of a
       hardcoded off-brand #222 grey. Open toggles still turn primary purple. */
    color: var(--new--neutral--color-800);
  }

  .header .flex-horizontal.dropdown-link-wrapper {
    transform: translate3d(0, 0, 0);
  }

  .header .flex-horizontal.dropdown-link-wrapper:hover {
    transform: translate3d(6px, 0, 0);
  }

  .header .header__nav-wraper {
    display: block !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .header .header-nav-menu-list {
    display: flex !important;
    align-items: center;
  }

  .header .header__dropdown-wrapper {
    width: auto;
    overflow: visible;
  }

  .header .header__dropdown-wrapper.is-open::after,
  .header .header__dropdown-wrapper.w--open::after,
  .header .header__dropdown-wrapper.is-closing::after {
    /* Keeps hover alive while moving through the visual gap into the panel. */
    content: "";
    position: absolute;
    left: -32px;
    right: -32px;
    top: 100%;
    height: 16px;
    z-index: 900;
  }

  .header .hbm__wraper {
    display: none !important;
  }
}

@media screen and (max-width: 991px) {
  .header.w-nav[data-collapse="medium"] .w-nav-menu {
    display: block;
  }

  .header.w-nav[data-collapse="medium"] .w-nav-menu.w--open {
    display: block;
  }

  .header.w-nav[data-collapse="medium"] .w-nav-button {
    display: flex;
  }

  .header {
    z-index: 10000;
  }

  .header .header__content {
    min-height: 60px;
    position: relative;
    z-index: 10003;
  }

  .header .header__logo-link {
    position: relative;
    z-index: 10005;
  }

  .header .hbm__wraper {
    z-index: 10006;
    justify-content: center;
    align-items: center;
    min-width: 42px;
    max-width: 42px;
    min-height: 42px;
    max-height: 42px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--new--neutral--color-800);
    box-shadow: none;
    transition:
      transform 180ms ease,
      color 180ms ease;
  }

  .header .hbm__wraper.w--open {
    background-color: transparent;
    color: var(--new--neutral--color-800);
    box-shadow: none;
  }

  .header .mobile-button-dot-wrapper {
    display: block !important;
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    position: relative;
    transition: transform 260ms cubic-bezier(.16, 1, .3, 1);
  }

  .header .hamburger-menu-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: currentColor;
    position: absolute;
    transition:
      transform 240ms cubic-bezier(.16, 1, .3, 1),
      opacity 180ms ease;
  }

  .header .hamburger-menu-dot.top-left {
    top: 3px;
    left: 3px;
  }

  .header .hamburger-menu-dot.top-right {
    top: 3px;
    right: 3px;
  }

  .header .hamburger-menu-dot.bottom-right {
    right: 3px;
    bottom: 3px;
  }

  .header .hamburger-menu-dot.bottom-left {
    bottom: 3px;
    left: 3px;
  }

  .header .hbm__wraper.w--open .mobile-button-dot-wrapper {
    transform: rotate(45deg);
  }

  .header .hbm__wraper.w--open .hamburger-menu-dot.top-left,
  .header .hbm__wraper.w--open .hamburger-menu-dot.top-right,
  .header .hbm__wraper.w--open .hamburger-menu-dot.bottom-right,
  .header .hbm__wraper.w--open .hamburger-menu-dot.bottom-left {
    transform: scale(.92);
  }

  .header .header__nav-wraper {
    display: block !important;
    position: fixed !important;
    inset: 0;
    z-index: 10001;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: clamp(92px, 10vh, 110px) 24px 28px;
    border: 0;
    border-radius: 0;
    background-color: var(--new--neutral--color-100);
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    filter: blur(8px);
    transform: translate3d(0, 16px, 0) scale(.985);
    transform-origin: top center;
    transition:
      opacity 260ms cubic-bezier(.16, 1, .3, 1),
      transform 320ms cubic-bezier(.16, 1, .3, 1),
      filter 260ms cubic-bezier(.16, 1, .3, 1),
      visibility 260ms ease;
  }

  .header.is-menu-open .header__nav-wraper {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
    animation: brix-templates-mobile-drawer-in 320ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .header.is-menu-open.is-menu-exiting .header__nav-wraper {
    visibility: visible;
    pointer-events: none;
    animation: brix-templates-mobile-drawer-out 520ms cubic-bezier(.4, 0, .2, 1) both;
  }

  @keyframes brix-templates-mobile-drawer-in {
    from {
      opacity: 0;
      filter: blur(8px);
      transform: translate3d(0, 16px, 0) scale(.985);
    }
    to {
      opacity: 1;
      filter: blur(0);
      transform: translate3d(0, 0, 0) scale(1);
    }
  }

  @keyframes brix-templates-mobile-drawer-out {
    from {
      opacity: 1;
      filter: blur(0);
      transform: translate3d(0, 0, 0) scale(1);
    }
    to {
      opacity: 0;
      filter: blur(8px);
      transform: translate3d(0, 12px, 0) scale(.985);
    }
  }

  .header .header-nav-menu-list {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    max-width: min(100%, 760px);
    min-height: calc(100dvh - clamp(92px, 10vh, 110px) - 28px);
    margin-left: auto;
    margin-right: auto;
  }

  .header .header__nav-item-wrapper {
    width: 100%;
  }

  .header.is-menu-open .header__nav-item-wrapper {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    animation: brix-templates-mobile-menu-item-in 360ms cubic-bezier(.16, 1, .3, 1) forwards;
  }

  .header.is-menu-open .header__nav-item-wrapper:nth-child(1) { animation-delay: 45ms; }
  .header.is-menu-open .header__nav-item-wrapper:nth-child(2) { animation-delay: 70ms; }
  .header.is-menu-open .header__nav-item-wrapper:nth-child(3) { animation-delay: 95ms; }
  .header.is-menu-open .header__nav-item-wrapper:nth-child(4) { animation-delay: 120ms; }
  .header.is-menu-open .header__nav-item-wrapper:nth-child(5) { animation-delay: 145ms; }
  .header.is-menu-open .header__nav-item-wrapper:nth-child(6) { animation-delay: 170ms; }

  @keyframes brix-templates-mobile-menu-item-in {
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  .header.is-menu-open .header__nav-link,
  .header.is-menu-open .header__dropdown-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    min-height: 60px;
    border-width: 0 0 1px;
    border-bottom: 1px solid #e9edf6;
    border-radius: 0;
    padding: 18px 0;
    background-color: transparent;
    box-shadow: none;
    color: var(--new--neutral--color-800);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    text-decoration: none;
  }

  .header.is-menu-open .header__dropdown-toggle::after {
    content: "+";
    color: var(--new--neutral--color-800);
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 300ms ease, color 220ms ease;
  }

  .header.is-menu-open .header__dropdown-wrapper.is-open > .header__dropdown-toggle::after,
  .header.is-menu-open .header__dropdown-wrapper.w--open > .header__dropdown-toggle::after {
    color: var(--new--primary-color);
    transform: rotate(45deg);
  }

  .header.is-menu-open .header__dropdown-wrapper.is-open > .header__dropdown-toggle,
  .header.is-menu-open .header__dropdown-wrapper.w--open > .header__dropdown-toggle {
    background-color: transparent;
    color: var(--new--neutral--color-800);
    border-color: #e9edf6;
    box-shadow: none;
  }

  .header.is-menu-open .dropdown-arrow {
    display: none;
  }

  .header .header__dropdown-wrapper {
    width: 100%;
    display: block;
  }

  .header .dropdown-column-wrapper.header-dropdown,
  .header .dropdown-column-wrapper.header-dropdown.resources {
    position: static !important;
    left: auto;
    top: auto;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: blur(8px);
    transform: translate3d(0, -8px, 0);
    max-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #e9edf6;
    transition:
      max-height 330ms ease,
      opacity 280ms ease,
      transform 280ms ease,
      filter 280ms ease,
      visibility 280ms ease,
      padding 280ms ease;
  }

  .header.is-menu-open .header__dropdown-wrapper.is-open > .dropdown-column-wrapper.header-dropdown,
  .header.is-menu-open .header__dropdown-wrapper.w--open > .dropdown-column-wrapper.header-dropdown,
  .header.is-menu-open .dropdown-column-wrapper.header-dropdown.w--open {
    margin-top: 20px;
  }

  .header.is-menu-open .dropdown-column-wrapper.header-dropdown.resources,
  .header.is-menu-open .dropdown-column-wrapper.header-dropdown.resources.w--open,
  .header.is-menu-open .header__dropdown-wrapper.is-open > .dropdown-column-wrapper.header-dropdown.resources,
  .header.is-menu-open .header__dropdown-wrapper.w--open > .dropdown-column-wrapper.header-dropdown.resources {
    left: auto !important;
    right: auto !important;
    transform: translate3d(0, 0, 0);
  }

  .header.is-menu-open .header__dropdown-wrapper:not(.is-open):not(.w--open) > .dropdown-column-wrapper.header-dropdown.resources {
    transform: translate3d(0, -8px, 0);
  }

  .header.is-menu-open .header__dropdown-wrapper:not(.is-open):not(.w--open):not(.is-closing) > .dropdown-column-wrapper.header-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .header .header__dropdown-wrapper.is-open > .dropdown-column-wrapper.header-dropdown,
  .header .header__dropdown-wrapper.w--open > .dropdown-column-wrapper.header-dropdown,
  .header .dropdown-column-wrapper.header-dropdown.w--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 1800px;
    filter: blur(0);
    transform: none;
  }

  .header .dropdown-pd.header-pd,
  .header .dropdown-pd.header-pd.templates,
  .header .dropdown-pd.header-pd.resourecs {
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
  }

  .header .dropdown_grid,
  .header .grid-2-column--dropdown.gap-column-24px {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 18px;
    column-gap: 0;
    width: 100%;
  }

  .header .flex-horizontal.dropdown-link-wrapper {
    align-items: center;
    min-height: 54px;
    gap: 12px;
    padding: 0;
    transform: none !important;
    text-decoration: none;
  }

  .header .dropdown-menu-icon,
  .header .dropdown-menu-icon.templates-icons {
    flex: 0 0 56px;
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    margin-right: 0;
  }

  .header .dropdown-link-wrapper.templates-dropdown > .relative {
    flex-basis: 56px;
    width: 56px;
    max-width: 56px;
    height: 56px;
    max-height: 56px;
    margin-right: 0;
  }

  .header .dropdown-link-wrapper.templates-dropdown > .relative .mega-menu__link-icon-wraper {
    width: 56px;
    max-width: 56px;
    height: 56px;
    max-height: 56px;
  }

  .header .dropdown-link-wrapper.templates-dropdown > .relative .dropdown-menu-icon-wrapper {
    width: 56px;
    max-width: 56px;
    height: 56px;
    max-height: 56px;
    padding: 0;
    border-radius: 8px;
  }

  .header .dropdown-link-wrapper.templates-dropdown > .relative img {
    flex-basis: 56px;
    width: 56px;
    max-width: 56px;
    height: 56px;
  }

  .header .dropdown-text {
    text-decoration: none;
  }

  .header.is-menu-open .dropdown-menu-item-arrow {
    display: none;
  }

  .header .text-100.bold.color-neutral-800.dropdown-text,
  .header .mega-menu__link-title {
    font-size: 18px;
    line-height: 1.15;
  }

  .header .text-100.mg-bottom-0.dropdown-text {
    font-size: 15px;
    line-height: 1.28;
  }

  .header .header__mega-menu {
    display: none !important;
  }

  .header .hidden_mobile {
    display: none !important;
  }
}

/* =============================================================
   Desktop nav hover — "Outline + rise" (approved 2026-06-04).
   Replaces the legacy lilac pill-fill with a white chip that
   fades + de-blurs in on a pseudo-element, a 1px light-grey ring,
   a single-pixel lift and a muted hover colour for the label and
   chevron. Scoped to >=992px so the mobile drawer stays identical.
   ============================================================= */
@media screen and (min-width: 992px) {
  .header .header__nav-link,
  .header .header__dropdown-toggle {
    position: relative;
    border: 0;
    background-color: transparent;
    box-shadow: none;
    transition:
      color .36s cubic-bezier(.16, 1, .3, 1),
      transform .42s cubic-bezier(.34, 1.5, .58, 1);
  }

  /* approved padding (tuned independently per group) */
  .header .header__dropdown-toggle {
    padding: 5px 8px 5px 15px;
  }

  .header .header__nav-link {
    padding: 6px 14px 6px 15px;
  }

  /* the white chip lives on ::before so it can fade + de-blur in
     instead of snapping a solid fill on instantly */
  .header .header__nav-link::before,
  .header .header__dropdown-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 999px;
    pointer-events: none;
    background: #ffffff;
    box-shadow:
      0 0 0 1px #e6e8ef,
      0 1px 2px rgba(33, 31, 84, .04),
      0 5px 12px -8px rgba(33, 31, 84, .14);
    opacity: 0;
    filter: blur(6px);
    transform: scale(.96);
    transition:
      opacity .36s cubic-bezier(.16, 1, .3, 1),
      filter .36s cubic-bezier(.16, 1, .3, 1),
      transform .42s cubic-bezier(.34, 1.5, .58, 1);
  }

  /* neutralise the legacy lilac open-state fill from above */
  .header .header__dropdown-wrapper.is-open > .header__dropdown-toggle,
  .header .header__dropdown-wrapper.w--open > .header__dropdown-toggle {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  /* hover/open: muted colour + single-pixel lift.
     !important beats the inline `transform:none` the reveal runtime
     writes onto About, whose data-brix-reveal sits on the <a> itself
     (the dropdowns carry it on the wrapper, so their toggles are free). */
  .header .header__nav-link:hover,
  .header .header__nav-link:focus-visible,
  .header .header__dropdown-toggle:hover,
  .header .header__dropdown-toggle:focus-visible,
  .header .header__dropdown-wrapper.is-open > .header__dropdown-toggle,
  .header .header__dropdown-wrapper.w--open > .header__dropdown-toggle {
    color: #504f6d;
    transform: translateY(-1px) !important;
  }

  /* matching chevron colour on hover/open */
  .header .header__dropdown-toggle:hover .header-dropdown-chevron path,
  .header .header__dropdown-toggle:focus-visible .header-dropdown-chevron path,
  .header .header__dropdown-wrapper.is-open .header-dropdown-chevron path,
  .header .header__dropdown-wrapper.w--open .header-dropdown-chevron path {
    stroke: #504f6d;
  }

  /* reveal the chip with fade + blur + settle */
  .header .header__nav-link:hover::before,
  .header .header__nav-link:focus-visible::before,
  .header .header__dropdown-toggle:hover::before,
  .header .header__dropdown-toggle:focus-visible::before,
  .header .header__dropdown-wrapper.is-open > .header__dropdown-toggle::before,
  .header .header__dropdown-wrapper.w--open > .header__dropdown-toggle::before {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .header .header__nav-link::before,
  .header .header__dropdown-toggle::before {
    transition-duration: 1ms !important;
  }
}