/* Ten jobs motion piece (shared by the homepage and how-we-build.html).
   The stage is drawn at 760 x 500 and scaled to its container by jobs-motion.js.
   Without JavaScript, or with reduced motion, it shows the finished website. */
.jm{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:959px){.jm{grid-template-columns:minmax(0,1fr)}}
.jm-stage{position:relative;aspect-ratio:760/500;border-radius:28px;background:var(--n100);border:1px solid var(--n300);overflow:hidden}
.jm-canvas{position:absolute;left:0;top:0;width:760px;height:500px;transform-origin:0 0;transform:scale(var(--jm-s,1));font-family:var(--font);color:var(--ink)}

/* Before the design: the brief board (jobs 01 to 03) */
.jm-board{position:absolute;inset:0;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.jm-q{position:absolute;padding:14px 18px;border-radius:4px 4px 16px 4px;background:var(--accent);font-weight:800;font-size:19px;letter-spacing:-.01em;box-shadow:0 14px 26px -12px rgba(21,25,25,.35);opacity:0;transform:translateY(16px) rotate(var(--r,0deg));transition:opacity .5s var(--ease),transform .6s var(--ease)}
.jm-q1{left:56px;top:60px;--r:-3deg}
.jm-q2{left:318px;top:36px;--r:2deg;background:var(--accent-300)}
.jm-q3{left:452px;top:112px;--r:-1.5deg}
.jm-pos{position:absolute;left:130px;top:186px;width:500px;padding:20px 24px;border-radius:18px;background:var(--ink);color:#fff;display:flex;flex-direction:column;gap:6px;opacity:0;transform:scale(.94);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.jm-pos span{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.jm-pos strong{font-size:22px;line-height:1.2;letter-spacing:-.02em}
.jm-paths{position:absolute;inset:0;width:760px;height:500px}
.jm-paths path{stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320;transition:stroke-dashoffset 1.1s var(--ease)}
.jm-paths path:nth-child(2){transition-delay:.15s}.jm-paths path:nth-child(3){transition-delay:.3s}
.jm-who,.jm-next{position:absolute;padding:8px 14px;border-radius:999px;background:#fff;border:2px solid var(--ink);font-size:15px;font-weight:800;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.jm-who1{left:62px;top:306px}.jm-who2{left:338px;top:306px}.jm-who3{left:596px;top:306px}
.jm-next{left:326px;top:446px;background:var(--accent);border-color:var(--accent)}

/* The website (jobs 04 to 10) */
.jm-site{position:absolute;inset:0;opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.jm-browser{position:absolute;left:28px;top:30px;width:560px;height:440px;border-radius:16px;background:#fff;border:1px solid var(--n300);box-shadow:0 26px 60px -24px rgba(21,26,27,.4);overflow:hidden}
.jm-bar{height:32px;display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--n100);border-bottom:1px solid var(--n300)}
.jm-bar i{width:9px;height:9px;border-radius:50%;background:var(--n400)}
.jm-bar span{margin:0 auto;padding:3px 18px;border-radius:999px;background:#fff;font-size:11px;font-weight:600;color:var(--n700)}
.jm-page{--c-ink:var(--n500);--c-acc:var(--n200);--c-img:var(--n200);padding:16px 20px;display:flex;flex-direction:column;gap:16px}
.jm-nav{display:flex;align-items:center;gap:12px;height:28px;font-size:12px;font-weight:700;color:var(--c-ink)}
.jm-logo{width:28px;height:28px;border-radius:7px;background:var(--c-ink);transition:background .6s}
.jm-nav span,.jm-nav em{opacity:0;transform:translateY(-6px);transition:opacity .4s var(--ease),transform .4s var(--ease),color .6s,background .6s}
.jm-nav span:nth-of-type(2){transition-delay:.08s}.jm-nav span:nth-of-type(3){transition-delay:.16s}.jm-nav span:nth-of-type(4){transition-delay:.24s}
.jm-nav em{margin-left:auto;font-style:normal;padding:6px 12px;border-radius:999px;background:var(--c-acc);color:var(--ink);transition-delay:.3s}
.jm-hero{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:center}
.jm-h{font-size:30px;font-weight:900;line-height:1;letter-spacing:-.035em;color:var(--c-ink);transition:color .6s}
.jm-copy p{margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--n600)}
.jm-cta{display:flex;gap:8px;margin-top:14px}
.jm-cta span{padding:8px 12px;border-radius:999px;font-size:11.5px;font-weight:800;background:var(--c-acc);transition:background .6s,color .6s}
.jm-cta .jm-btn2{background:transparent;border:1.5px solid var(--c-ink);color:var(--c-ink)}
.jm-img{position:relative;height:150px;border-radius:14px;background:var(--c-img);overflow:hidden;transition:background .6s}
.jm-img i{position:absolute;border-radius:50%;background:rgba(255,255,255,.45)}
.jm-img i:first-child{width:90px;height:90px;right:-14px;top:-18px}.jm-img i:last-child{width:56px;height:56px;left:18px;bottom:16px}
.jm-lower{display:grid;grid-template-columns:1fr 1.15fr;gap:14px}
.jm-intake,.jm-guides{min-height:150px;padding:14px;border-radius:14px;background:var(--n100);display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700}
.jm-intake strong,.jm-guides strong{font-size:13px;font-weight:900;margin-bottom:2px}
.jm-intake span,.jm-guides span{padding:7px 10px;border-radius:9px;background:#fff;border:1px solid var(--n300);opacity:0;transform:translateX(-8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.jm-intake span.on{border-color:var(--ink);background:var(--accent-100)}
.jm-intake span:nth-of-type(2),.jm-guides span:nth-of-type(2){transition-delay:.1s}
.jm-intake span:nth-of-type(3),.jm-guides span:nth-of-type(3){transition-delay:.2s}
.jm-intake strong,.jm-guides strong{opacity:.35;transition:opacity .4s}
.jm-phone{position:absolute;left:606px;top:148px;width:126px;height:256px;border-radius:24px;background:var(--ink);padding:6px;box-shadow:0 22px 40px -18px rgba(0,0,0,.5);opacity:0;transform:translateX(24px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.jm-phone-screen{height:100%;border-radius:19px;background:#fff;padding:22px 10px 10px;display:flex;flex-direction:column;gap:7px}
.jm-phone-screen b{height:44px;border-radius:8px;background:var(--accent)}
.jm-phone-screen i{height:7px;border-radius:4px;background:var(--n300)}.jm-phone-screen i.short{width:60%}
.jm-phone-screen span{margin-top:auto;height:22px;border-radius:999px;background:var(--ink)}
.jm-speed{position:absolute;left:612px;top:44px;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border-radius:999px;background:#fff;border:1px solid var(--n300);font-size:11px;font-weight:800;line-height:1.1;opacity:0;transform:scale(.9);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.jm-speed svg{width:34px;height:34px;transform:rotate(-90deg)}
.jm-speed circle{fill:none;stroke:var(--n200);stroke-width:5}
.jm-speed .jm-arc{stroke:#1f9d55;stroke-dasharray:101;stroke-dashoffset:101;stroke-linecap:round;transition:stroke-dashoffset 1.2s var(--ease) .2s}
.jm-tick{position:absolute;width:26px;height:26px;border-radius:50%;background:#1f9d55;color:#fff;font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px rgba(31,157,85,.18);opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.jm-t1{left:556px;top:76px}.jm-t2{left:40px;top:222px;transition-delay:.12s}.jm-t3{left:40px;top:322px;transition-delay:.24s}.jm-t4{left:560px;top:322px;transition-delay:.36s}.jm-t5{left:716px;top:138px;transition-delay:.48s}.jm-t6{left:722px;top:36px;transition-delay:.6s}

/* Step states. JS sets data-step; the default markup is step 10 (finished). */
.jm[data-step="1"] .jm-q,.jm[data-step="2"] .jm-q,.jm[data-step="3"] .jm-q{opacity:1;transform:translateY(0) rotate(var(--r,0deg))}
.jm[data-step="2"] .jm-q,.jm[data-step="3"] .jm-q{opacity:.38}
.jm[data-step="2"] .jm-pos,.jm[data-step="3"] .jm-pos{opacity:1;transform:scale(1)}
.jm[data-step="3"] .jm-paths path{stroke-dashoffset:0}
.jm[data-step="3"] .jm-who,.jm[data-step="3"] .jm-next{opacity:1;transform:translateY(0)}
.jm[data-step="3"] .jm-next{transition-delay:.7s}
.jm:not([data-step="1"]):not([data-step="2"]):not([data-step="3"]) .jm-board{opacity:0;transform:scale(.96);pointer-events:none}
.jm:not([data-step="1"]):not([data-step="2"]):not([data-step="3"]) .jm-site{opacity:1;transform:none}
.jm[data-step="5"] .jm-nav span,.jm[data-step="5"] .jm-nav em,
.jm[data-step="6"] .jm-nav span,.jm[data-step="6"] .jm-nav em,.jm[data-step="7"] .jm-nav span,.jm[data-step="7"] .jm-nav em,
.jm[data-step="8"] .jm-nav span,.jm[data-step="8"] .jm-nav em,.jm[data-step="9"] .jm-nav span,.jm[data-step="9"] .jm-nav em,
.jm[data-step="10"] .jm-nav span,.jm[data-step="10"] .jm-nav em{opacity:1;transform:none}
.jm[data-step="6"] .jm-page,.jm[data-step="7"] .jm-page,.jm[data-step="8"] .jm-page,.jm[data-step="9"] .jm-page,.jm[data-step="10"] .jm-page{--c-ink:var(--ink);--c-acc:var(--accent);--c-img:linear-gradient(135deg,var(--accent-300),var(--accent-600))}
.jm[data-step="7"] .jm-phone,.jm[data-step="8"] .jm-phone,.jm[data-step="9"] .jm-phone,.jm[data-step="10"] .jm-phone,
.jm[data-step="7"] .jm-speed,.jm[data-step="8"] .jm-speed,.jm[data-step="9"] .jm-speed,.jm[data-step="10"] .jm-speed{opacity:1;transform:none}
.jm[data-step="7"] .jm-arc,.jm[data-step="8"] .jm-arc,.jm[data-step="9"] .jm-arc,.jm[data-step="10"] .jm-arc{stroke-dashoffset:8}
.jm[data-step="8"] .jm-intake span,.jm[data-step="9"] .jm-intake span,.jm[data-step="10"] .jm-intake span,
.jm[data-step="9"] .jm-guides span,.jm[data-step="10"] .jm-guides span{opacity:1;transform:none}
.jm[data-step="8"] .jm-intake strong,.jm[data-step="9"] .jm-intake strong,.jm[data-step="10"] .jm-intake strong,
.jm[data-step="9"] .jm-guides strong,.jm[data-step="10"] .jm-guides strong{opacity:1}
.jm[data-step="10"] .jm-tick{opacity:1;transform:scale(1)}
/* Spotlight: the element the current job adds gets a soft yellow ring */
.jm[data-step="8"] .jm-intake,.jm[data-step="9"] .jm-guides{box-shadow:0 0 0 3px var(--accent)}
.jm-intake,.jm-guides{transition:box-shadow .4s}

/* Job list and controls */
.jm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--n300)}
.jm-list li{border-bottom:1px solid var(--n300)}
.jm-list button{width:100%;display:flex;align-items:baseline;gap:14px;padding:12px 4px;border:0;background:none;text-align:left;font-weight:800;font-size:17px;letter-spacing:-.01em;line-height:1.25;color:var(--n700);cursor:pointer;transition:color .25s}
.jm-list button span{font-size:12px;letter-spacing:.12em;color:var(--accent-700);min-width:20px}
.jm-list button:hover,.jm-list button[aria-current="step"]{color:var(--ink)}
.jm-list p{font-size:15px;line-height:1.5;color:var(--n800);padding:0 4px 14px 38px;margin-top:-4px}
.jm-js .jm-list p{display:none}
.jm-js .jm-list button[aria-current="step"]+p{display:block}
.jm-list button[aria-current="step"]{font-size:21px}
.jm-ctrl{display:flex;align-items:center;gap:14px;margin-top:18px}
.jm-play{flex-shrink:0;padding:9px 16px;border-radius:999px;border:2px solid var(--ink);background:transparent;font-weight:800;font-size:14px;cursor:pointer}
.jm-play:hover{background:var(--accent)}
.jm-progress{flex:1;height:4px;border-radius:999px;background:var(--n200);overflow:hidden}
.jm-progress b{display:block;height:100%;width:calc(var(--jm-p,10) * 10%);background:var(--ink);transition:width .5s var(--ease)}
@media (max-width:959px){
  .jm-js .jm-list{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px;border:0;padding:2px 2px 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .jm-js .jm-list::-webkit-scrollbar{display:none}
  .jm-js .jm-list li{border:0;flex:0 0 auto;scroll-snap-align:start}
  .jm-js .jm-list button{min-height:44px;padding:10px 16px;border-radius:999px;background:#fff;border:1px solid var(--n300);font-size:14px;white-space:nowrap;align-items:center}
  .jm-js .jm-list button[aria-current="step"]{font-size:14px;background:var(--ink);color:#fff;border-color:var(--ink)}
  .jm-js .jm-list button[aria-current="step"] span{color:var(--accent)}
  .jm-js .jm-list p,.jm-js .jm-list button[aria-current="step"]+p{display:none}
  .jm-js .jm-caption{display:block}
}
.jm-caption{display:none;margin-top:16px;font-size:16px;line-height:1.5;color:var(--n800);min-height:3em}
.jm-caption strong{display:block;font-size:20px;font-weight:900;letter-spacing:-.02em;color:var(--ink);margin-bottom:4px}
@media (prefers-reduced-motion:reduce){.jm *{transition:none!important}}
.jm-side{min-width:0}