/* Scroll journey (journey.js). Without JS the cards are plain, readable sections; motion only under .jx-on. */
.journey{position:absolute;left:0;right:0;top:var(--jtop,100%);z-index:3;color:#fff;background:#07060d;--jh:calc(100dvh - 110px)}
.journey::before{content:"";position:absolute;left:0;right:0;top:-120px;height:120px;background:linear-gradient(to bottom,rgba(7,6,13,0),#07060d);pointer-events:none}
.jx-stage{position:relative;height:min(70vh,560px);overflow:hidden;pointer-events:none}
.journey:not(.jx-ready) .jx-stage{display:none}
.jx-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.jx-sky{opacity:.9}
.jx-hud{position:absolute;right:var(--pad-x,24px);bottom:18px;margin:0;font:500 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:rgba(255,255,255,.55);text-transform:uppercase;white-space:nowrap}
.jx-steps{position:relative;z-index:2;padding:0 var(--pad-x,24px) 48px}
.jx-step{padding:28px 0}
.jx-card{position:relative;width:min(460px,100%);box-sizing:border-box;padding:20px 22px 18px;border-radius:24px;background:rgba(16,13,28,.62);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.jx-plain{background:rgba(12,10,22,.42)}
.jx-kicker{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#c3b4ff}
.jx-h{margin:0;font-size:clamp(30px,2.6vw + 12px,52px);line-height:1;letter-spacing:-.04em;font-weight:700;text-wrap:balance}
.jx-line{margin:14px 0 0;font-size:clamp(16px,.5vw + 12px,19px);line-height:1.45;color:rgba(255,255,255,.8);max-width:34ch}
.jx-shot{margin:0 0 14px;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:#120f20;border:1px solid rgba(255,255,255,.1)}
.jx-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.jx-noshot{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;text-align:center;background:radial-gradient(120% 90% at 50% 0%,rgba(139,123,255,.22),rgba(18,15,32,.9) 70%)}
.jx-coords{font:600 clamp(22px,2vw,30px)/1.05 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;color:#fff}
.jx-nos{font-size:12px;color:rgba(255,255,255,.6);max-width:30ch}
.jx-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px;font-size:12px}
.jx-label{color:rgba(255,255,255,.66)}
.jx-status{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:980px;font-weight:600;background:rgba(195,180,255,.16);color:#d9d0ff}
.jx-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.jx-status[data-st="Live"]{background:rgba(52,199,89,.16);color:#7ee2a0}
.jx-status[data-st="In progress"]{background:rgba(255,178,127,.16);color:#ffc79e}
.jx-name{margin:0;font-size:clamp(22px,1vw + 14px,28px);line-height:1.1;letter-spacing:-.025em}
.jx-kind{margin:4px 0 0;font-size:14px;color:rgba(255,255,255,.7)}
.jx-note{margin:10px 0 0;font-size:15px;line-height:1.45;color:rgba(255,255,255,.88)}
.jx-upd{margin:10px 0 0;font:500 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(255,255,255,.5)}
.jx-upd:empty{display:none}
.jx-card[data-ind]::after{content:"";position:absolute;left:22px;top:-1px;width:44px;height:2px;border-radius:2px;background:var(--ic,#c3b4ff)}
[data-ind="fit"]{--ic:#ffb27f}[data-ind="health"]{--ic:#ff8fb8}[data-ind="housing"]{--ic:#7fe3b8}[data-ind="mfg"]{--ic:#7cc8ff}[data-ind="ai"]{--ic:#c3b4ff}[data-ind="ev"]{--ic:#9ef0ff}[data-ind="lux"]{--ic:#f3d27a}
.jx-legend{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px;font-size:13px;color:rgba(255,255,255,.74)}
.jx-legend li{display:flex;align-items:center;gap:10px}
.jx-legend i{flex:none;width:26px;height:0;border-top:2px solid #ffb27f}
.jx-legend .lg-sector{border-top:2px dashed rgba(255,255,255,.55)}
.jx-sub{margin:16px 0 8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.jx-sectors{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.jx-sectors li{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:980px;font-size:12.5px;border:1px dashed rgba(255,255,255,.28);color:rgba(255,255,255,.86)}
.jx-sectors li::before{content:"";width:6px;height:6px;border-radius:50%;border:1.5px solid var(--ic)}
.jx-plans{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.jx-plans li{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 12px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.jx-plans b{font-size:15px}.jx-plans span{font-size:18px;font-weight:700;letter-spacing:-.02em}.jx-plans small{font-size:12px;font-weight:500;color:rgba(255,255,255,.6)}
.jx-plans em{grid-column:1/-1;font-style:normal;font-size:12.5px;color:rgba(255,255,255,.62)}
.jx-btns{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.jx-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:980px;font-weight:600;font-size:15px;color:#fff;text-decoration:none!important;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.06)}
.jx-btn-p{background:#fff;color:#0c0a12;border-color:#fff}
.jx-cue{position:absolute;z-index:3;left:var(--pad-x,24px);bottom:22px;display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 12px;border-radius:980px;font:500 12px/1 inherit;font-family:inherit;color:rgba(255,255,255,.85);background:rgba(10,8,20,.34);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer}
.jx-cue i{width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg)}
@media (max-width:1180px){.jx-cue{display:none}}
/* little give on buttons (site-wide, classy: 1-2 px and 3%) */
.jx-btn,.jx-cue,.ask-send,.ask-chips button,.car-btn,.btn,.signin-btn,.chat-toggle{transition:transform .35s cubic-bezier(.34,1.56,.64,1),background-color .2s,box-shadow .25s,border-color .2s}
@media (hover:hover){.jx-btn:hover,.btn:hover,.signin-btn:hover,.chat-toggle:hover,.ask-chips button:hover{transform:translateY(-1px)}.jx-cue:hover{transform:translateY(-1px)}}
.jx-btn:active,.btn:active,.signin-btn:active,.chat-toggle:active,.ask-chips button:active,.ask-send:active,.car-btn:active{transform:scale(.97);transition-duration:.12s}
.jx-cue:active{transform:scale(.97)}

/* ---- motion mode ---- */
.jx-on .jx-stage{position:sticky;top:var(--stk,0px);height:var(--jh)}
.jx-on .jx-steps{margin-top:calc(-1 * var(--jh))}
.jx-on .jx-step{min-height:calc(var(--jh) * 1.5);padding:0;box-sizing:border-box}
.jx-on .jx-step:first-child{min-height:calc(var(--jh) * 1.15)}
.jx-on .jx-step:last-child{min-height:calc(var(--jh) * 1.1)}
.jx-on .jx-pin{position:sticky;top:var(--pt,20%)}
.jx-on .jx-card{opacity:0;transform:translateY(34px) scale(.965);transform-origin:50% 100%;transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.jx-on .jx-card > *{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.jx-on .jx-shot{clip-path:inset(0 0 100% 0 round 14px);transition:clip-path 1s cubic-bezier(.22,1,.36,1),opacity .6s ease}
.jx-on .is-in .jx-card{opacity:1;transform:none}
.jx-on .is-in .jx-card > *{opacity:1;transform:none}
.jx-on .is-in .jx-shot{clip-path:inset(0 0 0 0 round 14px)}
.jx-on .is-in .jx-card > :nth-child(2){transition-delay:.08s}.jx-on .is-in .jx-card > :nth-child(3){transition-delay:.14s}.jx-on .is-in .jx-card > :nth-child(4){transition-delay:.2s}.jx-on .is-in .jx-card > :nth-child(5){transition-delay:.26s}.jx-on .is-in .jx-card > :nth-child(n+6){transition-delay:.32s}
.jx-on .is-in .jx-h{letter-spacing:-.04em}
.jx-on .jx-h{letter-spacing:-.02em;transition:opacity .6s ease,transform .8s cubic-bezier(.22,1,.36,1),letter-spacing 1.2s cubic-bezier(.22,1,.36,1)}
@media (min-width:821px){.jx-on .jx-card{width:min(440px,36vw)}}
@media (max-width:820px){
  .journey{--jh:calc(100dvh - 120px)}
  .jx-steps{padding:0 14px 32px}
  .jx-card{padding:16px 16px 14px;border-radius:20px}
  .jx-shot{aspect-ratio:16/8.5;margin-bottom:10px}
  .jx-note{font-size:14px}
  .jx-hud{left:14px;right:auto;top:12px;bottom:auto;font-size:10px}
  .jx-on .jx-step{min-height:calc(var(--jh) * 1.35)}
  .jx-on .jx-card{background:rgba(14,11,26,.74)}
}
@media (prefers-reduced-motion:reduce){.jx-card,.jx-card > *,.jx-shot{transition:none!important}.jx-cue{display:none}}
