/* =============================================================================
   xurrent-global.css  —  Global site CSS extracted from Webflow inline <style>
   Served from the cms-search app:  /cms-search/xurrent-global.css
   Source of truth: cms-search/public/xurrent-global.css (edit here, redeploy)

   Migrated OUT of Webflow Site Settings -> Custom Code (head) and the nav
   component embed, to shrink per-page HTML and enable browser caching.
   The 18 duplicated chevron <style> blocks are collapsed to one copy each.

   NOTE: two tiny render-critical rules remain inline in the Webflow <head>
   on purpose: the responsive `html{font-size}` clamp and `.banner{display:none}`.
   ============================================================================= */


/* ---- Nav chevron (was .nav_menu-chev, x6 duplicated embed blocks) ---- */
  .nav_menu-chev {
  display: block;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* ---- Mega-rail chevron + active states (was .mega_rail-chev, x12 duplicated) ---- */
  .mega_rail-chev {
  width: 20px;
  height: 20px;
  fill: currentColor;
  opacity: 0.6;
  display: block;
  transition: opacity 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Active-tab chevron turns yellow & fully opaque */
.mega_rail-tab.is-active .mega_rail-chev {
  opacity: 1;
  fill: #e0ff25;
}
.mega_rail-tab.is-support.is-active .mega_rail-chev {
  opacity: 1;
  fill: #3A0066;
}


/* ---- Mega Menu 2.1 — open/close states + mobile nav ---- */
/* State: when any mega panel is open */
.nav_component.is-open {
  border-bottom-color: #7a04d4;
}
  
.nav_menu-item[aria-expanded="true"] {
  color: #ffffff;
  border-bottom-color: #e0ff25;
}
  
/* Chevron rotates when its nav item is open */
.nav_menu-item[aria-expanded="true"] .nav_menu-chev {
  transform: rotate(180deg);
}


@media (max-width: 991px) {
    .nav_actions .button {
    display: none;
  }  
  } 



  /* Open state — JS toggles this class on the panel */
.mega_component.is-open {
  display: block;
}

/* Belt-and-suspenders: class wins even when [hidden] is present */
.mega_component[hidden].is-open {
  display: block;
}

/* Mobile: hide mega panels entirely — mobile uses drawer + subview instead */
@media (max-width: 1024px) {
  .mega_component {
    display: none !important;
  }
}




.drawer_component[hidden] {
  display: none;
}

@media (min-width: 1025px) {
  .drawer_component {
    display: none !important;
  }
}


.drawer_logo svg {
  width: 100px;
  height: 22px;
  display: block;
}


.drawer_close svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.drawer_item-chev {
  width: 22px;
  height: 22px;
  fill: currentColor;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.drawer_item[aria-expanded="true"] .drawer_item-chev {
  transform: rotate(180deg);
}
.drawer_sub[hidden] {
  display: none;
}
.drawer_subitem svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
  
body.is-menu-open {
  overflow: hidden;
}


.subview_component[hidden] {
  display: none;
}
/* Hide entirely on desktop */
@media (min-width: 1025px) {
  .subview_component {
    display: none !important;
  }
}

.subview_back svg {
  width: 24px;
  height: 24px;
}
.subview_logo svg {
  width: 100px;
  height: 22px;
  display: block;
}

.subview_content[hidden] {
  display: none;
}

@media (max-width: 1024px) {
  .nav_menu-wrap,
  .nav_actions .button {
    display: none;
  }
  .nav_hamburger {
    display: flex;
  }
  /* Optionally shrink nav height on mobile */
  .nav_container {
    height: 64px;
    padding: 0 24px;
    display: flex;
  	justify-content: space-between;
  }
}


/* ---- Mega Menu 2.1 — shared nav custom code ---- */
/* =========================================================
   Mega Menu 2.1 — Shared Nav Custom Code
   PASTE THIS ENTIRE BLOCK into Webflow Project Settings
        → Custom Code → Inside <head> tag
        (replace whatever is in there from the previous attempt)
   ========================================================= */

/* ---- 1. Nav-height variable ---- */
:root { --nav-height: 110px; }
@media (max-width: 1024px) { :root { --nav-height: 110px; } }

/* ---- 2. Nav stays above drawer/subview ---- */
.nav_component { z-index: 220 !important; }

/* ---- 3. Drawer + subview fill viewport BELOW the nav ----
   !important is used because Webflow's compiled class CSS
   loads in a sheet that wins over inline custom code by
   default cascade. We need to override its `inset: 0px`. */
.drawer_component,
.subview_component {
  position: fixed !important;
  top: var(--nav-height) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  inset: auto !important;            /* reset shorthand last */
  /* re-apply: */
  top: var(--nav-height) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

/* ---- 4. Mobile: keep locale dropdown visible in nav.
   Adjust the selector once if your locale wrapper has a
   different class. ---- */
@media (max-width: 1024px) {
  .nav_actions .nav_locale {
    display: inline-flex !important;
  }
  /* Hide the CTA button only, not the hamburger or locale */
  .nav_actions > .button:not(.nav_hamburger) {
    display: none !important;
  }
}

/* ---- 5. Hamburger icon morph + visibility ----
   The button contains:
     <span class="nav_hamburger-span"> × 3   (legacy CSS bars)
     <div class="w-embed">
       <svg class="icon-bars">…</svg>
       <svg class="icon-close">…</svg>
     </div>
   We hide the legacy spans, then show ONE of the SVGs based
   on body state.  fill: currentColor lets you control the
   color from the button's text color, so it inherits properly
   on the dark nav. */
.nav_hamburger .nav_hamburger-span { display: none !important; }

.nav_hamburger { color: #ffffff !important; }    /* light icon on dark nav */

.nav_hamburger .icon-bars,
.nav_hamburger .icon-close {
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor !important;                  /* override Webflow's svg{fill:black} */
}
.nav_hamburger .icon-bars  path,
.nav_hamburger .icon-close path {
  fill: currentColor !important;
}

.nav_hamburger .icon-close { display: none !important; }
body.is-drawer-open .nav_hamburger .icon-bars  { display: none !important; }
body.is-drawer-open .nav_hamburger .icon-close { display: block !important; }

/* (optional) tiny rotation when toggling */
.nav_hamburger svg { transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1); }
body.is-drawer-open .nav_hamburger svg { transform: rotate(90deg); }

/* ---- 6. Default-hidden state classes (safety net) ---- */
[data-mm-panel]:not(.is-open)   { display: none; }
[data-mm-tabpanel][hidden]      { display: none; }
[data-mm-subcontent][hidden]    { display: none; }

/* ---- 7. Reduced motion respect ---- */
@media (prefers-reduced-motion: reduce) {
  .nav_hamburger svg,
  .drawer_component,
  .subview_component { transition: none !important; }
}

/* ---- 8. Inline embeds inside the hamburger button ----
   The Webflow Embed widget wraps content in <div class="w-embed">.
   Make sure that wrapper doesn't add stray width/height. */
.nav_hamburger .w-embed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  position: relative;
}
.nav_hamburger .w-embed svg { position: absolute; inset: 0; margin: auto; }


/* ---- Global utilities, Cookiebot styling, focus states, spacing, animations ---- */
/* Cookiebot Specific Styling */
#CybotCookiebotDialog *, #CybotCookiebotDialogBodyUnderlay * {
font-size: 12px !important;
}

#CybotCookiebotDialogBodyContent {
padding: 0em .625em !important;
}
/* End Cookiebot Specific Styling */

/* Ensure all elements inherit the color from its parent */
body * {
    color: inherit;
}

a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-slider-arrow-left,
.w-slider-arrow-right,
.w-dropdown-btn,
.w-dropdown-toggle,
 {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
  /*.w-dropdown-link*/
}

/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible,
  input[type="file"]:focus-visible {
   outline: 0.125rem solid #4d65ff;
   outline-offset: 0.125rem;
}

/* Get rid of top margin on first element in any rich text element */
.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
  margin-top: 0 !important;
}

/* Get rid of bottom margin on last element in any rich text element */
.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
	margin-bottom: 0 !important;
}

/* Prevent all click and hover interaction with an element */
.pointer-events-off {
	pointer-events: none;
}

/* Enables all click and hover interaction with an element */
.pointer-events-on {
  pointer-events: auto;
}

/* Create a class of .div-square which maintains a 1:1 dimension of a div */
.div-square::after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

/* Make sure containers never lose their center alignment */
.container-medium,.container-small, .container-large {
	margin-right: auto !important;
  margin-left: auto !important;
}


/* Apply "..." after 3 lines of text */
.text-style-3lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* Apply "..." after 2 lines of text */
.text-style-2lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Adds inline flex display */
.display-inlineflex {
  display: inline-flex;
}

/* These classes are never overwritten */
.hide {
  display: none !important;
}

@media screen and (max-width: 991px) {
    .hide, .hide-tablet {
        display: none !important;
    }
}
  @media screen and (max-width: 767px) {
    .hide-mobile-landscape{
      display: none !important;
    }
}
  @media screen and (max-width: 479px) {
    .hide-mobile{
      display: none !important;
    }
}
 
.margin-0 {
  margin: 0rem !important;
}
  
.padding-0 {
  padding: 0rem !important;
}

.spacing-clean {
padding: 0rem !important;
margin: 0rem !important;
}

.margin-top {
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.padding-top {
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}
  
.margin-right {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.padding-right {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}

.margin-bottom {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}

.padding-bottom {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

.margin-left {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
}
  
.padding-left {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
}
  
.margin-horizontal {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

.padding-horizontal {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}

.margin-vertical {
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}
  
.padding-vertical {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

/* Apply "..." at 100% width */
.truncate-width { 
		width: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
/* Removes native scrollbar */
.no-scrollbar {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none; 
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}



@keyframes slideup {
  from {opacity: 0; transform: translateY(100%);}
  to {opacity: 1; transform: translateY(0%);}
}

@keyframes scaleup {
  from {opacity: 0; transform: scale(0.5);}
  to {opacity: 1; transform: scale(1);}
}

@keyframes loop-spin {
  to {transform: rotate(360deg);}
}

@keyframes loop-move-left {
  to {transform: translateX(-100%);}
}

.button.is-link.is-alternate.is-icon:hover .arrow-wrap {
  position: relative;
  left: 8px;
}

@media screen and (max-width: 890px) and (min-width: 768px) {
  .card-wrapper.is-feature-benefit {
    width: 100%; !important
  }
}



.w-tab-menu {
  -ms-overflow-style: none;
}
.w-tab-menu::-webkit-scrollbar {
  display: none;
}

[lineclamp="3"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

[lineclamp="2"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}



@media screen and (min-width: 769px) {

.electric-button1 {
  /* animate box-shadow over 1 second with an “ease” curve */
  transition: box-shadow 1s ease;
}
  .electric-button1.hover-sim {
    box-shadow: 0 0 30px #fff176;
  }
}

.text-balanced {
text-wrap: balance;
}

.text-pretty {
text-wrap: pretty;
}

[text-wrap="pretty"] {
text-wrap: pretty;
}

[text-wrap="balanced"] {
text-wrap: balance;
}


/* ---- Rich-text table overflow + visibility utility ---- */
.text-rich-text div{
  overflow-x: auto;
  max-width: 90svw;
}
.text-rich-text table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px; /* forces test87 horizontal scroll on narrow screens */
}

.visibility-none{
visibility: hidden;
}


/* ---- Testimonial background + gradient utilities ---- */
.testimonial-bg-grey{
  background:#F9F9FB;
}
.gradient-blue {
  background: linear-gradient(to bottom, #F5F9FF, #CADFFE);
}

.gradient-orange {
  background: linear-gradient(to bottom, #FFFAEC, #FFE3C9);
}

.gradient-purple-mint {
  background: linear-gradient(to bottom, #FDF8FF, #DBFFEF);
}

.gradient-gray {
  background: linear-gradient(to bottom, #F9F9F9, #E9E9E9);
}
.gradient-pink-red {
  background: linear-gradient(to bottom, #FAFAFA, #FFD7D9);
}

.gradient-pink-blue {
  background: linear-gradient(to bottom, #FFF5F6, #E1E1FF);
}

.gradient-mint-blue {
  background: linear-gradient(to bottom, #EFFFFA, #D1E4FF);
}
.gradient-mint-light {
  background: linear-gradient(to bottom, #F4FFFD, #D5FFF8);
}
.gradient-cyan-pink {
  background: linear-gradient(to bottom, #F5FEFF, #FFD7D7);
}
.gradient-cyan-blue {
  background: linear-gradient(to bottom, #F5FEFF, #D7F5FF);
}
.gradient-gray-orange {
  background: linear-gradient(to bottom, #F9F9F9, #FFE1C9);
}
.gradient-lavender {
  background: linear-gradient(to bottom, #FCFAFF, #F2EAFF);
}
.gradient-blue-orange-soft {
  background: linear-gradient(to bottom, #F6FAFF, #FFEBD6);
}

.nhome_eyebrow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px; /* this becomes your border thickness */
  background: linear-gradient(200deg, #6600B2 0%, #DFB6FE 49%, #6600B2 100%);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
}

.nhome-modes_tag::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px; /* this becomes your border thickness */
  background: linear-gradient(90deg, #6600B2 0%, #DFB6FE 49%, #6600B2 100%);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
  opacity: 60%;
}
