/* =================================================================
   OMEGA INTERIO — MODULAR JOURNEYS PAGE
   ================================================================= */
.jintro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.jintro .lead { margin-bottom: 30px; }
.jphases { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jphases span { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; color: var(--text-70); font-size: .92rem; transition: border-color .4s, transform .5s var(--ease-out), background .4s; }
.jphases b { font-family: var(--font-display); color: var(--brown); font-weight: 400; letter-spacing: .1em; font-size: 1.1rem; }
.jphases span:hover { border-color: var(--caramel); background: var(--bg-alt); transform: translateY(-4px); }

.jsteps .container { position: relative; }
.jline { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--line); }
.jline i { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--caramel); transform-origin: top; transform: scaleY(var(--p, 0)); }
.jlist { display: grid; gap: clamp(26px, 4vw, 50px); position: relative; }
.jstep { position: relative; display: grid; grid-template-columns: 1fr 110px 1fr; align-items: center; }
.jstep__card { grid-column: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 26px 28px; transition: transform .6s var(--ease-out), box-shadow .6s, border-color .4s; text-align: right; }
.jstep--r .jstep__card { grid-column: 3; text-align: left; }
.jstep__num { grid-column: 2; grid-row: 1; justify-self: center; position: relative; width: 74px; height: 74px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; z-index: 1; transition: background .5s, transform .6s var(--ease-out); }
.jstep__num > span:last-child { font-family: var(--font-display); color: var(--brown); font-size: 1.3rem; transition: color .4s; position: relative; }
.step__ring { position: absolute; inset: -10px; border-radius: 50%; border: 3px dotted var(--caramel); opacity: 0; transition: opacity .4s; }
.jstep:hover .jstep__num, .jstep.is-current .jstep__num { background: var(--brown); transform: scale(1.08); box-shadow: none; }
.jstep:hover .jstep__num > span:last-child, .jstep.is-current .jstep__num > span:last-child { color: var(--bg); }
.jstep:hover .step__ring, .jstep.is-current .step__ring { opacity: 1; animation: ringSpin 6s linear infinite; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
.jstep:hover .jstep__card { transform: translateY(-6px); box-shadow: var(--ink-shadow); border-color: transparent; }
.jstep__label { font-family: var(--font-script); color: var(--caramel); font-size: 1.55rem; line-height: 1.2; margin: 0 0 4px; }
.jstep__card .h4 { margin-bottom: 10px; }
.jstep__card p:last-child { color: var(--text-70); margin: 0; font-size: .95rem; }

@media (max-width: 1023px) { .jintro__grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .jline { left: 37px; }
  .jstep, .jstep--r { grid-template-columns: 74px 1fr; gap: 18px; align-items: start; }
  .jstep__num { grid-column: 1; }
  .jstep__card, .jstep--r .jstep__card { grid-column: 2; text-align: left; padding: 20px; }
  .jphases { grid-template-columns: 1fr; }
}