/*
 * ZenMotion navigation 2026.
 *
 * A shared late layer for the homepage and three Elementor landing pages:
 * floating glass navigation, one coral action, compact mobile sheet, and
 * consistent button-label centring. Content and native Elementor controls stay
 * unchanged and editable.
 */

:root {
  --zen-nav-ink: #111214;
  --zen-nav-surface: rgba(24, 24, 27, .82);
  --zen-nav-surface-strong: rgba(17, 18, 20, .96);
  --zen-nav-text: rgba(255, 255, 255, .74);
  --zen-nav-white: #ffffff;
  --zen-nav-coral: #f05a3c;
  --zen-nav-coral-hover: #ff6a4c;
}

/* Floating shell. The outer sticky element remains full-width so Elementor's
 * spacer and anchor offsets continue to work; the inner becomes the glass UI. */
html body.elementor-page .zenmotion-native-header,
html body.elementor-page .zenmotion-native-header.elementor-sticky--active,
html body.elementor-page .zenmotion-native-header.elementor-sticky--effects {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: env(safe-area-inset-top, 0px) clamp(12px, 2.25vw, 32px) 10px !important;
  background: #000 !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body.elementor-page .zenmotion-native-header > .e-con-inner {
  position: relative !important;
  isolation: isolate;
  display: flex !important;
  box-sizing: border-box !important;
  width: min(100%, 1240px) !important;
  max-width: 1240px !important;
  min-height: 64px !important;
  margin-inline: auto !important;
  padding: 8px 10px 8px 16px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(16px, 2vw, 28px) !important;
  overflow: visible !important;
  background: var(--zen-nav-surface) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 42px rgba(0, 0, 0, .2) !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px) !important;
  backdrop-filter: saturate(180%) blur(24px) !important;
}

html body.elementor-page.elementor-page-11 .zenmotion-native-header > .e-con-inner {
  --container-max-width: 1240px !important;
  width: min(100%, 1240px) !important;
  max-width: 1240px !important;
  margin-inline: auto !important;
  padding: 8px 10px 8px 16px !important;
}

html body.elementor-page .zenmotion-native-header .zenmotion-logo {
  --width: 4rem !important;
  width: 4rem !important;
  max-width: 4rem !important;
  min-width: 4rem !important;
  flex: 0 0 4rem !important;
}

html body.elementor-page .zenmotion-native-header .zenmotion-logo :is(.elementor-widget-container, a) {
  display: flex !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}

html body.elementor-page .zenmotion-native-header .zenmotion-logo img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
}

/* Desktop navigation reads as one quiet segmented control with a single action. */
html body.elementor-page .zenmotion-native-header .zenmotion-native-nav {
  --width: auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--main {
  display: flex !important;
  justify-content: flex-end !important;
}

html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--main > .elementor-nav-menu {
  display: flex !important;
  padding: 4px !important;
  align-items: center !important;
  gap: 3px !important;
  background: rgba(255, 255, 255, .045) !important;
  border: 0 !important;
  border-radius: 999px !important;
}

html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--main .elementor-item {
  display: inline-flex !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 clamp(10px, .9vw, 14px) !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--zen-nav-text) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--zen-am-font-text, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  font-size: .76rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -.008em !important;
  text-align: center !important;
  text-transform: none !important;
  transition: color .18s ease, background-color .18s ease !important;
}

html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--main .elementor-item:is(:hover, :focus-visible, .is-current, .elementor-item-active) {
  color: var(--zen-nav-white) !important;
  background: rgba(255, 255, 255, .095) !important;
}

html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--main li:last-child {
  margin-left: 3px !important;
}

html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--main li:last-child .elementor-item,
html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--main li:last-child .elementor-item:is(:hover, :focus-visible, .is-current, .elementor-item-active) {
  padding-inline: 17px !important;
  color: #fff !important;
  background: var(--zen-nav-coral) !important;
  border-radius: 999px !important;
  font-weight: 620 !important;
}

html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--main li:last-child .elementor-item:hover {
  background: var(--zen-nav-coral-hover) !important;
}

html body.elementor-page .zenmotion-native-nav .elementor-item::after,
html body.elementor-page .zenmotion-e-nav a::after {
  display: none !important;
  content: none !important;
}

/* Keep the progress cue, but make it a quiet hairline inside the glass shell. */
html body.elementor-page .zenmotion-native-header .zenmotion-scroll-progress {
  position: absolute !important;
  right: 18px !important;
  bottom: 0 !important;
  left: 18px !important;
  z-index: 4 !important;
  width: auto !important;
  height: 1px !important;
  pointer-events: none !important;
}

html body.elementor-page .zenmotion-native-header .zenmotion-scroll-progress .elementor-scrolling-tracker-horizontal {
  width: 100% !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, .07) !important;
  border: 0 !important;
  border-radius: 999px !important;
}

html body.elementor-page .zenmotion-native-header .zenmotion-scroll-progress .current-progress {
  height: 1px !important;
  background: var(--zen-nav-coral) !important;
  border-radius: 999px !important;
}

/* Site-wide button contract: the glyph group is centred both ways. */
html body.elementor-page :is(.zenmotion-native-main, .zenmotion-seo-main, .zenmotion-native-footer, .zenmotion-seo-footer) .elementor-button {
  display: inline-flex !important;
  min-height: 44px !important;
  padding-right: 1.2rem !important;
  padding-left: 1.2rem !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  text-align: center !important;
  transition-property: color, background-color, border-color, transform, box-shadow !important;
}

html body.elementor-page :is(.zenmotion-native-main, .zenmotion-seo-main, .zenmotion-native-footer, .zenmotion-seo-footer) .elementor-button .elementor-button-content-wrapper {
  display: flex !important;
  width: 100% !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45rem !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

html body.elementor-page :is(.zenmotion-native-main, .zenmotion-seo-main, .zenmotion-native-footer, .zenmotion-seo-footer) .elementor-button .elementor-button-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

/* The user-called-out Continue Exploring stack: comfortable internal space,
 * deliberate separation, and the same centred label posture at every width. */
html body.elementor-page .zenmotion-seo-related > .e-con-inner {
  gap: .75rem !important;
}

html body.elementor-page .zenmotion-seo-related .elementor-button {
  min-height: 3.5rem !important;
  padding: .85rem 1.25rem !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Homepage service links already contain a trailing arrow. Remove the legacy
 * decorative prefix and turn the group into evenly padded compact surfaces. */
html body.elementor-page.elementor-page-11 #services .zenmotion-service-links > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: .75rem !important;
}

html body.elementor-page.elementor-page-11 #services .zenmotion-service-links .elementor-button,
html body.elementor-page.elementor-page-11 #services .zenmotion-service-links .elementor-button:hover {
  min-height: 3.5rem !important;
  padding: .85rem 1.2rem !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .07) !important;
  border: 0 !important;
  border-radius: 12px !important;
  text-align: center !important;
}

html body.elementor-page.elementor-page-11 #services .zenmotion-service-links .elementor-button::before {
  display: none !important;
  content: none !important;
}

html body.elementor-page.elementor-page-11 #reviews .zenmotion-reviews-intro .elementor-widget-button {
  --width: 100% !important;
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  justify-content: center !important;
  text-align: center !important;
}

html body.elementor-page :is(
  .zenmotion-native-header,
  .zenmotion-native-main,
  .zenmotion-seo-main,
  .zenmotion-native-footer,
  .zenmotion-seo-footer
) :is(a, button, [role="button"]):focus-visible {
  outline: 2px solid var(--zen-nav-coral) !important;
  outline-offset: 3px !important;
}

/* Elementor's button component carries its own focus declaration. Keep this
 * direct late rule more specific so page-to-page stylesheet differences cannot
 * replace the coral ring with a browser-default inset outline. */
html body.elementor-page .zenmotion-seo-main a.elementor-button:focus-visible,
html body.elementor-page .zenmotion-seo-main button.elementor-button:focus-visible,
html body.elementor-page .zenmotion-native-main a.elementor-button:focus-visible,
html body.elementor-page .zenmotion-native-main button.elementor-button:focus-visible,
html body.elementor-page .zenmotion-native-footer a.elementor-button:focus-visible,
html body.elementor-page .zenmotion-native-footer button.elementor-button:focus-visible,
html body.elementor-page .zenmotion-seo-footer a.elementor-button:focus-visible,
html body.elementor-page .zenmotion-seo-footer button.elementor-button:focus-visible {
  outline: 2px solid var(--zen-nav-coral) !important;
  outline-offset: 3px !important;
}

@media (min-width: 1025px) {
  html body.elementor-page .zenmotion-native-header > .e-con-inner {
    display: block !important;
  }

  html body.elementor-page .zenmotion-native-header .zenmotion-logo {
    position: absolute !important;
    top: 50% !important;
    left: 16px !important;
    z-index: 3 !important;
    transform: translateY(-50%) !important;
  }

  html body.elementor-page .zenmotion-native-header .zenmotion-native-nav,
  html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--main {
    width: 100% !important;
    max-width: none !important;
  }

  html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--main > .elementor-nav-menu {
    --zen-nav-action-width: 150px;
    display: grid !important;
    width: 100% !important;
    grid-template-columns: var(--zen-nav-action-width) minmax(12px, 1fr) repeat(6, max-content) minmax(12px, 1fr) var(--zen-nav-action-width) !important;
    align-items: center !important;
    justify-content: stretch !important;
  }

  html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--main > .elementor-nav-menu::before {
    display: block !important;
    width: var(--zen-nav-action-width) !important;
    height: 1px !important;
    grid-column: 1 !important;
    content: "" !important;
    pointer-events: none;
  }

  html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--main li:nth-child(1) { grid-column: 3 !important; }
  html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--main li:nth-child(2) { grid-column: 4 !important; }
  html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--main li:nth-child(3) { grid-column: 5 !important; }
  html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--main li:nth-child(4) { grid-column: 6 !important; }
  html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--main li:nth-child(5) { grid-column: 7 !important; }
  html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--main li:nth-child(6) { grid-column: 8 !important; }

  html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--main li:last-child {
    width: var(--zen-nav-action-width) !important;
    margin-left: 0 !important;
    grid-column: 10 !important;
  }

  html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--main li:last-child .elementor-item {
    width: 100% !important;
  }
}

@media (max-width: 1024px) {
  html body.elementor-page .zenmotion-native-header,
  html body.elementor-page .zenmotion-native-header.elementor-sticky--active,
  html body.elementor-page .zenmotion-native-header.elementor-sticky--effects {
    min-height: 0 !important;
    padding: env(safe-area-inset-top, 0px) 10px 8px !important;
  }

  html body.elementor-page .zenmotion-native-header > .e-con-inner {
    width: 100% !important;
    min-height: 60px !important;
    padding: 8px 8px 8px 14px !important;
    flex-flow: row nowrap !important;
    gap: 12px !important;
    border-radius: 18px !important;
  }

  html body.elementor-page.elementor-page-11 .zenmotion-native-header > .e-con-inner {
    --container-max-width: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: 8px 8px 8px 14px !important;
  }

  html body.elementor-page .zenmotion-native-header .zenmotion-logo {
    --width: 3.5rem !important;
    width: 3.5rem !important;
    max-width: 3.5rem !important;
    min-width: 3.5rem !important;
    flex-basis: 3.5rem !important;
  }

  html body.elementor-page .zenmotion-native-header .zenmotion-native-nav {
    --width: 44px !important;
    width: 44px !important;
    max-width: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
  }

  html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--main {
    display: none !important;
  }

  html body.elementor-page .zenmotion-native-nav .elementor-menu-toggle {
    display: grid !important;
    box-sizing: border-box !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    place-items: center !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .085) !important;
    border: 0 !important;
    border-radius: 14px !important;
  }

  html body.elementor-page .zenmotion-native-nav .elementor-menu-toggle svg {
    position: static !important;
    display: block;
    grid-area: 1 / 1 !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
  }

  html body.elementor-page .zenmotion-native-nav .elementor-menu-toggle:not(.elementor-active) .elementor-menu-toggle__icon--open,
  html body.elementor-page .zenmotion-native-nav .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--close {
    display: block !important;
  }

  html body.elementor-page .zenmotion-native-nav .elementor-menu-toggle:not(.elementor-active) .elementor-menu-toggle__icon--close,
  html body.elementor-page .zenmotion-native-nav .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--open {
    display: none !important;
  }

  html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--dropdown {
    position: fixed !important;
    top: calc(68px + env(safe-area-inset-top, 0px)) !important;
    right: 10px !important;
    left: 10px !important;
    z-index: 1001 !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 88px) !important;
    padding: 8px !important;
    overflow: auto !important;
    background: var(--zen-nav-surface-strong) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .38) !important;
    -webkit-backdrop-filter: saturate(180%) blur(26px) !important;
    backdrop-filter: saturate(180%) blur(26px) !important;
  }

  html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--dropdown > .elementor-nav-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--dropdown .elementor-item {
    display: flex !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 0 16px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    color: rgba(255, 255, 255, .78) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-family: var(--zen-am-font-text, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: -.012em !important;
    text-align: left !important;
    text-transform: none !important;
  }

  html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--dropdown .elementor-item:is(:hover, :focus-visible, .is-current, .elementor-item-active) {
    color: #fff !important;
    background: rgba(255, 255, 255, .08) !important;
  }

  html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--dropdown li:last-child {
    margin-top: 4px !important;
  }

  html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--dropdown li:last-child .elementor-item,
  html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--dropdown li:last-child .elementor-item:is(:hover, :focus-visible, .is-current, .elementor-item-active) {
    justify-content: center !important;
    color: #fff !important;
    background: var(--zen-nav-coral) !important;
    border-radius: 13px !important;
    font-weight: 620 !important;
    text-align: center !important;
  }

  html body.elementor-page .zenmotion-native-header .zenmotion-scroll-progress {
    right: 14px !important;
    left: 14px !important;
  }

  html body.elementor-page.elementor-page-11 #services .zenmotion-service-links > .e-con-inner {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  html body.elementor-page .zenmotion-native-header,
  html body.elementor-page .zenmotion-native-header > .e-con-inner,
  html body.elementor-page .zenmotion-native-nav .elementor-nav-menu--dropdown {
    background: #151517 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body.elementor-page .zenmotion-native-header,
  html body.elementor-page .zenmotion-native-header.elementor-sticky--active,
  html body.elementor-page .zenmotion-native-header.elementor-sticky--effects {
    background: #000 !important;
  }
}