/* Overlapping parallax section transition */
.z5pmc-transition {
  --z5pmc-transition-panel-offset: 18vh;
  --z5pmc-transition-previous-shift: 12vh;
  --z5pmc-transition-content-distance: 44px;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/*
 * Keep padding and borders inside the widget width. Elementor normally applies
 * border-box globally, but the carousel must remain safe when theme CSS resets
 * or the responsive preview iframe use a different box-sizing baseline.
 */
.z5pmc-transition,
.z5pmc-transition *,
.z5pmc-transition *::before,
.z5pmc-transition *::after {
  box-sizing: border-box;
}

.z5pmc-transition.is-enabled {
  z-index: 2;
  isolation: isolate;
  overflow: visible;
  overflow-x: clip;
}

.z5pmc-transition__panel {
  position: relative;
  z-index: 2;
  width: 100%;
}

.z5pmc-transition.is-enabled .z5pmc-transition__panel {
  will-change: transform;
}

/*
 * Match the ScrollTrigger start state before deferred footer scripts execute.
 * Without this first-paint state the panel is painted at y:0 and GSAP moves it
 * to the configured offset a moment later, which is perceived as a page-load
 * jump. Inline GSAP styles take over as soon as the timeline is initialized.
 */
.z5pmc-transition.is-enabled:not(.is-elementor-editor):not(.is-transition-initialized) .z5pmc-transition__panel {
  transform: translate3d(0, var(--z5pmc-transition-panel-offset), 0);
}

.z5pmc-transition.is-enabled:not(.is-elementor-editor):not(.is-transition-initialized) .z5pmc__header,
.z5pmc-transition.is-enabled:not(.is-elementor-editor):not(.is-transition-initialized) .z5pmc__controls {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, var(--z5pmc-transition-content-distance), 0);
}

.z5pmc-transition__background {
  display: none;
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-color: #f4f4f4;
  border-radius: 36px 36px 0 0;
}

.z5pmc-transition.is-enabled .z5pmc-transition__background {
  display: block;
}

.z5pmc-transition__dark {
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background: #000;
}

.z5pmc-transition:not(.is-enabled) .z5pmc-transition__dark {
  display: none;
}

.z5pmc-transition.is-enabled .z5pmc__section {
  position: relative;
  z-index: 1;
  overflow-x: clip !important;
  overflow-y: visible !important;
  background: transparent !important;
}

@media (max-width: 1024px) {
  .z5pmc-transition {
    --z5pmc-transition-panel-offset: 14vh;
    --z5pmc-transition-previous-shift: 8vh;
    --z5pmc-transition-content-distance: 36px;
  }

  .z5pmc-transition__background {
    border-radius: 28px 28px 0 0;
  }
}

@media (max-width: 767px) {
  .z5pmc-transition {
    --z5pmc-transition-panel-offset: 10vh;
    --z5pmc-transition-previous-shift: 5vh;
    --z5pmc-transition-content-distance: 28px;
  }

  .z5pmc-transition__background {
    border-radius: 20px 20px 0 0;
  }
}

.z5pmc__section {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: #f3f3f3;
}

.z5pmc__inner {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
}

.z5pmc__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-inline: auto;
}

.z5pmc__section-label,
.z5pmc__heading,
.z5pmc__intro,
.z5pmc__intro p {
  margin: 0;
}

.z5pmc__section-label {
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.z5pmc__heading {
  font-size: clamp(2.5rem, 5vw, 5.5rem);
  line-height: 0.95;
}

.z5pmc__intro {
  max-width: 46rem;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.5;
}

.z5pmc {
  --slider-status: on;
  --z5pmc-cols: 3.25;
  --z5pmc-gap: 24px;
  --z5pmc-overlay-top: rgba(23, 18, 20, 0);
  --z5pmc-overlay-bottom: rgba(23, 18, 20, 0.94);
  --z5pmc-overlay-start: 36%;
  --z5pmc-hover-scale: 1.04;
  --z5pmc-selected-scale: 1.02;
  --z5pmc-unselected-opacity: 0.82;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 1366px) {
  .z5pmc {
    --z5pmc-cols: 2.25;
    --z5pmc-gap: 20px;
  }
}

@media (max-width: 767px) {
  .z5pmc {
    --z5pmc-cols: 2.25;
    --z5pmc-gap: 14px;
  }
}

/*
 * Osmo GSAP slider geometry. The track has its final flex layout from the first
 * paint. JavaScript only translates this element and never rebuilds its DOM.
 */
.z5pmc__carousel-shell {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: visible;
}

/* `clip` avoids creating a horizontal scroll container in modern browsers. */
@supports (overflow: clip) {
  .z5pmc__carousel-shell {
    overflow-x: clip;
    overflow-y: visible;
  }
}

.z5pmc__collection {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

.z5pmc__list {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.z5pmc__item {
  width: calc(((100% - 1px) - ((var(--z5pmc-cols) - 1) * var(--z5pmc-gap))) / var(--z5pmc-cols));
  margin-right: var(--z5pmc-gap);
  flex: none;
  opacity: var(--z5pmc-unselected-opacity);
  transition: opacity 0.35s ease;
}

.z5pmc__item:last-child {
  margin-right: 0;
}

.z5pmc__item[data-gsap-slider-item-status="active"],
.z5pmc[data-gsap-slider-status="not-active"] .z5pmc__item {
  opacity: 1;
}

[data-gsap-slider-list-status="grab"] {
  cursor: grab;
}

[data-gsap-slider-list-status="grabbing"] {
  cursor: grabbing;
}

.z5pmc__controls {
  position: relative;
  z-index: 5;
  visibility: visible;
  opacity: 1;
}

[data-gsap-slider-status="not-active"] [data-gsap-slider-controls] {
  visibility: hidden;
  pointer-events: none;
}

[data-gsap-slider-status="active"] [data-gsap-slider-controls] {
  display: flex;
  visibility: visible;
}

[data-gsap-slider-control-status="not-active"] {
  opacity: 0.25;
  pointer-events: none;
}

.elementor-editor-active .z5pmc [data-gsap-slider-controls],
.elementor-editor-preview .z5pmc [data-gsap-slider-controls],
.z5pmc.is-elementor-editor [data-gsap-slider-controls] {
  display: flex !important;
}

/*
 * The Elementor canvas uses the same non-mutating flex row. Horizontal
 * scrolling is only an editor affordance.
 */
.elementor-editor-active .z5pmc__list,
.elementor-editor-preview .z5pmc__list,
.z5pmc.is-elementor-editor .z5pmc__list {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  transform: none !important;
}

.z5pmc.is-elementor-editor .z5pmc__collection {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.elementor-editor-active .z5pmc__item,
.elementor-editor-preview .z5pmc__item,
.z5pmc.is-elementor-editor .z5pmc__item {
  position: relative !important;
  transform: none !important;
  flex: 0 0 auto !important;
  scroll-snap-align: start;
}

.z5pmc__card {
  display: block;
  position: relative;
  width: 100%;
  min-height: 28rem;
  overflow: hidden;
  isolation: isolate;
  color: inherit;
  text-decoration: none;
  transform: translateZ(0);
}

.z5pmc__media,
.z5pmc__picture,
.z5pmc__image,
.z5pmc__poster,
.z5pmc__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.z5pmc__media {
  overflow: hidden;
  background: #2d282a;
}

.z5pmc__picture {
  display: block;
}

.z5pmc__image,
.z5pmc__poster,
.z5pmc__video {
  object-fit: cover;
  object-position: var(--z5pmc-media-position, center center);
  transition: transform 0.7s cubic-bezier(0.2, 0.75, 0.25, 1), opacity 0.35s ease;
}

.z5pmc__video {
  z-index: 2;
  opacity: 0;
}

.z5pmc__video.is-ready {
  opacity: 1;
}

.z5pmc__item.is-selected .z5pmc__image,
.z5pmc__item.is-selected .z5pmc__poster,
.z5pmc__item.is-selected .z5pmc__video {
  transform: scale(var(--z5pmc-selected-scale));
}

.z5pmc__card:hover .z5pmc__image,
.z5pmc__card:hover .z5pmc__poster,
.z5pmc__card:hover .z5pmc__video {
  transform: scale(var(--z5pmc-hover-scale));
}

.z5pmc__overlay {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--z5pmc-overlay-top) 0%, var(--z5pmc-overlay-top) var(--z5pmc-overlay-start), var(--z5pmc-overlay-bottom) 100%);
  transition: opacity 0.35s ease;
}

.z5pmc__card:hover .z5pmc__overlay,
.z5pmc__item.is-selected .z5pmc__overlay {
  opacity: 1;
}

.z5pmc__card-content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  min-height: inherit;
  color: #fff;
}

.z5pmc__index {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.z5pmc__copy {
  display: flex;
  flex-direction: column;
}

.z5pmc__persona {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.z5pmc__quote {
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  font-style: italic;
  line-height: 1.35;
}

.z5pmc__promise {
  font-size: clamp(1.5rem, 2.1vw, 2.3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.z5pmc__link-icon {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.z5pmc__link-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.z5pmc__card:hover .z5pmc__link-icon {
  transform: translateX(0.3rem);
}

.z5pmc__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  pointer-events: none;
}

.z5pmc__arrows {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  pointer-events: auto;
}

.z5pmc__arrow {
  appearance: none;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.z5pmc__arrow.is--flipped {
  transform: scaleX(-1);
}

.z5pmc__arrow:hover:not([disabled]) {
  transform: translateY(-2px);
}

.z5pmc__arrow.is--flipped:hover:not([disabled]) {
  transform: scaleX(-1) translateY(-2px);
}

.z5pmc__arrow[disabled] {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.z5pmc__pagination {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  min-width: 0;
  pointer-events: auto;
}

.z5pmc__pagination--progress {
  max-width: 32rem;
}

.z5pmc__progress-track {
  position: relative;
  flex: 1;
  height: 2px;
  overflow: hidden;
}

.z5pmc__progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}

.z5pmc__counter {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  white-space: nowrap;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.z5pmc__counter-separator {
  opacity: 0.4;
}

.z5pmc__dots {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.z5pmc__dots::-webkit-scrollbar {
  display: none;
}

.z5pmc__dot {
  appearance: none;
  border: 0;
  padding: 0;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: rgba(23, 18, 20, 0.18);
  cursor: pointer;
}

@media (max-width: 767px) {
  .z5pmc__card {
    min-height: 28rem;
  }

  .z5pmc__controls {
    align-items: center;
  }

  .z5pmc__pagination--progress {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .z5pmc__image,
  .z5pmc__poster,
  .z5pmc__video,
  .z5pmc__link-icon,
  .z5pmc__arrow,
  .z5pmc__item {
    transition: none !important;
  }
}


/* Explicit Hero Transition handoff. Only this internal layer is translated. */
[data-z5-transition-source="hero-intro"].is-z5-transition-source-active {
  position: relative;
}

[data-z5-transition-source="hero-intro"] [data-z5-transition-parallax-layer] {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* Keep the Elementor canvas bounded even with fractional desktop columns. */
.z5pmc-transition.is-elementor-editor .z5pmc__carousel-shell,
.z5pmc-transition.is-elementor-editor .z5pmc,
.z5pmc.is-elementor-editor {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.z5pmc-transition.is-elementor-editor .z5pmc__carousel-shell {
  overflow: hidden !important;
}
