/* The Journey page */
.jhero { padding-bottom: 10px; }
.jcue { margin: 34px 0 0; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--label); }
.jcue svg { width: 14px; height: 22px; animation: jcue 1.6s ease-in-out infinite; }
@keyframes jcue { 0%, 100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(6px); opacity: 1; } }
.journey { position: relative; }
.jviewport { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.jline { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(var(--line-rgb), .1); }
.jline i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(90deg, transparent, var(--accent)); transform-origin: left; transform: scaleX(0); opacity: .7; }
.jtrack { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; gap: 14vw; padding: 0 18vw 0 34vw; will-change: transform; }
.jstep { position: relative; display: flex; align-items: center; gap: 44px; flex-shrink: 0; }
.jmedia { position: relative; flex-shrink: 0; }
.jmedia.tall { width: clamp(240px, 21vw, 320px); }
.jmedia.tall .film { aspect-ratio: 9 / 15; }
.jmedia.wide { width: clamp(380px, 34vw, 540px); }
.jmedia.wide .film { aspect-ratio: 4 / 3; }
.jtext { width: clamp(320px, 30vw, 450px); background: rgba(var(--bg-rgb), .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 6px 0; }
.jlabel { margin: 0; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.jlabel span { color: var(--label); margin-right: 10px; }
.jtext h2 { margin: 12px 0 0; font-size: 2rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: var(--heading); }
.jbody { margin: 14px 0 0; font-size: .9rem; line-height: 1.7; color: var(--muted); }
.jchecks { margin: 18px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jchecks li { padding: 10px 12px; border-radius: 4px; border: 1px solid rgba(var(--line-rgb), .1); background: rgba(var(--card-rgb), .55); font-size: .78rem; line-height: 1.35; color: var(--ink); transition: border-color .4s ease, transform .5s var(--ease-out); }
.jchecks li:hover { border-color: rgba(var(--accent-rgb), .45); transform: translateY(-2px); }
.jthumbs { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jthumbs img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; }
.jcount { position: absolute; right: 112px; bottom: 34px; margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.jcount b { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--ink); }
.estimate { position: relative; display: flex; justify-content: center; padding: 120px 24px 140px; }
.est { width: min(440px, 100%); }
.est h3, .est .sub { text-align: center; }
.est-dots { display: flex; justify-content: center; gap: 6px; margin: 0 0 6px; }
.est-dots i { width: 6px; height: 6px; border-radius: 99px; background: rgba(var(--line-rgb), .2); transition: width .5s var(--ease-out), background .4s ease; }
.est-dots i.on { width: 18px; background: var(--accent); }
.est-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.est-step[hidden] { display: none; }
.est-q { padding: 0; margin: 12px 0 10px; font-size: .95rem; color: var(--heading); }
.est-opts { display: grid; gap: 8px; }
.est-opts label { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 6px; border: 1px solid rgba(var(--line-rgb), .14); cursor: pointer; font-size: .88rem; color: var(--ink); transition: border-color .3s ease, background .3s ease; }
.est-opts label:hover { border-color: rgba(var(--accent-rgb), .45); }
.est-opts label:has(input:checked) { border-color: var(--accent); background: rgba(var(--accent-rgb), .07); }
.est-opts input { accent-color: var(--accent); }

@media (max-width: 1024px) {
  .jviewport { position: relative; height: auto; overflow: visible; }
  .jline, .jcount { display: none; }
  .jtrack { position: relative; flex-direction: column; gap: 70px; padding: 40px 24px 0; transform: none !important; }
  .jstep { flex-direction: column; align-items: stretch; gap: 22px; width: 100%; max-width: 560px; }
  .jmedia.tall, .jmedia.wide { width: 100%; }
  .jmedia.tall .film { aspect-ratio: 4 / 5; }
  .jtext { width: 100%; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .jtext h2 { font-size: 1.6rem; }
  .estimate { padding: 90px 20px 100px; }
}