/* ==========================================================================
   Scroll Morph Showcase — Frontend CSS v5 FIXED
   Key fix: single authoritative .smw-hero-img rule set.
   No conflicting duplicate declarations.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wrapper & sticky panel
   -------------------------------------------------------------------------- */
.smw-right-main-heading {
  font-family: "Work Sans", Sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.2em !important;
  color: #1A2853 !important;
}
.check-list{
	padding-top:0px !important;
}     
.smw-wrapper { position: relative; }

.smw-sticky-panel {
  position: sticky;
  top: 0; left: 0;
  width: 100%;
  overflow: hidden;
  background: #ffffff;
}

/* --------------------------------------------------------------------------
   Bubbles
   -------------------------------------------------------------------------- */
.smw-bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.smw-bubble  { position: absolute; border-radius: 50%; animation: smwBubble linear infinite; will-change: transform; }

@keyframes smwBubble {
  0%   { transform: translateY(0)    scale(1);    }
  40%  { transform: translateY(-16px) scale(1.03); }
  70%  { transform: translateY(8px)   scale(0.97); }
  100% { transform: translateY(-22px) scale(1.02); }
}

/* --------------------------------------------------------------------------
   Micro-particles
   -------------------------------------------------------------------------- */
.smw-particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.smw-particle  { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #c8a45a; opacity: 0; animation: smwParticle linear infinite; will-change: transform, opacity; }

@keyframes smwParticle {
  0%   { transform: translateY(0) translateX(0);            opacity: 0; }
  12%  { opacity: 0.55; }
  80%  { opacity: 0.15; }
  100% { transform: translateY(-160px) translateX(var(--px, 0)); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Inner layout
   -------------------------------------------------------------------------- */
.smw-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  gap: 20px;
}

/* --------------------------------------------------------------------------
   Vertical step rail
   -------------------------------------------------------------------------- */
.smw-step-rail {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  height: calc(100% - 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  z-index: 20;
  padding: 0;
}

.smw-step-track {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: rgba(0,0,0,0.10);
}

.smw-step-fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #c8a45a 0%, #a07840 100%);
  transition: height 0.12s linear;
  will-change: height;
}

.smw-step-node { position: relative; display: flex; align-items: center; cursor: default; z-index: 2; }

.smw-step-ring {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(200,164,90,0.40);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
}

.smw-step-node.is-active .smw-step-ring {
  transform: translate(-50%,-50%) scale(1);
  opacity: 1;
  animation: smwNodePulse 2s ease-out infinite;
}

@keyframes smwNodePulse {
  0%   { box-shadow: 0 0 0 0   rgba(200,164,90,0.35); }
  60%  { box-shadow: 0 0 0 9px rgba(200,164,90,0); }
  100% { box-shadow: 0 0 0 0   rgba(200,164,90,0); }
}

.smw-step-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(0,0,0,0.14);
  border: 1px solid rgba(0,0,0,0.20);
  position: relative; z-index: 1;
  transition: background 0.35s ease, border-color 0.35s ease,
              transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease;
}

.smw-step-node.is-complete .smw-step-dot { background: #c8a45a; border-color: #c8a45a; transform: scale(0.75); }
.smw-step-node.is-active   .smw-step-dot { background: #c8a45a; border-color: #c8a45a; transform: scale(1.5); box-shadow: 0 0 0 3px rgba(200,164,90,0.20), 0 0 14px rgba(200,164,90,0.30); }

.smw-step-lbl {
  position: absolute; left: 18px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  color: rgba(0,0,0,0.22); white-space: nowrap; pointer-events: none;
  transition: color 0.3s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

.smw-step-node.is-active   .smw-step-lbl { color: #c8a45a; transform: translateX(4px); }
.smw-step-node.is-complete .smw-step-lbl { color: rgba(0,0,0,0.42); }

/* --------------------------------------------------------------------------
   Stage progress bar
   -------------------------------------------------------------------------- */
.smw-stage-pbar {
  position: absolute; bottom: 0; left: 0;
  height: 2px; width: 0%;
  background: #c8a45a;
  z-index: 30;
  transition: opacity 0.5s ease;
  will-change: width;
}

/* --------------------------------------------------------------------------
   Left column
   -------------------------------------------------------------------------- */
.smw-col-left {
  width: 45%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  position: relative;
  /* overflow: hidden is intentionally NOT set here so the absolute hero images
     can start below the visible area. The sticky panel clips them instead. */
}

/* --------------------------------------------------------------------------
   Right column
   -------------------------------------------------------------------------- */
.smw-col-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   ═══════════════════════════════════════════════════════
   HERO IMAGE / SVG STACK  —  directional slide animation
   ═══════════════════════════════════════════════════════

   JS stamps data-dir="down" or data-dir="up" on each element
   before toggling is-active / is-exiting.

   Forward scroll (data-dir="down"):
     entering  → starts at translateY(120%)  slides to translateY(0)
     exiting   → starts at translateY(0)     slides to translateY(-120%)

   Reverse scroll (data-dir="up"):
     entering  → starts at translateY(-120%) slides to translateY(0)
     exiting   → starts at translateY(0)     slides to translateY(120%)
   -------------------------------------------------------------------------- */
.smw-hero-images {
  position: relative;
  min-height: 500px;
  width: 100%;
}

/* Base — off-screen, no pointer events */
.smw-hero-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
  transition:
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    opacity   0.35s ease;
}

/* ── Default resting positions (before JS assigns data-dir) ── */
/* Scrolling down: new image waits below */
.smw-hero-img:not([data-dir]),
.smw-hero-img[data-dir="down"] {
  transform: translateY(120%);
}
/* Scrolling up: new image waits above */
.smw-hero-img[data-dir="up"] {
  transform: translateY(-120%);
}

/* ── Active — always centred, regardless of direction ── */
.smw-hero-img.is-active {
  transform: translateY(0%);
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* ── Exiting forward (scroll down): slide out to top ── */
.smw-hero-img.is-exiting[data-dir="down"] {
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* ── Exiting backward (scroll up): slide out to bottom ── */
.smw-hero-img.is-exiting[data-dir="up"] {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Media wrappers
   -------------------------------------------------------------------------- */
.smw-hero-media {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}

.smw-hero-img img     { display: block; height: auto; object-fit: contain; }
.smw-svg-wrap         { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.smw-svg-wrap > svg   { width: 100%; height: auto; display: block; max-height: inherit; }
.smw-svg-wrap > img   { width: 100%; height: auto; display: block; object-fit: contain; max-height: inherit; }

/* --------------------------------------------------------------------------
   TEXT STACK — directional slide with stagger
   -------------------------------------------------------------------------- */
.smw-text-stack {
  position: relative;
  width: 100%;
  min-height: 200px;
  overflow: hidden;
}

/* Base — off-screen */
.smw-stage-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.3s ease;
}

/* ── Default resting positions ── */
/* Scroll down: new text waits below */
.smw-stage-text:not([data-dir]),
.smw-stage-text[data-dir="down"] {
  transform: translateY(100%);
  opacity: 0;
}
/* Scroll up: new text waits above */
.smw-stage-text[data-dir="up"] {
  transform: translateY(-100%);
  opacity: 0;
}

/* ── Active — centred, visible ── */
.smw-stage-text.is-active {
  position: relative;
  transform: translateY(0%);
  opacity: 1;
  pointer-events: auto;
}

/* ── Exiting forward: slide to top ── */
.smw-stage-text.is-exiting[data-dir="down"] {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* ── Exiting backward: slide to bottom ── */
.smw-stage-text.is-exiting[data-dir="up"] {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

/* ── Staggered child entrance ── */
.smw-stage-text.is-active .smw-badge,
.smw-stage-text.is-active .smw-title,
.smw-stage-text.is-active .smw-description,
.smw-stage-text.is-active .smw-btn {
  animation: smwChildIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.smw-stage-text.is-active .smw-badge       { animation-delay: 0.04s; }
.smw-stage-text.is-active .smw-title       { animation-delay: 0.11s; }
.smw-stage-text.is-active .smw-description { animation-delay: 0.19s; }
.smw-stage-text.is-active .smw-btn         { animation-delay: 0.27s; }

/* Forward: children slide up from below */
.smw-stage-text[data-dir="down"].is-active .smw-badge,
.smw-stage-text[data-dir="down"].is-active .smw-title,
.smw-stage-text[data-dir="down"].is-active .smw-description,
.smw-stage-text[data-dir="down"].is-active .smw-btn {
  animation-name: smwChildInDown;
}

/* Reverse: children slide down from above */
.smw-stage-text[data-dir="up"].is-active .smw-badge,
.smw-stage-text[data-dir="up"].is-active .smw-title,
.smw-stage-text[data-dir="up"].is-active .smw-description,
.smw-stage-text[data-dir="up"].is-active .smw-btn {
  animation-name: smwChildInUp;
}

@keyframes smwChildInDown {
  from { transform: translateY(28px) skewY(1.5deg);  opacity: 0; }
  to   { transform: translateY(0)    skewY(0deg);    opacity: 1; }
}

@keyframes smwChildInUp {
  from { transform: translateY(-28px) skewY(-1.5deg); opacity: 0; }
  to   { transform: translateY(0)     skewY(0deg);    opacity: 1; }
}

/* --------------------------------------------------------------------------
   Text elements
   -------------------------------------------------------------------------- */
.smw-badge {
  font-size: 12px; font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; color: #888; margin: 0 0 6px 0;
}

.smw-title {
  font-size: clamp(18px, 2.2vw, 32px); font-weight: 800; line-height: 1.15;
  color: #111; margin: 0 0 14px 0; letter-spacing: -0.01em;
}

.smw-description {
  font-size: 14px; line-height: 1.65; color: #555; margin: 0 0 20px 0; max-width: 380px;
}

/* --------------------------------------------------------------------------
   CTA button
   -------------------------------------------------------------------------- */
.smw-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 30px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  color: #fff; background: #111; border: none; cursor: pointer;
  transition: background 0.3s, color 0.3s, transform 0.25s;
}
.smw-btn:hover { background: #c8a45a; transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   Right column text & button
   -------------------------------------------------------------------------- */
.smw-right-text-block  { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.smw-right-heading     { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.25; color: #111; }
.smw-right-description { margin: 0; font-size: 16px; line-height: 1.6; color: #555; }
.smw-right-btn         { display: inline-block; align-self: flex-start; padding: 12px 30px; background: #111; color: #fff; text-decoration: none; border-radius: 4px; font-size: 0.9rem; font-weight: 600; transition: background 0.25s ease, color 0.25s ease; }
.smw-right-btn:hover   { background: #c8a45a; color: #fff; }

/* --------------------------------------------------------------------------
   Showcase grid
   -------------------------------------------------------------------------- */
.smw-showcase-grid { display: none; align-items: flex-end; justify-content: center; gap: 20px; width: 100%; }
.smw-showcase-item { flex: 1; max-width: 200px; display: flex; flex-direction: column; align-items: center; }

.smw-showcase-item img {
  width: 100%; max-height: 55vh; object-fit: contain; display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.08));
  transition: transform 0.4s ease;
}
.smw-showcase-item:hover img { transform: translateY(-6px); }

.smw-showcase-item::after {
  content: ''; display: block; width: 60%; height: 20px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.12) 0%, transparent 70%);
  margin-top: -10px; filter: blur(4px);
}

/* --------------------------------------------------------------------------
   Legacy progress dots
   -------------------------------------------------------------------------- */
.smw-dots { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.smw-dot { width: 8px; height: 8px; border-radius: 50%; background: #ccc; cursor: pointer; transition: background 0.3s, width 0.3s, border-radius 0.3s; display: block; }
.smw-dot.is-active { background: #111; width: 24px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   Stage counter
   -------------------------------------------------------------------------- */
.smw-stage-counter {
  position: absolute; top: 28px; right: 36px; z-index: 10;
  display: flex; align-items: baseline; gap: 4px;
  color: #bbb; font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: 0.05em;
}
.smw-stage-counter__current { font-size: 22px; font-weight: 700; color: #111; line-height: 1; }

.smw-count-bump { animation: smwCountBump 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }

@keyframes smwCountBump {
  from { transform: translateY(10px) scale(0.85); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* --------------------------------------------------------------------------
   Scroll hint
   -------------------------------------------------------------------------- */
.smw-scroll-hint {
  position: absolute; bottom: 28px; right: 36px; z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: #aaa; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  transition: opacity 0.5s ease;
}
.smw-scroll-hint.is-hidden { opacity: 0; pointer-events: none; }

/* --------------------------------------------------------------------------
   Toggle show / hide
   -------------------------------------------------------------------------- */
.smw-hide-title       .smw-title             { display: none !important; }
.smw-hide-description .smw-description       { display: none !important; }
.smw-hide-btn         .smw-btn               { display: none !important; }
.smw-hide-right-title .smw-right-heading     { display: none !important; }
.smw-hide-right-desc  .smw-right-description { display: none !important; }
.smw-hide-right-btn   .smw-right-btn         { display: none !important; }
.smw-hide-showcase    .smw-showcase-grid     { display: none !important; }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .smw-hero-img,
  .smw-stage-text,
  .smw-step-fill,
  .smw-step-dot,
  .smw-step-ring,
  .smw-stage-pbar,
  .smw-particle { transition: none !important; animation: none !important; }

  .smw-stage-text.is-active .smw-badge,
  .smw-stage-text.is-active .smw-title,
  .smw-stage-text.is-active .smw-description,
  .smw-stage-text.is-active .smw-btn { animation: none !important; }
}
/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* ── Small desktop / tablet landscape ── */
@media (max-width: 1024px) {
  .smw-inner       { padding: 40px; gap: 16px; }
  .smw-step-rail   { left: 14px; }
  .smw-hero-images { min-height: 380px; }
}

/* ── Tablet portrait & below — stack the two columns ── */
@media (max-width: 768px) {
  .smw-inner {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding: 48px 24px 48px 48px;   /* extra left padding clears the step rail */
    gap: 24px;
  }

  .smw-col-left,
  .smw-col-right { width: 100% !important; }

  /* sidebar text above, morphing content below */
  .smw-col-right {
    order: -1;
    flex: 0 0 auto;
    align-items: stretch;
    justify-content: flex-start;
  }

  /* size the stack so both halves fit inside the 90vh sticky panel */
  .smw-hero-images { min-height: 38vh; }
  .smw-text-stack  { min-height: auto; }

  /* keep media centred; ignore desktop X/Y offsets that could push it off-screen.
     NOTE: this transform is on .smw-hero-media (the offset wrapper), NOT
     .smw-hero-img — the slide animation is untouched. */
  .smw-hero-media  { justify-content: center !important; transform: none !important; }

  .smw-step-rail   { left: 12px; height: calc(100% - 70px); }
  .smw-step-lbl    { display: none; }

  .smw-stage-counter          { top: 14px; right: 18px; }
  .smw-stage-counter__current { font-size: 18px; }
  .smw-scroll-hint            { display: none; }

  .smw-right-text-block { margin-bottom: 0; gap: 10px; }
  .smw-right-heading    { font-size: 1.25rem; }
  .smw-description      { max-width: 100%; }
}

/* ── Phones ── */
@media (max-width: 480px) {
  .smw-inner       { padding: 36px 14px 36px 40px; gap: 18px; }
  .smw-hero-images { min-height: 30vh; }

  /* never let the inline-sized media exceed the viewport */
  .smw-hero-img img,
  .smw-svg-wrap    { max-width: 80vw; }

  .smw-title       { font-size: clamp(17px, 5.2vw, 24px); }
  .smw-description { font-size: 13px; }
  .smw-btn,
  .smw-right-btn   { padding: 10px 22px; }
  .smw-step-rail   { left: 8px; }
  .smw-dots        { bottom: 16px; }
}