.tsg-sticky-wrap,
.tsg-sticky-wrap *,
.tsg-sticky-wrap *::before,
.tsg-sticky-wrap *::after {
  box-sizing: border-box;
}

.tsg-sticky-wrap {
  --tsg-panel: #020109;
  --tsg-text: #ffffff;
  --tsg-track: #100f35;
  --tsg-fill: #2a4dff;
  --tsg-header: 8rem;
  --tsg-steps: 4;
  --tsg-radius: 1.25rem;
  --tsg-icon-size: 1.75rem;
  --tsg-image-max-w: 26.25rem;
  --tsg-image-max-h: 22.4375rem;
  --tsg-image-radius: 2rem;
  --tsg-image-padding: 1.5rem;
  --tsg-title-font-size: 1.25rem;

  height: calc(var(--tsg-steps) * 100vh);
  position: relative;
}

.tsg-work-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  grid-template-rows: auto;
  align-content: center;
  gap: 1rem;
  position: sticky;
  top: var(--tsg-header);
}

.tsg-work-left {
  padding: 7.25rem 5rem;
  border-radius: var(--tsg-radius);
  background-color: var(--tsg-panel);
}
.tsg-work-content-wrapper {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
}
.tsg-work-list {
  position: relative;
  width: 100%;
  padding-bottom: 1.5rem;
  color: var(--tsg-text);
  display: flex;
  justify-content: center;
  align-items: center;
}
.tsg-title-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  opacity: 0.3;
}
/* First step starts active. Any step count works — no per-index rules. */
.tsg-work-list:first-child .tsg-title-wrap { opacity: 1; }
.tsg-title { font-size: var(--tsg-title-font-size); font-weight: 500; }
.tsg-icon { max-width: var(--tsg-icon-size); display: inline-flex; }
.tsg-icon svg,
.tsg-icon img,
.tsg-icon i {
  width: 100%;
  height: auto;
  font-size: var(--tsg-icon-size); /* sizes the Font Awesome glyph itself */
}

.tsg-line-wrap {
  position: absolute;
  inset: auto 0% 0%;
  width: 100%;
  height: 1px;
  background-color: var(--tsg-track);
}
.tsg-line {
  width: 0%;
  height: 1px;
  background-color: var(--tsg-fill);
}
.tsg-work-list:first-child .tsg-line { width: 100%; }

.tsg-work-right {
  position: relative;
  overflow: hidden;
  perspective: 10000px; /* required for the 3D flip to read as a flip, not a slide */
  padding: var(--tsg-image-padding);
  border-radius: var(--tsg-radius);
  /* Background is fully owned by the widget's Background control (Elementor-
     generated CSS on this same selector) — nothing hardcoded here so there's
     no shorthand to conflict with color/image/gradient choices. */
}

/* Every image is centered the same way regardless of active/inactive state —
   inset:0 positions it relative to the parent's PADDING box (so it already
   respects --tsg-image-padding), and margin:auto centers it inside that
   space both ways. Width/height are set directly from the sliders (not as a
   percentage-capped-by-max-width), which sidesteps a real browser ambiguity:
   an absolutely-positioned *replaced* element (an <img> is replaced) with
   inset:0, a percentage width, AND a max-width can resolve the percentage
   before the cap applies depending on the engine — capping stayed selectively
   on other axes anyway, which is exactly the "grows to the top" bug an
   earlier version hit. Fixed width/height removes the ambiguity outright;
   max-width/height:100% is kept only as an overflow guard on very small
   containers. Only the transform changes between steps — sizing/position
   never has to. */
.tsg-image {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--tsg-image-max-w);
  height: var(--tsg-image-max-h);
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: var(--tsg-image-radius);
  box-shadow: 0 24px 104px #0000001a;
  transform: translateY(150%);
}
.tsg-image:first-child {
  transform: none;
}

.tsg-work-grid,
.tsg-image,
.tsg-title-wrap,
.tsg-line {
  transition: none !important;
}
.tsg-image { will-change: transform; }

/* Hide the stack until JS has written each image's start position, so
   nothing flashes stacked-down-the-page on first paint. */
.tsg-sticky-wrap:not(.tsg-ready) .tsg-image { visibility: hidden; }

@media screen and (max-width: 991px) {
  .tsg-work-grid { grid-template-columns: 1fr 1.2fr; }
  .tsg-work-left { padding: 5.75rem 3rem; }
}
@media screen and (max-width: 767px) {
  .tsg-work-grid { grid-template-columns: 1fr 1fr; }
  .tsg-work-left { padding: 5.25rem 2.5rem; }
}
@media screen and (max-width: 479px) {
  .tsg-work-grid { grid-template-columns: 1fr; align-content: start; min-height: 0; }
  .tsg-work-left { padding-top: 4.75rem; padding-bottom: 4.75rem; }
  .tsg-work-right { padding-top: 3.75rem; padding-bottom: 3.75rem; }
  /* Stacked on a phone, cut the runway shorter than the desktop full-screen-per-step math. */
  .tsg-sticky-wrap { height: calc(var(--tsg-steps) * 60vh); }
}

@media (prefers-reduced-motion: reduce) {
  .tsg-sticky-wrap { height: auto; }
  .tsg-work-grid { position: static; }
  .tsg-title-wrap { opacity: 1; }
  .tsg-line { width: 100%; }
  .tsg-image:not(:first-child) { display: none; }
}