/* Orbit570 - Platform Scroll
   Every layout choice is a bundle of custom properties written by a responsive
   control, so Elementor generates the breakpoint media queries. This file
   contains no breakpoint of its own. */

.o5-ly {
  --ly-paper: #f8f9fb;
  --ly-line: #e7e9ee;
  --ly-top: 120px;
  --ly-media-h: 540px;
  --ly-layer-h: 660px;
  --ly-gap-set: 56px;
  --ly-fit: contain;
  --ly-fade: 550ms;
  --ly-shot-radius: 6px;
  --ly-e: cubic-bezier(.16, 1, .3, 1);

  /* copy */
  --ly-ink: #0b0c0f;
  --ly-ink-2: #3f4551;
  --ly-layer-bg: transparent;
  --ly-eyebrow-ink: #1029e4;
  --ly-eyebrow-bg: transparent;
  --ly-eyebrow-gap: 16px;
  --ly-heading-bg: transparent;
  --ly-heading-gap: 16px;
  --ly-desc-bg: transparent;
  --ly-desc-gap: 24px;

  /* pills */
  --ly-pill-ink: #3f4551;
  --ly-pill-bg: #fff;
  --ly-pill-line: #d6d9e1;
  --ly-pill-ink-h: #fff;
  --ly-pill-bg-h: #1029e4;
  --ly-pill-line-h: #1029e4;
  --ly-pill-radius: 100px;
  --ly-pill-gap: 8px;
  --ly-pill-bw: 1px;
  --ly-pill-step: 60ms;

  /* frame padding, written as four values by the Padding control */
  --ly-frame-pt: 28px;
  --ly-frame-pr: 28px;
  --ly-frame-pb: 28px;
  --ly-frame-pl: 28px;

  /* indicators */
  --ly-dot-idle: #d6d9e1;
  --ly-dot-hover: #aeb4c4;
  --ly-dot-active: #1029e4;
  --ly-dot-w: 26px;
  --ly-dot-h: 2px;
  --ly-dot-size: 8px;
  --ly-dot-gap: 7px;
  --ly-dot-radius: 100px;
  --ly-dots-offset: 18px;
  --ly-dots-align: center;
  --ly-prog-w: 100%;

  /* pinned + screen-right + dots inside bottom; the controls replace these */
  --ly-cols: 0.82fr 1.18fr;
  --ly-copy-order: 1;
  --ly-stage-order: 2;
  --ly-grid-cols: var(--ly-cols);
  --ly-stage-display: flex;
  --ly-inline-display: none;
  --ly-layer-min: var(--ly-layer-h);
  --ly-layer-pad: 32px 0;
  --ly-gap: var(--ly-gap-set);
  --ly-layer-cols: 1fr;
  --ly-body-order: 1;
  --ly-inline-order: 2;
  --ly-layer-gap: 0px;

  /* stacked defaults, read through by the layout bundle so control output
     order cannot matter */
  --ly-stack-cols: 1fr;
  --ly-stack-body-order: 1;
  --ly-stack-inline-order: 2;

  --ly-dots-abs: absolute;
  --ly-dots-top: auto;
  --ly-dots-bottom: var(--ly-dots-offset);
  --ly-dots-order: 2;

  display: grid;
  grid-template-columns: var(--ly-grid-cols);
  gap: var(--ly-gap);
  align-items: start;
  margin: 0;
  padding: 0;
  background: none;
}

.o5-ly * { box-sizing: border-box; }

.o5-ly__copy  { order: var(--ly-copy-order); min-width: 0; }
.o5-ly__stage { order: var(--ly-stage-order); min-width: 0; }

/* ------------------------------ the stage ---------------------------- */
.o5-ly__stage {
  display: var(--ly-stage-display);
  flex-direction: column;
  gap: var(--ly-dots-offset);
  position: sticky;
  top: var(--ly-top);
}

.o5-ly__media {
  order: 1;
  position: relative;
  height: var(--ly-media-h);
  overflow: hidden;
  background: var(--ly-paper);
  border: 1px solid var(--ly-line);
  border-radius: 16px;
}

.o5-ly__figure {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  padding: var(--ly-frame-pt) var(--ly-frame-pr) var(--ly-frame-pb) var(--ly-frame-pl);
  opacity: 0;
  transform: scale(.985);
  transition: opacity var(--ly-fade) var(--ly-e), transform var(--ly-fade) var(--ly-e);
}

.o5-ly__figure.is-on { opacity: 1; transform: none; }

.o5-ly__pinned-media {
  width: 100%;
  height: 100%;
  object-fit: var(--ly-fit);
  border-radius: var(--ly-shot-radius);
  display: block;
  max-width: none;
  margin: 0;
}

/* ---------------------------- indicators ----------------------------- */
.o5-ly__pos {
  order: var(--ly-dots-order);
  position: var(--ly-dots-abs);
  top: var(--ly-dots-top);
  bottom: var(--ly-dots-bottom);
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: var(--ly-dots-align);
  align-items: center;
  gap: var(--ly-dot-gap);
  padding-inline: var(--ly-dots-offset);
}

/* The dot is a <button>, so Elementor's Site Settings > Buttons rule
   (.elementor-kit-N button, plus its :hover/:focus) outranks a bare class
   and paints the theme's border and hover fill over it. Declare every
   property that rule can touch, at a weight it cannot beat - the same
   hardening .o5t-btn already carries in the testimonial widget. */
.o5-ly__dot,
.o5-ly__dot:hover,
.o5-ly__dot:focus,
.o5-ly__dot:active {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  color: inherit !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  line-height: 0;
  transform: none !important;
}

.o5-ly__dot > span {
  display: block;
  background: var(--ly-dot-idle);
  border-radius: var(--ly-dot-radius);
  transition:
    background .35s var(--ly-e),
    transform .35s var(--ly-e);
}

.o5-ly__dot:hover > span   { background: var(--ly-dot-hover); }
.o5-ly__dot.is-on > span   { background: var(--ly-dot-active); }
.o5-ly__dot:focus-visible  { outline: 2px solid var(--ly-dot-active) !important; outline-offset: 3px; border-radius: 4px !important; }

/* lines */
.o5ly-ind-line .o5-ly__dot > span {
  width: var(--ly-dot-w);
  height: var(--ly-dot-h);
  transform: scaleX(.68);
  transform-origin: center;
}
.o5ly-ind-line .o5-ly__dot.is-on > span,
.o5ly-ind-line .o5-ly__dot:hover > span { transform: none; }

/* dots */
.o5ly-ind-dot .o5-ly__dot > span {
  width: var(--ly-dot-size);
  height: var(--ly-dot-size);
  border-radius: 50%;
  transform: scale(.72);
}
.o5ly-ind-dot .o5-ly__dot.is-on > span,
.o5ly-ind-dot .o5-ly__dot:hover > span { transform: none; }

/* progress: one continuous track built from clickable segments, so position
   is shown as a fill without giving up the ability to jump to a layer */
.o5ly-ind-progress .o5-ly__pos {
  gap: 0;
  width: var(--ly-prog-w);
  margin-inline: auto;
}
.o5ly-ind-progress .o5-ly__dot { flex: 1 1 0; min-width: 0; }
.o5ly-ind-progress .o5-ly__dot > span {
  width: 100%;
  height: var(--ly-dot-h);
  border-radius: 0;
  transform: none;
}
.o5ly-ind-progress .o5-ly__dot:first-child > span {
  border-start-start-radius: var(--ly-dot-radius);
  border-end-start-radius: var(--ly-dot-radius);
}
.o5ly-ind-progress .o5-ly__dot:last-child > span {
  border-start-end-radius: var(--ly-dot-radius);
  border-end-end-radius: var(--ly-dot-radius);
}
.o5ly-ind-progress .o5-ly__dot.is-done > span,
.o5ly-ind-progress .o5-ly__dot.is-on > span { background: var(--ly-dot-active); }
.o5ly-ind-progress .o5-ly__dot:hover > span { background: var(--ly-dot-hover); }

/* ---------------------------- the layers ----------------------------- */
.o5-ly__layer {
  min-height: var(--ly-layer-min);
  padding: var(--ly-layer-pad);
  background: var(--ly-layer-bg);
}

.o5-ly__layer {
  display: grid;
  grid-template-columns: var(--ly-layer-cols);
  gap: var(--ly-layer-gap);
  align-items: center;
}

.o5-ly__body {
  order: var(--ly-body-order);
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ------------------------------ the copy ----------------------------- */
.o5-ly__tag {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ly-eyebrow-ink);
  background: var(--ly-eyebrow-bg);
  margin: 0 0 var(--ly-eyebrow-gap);
}

.o5-ly__title {
  font-size: clamp(22px, 1.9vw, 26px);
  font-weight: 600;
  letter-spacing: -.008em;
  line-height: 1.32;
  color: var(--ly-ink);
  background: var(--ly-heading-bg);
  margin: 0 0 var(--ly-heading-gap);
}

.o5-ly__text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ly-ink-2);
  background: var(--ly-desc-bg);
  margin: 0 0 var(--ly-desc-gap);
  max-width: 46ch;
}

/* an element with a background needs room, but only once one is set */
.o5-ly__tag:last-child,
.o5-ly__title:last-child,
.o5-ly__text:last-child { margin-bottom: 0; }

/* ------------------------------ pills -------------------------------- */
.o5-ly__feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ly-pill-gap);
}

.o5-ly__feats li {
  font-size: 13px;
  font-weight: 600;
  color: var(--ly-pill-ink);
  background: var(--ly-pill-bg);
  border: var(--ly-pill-bw) solid var(--ly-pill-line);
  padding: 8px 14px;
  border-radius: var(--ly-pill-radius);
  cursor: default;
  transition:
    background .25s var(--ly-e),
    border-color .25s var(--ly-e),
    color .25s var(--ly-e);
}

/* hover fills, it does not outline */
.o5-ly__feats li:hover {
  color: var(--ly-pill-ink-h);
  background: var(--ly-pill-bg-h);
  border-color: var(--ly-pill-line-h);
}

/* ------------------------- the pill arrival -------------------------- */
/* Declared only under .is-on, so the resting state is already correct and a
   widget that never animates still shows every pill. */
@keyframes o5LyPill {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

.o5-ly__layer.is-on .o5-ly__feats li {
  animation: o5LyPill .5s var(--ly-e) both;
  animation-delay: calc(var(--i, 0) * var(--ly-pill-step));
}

/* ---------------------- the stacked screen --------------------------- */
.o5-ly__inline {
  order: var(--ly-inline-order);
  display: var(--ly-inline-display);
  overflow: hidden;
  background: var(--ly-paper);
  border: 1px solid var(--ly-line);
  border-radius: 16px;
  padding: var(--ly-frame-pt) var(--ly-frame-pr) var(--ly-frame-pb) var(--ly-frame-pl);
}

.o5-ly__inline-media {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  border-radius: var(--ly-shot-radius);
}

/* --------------------------- reduced motion -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .o5-ly__figure,
  .o5-ly__dot > span,
  .o5-ly__feats li { transition: none; }
  .o5-ly__layer.is-on .o5-ly__feats li { animation: none; }
  .o5-ly__stage { position: static; }
}