/* experience page */
.cj{font-family:'Figtree',system-ui,sans-serif;color:#F3F0E6;background:#122A1F;position:relative;overflow-x:clip;-webkit-font-smoothing:antialiased;animation:pageIn .7s ease both}
.lbl{font-family:'Patrick Hand',cursive;font-size:22px;color:#C9A45C;display:inline-flex;align-items:center;gap:12px;margin:0}
.h2{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:clamp(40px,5.4vw,76px);line-height:.98;margin:10px 0 0;text-transform:uppercase;text-wrap:balance}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.65;color:rgba(243,240,230,.8);max-width:52ch;margin:0;text-wrap:pretty}
@keyframes rvUp{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes imgPar{from{transform:translateY(-6%) scale(1.12)}to{transform:translateY(6%) scale(1.12)}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.rv{animation:rvUp linear both;animation-timeline:view();animation-range:entry 0% entry 55%}.rv.d2{animation-range:entry 10% entry 70%}.par img{animation:imgPar linear both;animation-timeline:view()}}}
.sec{padding:clamp(84px,10vw,140px) 0;position:relative}
.ex-hero{position:relative;overflow:hidden;padding:clamp(80px,10vw,130px) 0 clamp(70px,8vw,110px);text-align:center}
.h1{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:clamp(56px,8.6vw,128px);line-height:.9;margin:16px auto 26px;text-transform:uppercase;max-width:12ch;animation:wordIn 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes wordIn{from{opacity:0;transform:translateY(40px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.ex-route{position:absolute;left:0;right:0;bottom:24px;width:100%;height:80px;pointer-events:none}
.ex-route .mv{stroke-dasharray:10 16;animation:dashmv 2.6s linear infinite}
@keyframes dashmv{to{stroke-dashoffset:-52}}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:clamp(40px,6vw,96px);align-items:center;padding:clamp(48px,6vw,80px) 0}
.row + .row{border-top:1px dashed rgba(243,240,230,.14)}
.row.flip .media{order:2}
@media (max-width:960px){.row.flip .media{order:0}}
.media{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/11;box-shadow:0 40px 70px -34px rgba(0,0,0,.95)}
.media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.12)}
.media .tag{position:absolute;left:18px;bottom:16px;font-family:'Patrick Hand',cursive;font-size:22px;background:#E8DCC4;color:#2A1F14;padding:6px 16px;transform:rotate(-3deg);box-shadow:0 10px 20px -8px rgba(0,0,0,.6)}
.num{font-family:'Patrick Hand',cursive;font-size:28px;color:#C9A45C}
.row h2{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:clamp(40px,4.8vw,66px);line-height:.95;margin:6px 0 20px;text-transform:uppercase}
.jl-board{padding:14px;border-radius:30px;box-shadow:0 50px 90px -40px rgba(0,0,0,.9);position:relative}
.jl-in{border-radius:20px;padding:clamp(48px,6vw,84px) clamp(18px,5vw,64px);position:relative;overflow:hidden}
.jl-track{position:relative;margin:56px 0 0;height:44px}
.jl-track::before{content:"";position:absolute;left:calc(100% / 12);right:calc(100% / 12);top:21px;height:2px;background-image:linear-gradient(90deg,rgba(243,240,230,.55) 55%,transparent 0);background-size:16px 2px;animation:march 1s linear infinite}
@keyframes march{to{background-position:16px 0}}
.jl-bus{position:absolute;top:0;width:44px;height:44px;border-radius:50%;background:#C9A45C;color:#1A1408;display:flex;align-items:center;justify-content:center;transition:left .9s cubic-bezier(.65,0,.35,1);box-shadow:0 10px 24px -8px rgba(0,0,0,.7)}
.jl-bus svg{width:24px;height:24px}
.jl-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:18px}
.jl-step{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:96px;padding:14px 6px;border:0;border-radius:16px;background:transparent;color:rgba(243,240,230,.7);cursor:pointer;font:700 14px/1 'Figtree',sans-serif;letter-spacing:.16em;text-transform:uppercase;transition:background-color .3s,color .3s,transform .3s}
.jl-step .ic{width:52px;height:52px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(243,240,230,.45);display:flex;align-items:center;justify-content:center;transition:all .35s}
.jl-step .ic svg{width:24px;height:24px}
.jl-step:hover{color:#F3F0E6;transform:translateY(-3px)}
.jl-step.on{color:#F3F0E6;background:rgba(243,240,230,.07)}
.jl-step.on .ic{background:#F3F0E6;color:#12291E;box-shadow:none;transform:rotate(-8deg) scale(1.08)}
.jl-panel{margin-top:30px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;border:2px dashed rgba(243,240,230,.28);border-radius:20px;padding:28px 32px;animation:panelIn .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}}
.jl-panel .big{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:clamp(44px,6vw,80px);line-height:.9;text-transform:uppercase}
.jl-panel p{margin:0;font-size:clamp(18px,1.6vw,22px);line-height:1.5}
.jl-panel .stepn{font-family:'Patrick Hand',cursive;font-size:22px;color:#C9A45C}
@media (max-width:820px){.jl-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.jl-track{display:none}.jl-panel{grid-template-columns:1fr;gap:10px;padding:22px}}