.hss-showcase,
.hss-showcase * {
  box-sizing: border-box;
}

.hss-showcase {
  position: relative;
  isolation: isolate;
  width: var(--hss-width, 100%);
  height: var(--hss-height, 100vh);
  min-height: var(--hss-min-height, 620px);
  overflow: hidden;
  background: #050505;
  color: var(--hss-title-color, #fff);
}

.hss-showcase.hss-fullwidth {
  width: 100%;
  max-width: none;
}

.hss-showcase.hss-manual-width {
  max-width: var(--hss-width, 100%);
  margin-right: auto;
  margin-left: auto;
}

.hss-slides,
.hss-slide,
.hss-media-wrap,
.hss-media-inner,
.hss-overlay,
.hss-gradient {
  position: absolute;
  inset: 0;
}

.hss-slides {
  z-index: 1;
}

.hss-slide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--hss-transition-ms, 900ms) ease, visibility var(--hss-transition-ms, 900ms) ease;
  overflow: hidden;
}

.hss-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.hss-slide.is-prev {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  z-index: 1;
}

.hss-media-wrap {
  z-index: 1;
  overflow: hidden;
  background: #111;
}

/* v1.0.21: No-blank reveal guard.
   Keep the outgoing media visible underneath incoming reveal effects and avoid
   exposing the showcase/media fallback black background while the incoming
   media is clipped. */
.hss-effect-reveal-ltr.is-active .hss-media-wrap,
.hss-effect-reveal-rtl.is-active .hss-media-wrap,
.hss-effect-reveal-ttb.is-active .hss-media-wrap,
.hss-effect-reveal-btt.is-active .hss-media-wrap,
.hss-slide.is-prev .hss-media-wrap {
  background: transparent;
}

.hss-slide.is-prev .hss-media-inner {
  clip-path: inset(0 0 0 0) !important;
  -webkit-clip-path: inset(0 0 0 0) !important;
}

.hss-media-inner {
  transform: translateZ(0);
  will-change: transform, clip-path, opacity;
}

/* v1.0.5: JS freezes the outgoing media transform during slide fade-out so zoom does not snap/shrink before the next slide. */
.hss-slide.is-media-frozen .hss-media-inner {
  animation: none !important;
}

/* v1.0.22: initial Media + Effects page-load starter.
   The first active slide is rendered in its reveal/zoom starting frame until JS
   forces one paint frame, then removes hss-initial-media-pending so the media
   effect begins intentionally on page load instead of finishing before boot. */
.hss-showcase.hss-initial-media-pending .hss-slide.is-active .hss-media-inner,
.hss-showcase.hss-initial-media-pending .hss-slide.is-active .hss-overlay,
.hss-showcase.hss-initial-media-pending .hss-slide.is-active .hss-gradient {
  animation: none !important;
  -webkit-animation: none !important;
}

.hss-showcase.hss-media-zoom-on.hss-initial-media-pending .hss-slide.is-active .hss-media-inner {
  transform: scale(var(--hss-zoom-from, 1.03));
  -webkit-transform: scale(var(--hss-zoom-from, 1.03));
}

.hss-showcase.hss-initial-media-pending .hss-effect-reveal-ltr.is-active .hss-media-inner,
.hss-showcase.hss-initial-media-pending .hss-effect-reveal-ltr.is-active .hss-overlay,
.hss-showcase.hss-initial-media-pending .hss-effect-reveal-ltr.is-active .hss-gradient {
  clip-path: inset(0 100% 0 0) !important;
  -webkit-clip-path: inset(0 100% 0 0) !important;
}

.hss-showcase.hss-initial-media-pending .hss-effect-reveal-rtl.is-active .hss-media-inner,
.hss-showcase.hss-initial-media-pending .hss-effect-reveal-rtl.is-active .hss-overlay,
.hss-showcase.hss-initial-media-pending .hss-effect-reveal-rtl.is-active .hss-gradient {
  clip-path: inset(0 0 0 100%) !important;
  -webkit-clip-path: inset(0 0 0 100%) !important;
}

.hss-showcase.hss-initial-media-pending .hss-effect-reveal-ttb.is-active .hss-media-inner,
.hss-showcase.hss-initial-media-pending .hss-effect-reveal-ttb.is-active .hss-overlay,
.hss-showcase.hss-initial-media-pending .hss-effect-reveal-ttb.is-active .hss-gradient {
  clip-path: inset(0 0 100% 0) !important;
  -webkit-clip-path: inset(0 0 100% 0) !important;
}

.hss-showcase.hss-initial-media-pending .hss-effect-reveal-btt.is-active .hss-media-inner,
.hss-showcase.hss-initial-media-pending .hss-effect-reveal-btt.is-active .hss-overlay,
.hss-showcase.hss-initial-media-pending .hss-effect-reveal-btt.is-active .hss-gradient {
  clip-path: inset(100% 0 0 0) !important;
  -webkit-clip-path: inset(100% 0 0 0) !important;
}

.hss-image,
.hss-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--hss-media-fit, cover);
  object-position: var(--hss-media-position, center center);
}

.hss-video::-webkit-media-controls-panel {
  background-color: rgba(0, 0, 0, 0.35);
}

.hss-overlay {
  z-index: 2;
  background: var(--hss-overlay-bg, rgba(0,0,0,0));
  pointer-events: none;
}

.hss-gradient {
  z-index: 3;
  position: absolute;
  inset: 0;
  background: var(--hss-gradient-bg, linear-gradient(to right, rgba(0,0,0,.68) 0%, rgba(0,0,0,0) 72%));
  background-image: var(--hss-gradient-bg, linear-gradient(to right, rgba(0,0,0,.68) 0%, rgba(0,0,0,0) 72%));
  pointer-events: none;
}

.hss-overlay-off .hss-overlay,
.hss-gradient-off .hss-gradient {
  display: none;
}

.hss-content-wrap {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  width: 100%;
  padding-top: clamp(72px, 10vh, 140px);
  padding-bottom: clamp(72px, 10vh, 140px);
  pointer-events: none;
}

.hss-content-v-top .hss-content-wrap {
  align-items: flex-start;
}

.hss-content-v-middle .hss-content-wrap {
  align-items: center;
}

.hss-content-v-bottom .hss-content-wrap {
  align-items: flex-end;
}

.hss-content {
  width: min(var(--hss-content-width, 1180px), calc(100% - 48px));
  margin-right: auto;
  margin-left: auto;
  pointer-events: auto;
  /* v1.0.7 content position offsets live on the parent content box only.
     Entrance animations keep using transform on child elements, so these layers do not conflict. */
  transform: translate3d(var(--hss-content-offset-x, 0px), var(--hss-content-offset-y, 0px), 0);
}

.hss-align-left .hss-content {
  text-align: left;
}

.hss-align-center .hss-content {
  text-align: center;
}

.hss-align-right .hss-content {
  text-align: right;
}

.hss-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0 0 var(--hss-badge-title-spacing, 18px);
  padding: var(--hss-badge-padding, 7px 12px);
  border-radius: var(--hss-badge-radius, 999px);
  background: var(--hss-badge-bg, rgba(255,255,255,.16));
  color: var(--hss-badge-color, #fff);
  font-size: var(--hss-badge-size, clamp(11px, 1vw, 13px));
  font-weight: var(--hss-badge-weight, 500);
  line-height: 1.2;
  letter-spacing: .01em;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.hss-title {
  max-width: var(--hss-title-max-width, 760px);
  margin: 0;
  color: var(--hss-title-color, #fff);
  font-size: var(--hss-title-size, clamp(34px, 5.4vw, 82px));
  line-height: .98;
  font-weight: var(--hss-title-weight, 500);
  letter-spacing: var(--hss-title-letter-spacing, -.045em);
}

.hss-align-center .hss-title {
  margin-right: auto;
  margin-left: auto;
}

.hss-align-right .hss-title {
  margin-left: auto;
}

.hss-subtitle {
  max-width: min(var(--hss-subtitle-max-width, 620px), 100%);
  margin: var(--hss-title-subtitle-spacing, 20px) 0 0;
  color: var(--hss-subtitle-color, rgba(255,255,255,.78));
  font-size: var(--hss-subtitle-size, clamp(14px, 1.2vw, 18px));
  font-weight: var(--hss-subtitle-weight, 400);
  line-height: 1.55;
  letter-spacing: var(--hss-subtitle-letter-spacing, normal);
}

.hss-align-center .hss-subtitle {
  margin-right: auto;
  margin-left: auto;
}

.hss-align-right .hss-subtitle {
  margin-left: auto;
}

.hss-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  margin-top: var(--hss-subtitle-button-spacing, 26px);
  padding: var(--hss-button-padding, 12px 16px);
  border: var(--hss-button-border, 1px solid rgba(255,255,255,.35));
  border-radius: var(--hss-button-radius, 999px);
  background: var(--hss-button-bg, rgba(255,255,255,.20));
  color: var(--hss-button-color, #fff) !important;
  font-size: var(--hss-button-size, clamp(13px, 1.05vw, 15px));
  font-weight: var(--hss-button-weight, 500);
  line-height: 1;
  text-decoration: none;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
}


/* v1.0.13: Reset Divi/theme heading/paragraph padding so spacing controls are exact.
   Divi commonly adds padding-bottom to headings and paragraphs, which made the
   title/subtitle/button gaps look larger than the plugin settings. */
.hss-showcase .hss-title,
.hss-showcase .hss-subtitle {
  padding: 0 !important;
}

.hss-showcase .hss-subtitle {
  margin-top: var(--hss-title-subtitle-spacing, 20px) !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.hss-showcase .hss-button {
  margin-top: var(--hss-subtitle-button-spacing, 26px) !important;
}

.hss-showcase .hss-button,
.hss-showcase .hss-button:visited,
.hss-showcase .hss-button:hover,
.hss-showcase .hss-button:focus,
.hss-showcase .hss-button:focus-visible,
.hss-showcase .hss-button .hss-button-text,
.hss-showcase .hss-button .hss-button-icon {
  color: var(--hss-button-color, #fff) !important;
}

.hss-button:hover,
.hss-button:focus-visible {
  background: var(--hss-button-hover-bg, var(--hss-button-bg, rgba(255,255,255,.20)));
  transform: translateY(-1px);
  text-decoration: none;
}

.hss-showcase .hss-button-icon svg,
.hss-showcase .hss-button-icon svg * {
  fill: currentColor;
  stroke: currentColor;
}

.hss-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--hss-button-icon-size, 18px);
  height: var(--hss-button-icon-size, 18px);
  line-height: 1;
}

.hss-button-icon img,
.hss-button-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hss-progress {
  --hss-progress-x: 0;
  --hss-progress-y: 0;
  position: absolute;
  z-index: 5;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: clamp(16px, 2vw, 34px);
  pointer-events: auto;
  transform: translate(var(--hss-progress-x), var(--hss-progress-y));
}

.hss-progress-v-bottom .hss-progress,
.hss-progress-bottom .hss-progress {
  top: auto;
  bottom: var(--hss-progress-edge-offset, clamp(22px, 4vh, 52px));
}

.hss-progress-v-top .hss-progress,
.hss-progress-top .hss-progress {
  top: var(--hss-progress-edge-offset, clamp(22px, 4vh, 52px));
  bottom: auto;
}

.hss-progress-v-middle .hss-progress {
  top: 50%;
  bottom: auto;
  --hss-progress-y: -50%;
}

.hss-progress-h-stretch .hss-progress {
  right: max(24px, calc((100vw - var(--hss-content-width, 1180px)) / 2));
  left: max(24px, calc((100vw - var(--hss-content-width, 1180px)) / 2));
  width: auto;
}

.hss-progress-h-left .hss-progress,
.hss-progress-h-center .hss-progress,
.hss-progress-h-right .hss-progress {
  width: min(760px, calc(100% - 48px));
}

.hss-progress-h-left .hss-progress {
  right: auto;
  left: max(24px, calc((100vw - var(--hss-content-width, 1180px)) / 2));
}

.hss-progress-h-center .hss-progress {
  right: auto;
  left: 50%;
  --hss-progress-x: -50%;
}

.hss-progress-h-right .hss-progress {
  right: max(24px, calc((100vw - var(--hss-content-width, 1180px)) / 2));
  left: auto;
}

.hss-progress-item {
  display: flex;
  flex-direction: column;
  gap: var(--hss-progress-title-gap, 10px);
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hss-progress-title-color, rgba(255,255,255,.62));
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.hss-progress-title-align-left .hss-progress-item {
  text-align: left;
}

.hss-progress-title-align-center .hss-progress-item {
  text-align: center;
}

.hss-progress-title-align-right .hss-progress-item {
  text-align: right;
}

.hss-progress-item:focus-visible {
  outline: 2px solid rgba(255,255,255,.65);
  outline-offset: 8px;
}

.hss-progress-track {
  position: relative;
  display: block;
  width: 100%;
  height: var(--hss-progress-line-thickness, 1px);
  overflow: hidden;
  background: var(--hss-progress-line-color, rgba(255,255,255,.24));
}

.hss-progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--hss-progress-line-active-color, rgba(255,255,255,.95));
  transform-origin: left center;
}

.hss-no-active-line .hss-progress-bar {
  display: none;
}

.hss-showcase .hss-progress-title {
  display: block;
  overflow: hidden;
  color: currentColor;
  font-size: var(--hss-progress-title-size, clamp(10px, .8vw, 12px)) !important;
  font-weight: var(--hss-progress-title-weight, 400) !important;
  line-height: 1.25;
  opacity: var(--hss-progress-title-inactive-opacity, 1);
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .25s ease, opacity .25s ease, font-size .25s ease;
}

.hss-progress-item.is-active {
  color: var(--hss-progress-title-active-color, rgba(255,255,255,.98));
}

.hss-progress-item.is-active .hss-progress-title {
  font-weight: var(--hss-progress-title-active-weight, 600);
  opacity: 1;
}

.hss-progress-item.is-complete .hss-progress-bar {
  width: 100%;
}

.hss-empty {
  padding: 16px;
  border: 1px dashed #c3c4c7;
  background: #fff;
  color: #1d2327;
}

/* Progress title visibility by device.
   v1.0.12: desktop visibility is scoped to desktop only; tablet/mobile off rules are repeated after responsive display rules to avoid being overridden by mobile line-clamp display. */
@media (min-width: 981px) {
  .hss-showcase.hss-progress-title-desktop-off .hss-progress-title {
    display: none !important;
  }
}

/* Active content entrance
   v1.0.4: inactive slides sit in their entrance-start state, previous slide content fades out in-place, and the next slide enters after an optional wait. This prevents the old title/button from bouncing or sliding away. */
.hss-content-anim-on .hss-slide .hss-badge,
.hss-content-anim-on .hss-slide .hss-title,
.hss-content-anim-on .hss-slide .hss-subtitle,
.hss-content-anim-on .hss-slide .hss-button {
  opacity: 0;
  transform: translate3d(var(--hss-entrance-x, 0), var(--hss-entrance-y, var(--hss-content-anim-distance, 42px)), 0) scale(var(--hss-entrance-scale, 1));
  filter: blur(var(--hss-entrance-blur, 0px));
  transition: none;
  will-change: opacity, transform, filter;
}

.hss-content-anim-on .hss-slide .hss-badge { --hss-entrance-delay: var(--hss-badge-entrance-delay, 0ms); }
.hss-content-anim-on .hss-slide .hss-title { --hss-entrance-delay: var(--hss-title-entrance-delay, 110ms); }
.hss-content-anim-on .hss-slide .hss-subtitle { --hss-entrance-delay: var(--hss-subtitle-entrance-delay, 220ms); }
.hss-content-anim-on .hss-slide .hss-button { --hss-entrance-delay: var(--hss-button-entrance-delay, 320ms); }

.hss-content-anim-on .hss-slide.is-active .hss-badge,
.hss-content-anim-on .hss-slide.is-active .hss-title,
.hss-content-anim-on .hss-slide.is-active .hss-subtitle,
.hss-content-anim-on .hss-slide.is-active .hss-button {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--hss-content-anim-duration, 950ms) var(--hss-content-anim-ease, cubic-bezier(.22,1,.36,1)) calc(var(--hss-content-entry-wait, 180ms) + var(--hss-entrance-delay, 0ms)),
    transform var(--hss-content-anim-duration, 950ms) var(--hss-content-anim-ease, cubic-bezier(.22,1,.36,1)) calc(var(--hss-content-entry-wait, 180ms) + var(--hss-entrance-delay, 0ms)),
    filter var(--hss-content-anim-duration, 950ms) var(--hss-content-anim-ease, cubic-bezier(.22,1,.36,1)) calc(var(--hss-content-entry-wait, 180ms) + var(--hss-entrance-delay, 0ms));
}

/* v1.0.14: allow the first visible slide content to enter on page load.
   The showcase starts in hss-initial-pending, keeping active content in its entrance-start state.
   JS removes the pending class after the page-load delay, then the existing entrance transitions run. */
.hss-content-anim-on.hss-initial-anim-on.hss-initial-pending .hss-slide.is-active .hss-badge,
.hss-content-anim-on.hss-initial-anim-on.hss-initial-pending .hss-slide.is-active .hss-title,
.hss-content-anim-on.hss-initial-anim-on.hss-initial-pending .hss-slide.is-active .hss-subtitle,
.hss-content-anim-on.hss-initial-anim-on.hss-initial-pending .hss-slide.is-active .hss-button {
  opacity: 0;
  transform: translate3d(var(--hss-entrance-x, 0), var(--hss-entrance-y, var(--hss-content-anim-distance, 42px)), 0) scale(var(--hss-entrance-scale, 1));
  filter: blur(var(--hss-entrance-blur, 0px));
  transition: none;
}

/* v1.0.20: real-mobile text/font prewarm.
   Hidden inactive slides used visibility:hidden, so iOS/Android browsers could delay
   painting title/subtitle text and webfont glyphs until the first time the slide
   became active. Keeping nearby slide text laid out invisibly prevents slide 2+
   content from missing its entrance transition and popping in. */
.hss-slide.hss-text-prewarm:not(.is-active):not(.is-prev) {
  visibility: visible;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.hss-slide.hss-text-prewarm:not(.is-active):not(.is-prev) .hss-media-wrap,
.hss-slide.hss-text-prewarm:not(.is-active):not(.is-prev) .hss-overlay,
.hss-slide.hss-text-prewarm:not(.is-active):not(.is-prev) .hss-gradient {
  visibility: hidden;
}

.hss-content-anim-on .hss-slide.hss-text-prewarm:not(.is-active):not(.is-prev) .hss-badge,
.hss-content-anim-on .hss-slide.hss-text-prewarm:not(.is-active):not(.is-prev) .hss-title,
.hss-content-anim-on .hss-slide.hss-text-prewarm:not(.is-active):not(.is-prev) .hss-subtitle,
.hss-content-anim-on .hss-slide.hss-text-prewarm:not(.is-active):not(.is-prev) .hss-button {
  visibility: visible !important;
  opacity: .001 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: none !important;
  transition: none !important;
}

/* v1.0.19: real-mobile slide-change staging.
   Incoming content is held in its start state for one paint frame before .is-active
   transitions run, preventing phone browsers from showing late/popped text. */
.hss-content-anim-on .hss-slide.hss-enter-staging .hss-badge,
.hss-content-anim-on .hss-slide.hss-enter-staging .hss-title,
.hss-content-anim-on .hss-slide.hss-enter-staging .hss-subtitle,
.hss-content-anim-on .hss-slide.hss-enter-staging .hss-button {
  opacity: 0 !important;
  transform: translate3d(var(--hss-entrance-x, 0), var(--hss-entrance-y, var(--hss-content-anim-distance, 42px)), 0) scale(var(--hss-entrance-scale, 1)) !important;
  filter: blur(var(--hss-entrance-blur, 0px)) !important;
  transition: none !important;
}

.hss-content-anim-on .hss-slide.hss-entering .hss-badge,
.hss-content-anim-on .hss-slide.hss-entering .hss-title,
.hss-content-anim-on .hss-slide.hss-entering .hss-subtitle,
.hss-content-anim-on .hss-slide.hss-entering .hss-button {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hss-content-anim-on .hss-slide.is-prev .hss-badge,
.hss-content-anim-on .hss-slide.is-prev .hss-title,
.hss-content-anim-on .hss-slide.is-prev .hss-subtitle,
.hss-content-anim-on .hss-slide.is-prev .hss-button {
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--hss-content-exit-duration, 280ms) ease 0ms,
    filter var(--hss-content-exit-duration, 280ms) ease 0ms;
}

.hss-content-anim-off .hss-slide .hss-badge,
.hss-content-anim-off .hss-slide .hss-title,
.hss-content-anim-off .hss-slide .hss-subtitle,
.hss-content-anim-off .hss-slide .hss-button {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

.hss-content-anim-on .hss-slide.is-active .hss-button:hover,
.hss-content-anim-on .hss-slide.is-active .hss-button:focus-visible {
  transform: translate3d(0, -1px, 0) scale(1);
}
.hss-badge-entrance-fade .hss-slide .hss-badge { --hss-entrance-x: 0; --hss-entrance-y: 0; --hss-entrance-scale: 1; --hss-entrance-blur: 0px; }
.hss-badge-entrance-slide-up .hss-slide .hss-badge { --hss-entrance-x: 0; --hss-entrance-y: var(--hss-content-anim-distance, 42px); --hss-entrance-scale: 1; --hss-entrance-blur: 0px; }
.hss-badge-entrance-slide-down .hss-slide .hss-badge { --hss-entrance-x: 0; --hss-entrance-y: calc(var(--hss-content-anim-distance, 42px) * -1); --hss-entrance-scale: 1; --hss-entrance-blur: 0px; }
.hss-badge-entrance-slide-left .hss-slide .hss-badge { --hss-entrance-x: calc(var(--hss-content-anim-distance, 42px) * -1); --hss-entrance-y: 0; --hss-entrance-scale: 1; --hss-entrance-blur: 0px; }
.hss-badge-entrance-slide-right .hss-slide .hss-badge { --hss-entrance-x: var(--hss-content-anim-distance, 42px); --hss-entrance-y: 0; --hss-entrance-scale: 1; --hss-entrance-blur: 0px; }
.hss-badge-entrance-zoom-in .hss-slide .hss-badge { --hss-entrance-x: 0; --hss-entrance-y: 0; --hss-entrance-scale: .94; --hss-entrance-blur: 0px; }
.hss-badge-entrance-blur-fade .hss-slide .hss-badge { --hss-entrance-x: 0; --hss-entrance-y: 0; --hss-entrance-scale: 1; --hss-entrance-blur: 12px; }
.hss-badge-entrance-none .hss-slide .hss-badge { opacity: 1; transform: none; filter: none; transition: none; }
.hss-title-entrance-fade .hss-slide .hss-title { --hss-entrance-x: 0; --hss-entrance-y: 0; --hss-entrance-scale: 1; --hss-entrance-blur: 0px; }
.hss-title-entrance-slide-up .hss-slide .hss-title { --hss-entrance-x: 0; --hss-entrance-y: var(--hss-content-anim-distance, 42px); --hss-entrance-scale: 1; --hss-entrance-blur: 0px; }
.hss-title-entrance-slide-down .hss-slide .hss-title { --hss-entrance-x: 0; --hss-entrance-y: calc(var(--hss-content-anim-distance, 42px) * -1); --hss-entrance-scale: 1; --hss-entrance-blur: 0px; }
.hss-title-entrance-slide-left .hss-slide .hss-title { --hss-entrance-x: calc(var(--hss-content-anim-distance, 42px) * -1); --hss-entrance-y: 0; --hss-entrance-scale: 1; --hss-entrance-blur: 0px; }
.hss-title-entrance-slide-right .hss-slide .hss-title { --hss-entrance-x: var(--hss-content-anim-distance, 42px); --hss-entrance-y: 0; --hss-entrance-scale: 1; --hss-entrance-blur: 0px; }
.hss-title-entrance-zoom-in .hss-slide .hss-title { --hss-entrance-x: 0; --hss-entrance-y: 0; --hss-entrance-scale: .94; --hss-entrance-blur: 0px; }
.hss-title-entrance-blur-fade .hss-slide .hss-title { --hss-entrance-x: 0; --hss-entrance-y: 0; --hss-entrance-scale: 1; --hss-entrance-blur: 12px; }
.hss-title-entrance-none .hss-slide .hss-title { opacity: 1; transform: none; filter: none; transition: none; }
.hss-subtitle-entrance-fade .hss-slide .hss-subtitle { --hss-entrance-x: 0; --hss-entrance-y: 0; --hss-entrance-scale: 1; --hss-entrance-blur: 0px; }
.hss-subtitle-entrance-slide-up .hss-slide .hss-subtitle { --hss-entrance-x: 0; --hss-entrance-y: var(--hss-content-anim-distance, 42px); --hss-entrance-scale: 1; --hss-entrance-blur: 0px; }
.hss-subtitle-entrance-slide-down .hss-slide .hss-subtitle { --hss-entrance-x: 0; --hss-entrance-y: calc(var(--hss-content-anim-distance, 42px) * -1); --hss-entrance-scale: 1; --hss-entrance-blur: 0px; }
.hss-subtitle-entrance-slide-left .hss-slide .hss-subtitle { --hss-entrance-x: calc(var(--hss-content-anim-distance, 42px) * -1); --hss-entrance-y: 0; --hss-entrance-scale: 1; --hss-entrance-blur: 0px; }
.hss-subtitle-entrance-slide-right .hss-slide .hss-subtitle { --hss-entrance-x: var(--hss-content-anim-distance, 42px); --hss-entrance-y: 0; --hss-entrance-scale: 1; --hss-entrance-blur: 0px; }
.hss-subtitle-entrance-zoom-in .hss-slide .hss-subtitle { --hss-entrance-x: 0; --hss-entrance-y: 0; --hss-entrance-scale: .94; --hss-entrance-blur: 0px; }
.hss-subtitle-entrance-blur-fade .hss-slide .hss-subtitle { --hss-entrance-x: 0; --hss-entrance-y: 0; --hss-entrance-scale: 1; --hss-entrance-blur: 12px; }
.hss-subtitle-entrance-none .hss-slide .hss-subtitle { opacity: 1; transform: none; filter: none; transition: none; }
.hss-button-entrance-fade .hss-slide .hss-button { --hss-entrance-x: 0; --hss-entrance-y: 0; --hss-entrance-scale: 1; --hss-entrance-blur: 0px; }
.hss-button-entrance-slide-up .hss-slide .hss-button { --hss-entrance-x: 0; --hss-entrance-y: var(--hss-content-anim-distance, 42px); --hss-entrance-scale: 1; --hss-entrance-blur: 0px; }
.hss-button-entrance-slide-down .hss-slide .hss-button { --hss-entrance-x: 0; --hss-entrance-y: calc(var(--hss-content-anim-distance, 42px) * -1); --hss-entrance-scale: 1; --hss-entrance-blur: 0px; }
.hss-button-entrance-slide-left .hss-slide .hss-button { --hss-entrance-x: calc(var(--hss-content-anim-distance, 42px) * -1); --hss-entrance-y: 0; --hss-entrance-scale: 1; --hss-entrance-blur: 0px; }
.hss-button-entrance-slide-right .hss-slide .hss-button { --hss-entrance-x: var(--hss-content-anim-distance, 42px); --hss-entrance-y: 0; --hss-entrance-scale: 1; --hss-entrance-blur: 0px; }
.hss-button-entrance-zoom-in .hss-slide .hss-button { --hss-entrance-x: 0; --hss-entrance-y: 0; --hss-entrance-scale: .94; --hss-entrance-blur: 0px; }
.hss-button-entrance-blur-fade .hss-slide .hss-button { --hss-entrance-x: 0; --hss-entrance-y: 0; --hss-entrance-scale: 1; --hss-entrance-blur: 12px; }
.hss-button-entrance-none .hss-slide .hss-button { opacity: 1; transform: none; filter: none; transition: none; }

/* Image effects */
.hss-media-zoom-in {
  --hss-zoom-from: var(--hss-zoom-start, 1.03);
  --hss-zoom-to: var(--hss-zoom-end, 1.08);
}

.hss-media-zoom-out {
  --hss-zoom-from: var(--hss-zoom-end, 1.08);
  --hss-zoom-to: var(--hss-zoom-start, 1.03);
}

.hss-media-zoom-on .hss-effect-fade-zoom-in.is-active .hss-media-inner,
.hss-media-zoom-on .hss-effect-fade-zoom-out.is-active .hss-media-inner {
  animation: hssMediaZoom var(--hss-zoom-duration, 8s) ease forwards;
}

.hss-media-zoom-off .hss-effect-fade-zoom-in.is-active .hss-media-inner,
.hss-media-zoom-off .hss-effect-fade-zoom-out.is-active .hss-media-inner {
  animation: none;
}

.hss-effect-reveal-ltr .hss-media-inner,
.hss-effect-reveal-rtl .hss-media-inner,
.hss-effect-reveal-ttb .hss-media-inner,
.hss-effect-reveal-btt .hss-media-inner,
.hss-effect-reveal-ltr .hss-overlay,
.hss-effect-reveal-rtl .hss-overlay,
.hss-effect-reveal-ttb .hss-overlay,
.hss-effect-reveal-btt .hss-overlay,
.hss-effect-reveal-ltr .hss-gradient,
.hss-effect-reveal-rtl .hss-gradient,
.hss-effect-reveal-ttb .hss-gradient,
.hss-effect-reveal-btt .hss-gradient {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  will-change: clip-path;
}

.hss-slide.is-prev .hss-overlay,
.hss-slide.is-prev .hss-gradient {
  clip-path: inset(0 0 0 0) !important;
  -webkit-clip-path: inset(0 0 0 0) !important;
}

.hss-media-zoom-off .hss-effect-reveal-ltr.is-active .hss-media-inner {
  animation: hssRevealLtr var(--hss-transition-ms, 900ms) var(--hss-reveal-ease, cubic-bezier(.7,0,.2,1)) forwards;
}

.hss-media-zoom-off .hss-effect-reveal-rtl.is-active .hss-media-inner {
  animation: hssRevealRtl var(--hss-transition-ms, 900ms) var(--hss-reveal-ease, cubic-bezier(.7,0,.2,1)) forwards;
}

.hss-media-zoom-off .hss-effect-reveal-ttb.is-active .hss-media-inner {
  animation: hssRevealTtb var(--hss-transition-ms, 900ms) var(--hss-reveal-ease, cubic-bezier(.7,0,.2,1)) forwards;
}

.hss-media-zoom-off .hss-effect-reveal-btt.is-active .hss-media-inner {
  animation: hssRevealBtt var(--hss-transition-ms, 900ms) var(--hss-reveal-ease, cubic-bezier(.7,0,.2,1)) forwards;
}

.hss-media-zoom-on .hss-effect-reveal-ltr.is-active .hss-media-inner {
  animation: hssRevealLtr var(--hss-transition-ms, 900ms) var(--hss-reveal-ease, cubic-bezier(.7,0,.2,1)) forwards, hssMediaZoom var(--hss-zoom-duration, 8s) ease forwards;
}

.hss-media-zoom-on .hss-effect-reveal-rtl.is-active .hss-media-inner {
  animation: hssRevealRtl var(--hss-transition-ms, 900ms) var(--hss-reveal-ease, cubic-bezier(.7,0,.2,1)) forwards, hssMediaZoom var(--hss-zoom-duration, 8s) ease forwards;
}

.hss-media-zoom-on .hss-effect-reveal-ttb.is-active .hss-media-inner {
  animation: hssRevealTtb var(--hss-transition-ms, 900ms) var(--hss-reveal-ease, cubic-bezier(.7,0,.2,1)) forwards, hssMediaZoom var(--hss-zoom-duration, 8s) ease forwards;
}

.hss-media-zoom-on .hss-effect-reveal-btt.is-active .hss-media-inner {
  animation: hssRevealBtt var(--hss-transition-ms, 900ms) var(--hss-reveal-ease, cubic-bezier(.7,0,.2,1)) forwards, hssMediaZoom var(--hss-zoom-duration, 8s) ease forwards;
}

/* v1.0.24: keep standard overlay and gradient locked to the same reveal mask as the media.
   This prevents the gradient from sitting full-screen while the image/video is being revealed. */
.hss-showcase .hss-effect-reveal-ltr.is-active .hss-overlay,
.hss-showcase .hss-effect-reveal-ltr.is-active .hss-gradient {
  animation: hssRevealLtr var(--hss-transition-ms, 900ms) var(--hss-reveal-ease, cubic-bezier(.7,0,.2,1)) forwards;
}

.hss-showcase .hss-effect-reveal-rtl.is-active .hss-overlay,
.hss-showcase .hss-effect-reveal-rtl.is-active .hss-gradient {
  animation: hssRevealRtl var(--hss-transition-ms, 900ms) var(--hss-reveal-ease, cubic-bezier(.7,0,.2,1)) forwards;
}

.hss-showcase .hss-effect-reveal-ttb.is-active .hss-overlay,
.hss-showcase .hss-effect-reveal-ttb.is-active .hss-gradient {
  animation: hssRevealTtb var(--hss-transition-ms, 900ms) var(--hss-reveal-ease, cubic-bezier(.7,0,.2,1)) forwards;
}

.hss-showcase .hss-effect-reveal-btt.is-active .hss-overlay,
.hss-showcase .hss-effect-reveal-btt.is-active .hss-gradient {
  animation: hssRevealBtt var(--hss-transition-ms, 900ms) var(--hss-reveal-ease, cubic-bezier(.7,0,.2,1)) forwards;
}

@keyframes hssMediaZoom {
  0% { transform: scale(var(--hss-zoom-from, 1.03)); }
  100% { transform: scale(var(--hss-zoom-to, 1.08)); }
}

@keyframes hssRevealLtr {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes hssRevealRtl {
  0% { clip-path: inset(0 0 0 100%); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes hssRevealTtb {
  0% { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes hssRevealBtt {
  0% { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@media (max-width: 980px) {
  .hss-showcase {
    min-height: min(var(--hss-min-height, 620px), 100svh);
  }

  .hss-progress-title-tablet-on .hss-progress-title {
    display: block;
  }

  .hss-progress-title-tablet-off .hss-progress-title {
    display: none;
  }

  .hss-content {
    width: calc(100% - 40px);
  }

  .hss-title {
    line-height: 1.04;
  }

  .hss-progress {
    gap: 12px;
  }

  .hss-progress-h-stretch .hss-progress {
    right: 20px;
    left: 20px;
  }

  .hss-progress-h-left .hss-progress,
  .hss-progress-h-center .hss-progress,
  .hss-progress-h-right .hss-progress {
    width: min(680px, calc(100% - 40px));
  }

  .hss-progress-h-left .hss-progress { left: 20px; }
  .hss-progress-h-right .hss-progress { right: 20px; }

  .hss-showcase .hss-progress-title {
    max-width: 100%;
    font-size: var(--hss-progress-title-size, clamp(10px, .8vw, 12px)) !important;
  }
}

@media (min-width: 768px) and (max-width: 980px) {
  .hss-showcase {
    /* v1.0.16: tablet timing overrides. Empty fields inherit desktop/default values from PHP. */
    --hss-transition-ms: var(--hss-transition-ms-tablet, 900ms) !important;
    --hss-content-anim-distance: var(--hss-content-anim-distance-tablet, 42px) !important;
    --hss-content-anim-duration: var(--hss-content-anim-duration-tablet, 950ms) !important;
    --hss-content-exit-duration: var(--hss-content-exit-duration-tablet, 280ms) !important;
    --hss-content-entry-wait: var(--hss-content-entry-wait-tablet, 180ms) !important;
    --hss-content-initial-delay: var(--hss-content-initial-delay-tablet, 220ms) !important;
    --hss-zoom-duration: var(--hss-zoom-duration-tablet, 8s) !important;
    --hss-zoom-start: var(--hss-zoom-start-tablet, 1.03) !important;
    --hss-zoom-end: var(--hss-zoom-end-tablet, 1.08) !important;
  }
}

@media (max-width: 767px) {
  .hss-showcase {
    height: min(var(--hss-height, 100vh), 100svh);
    /* v1.0.15: mobile timing overrides. If fields are empty, PHP outputs desktop values so existing designs inherit safely. */
    --hss-transition-ms: var(--hss-transition-ms-mobile, 900ms) !important;
    --hss-content-anim-distance: var(--hss-content-anim-distance-mobile, 42px) !important;
    --hss-content-anim-duration: var(--hss-content-anim-duration-mobile, 950ms) !important;
    --hss-content-exit-duration: var(--hss-content-exit-duration-mobile, 280ms) !important;
    --hss-content-entry-wait: var(--hss-content-entry-wait-mobile, 0ms) !important;
    --hss-content-initial-delay: var(--hss-content-initial-delay-mobile, 220ms) !important;
    --hss-badge-entrance-delay: var(--hss-badge-entrance-delay-mobile, 0ms) !important;
    --hss-title-entrance-delay: var(--hss-title-entrance-delay-mobile, 0ms) !important;
    --hss-subtitle-entrance-delay: var(--hss-subtitle-entrance-delay-mobile, 70ms) !important;
    --hss-button-entrance-delay: var(--hss-button-entrance-delay-mobile, 140ms) !important;
    --hss-zoom-duration: var(--hss-zoom-duration-mobile, 8s) !important;
    --hss-zoom-start: var(--hss-zoom-start-mobile, 1.03) !important;
    --hss-zoom-end: var(--hss-zoom-end-mobile, 1.08) !important;
  }

  .hss-progress-title-mobile-on .hss-progress-title {
    display: -webkit-box;
  }

  .hss-progress-title-mobile-off .hss-progress-title {
    display: none;
  }

  .hss-image,
  .hss-video {
    object-fit: var(--hss-media-fit-mobile, var(--hss-media-fit, cover));
    object-position: var(--hss-media-position-mobile, var(--hss-media-position, center center));
  }

  .hss-content-wrap {
    padding-top: clamp(64px, 10svh, 120px);
    padding-bottom: clamp(84px, 13svh, 140px);
  }

  .hss-mobile-content-v-top .hss-content-wrap { align-items: flex-start; }
  .hss-mobile-content-v-middle .hss-content-wrap { align-items: center; }
  .hss-mobile-content-v-bottom .hss-content-wrap { align-items: flex-end; }

  .hss-content {
    width: calc(100% - 32px);
    transform: translate3d(var(--hss-content-offset-x-mobile, var(--hss-content-offset-x, 0px)), var(--hss-content-offset-y-mobile, var(--hss-content-offset-y, 0px)), 0);
  }

  .hss-mobile-align-left .hss-content { text-align: left; }
  .hss-mobile-align-center .hss-content { text-align: center; }
  .hss-mobile-align-right .hss-content { text-align: right; }

  .hss-mobile-align-left .hss-title,
  .hss-mobile-align-left .hss-subtitle {
    margin-right: 0;
    margin-left: 0;
  }

  .hss-mobile-align-center .hss-title,
  .hss-mobile-align-center .hss-subtitle {
    margin-right: auto;
    margin-left: auto;
  }

  .hss-mobile-align-right .hss-title,
  .hss-mobile-align-right .hss-subtitle {
    margin-right: 0;
    margin-left: auto;
  }

  .hss-badge {
    margin-bottom: var(--hss-badge-title-spacing-mobile, var(--hss-badge-title-spacing, 14px));
  }

  .hss-subtitle {
    margin-top: var(--hss-title-subtitle-spacing-mobile, var(--hss-title-subtitle-spacing, 16px));
  }

  .hss-title {
    letter-spacing: var(--hss-title-letter-spacing-mobile, var(--hss-title-letter-spacing, -.045em));
  }

  .hss-subtitle {
    letter-spacing: var(--hss-subtitle-letter-spacing-mobile, var(--hss-subtitle-letter-spacing, normal));
  }

  .hss-button {
    margin-top: var(--hss-subtitle-button-spacing-mobile, var(--hss-subtitle-button-spacing, 22px));
  }

  .hss-progress {
    gap: 10px;
  }

  .hss-mobile-progress-v-bottom .hss-progress {
    top: auto;
    bottom: var(--hss-progress-edge-offset-mobile, clamp(18px, 3.5svh, 40px));
    --hss-progress-y: 0;
  }

  .hss-mobile-progress-v-top .hss-progress {
    top: var(--hss-progress-edge-offset-mobile, clamp(18px, 3.5svh, 40px));
    bottom: auto;
    --hss-progress-y: 0;
  }

  .hss-mobile-progress-v-middle .hss-progress {
    top: 50%;
    bottom: auto;
    --hss-progress-y: -50%;
  }

  .hss-mobile-progress-h-stretch .hss-progress {
    right: 16px;
    left: 16px;
    width: auto;
    --hss-progress-x: 0;
  }

  .hss-mobile-progress-h-left .hss-progress,
  .hss-mobile-progress-h-center .hss-progress,
  .hss-mobile-progress-h-right .hss-progress {
    width: min(520px, calc(100% - 32px));
  }

  .hss-mobile-progress-h-left .hss-progress {
    right: auto;
    left: 16px;
    --hss-progress-x: 0;
  }

  .hss-mobile-progress-h-center .hss-progress {
    right: auto;
    left: 50%;
    --hss-progress-x: -50%;
  }

  .hss-mobile-progress-h-right .hss-progress {
    right: 16px;
    left: auto;
    --hss-progress-x: 0;
  }

  .hss-mobile-progress-title-align-left .hss-progress-item { text-align: left; }
  .hss-mobile-progress-title-align-center .hss-progress-item { text-align: center; }
  .hss-mobile-progress-title-align-right .hss-progress-item { text-align: right; }

  .hss-showcase .hss-progress-title {
    font-size: var(--hss-progress-title-size-mobile, var(--hss-progress-title-size, 10px)) !important;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}


/* v1.0.16: device-level guards for Media + Effects and Content Entrance Animation.
   These keep desktop/tablet/mobile controls independent without relying on touch hover behaviour. */
@media (min-width: 981px) {
  .hss-showcase.hss-media-effects-desktop-off .hss-slide .hss-media-inner,
  .hss-showcase.hss-media-effects-desktop-off .hss-slide .hss-overlay,
  .hss-showcase.hss-media-effects-desktop-off .hss-slide .hss-gradient {
    animation: none !important;
    -webkit-animation: none !important;
    clip-path: inset(0 0 0 0) !important;
    -webkit-clip-path: inset(0 0 0 0) !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  .hss-showcase.hss-content-anim-desktop-off .hss-slide .hss-badge,
  .hss-showcase.hss-content-anim-desktop-off .hss-slide .hss-title,
  .hss-showcase.hss-content-anim-desktop-off .hss-slide .hss-subtitle,
  .hss-showcase.hss-content-anim-desktop-off .hss-slide .hss-button {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

@media (min-width: 768px) and (max-width: 980px) {
  .hss-showcase.hss-media-effects-tablet-off .hss-slide .hss-media-inner,
  .hss-showcase.hss-media-effects-tablet-off .hss-slide .hss-overlay,
  .hss-showcase.hss-media-effects-tablet-off .hss-slide .hss-gradient {
    animation: none !important;
    -webkit-animation: none !important;
    clip-path: inset(0 0 0 0) !important;
    -webkit-clip-path: inset(0 0 0 0) !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  .hss-showcase.hss-content-anim-tablet-off .hss-slide .hss-badge,
  .hss-showcase.hss-content-anim-tablet-off .hss-slide .hss-title,
  .hss-showcase.hss-content-anim-tablet-off .hss-slide .hss-subtitle,
  .hss-showcase.hss-content-anim-tablet-off .hss-slide .hss-button {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

@media (max-width: 767px) {
  .hss-showcase.hss-media-effects-mobile-off .hss-slide .hss-media-inner,
  .hss-showcase.hss-media-effects-mobile-off .hss-slide .hss-overlay,
  .hss-showcase.hss-media-effects-mobile-off .hss-slide .hss-gradient {
    animation: none !important;
    -webkit-animation: none !important;
    clip-path: inset(0 0 0 0) !important;
    -webkit-clip-path: inset(0 0 0 0) !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  .hss-showcase.hss-content-anim-mobile-off .hss-slide .hss-badge,
  .hss-showcase.hss-content-anim-mobile-off .hss-slide .hss-title,
  .hss-showcase.hss-content-anim-mobile-off .hss-slide .hss-subtitle,
  .hss-showcase.hss-content-anim-mobile-off .hss-slide .hss-button {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}


/* v1.0.12: final progress-title visibility guards.
   Keep progress lines visible while hiding only the title text on selected devices. */
@media (min-width: 768px) and (max-width: 980px) {
  .hss-showcase.hss-progress-title-tablet-off .hss-progress-title {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hss-showcase.hss-progress-title-mobile-off .hss-progress-title {
    display: none !important;
  }
}

/* v1.0.18: only disable animations for Reduce Motion when the plugin setting asks us to respect it.
   Real phones/tablets with Reduce Motion enabled were making media/content effects pop in instantly. */
@media (prefers-reduced-motion: reduce) {
  .hss-showcase.hss-respect-reduced-motion .hss-slide,
  .hss-showcase.hss-respect-reduced-motion .hss-media-inner,
  .hss-showcase.hss-respect-reduced-motion .hss-slide .hss-badge,
  .hss-showcase.hss-respect-reduced-motion .hss-slide .hss-title,
  .hss-showcase.hss-respect-reduced-motion .hss-slide .hss-subtitle,
  .hss-showcase.hss-respect-reduced-motion .hss-slide .hss-button,
  .hss-showcase.hss-respect-reduced-motion .hss-button,
  .hss-showcase.hss-respect-reduced-motion .hss-progress-title {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 767px) {
  .hss-showcase .hss-subtitle {
    margin-top: var(--hss-title-subtitle-spacing-mobile, var(--hss-title-subtitle-spacing, 16px)) !important;
  }

  .hss-showcase .hss-button {
    margin-top: var(--hss-subtitle-button-spacing-mobile, var(--hss-subtitle-button-spacing, 22px)) !important;
  }
}

/* v1.0.25: Reveal stack compositing fix.
   Media, standard overlay, and gradient now sit inside one visual stack. Reveal
   effects clip that one stack instead of clipping three separate compositor layers,
   preventing a clean/ungraded image edge from appearing under the gradient. */
.hss-visual-stack {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  will-change: clip-path;
}

.hss-visual-stack .hss-media-wrap,
.hss-visual-stack .hss-media-inner,
.hss-visual-stack .hss-overlay,
.hss-visual-stack .hss-gradient {
  clip-path: inset(0 0 0 0) !important;
  -webkit-clip-path: inset(0 0 0 0) !important;
}

.hss-visual-stack .hss-overlay,
.hss-visual-stack .hss-gradient {
  animation: none !important;
  -webkit-animation: none !important;
}

.hss-media-zoom-off .hss-effect-reveal-ltr.is-active .hss-media-inner,
.hss-media-zoom-off .hss-effect-reveal-rtl.is-active .hss-media-inner,
.hss-media-zoom-off .hss-effect-reveal-ttb.is-active .hss-media-inner,
.hss-media-zoom-off .hss-effect-reveal-btt.is-active .hss-media-inner {
  animation: none !important;
  -webkit-animation: none !important;
}

.hss-media-zoom-on .hss-effect-reveal-ltr.is-active .hss-media-inner,
.hss-media-zoom-on .hss-effect-reveal-rtl.is-active .hss-media-inner,
.hss-media-zoom-on .hss-effect-reveal-ttb.is-active .hss-media-inner,
.hss-media-zoom-on .hss-effect-reveal-btt.is-active .hss-media-inner {
  animation: hssMediaZoom var(--hss-zoom-duration, 8s) ease forwards !important;
  -webkit-animation: hssMediaZoom var(--hss-zoom-duration, 8s) ease forwards !important;
}

.hss-showcase .hss-effect-reveal-ltr.is-active .hss-visual-stack {
  animation: hssRevealLtr var(--hss-transition-ms, 900ms) var(--hss-reveal-ease, cubic-bezier(.7,0,.2,1)) forwards;
  -webkit-animation: hssRevealLtr var(--hss-transition-ms, 900ms) var(--hss-reveal-ease, cubic-bezier(.7,0,.2,1)) forwards;
}

.hss-showcase .hss-effect-reveal-rtl.is-active .hss-visual-stack {
  animation: hssRevealRtl var(--hss-transition-ms, 900ms) var(--hss-reveal-ease, cubic-bezier(.7,0,.2,1)) forwards;
  -webkit-animation: hssRevealRtl var(--hss-transition-ms, 900ms) var(--hss-reveal-ease, cubic-bezier(.7,0,.2,1)) forwards;
}

.hss-showcase .hss-effect-reveal-ttb.is-active .hss-visual-stack {
  animation: hssRevealTtb var(--hss-transition-ms, 900ms) var(--hss-reveal-ease, cubic-bezier(.7,0,.2,1)) forwards;
  -webkit-animation: hssRevealTtb var(--hss-transition-ms, 900ms) var(--hss-reveal-ease, cubic-bezier(.7,0,.2,1)) forwards;
}

.hss-showcase .hss-effect-reveal-btt.is-active .hss-visual-stack {
  animation: hssRevealBtt var(--hss-transition-ms, 900ms) var(--hss-reveal-ease, cubic-bezier(.7,0,.2,1)) forwards;
  -webkit-animation: hssRevealBtt var(--hss-transition-ms, 900ms) var(--hss-reveal-ease, cubic-bezier(.7,0,.2,1)) forwards;
}

.hss-showcase.hss-initial-media-pending .hss-slide.is-active .hss-visual-stack {
  animation: none !important;
  -webkit-animation: none !important;
}

.hss-showcase.hss-initial-media-pending .hss-effect-reveal-ltr.is-active .hss-visual-stack {
  clip-path: inset(0 100% 0 0) !important;
  -webkit-clip-path: inset(0 100% 0 0) !important;
}

.hss-showcase.hss-initial-media-pending .hss-effect-reveal-rtl.is-active .hss-visual-stack {
  clip-path: inset(0 0 0 100%) !important;
  -webkit-clip-path: inset(0 0 0 100%) !important;
}

.hss-showcase.hss-initial-media-pending .hss-effect-reveal-ttb.is-active .hss-visual-stack {
  clip-path: inset(0 0 100% 0) !important;
  -webkit-clip-path: inset(0 0 100% 0) !important;
}

.hss-showcase.hss-initial-media-pending .hss-effect-reveal-btt.is-active .hss-visual-stack {
  clip-path: inset(100% 0 0 0) !important;
  -webkit-clip-path: inset(100% 0 0 0) !important;
}

.hss-slide.is-prev .hss-visual-stack,
.hss-slide.is-prev .hss-visual-stack .hss-media-inner,
.hss-slide.is-prev .hss-visual-stack .hss-overlay,
.hss-slide.is-prev .hss-visual-stack .hss-gradient {
  clip-path: inset(0 0 0 0) !important;
  -webkit-clip-path: inset(0 0 0 0) !important;
}

@media (min-width: 981px) {
  .hss-showcase.hss-media-effects-desktop-off .hss-slide .hss-visual-stack {
    animation: none !important;
    -webkit-animation: none !important;
    clip-path: inset(0 0 0 0) !important;
    -webkit-clip-path: inset(0 0 0 0) !important;
  }
}

@media (min-width: 768px) and (max-width: 980px) {
  .hss-showcase.hss-media-effects-tablet-off .hss-slide .hss-visual-stack {
    animation: none !important;
    -webkit-animation: none !important;
    clip-path: inset(0 0 0 0) !important;
    -webkit-clip-path: inset(0 0 0 0) !important;
  }
}

@media (max-width: 767px) {
  .hss-showcase.hss-media-effects-mobile-off .hss-slide .hss-visual-stack {
    animation: none !important;
    -webkit-animation: none !important;
    clip-path: inset(0 0 0 0) !important;
    -webkit-clip-path: inset(0 0 0 0) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hss-showcase.hss-respect-reduced-motion .hss-visual-stack {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* Hero Slide Showcase V2: isolated GSAP slideshow transition layer. */
.hss-transition-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateZ(0);
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}

.hss-slides {
  perspective: 1400px;
  transform-style: preserve-3d;
}

.hss-transition-decor {
  position: absolute;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
}

.hss-transition-decor-panel {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform, opacity;
}

.hss-showcase.hss-advanced-transitioning .hss-slide {
  transition: none !important;
}

.hss-showcase.hss-advanced-transitioning .hss-slide.is-active,
.hss-showcase.hss-advanced-transitioning .hss-slide.is-prev {
  opacity: 1 !important;
  visibility: visible !important;
}

.hss-showcase.hss-advanced-transitioning .hss-slide.is-prev {
  pointer-events: none !important;
}

.hss-media-zoom-on .hss-slide[class*="hss-effect-slideshow-"].is-active .hss-media-inner {
  animation: hssMediaZoom var(--hss-zoom-duration, 8s) ease forwards;
  -webkit-animation: hssMediaZoom var(--hss-zoom-duration, 8s) ease forwards;
}

.hss-media-zoom-off .hss-slide[class*="hss-effect-slideshow-"].is-active .hss-media-inner {
  animation: none !important;
  -webkit-animation: none !important;
}

@media (min-width: 768px) and (max-width: 980px) {
  .hss-media-zoom-on .hss-slide[class*="hss-effect-slideshow-"].is-active .hss-media-inner {
    animation-duration: var(--hss-zoom-duration-tablet, var(--hss-zoom-duration, 8s));
    -webkit-animation-duration: var(--hss-zoom-duration-tablet, var(--hss-zoom-duration, 8s));
  }
}

@media (max-width: 767px) {
  .hss-media-zoom-on .hss-slide[class*="hss-effect-slideshow-"].is-active .hss-media-inner {
    animation-duration: var(--hss-zoom-duration-mobile, var(--hss-zoom-duration, 8s));
    -webkit-animation-duration: var(--hss-zoom-duration-mobile, var(--hss-zoom-duration, 8s));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hss-showcase.hss-respect-reduced-motion .hss-transition-frame,
  .hss-showcase.hss-respect-reduced-motion .hss-transition-decor-panel {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* V2.0.2: hold the first advanced slide off-canvas/hidden until GSAP has
   committed the selected effect's initial frame. The JS removes
   hss-initial-media-pending from the timeline onStart, preventing the first
   slide from popping into its final state on load or refresh. */
@media (min-width: 981px) {
  .hss-showcase.hss-initial-media-pending.hss-initial-advanced-on.hss-media-effects-desktop-on
  .hss-slide[class*="hss-effect-slideshow-"].is-active .hss-transition-frame {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

@media (min-width: 768px) and (max-width: 980px) {
  .hss-showcase.hss-initial-media-pending.hss-initial-advanced-on.hss-media-effects-tablet-on
  .hss-slide[class*="hss-effect-slideshow-"].is-active .hss-transition-frame {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

@media (max-width: 767px) {
  .hss-showcase.hss-initial-media-pending.hss-initial-advanced-on.hss-media-effects-mobile-on
  .hss-slide[class*="hss-effect-slideshow-"].is-active .hss-transition-frame {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}