.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 {
  z-index: 1;
}

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

.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;
}

.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;
  background: 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;
}


.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 {
  clip-path: inset(0 0 0 0);
}

.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;
}

@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 (max-width: 767px) {
  .hss-showcase {
    height: min(var(--hss-height, 100vh), 100svh);
  }

  .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.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;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hss-slide,
  .hss-media-inner,
  .hss-slide .hss-badge,
  .hss-slide .hss-title,
  .hss-slide .hss-subtitle,
  .hss-slide .hss-button,
  .hss-button,
  .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;
  }
}