/* ============================================================= *
 *  Journey Steps Flow — zigzag path (ref: steps-flow.framer)    *
 *  Alternating text/image rows + gold snake path                *
 * ============================================================= */

.journey{
  --j-gold:var(--gold,#d4af37);
  --j-radius:28px;
  --j-gap:clamp(1.6rem,3.5vw,2.8rem);
  position:relative;
  padding:clamp(48px,6vh,72px) 0;
  background:var(--pearl,#eef0f2);
  color:var(--ink,#17151a);
  overflow:hidden;
}
.journey .j-head{
  max-width:var(--maxw,1480px);
  margin:0 auto clamp(1.4rem,2.6vh,2rem);
  text-align:left;
  padding-inline:var(--edge,clamp(20px,5vw,72px));
}
.journey .j-head .eyebrow{justify-content:flex-start;color:var(--purple)}
.journey .j-head .eyebrow::before{background:var(--purple)}
.journey .j-head h2{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(2rem,4.8vw,3.5rem);
  line-height:1.14;
  letter-spacing:.004em;
  margin:.7rem 0 .55rem;
  max-width:none;
}
.journey .j-head h2 em{color:var(--purple);font-style:italic}
.journey .j-head p{
  margin:0;
  max-width:none;
  color:var(--muted,#4b4a50);
  font-size:.95rem;line-height:1.75;font-weight:300;
}

.jflow{
  position:relative;
  max-width:min(1120px,100%);
  width:100%;
  margin:0 auto;
  padding-inline:var(--edge,clamp(20px,5vw,72px));
}

/* Snake path behind steps */
.jflow-path{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
  overflow:visible;
}
.jflow-path path{
  fill:none;
  stroke:var(--j-gold);
  stroke-width:3.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset .05s linear;
}
.jflow-path .jflow-dot{
  fill:var(--j-gold);
}

.jstep{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--j-gap);
  align-items:center;
  margin-bottom:clamp(2.2rem,5vh,3.4rem);
}
.jstep:last-child{margin-bottom:0}
.jstep[data-side="right"]{
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
}
.jstep[data-side="right"] .jstep-copy{order:2}
.jstep[data-side="right"] .jstep-media{order:1}

.jstep-copy{
  padding:clamp(.5rem,2vw,1.2rem) clamp(0rem,2vw,1rem);
  max-width:28rem;
}
.jstep[data-side="left"] .jstep-copy{justify-self:start}
.jstep[data-side="right"] .jstep-copy{justify-self:end;text-align:left}

.jstep-num{
  display:block;
  font-family:var(--font-serif,'Playfair Display'),Georgia,serif;
  font-weight:500;
  font-size:clamp(3.6rem,8vw,5.8rem);
  line-height:.9;
  letter-spacing:-.03em;
  color:var(--j-gold);
  margin:0 0 .85rem;
}

.jstep-copy h3{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(1.45rem,2.6vw,2rem);
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:0 0 .7rem;
}
.jstep-copy p{
  margin:0;
  max-width:34ch;
  font-size:clamp(.9rem,1.2vw,1.02rem);
  line-height:1.7;
  color:var(--muted,#4b4a50);
  font-weight:300;
}

.jstep-media{
  margin:0;
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--j-radius);
  overflow:hidden;
  background:linear-gradient(160deg,#e8e6ea,#d8d5dc);
  box-shadow:0 18px 48px -28px rgba(23,21,26,.35);
  transform:translateY(18px);
  opacity:0;
  transition:transform .9s cubic-bezier(.19,1,.22,1),opacity .7s ease;
}
/* Real <img> — urls must not live in CSS vars (resolved vs this stylesheet → /assets/assets/…) */
.jstep-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
/* Portrait sources in a 4:3 frame — bias upward so faces stay in frame */
.jstep-media[data-focus="upper"] img{object-position:center 32%}
.jstep-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(160deg,rgba(23,21,26,.04),rgba(23,21,26,.16));
}
.jstep-copy{
  transform:translateY(18px);
  opacity:0;
  transition:transform .9s cubic-bezier(.19,1,.22,1),opacity .7s ease;
}
.jstep.is-in .jstep-media,
.jstep.is-in .jstep-copy{
  transform:none;
  opacity:1;
}
.jstep[data-side="left"].is-in .jstep-copy{transition-delay:.05s}
.jstep[data-side="left"].is-in .jstep-media{transition-delay:.12s}
.jstep[data-side="right"].is-in .jstep-media{transition-delay:.05s}
.jstep[data-side="right"].is-in .jstep-copy{transition-delay:.12s}

@media(max-width:820px){
  .jflow-path{display:none}
  .jstep,
  .jstep[data-side="right"]{
    grid-template-columns:1fr;
    gap:1.25rem;
    margin-bottom:clamp(2.6rem,7vh,3.6rem);
  }
  .jstep[data-side="right"] .jstep-copy,
  .jstep[data-side="right"] .jstep-media,
  .jstep .jstep-copy,
  .jstep .jstep-media{order:initial}
  .jstep-media{order:-1;aspect-ratio:16/11;border-radius:20px}
  .jstep-copy{max-width:none;padding:0}
  .jstep-num{font-size:clamp(3rem,14vw,4rem)}
}

@media(prefers-reduced-motion:reduce){
  .jstep-media,.jstep-copy{transition:none;opacity:1;transform:none}
  .jflow-path path{stroke-dashoffset:0!important}
}