/* ===== Scroll classes: things that react to where they are on the screen as the page scrolls =====
   Give any element one of these classes (in WPBakery: the row's, column's or element's "Extra class name"). They work out where the element
   is from its middle point, measured against the height of the screen. They need glass-ui.js; without it the element simply shows as normal.
     .top-scroll-view       gets the class .ma-in-view while its middle is in the top 25% of the screen
     .middle-scroll-view    gets .ma-in-view while its middle is in the middle 50% of the screen
     .bottom-scroll-view    gets .ma-in-view while its middle is in the bottom 25% of the screen
                            (these three only mark the element; style it as you like, e.g. .middle-scroll-view.ma-in-view { color: #fff; })
     .scroll-fade-in-out    fades in as its middle rises through the bottom 20% of the screen and out as it rises through the top 20%,
                            following the scroll exactly (and the other way when scrolling back up)
     .scroll-fly-in-right   flies in from the right, turning in 3-D to face you, once its middle is past the bottom 15% of the screen, and flies
                            back out to the right when its middle reaches the top 15% (and in again when you scroll back to it)
     .scroll-fly-in-left    the same, from the left
   The fly-ins combine with the glass boxes, circles and buttons on the same element (their hover tilt still works). If an element has both a
   fly-in and .scroll-fade-in-out, the fly-in wins. With "reduce motion" switched on in the visitor's settings, the fly-ins only fade. */

/* ---- settings you can change (here for every element, or on one element to change just that one) ---- */
:root {
  --scroll-fly-distance: 18vw;                       /* how far to the side a fly-in starts */
  --scroll-fly-tilt: 24deg;                          /* how far it is turned away as it starts (the 3-D tilt) */
  --scroll-fly-depth: 120px;                         /* how far back it starts, away from you */
  --scroll-fly-time: 1.1s;                           /* how long the fly in (or out) takes */
  --scroll-fly-ease: cubic-bezier(.65, 0, .35, 1);   /* smooth ease in and out */
}
.scroll-fade-in-out:not(.scroll-fly-in-right):not(.scroll-fly-in-left) { opacity: var(--scroll-fade, 1); }
/* v2.6.3: kept on a layer of its own all the time, so it isn't moved onto one the moment its fade starts (which can show as a one-frame
   blink, above all under the header's blur, where the fade at the top of the screen begins) */
/* v2.8: ...but only while it is near the screen (the script marks it ma-near a third of a screen before it shows), so a long page doesn't hold a layer
   for every faded block at once */
.scroll-fade-in-out.ma-near:not(.scroll-fly-in-right):not(.scroll-fly-in-left) { will-change: opacity; }
/* keeps the fly-ins from making the page scroll sideways while they are off to one side */
html:has(.scroll-fly-in-right, .scroll-fly-in-left) { overflow-x: clip; }

/* ===== Glass UI: glass boxes, circles and buttons, in dark and light, made to sit on Master Animation's scenes =====
   Give an element one of these classes (in WPBakery: the element's or column's "Extra class name"):
     .box-style-dark      .box-style-light       content boxes, 100% wide (use WPBakery columns to make rows)
     .box-equal-height                           on a wrapper (a row, column or any element): every box and square inside it is made as tall as
                                                 the tallest of them on every screen, wherever it sits (boxes side by side in one row already match)
     .box-equal-height-desktop                   the same, but only on screens 999px wide and up; on smaller screens each keeps its own height
     .square-style-dark   .square-style-light    the same boxes, square on screens 999px wide and up (they grow taller only if the content needs it);
                                                 on narrower screens they are regular boxes
     .circle-style-dark   .circle-style-light    round versions with the content centred
     .pill-vertical-style-dark    .pill-vertical-style-light      pill-shaped boxes standing upright (5:8), content centred
     .pill-horizontal-style-dark  .pill-horizontal-style-light    pill-shaped boxes lying on their side (5:2), content centred
                                                 (both grow if the content needs it; faint streams of light flow round them, like air round a wing)
     .button-style-dark   .button-style-light    call-to-action buttons: on a link or button, or on a WPBakery Button element
   On a WPBakery column, a box or circle is drawn inside the column's gutters, so neighbouring columns keep their spacing.
   The moving parts come from glass-ui.js; without it you still get the glass styling.
   Built to stay light on phones: the glass is drawn once and never redrawn while the page animates (there is no live blur of the scene behind,
   which a browser has to redo every frame over a moving scene), and everything that moves is a ready-made layer that the graphics chip turns,
   slides or fades on its own, so nothing is redrawn and the page's main thread has nothing to do. */

/* ---- settings you can change (here for every component, or on one element to change just that one) ---- */
:root {
  --gx-radius: 8px;                        /* box corner rounding */
  --gx-pad: clamp(22px, 2.1vw, 34px);      /* space inside a box */
  --gx-alpha: 1;                           /* how solid the glass is, tint and colours together: lower to see more of the scene behind, raise to see less (.4 to 2) */
  --gx-square-align: flex-start;           /* where the content sits in a square: flex-start (top), center or flex-end (bottom), or space-between */
  --gx-circle-max: 440px;                  /* largest a circle grows (it is centred in its column) */
  --gx-circle-pad: 15%;                    /* space inside a circle */
  --gx-btn-pad: .95em 1.85em;              /* space inside a button */
  --gx-pill-v-max: 270px;                  /* widest an upright pill grows (it is centred in its column) */
  --gx-pill-h-max: 560px;                  /* widest a lying pill grows (it is centred in its column) */
  --gx-stack-gap: 24px;                    /* space between boxes when they stack (on phones and tablets, or one after another in a column) */
  --gx-flow: .2;                           /* how bright the streams of light round a pill are (0 = none) */
}

/* ============================== boxes and circles ============================== */
:is(.box-style-dark:not(.wpb_column):not(.vc_column_container), .box-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-dark:not(.wpb_column):not(.vc_column_container), .square-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-dark:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-dark:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-dark:not(.wpb_column):not(.vc_column_container), .circle-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .box-style-light:not(.wpb_column):not(.vc_column_container), .box-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-light:not(.wpb_column):not(.vc_column_container), .square-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-light:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-light:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-light:not(.wpb_column):not(.vc_column_container), .circle-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  isolation: isolate;
  transform-origin: 50% 50%;
  background: var(--gx-glass);
  box-shadow: var(--gx-glass-sh);
}
:is(.box-style-dark:not(.wpb_column):not(.vc_column_container), .box-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-dark:not(.wpb_column):not(.vc_column_container), .square-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-dark:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-dark:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .box-style-light:not(.wpb_column):not(.vc_column_container), .box-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-light:not(.wpb_column):not(.vc_column_container), .square-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-light:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-light:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) { padding: var(--gx-pad); border-radius: var(--gx-radius); }
/* squares: on a desktop-width screen the box is as tall as it is wide (taller only if its content needs it) */
@media (min-width: 999px) {
  :is(.square-style-dark:not(.wpb_column):not(.vc_column_container), .square-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-light:not(.wpb_column):not(.vc_column_container), .square-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) { aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: var(--gx-square-align, flex-start); }
}
/* stacked boxes keep apart: WPBakery columns holding a glass component get space below them when the columns stack (up to 999px wide), and
   components placed one after another in the same column get space between them */
@media (max-width: 999px) {
  .vc_row > :is(.wpb_column, .vc_column_container):not(:last-child):has(.gx-on) { margin-bottom: var(--gx-stack-gap, 24px); }
}
.wpb_wrapper > .gx-on + .gx-on, .wpb_wrapper > .gx-on + :is(.ovio-btn-wrap) { margin-top: var(--gx-stack-gap, 24px); }
/* pills: a box with fully rounded ends and its content centred; upright 5:8 or lying 5:2 (taller only if the content needs it) */
:is(.pill-vertical-style-dark:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-light:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-dark:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-light:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) {
  border-radius: 9999px;
  margin-left: auto; margin-right: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
:is(.pill-vertical-style-dark:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-light:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) { aspect-ratio: 5 / 8; max-width: var(--gx-pill-v-max); padding: 20% 14%; }
:is(.pill-horizontal-style-dark:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-light:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) { aspect-ratio: 5 / 2; max-width: var(--gx-pill-h-max); padding: 5% 13%; }
:is(.circle-style-dark:not(.wpb_column):not(.vc_column_container), .circle-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-light:not(.wpb_column):not(.vc_column_container), .circle-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  min-height: 0;                           /* stays a circle: keep its content short */
  max-width: var(--gx-circle-max);
  margin-left: auto; margin-right: auto;
  padding: var(--gx-circle-pad);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}

/* dark glass: clear and lightly tinted at the top, deeper at the foot, darkening the scene behind it a little (bright scenes most),
   with its own colours drifting inside */
:is(.box-style-dark:not(.wpb_column):not(.vc_column_container), .box-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-dark:not(.wpb_column):not(.vc_column_container), .square-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-dark:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-dark:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-dark:not(.wpb_column):not(.vc_column_container), .circle-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) {
  --gx-c1: 150, 200, 255; --gx-t1: 22, 54, 92; --gx-t2: 70, 28, 96; --gx-t3: 96, 34, 70; --gx-t4: 18, 78, 80;
  --gx-g0: 150, 200, 255; --gx-g1: 160, 190, 255; --gx-g2: 255, 190, 150; --gx-g3: 200, 170, 255; --gx-h0: 235, 245, 255; --gx-h2: 255, 240, 230; --gx-sh: 230, 240, 255;
  color: #fff;
  --gx-glass:
    linear-gradient(155deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .014) 40%, rgba(255, 255, 255, 0) 64%),
    linear-gradient(var(--gx-angle, 160deg),
      rgb(12 14 34 / calc(.22 * var(--gx-alpha))) 0%,
      rgb(8 9 24 / calc(.29 * var(--gx-alpha))) 55%,
      rgb(4 5 14 / calc(.37 * var(--gx-alpha))) 100%);
  --gx-glass-sh:
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 14px 34px -16px rgba(0, 0, 0, .55);
}
/* light glass: white, lifting the scene behind so dark text reads on any scene, with pastel colours drifting inside */
:is(.box-style-light:not(.wpb_column):not(.vc_column_container), .box-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-light:not(.wpb_column):not(.vc_column_container), .square-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-light:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-light:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-light:not(.wpb_column):not(.vc_column_container), .circle-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) {
  --gx-c1: 70, 110, 230; --gx-t1: 196, 222, 255; --gx-t2: 236, 206, 255; --gx-t3: 255, 214, 222; --gx-t4: 200, 246, 234;
  --gx-g0: 60, 100, 230; --gx-g1: 90, 80, 220; --gx-g2: 210, 70, 150; --gx-g3: 40, 150, 200; --gx-h0: 80, 120, 240; --gx-h2: 225, 95, 165; --gx-sh: 150, 150, 245;
  color: #0e1222;
  --gx-glass:
    linear-gradient(155deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .12) 42%, rgba(255, 255, 255, .04) 70%),
    linear-gradient(var(--gx-angle, 160deg),
      rgb(255 255 255 / calc(.3 * var(--gx-alpha))) 0%,
      rgb(244 246 255 / calc(.36 * var(--gx-alpha))) 60%,
      rgb(232 236 250 / calc(.43 * var(--gx-alpha))) 100%);
  --gx-glass-sh:
    inset 0 0 0 1px rgba(255, 255, 255, .6),
    inset 0 1px 0 rgba(255, 255, 255, .75),
    0 18px 40px -20px rgba(8, 12, 40, .5);
}
/* a circle reads as a glass sphere: a little shading towards its lower edge */
:is(.circle-style-dark:not(.wpb_column):not(.vc_column_container), .circle-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) { --gx-glass-sh: inset 0 0 0 1px rgba(255, 255, 255, .1), inset -14px -20px 46px -18px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px -18px rgba(0, 0, 0, .55); }
:is(.circle-style-light:not(.wpb_column):not(.vc_column_container), .circle-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) { --gx-glass-sh: inset 0 0 0 1px rgba(255, 255, 255, .6), inset -14px -20px 46px -18px rgba(20, 30, 90, .14), inset 0 1px 0 rgba(255, 255, 255, .75), 0 20px 44px -22px rgba(8, 12, 40, .5); }
/* with the script running, the glass moves onto its own pane, so the glow rising behind an edge can sit underneath it */
:is(.box-style-dark:not(.wpb_column):not(.vc_column_container), .box-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-dark:not(.wpb_column):not(.vc_column_container), .square-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-dark:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-dark:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-dark:not(.wpb_column):not(.vc_column_container), .circle-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .box-style-light:not(.wpb_column):not(.vc_column_container), .box-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-light:not(.wpb_column):not(.vc_column_container), .square-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-light:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-light:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-light:not(.wpb_column):not(.vc_column_container), .circle-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper).gx-on { background: none; box-shadow: none; }

/* without the script, a simple brighter edge on hover */
:is(.box-style-dark:not(.wpb_column):not(.vc_column_container), .box-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-dark:not(.wpb_column):not(.vc_column_container), .square-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-dark:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-dark:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-dark:not(.wpb_column):not(.vc_column_container), .circle-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper):not(.gx-on):hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 18px 40px -16px rgba(0, 0, 0, .7); }
:is(.box-style-light:not(.wpb_column):not(.vc_column_container), .box-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-light:not(.wpb_column):not(.vc_column_container), .square-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-light:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-light:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-light:not(.wpb_column):not(.vc_column_container), .circle-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper):not(.gx-on):hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 22px 44px -18px rgba(8, 12, 40, .55); }

/* ---- the content (your own WPBakery styling still applies on top) ---- */
:is(.box-style-dark:not(.wpb_column):not(.vc_column_container), .box-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-dark:not(.wpb_column):not(.vc_column_container), .square-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-dark:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-dark:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-dark:not(.wpb_column):not(.vc_column_container), .circle-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .box-style-light:not(.wpb_column):not(.vc_column_container), .box-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-light:not(.wpb_column):not(.vc_column_container), .square-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-light:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-light:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-light:not(.wpb_column):not(.vc_column_container), .circle-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) :is(h1, h2, h3, h4, h5, h6) { color: inherit; margin-top: 0; }
:is(.box-style-dark:not(.wpb_column):not(.vc_column_container), .box-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-dark:not(.wpb_column):not(.vc_column_container), .square-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-dark:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-dark:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-dark:not(.wpb_column):not(.vc_column_container), .circle-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .box-style-light:not(.wpb_column):not(.vc_column_container), .box-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-light:not(.wpb_column):not(.vc_column_container), .square-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-light:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-light:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-light:not(.wpb_column):not(.vc_column_container), .circle-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) :is(p, h1, h2, h3, h4, h5, h6, ul, ol):last-child { margin-bottom: 0; }
:is(.box-style-dark:not(.wpb_column):not(.vc_column_container), .box-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-dark:not(.wpb_column):not(.vc_column_container), .square-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-dark:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-dark:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-dark:not(.wpb_column):not(.vc_column_container), .circle-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .box-style-light:not(.wpb_column):not(.vc_column_container), .box-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-light:not(.wpb_column):not(.vc_column_container), .square-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-light:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-light:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-light:not(.wpb_column):not(.vc_column_container), .circle-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) > :is(.wpb_content_element, .vc_btn3-container, .wpb_wrapper):last-child { margin-bottom: 0; }   /* WPBakery's element spacing doesn't pad out the foot of the glass */
:is(.box-style-dark:not(.wpb_column):not(.vc_column_container), .box-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-dark:not(.wpb_column):not(.vc_column_container), .square-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-dark:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-dark:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-dark:not(.wpb_column):not(.vc_column_container), .circle-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) p { color: rgba(255, 255, 255, .8); }
:is(.box-style-dark:not(.wpb_column):not(.vc_column_container), .box-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-dark:not(.wpb_column):not(.vc_column_container), .square-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-dark:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-dark:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-dark:not(.wpb_column):not(.vc_column_container), .circle-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) small { color: rgba(255, 255, 255, .68); }
/* clear glass lets more of the scene through, so the text carries a soft shadow of its own (dark text a soft light one) to stay crisp on any scene */
:is(.box-style-dark:not(.wpb_column):not(.vc_column_container), .box-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-dark:not(.wpb_column):not(.vc_column_container), .square-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-dark:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-dark:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-dark:not(.wpb_column):not(.vc_column_container), .circle-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) :is(h1, h2, h3, h4, h5, h6, p, li, small) { text-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 16px rgba(0, 0, 0, .55); }
:is(.box-style-light:not(.wpb_column):not(.vc_column_container), .box-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-light:not(.wpb_column):not(.vc_column_container), .square-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-light:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-light:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-light:not(.wpb_column):not(.vc_column_container), .circle-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) p { color: rgba(14, 18, 34, .84); }
:is(.box-style-light:not(.wpb_column):not(.vc_column_container), .box-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-light:not(.wpb_column):not(.vc_column_container), .square-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-light:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-light:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-light:not(.wpb_column):not(.vc_column_container), .circle-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) small { color: rgba(14, 18, 34, .68); }
:is(.box-style-light:not(.wpb_column):not(.vc_column_container), .box-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-light:not(.wpb_column):not(.vc_column_container), .square-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-light:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-light:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-light:not(.wpb_column):not(.vc_column_container), .circle-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) :is(h1, h2, h3, h4, h5, h6, p, li, small) { text-shadow: 0 0 2px rgba(255, 255, 255, .55), 0 1px 14px rgba(255, 255, 255, .7); }
:is(.box-style-dark:not(.wpb_column):not(.vc_column_container), .box-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-dark:not(.wpb_column):not(.vc_column_container), .square-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-dark:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-dark:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-dark:not(.wpb_column):not(.vc_column_container), .circle-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .box-style-light:not(.wpb_column):not(.vc_column_container), .box-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-light:not(.wpb_column):not(.vc_column_container), .square-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-light:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-light:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-light:not(.wpb_column):not(.vc_column_container), .circle-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) a:not(.vc_btn3):not([class*="button-style"]) { color: inherit; }

/* ---- the moving parts, added by the script. Each one that moves is its own layer, turned, slid or faded by the graphics chip ---- */
.gx-fx { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; }
/* v2.8: a box more than a screen away from the screen: its moving parts are hidden, so the browser holds no layers for them (the glass pane stays) */
.gx-fx.gx-far > :is(.gx-under, .gx-over, .gx-lift, .gx-spot, .gx-rim) { visibility: hidden; }
.gx-fx > * { position: absolute; pointer-events: none; }
/* the soft lights and colours that move are small pictures, stretched to their size (so they cost little graphics memory at any size):
   nothing from the theme's own picture styling may reach them */
:is(.gx-fx, .gx-bfx) img.gx-im { display: block; margin: 0; max-width: none !important; max-height: none !important; min-width: 0 !important; min-height: 0 !important;
  padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; outline: 0 !important;
  object-fit: fill !important; filter: none !important; transition: none !important; image-rendering: auto !important; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.gx-pane { inset: 0; border-radius: inherit; background: var(--gx-glass); box-shadow: var(--gx-glass-sh); }
/* the glows that reach past the edge: clipped 96px out (and at the right-hand edge of the page, set by the script) */
.gx-under, .gx-over { left: -96px; top: -96px; right: -96px; bottom: -96px; overflow: hidden; }
/* a pill's streams of light: the faint lines, drawn once (their shape is a mask over the pill's colours), and the brighter streaks that run
   along them, each a small layer the compositor slides */
.gx-flow { position: absolute; left: 0; top: 0; opacity: var(--gx-flow, .2);
  background: linear-gradient(var(--gx-angle, 160deg), rgb(var(--gx-g0)), rgb(var(--gx-g3)) 45%, rgb(var(--gx-g2))); }
.gx-fs { position: absolute; left: 0; top: 0; height: 1.5px; margin-top: -.75px; border-radius: 2px; transform-origin: 100% 50%; opacity: 0;
  background: linear-gradient(90deg, rgba(var(--gx-g0), 0), rgba(var(--gx-g0), .45) 60%, rgba(var(--gx-h0), .85));
  box-shadow: 0 0 4px rgba(var(--gx-g0), .4); will-change: transform, opacity; }
.gx-lite .gx-fs { display: none; }
.gx-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
/* in a circle the colours and the highlight are circles themselves, so the cut only has to be square: a plain rectangle costs the
   compositor nothing, where a round cut over a layer that turns can mean an extra off-screen pass every frame */
:is(.circle-style-dark:not(.wpb_column):not(.vc_column_container), .circle-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-light:not(.wpb_column):not(.vc_column_container), .circle-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) > .gx-fx .gx-clip { border-radius: 0; }
/* the colours inside the glass: a soft wash between two of them and four pools of colour, drawn by the script as a small picture. In a box
   they drift; in a circle they turn, and as that picture is itself a circle, turning it never needs cutting to shape */
.gx-tint { position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; }
:is(.circle-style-dark:not(.wpb_column):not(.vc_column_container), .circle-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-light:not(.wpb_column):not(.vc_column_container), .circle-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) > .gx-fx .gx-tint { left: 0; top: 0; width: 100%; height: 100%; }
/* boxes: the occasional glint sweeping across the glass: a band of light (a picture) that slides across, turned a little */
.gx-glint { position: absolute; left: 0; top: -60%; width: 38%; height: 220%; opacity: 0; }
/* circles: the glass sphere's highlight, which leans towards the pointer on hover */
.gx-shine {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(46% 38% at var(--gx-hx, 32%) var(--gx-hy, 24%), rgba(255, 255, 255, var(--gx-hs, .13)), rgba(255, 255, 255, 0) 72%);
}
/* the glow rising from behind an edge: under the pane, so the glass dims what shows through it */
.gx-halo {
  position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(var(--gx-sh), 1), rgba(var(--gx-g1), .5) 20%, rgba(var(--gx-g3), .16) 52%, rgba(var(--gx-g3), 0));
}
/* boxes: the lights that travel round the edge. A soft ring (the shape of the edge, drawn once) shows only the rim of the layers turning
   underneath it: a bright head with a fading tail, and a wedge of light where the glow rises (each drawn by the script as a small picture:
   a sweep of light round its centre, mirrored for a light running the other way) */
.gx-edge { position: absolute; overflow: hidden; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.gx-l, .gx-sr { position: absolute; left: 50%; top: 50%; will-change: transform; }
.gx-lite .gx-l2 { visibility: hidden; }   /* the device is struggling: the second light rests */
.gx-sr { opacity: 0; }
/* circles: a moon on a tilted orbit just outside the rim. The ring of its trail is shaped once; the whole layer simply turns */
.gx-orbit { position: absolute; }
.gx-track { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(var(--gx-g0), .5);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .3), #000); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .3), #000); }
:is(.box-style-light:not(.wpb_column):not(.vc_column_container), .box-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-light:not(.wpb_column):not(.vc_column_container), .square-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-light:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-light:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-light:not(.wpb_column):not(.vc_column_container), .circle-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) .gx-track { border-color: rgba(var(--gx-g0), .6); }
.gx-mw { position: absolute; inset: 0; will-change: transform, opacity; }
.gx-trail, .gx-sr2 { position: absolute; inset: -12px; border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 24px), rgba(0, 0, 0, .14) calc(100% - 17px), rgba(0, 0, 0, .42) calc(100% - 13.6px),
    #000 calc(100% - 12.8px), #000 calc(100% - 11.2px), rgba(0, 0, 0, .42) calc(100% - 10.4px), rgba(0, 0, 0, .14) calc(100% - 7px), transparent);
  mask-image: radial-gradient(closest-side, transparent calc(100% - 24px), rgba(0, 0, 0, .14) calc(100% - 17px), rgba(0, 0, 0, .42) calc(100% - 13.6px),
    #000 calc(100% - 12.8px), #000 calc(100% - 11.2px), rgba(0, 0, 0, .42) calc(100% - 10.4px), rgba(0, 0, 0, .14) calc(100% - 7px), transparent); }
.gx-trail { background: conic-gradient(from 90deg, rgba(var(--gx-g0), 0) 0turn, rgba(var(--gx-g0), 0) .6turn, rgba(var(--gx-g0), .12) .78turn,
  rgba(var(--gx-g0), .55) .94turn, rgba(var(--gx-h0), 1) .993turn, rgba(var(--gx-g0), 0) 1turn); }
.gx-rev > .gx-trail { transform: scaleY(-1); }
.gx-moon { position: absolute; left: 100%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, rgb(var(--gx-m0, 255, 255, 255)), rgb(var(--gx-m1, 200, 220, 255)) 50%, rgb(var(--gx-g0)));
  box-shadow: 0 0 9px 3px rgba(var(--gx-g0), .42); }
/* circles: the wedge of light along the rim where the glow rises */
.gx-srw { position: absolute; border-radius: 50%; opacity: 0; will-change: transform, opacity; }
.gx-sr2 { background: conic-gradient(from 90deg, rgba(var(--gx-sh), .95) 0turn, rgba(var(--gx-g1), .5) .025turn, rgba(var(--gx-g3), .18) .07turn, rgba(var(--gx-g3), 0) .14turn,
  rgba(var(--gx-g3), 0) .86turn, rgba(var(--gx-g3), .18) .93turn, rgba(var(--gx-g1), .5) .975turn, rgba(var(--gx-sh), .95) 1turn); }
/* hover: a soft pool of light under the pointer */
.gx-spot {
  inset: 0; border-radius: inherit;
  background: radial-gradient(440px circle at var(--gx-mx, 50%) var(--gx-my, 50%), rgba(var(--gx-c1), var(--gx-ss, .14)), rgba(var(--gx-c1), 0) 62%);
  opacity: var(--gx-hov, 0);
}
/* hover: the edge lighting up nearest the pointer (the same glow, masked to the rim) */
.gx-rim {
  inset: 0; border-radius: inherit; padding: 1px; box-sizing: border-box;
  background: radial-gradient(280px circle at var(--gx-mx, 50%) var(--gx-my, 50%), rgba(var(--gx-c1), .95), rgba(var(--gx-c1), .22) 42%, rgba(var(--gx-c1), 0) 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--gx-hov, 0);
}
/* hover: the deeper shadow and coloured glow of a lifted box or circle */
.gx-lift {
  inset: 0; border-radius: inherit;
  box-shadow: 0 44px 80px -30px rgba(0, 0, 0, var(--gx-ls, .9)), 0 0 64px -14px rgba(var(--gx-c1), .4);
  opacity: var(--gx-hov, 0);
}
:is(.box-style-light:not(.wpb_column):not(.vc_column_container), .box-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .square-style-light:not(.wpb_column):not(.vc_column_container), .square-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-vertical-style-light:not(.wpb_column):not(.vc_column_container), .pill-vertical-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .pill-horizontal-style-light:not(.wpb_column):not(.vc_column_container), .pill-horizontal-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-light:not(.wpb_column):not(.vc_column_container), .circle-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) { --gx-ss: .2; --gx-ls: .45; --gx-hs: .5; --gx-gs: .3; }
:is(.circle-style-dark:not(.wpb_column):not(.vc_column_container), .circle-style-dark:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper, .circle-style-light:not(.wpb_column):not(.vc_column_container), .circle-style-light:is(.wpb_column, .vc_column_container) > .vc_column-inner > .wpb_wrapper) > .gx-fx > .gx-rim { padding: 1.5px; }

/* ============================== buttons ============================== */
:is(a.button-style-dark, button.button-style-dark, input.button-style-dark, .button-style-dark:not(a):not(button):not(input) > :is(a, button), .button-style-dark:not(a):not(button):not(input) .vc_btn3, a.button-style-light, button.button-style-light, input.button-style-light, .button-style-light:not(a):not(button):not(input) > :is(a, button), .button-style-light:not(a):not(button):not(input) .vc_btn3) {
  /* its own values, so a button inside a box never picks up the box's colours or hover */
  --gx-c1: 150, 200, 255; --gx-c2: 255, 186, 150; --gx-hot: 255, 255, 255; --gx-t1: 40, 70, 140; --gx-t2: 90, 40, 120;
  --gx-hov: 0; --gx-mx: 50%; --gx-my: 50%;
  position: relative !important;
  isolation: isolate;
  display: inline-flex !important; align-items: center; justify-content: center; gap: .6em;
  box-sizing: border-box;
  padding: var(--gx-btn-pad) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 60%;
  overflow: visible !important;
  transition: box-shadow .4s ease, background-color .4s ease, color .2s ease;
}
:is(a.button-style-dark, button.button-style-dark, input.button-style-dark, .button-style-dark:not(a):not(button):not(input) > :is(a, button), .button-style-dark:not(a):not(button):not(input) .vc_btn3, a.button-style-light, button.button-style-light, input.button-style-light, .button-style-light:not(a):not(button):not(input) > :is(a, button), .button-style-light:not(a):not(button):not(input) .vc_btn3).vc_btn3-block { display: flex !important; width: 100%; }   /* WPBakery's full-width button */
:is(a.button-style-dark, button.button-style-dark, input.button-style-dark, .button-style-dark:not(a):not(button):not(input) > :is(a, button), .button-style-dark:not(a):not(button):not(input) .vc_btn3) {
  color: #fff !important;
  /* smoky glass: a dark tint (most of the way solid, so it reads as a button over anything), a sheen across the top, and a frosted view of what is behind */
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .02) 52%, rgba(255, 255, 255, .05)), linear-gradient(135deg, rgba(var(--gx-t1), .3), rgba(var(--gx-t2), .24)), rgba(8, 10, 26, var(--gx-btn-dark, .46)) !important;   /* --gx-btn-dark: how solid the dark buttons are (0 clear to 1 solid) */
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 10px 28px -14px rgba(0, 0, 0, .55) !important;
}
:is(a.button-style-light, button.button-style-light, input.button-style-light, .button-style-light:not(a):not(button):not(input) > :is(a, button), .button-style-light:not(a):not(button):not(input) .vc_btn3) {
  --gx-c1: 60, 96, 230; --gx-c2: 200, 70, 150; --gx-hot: 30, 50, 140; --gx-t1: 200, 220, 255; --gx-t2: 240, 210, 255;
  color: #0e1222 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .26) 52%, rgba(255, 255, 255, .34)), linear-gradient(135deg, rgba(var(--gx-t1), .5), rgba(var(--gx-t2), .42)) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6);
  text-shadow: 0 1px 8px rgba(255, 255, 255, .5) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .85), 0 10px 26px -12px rgba(8, 12, 40, .45) !important;
}
:is(a.button-style-dark, button.button-style-dark, input.button-style-dark, .button-style-dark:not(a):not(button):not(input) > :is(a, button), .button-style-dark:not(a):not(button):not(input) .vc_btn3):is(:hover, :focus-visible) {
  color: #fff !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04) 52%, rgba(255, 255, 255, .07)), linear-gradient(135deg, rgba(var(--gx-t1), .4), rgba(var(--gx-t2), .34)), rgba(8, 10, 26, calc(var(--gx-btn-dark, .46) + .02)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .22), 0 16px 36px -12px rgba(0, 0, 0, .65),
    0 0 0 1px rgba(var(--gx-c1), .28), 0 0 26px -2px rgba(var(--gx-c1), .62), 0 0 60px -12px rgba(var(--gx-c2), .5) !important;
}
:is(a.button-style-light, button.button-style-light, input.button-style-light, .button-style-light:not(a):not(button):not(input) > :is(a, button), .button-style-light:not(a):not(button):not(input) .vc_btn3):is(:hover, :focus-visible) {
  color: #0e1222 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .36) 52%, rgba(255, 255, 255, .44)), linear-gradient(135deg, rgba(var(--gx-t1), .62), rgba(var(--gx-t2), .54)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), inset 0 1px 0 rgba(255, 255, 255, 1), 0 16px 34px -12px rgba(8, 12, 40, .5),
    0 0 0 1px rgba(var(--gx-c1), .3), 0 0 26px -2px rgba(var(--gx-c1), .55), 0 0 60px -12px rgba(var(--gx-c2), .45) !important;
}
:is(a.button-style-dark, button.button-style-dark, input.button-style-dark, .button-style-dark:not(a):not(button):not(input) > :is(a, button), .button-style-dark:not(a):not(button):not(input) .vc_btn3, a.button-style-light, button.button-style-light, input.button-style-light, .button-style-light:not(a):not(button):not(input) > :is(a, button), .button-style-light:not(a):not(button):not(input) .vc_btn3):focus-visible { outline: 2px solid rgba(var(--gx-c1), .9) !important; outline-offset: 3px; }
:is(a.button-style-dark, button.button-style-dark, input.button-style-dark, .button-style-dark:not(a):not(button):not(input) > :is(a, button), .button-style-dark:not(a):not(button):not(input) .vc_btn3, a.button-style-light, button.button-style-light, input.button-style-light, .button-style-light:not(a):not(button):not(input) > :is(a, button), .button-style-light:not(a):not(button):not(input) .vc_btn3):not(.gx-on):hover { transform: translateY(-2px); }                  /* without the script */
:is(a.button-style-dark, button.button-style-dark, input.button-style-dark, .button-style-dark:not(a):not(button):not(input) > :is(a, button), .button-style-dark:not(a):not(button):not(input) .vc_btn3, a.button-style-light, button.button-style-light, input.button-style-light, .button-style-light:not(a):not(button):not(input) > :is(a, button), .button-style-light:not(a):not(button):not(input) .vc_btn3):not(.gx-on):active { transform: translateY(0) scale(.97); }

/* the button's moving parts, added by the script */
.gx-bfx { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; }
.gx-bfx > span { position: absolute; inset: 0; border-radius: inherit; }
/* a light that sweeps round the rim, slowly while idle; a faster, brighter one takes over on hover (each a small picture that turns) */
.gx-ring {
  padding: 1.5px; box-sizing: border-box; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.gx-ring > .gx-rl {
  position: absolute; left: 50%; top: 50%; width: calc(100% + 140px); height: auto; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) rotate(0turn);
  animation: gx-turn var(--gx-lap, 5s) linear infinite var(--gx-dir, normal);
  animation-delay: var(--gx-ph, 0s);
}
.gx-ring2 { opacity: var(--gx-hov, 0); padding: 2px; }
.gx-ring2 > .gx-rl { animation-duration: var(--gx-lap2, 1.8s); }
/* a soft breathing glow round the button, so a call to action never sits quite still */
.gx-bglow { inset: -1px; box-shadow: 0 0 22px -3px rgba(var(--gx-c1), .55), 0 0 6px -1px rgba(var(--gx-c2), .4); animation: gx-breathe var(--gx-br, 4s) ease-in-out infinite alternate; animation-delay: var(--gx-brd, 0s); opacity: .3; }
/* light under the pointer */
.gx-bspot { background: radial-gradient(130px circle at var(--gx-mx, 50%) var(--gx-my, 50%), rgba(var(--gx-hot), .26), rgba(var(--gx-hot), 0) 70%); opacity: var(--gx-hov, 0); }
/* a sheen: now and then it crosses the button on its own, and once each time the pointer arrives */
.gx-sheen { overflow: hidden; }
.gx-sheen::before, .gx-sheen::after {
  content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 42%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, var(--gx-shs, .22)) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-160%) skewX(-18deg);
}
.gx-sheen::before { animation: gx-shimmer var(--gx-sh, 7s) ease-in-out infinite; animation-delay: var(--gx-shd, 0s); }
.gx-swept .gx-sheen::after { animation: gx-sweep .95s cubic-bezier(.3, .6, .25, 1) 1; --gx-shs: .38; }
:is(a.button-style-light, button.button-style-light, input.button-style-light, .button-style-light:not(a):not(button):not(input) > :is(a, button), .button-style-light:not(a):not(button):not(input) .vc_btn3) { --gx-shs: .55; }
@keyframes gx-turn { to { transform: translate(-50%, -50%) rotate(1turn); } }
@keyframes gx-breathe { from { opacity: .22; } to { opacity: .72; } }
@keyframes gx-shimmer { 0% { transform: translateX(-160%) skewX(-18deg); } 16%, 100% { transform: translateX(360%) skewX(-18deg); } }
@keyframes gx-sweep { from { transform: translateX(-160%) skewX(-18deg); } to { transform: translateX(360%) skewX(-18deg); } }

.gx-idle .gx-rl, .gx-idle .gx-bglow, .gx-idle .gx-sheen::before { animation-play-state: paused; }   /* off screen: nothing runs */

/* v2.8: on a touch screen the buttons' frosted view of the scene behind (a live blur the phone has to work out every frame, over a moving scene)
   is left out: the tint, sheen and lights stay */
@media (pointer: coarse) {
  :is(a.button-style-dark, button.button-style-dark, input.button-style-dark, .button-style-dark:not(a):not(button):not(input) > :is(a, button), .button-style-dark:not(a):not(button):not(input) .vc_btn3, a.button-style-light, button.button-style-light, input.button-style-light, .button-style-light:not(a):not(button):not(input) > :is(a, button), .button-style-light:not(a):not(button):not(input) .vc_btn3) { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* v2.8: with a mouse, a box keeps its own layer all the time, so a hover never has to repaint it (and its text never switches antialiasing) */
@media (pointer: fine) {
  .gx-on:not(a):not(button):not(input) { will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
  .gx-rl, .gx-bglow, .gx-sheen::before, .gx-sheen::after { animation: none !important; }
}