/*
 * Eleventy Motion v12
 * Only the geometry required by the original parallax/stack design lives here.
 * Colors, typography, spacing, cards and content remain owned by the original theme.
 */
:root {
  --elv-vh: 100vh;
}

@supports (height: 100svh) {
  :root { --elv-vh: 100svh; }
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

body {
  -webkit-text-size-adjust: 100%;
}

/* Every stack has exactly one viewport-sized stage. GSAP owns only transforms. */
.elv-motion-v12 .scroll-section.elv-motion-stack,
.elv-motion-v12 .scroll-section.elv-motion-stack > .wrapper,
.elv-motion-v12 .scroll-section.elv-motion-stack > .wrapper > .list {
  position: relative !important;
  width: 100% !important;
  height: var(--elv-stage-h, var(--elv-vh)) !important;
  min-height: var(--elv-stage-h, var(--elv-vh)) !important;
  max-height: var(--elv-stage-h, var(--elv-vh)) !important;
  overflow: hidden !important;
  transform: none !important;
}

.elv-motion-v12 .scroll-section.elv-motion-stack > .wrapper > .item,
.elv-motion-v12 .scroll-section.elv-motion-stack > .wrapper > .list > .item {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: var(--elv-stage-h, var(--elv-vh)) !important;
  min-height: var(--elv-stage-h, var(--elv-vh)) !important;
  max-height: var(--elv-stage-h, var(--elv-vh)) !important;
  overflow: hidden !important;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Homepage services keep their original card design and viewport centering. */
.elv-motion-v12 .at-service-area,
.elv-motion-v12 .at-service-area .scroll-section.elv-motion-stack,
.elv-motion-v12 .at-service-area .scroll-section.elv-motion-stack > .wrapper,
.elv-motion-v12 .at-service-area .scroll-section.elv-motion-stack > .wrapper > .item {
  overflow: hidden !important;
}

.elv-motion-v12 .at-service-area .scroll-section.elv-motion-stack > .wrapper > .item > .container {
  width: 100% !important;
  height: var(--elv-stage-h, var(--elv-vh)) !important;
  min-height: var(--elv-stage-h, var(--elv-vh)) !important;
  max-height: var(--elv-stage-h, var(--elv-vh)) !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

/* Process cards stay inside the stage without changing their visual treatment. */
.elv-motion-v12 .process-scroll.elv-motion-stack > .wrapper > .item {
  display: flex !important;
  align-items: center !important;
  padding-block: clamp(12px, 2.2vh, 26px) !important;
}

.elv-motion-v12 .process-scroll.elv-motion-stack .process-card,
.elv-motion-v12 .process-scroll.elv-motion-stack .es-process-card {
  width: 100% !important;
  max-height: calc(var(--elv-vh) - clamp(24px, 4.4vh, 52px)) !important;
  overflow: hidden !important;
}

/* Testimonial stack is nested in a pinned two-column section. */
.elv-motion-v12 .section-fix.elv-motion-pin {
  min-height: var(--elv-stage-h, var(--elv-vh)) !important;
  overflow: hidden !important;
}

.elv-motion-v12 .testimonial-scroll-section.elv-motion-stack,
.elv-motion-v12 .testimonial-scroll-section.elv-motion-stack > .wrapper,
.elv-motion-v12 .testimonial-scroll-section.elv-motion-stack > .wrapper > .list {
  height: clamp(320px, calc(var(--elv-vh) - 150px), 620px) !important;
  min-height: clamp(320px, calc(var(--elv-vh) - 150px), 620px) !important;
  max-height: clamp(320px, calc(var(--elv-vh) - 150px), 620px) !important;
}

.elv-motion-v12 .testimonial-scroll-section.elv-motion-stack > .wrapper > .list > .item {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}

/* Rounded layers always clip together while they transform. */
.elv-motion-v12 .service-lava-card,
.elv-motion-v12 .service-frame-card,
.elv-motion-v12 .service-frame-card > a,
.elv-motion-v12 .service-picture,
.elv-motion-v12 .process-card,
.elv-motion-v12 .process-card__img-wrap,
.elv-motion-v12 .es-process-card,
.elv-motion-v12 .es-process-media,
.elv-motion-v12 .testimonial-cart-wrap {
  background-clip: padding-box;
  isolation: isolate;
}

.elv-motion-v12 .service-lava-card,
.elv-motion-v12 .service-frame-card,
.elv-motion-v12 .service-frame-card > a,
.elv-motion-v12 .service-picture,
.elv-motion-v12 .process-card,
.elv-motion-v12 .process-card__img-wrap,
.elv-motion-v12 .es-process-card,
.elv-motion-v12 .es-process-media,
.elv-motion-v12 .testimonial-cart-wrap {
  overflow: hidden !important;
}

.elv-motion-v12 .scene,
.elv-motion-v12 .scene-y {
  overflow: hidden;
  touch-action: pan-y;
}

.elv-motion-v12 .scene [data-depth],
.elv-motion-v12 .scene-y [data-depth],
.elv-motion-v12 .service-parallax-img,
.elv-motion-v12 .process-card__img-wrap img,
.elv-motion-v12 .es-process-media img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media (max-width: 991.98px) {
  .elv-motion-v12 .section-fix.elv-motion-pin {
    padding-top: clamp(54px, 8vh, 84px) !important;
    padding-bottom: clamp(40px, 6vh, 70px) !important;
  }

  .elv-motion-v12 .testimonial-scroll-section.elv-motion-stack,
  .elv-motion-v12 .testimonial-scroll-section.elv-motion-stack > .wrapper,
  .elv-motion-v12 .testimonial-scroll-section.elv-motion-stack > .wrapper > .list {
    height: clamp(280px, calc(var(--elv-vh) - 320px), 520px) !important;
    min-height: clamp(280px, calc(var(--elv-vh) - 320px), 520px) !important;
    max-height: clamp(280px, calc(var(--elv-vh) - 320px), 520px) !important;
  }
}

@media (max-width: 767.98px) {
  /* Same parallax engine on mobile; only dimensions are fitted to the viewport. */
  .elv-motion-v12 .at-service-area .scroll-section.elv-motion-stack > .wrapper > .item > .container {
    padding-top: max(78px, calc(env(safe-area-inset-top) + 64px)) !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }

  .elv-motion-v12 .at-service-area .scroll-section.elv-motion-stack .service-lava-card {
    max-height: calc(var(--elv-vh) - 24px) !important;
  }

  .elv-motion-v12 .process-scroll.elv-motion-stack > .wrapper > .item {
    padding: 10px 0 max(18px, env(safe-area-inset-bottom)) !important;
  }

  .elv-motion-v12 .process-scroll.elv-motion-stack .process-card,
  .elv-motion-v12 .process-scroll.elv-motion-stack .es-process-card {
    max-height: calc(var(--elv-vh) - 28px) !important;
  }

  .elv-motion-v12 .process-scroll.elv-motion-stack .process-card__img-wrap,
  .elv-motion-v12 .process-scroll.elv-motion-stack .es-process-media {
    max-height: min(205px, 25svh) !important;
  }

  .elv-motion-v12 .section-fix.elv-motion-pin {
    padding-top: max(48px, env(safe-area-inset-top)) !important;
    padding-bottom: max(30px, env(safe-area-inset-bottom)) !important;
  }

  .elv-motion-v12 .section-fix.elv-motion-pin .section-title-pin {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 24px !important;
  }

  .elv-motion-v12 .testimonial-scroll-section.elv-motion-stack,
  .elv-motion-v12 .testimonial-scroll-section.elv-motion-stack > .wrapper,
  .elv-motion-v12 .testimonial-scroll-section.elv-motion-stack > .wrapper > .list {
    height: clamp(250px, calc(var(--elv-vh) - 300px), 420px) !important;
    min-height: clamp(250px, calc(var(--elv-vh) - 300px), 420px) !important;
    max-height: clamp(250px, calc(var(--elv-vh) - 300px), 420px) !important;
  }
}

@media (max-width: 390px), (max-height: 670px) and (max-width: 767.98px) {
  .elv-motion-v12 .at-service-area .scroll-section.elv-motion-stack > .wrapper > .item > .container {
    padding-top: max(66px, calc(env(safe-area-inset-top) + 54px)) !important;
    padding-bottom: 16px !important;
  }

  .elv-motion-v12 .process-scroll.elv-motion-stack .process-card,
  .elv-motion-v12 .process-scroll.elv-motion-stack .es-process-card {
    max-height: calc(var(--elv-vh) - 20px) !important;
  }

  .elv-motion-v12 .testimonial-scroll-section.elv-motion-stack,
  .elv-motion-v12 .testimonial-scroll-section.elv-motion-stack > .wrapper,
  .elv-motion-v12 .testimonial-scroll-section.elv-motion-stack > .wrapper > .list {
    height: clamp(230px, calc(var(--elv-vh) - 270px), 360px) !important;
    min-height: clamp(230px, calc(var(--elv-vh) - 270px), 360px) !important;
    max-height: clamp(230px, calc(var(--elv-vh) - 270px), 360px) !important;
  }
}


/* Shared parent-pin model: identical geometry to the working testimonial deck. */
.elv-motion-v12 .elv-shared-pin-section.elv-motion-pin {
  overflow: hidden !important;
  isolation: isolate;
}

.elv-motion-v12 .elv-shared-pin-section .elv-shared-card-stack.elv-motion-stack {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

.elv-motion-v12 .elv-shared-pin-section .elv-shared-card-stack.elv-motion-stack,
.elv-motion-v12 .elv-shared-pin-section .elv-shared-card-stack.elv-motion-stack > .wrapper,
.elv-motion-v12 .elv-shared-pin-section .elv-shared-card-stack.elv-motion-stack > .wrapper > .list {
  height: var(--elv-stage-h, var(--elv-vh)) !important;
  min-height: var(--elv-stage-h, var(--elv-vh)) !important;
  max-height: var(--elv-stage-h, var(--elv-vh)) !important;
}

.elv-motion-v12 .elv-shared-pin-section .elv-shared-card-stack.elv-motion-stack > .wrapper > .item,
.elv-motion-v12 .elv-shared-pin-section .elv-shared-card-stack.elv-motion-stack > .wrapper > .list > .item {
  height: var(--elv-stage-h, var(--elv-vh)) !important;
  min-height: var(--elv-stage-h, var(--elv-vh)) !important;
  max-height: var(--elv-stage-h, var(--elv-vh)) !important;
}

/* The active/last card must remain visible when the parent pin releases. */
.elv-motion-v12 .elv-shared-card-stack .item.is-current,
.elv-motion-v12 .elv-shared-card-stack .item:last-child.is-current {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Prevent pseudo-elements or legacy spacer rules from creating an empty tail. */
.elv-motion-v12 .elv-shared-card-stack::after,
.elv-motion-v12 .elv-shared-card-stack > .wrapper::after,
.elv-motion-v12 .elv-shared-card-stack > .wrapper > .list::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 767.98px) {
  .elv-motion-v12 .elv-shared-pin-section.elv-motion-pin {
    min-height: var(--elv-stage-h, var(--elv-vh)) !important;
  }
}


/* v7 compositor profile: only the visible and incoming cards are promoted. */
.elv-motion-v12 .scroll-section.elv-motion-stack .item {
  will-change: auto;
  transform-style: flat;
}

.elv-motion-v12 .scroll-section.elv-motion-stack .item.is-current,
.elv-motion-v12 .scroll-section.elv-motion-stack .item.is-next {
  will-change: transform;
}

/* These selectors keep the original service centering even while ScrollTrigger
   temporarily reparents the pin on WebKit/Retina devices. */
.elv-motion-v12 .elv-services-stack-pin .elv-shared-card-stack.elv-motion-stack > .wrapper > .item > .container {
  width: 100% !important;
  height: var(--elv-stage-h, var(--elv-vh)) !important;
  min-height: var(--elv-stage-h, var(--elv-vh)) !important;
  max-height: var(--elv-stage-h, var(--elv-vh)) !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

.elv-motion-v12 .elv-shared-pin-section.elv-motion-pin {
  contain: paint;
}

/* Retina MacBooks can blank very large 3D textures. Keep the same motion in
   two-dimensional compositor layers and render only nearby cards. */
.elv-retina-mac .elv-shared-card-stack .item,
.elv-retina-mac .elv-shared-card-stack .service-lava-card,
.elv-retina-mac .elv-shared-card-stack .service-frame-card,
.elv-retina-mac .elv-shared-card-stack .es-process-card {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  transform-style: flat !important;
}

.elv-retina-mac .elv-shared-card-stack .item:not(.is-near) {
  will-change: auto !important;
}

@media (min-width: 992px) and (max-height: 900px) {
  .elv-motion-v12 .elv-services-stack-pin .service-lava-card {
    max-height: calc(var(--elv-vh) - 18px) !important;
  }

  .elv-motion-v12 .elv-process-stack-pin .es-process-card,
  .elv-motion-v12 .elv-process-stack-pin .process-card {
    max-height: calc(var(--elv-vh) - 26px) !important;
  }
}

/* Preserve the original section surface if Safari reparents the pinned stage. */
.elv-motion-v12 .elv-services-stack-pin {
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 153, 0, 0.14), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(240, 70, 14, 0.08), transparent 30%),
    radial-gradient(circle at 70% 88%, rgba(255, 188, 82, 0.10), transparent 34%),
    linear-gradient(135deg, #fff8ee 0%, #ffffff 46%, #fff5e8 100%);
  background-color: #fff8ee;
  overflow: hidden;
}

.elv-motion-v12 .elv-process-stack-pin {
  background: inherit;
  overflow: hidden;
}


/* v8 MacBook / Retina performance profile. */
.elv-retina-mac .elv-services-stack-pin .item:not(.is-near) {
  content-visibility: hidden;
  contain-intrinsic-size: auto var(--elv-stage-h, var(--elv-vh));
}

.elv-retina-mac .elv-services-stack-pin .item.is-current {
  will-change: auto !important;
}

.elv-retina-mac .elv-services-stack-pin .item.is-next {
  will-change: transform !important;
}

.elv-retina-mac .elv-services-stack-pin .service-lava-card {
  contain: layout paint style;
}

.elv-retina-mac .elv-services-stack-pin .service-lava-card::before,
.elv-retina-mac .elv-services-stack-pin .service-lava-card::after,
.elv-retina-mac .elv-services-stack-pin .service-item > .container::before,
.elv-retina-mac .elv-services-stack-pin .service-item > .container::after {
  animation-play-state: paused !important;
}

.elv-retina-mac .elv-services-stack-pin.elv-stack-active:not(.elv-motion-scrolling) .item.is-current .service-lava-card::before,
.elv-retina-mac .elv-services-stack-pin.elv-stack-active:not(.elv-motion-scrolling) .item.is-current .service-lava-card::after,
.elv-retina-mac .elv-services-stack-pin.elv-stack-active:not(.elv-motion-scrolling) .item.is-current > .container::before,
.elv-retina-mac .elv-services-stack-pin.elv-stack-active:not(.elv-motion-scrolling) .item.is-current > .container::after {
  animation-play-state: running !important;
}

.elv-retina-mac .elv-services-stack-pin .service-item ul li {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(255, 255, 255, 0.76) !important;
}

.elv-retina-mac .elv-services-stack-pin.elv-motion-scrolling .service-lava-card::before,
.elv-retina-mac .elv-services-stack-pin.elv-motion-scrolling .service-item > .container::before {
  filter: blur(26px) !important;
}

.elv-retina-mac .elv-services-stack-pin.elv-motion-scrolling .item,
.elv-retina-mac .elv-services-stack-pin.elv-motion-scrolling .item * {
  transition-property: color, background-color, border-color, opacity !important;
}



/* v10 continuous two-card stack. The same cover motion used by the smooth
   testimonial deck is applied to the large homepage and process cards, while
   only the current and incoming cards remain paintable. */
.elv-motion-v12 .elv-shared-pin-section.elv-smooth-stack-mode,
.elv-motion-v12 .elv-shared-pin-section.elv-smooth-stack-mode .elv-shared-card-stack,
.elv-motion-v12 .elv-shared-pin-section.elv-smooth-stack-mode .elv-shared-card-stack > .wrapper,
.elv-motion-v12 .elv-shared-pin-section.elv-smooth-stack-mode .elv-shared-card-stack > .wrapper > .list {
  overflow: hidden !important;
  isolation: isolate;
}

.elv-motion-v12 .elv-shared-card-stack.elv-smooth-stack-mode > .wrapper > .item,
.elv-motion-v12 .elv-shared-card-stack.elv-smooth-stack-mode > .wrapper > .list > .item {
  opacity: 1 !important;
  visibility: hidden;
  pointer-events: none;
  will-change: auto;
  transform-style: flat !important;
}

.elv-motion-v12 .elv-shared-card-stack.elv-smooth-stack-mode .item.elv-pair-current,
.elv-motion-v12 .elv-shared-card-stack.elv-smooth-stack-mode .item.elv-pair-next {
  visibility: visible !important;
  content-visibility: visible !important;
}

.elv-motion-v12 .elv-shared-card-stack.elv-smooth-stack-mode .item.elv-pair-current {
  z-index: 2;
}

.elv-motion-v12 .elv-shared-card-stack.elv-smooth-stack-mode .item.elv-pair-next {
  z-index: 3;
}

.elv-motion-v12 .elv-shared-card-stack.elv-smooth-stack-mode .item:not(.elv-pair-current):not(.elv-pair-next) {
  visibility: hidden !important;
  content-visibility: hidden;
  contain-intrinsic-size: auto var(--elv-stage-h, var(--elv-vh));
  pointer-events: none !important;
}

/* Keep the card itself moving as one clipped surface. This prevents image,
   text and radius layers from drifting apart during the reveal. */
.elv-motion-v12 .elv-shared-card-stack.elv-smooth-stack-mode .item.elv-pair-current,
.elv-motion-v12 .elv-shared-card-stack.elv-smooth-stack-mode .item.elv-pair-next {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Retina Mac profile: preserve the scroll-linked reveal but suspend only the
   expensive decorative animations while the trackpad is moving. */
.elv-retina-mac.elv-motion-v12 .elv-services-stack-pin.elv-motion-scrolling .service-lava-card::before,
.elv-retina-mac.elv-motion-v12 .elv-services-stack-pin.elv-motion-scrolling .service-lava-card::after,
.elv-retina-mac.elv-motion-v12 .elv-services-stack-pin.elv-motion-scrolling .service-item > .container::before,
.elv-retina-mac.elv-motion-v12 .elv-services-stack-pin.elv-motion-scrolling .service-item > .container::after {
  animation-play-state: paused !important;
}

.elv-retina-mac.elv-motion-v12 .elv-services-stack-pin .service-item ul li {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(255, 255, 255, 0.76) !important;
}

@media (prefers-reduced-motion: reduce) {
  .elv-motion-v12 .elv-shared-card-stack.elv-smooth-stack-mode .item {
    will-change: auto !important;
  }
}

/* =========================================================
   v12 — Mac/Retina service stack performance guard
   The layout remains the original GSAP parent-pin layout. Only expensive
   decorative painting is suspended while the large service deck is pinned.
========================================================= */
html.elv-motion-v12.elv-retina-mac.elv-heavy-stack-active *,
html.elv-motion-v12.elv-retina-mac.elv-heavy-stack-active *::before,
html.elv-motion-v12.elv-retina-mac.elv-heavy-stack-active *::after {
  animation-play-state: paused !important;
}

html.elv-motion-v12.elv-retina-mac .elv-shared-pin-section.elv-motion-pin,
html.elv-motion-v12.elv-retina-mac .elv-shared-card-stack.elv-motion-stack,
html.elv-motion-v12.elv-retina-mac .elv-shared-card-stack.elv-motion-stack > .wrapper {
  contain: layout paint !important;
  isolation: isolate !important;
}

html.elv-motion-v12.elv-retina-mac .elv-shared-card-stack.elv-motion-stack .item.is-current,
html.elv-motion-v12.elv-retina-mac .elv-shared-card-stack.elv-motion-stack .item.is-next {
  will-change: transform !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  transform-style: flat !important;
}

html.elv-motion-v12.elv-retina-mac .elv-shared-card-stack.elv-motion-stack .item:not(.is-current):not(.is-next) {
  visibility: hidden !important;
  content-visibility: hidden !important;
  contain-intrinsic-size: auto var(--elv-stage-h, var(--elv-vh));
  will-change: auto !important;
}

/* The original lava palette is preserved, but the runtime blur surface is
   replaced only while the Retina service deck is active. Radial gradients are
   already soft and do not require a full-screen filter repaint. */
html.elv-motion-v12.elv-retina-mac.elv-heavy-stack-active .elv-services-stack-pin .service-lava-card::before {
  inset: -8% !important;
  filter: none !important;
  opacity: .62 !important;
  transform: none !important;
  animation: none !important;
}

html.elv-motion-v12.elv-retina-mac.elv-heavy-stack-active .elv-services-stack-pin .service-lava-card::after {
  transform: none !important;
  animation: none !important;
}

html.elv-motion-v12.elv-retina-mac .elv-services-stack-pin .service-lava-card ul li {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(255,255,255,.72) !important;
}

html.elv-motion-v12.elv-retina-mac.elv-heavy-stack-active .elv-services-stack-pin .service-frame-card {
  box-shadow:
    0 24px 64px rgba(0,0,0,.10),
    0 0 0 8px rgba(255,255,255,.58),
    0 0 54px rgba(255,153,0,.12) !important;
}

html.elv-motion-v12.elv-retina-mac.elv-heavy-stack-active .elv-services-stack-pin .service-item,
html.elv-motion-v12.elv-retina-mac.elv-heavy-stack-active .elv-services-stack-pin .service-item * {
  transition-duration: 0s !important;
}

/* Never let legacy spacer/pseudo rules create the long empty Mac tail seen in
   the v11 native-sticky experiment. */
html.elv-motion-v12 .elv-shared-pin-section.elv-motion-pin,
html.elv-motion-v12 .elv-shared-pin-section.elv-motion-pin > .elv-shared-card-stack {
  height: var(--elv-stage-h, var(--elv-vh)) !important;
  min-height: var(--elv-stage-h, var(--elv-vh)) !important;
  max-height: var(--elv-stage-h, var(--elv-vh)) !important;
}
