.kem-root {
  --kem-item-width: 440px;
  --kem-gap: 32px;
  --kem-track-height: 820px;
  --kem-line-width: 2px;
  --kem-dot-size: 13px;
  --kem-axis-y: 50%;
  --kem-content-gap: 42px;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.kem-viewport {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  position: relative;
}

.kem-horizontal.kem-scrollable .kem-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  cursor: grab;
  touch-action: pan-y;
}

.kem-horizontal.kem-scrollable .kem-viewport::-webkit-scrollbar {
  display: none;
}

.kem-horizontal.kem-scrollable .kem-viewport.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.kem-horizontal.kem-scrollable.kem-snap .kem-viewport {
  scroll-snap-type: x proximity;
}

.kem-track {
  --kem-gap-local: var(--kem-gap);
  position: relative;
}

.kem-horizontal .kem-track {
  height: var(--kem-track-height);
  display: flex;
  gap: var(--kem-gap-local);
  width: max-content;
  min-width: 100%;
  align-items: stretch;
  box-sizing: border-box;
  padding: 0 max(32px, calc((100vw - 1400px) / 2));
}

.kem-horizontal .kem-axis {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--kem-axis-y);
  height: var(--kem-line-width);
  transform: translateY(-50%);
  z-index: 1;
  overflow: hidden;
}

.kem-progress {
  display: block;
  width: 0%;
  height: 100%;
  transition: width .12s linear, height .12s linear;
}

.kem-horizontal .kem-item {
  flex: 0 0 var(--kem-item-width);
  width: var(--kem-item-width);
  min-width: 0;
  height: 100%;
  position: relative;
  scroll-snap-align: center;
  box-sizing: border-box;
}

.kem-node {
  position: absolute;
  z-index: 5;
}

.kem-horizontal .kem-node {
  left: 50%;
  top: var(--kem-axis-y);
  transform: translate(-50%, -50%);
}

.kem-dot {
  width: var(--kem-dot-size);
  height: var(--kem-dot-size);
  border: var(--kem-line-width) solid #777;
  border-radius: 50%;
  background: #fff;
  display: block;
  box-sizing: border-box;
  transition: transform .35s ease, background-color .35s ease, border-color .35s ease;
}

.kem-item.is-visible .kem-dot {
  transform: scale(1.18);
}

.kem-horizontal .kem-connector {
  position: absolute;
  left: 50%;
  width: var(--kem-line-width);
  height: var(--kem-content-gap);
  z-index: 2;
  transform: translateX(-50%);
}

.kem-horizontal .kem-pos-top .kem-connector {
  top: calc(var(--kem-axis-y) - var(--kem-content-gap));
}

.kem-horizontal .kem-pos-bottom .kem-connector {
  top: var(--kem-axis-y);
}

.kem-horizontal .kem-content {
  position: absolute;
  left: 0;
  width: 100%;
  max-width: 100%;
  padding: 0 18px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.75,.2,1);
  z-index: 3;
}

/* Content stays completely inside the timeline instead of being pushed out of it. */
.kem-horizontal .kem-pos-top .kem-content {
  bottom: calc(50% + var(--kem-content-gap) + 18px);
}

.kem-horizontal .kem-pos-bottom .kem-content {
  top: calc(50% + var(--kem-content-gap) + 18px);
}

/* On top items the image sits nearest to the timeline, like the supplied reference. */
.kem-horizontal .kem-pos-top .kem-image-wrap {
  order: 20;
  margin-top: 18px;
  margin-bottom: 0;
}

.kem-item[data-kem-animation="none"] .kem-content,
.kem-item.is-visible .kem-content {
  opacity: 1;
  transform: none !important;
}

.kem-root[data-animation="fade-up"] .kem-content { transform: translateY(30px); }
.kem-root[data-animation="zoom"] .kem-content { transform: scale(.93); }
.kem-root[data-animation="slide"] .kem-pos-top .kem-content { transform: translateX(-35px); }
.kem-root[data-animation="slide"] .kem-pos-bottom .kem-content { transform: translateX(35px); }

.kem-image-wrap {
  width: var(--kem-image-size);
  height: var(--kem-image-size);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 18px;
  will-change: transform;
  transition: transform .2s linear;
  box-sizing: border-box;
}

.kem-pos-top .kem-image-wrap { margin-left: auto; margin-right: 0; }
.kem-pos-bottom .kem-image-wrap { margin-left: 0; margin-right: auto; }

.kem-shape-circle { border-radius: 50%; }
.kem-shape-soft { border-radius: 24px; }
.kem-shape-none { border-radius: 0; background: transparent !important; }

.kem-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kem-year {
  font-size: 54px;
  line-height: .98;
  font-weight: 600;
  letter-spacing: .04em;
  margin: 0 0 14px;
}

.kem-title {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 500;
}

.kem-description {
  font-size: 19px;
  line-height: 1.45;
}

.kem-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.kem-nav {
  width: 44px;
  height: 44px;
  border: 1px solid #d8d8d8;
  border-radius: 50%;
  background: #fff;
  color: #626262;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}

.kem-nav:hover:not(:disabled) { transform: translateY(-2px); }
.kem-nav:disabled { opacity: .3; cursor: default; }
.kem-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Vertical */
.kem-vertical .kem-track {
  display: flex;
  flex-direction: column;
  gap: 42px;
  padding: 30px 0;
}

.kem-vertical .kem-axis {
  position: absolute;
  left: 32px;
  top: 0;
  bottom: 0;
  width: var(--kem-line-width);
  overflow: hidden;
}

.kem-vertical .kem-progress {
  width: 100%;
  height: 0%;
}

.kem-vertical .kem-item {
  position: relative;
  padding-left: 85px;
  min-height: 160px;
}

.kem-vertical .kem-node {
  left: 32px;
  top: 26px;
  transform: translate(-50%, -50%);
}

.kem-vertical .kem-connector { display: none; }

.kem-vertical .kem-content {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease, transform .65s ease;
}

.kem-vertical .kem-item.is-visible .kem-content {
  opacity: 1;
  transform: none;
}

.kem-vertical .kem-image-wrap { margin: 0 0 16px; }
.kem-vertical .kem-controls { display: none; }

@media (max-width: 1024px) and (min-width: 768px) {
  .kem-root { --kem-track-height: 760px; --kem-content-gap: 34px; }
  .kem-horizontal .kem-track { padding-left: 28px; padding-right: 28px; }
  .kem-year { font-size: 46px; }
  .kem-title { font-size: 24px; }
  .kem-description { font-size: 17px; }
}

@media (max-width: 767px) {
  .kem-horizontal .kem-track {
    --kem-track-height: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: auto;
    gap: 34px;
    padding: 20px 0;
  }

  .kem-horizontal.kem-scrollable .kem-viewport {
    overflow: visible;
    cursor: auto;
    touch-action: auto;
  }

  .kem-horizontal .kem-axis {
    left: 22px;
    right: auto;
    top: 0;
    bottom: 0;
    width: var(--kem-line-width);
    height: auto;
    transform: none;
  }

  .kem-horizontal .kem-progress { width: 100%; height: 0%; }

  .kem-horizontal .kem-item {
    width: 100%;
    height: auto;
    flex-basis: auto;
    padding-left: 64px;
    min-height: 180px;
  }

  .kem-horizontal .kem-node {
    left: 22px;
    top: 24px;
    transform: translate(-50%, -50%);
  }

  .kem-horizontal .kem-connector { display: none; }

  .kem-horizontal .kem-content,
  .kem-horizontal .kem-pos-top .kem-content,
  .kem-horizontal .kem-pos-bottom .kem-content {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    padding: 0 8px 0 0;
  }

  .kem-horizontal .kem-pos-top .kem-image-wrap,
  .kem-horizontal .kem-image-wrap,
  .kem-pos-top .kem-image-wrap,
  .kem-pos-bottom .kem-image-wrap {
    order: initial;
    margin: 0 0 16px;
  }

  .kem-controls { display: none; }
  .kem-year { font-size: 42px; }
  .kem-title { font-size: 24px; }
  .kem-description { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .kem-content,
  .kem-dot,
  .kem-image-wrap,
  .kem-progress,
  .kem-nav {
    transition: none !important;
  }
}

/* v1.2.0: robust interaction + selectable image fitting */
.kem-horizontal.kem-scrollable .kem-viewport {
  /* We handle horizontal drag/swipe ourselves while keeping vertical page scrolling available. */
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: contain;
}

.kem-horizontal.kem-scrollable .kem-viewport,
.kem-horizontal.kem-scrollable .kem-viewport * {
  -webkit-user-drag: none;
}

.kem-horizontal.kem-scrollable .kem-viewport.is-dragging,
.kem-horizontal.kem-scrollable .kem-viewport.is-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
}

.kem-image-wrap {
  transform: translate3d(0, var(--kem-parallax-y, 0px), 0);
}

.kem-image-wrap.kem-fit-contain .kem-image {
  object-fit: contain;
}

.kem-image-wrap.kem-fit-cover {
  padding: 0 !important;
}

.kem-image-wrap.kem-fit-cover .kem-image {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

/* v1.3.0: interaction stability */
.kem-horizontal.kem-scrollable .kem-viewport.kem-free-scroll {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

.kem-horizontal.kem-scrollable .kem-viewport {
  scroll-behavior: auto;
}

.kem-horizontal.kem-scrollable .kem-viewport.is-dragging {
  cursor: grabbing !important;
}

/* v1.4.0: active milestone + refined tablet layout */
.kem-root {
  --kem-line-color: #777777;
  --kem-active-color: #d6b35a;
  --kem-active-scale: 1.55;
}

/* Visibility controls the reveal animation only. The highlighted marker is now
   driven by .is-active so several visible milestones no longer look active. */
.kem-item .kem-dot {
  background-color: #fff;
  border-color: var(--kem-line-color);
  transform: scale(1);
}

.kem-item.is-visible .kem-dot {
  transform: scale(1);
}

.kem-item.is-active .kem-dot {
  background-color: var(--kem-active-color);
  border-color: var(--kem-active-color);
  transform: scale(var(--kem-active-scale));
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--kem-active-color) 16%, transparent);
}

@supports not (color: color-mix(in srgb, #000 10%, transparent)) {
  .kem-item.is-active .kem-dot { box-shadow: 0 0 0 6px rgba(0,0,0,.06); }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .kem-root {
    --kem-track-height: 720px;
    --kem-content-gap: 30px;
  }

  .kem-horizontal .kem-track {
    padding-left: 24px;
    padding-right: 24px;
    gap: min(var(--kem-gap-local), 24px);
  }

  .kem-horizontal .kem-item {
    flex-basis: min(var(--kem-item-width), 44vw);
    width: min(var(--kem-item-width), 44vw);
  }

  .kem-horizontal .kem-content {
    padding-left: 14px;
    padding-right: 14px;
  }

  .kem-horizontal .kem-pos-top .kem-content {
    bottom: calc(50% + var(--kem-content-gap) + 14px);
  }

  .kem-horizontal .kem-pos-bottom .kem-content {
    top: calc(50% + var(--kem-content-gap) + 14px);
  }

  .kem-image-wrap {
    width: min(var(--kem-image-size), 150px);
    height: min(var(--kem-image-size), 150px);
  }

  .kem-controls { margin-top: 12px; }
}

@media (max-width: 900px) and (min-width: 768px) {
  .kem-root { --kem-track-height: 690px; }

  .kem-horizontal .kem-item {
    flex-basis: min(var(--kem-item-width), 46vw);
    width: min(var(--kem-item-width), 46vw);
  }

  .kem-year { font-size: 40px; }
  .kem-title { font-size: 22px; }
  .kem-description { font-size: 16px; line-height: 1.4; }
}

@media (prefers-reduced-motion: reduce) {
  .kem-item.is-active .kem-dot {
    transform: scale(1.18);
    box-shadow: none;
  }
}
/* v1.6.0: native vertical-scroll scene mapped to horizontal timeline movement.
   No wheel-event hijacking: the browser owns the scroll, the stage stays sticky. */
.kem-stage {
  position: relative;
  width: 100%;
  min-width: 0;
}

@media (min-width: 768px) {
  .kem-horizontal.kem-scroll-scene {
    height: var(--kem-scene-height);
    min-height: var(--kem-scene-height);
  }

  .kem-horizontal.kem-scroll-scene > .kem-stage {
    position: sticky;
    top: var(--kem-sticky-top, 8px);
    z-index: 2;
  }

  .kem-horizontal.kem-scroll-scene .kem-viewport {
    scroll-snap-type: none !important;
  }

  /* Keep the complete timeline usable on shorter laptop/tablet viewports.
     Elementor's configured height remains the upper limit. */
  .kem-horizontal.kem-scroll-scene .kem-track {
    height: min(var(--kem-track-height), calc(100vh - 92px));
    min-height: min(620px, calc(100vh - 92px));
  }
}

@media (max-width: 767px) {
  .kem-stage {
    position: relative !important;
    top: auto !important;
  }
}


/* v1.7.1: compact Full-HD desktop composition.
   Images sit beside the copy instead of stacking above it, reducing the
   timeline's visual height without touching the proven scroll-scene logic. */
.kem-copy {
  min-width: 0;
}

@media (min-width: 1025px) {
  .kem-root {
    --kem-track-height: min(680px, calc(100vh - 165px));
    --kem-content-gap: 34px;
  }

  .kem-horizontal .kem-content {
    display: grid;
    column-gap: 24px;
    align-items: center;
  }

  /* Give the copy the flexible column on both sides.
     Top: text left / image right. Bottom: image left / text right. */
  .kem-horizontal .kem-pos-top .kem-content {
    grid-template-columns: minmax(0, 1fr) var(--kem-image-size);
  }

  .kem-horizontal .kem-pos-bottom .kem-content {
    grid-template-columns: var(--kem-image-size) minmax(0, 1fr);
  }

  /* Top milestones: copy toward the outside, image toward the axis/item centre. */
  .kem-horizontal .kem-pos-top .kem-copy {
    grid-column: 1;
    grid-row: 1;
  }

  .kem-horizontal .kem-pos-top .kem-image-wrap {
    grid-column: 2;
    grid-row: 1;
  }

  /* Bottom milestones mirror the composition for a calmer zig-zag rhythm. */
  .kem-horizontal .kem-pos-bottom .kem-image-wrap {
    grid-column: 1;
    grid-row: 1;
  }

  .kem-horizontal .kem-pos-bottom .kem-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .kem-horizontal .kem-image-wrap,
  .kem-horizontal .kem-pos-top .kem-image-wrap,
  .kem-horizontal .kem-pos-bottom .kem-image-wrap {
    margin: 0;
    align-self: center;
  }

  .kem-horizontal .kem-pos-top .kem-content {
    bottom: calc(50% + var(--kem-content-gap) + 12px);
  }

  .kem-horizontal .kem-pos-bottom .kem-content {
    top: calc(50% + var(--kem-content-gap) + 12px);
  }

  .kem-horizontal .kem-scroll-scene .kem-track {
    height: var(--kem-track-height);
    min-height: 560px;
  }
}

/* v1.7.2: keep page-driven movement instant; easing is owned by JavaScript. */
.kem-horizontal.kem-scroll-scene .kem-viewport {
  scroll-behavior: auto !important;
}

/* v1.7.3: reclaim only empty space below the desktop cards. */
@media (min-width: 1025px) {
  .kem-horizontal.kem-scroll-scene .kem-controls {
    position: relative;
    z-index: 3;
    margin-top: calc(18px - var(--kem-controls-overlap, 0px));
  }
}