/*
 * Healthy Empire Button System v1.1.4
 * Canonical direction: the original Healthy Empire rectangular CTA language.
 * - 0 radius
 * - orange primary / transparent secondary
 * - black horizontal wipe on hover
 * - square-cap horizontal arrow
 * - no instant background swap (prevents the orange hover flash)
 */
:root {
  --he-button-system-accent: #FC441A;
  --he-button-system-accent-hover: #DE3C17;
  --he-button-system-ink: #000000;
  --he-button-system-light: #FFFFFF;
  --he-button-system-ease: var(--gymful-motion-ease, cubic-bezier(.625,.05,0,1));
  --he-button-system-duration: .55s;
}

/* --------------------------------------------------------------------------
 * Canonical CTA family
 * ----------------------------------------------------------------------- */
.he-button,
.elementor-widget-healthy-empire-kickstart-stages .he-kickstart__cta,
.elementor-widget-healthy-empire-program-hero .he-program-hero__button,
.elementor-widget-healthy-empire-story-split .he-story-split__button,
.elementor-widget-healthy-empire-kickstart-journey .he-kickstart-journey__next,
.elementor-widget-healthy-empire-lead-capture .he-lead-submit {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  min-height: 58px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-decoration: none !important;
  font-family: "Okta Neue", Arial, sans-serif !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  box-sizing: border-box;
  transform: none !important;
  transition: color .28s ease, border-color .28s ease !important;
}

/* The wipe is the only background animation. Never swap the host background
 * on hover: doing that before the wipe arrives creates the visible 'flash'. */
.he-button::before,
.elementor-widget-healthy-empire-kickstart-stages .he-kickstart__cta::before,
.elementor-widget-healthy-empire-program-hero .he-program-hero__button::before,
.elementor-widget-healthy-empire-story-split .he-story-split__button::before,
.elementor-widget-healthy-empire-kickstart-journey .he-kickstart-journey__next::before,
.elementor-widget-healthy-empire-lead-capture .he-lead-submit::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: 0 !important;
  background: var(--he-button-system-ink) !important;
  transform: translate3d(-101%,0,0) !important;
  opacity: 1 !important;
  transition: transform var(--he-button-system-duration) var(--he-button-system-ease) !important;
  pointer-events: none !important;
}

.he-button:hover::before,
.he-button:focus-visible::before,
.elementor-widget-healthy-empire-kickstart-stages .he-kickstart__cta:hover::before,
.elementor-widget-healthy-empire-kickstart-stages .he-kickstart__cta:focus-visible::before,
.elementor-widget-healthy-empire-program-hero .he-program-hero__button:hover::before,
.elementor-widget-healthy-empire-program-hero .he-program-hero__button:focus-visible::before,
.elementor-widget-healthy-empire-story-split .he-story-split__button:hover::before,
.elementor-widget-healthy-empire-story-split .he-story-split__button:focus-visible::before,
.elementor-widget-healthy-empire-kickstart-journey .he-kickstart-journey__next:hover::before,
.elementor-widget-healthy-empire-kickstart-journey .he-kickstart-journey__next:focus-visible::before,
.elementor-widget-healthy-empire-lead-capture .he-lead-submit:hover::before,
.elementor-widget-healthy-empire-lead-capture .he-lead-submit:focus-visible::before {
  transform: translate3d(0,0,0) !important;
}

/* Keep all actual label/content above the wipe. */
.he-button > *,
.elementor-widget-healthy-empire-kickstart-stages .he-kickstart__cta > *,
.elementor-widget-healthy-empire-program-hero .he-program-hero__button > *,
.elementor-widget-healthy-empire-story-split .he-story-split__button > *,
.elementor-widget-healthy-empire-kickstart-journey .he-kickstart-journey__next > *,
.elementor-widget-healthy-empire-lead-capture .he-lead-submit > * {
  position: relative;
  z-index: 1;
}

/* Primary: orange base stays orange while the black wipe moves over it. */
.he-button--primary,
.elementor-widget-healthy-empire-kickstart-stages .he-kickstart__cta,
.elementor-widget-healthy-empire-program-hero .he-program-hero__button--primary,
.elementor-widget-healthy-empire-story-split .he-story-split__button--primary,
.elementor-widget-healthy-empire-kickstart-journey .he-kickstart-journey__next,
.elementor-widget-healthy-empire-lead-capture .he-lead-submit {
  border: 1px solid var(--he-button-system-accent) !important;
  background: var(--he-button-system-accent) !important;
  background-color: var(--he-button-system-accent) !important;
  color: var(--he-button-system-light) !important;
}

/* Preserve the base background on hover; the ::before layer creates the state. */
.he-button--primary:hover,
.he-button--primary:focus-visible,
.elementor-widget-healthy-empire-kickstart-stages .he-kickstart__cta:hover,
.elementor-widget-healthy-empire-kickstart-stages .he-kickstart__cta:focus-visible,
.elementor-widget-healthy-empire-program-hero .he-program-hero__button--primary:hover,
.elementor-widget-healthy-empire-program-hero .he-program-hero__button--primary:focus-visible,
.elementor-widget-healthy-empire-story-split .he-story-split__button--primary:hover,
.elementor-widget-healthy-empire-story-split .he-story-split__button--primary:focus-visible,
.elementor-widget-healthy-empire-kickstart-journey .he-kickstart-journey__next:hover,
.elementor-widget-healthy-empire-kickstart-journey .he-kickstart-journey__next:focus-visible,
.elementor-widget-healthy-empire-lead-capture .he-lead-submit:hover,
.elementor-widget-healthy-empire-lead-capture .he-lead-submit:focus-visible {
  background: var(--he-button-system-accent) !important;
  background-color: var(--he-button-system-accent) !important;
  color: var(--he-button-system-light) !important;
  border-color: var(--he-button-system-accent) !important;
  transform: none !important;
}

/* Secondary: black outline / transparent base, black wipe, white content on hover. */
.he-button--secondary,
.elementor-widget-healthy-empire-program-hero .he-program-hero__button--secondary,
.elementor-widget-healthy-empire-story-split .he-story-split__button--secondary {
  border: 1px solid var(--he-button-system-ink) !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--he-button-system-ink) !important;
}

.he-button--secondary:hover,
.he-button--secondary:focus-visible,
.elementor-widget-healthy-empire-program-hero .he-program-hero__button--secondary:hover,
.elementor-widget-healthy-empire-program-hero .he-program-hero__button--secondary:focus-visible,
.elementor-widget-healthy-empire-story-split .he-story-split__button--secondary:hover,
.elementor-widget-healthy-empire-story-split .he-story-split__button--secondary:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--he-button-system-light) !important;
  border-color: var(--he-button-system-ink) !important;
}

/* --------------------------------------------------------------------------
 * Canonical arrow
 * ----------------------------------------------------------------------- */
/* Hide component-specific diagonal/rounded arrow variants. */
.he-button > svg,
.he-button > .he-arrow,
.he-button > span[aria-hidden="true"],
.elementor-widget-healthy-empire-kickstart-stages .he-kickstart__cta > svg,
.elementor-widget-healthy-empire-program-hero .he-program-hero__button-arrow,
.elementor-widget-healthy-empire-story-split .he-story-split__arrow,
.elementor-widget-healthy-empire-kickstart-journey .he-kickstart-journey__next > svg,
.elementor-widget-healthy-empire-lead-capture .he-lead-submit__arrow {
  display: none !important;
}

.he-button::after,
.elementor-widget-healthy-empire-kickstart-stages .he-kickstart__cta::after,
.elementor-widget-healthy-empire-program-hero .he-program-hero__button::after,
.elementor-widget-healthy-empire-story-split .he-story-split__button::after,
.elementor-widget-healthy-empire-kickstart-journey .he-kickstart-journey__next::after,
.elementor-widget-healthy-empire-lead-capture .he-lead-submit::after {
  content: "" !important;
  position: relative !important;
  z-index: 1 !important;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 16h20M18 9l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 16h20M18 9l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat !important;
  transform: translate3d(0,0,0) !important;
  transition: transform .45s var(--he-button-system-ease) !important;
  pointer-events: none !important;
}

.he-button:hover::after,
.he-button:focus-visible::after,
.elementor-widget-healthy-empire-kickstart-stages .he-kickstart__cta:hover::after,
.elementor-widget-healthy-empire-kickstart-stages .he-kickstart__cta:focus-visible::after,
.elementor-widget-healthy-empire-program-hero .he-program-hero__button:hover::after,
.elementor-widget-healthy-empire-program-hero .he-program-hero__button:focus-visible::after,
.elementor-widget-healthy-empire-story-split .he-story-split__button:hover::after,
.elementor-widget-healthy-empire-story-split .he-story-split__button:focus-visible::after,
.elementor-widget-healthy-empire-kickstart-journey .he-kickstart-journey__next:hover::after,
.elementor-widget-healthy-empire-kickstart-journey .he-kickstart-journey__next:focus-visible::after,
.elementor-widget-healthy-empire-lead-capture .he-lead-submit:hover::after,
.elementor-widget-healthy-empire-lead-capture .he-lead-submit:focus-visible::after {
  transform: translate3d(5px,0,0) !important;
}

/* Lead Capture's invisible native submit must remain invisible and clickable logic stays untouched. */
.elementor-widget-healthy-empire-lead-capture .he-lead-submit__real {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --------------------------------------------------------------------------
 * Verhalen + Events card/navigation arrows
 * These are not full CTAs, so retain their card/link layout while normalising
 * the visual arrow language and movement.
 * ----------------------------------------------------------------------- */
.hev2-card__arrow,
.he-event-card__arrow {
  display: inline-grid !important;
  place-items: center !important;
  width: 22px;
  height: 22px;
  color: inherit;
}

.hev2-card__arrow > svg,
.he-event-card__arrow > svg {
  display: none !important;
}

.hev2-card__arrow::after,
.he-event-card__arrow::after {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 16h20M18 9l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 16h20M18 9l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translate3d(0,0,0);
  transition: transform .45s var(--he-button-system-ease);
}

.hev2-card > a:hover .hev2-card__arrow::after,
.hev2-card > a:focus-visible .hev2-card__arrow::after,
.he-event-card > a:hover .he-event-card__arrow::after,
.he-event-card > a:focus-visible .he-event-card__arrow::after {
  transform: translate3d(5px,0,0);
}

/* Verhalen pagination/filter controls: square, same type language. Keep their
 * functional selected states; don't force a CTA wipe on filter chips. */
.hev2-pagination a,
.hev2-pagination span,
.hev2-filters a,
.hev2-filters button,
.hev2-filter,
.hev2-filter-button,
.he-events-filters a,
.he-events-filters button,
.he-events-filter,
.he-events-filter-button {
  border-radius: 0 !important;
  font-family: "Okta Neue", Arial, sans-serif !important;
}

.hev2-pagination__next {
  font-size: 0 !important;
}
.hev2-pagination__next::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 16h20M18 9l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 16h20M18 9l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
}



/* --------------------------------------------------------------------------
 * 5F Method Experience
 *
 * The 5F widget already renders the exact primitives we need:
 * .he-5f__button-fill, .he-5f__button-label and .he-5f__button-icon.
 * Do NOT add an extra ::before wipe here. Instead normalise those native
 * primitives into the same compact rectangular CTA language used elsewhere.
 * This avoids the previous double-animation/layout collision.
 * ----------------------------------------------------------------------- */
.elementor-widget-healthy-empire-5f-method-experience .he-5f__buttons {
  width: min(100%, 340px) !important;
  max-width: 340px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  justify-self: end !important;
}

.elementor-widget-healthy-empire-5f-method-experience .he-5f__button {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 58px !important;
  height: 58px !important;
  padding: 0 22px !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  text-decoration: none !important;
  font-family: "Okta Neue", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transform: none !important;
}

.elementor-widget-healthy-empire-5f-method-experience .he-5f__button--primary {
  background: var(--he-button-system-accent) !important;
  background-color: var(--he-button-system-accent) !important;
  border: 1px solid var(--he-button-system-accent) !important;
  color: var(--he-button-system-light) !important;
}

.elementor-widget-healthy-empire-5f-method-experience .he-5f__button--secondary {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  color: var(--he-button-system-light) !important;
}

.elementor-widget-healthy-empire-5f-method-experience .he-5f__button-fill {
  display: block !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transform: translate3d(-101%,0,0) !important;
  transform-origin: left center !important;
  transition: transform var(--he-button-system-duration) var(--he-button-system-ease) !important;
}

.elementor-widget-healthy-empire-5f-method-experience .he-5f__button--primary .he-5f__button-fill {
  background: var(--he-button-system-ink) !important;
}

.elementor-widget-healthy-empire-5f-method-experience .he-5f__button--secondary .he-5f__button-fill {
  background: var(--he-button-system-accent) !important;
}

.elementor-widget-healthy-empire-5f-method-experience .he-5f__button:hover .he-5f__button-fill,
.elementor-widget-healthy-empire-5f-method-experience .he-5f__button:focus-visible .he-5f__button-fill {
  transform: translate3d(0,0,0) !important;
}

.elementor-widget-healthy-empire-5f-method-experience .he-5f__button:hover,
.elementor-widget-healthy-empire-5f-method-experience .he-5f__button:focus-visible {
  transform: none !important;
  color: var(--he-button-system-light) !important;
}

.elementor-widget-healthy-empire-5f-method-experience .he-5f__button-label,
.elementor-widget-healthy-empire-5f-method-experience .he-5f__button-icon {
  position: relative !important;
  z-index: 1 !important;
}

.elementor-widget-healthy-empire-5f-method-experience .he-5f__button-label {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.elementor-widget-healthy-empire-5f-method-experience .he-5f__button-icon {
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 16h20M18 9l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 16h20M18 9l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat !important;
  transform: translate3d(0,0,0) !important;
  transition: transform .45s var(--he-button-system-ease) !important;
}

.elementor-widget-healthy-empire-5f-method-experience .he-5f__button-icon svg {
  display: none !important;
}

.elementor-widget-healthy-empire-5f-method-experience .he-5f__button:hover .he-5f__button-icon,
.elementor-widget-healthy-empire-5f-method-experience .he-5f__button:focus-visible .he-5f__button-icon {
  transform: translate3d(5px,0,0) !important;
}

.elementor-widget-healthy-empire-5f-method-experience .he-5f__button:focus-visible {
  outline: 2px solid var(--he-button-system-accent) !important;
  outline-offset: 3px !important;
}

@media (max-width: 767px) {
  .elementor-widget-healthy-empire-5f-method-experience .he-5f__buttons {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  .elementor-widget-healthy-empire-5f-method-experience .he-5f__button {
    min-height: 54px !important;
    height: 54px !important;
    padding: 0 18px !important;
    gap: 18px !important;
    font-size: 14px !important;
  }

  .elementor-widget-healthy-empire-5f-method-experience .he-5f__button-label {
    white-space: normal !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-widget-healthy-empire-5f-method-experience .he-5f__button-fill,
  .elementor-widget-healthy-empire-5f-method-experience .he-5f__button-icon {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
 * Focus + responsive
 * ----------------------------------------------------------------------- */
.he-button:focus-visible,
.elementor-widget-healthy-empire-kickstart-stages .he-kickstart__cta:focus-visible,
.elementor-widget-healthy-empire-program-hero .he-program-hero__button:focus-visible,
.elementor-widget-healthy-empire-story-split .he-story-split__button:focus-visible,
.elementor-widget-healthy-empire-kickstart-journey .he-kickstart-journey__next:focus-visible,
.elementor-widget-healthy-empire-lead-capture .he-lead-submit:focus-visible {
  outline: 2px solid var(--he-button-system-accent) !important;
  outline-offset: 3px !important;
}

@media (max-width: 767px) {
  .he-button,
  .elementor-widget-healthy-empire-kickstart-stages .he-kickstart__cta,
  .elementor-widget-healthy-empire-program-hero .he-program-hero__button,
  .elementor-widget-healthy-empire-story-split .he-story-split__button,
  .elementor-widget-healthy-empire-kickstart-journey .he-kickstart-journey__next,
  .elementor-widget-healthy-empire-lead-capture .he-lead-submit {
    min-height: 54px;
    padding-left: 18px;
    padding-right: 18px;
    gap: 18px;
    font-size: 14px;
  }

  .he-button::after,
  .elementor-widget-healthy-empire-kickstart-stages .he-kickstart__cta::after,
  .elementor-widget-healthy-empire-program-hero .he-program-hero__button::after,
  .elementor-widget-healthy-empire-story-split .he-story-split__button::after,
  .elementor-widget-healthy-empire-kickstart-journey .he-kickstart-journey__next::after,
  .elementor-widget-healthy-empire-lead-capture .he-lead-submit::after {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .he-button::before,
  .he-button::after,
  .elementor-widget-healthy-empire-kickstart-stages .he-kickstart__cta::before,
  .elementor-widget-healthy-empire-kickstart-stages .he-kickstart__cta::after,
  .elementor-widget-healthy-empire-program-hero .he-program-hero__button::before,
  .elementor-widget-healthy-empire-program-hero .he-program-hero__button::after,
  .elementor-widget-healthy-empire-story-split .he-story-split__button::before,
  .elementor-widget-healthy-empire-story-split .he-story-split__button::after,
  .elementor-widget-healthy-empire-kickstart-journey .he-kickstart-journey__next::before,
  .elementor-widget-healthy-empire-kickstart-journey .he-kickstart-journey__next::after,
  .elementor-widget-healthy-empire-lead-capture .he-lead-submit::before,
  .elementor-widget-healthy-empire-lead-capture .he-lead-submit::after,
  .hev2-card__arrow::after,
  .he-event-card__arrow::after {
    transition: none !important;
  }
}