.elementor-kit-9{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =========================================================
   MARKET RUSH PAGE GRADIENT — FIXED VERSION

   Required class on the OUTER hero Elementor container:
   mr-hero-section

   Optional class for sections that must keep their own background:
   mr-keep-background

   Selected Results outer container classes:
   mr-results-section mr-keep-background

   Optional wrapper class for all sections after the hero:
   mr-gradient-content
========================================================= */


/* =========================================================
   1. GLOBAL PAGE BACKGROUND
========================================================= */

html,
body.elementor-page {
    min-height: 100%;

    background-color: #f7f2e8 !important;

    background-image:
        radial-gradient(
            circle at -5% 18%,
            rgba(174, 204, 177, 0.44) 0%,
            rgba(174, 204, 177, 0.20) 17%,
            transparent 38%
        ),
        radial-gradient(
            circle at 102% 13%,
            rgba(249, 196, 154, 0.48) 0%,
            rgba(249, 196, 154, 0.20) 20%,
            transparent 40%
        ),
        radial-gradient(
            circle at 92% 58%,
            rgba(246, 216, 182, 0.28) 0%,
            transparent 36%
        ),
        radial-gradient(
            circle at 5% 73%,
            rgba(192, 211, 188, 0.23) 0%,
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #fbf5eb 0%,
            #f8f3e9 36%,
            #f4f1e8 67%,
            #f7f2e7 100%
        ) !important;

    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: fixed !important;
}


/* Remove opaque theme backgrounds covering the page gradient */

body.elementor-page #page,
body.elementor-page .site,
body.elementor-page #content,
body.elementor-page .site-content,
body.elementor-page main,
body.elementor-page .elementor-location-single,
body.elementor-page .elementor-location-archive {
    background-color: transparent !important;
    background-image: none !important;
}


/* =========================================================
   2. HERO SECTION — KEEP ITS ORIGINAL DESIGN
========================================================= */

body.elementor-page .mr-hero-section {
    position: relative !important;
    z-index: 1;
    overflow: visible !important;
    isolation: isolate;

    background-color: transparent !important;
    background-image: none !important;
}

body.elementor-page .mr-hero-section > .e-con-inner,
body.elementor-page .mr-hero-section > .elementor-container,
body.elementor-page .mr-hero-section .elementor-widget-html,
body.elementor-page .mr-hero-section .elementor-widget-html > .elementor-widget-container {
    position: relative;
    z-index: 2;

    background-color: transparent !important;
    background-image: none !important;
}


/* Restore the light foreground hero card */

body.elementor-page
.mr-hero-section
.mr-widget
.mr-stage
> .mr-hero {
    background:
        radial-gradient(
            circle at 86% 13%,
            rgba(232, 90, 12, 0.13),
            transparent 38%
        ),
        radial-gradient(
            circle at 12% 88%,
            rgba(0, 66, 37, 0.12),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.94),
            rgba(248, 244, 235, 0.84)
        ) !important;

    color: #14231c !important;
}


/* Restore the intended hero copy colours */

body.elementor-page .mr-hero-section .mr-title {
    color: #14231c !important;
}

body.elementor-page .mr-hero-section .mr-title .green {
    color: #004225 !important;
}

body.elementor-page .mr-hero-section .mr-title .orange {
    color: transparent !important;

    background:
        linear-gradient(
            125deg,
            #d84d00,
            #ff7824
        ) !important;

    background-clip: text !important;
    -webkit-background-clip: text !important;
}

body.elementor-page .mr-hero-section .mr-subtitle {
    color: #657169 !important;
}


/* =========================================================
   3. SECTIONS AFTER THE HERO
========================================================= */

/* Allow the global page gradient to show through */

body.elementor-page
.mr-hero-section
~ .e-con.e-parent:not(.mr-keep-background):not(.mr-after-hero):not(.mr-results-section),
body.elementor-page
.mr-hero-section
~ section:not(.mr-keep-background):not(.mr-after-hero):not(.mr-results-section) {
    background-color: transparent !important;
    background-image: none !important;
}


/* Optional wrapper for the sections after the hero */

body.elementor-page .mr-gradient-content:not(.mr-results-section) {
    background-color: transparent !important;
    background-image: none !important;
}

body.elementor-page
.mr-gradient-content
> .e-con.e-parent:not(.mr-keep-background):not(.mr-after-hero):not(.mr-results-section) {
    background-color: transparent !important;
    background-image: none !important;
}


/* Keep custom section backgrounds where requested */

body.elementor-page .mr-keep-background {
    position: relative;
}


/* =========================================================
   4. FINAL SMOOTH HERO-TO-PAGE TRANSITION
========================================================= */

/*
   This version targets the actual OUTER Elementor container
   holding the channel marquee. It does not rely on classes
   being direct siblings of the hero.
*/

/* Remove every previous transition layer */
html body .mr-hero-section::before,
html body .mr-hero-section::after,
html body .mr-after-hero::before,
html body .mr-after-hero::after,
html body .mr-channel-section::before,
html body .mr-channel-section::after {
    content: none !important;
    display: none !important;
}


/* Keep the hero unchanged */

html body .mr-hero-section {
    position: relative !important;
    z-index: 2;
    overflow: visible !important;
}


/*
   Find the closest top-level Elementor container holding
   .mr-channel-section.
*/

html body
.e-con.e-parent:has(.mr-channel-section):not(:has(.e-con.e-parent .mr-channel-section)) {
    position: relative !important;
    z-index: 1;
    isolation: isolate;

    margin-top: -1px !important;

    border-top: 0 !important;
    box-shadow: none !important;

    background-color: transparent !important;
    background-image: none !important;

    overflow: visible !important;
}


/*
   Dark green is placed behind the section and faded with a mask.
   A mask is used instead of a multi-stop colour gradient, which
   prevents the visible colour bands and horizontal joins.
*/

html body
.e-con.e-parent:has(.mr-channel-section):not(:has(.e-con.e-parent .mr-channel-section))::before {
    content: "" !important;
    display: block !important;

    position: absolute;
    z-index: 0;

    top: -2px;
    left: 0;
    right: 0;

    height: 340px;

    pointer-events: none;

    background: #0b3021 !important;

    -webkit-mask-image:
        linear-gradient(
            180deg,
            #000 0%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            180deg,
            #000 0%,
            transparent 100%
        );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


/*
   Force all following OUTER Elementor sections to be transparent.
   This removes the solid cream section background that caused
   the hard horizontal line at the bottom of the transition.
*/

html body
.e-con.e-parent:has(.mr-channel-section):not(:has(.e-con.e-parent .mr-channel-section))
~ .e-con.e-parent:not(.mr-keep-background):not(.mr-results-section) {
    background-color: transparent !important;
    background-image: none !important;
    border-top: 0 !important;
    box-shadow: none !important;
}


/* Keep the channel content fully bright and above the fade */

html body
.e-con.e-parent:has(.mr-channel-section):not(:has(.e-con.e-parent .mr-channel-section))
> .e-con-inner,
html body
.e-con.e-parent:has(.mr-channel-section):not(:has(.e-con.e-parent .mr-channel-section))
> .elementor-container {
    position: relative;
    z-index: 2;
}


html body .mr-channel-section {
    position: relative !important;
    z-index: 2;

    left: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: -50vw !important;
    margin-right: -50vw !important;

    padding: 58px 18px 28px !important;

    background: transparent !important;

    opacity: 1 !important;
    filter: none !important;
    overflow: visible !important;
}


html body .mr-channel-section .mr-channel-pill {
    position: relative !important;
    z-index: 3 !important;

    width: min(100%, 1440px);
    margin-inline: auto;

    opacity: 1 !important;
    filter: none !important;
}


/* Neutralise the old helper class if it still exists */

html body .mr-after-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;

    background-color: transparent !important;
    background-image: none !important;
}


/* Tablet */

@media (max-width: 1024px) {
    html body
    .e-con.e-parent:has(.mr-channel-section):not(:has(.e-con.e-parent .mr-channel-section))::before {
        height: 260px;
    }

    html body .mr-channel-section {
        padding: 46px 14px 24px !important;
    }
}


/* Mobile */

@media (max-width: 767px) {
    html body
    .e-con.e-parent:has(.mr-channel-section):not(:has(.e-con.e-parent .mr-channel-section))::before {
        height: 190px;
    }

    html body .mr-channel-section {
        padding: 34px 8px 20px !important;
    }
}


/* =========================================================
   5. RESPONSIVE PAGE BACKGROUND
========================================================= */

@media (max-width: 1024px) {
    html,
    body.elementor-page {
        background-image:
            radial-gradient(
                circle at -10% 14%,
                rgba(174, 204, 177, 0.38),
                transparent 37%
            ),
            radial-gradient(
                circle at 108% 17%,
                rgba(249, 196, 154, 0.40),
                transparent 38%
            ),
            linear-gradient(
                180deg,
                #fbf5eb 0%,
                #f5f1e7 100%
            ) !important;
    }
}


@media (max-width: 767px) {
    html,
    body.elementor-page {
        background-attachment: scroll !important;

        background-image:
            radial-gradient(
                circle at -18% 12%,
                rgba(174, 204, 177, 0.34),
                transparent 34%
            ),
            radial-gradient(
                circle at 118% 20%,
                rgba(249, 196, 154, 0.36),
                transparent 36%
            ),
            linear-gradient(
                180deg,
                #fbf5eb 0%,
                #f5f1e7 100%
            ) !important;
    }
}

/* =========================================================
   6. SELECTED RESULTS SECTION
========================================================= */

/*
   Add BOTH classes to the OUTER Elementor container holding:
   - Selected Results label
   - Main heading and paragraph
   - E-commerce Growth widget
   - B2B Demand widget

   CSS Classes:
   mr-results-section mr-keep-background
*/

html body.elementor-page .mr-results-section,
html body.elementor-page .e-con.e-parent.mr-results-section {
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate !important;
    overflow: hidden !important;

    width: 100% !important;

    padding-top: 90px !important;
    padding-bottom: 90px !important;

    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 38px !important;

    background-color: #003d25 !important;

    background-image:
        radial-gradient(
            circle at 90% 8%,
            rgba(164, 190, 88, 0.26) 0%,
            rgba(164, 190, 88, 0.12) 22%,
            transparent 44%
        ),
        radial-gradient(
            circle at 8% 100%,
            rgba(0, 117, 70, 0.28) 0%,
            rgba(0, 117, 70, 0.10) 24%,
            transparent 44%
        ),
        linear-gradient(
            120deg,
            #003d25 0%,
            #004728 42%,
            #07502e 70%,
            #315f31 100%
        ) !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;

    box-shadow:
        0 35px 90px rgba(0, 32, 19, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}


/* Grid overlay removed — all other section styling remains unchanged. */

/* Soft lighting */

html body.elementor-page .mr-results-section::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;

    pointer-events: none !important;

    background:
        radial-gradient(
            circle at 87% 10%,
            rgba(178, 201, 100, 0.16),
            transparent 36%
        ),
        radial-gradient(
            circle at 30% 110%,
            rgba(0, 122, 72, 0.20),
            transparent 42%
        ) !important;
}


/* Keep the Elementor layout and widgets above the background */

html body.elementor-page .mr-results-section > .e-con-inner,
html body.elementor-page .mr-results-section > .elementor-container,
html body.elementor-page .mr-results-section > .elementor-widget-wrap {
    position: relative !important;
    z-index: 2 !important;

    background-color: transparent !important;
    background-image: none !important;
}

html body.elementor-page .mr-results-section > .e-con,
html body.elementor-page .mr-results-section > .elementor-element {
    position: relative !important;
    z-index: 2 !important;
}


/* Results heading colours */

html body.elementor-page .mr-results-section h1,
html body.elementor-page .mr-results-section h2,
html body.elementor-page .mr-results-section h3,
html body.elementor-page .mr-results-section .elementor-heading-title {
    color: #ffffff !important;
}

html body.elementor-page .mr-results-section p,
html body.elementor-page .mr-results-section .elementor-widget-text-editor {
    color: rgba(255, 255, 255, 0.68) !important;
}


/* Selected Results label */

html body.elementor-page .mr-results-section .mr-results-eyebrow,
html body.elementor-page .mr-results-section .elementor-divider__text {
    color: #e6c654 !important;
}


/* Tablet */

@media (max-width: 1024px) {
    html body.elementor-page .mr-results-section,
    html body.elementor-page .e-con.e-parent.mr-results-section {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
        border-radius: 30px !important;
    }

    html body.elementor-page .mr-results-section::before {
        background-size: 74px 74px !important;
    }
}


/* Mobile */

@media (max-width: 767px) {
    html body.elementor-page .mr-results-section,
    html body.elementor-page .e-con.e-parent.mr-results-section {
        padding-top: 52px !important;
        padding-bottom: 52px !important;
        border-radius: 24px !important;
    }

    html body.elementor-page .mr-results-section::before {
        background-size: 54px 54px !important;
        opacity: 0.28 !important;
    }
}
/* =========================================================
   CHANNEL MARQUEE — FOLLOW ELEMENTOR CONTAINER WIDTH
========================================================= */

html body .mr-channel-section {
    position: relative !important;

    left: auto !important;
    right: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    transform: none !important;
}

/* Elementor HTML widget wrapper */
html body .elementor-widget-html:has(.mr-channel-section),
html body
.elementor-widget-html:has(.mr-channel-section)
> .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Marquee pill fills only the available container */
html body .mr-channel-pill {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
/* =========================================================
MARKET RUSH — NATIVE ELEMENTOR CTA
Use normal Elementor widgets. Add the CSS classes shown below.
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* OUTER ELEMENTOR CONTAINER
   CSS class: mr-cta-native
*/
.mr-cta-native {
  --mr-green: #004225;
  --mr-green-dark: #00351e;
  --mr-green-light: #4b7545;
  --mr-orange: #fd7522;
  --mr-gold: #ffc56b;

  --mr-x: 50%;
  --mr-y: 50%;
  --mr-rx: 0deg;
  --mr-ry: 0deg;

  position: relative !important;
  isolation: isolate;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 555px;

  overflow: hidden !important;

  border: 1px solid rgba(255,255,255,.28);
  border-radius: 44px;

  background:
    radial-gradient(
      circle at var(--mr-x) var(--mr-y),
      rgba(255,204,119,.18),
      transparent 28%
    ),
    radial-gradient(
      circle at 10% 0%,
      rgba(255,183,82,.16),
      transparent 34%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(107,190,123,.24),
      transparent 34%
    ),
    linear-gradient(
      120deg,
      var(--mr-green-dark) 0%,
      var(--mr-green) 44%,
      #315e3b 76%,
      var(--mr-green-light) 100%
    ) !important;

  background-size:
    100% 100%,
    135% 135%,
    145% 145%,
    100% 100% !important;

  background-position:
    center,
    0% 0%,
    100% 100%,
    center !important;

  box-shadow:
    0 38px 95px rgba(0,66,37,.22),
    0 12px 30px rgba(0,66,37,.10),
    inset 0 1px 0 rgba(255,255,255,.18);

  transform:
    perspective(1300px)
    rotateX(var(--mr-rx))
    rotateY(var(--mr-ry));

  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    box-shadow .35s ease;

  animation:
    mrCtaBackgroundDrift 13s ease-in-out infinite alternate;

  font-family: "Poppins", sans-serif !important;
}

/* Keep every Elementor widget above the animated background */
.mr-cta-native > *,
.mr-cta-native > .e-con-inner,
.mr-cta-native > .elementor-container,
.mr-cta-native .elementor-widget {
  position: relative;
  z-index: 5;
}

/* Soft animated orange orb */
.mr-cta-native::before {
  content: "";

  position: absolute;
  z-index: 1;

  width: 520px;
  height: 520px;

  left: -220px;
  top: -300px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 42% 42%,
      rgba(255,188,91,.78),
      rgba(255,157,38,.22) 40%,
      transparent 70%
    );

  opacity: .34;
  pointer-events: none;

  animation:
    mrCtaOrangeOrb 10s ease-in-out infinite alternate;
}

/* Soft animated green orb */
.mr-cta-native::after {
  content: "";

  position: absolute;
  z-index: 1;

  width: 600px;
  height: 600px;

  right: -245px;
  bottom: -375px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 38% 36%,
      rgba(124,207,137,.82),
      rgba(69,145,87,.28) 42%,
      transparent 70%
    );

  opacity: .48;
  pointer-events: none;

  animation:
    mrCtaGreenOrb 11s -3s ease-in-out infinite alternate;
}

.mr-cta-native:hover {
  box-shadow:
    0 48px 110px rgba(0,66,37,.27),
    0 16px 38px rgba(0,66,37,.13),
    inset 0 1px 0 rgba(255,255,255,.22);
}

/* EYEBROW TEXT WIDGET
   CSS class: mr-cta-kicker
*/
.mr-cta-kicker {
  opacity: 0;
  transform: translateY(22px);

  transition:
    opacity .72s cubic-bezier(.22,1,.36,1),
    transform .82s cubic-bezier(.22,1,.36,1);
}

.mr-cta-kicker .elementor-heading-title,
.mr-cta-kicker,
.mr-cta-kicker p {
  color: var(--mr-gold) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}

.mr-cta-kicker .elementor-widget-container {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.mr-cta-kicker .elementor-widget-container::before {
  content: "";
  display: inline-block;
  width: 23px;
  height: 1px;
  background: currentColor;
}

/* MAIN HEADING WIDGET
   CSS class: mr-cta-title
*/
.mr-cta-title {
  opacity: 0;
  transform: translateY(24px);

  transition:
    opacity .78s cubic-bezier(.22,1,.36,1),
    transform .88s cubic-bezier(.22,1,.36,1);
}

.mr-cta-title .elementor-heading-title {
  color: #fff !important;
  font-family: "Poppins", sans-serif !important;
  font-size: clamp(46px, 5.1vw, 72px) !important;
  font-weight: 500 !important;
  line-height: 1.07 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}

/* PARAGRAPH / TEXT EDITOR WIDGET
   CSS class: mr-cta-copy
*/
.mr-cta-copy {
  opacity: 0;
  transform: translateY(24px);

  transition:
    opacity .78s cubic-bezier(.22,1,.36,1),
    transform .88s cubic-bezier(.22,1,.36,1);
}

.mr-cta-copy,
.mr-cta-copy p {
  color: rgba(255,255,255,.70) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
}

/* BUTTON WIDGET
   CSS class: mr-cta-button
*/
.mr-cta-button {
  opacity: 0;
  transform: translateY(24px);

  transition:
    opacity .78s cubic-bezier(.22,1,.36,1),
    transform .88s cubic-bezier(.22,1,.36,1);
}

.mr-cta-button .elementor-button {
  position: relative;
  overflow: hidden;

  min-height: 58px;
  padding: 15px 30px !important;

  border: 1px solid rgba(255,255,255,.34) !important;
  border-radius: 999px !important;

  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #d75301 0%,
      #ef6611 52%,
      var(--mr-orange) 100%
    ) !important;

  box-shadow:
    0 18px 38px rgba(253,117,34,.28),
    0 6px 14px rgba(160,63,5,.20),
    inset 0 1px 0 rgba(255,255,255,.32);

  font-family: "Poppins", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;

  transition:
    transform .3s cubic-bezier(.22,1,.36,1),
    box-shadow .3s ease,
    background .3s ease;
}

.mr-cta-button .elementor-button::before {
  content: "";

  position: absolute;
  top: -70%;
  bottom: -70%;
  left: -48%;

  width: 36%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.40),
      transparent
    );

  transform: skewX(-20deg);
  pointer-events: none;

  animation:
    mrCtaButtonShine 4.8s ease-in-out infinite;
}

.mr-cta-button .elementor-button:hover {
  transform: translateY(-4px);

  background:
    linear-gradient(
      135deg,
      #c94d00 0%,
      #ef6611 48%,
      #ff8437 100%
    ) !important;

  box-shadow:
    0 24px 48px rgba(253,117,34,.34),
    0 8px 18px rgba(160,63,5,.22),
    inset 0 1px 0 rgba(255,255,255,.38);
}

.mr-cta-button .elementor-button-icon {
  transition: transform .3s ease;
}

.mr-cta-button .elementor-button:hover .elementor-button-icon {
  transform: translateX(5px);
}

/* Scroll reveal */
.mr-cta-native.is-visible .mr-cta-kicker,
.mr-cta-native.is-visible .mr-cta-title,
.mr-cta-native.is-visible .mr-cta-copy,
.mr-cta-native.is-visible .mr-cta-button {
  opacity: 1;
  transform: none;
}

.mr-cta-native.is-visible .mr-cta-kicker {
  transition-delay: .10s;
}

.mr-cta-native.is-visible .mr-cta-title {
  transition-delay: .20s;
}

.mr-cta-native.is-visible .mr-cta-copy {
  transition-delay: .31s;
}

.mr-cta-native.is-visible .mr-cta-button {
  transition-delay: .42s;
}

@keyframes mrCtaBackgroundDrift {
  from {
    background-position:
      center,
      0% 0%,
      100% 100%,
      center;
  }

  to {
    background-position:
      center,
      9% 7%,
      91% 90%,
      center;
  }
}

@keyframes mrCtaOrangeOrb {
  from {
    transform: translate3d(-15px,-8px,0) scale(.94);
  }

  to {
    transform: translate3d(82px,50px,0) scale(1.13);
  }
}

@keyframes mrCtaGreenOrb {
  from {
    transform: translate3d(25px,20px,0) scale(.92);
  }

  to {
    transform: translate3d(-78px,-48px,0) scale(1.16);
  }
}

@keyframes mrCtaButtonShine {
  0%,
  52% {
    left: -48%;
    opacity: 0;
  }

  64% {
    opacity: 1;
  }

  84%,
  100% {
    left: 125%;
    opacity: 0;
  }
}

@media (max-width: 1024px) {
  .mr-cta-native {
    min-height: 510px;
    border-radius: 38px;
  }

  .mr-cta-title .elementor-heading-title {
    font-size: clamp(44px, 6vw, 62px) !important;
  }
}

@media (max-width: 767px) {
  .mr-cta-native {
    min-height: 500px;
    border-radius: 30px;
    transform: none !important;
  }

  .mr-cta-kicker .elementor-heading-title,
  .mr-cta-kicker,
  .mr-cta-kicker p {
    font-size: 9px !important;
    letter-spacing: .13em !important;
  }

  .mr-cta-title .elementor-heading-title {
    font-size: clamp(38px, 10vw, 48px) !important;
    line-height: 1.08 !important;
  }

  .mr-cta-copy,
  .mr-cta-copy p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  .mr-cta-button {
    width: 100%;
    max-width: 310px;
  }

  .mr-cta-button .elementor-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mr-cta-native,
  .mr-cta-native::before,
  .mr-cta-native::after,
  .mr-cta-button .elementor-button::before {
    animation: none !important;
    transform: none !important;
  }

  .mr-cta-kicker,
  .mr-cta-title,
  .mr-cta-copy,
  .mr-cta-button {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* =========================================================
MARKET RUSH — GLOBAL HERO BUTTON
Matches the orange CTA inside the hero section.

Elementor Button widget CSS class:
mr-hero-button

The width is not forced. Control it through Elementor.
========================================================= */

html body .elementor-widget-button.mr-hero-button,
html body .elementor-widget-button.mr-hero-button
.elementor-button-wrapper {
    max-width: 100% !important;
}

html body .elementor-widget-button.mr-hero-button
.elementor-button,
html body a.elementor-button.mr-hero-button,
html body button.elementor-button.mr-hero-button {
    position: relative !important;
    overflow: hidden !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    max-width: 100% !important;
    min-height: 50px !important;

    padding: 13px clamp(18px, 1.7vw, 28px) !important;

    border: 0 !important;
    border-radius: 999px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #d84d00 0%,
            #ff7824 100%
        ) !important;

    box-shadow:
        0 14px 30px rgba(216, 77, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;

    text-decoration: none !important;

    font-family: "Poppins", sans-serif !important;
    font-size: clamp(12px, 0.92vw, 15px) !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease !important;
}

html body .elementor-widget-button.mr-hero-button
.elementor-button-content-wrapper,
html body a.elementor-button.mr-hero-button
.elementor-button-content-wrapper,
html body button.elementor-button.mr-hero-button
.elementor-button-content-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    gap: 10px !important;
}

html body .elementor-widget-button.mr-hero-button
.elementor-button-content-wrapper::after,
html body a.elementor-button.mr-hero-button
.elementor-button-content-wrapper::after,
html body button.elementor-button.mr-hero-button
.elementor-button-content-wrapper::after {
    content: "→" !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    color: #ffffff !important;

    font-size: 1em !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    transform: translateX(0);

    transition:
        transform 0.25s ease !important;
}

html body .elementor-widget-button.mr-hero-button
.elementor-button-icon,
html body a.elementor-button.mr-hero-button
.elementor-button-icon,
html body button.elementor-button.mr-hero-button
.elementor-button-icon {
    display: none !important;
}

html body .elementor-widget-button.mr-hero-button
.elementor-button:hover,
html body .elementor-widget-button.mr-hero-button
.elementor-button:focus-visible,
html body a.elementor-button.mr-hero-button:hover,
html body a.elementor-button.mr-hero-button:focus-visible,
html body button.elementor-button.mr-hero-button:hover,
html body button.elementor-button.mr-hero-button:focus-visible {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #d84d00 0%,
            #ff7824 100%
        ) !important;

    box-shadow:
        0 18px 36px rgba(216, 77, 0, 0.31),
        inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;

    filter: brightness(1.035);

    transform: translateY(-3px) !important;
}

html body .elementor-widget-button.mr-hero-button
.elementor-button:hover
.elementor-button-content-wrapper::after,
html body .elementor-widget-button.mr-hero-button
.elementor-button:focus-visible
.elementor-button-content-wrapper::after,
html body a.elementor-button.mr-hero-button:hover
.elementor-button-content-wrapper::after,
html body a.elementor-button.mr-hero-button:focus-visible
.elementor-button-content-wrapper::after,
html body button.elementor-button.mr-hero-button:hover
.elementor-button-content-wrapper::after,
html body button.elementor-button.mr-hero-button:focus-visible
.elementor-button-content-wrapper::after {
    transform: translateX(4px) !important;
}

html body .elementor-widget-button.mr-hero-button
.elementor-button:active,
html body a.elementor-button.mr-hero-button:active,
html body button.elementor-button.mr-hero-button:active {
    transform: translateY(-1px) scale(0.99) !important;
}

html body .elementor-widget-button.mr-hero-button
.elementor-button:focus-visible,
html body a.elementor-button.mr-hero-button:focus-visible,
html body button.elementor-button.mr-hero-button:focus-visible {
    outline: 3px solid rgba(255, 120, 36, 0.25) !important;
    outline-offset: 3px !important;
}

html body .elementor-widget-button.mr-hero-button.elementor-align-justify
.elementor-button,
html body .elementor-widget-button.mr-hero-button.elementor-tablet-align-justify
.elementor-button,
html body .elementor-widget-button.mr-hero-button.elementor-mobile-align-justify
.elementor-button {
    width: 100% !important;
}

@media (max-width: 1024px) {
    html body .elementor-widget-button.mr-hero-button
    .elementor-button,
    html body a.elementor-button.mr-hero-button,
    html body button.elementor-button.mr-hero-button {
        min-height: 50px !important;
        padding: 13px 24px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 767px) {
    html body .elementor-widget-button.mr-hero-button
    .elementor-button,
    html body a.elementor-button.mr-hero-button,
    html body button.elementor-button.mr-hero-button {
        min-height: 46px !important;
        padding: 11px 18px !important;
        font-size: 12px !important;
    }

    html body .elementor-widget-button.mr-hero-button
    .elementor-button-content-wrapper,
    html body a.elementor-button.mr-hero-button
    .elementor-button-content-wrapper,
    html body button.elementor-button.mr-hero-button
    .elementor-button-content-wrapper {
        gap: 9px !important;
    }
}

@media (max-width: 380px) {
    html body .elementor-widget-button.mr-hero-button
    .elementor-button,
    html body a.elementor-button.mr-hero-button,
    html body button.elementor-button.mr-hero-button {
        min-height: 44px !important;
        padding: 10px 15px !important;
        font-size: 11px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .elementor-widget-button.mr-hero-button
    .elementor-button,
    html body .elementor-widget-button.mr-hero-button
    .elementor-button-content-wrapper::after {
        transition: none !important;
    }

    html body .elementor-widget-button.mr-hero-button
    .elementor-button:hover,
    html body .elementor-widget-button.mr-hero-button
    .elementor-button:focus-visible,
    html body .elementor-widget-button.mr-hero-button
    .elementor-button:active {
        transform: none !important;
    }
}
/* =========================================================
MARKET RUSH — HERO-STYLE FORM SUBMIT BUTTON

Add this CSS class to the ENTIRE FORM WIDGET:
mr-hero-form-button

For Elementor:
Form widget > Advanced > CSS Classes

This targets the submit button inside the form.
========================================================= */

html body .mr-hero-form-button .elementor-button[type="submit"],
html body .mr-hero-form-button button[type="submit"].elementor-button,
html body .mr-hero-form-button .wpforms-submit,
html body .mr-hero-form-button .gform_button {
    position: relative !important;
    overflow: hidden !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-height: 50px !important;

    padding: 13px clamp(18px, 1.7vw, 28px) !important;

    border: 0 !important;
    border-radius: 999px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #d84d00 0%,
            #ff7824 100%
        ) !important;

    box-shadow:
        0 14px 30px rgba(216, 77, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;

    font-family: "Poppins", sans-serif !important;
    font-size: clamp(12px, 0.92vw, 15px) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;

    text-decoration: none !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease !important;
}

html body .mr-hero-form-button
.elementor-button[type="submit"]
.elementor-button-content-wrapper,
html body .mr-hero-form-button
button[type="submit"].elementor-button
.elementor-button-content-wrapper {
    position: relative !important;
    z-index: 2 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    gap: 10px !important;
}

html body .mr-hero-form-button
.elementor-button[type="submit"]
.elementor-button-content-wrapper::after,
html body .mr-hero-form-button
button[type="submit"].elementor-button
.elementor-button-content-wrapper::after {
    content: "→" !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    color: #ffffff !important;

    font-size: 1em !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    transform: translateX(0);
    transition: transform 0.25s ease !important;
}

html body .mr-hero-form-button
.elementor-button[type="submit"]
.elementor-button-icon,
html body .mr-hero-form-button
button[type="submit"].elementor-button
.elementor-button-icon {
    display: none !important;
}

html body .mr-hero-form-button
.elementor-button[type="submit"]::before,
html body .mr-hero-form-button
button[type="submit"].elementor-button::before {
    content: "" !important;

    position: absolute !important;
    z-index: 1 !important;

    top: -70% !important;
    bottom: -70% !important;
    left: -46% !important;

    width: 32% !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.34),
            transparent
        ) !important;

    transform: skewX(-20deg) !important;
    transition: left 0.65s cubic-bezier(.22, 1, .36, 1) !important;
}

html body .mr-hero-form-button .elementor-button[type="submit"]:hover,
html body .mr-hero-form-button .elementor-button[type="submit"]:focus-visible,
html body .mr-hero-form-button button[type="submit"].elementor-button:hover,
html body .mr-hero-form-button button[type="submit"].elementor-button:focus-visible,
html body .mr-hero-form-button .wpforms-submit:hover,
html body .mr-hero-form-button .gform_button:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #d84d00 0%,
            #ff7824 100%
        ) !important;

    box-shadow:
        0 18px 36px rgba(216, 77, 0, 0.31),
        inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;

    filter: brightness(1.035);
    transform: translateY(-3px) !important;
}

html body .mr-hero-form-button
.elementor-button[type="submit"]:hover::before,
html body .mr-hero-form-button
.elementor-button[type="submit"]:focus-visible::before,
html body .mr-hero-form-button
button[type="submit"].elementor-button:hover::before,
html body .mr-hero-form-button
button[type="submit"].elementor-button:focus-visible::before {
    left: 118% !important;
}

html body .mr-hero-form-button
.elementor-button[type="submit"]:hover
.elementor-button-content-wrapper::after,
html body .mr-hero-form-button
.elementor-button[type="submit"]:focus-visible
.elementor-button-content-wrapper::after,
html body .mr-hero-form-button
button[type="submit"].elementor-button:hover
.elementor-button-content-wrapper::after,
html body .mr-hero-form-button
button[type="submit"].elementor-button:focus-visible
.elementor-button-content-wrapper::after {
    transform: translateX(4px) !important;
}

html body .mr-hero-form-button .elementor-button[type="submit"]:active,
html body .mr-hero-form-button button[type="submit"].elementor-button:active,
html body .mr-hero-form-button .wpforms-submit:active,
html body .mr-hero-form-button .gform_button:active {
    transform: translateY(-1px) scale(0.99) !important;
}

@media (max-width: 1024px) {
    html body .mr-hero-form-button .elementor-button[type="submit"],
    html body .mr-hero-form-button button[type="submit"].elementor-button,
    html body .mr-hero-form-button .wpforms-submit,
    html body .mr-hero-form-button .gform_button {
        min-height: 50px !important;
        padding: 13px 24px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 767px) {
    html body .mr-hero-form-button .elementor-button[type="submit"],
    html body .mr-hero-form-button button[type="submit"].elementor-button,
    html body .mr-hero-form-button .wpforms-submit,
    html body .mr-hero-form-button .gform_button {
        min-height: 46px !important;
        padding: 11px 18px !important;
        font-size: 12px !important;
    }
}
/* =========================================================
MARKET RUSH — SOFT CREAM SECTION BACKGROUND

Add BOTH classes to any OUTER Elementor section/container:

mr-soft-cream-section mr-keep-background

This changes only the background.
Width, alignment, padding and content remain controlled in Elementor.
========================================================= */

html body.elementor-page .mr-soft-cream-section,
html body.elementor-page .e-con.e-parent.mr-soft-cream-section {
    background-color: #FAF6EE !important;

    background-image:
        radial-gradient(
            circle at 28% 72%,
            rgba(249, 196, 154, 0.24) 0%,
            rgba(249, 196, 154, 0.11) 18%,
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #FAF6EE 0%,
            #FAF6EE 100%
        ) !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
}

/* Keep Elementor child containers transparent so the background shows */
html body.elementor-page
.mr-soft-cream-section > .e-con-inner,
html body.elementor-page
.mr-soft-cream-section > .elementor-container {
    background-color: transparent !important;
    background-image: none !important;
}

/* Slightly softer glow on mobile */
@media (max-width: 767px) {
    html body.elementor-page .mr-soft-cream-section,
    html body.elementor-page .e-con.e-parent.mr-soft-cream-section {
        background-image:
            radial-gradient(
                circle at 34% 76%,
                rgba(249, 196, 154, 0.18) 0%,
                transparent 36%
            ),
            linear-gradient(
                180deg,
                #FAF6EE 0%,
                #FAF6EE 100%
            ) !important;
    }
}
/* SECTION BACKGROUND ONLY */
.mr-green-results-bg {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    #005a2f 0%,
    #005f31 28%,
    #0d6b33 58%,
    #3c7f3d 100%
  ) !important;
}

/* soft light glows */
.mr-green-results-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 14% 78%, rgba(0, 95, 49, 0.28) 0%, transparent 32%),
    radial-gradient(circle at 80% 18%, rgba(126, 180, 96, 0.16) 0%, transparent 30%),
    radial-gradient(circle at 92% 88%, rgba(255, 255, 255, 0.06) 0%, transparent 22%);
}

/* subtle grid overlay */
.mr-green-results-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 96px 96px;
}

/* keep all content above the background */
.mr-green-results-bg > .e-con-inner,
.mr-green-results-bg > .elementor-container,
.mr-green-results-bg > .elementor-widget-wrap,
.mr-green-results-bg > * {
  position: relative;
  z-index: 2;
}
/* =========================================
   MARKET RUSH — PREMIUM LIQUID GLASS CARDS
   Styling only
   Does NOT control width
========================================= */

.mr-proof-glass-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    /* keep width controlled by Elementor */
    min-height: 300px;

    padding: 38px 38px 34px;
    border-radius: 30px;

    /* stronger glass so cards don’t disappear */
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(250, 249, 246, 0.84) 42%,
            rgba(240, 248, 244, 0.76) 100%
        );

    border: 1px solid rgba(255, 255, 255, 0.82);

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

    box-shadow:
        0 22px 55px rgba(7, 29, 18, 0.18),
        0 8px 20px rgba(7, 29, 18, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -18px 30px rgba(255, 255, 255, 0.18);
}

/* soft top sheen */
.mr-proof-glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.16) 22%,
            rgba(255, 255, 255, 0.00) 46%
        );
}

/* subtle colour bloom */
.mr-proof-glass-card::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: auto -18% -28% auto;
    width: 78%;
    height: 78%;
    pointer-events: none;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(253, 117, 34, 0.10) 0%,
            rgba(253, 117, 34, 0.04) 32%,
            transparent 68%
        );
    filter: blur(18px);
}

/* make sure card content stays above the glass effects */
.mr-proof-glass-card > * {
    position: relative;
    z-index: 2;
}

/* number */
.mr-proof-glass-card .elementor-heading-title,
.mr-proof-glass-card h1,
.mr-proof-glass-card h2,
.mr-proof-glass-card h3,
.mr-proof-glass-card h4 {
    color: #14231C;
}

/* if the first heading inside each card is the number */
.mr-proof-glass-card .elementor-widget-heading:first-child .elementor-heading-title {
    color: #FD7522;
}

/* body text */
.mr-proof-glass-card p,
.mr-proof-glass-card .elementor-widget-text-editor {
    color: #64706B;
}

/* optional hover polish */
.mr-proof-glass-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 28px 70px rgba(7, 29, 18, 0.22),
        0 12px 28px rgba(7, 29, 18, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -20px 34px rgba(255, 255, 255, 0.20);
}

/* tablet */
@media (max-width: 1024px) {
    .mr-proof-glass-card {
        min-height: 260px;
        padding: 32px 28px 30px;
        border-radius: 26px;
    }
}

/* mobile */
@media (max-width: 767px) {
    .mr-proof-glass-card {
        min-height: 220px;
        padding: 26px 22px 24px;
        border-radius: 22px;
    }
}
/* =========================================================
MARKET RUSH — IMPROVED GLASS CARDS
Uses existing class: mr-proof-widget-card

Width, height, padding and positioning remain controlled
through Elementor.
========================================================= */

html body.elementor-page
.mr-green-results-bg.mr-proof-widget-scroll
.mr-proof-widget-card {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    /* Elementor still controls the card width */
    background:
        radial-gradient(
            circle at 12% 4%,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.38) 26%,
            transparent 52%
        ),
        radial-gradient(
            circle at 88% 90%,
            rgba(191, 247, 71, 0.10) 0%,
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(255, 255, 255, 0.76) 46%,
            rgba(238, 249, 242, 0.68) 100%
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: 30px !important;

    -webkit-backdrop-filter:
        blur(26px)
        saturate(160%)
        brightness(1.04) !important;

    backdrop-filter:
        blur(26px)
        saturate(160%)
        brightness(1.04) !important;

    box-shadow:
        0 32px 75px rgba(0, 35, 20, 0.22),
        0 12px 28px rgba(0, 35, 20, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 1px 0 0 rgba(255, 255, 255, 0.42),
        inset 0 -1px 0 rgba(255, 255, 255, 0.30) !important;
}

/* Curved liquid reflection */
html body.elementor-page
.mr-green-results-bg.mr-proof-widget-scroll
.mr-proof-widget-card::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: 0 !important;
    pointer-events: none !important;

    top: -32% !important;
    left: -18% !important;

    width: 92% !important;
    height: 72% !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(255, 255, 255, 0.26) 38%,
            transparent 72%
        ) !important;

    filter: blur(10px) !important;
    opacity: 0.76 !important;
    transform: rotate(-10deg) !important;
}

/* Soft lower colour refraction */
html body.elementor-page
.mr-green-results-bg.mr-proof-widget-scroll
.mr-proof-widget-card::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: 0 !important;
    pointer-events: none !important;

    right: -28% !important;
    bottom: -42% !important;

    width: 90% !important;
    height: 85% !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            rgba(253, 117, 34, 0.12) 0%,
            rgba(253, 117, 34, 0.04) 38%,
            transparent 70%
        ) !important;

    filter: blur(18px) !important;
}

/* Keep Elementor content above the glass layers */
html body.elementor-page
.mr-green-results-bg.mr-proof-widget-scroll
.mr-proof-widget-card > * {
    position: relative !important;
    z-index: 2 !important;
}

/* Clear, readable headings */
html body.elementor-page
.mr-green-results-bg.mr-proof-widget-scroll
.mr-proof-widget-card
.elementor-heading-title {
    color: #14231c !important;
    text-shadow: none !important;
}

/* Orange card number */
html body.elementor-page
.mr-green-results-bg.mr-proof-widget-scroll
.mr-proof-widget-card
.elementor-widget-heading:first-child
.elementor-heading-title {
    color: #fd7522 !important;
}

/* Clear body copy */
html body.elementor-page
.mr-green-results-bg.mr-proof-widget-scroll
.mr-proof-widget-card
.elementor-widget-text-editor,
html body.elementor-page
.mr-green-results-bg.mr-proof-widget-scroll
.mr-proof-widget-card
.elementor-widget-text-editor p {
    color: rgba(20, 35, 28, 0.58) !important;
    text-shadow: none !important;
}
/* =========================================================
   PROOF SECTION — LIGHTWEIGHT DIGITAL BACKGROUND
   Add at the bottom only
========================================================= */

html body.elementor-page
.mr-green-results-bg
.mr-proof-widget-sticky {
    isolation: isolate !important;

    background-image:
        radial-gradient(
            circle at 16% 78%,
            rgba(253,117,34,.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 82% 16%,
            rgba(191,247,71,.15),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #003d25 0%,
            #004d2b 45%,
            #176536 72%,
            #3f8243 100%
        ) !important;
}

/* Moving data grid and signal points */
html body.elementor-page
.mr-green-results-bg
.mr-proof-widget-sticky::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    inset: -90px !important;
    z-index: 0 !important;
    pointer-events: none !important;

    background-image:
        radial-gradient(
            circle,
            rgba(253,117,34,.65) 0 3px,
            transparent 4px
        ),
        radial-gradient(
            circle,
            rgba(191,247,71,.55) 0 3px,
            transparent 4px
        ),
        linear-gradient(
            rgba(255,255,255,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.045) 1px,
            transparent 1px
        ) !important;

    background-size:
        260px 210px,
        340px 270px,
        82px 82px,
        82px 82px !important;

    background-position:
        35px 25px,
        170px 110px,
        0 0,
        0 0 !important;

    opacity: .28;

    animation:
        mrProofDataGrid 24s linear infinite;
}

/* Floating digital-marketing indicator */
html body.elementor-page
.mr-green-results-bg
.mr-proof-widget-sticky::after {
    content: "SEO  •  PPC  •  CRO  •  ANALYTICS" !important;

    position: absolute !important;
    z-index: 0 !important;

    top: 9% !important;
    right: 6% !important;

    padding: 10px 15px !important;

    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 999px !important;

    color: rgba(255,255,255,.55) !important;

    background:
        rgba(255,255,255,.07) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14) !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;

    pointer-events: none !important;

    animation:
        mrProofMarketingFloat 7s ease-in-out infinite alternate;
}

@keyframes mrProofDataGrid {
    from {
        transform: translate3d(0,0,0);
    }

    to {
        transform: translate3d(82px,82px,0);
    }
}

@keyframes mrProofMarketingFloat {
    from {
        transform: translate3d(0,-5px,0);
        opacity: .55;
    }

    to {
        transform: translate3d(-14px,10px,0);
        opacity: .85;
    }
}

@media (max-width: 767px) {
    html body.elementor-page
    .mr-green-results-bg
    .mr-proof-widget-sticky::after {
        display: none !important;
    }

    html body.elementor-page
    .mr-green-results-bg
    .mr-proof-widget-sticky::before {
        opacity: .18;
        background-size:
            220px 180px,
            280px 230px,
            58px 58px,
            58px 58px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.elementor-page
    .mr-green-results-bg
    .mr-proof-widget-sticky::before,
    html body.elementor-page
    .mr-green-results-bg
    .mr-proof-widget-sticky::after {
        animation: none !important;
    }
}
/* =========================================================
   REMOVE PROOF SECTION GRIDS
   Keeps the coloured signal dots and marketing label
========================================================= */

/* Remove the older static grid on the outer container */
html body.elementor-page
.mr-green-results-bg::after {
    content: none !important;
    display: none !important;
}

/* Keep only the orange and lime signal dots */
html body.elementor-page
.mr-green-results-bg
.mr-proof-widget-sticky::before {
    background-image:
        radial-gradient(
            circle,
            rgba(253,117,34,.65) 0 3px,
            transparent 4px
        ),
        radial-gradient(
            circle,
            rgba(191,247,71,.55) 0 3px,
            transparent 4px
        ) !important;

    background-size:
        260px 210px,
        340px 270px !important;

    background-position:
        35px 25px,
        170px 110px !important;
}
/* =========================================================
   REMOVE ALL GRID AND DOT PATTERNS
   Keeps gradient, cards and marketing label
========================================================= */

html body.elementor-page
.mr-green-results-bg::after,

html body.elementor-page
.mr-green-results-bg
.mr-proof-widget-sticky::before,

html body.elementor-page
.mr-green-results-bg
.mr-green-results-surface::before {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    animation: none !important;
    opacity: 0 !important;
}
/* =========================================================
   PROOF SECTION — LIGHTWEIGHT DIGITAL MARKETING BACKGROUND
   ADD AT THE BOTTOM OF THE CURRENT CSS
   No grids, no extra HTML and no JavaScript
========================================================= */

/* Slowly moving premium green lighting */
html body.elementor-page
.mr-green-results-bg.mr-proof-widget-scroll
.mr-proof-widget-sticky {
    isolation: isolate !important;

    background-color: #003d25 !important;

    background-image:
        radial-gradient(
            circle at 14% 20%,
            rgba(253, 117, 34, 0.14) 0%,
            transparent 29%
        ),
        radial-gradient(
            circle at 84% 17%,
            rgba(191, 247, 71, 0.15) 0%,
            transparent 31%
        ),
        radial-gradient(
            circle at 72% 82%,
            rgba(255, 255, 255, 0.07) 0%,
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #003d25 0%,
            #004728 42%,
            #07502e 70%,
            #315f31 100%
        ) !important;

    background-repeat: no-repeat !important;

    background-size:
        125% 125%,
        130% 130%,
        120% 120%,
        100% 100% !important;

    animation:
        mrProofAmbientBackground 18s
        ease-in-out
        infinite
        alternate;
}

/* Allow decorative KPI cards behind the real cards */
html body.elementor-page
.mr-green-results-bg.mr-proof-widget-scroll
.mr-proof-widget-cards {
    isolation: isolate !important;
}

/* Keep the real cards above the decorative elements */
html body.elementor-page
.mr-green-results-bg.mr-proof-widget-scroll
.mr-proof-widget-card {
    z-index: 2 !important;
}

/* Floating ROAS dashboard asset */
html body.elementor-page
.mr-green-results-bg.mr-proof-widget-scroll
.mr-proof-widget-cards::before {
    content:
        "CAMPAIGN ROAS\A 4.7×   ↑ 36%" !important;

    white-space: pre !important;

    position: absolute !important;
    z-index: 1 !important;

    top: 13% !important;
    right: 5% !important;

    width: 155px !important;
    padding: 14px 16px !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.15) !important;

    border-radius: 18px !important;

    color: rgba(255, 255, 255, 0.76) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.11),
            rgba(255, 255, 255, 0.045)
        ) !important;

    box-shadow:
        0 18px 46px rgba(0, 30, 18, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.8 !important;
    letter-spacing: 0.07em !important;

    opacity: 0.68 !important;
    pointer-events: none !important;
    will-change: transform !important;

    animation:
        mrProofKpiFloatA 9s
        ease-in-out
        infinite
        alternate !important;
}

/* Floating lead-generation dashboard asset */
html body.elementor-page
.mr-green-results-bg.mr-proof-widget-scroll
.mr-proof-widget-cards::after {
    content:
        "QUALIFIED LEADS\A 1,428   ↑ 18%" !important;

    white-space: pre !important;

    position: absolute !important;
    z-index: 1 !important;

    right: 9% !important;
    bottom: 12% !important;

    width: 168px !important;
    padding: 14px 16px !important;

    border:
        1px solid
        rgba(191, 247, 71, 0.16) !important;

    border-radius: 18px !important;

    color: rgba(255, 255, 255, 0.72) !important;

    background:
        linear-gradient(
            145deg,
            rgba(0, 66, 37, 0.38),
            rgba(255, 255, 255, 0.055)
        ) !important;

    box-shadow:
        0 18px 46px rgba(0, 30, 18, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.11) !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.8 !important;
    letter-spacing: 0.07em !important;

    opacity: 0.58 !important;
    pointer-events: none !important;
    will-change: transform !important;

    animation:
        mrProofKpiFloatB 11s
        ease-in-out
        infinite
        alternate !important;
}

/* Background movement */
@keyframes mrProofAmbientBackground {
    from {
        background-position:
            0% 0%,
            100% 0%,
            70% 100%,
            center;
    }

    to {
        background-position:
            8% 7%,
            91% 8%,
            62% 91%,
            center;
    }
}

/* KPI floating movement */
@keyframes mrProofKpiFloatA {
    from {
        transform:
            translate3d(0, -5px, 0)
            rotate(-1deg);
    }

    to {
        transform:
            translate3d(-14px, 13px, 0)
            rotate(1deg);
    }
}

@keyframes mrProofKpiFloatB {
    from {
        transform:
            translate3d(5px, 8px, 0)
            rotate(1deg);
    }

    to {
        transform:
            translate3d(-11px, -12px, 0)
            rotate(-1deg);
    }
}

/* Hide extra dashboard assets on tablet/mobile */
@media (max-width: 1024px) {
    html body.elementor-page
    .mr-green-results-bg.mr-proof-widget-scroll
    .mr-proof-widget-cards::before,

    html body.elementor-page
    .mr-green-results-bg.mr-proof-widget-scroll
    .mr-proof-widget-cards::after {
        display: none !important;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    html body.elementor-page
    .mr-green-results-bg.mr-proof-widget-scroll
    .mr-proof-widget-sticky,

    html body.elementor-page
    .mr-green-results-bg.mr-proof-widget-scroll
    .mr-proof-widget-cards::before,

    html body.elementor-page
    .mr-green-results-bg.mr-proof-widget-scroll
    .mr-proof-widget-cards::after {
        animation: none !important;
    }
}
/* =========================================================
   FIX DIGITAL MARKETING ASSET POSITIONING
   Add underneath the current KPI/background code
========================================================= */

/* Keep the real card animation layout unchanged */
html body.elementor-page
.mr-green-results-bg.mr-proof-widget-scroll
.mr-proof-widget-cards {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: visible !important;
    pointer-events: none !important;
}

/* Correct the Campaign ROAS asset */
html body.elementor-page
.mr-green-results-bg.mr-proof-widget-scroll
.mr-proof-widget-cards::before {
    left: auto !important;
    right: 4% !important;
    top: 16% !important;
    bottom: auto !important;

    width: 180px !important;
    height: auto !important;
    min-height: 92px !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 18px !important;

    display: block !important;
    box-sizing: border-box !important;

    border-radius: 20px !important;

    background:
        linear-gradient(
            90deg,
            rgba(191,247,71,.55) 0 64%,
            rgba(255,255,255,.09) 64% 100%
        ) left calc(100% - 17px) /
        calc(100% - 36px) 3px no-repeat,

        radial-gradient(
            circle at 88% 12%,
            rgba(191,247,71,.15),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.055)
        ) !important;

    color: rgba(255,255,255,.78) !important;

    box-shadow:
        0 22px 55px rgba(0,25,15,.22),
        inset 0 1px 0 rgba(255,255,255,.18) !important;

    opacity: .82 !important;
}

/* Correct the Qualified Leads asset */
html body.elementor-page
.mr-green-results-bg.mr-proof-widget-scroll
.mr-proof-widget-cards::after {
    left: auto !important;
    right: 6% !important;
    top: auto !important;
    bottom: 8% !important;

    width: 190px !important;
    height: auto !important;
    min-height: 92px !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 18px !important;

    display: block !important;
    box-sizing: border-box !important;

    border-radius: 20px !important;

    background:
        linear-gradient(
            90deg,
            rgba(253,117,34,.62) 0 72%,
            rgba(255,255,255,.09) 72% 100%
        ) left calc(100% - 17px) /
        calc(100% - 36px) 3px no-repeat,

        radial-gradient(
            circle at 90% 10%,
            rgba(253,117,34,.14),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.05)
        ) !important;

    color: rgba(255,255,255,.76) !important;

    box-shadow:
        0 22px 55px rgba(0,25,15,.20),
        inset 0 1px 0 rgba(255,255,255,.17) !important;

    opacity: .78 !important;
}

/* Keep the real animated cards above the KPI assets */
html body.elementor-page
.mr-green-results-bg.mr-proof-widget-scroll
.mr-proof-widget-card {
    position: relative !important;
    z-index: 5 !important;
}

/* Prevent the KPI assets from touching the cards on smaller desktops */
@media (max-width: 1300px) {
    html body.elementor-page
    .mr-green-results-bg.mr-proof-widget-scroll
    .mr-proof-widget-cards::before {
        right: 2% !important;
        width: 160px !important;
        opacity: .62 !important;
    }

    html body.elementor-page
    .mr-green-results-bg.mr-proof-widget-scroll
    .mr-proof-widget-cards::after {
        right: 3% !important;
        width: 170px !important;
        opacity: .58 !important;
    }
}

/* Hide only the extra KPI assets on tablet/mobile */
@media (max-width: 1024px) {
    html body.elementor-page
    .mr-green-results-bg.mr-proof-widget-scroll
    .mr-proof-widget-cards::before,

    html body.elementor-page
    .mr-green-results-bg.mr-proof-widget-scroll
    .mr-proof-widget-cards::after {
        content: none !important;
        display: none !important;
    }
}/* End custom CSS */