/* =====================================================================
   SITE BUTTON COMPONENT: "Switch" (look). Markup comes from site-button.js.
   Scoped by :root.sbx-on .btn.sbx so it wins over the legacy and revamp button styles.
   Sizes: default 52px, .sbx--sm 44px. Looks: pri (purple), inv (white), sec (white + line), out (on dark).
   ===================================================================== */
:root.sbx-on .btn.sbx {
  --h: 52px; --c: 40px; --pi: 6px; --po: 22px; --gp: 12px; --e: cubic-bezier(.65, 0, .25, 1); --d: .6s;
  position: relative; display: inline-flex !important; align-items: center; justify-content: flex-start; gap: 0 !important;
  height: var(--h) !important; min-height: 0 !important; padding: 0 calc(var(--pi) + var(--c) + var(--gp)) 0 var(--po) !important;
  border: 0 !important; border-radius: 999px !important; overflow: hidden; isolation: isolate;
  text-decoration: none; white-space: nowrap; cursor: pointer; transform: none;
  background-image: none !important; -webkit-tap-highlight-color: transparent;
  transition: background-color .3s ease, box-shadow .3s ease, transform .15s ease !important;
  translate: none !important;
}
:root.sbx-on .btn.sbx::before, :root.sbx-on .btn.sbx::after { content: none !important; display: none !important; }
:root.sbx-on .btn.sbx .btn__label {
  display: block; position: relative; z-index: 1; margin: 0 !important; padding: 0 !important;
  font: 700 15px/1 "Geologica", sans-serif !important; letter-spacing: -.005em !important; color: inherit !important;
  background: none !important; transform: none; transition: transform var(--d) var(--e) !important;
}
:root.sbx-on .btn.sbx .sbx__ic {
  position: absolute; top: 50%; z-index: 1; width: var(--c); height: var(--c); margin-top: calc(var(--c) / -2);
  border-radius: 50%; display: grid; place-items: center; transition: transform var(--d) var(--e);
}
:root.sbx-on .btn.sbx .sbx__ic svg { width: 20px; height: 20px; display: block; transition: transform var(--d) var(--e); }
:root.sbx-on .btn.sbx .sbx__ic--r { right: var(--pi); }
:root.sbx-on .btn.sbx .sbx__ic--l { left: var(--pi); transform: translateX(calc(-1 * (var(--c) + var(--pi) + 8px))); }
/* hover / keyboard focus: the disc leaves right, a twin enters left and turns to point right */
:root.sbx-on .btn.sbx:hover .btn__label, :root.sbx-on .btn.sbx:focus-visible .btn__label { transform: translateX(calc(var(--pi) + var(--c) + var(--gp) - var(--po))); }
:root.sbx-on .btn.sbx:hover .sbx__ic--r, :root.sbx-on .btn.sbx:focus-visible .sbx__ic--r { transform: translateX(calc(var(--c) + var(--pi) + 8px)); }
:root.sbx-on .btn.sbx:hover .sbx__ic--l, :root.sbx-on .btn.sbx:focus-visible .sbx__ic--l { transform: none; }
:root.sbx-on .btn.sbx:hover .sbx__ic--l svg, :root.sbx-on .btn.sbx:focus-visible .sbx__ic--l svg { transform: rotate(45deg); transition-delay: .12s; }
:root.sbx-on .btn.sbx:active { transform: scale(.985); }
:root.sbx-on .btn.sbx:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #29ccb2 !important; }

/* small (nav, mega menu, compact places) */
:root.sbx-on .btn.sbx.sbx--sm { --h: 44px; --c: 34px; --pi: 5px; --po: 18px; --gp: 10px; }
:root.sbx-on .btn.sbx.sbx--sm .btn__label { font-size: 14px !important; }
:root.sbx-on .btn.sbx.sbx--sm .sbx__ic svg { width: 17px; height: 17px; }

/* looks */
:root.sbx-on .btn.sbx.sbx--pri { background-color: #4a3dcc !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 24px -8px rgba(74, 61, 204, .6); }
:root.sbx-on .btn.sbx.sbx--pri:hover { background-color: #3d31b8 !important; }
:root.sbx-on .btn.sbx.sbx--pri .sbx__ic { background: #fff; color: #4a3dcc; }
:root.sbx-on .btn.sbx.sbx--inv { background-color: #fff !important; color: #11131f !important; box-shadow: 0 8px 22px -10px rgba(17, 19, 31, .35); }
:root.sbx-on .btn.sbx.sbx--inv:hover { background-color: #f4f3ff !important; }
:root.sbx-on .btn.sbx.sbx--inv .sbx__ic { background: #4a3dcc; color: #fff; }
:root.sbx-on .btn.sbx.sbx--sec { background-color: #fff !important; color: #11131f !important; box-shadow: inset 0 0 0 1px #e4e6ee; }
:root.sbx-on .btn.sbx.sbx--sec:hover { box-shadow: inset 0 0 0 1px #c9c4f3; }
:root.sbx-on .btn.sbx.sbx--sec .sbx__ic { background: #11131f; color: #fff; }
:root.sbx-on .btn.sbx.sbx--out { background-color: transparent !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
:root.sbx-on .btn.sbx.sbx--out:hover { background-color: rgba(255, 255, 255, .1) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); }
:root.sbx-on .btn.sbx.sbx--out .sbx__ic { background: #fff; color: #4a3dcc; }

@media (prefers-reduced-motion: reduce) {
  :root.sbx-on .btn.sbx *, :root.sbx-on .btn.sbx { transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* nav CTA: white over the dark hero, purple once the nav turns white (scrolled, light pages, mega open) */
:root.sbx-on .nav--scrolled .btn.sbx.nav__cta, :root.sbx-on .nav.is-mega-open .btn.sbx.nav__cta, :root.sbx-on .nav:hover .btn.sbx.nav__cta { background-color: #4a3dcc !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 20px -8px rgba(74, 61, 204, .6); }
:root.sbx-on .nav--scrolled .btn.sbx.nav__cta:hover, :root.sbx-on .nav.is-mega-open .btn.sbx.nav__cta:hover, :root.sbx-on .nav:hover .btn.sbx.nav__cta:hover { background-color: #3d31b8 !important; }
:root.sbx-on .nav--scrolled .btn.sbx.nav__cta .sbx__ic, :root.sbx-on .nav.is-mega-open .btn.sbx.nav__cta .sbx__ic, :root.sbx-on .nav:hover .btn.sbx.nav__cta .sbx__ic { background: #fff; color: #4a3dcc; }

/* buttons that scroll to a section on the same page (href="#...") point down, so nobody expects a new page */
:root.sbx-on a.btn.sbx[href^="#"]:not([href="#"]):not([data-contact-open]) .sbx__ic svg,
:root.sbx-on a.btn.sbx[href^="#"]:not([href="#"]):not([data-contact-open]):hover .sbx__ic--l svg,
:root.sbx-on a.btn.sbx[href^="#"]:not([href="#"]):not([data-contact-open]):focus-visible .sbx__ic--l svg { transform: rotate(135deg); }

/* a label can never vanish into its own pill: it always paints in its button's own text colour (page-layer gradient/transparent label rules lose) */
:root.sbx-on .btn.sbx .btn__label { color: inherit !important; -webkit-text-fill-color: currentColor !important; background: none !important; }