/* Let Elementor own the containing width, max-width and outer padding. */
.elementor-widget-stack_scroll_reveal {
  min-width: 0;
  max-width: 100%;
}
.elementor-widget-stack_scroll_reveal > .elementor-widget-container {
  min-width: 0;
  max-width: 100%;
}

/*
 * This widget owns its responsive presentation through Responsive View.
 * Elementor can otherwise apply a visibility class to the widget wrapper and
 * remove the complete card stack before this stylesheet or the runtime can
 * adapt it. Keep the override scoped to this widget only.
 */
@media (max-width: 1200px) {
  .elementor-widget-stack_scroll_reveal.elementor-hidden-tablet_extra,
  .elementor-widget-stack_scroll_reveal.elementor-hidden-tablet,
  .elementor-widget-stack_scroll_reveal.elementor-hidden-mobile_extra,
  .elementor-widget-stack_scroll_reveal.elementor-hidden-mobile {
    display: block !important;
    visibility: visible !important;
  }
}

.ips-ssr {
  --ips-ssr-card-height: 72vh;
  --ips-ssr-card-height-mode: fixed;
  --ips-ssr-media-width: 50%;
  --ips-ssr-media-position: right;
  --ips-ssr-inline-media-height: 360px;
  --ips-ssr-sticky-offset: 0px;
  --ips-ssr-step-vh: 82;
  --ips-ssr-between-vh: 30;
  --ips-ssr-layer-gap: 0;
  --ips-ssr-stack-angle: 80;
  --ips-ssr-smoothing: 18;
  --ips-ssr-intensity: 48;
  --ips-ssr-stack-depth: 12;
  --ips-ssr-media-inset: 10px;
  --ips-ssr-perspective: 1100;
  --ips-ssr-responsive-view: split;
  --ips-ssr-top-space: 160px;
  --ips-ssr-template-width: 100%;
  --ips-ssr-template-content-width: 100%;
  --ips-ssr-template-height-mode: fit;
  --ips-ssr-template-height: 600px;
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: clip;
  background: transparent;
  isolation: isolate;
}

.ips-ssr,
.ips-ssr *,
.ips-ssr *::before,
.ips-ssr *::after {
  box-sizing: border-box;
}

/* Static first render: safe when JavaScript or motion is disabled. */
.ips-ssr__shell,
.ips-ssr__sticky,
.ips-ssr__stack {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* A template card and the cards stacked with it share one responsive width.
 * Keeping the stack itself sized avoids per-card offsets and preserves every
 * existing transform calculation. */
.ips-ssr--has-template-cards .ips-ssr__stack {
  width: min(100%, var(--ips-ssr-template-width));
  max-width: 100%;
  margin-inline: auto;
}

.ips-ssr__shell {
  padding: 0;
}

.ips-ssr__sticky {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ips-ssr__stack {
  display: grid;
  gap: 24px;
  perspective: 1100px;
  perspective-origin: 50% 50%;
}

.ips-ssr[data-effect="stack_tilt"] .ips-ssr__stack {
  perspective: none;
}

.ips-ssr__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, calc(100% - var(--ips-ssr-media-width))) minmax(0, var(--ips-ssr-media-width));
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 26px;
  background-color: var(--ips-ssr-card-bg, #174ea6);
  background-image: var(--ips-ssr-card-image, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--ips-ssr-card-text, #fff);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.ips-ssr[data-effect="stack_tilt"] .ips-ssr__card {
  transform-origin: 50% 100%;
}

.ips-ssr__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  min-width: 0;
  min-height: 0;
  padding: 48px;
}

.ips-ssr__content > .ips-ssr__eyebrow,
.ips-ssr__content > .ips-ssr__title,
.ips-ssr__content > .ips-ssr__description,
.ips-ssr__content > .ips-ssr__tags,
.ips-ssr__content > .ips-ssr__button-wrapper {
  flex-shrink: 0;
}

.ips-ssr__title {
  width: 100%;
  max-width: 18ch;
  margin: 0;
  color: var(--ips-ssr-card-text, #fff);
  font-size: clamp(34px, 4.4vw, 68px);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.ips-ssr__title > :first-child {
  margin-top: 0;
}

.ips-ssr__title > :last-child {
  margin-bottom: 0;
}

.ips-ssr__title a {
  color: inherit;
}

.ips-ssr__description {
  width: 100%;
  max-width: 50ch;
  margin: 0;
  color: var(--ips-ssr-card-text, #fff);
  font-size: 17px;
  line-height: 1.6;
  opacity: 0.86;
}

.ips-ssr__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #202124;
  font-size: 16px;
  line-height: 1.2;
}

.ips-ssr__eyebrow-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.ips-ssr__eyebrow-icon--template {
  overflow: visible;
}

.ips-ssr__eyebrow-icon-image {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
  object-position: center;
}

.ips-ssr__eyebrow-text {
  display: block;
  min-width: 0;
  color: inherit;
  white-space: nowrap;
}

.ips-ssr__eyebrow--icon-only {
  gap: 0;
}

.ips-ssr__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 100%;
}

.ips-ssr__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 24px;
  border: 1px solid rgba(20, 20, 20, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #202124;
  font-size: 16px;
  line-height: 1.2;
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: 200ms;
  transition-timing-function: ease;
}

.ips-ssr__button-wrapper {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
  margin-top: 8px;
}

.ips-ssr__button {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: 250ms;
  transition-timing-function: ease;
}

.ips-ssr__button .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
}

.ips-ssr__button .elementor-button-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ips-ssr__button .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.ips-ssr__button .elementor-button-icon svg {
  display: block;
  width: 11px;
  height: 10px;
}

.ips-ssr__button .elementor-button-icon svg path {
  transition-property: fill;
  transition-duration: 250ms;
  transition-timing-function: ease;
}

/* Optional repeater colors override the shared Style-tab colors only on that card. */
.ips-ssr__card[style*="--ips-ssr-item-eyebrow-color:"] .ips-ssr__eyebrow {
  color: var(--ips-ssr-item-eyebrow-color) !important;
}

.ips-ssr__card[style*="--ips-ssr-item-eyebrow-icon-color:"] .ips-ssr__eyebrow-icon {
  color: var(--ips-ssr-item-eyebrow-icon-color) !important;
}

.ips-ssr__card[style*="--ips-ssr-item-eyebrow-icon-color:"] .ips-ssr__eyebrow-icon svg path {
  fill: var(--ips-ssr-item-eyebrow-icon-color) !important;
}

.ips-ssr__card[style*="--ips-ssr-item-eyebrow-background:"] .ips-ssr__eyebrow {
  background-color: var(--ips-ssr-item-eyebrow-background) !important;
}

.ips-ssr__card[style*="--ips-ssr-item-heading-color:"] .ips-ssr__title,
.ips-ssr__card[style*="--ips-ssr-item-heading-color:"] .ips-ssr__title * {
  color: var(--ips-ssr-item-heading-color) !important;
}

.ips-ssr__card[style*="--ips-ssr-item-description-color:"] .ips-ssr__description,
.ips-ssr__card[style*="--ips-ssr-item-description-color:"] .ips-ssr__description * {
  color: var(--ips-ssr-item-description-color) !important;
}

.ips-ssr__card[style*="--ips-ssr-item-tag-color:"] .ips-ssr__tag {
  color: var(--ips-ssr-item-tag-color) !important;
}

.ips-ssr__card[style*="--ips-ssr-item-tag-background:"] .ips-ssr__tag {
  background-color: var(--ips-ssr-item-tag-background) !important;
}

.ips-ssr__card[style*="--ips-ssr-item-tag-border:"] .ips-ssr__tag {
  border-color: var(--ips-ssr-item-tag-border) !important;
}

.ips-ssr__card[style*="--ips-ssr-item-tag-hover-color:"] .ips-ssr__tag:hover {
  color: var(--ips-ssr-item-tag-hover-color) !important;
}

.ips-ssr__card[style*="--ips-ssr-item-tag-hover-background:"] .ips-ssr__tag:hover {
  background-color: var(--ips-ssr-item-tag-hover-background) !important;
}

.ips-ssr__card[style*="--ips-ssr-item-tag-hover-border:"] .ips-ssr__tag:hover {
  border-color: var(--ips-ssr-item-tag-hover-border) !important;
}

.ips-ssr__card[style*="--ips-ssr-item-button-color:"] .ips-ssr__button {
  color: var(--ips-ssr-item-button-color) !important;
}

.ips-ssr__card[style*="--ips-ssr-item-button-color:"] .ips-ssr__button svg path {
  fill: var(--ips-ssr-item-button-color) !important;
}

.ips-ssr__card[style*="--ips-ssr-item-button-background:"] .ips-ssr__button {
  background-color: var(--ips-ssr-item-button-background) !important;
}

.ips-ssr__card[style*="--ips-ssr-item-button-border:"] .ips-ssr__button {
  border-color: var(--ips-ssr-item-button-border) !important;
}

.ips-ssr__card[style*="--ips-ssr-item-button-hover-color:"] .ips-ssr__button:hover,
.ips-ssr__card[style*="--ips-ssr-item-button-hover-color:"] .ips-ssr__button:focus {
  color: var(--ips-ssr-item-button-hover-color) !important;
}

.ips-ssr__card[style*="--ips-ssr-item-button-hover-color:"] .ips-ssr__button:hover svg path,
.ips-ssr__card[style*="--ips-ssr-item-button-hover-color:"] .ips-ssr__button:focus svg path {
  fill: var(--ips-ssr-item-button-hover-color) !important;
}

.ips-ssr__card[style*="--ips-ssr-item-button-hover-background:"] .ips-ssr__button:hover,
.ips-ssr__card[style*="--ips-ssr-item-button-hover-background:"] .ips-ssr__button:focus {
  background-color: var(--ips-ssr-item-button-hover-background) !important;
}

.ips-ssr__card[style*="--ips-ssr-item-button-hover-border:"] .ips-ssr__button:hover,
.ips-ssr__card[style*="--ips-ssr-item-button-hover-border:"] .ips-ssr__button:focus {
  border-color: var(--ips-ssr-item-button-hover-border) !important;
}

.ips-ssr__media {
  position: relative;
  z-index: 0;
  display: block;
  min-width: 0;
  min-height: 0;
  padding: var(--ips-ssr-media-inset);
  overflow: visible;
}

.ips-ssr__media-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  contain: paint;
}

.ips-ssr__media-inner picture,
.ips-ssr__media-inner img,
.ips-ssr__media-inner video,
.ips-ssr__media-inner iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.ips-ssr__media-inner img,
.ips-ssr__media-inner video {
  object-fit: cover;
  object-position: center;
}

.ips-ssr__youtube {
  background: #000;
}

.ips-ssr__media-message {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 220px;
  padding: 24px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  text-align: center;
}

.ips-ssr__card--no-media {
  grid-template-columns: minmax(0, 1fr);
}

/* Full-card templates replace only the card's inner payload. The animated
 * article remains untouched, so every existing stack effect keeps the same
 * target, dimensions and transform behavior. */
.ips-ssr__card--template {
  display: block;
  overflow: hidden;
  background-clip: padding-box;
  isolation: isolate;
}

.ips-ssr__template-content {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: inherit;
  background-clip: padding-box;
}

.ips-ssr__template-content > .elementor {
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  min-width: 0;
  border-radius: inherit;
  background-clip: padding-box;
}

/* Elementor templates can retain a boxed max-width inside their full-width
 * render wrapper. Keep that inner width independently responsive without
 * changing the animated article or stack geometry. */
.ips-ssr__template-content > .elementor > .e-con,
.ips-ssr__template-content > .elementor > .elementor-section {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: 0;
  box-sizing: border-box;
}

.ips-ssr__template-content > .elementor > .e-con.e-con-boxed > .e-con-inner,
.ips-ssr__template-content > .elementor > .elementor-section.elementor-section-boxed > .elementor-container {
  width: min(100%, var(--ips-ssr-template-content-width));
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
  box-sizing: border-box;
}

.ips-ssr__template-content img,
.ips-ssr__template-content video,
.ips-ssr__template-content iframe,
.ips-ssr__template-content svg {
  max-width: 100%;
}

/* A saved template is a complete card payload. The article is the only
 * clipping boundary, so all four outer corners remain rounded while the
 * template itself can grow naturally with its own content. */
.ips-ssr.is-ready:not(.is-static) .ips-ssr__card--template > .ips-ssr__template-content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  height: auto;
  width: 100%;
  max-width: 100%;
}

.ips-ssr.is-ready:not(.is-static) .ips-ssr__card--template > .ips-ssr__template-content > .elementor {
  flex: 0 1 auto;
  width: 100%;
  max-width: 100%;
}

.ips-ssr__card--no-media .ips-ssr__content {
  align-items: center;
  text-align: center;
}

.ips-ssr__card--no-media .ips-ssr__title,
.ips-ssr__card--no-media .ips-ssr__description {
  max-width: 760px;
}

.ips-ssr--media-left .ips-ssr__card > .ips-ssr__content {
  order: 2;
}

.ips-ssr--media-left .ips-ssr__card > .ips-ssr__media {
  order: 1;
}

.ips-ssr[data-media-position="left"] .ips-ssr__card > .ips-ssr__content {
  order: 2;
}

.ips-ssr[data-media-position="left"] .ips-ssr__card > .ips-ssr__media {
  order: 1;
}

.ips-ssr[data-media-position="right"] .ips-ssr__card > .ips-ssr__content {
  order: 1;
}

.ips-ssr[data-media-position="right"] .ips-ssr__card > .ips-ssr__media {
  order: 2;
}

/* Frontend scroll layout starts only after JS has measured the section. */
.ips-ssr.is-ready:not(.is-static) .ips-ssr__shell {
  height: var(--ips-ssr-shell-height, 300vh);
}

.ips-ssr.is-ready:not(.is-static) .ips-ssr__sticky {
  position: sticky;
  top: var(--ips-ssr-sticky-offset);
  height: var(--ips-ssr-stage-height, calc(100vh - var(--ips-ssr-sticky-offset)));
  min-height: 0;
  align-items: flex-start;
  justify-content: center;
  padding-block: var(--ips-ssr-headroom, 0px) var(--ips-ssr-bottomroom, 0px);
  overflow: visible;
}

.ips-ssr.is-ready:not(.is-static) .ips-ssr__stack {
  display: block;
  height: var(--ips-ssr-resolved-card-height, min(var(--ips-ssr-card-height), calc(var(--ips-ssr-stage-height, 100vh) - 32px)));
  flex: 0 0 auto;
  margin-inline: auto;
  contain: layout style;
}

.ips-ssr.is-ready:not(.is-static) .ips-ssr__card {
  position: absolute;
  inset: 0;
  min-height: 0;
  height: 100%;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: none;
  will-change: auto;
}

.ips-ssr.is-ready:not(.is-static) .ips-ssr__card.is-nearby {
  will-change: transform, opacity;
}

.ips-ssr.is-ready:not(.is-static) .ips-ssr__card.is-active {
  pointer-events: auto;
}

/* Fit-content sizing handles responsive copy without adding a nested scrollbar. */
.ips-ssr.is-ready:not(.is-static) .ips-ssr__content {
  overflow: visible;
}

@media (max-width: 1024px) {
  .ips-ssr {
    --ips-ssr-card-height: 74vh;
    --ips-ssr-card-height-mode: auto;
    --ips-ssr-inline-media-height: 300px;
    --ips-ssr-step-vh: 74;
    --ips-ssr-between-vh: 26;
    --ips-ssr-layer-gap: 0;
    --ips-ssr-smoothing: 20;
    --ips-ssr-intensity: 42;
    --ips-ssr-stack-depth: 10;
    --ips-ssr-top-space: 80px;
  }

  .ips-ssr__content {
    justify-content: flex-start;
    padding: 38px;
  }

  .ips-ssr__button-wrapper {
    width: 100%;
  }

  .ips-ssr__title {
    font-size: clamp(31px, 5vw, 52px);
  }
}

@media (max-width: 767px) {
  .ips-ssr {
    --ips-ssr-card-height: 78vh;
    --ips-ssr-inline-media-height: 240px;
    --ips-ssr-step-vh: 68;
    --ips-ssr-between-vh: 24;
    --ips-ssr-layer-gap: 0;
    --ips-ssr-smoothing: 22;
    --ips-ssr-intensity: 34;
    --ips-ssr-stack-depth: 7;
    --ips-ssr-top-space: 32px;
  }

  .ips-ssr__content,
  .ips-ssr--media-left .ips-ssr__content {
    justify-content: flex-start;
    gap: 14px;
    padding: 26px;
  }

  .ips-ssr__card--no-media {
    grid-template-rows: auto;
  }

  .ips-ssr__title {
    min-width: 0;
    font-size: clamp(28px, 8.8vw, 42px);
    line-height: 1.03;
  }

  .ips-ssr__description {
    min-width: 0;
    overflow: visible;
    font-size: 15px;
    line-height: 1.5;
  }

  .ips-ssr__tags {
    gap: 9px;
  }

  .ips-ssr__tag {
    min-height: 38px;
    padding: 8px 18px;
    font-size: 14px;
  }

  .ips-ssr__button {
    width: min(100%, 340px);
  }


}

/* Elementor's mobile-landscape breakpoint is 880px on the target site. A
 * split card is too narrow below that width, so stack the content and media
 * while leaving the configured Responsive View and desktop layout untouched. */
@media (max-width: 880px) {
  .ips-ssr__card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .ips-ssr__card > .ips-ssr__content,
  .ips-ssr__card > .ips-ssr__media {
    grid-column: 1;
  }

  .ips-ssr__card > .ips-ssr__content {
    grid-row: 1;
    order: 0;
  }

  .ips-ssr__card > .ips-ssr__media {
    grid-row: 2;
    order: 0;
    min-height: var(--ips-ssr-inline-media-height);
  }

  .ips-ssr__media-inner {
    min-height: var(--ips-ssr-inline-media-height);
  }
}

/* Responsive view options can move the one live media element within content. */
.ips-ssr__card--media-inline,
.ips-ssr__card--media-hidden {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
}

.ips-ssr__card--media-inline > .ips-ssr__content,
.ips-ssr__card--media-hidden > .ips-ssr__content {
  order: 0;
  grid-column: 1;
  grid-row: 1;
}

.ips-ssr__card--media-inline .ips-ssr__content > .ips-ssr__media {
  position: relative;
  order: 0;
  flex: 0 0 var(--ips-ssr-inline-media-height);
  height: var(--ips-ssr-inline-media-height);
  width: 100%;
  max-width: 100%;
  min-height: 170px;
  padding: var(--ips-ssr-media-inset);
}

.ips-ssr__card--media-inline .ips-ssr__content > .ips-ssr__media .ips-ssr__media-inner {
  min-height: 170px;
}

.ips-ssr__card--media-hidden > .ips-ssr__media {
  display: none;
}

/* Elementor editor and reduced-motion/static mode show all cards normally. */
.elementor-editor-active .ips-ssr .ips-ssr__shell,
.ips-ssr.is-static .ips-ssr__shell {
  height: auto !important;
}

.elementor-editor-active .ips-ssr .ips-ssr__sticky,
.ips-ssr.is-static .ips-ssr__sticky {
  position: relative;
  top: auto;
  height: auto;
  min-height: 0;
  padding-block: 0;
  overflow: visible;
}

.elementor-editor-active .ips-ssr .ips-ssr__stack,
.ips-ssr.is-static .ips-ssr__stack {
  display: grid;
  height: auto;
  gap: 24px;
  contain: none;
}

.elementor-editor-active .ips-ssr .ips-ssr__card,
.ips-ssr.is-static .ips-ssr__card {
  position: relative;
  inset: auto;
  min-height: 0;
  height: auto;
  opacity: 1 !important;
  pointer-events: auto;
  transform: none !important;
}

.elementor-editor-active .ips-ssr[data-card-height-mode="fixed"] .ips-ssr__card,
.ips-ssr.is-static[data-card-height-mode="fixed"] .ips-ssr__card {
  min-height: min(var(--ips-ssr-card-height), 88svh);
}

.elementor-editor-active .ips-ssr--has-template-cards[data-template-height-mode="custom"] .ips-ssr__card,
.ips-ssr--has-template-cards.is-static[data-template-height-mode="custom"] .ips-ssr__card {
  min-height: 0;
  height: auto;
  min-height: var(--ips-ssr-template-height);
}

/* Natural-height measuring pass used by Fit Content mode. */
.ips-ssr.is-measuring-layout .ips-ssr__stack {
  display: grid !important;
  height: auto !important;
  contain: none !important;
}

.ips-ssr.is-measuring-layout .ips-ssr__card {
  position: relative !important;
  inset: auto !important;
  min-height: 0 !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: hidden !important;
  transform: none !important;
}

.ips-ssr.is-measuring-layout .ips-ssr__content {
  overflow: visible !important;
}

@media (prefers-reduced-motion: reduce) {
  .ips-ssr__card {
    transition-duration: 0.01ms !important;
  }
}
