/* MODZGPX Motion Home: dark full-bleed page over one fixed WebGL canvas. */
body:has(.mgm){background:var(--u-bg,#07060d)}
body:has(.mgm) :is(.wp-site-blocks,main,.entry-content,.wp-block-post-content){background:transparent}
.mgm{--mg-a:var(--u-a,#8f7bff);--mg-b:var(--u-b,#ff6a3d);--mg-ink:var(--u-ink,#f4f2ff);--mg-mut:var(--u-mut,#9a97b5);--mg-r:var(--u-rad,22px);--mg-ts:var(--u-ts,1);position:relative;width:100vw;margin-left:calc(50% - 50vw);color:var(--mg-ink);overflow-x:clip;font-family:inherit}
.mgm *{box-sizing:border-box}
.mgm-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.mgm.is-3d .mgm-canvas{opacity:1}
.mgm-sec{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:calc(clamp(96px,14vh,150px)*var(--u-sp,1)) clamp(20px,6vw,96px);max-width:1500px;margin:0 auto}
.mgm-hero{min-height:100vh;padding-top:clamp(120px,20vh,200px)}
.mgm-tag{margin:0;font:600 12px/1 ui-monospace,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--mg-a)}
.mgm h1,.mgm h2{margin:0;font-weight:800;letter-spacing:-.035em;line-height:.98;max-width:13ch;color:var(--mg-ink)}
.mgm h1{font-size:calc(clamp(46px,7.6vw,128px)*var(--u-hs,1))}
.mgm h2{font-size:calc(clamp(36px,6vw,92px)*var(--u-hs,1))}
.mgm-lead{max-width:44ch;margin:0;font-size:calc(clamp(15px,1.3vw,19px)*var(--mg-ts));line-height:1.6;color:var(--mg-mut)}
/* split headline: words rise out of a mask */
.mgm-split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.mgm-split .w>i{display:inline-block;font-style:normal;transform:translateY(112%) rotate(4deg);transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 55ms)}
.mgm-split.in .w>i{transform:none}
.mgm-tag,.mgm-lead,.mgm-cta,.mgm-we,.mgm-list li,.mgm-stat,.mgm-card,.mgm-step,.mgm-faq details{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.mgm .in-view{opacity:1;transform:none}
.mgm-cta{display:flex;flex-wrap:wrap;align-items:center;gap:22px 30px}
.mgm-btn{position:relative;display:inline-flex;align-items:center;padding:18px 34px;border-radius:999px;color:#fff;font-weight:700;text-decoration:none;background:linear-gradient(135deg,var(--mg-a),#c04bff 55%,var(--mg-b));box-shadow:0 12px 40px -10px var(--mg-a),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .25s ease,box-shadow .25s}
.mgm-btn:hover{box-shadow:0 18px 56px -8px var(--mg-b),inset 0 1px 0 rgba(255,255,255,.5)}
.mgm-btn span{display:inline-block;transition:transform .25s}
.mgm-link{color:var(--mg-ink);text-decoration:none;font-weight:600;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:3px;transition:border-color .2s,color .2s}
.mgm-link:hover{color:var(--mg-b);border-color:var(--mg-b)}
.mgm-we{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:10px 0 0;padding:0}
.mgm-we li{padding:8px 16px;border:1px solid rgba(255,255,255,.16);border-radius:999px;font-size:13px;color:var(--mg-mut);backdrop-filter:none}
/* marquee: speed follows scroll velocity (JS sets --mx) */
.mgm-marquee{position:relative;z-index:1;overflow:hidden;padding:26px 0;border-block:1px solid rgba(255,255,255,.08);background:rgba(7,6,13,.72)}
.mgm-track{display:flex;width:max-content;transform:translateX(var(--mx,0));font-weight:800;font-size:clamp(34px,6vw,84px);letter-spacing:-.03em;white-space:nowrap;-webkit-text-stroke:1.2px rgba(160,143,255,.8);color:transparent}
.mgm-track span{padding-right:.3em}
/* services */
.mgm-list{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.12)}
.mgm-row{position:relative;display:grid;grid-template-columns:56px minmax(180px,1fr) minmax(0,1.3fr) 36px;align-items:center;gap:20px;padding:26px 8px;color:var(--mg-ink);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.12);overflow:hidden;transition:padding .35s cubic-bezier(.2,.8,.2,1)}
.mgm-row::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(143,123,255,.22),rgba(255,106,61,.14));transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1);z-index:-1}
.mgm-row:hover{padding-left:24px}.mgm-row:hover::before{transform:none}
.mgm-row em{font:600 13px ui-monospace,Consolas,monospace;color:var(--mg-a);font-style:normal}
.mgm-row strong{font-size:clamp(22px,3vw,40px);letter-spacing:-.02em}
.mgm-row span{color:var(--mg-mut);font-size:calc(15px*var(--mg-ts));line-height:1.5}
.mgm-row i{font-style:normal;font-size:24px;transition:transform .3s}.mgm-row:hover i{transform:translateX(8px)}
/* stats */
.mgm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:20px}
.mgm-stat{min-width:0;padding:26px 22px;border:1px solid rgba(255,255,255,.12);border-radius:var(--mg-r);background:rgba(14,12,26,.82)}
.mgm-stat b{display:block;white-space:nowrap;font-size:clamp(34px,4vw,60px);letter-spacing:-.04em;line-height:1;background:linear-gradient(135deg,#fff,var(--mg-a));-webkit-background-clip:text;background-clip:text;color:transparent}
.mgm-stat small{display:block;margin-top:10px;color:var(--mg-mut);font-size:calc(14px*var(--mg-ts))}
/* work cards: tilt toward the cursor (JS sets --rx/--ry) */
.mgm-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;perspective:1100px}
.mgm-card{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--mg-r);overflow:hidden;text-decoration:none;background:#14122a;transform:translateY(26px)}
.mgm-card.in-view{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc,1));transition:opacity .8s,transform .25s ease-out}
.mgm-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.mgm-card:hover img{transform:scale(1.07)}
.mgm-card span{position:absolute;left:0;right:0;bottom:0;padding:36px 18px 16px;color:#fff;font-weight:700;background:linear-gradient(transparent,rgba(7,6,13,.92))}
/* process */
.mgm-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
.mgm-step{padding:30px 26px;border-radius:var(--mg-r);border:1px solid rgba(255,255,255,.12);background:rgba(14,12,26,.86)}
.mgm-step em{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font-style:normal;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--mg-a),var(--mg-b))}
.mgm-step h3{margin:18px 0 8px;font-size:22px;color:var(--mg-ink)}.mgm-step p{margin:0;color:var(--mg-mut);line-height:1.6;font-size:calc(16px*var(--mg-ts))}
/* faq */
.mgm-faq{max-width:820px;display:grid;gap:12px;margin-top:10px}
.mgm-faq details{border:1px solid rgba(255,255,255,.12);border-radius:calc(var(--mg-r)*.75);background:rgba(14,12,26,.86);padding:0 22px}
.mgm-faq summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:700;font-size:18px;display:flex;justify-content:space-between;gap:16px}
.mgm-faq summary::-webkit-details-marker{display:none}.mgm-faq summary::after{content:"+";color:var(--mg-a);font-size:24px;line-height:1;transition:transform .3s}
.mgm-faq details[open] summary::after{transform:rotate(45deg)}
.mgm-faq p{margin:0 0 20px;color:var(--mg-mut);line-height:1.6;font-size:calc(16px*var(--mg-ts))}
.mgm-end{min-height:90vh}
/* cursor follower + scroll progress */
.mgm-cursor{position:fixed;left:0;top:0;z-index:50;width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid rgba(255,255,255,.7);border-radius:50%;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:width .25s,height .25s,margin .25s,opacity .3s,background .25s}
.mgm-cursor.is-on{opacity:1}.mgm-cursor.is-big{width:76px;height:76px;margin:-38px 0 0 -38px;background:rgba(255,255,255,.9)}
.mgm-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:60;pointer-events:none}
.mgm-progress i{display:block;height:100%;width:100%;transform:scaleX(var(--p,0));transform-origin:left;background:linear-gradient(90deg,var(--mg-a),var(--mg-b))}
@media (max-width:900px){
	.mgm-cards,.mgm-steps{grid-template-columns:1fr}
	.mgm-row{grid-template-columns:40px 1fr 28px}.mgm-row span{display:none}
	.mgm-sec{min-height:auto;padding-block:90px}.mgm-hero{min-height:100vh}
	.mgm-sec>*:not(.mgm-tag){position:relative}
	.mgm-lead,.mgm-we li{background:rgba(7,6,13,.55)}
}
@media (hover:none){.mgm-cursor{display:none}}
@media (prefers-reduced-motion:reduce){
	.mgm-split .w>i,.mgm-tag,.mgm-lead,.mgm-cta,.mgm-we,.mgm-list li,.mgm-stat,.mgm-card,.mgm-step,.mgm-faq details{transition:none;opacity:1;transform:none}
	.mgm-track{transform:none}
}

/* content leaves the half where the bike currently sits */
@media (min-width:901px){
	.mgm-r{padding-left:max(42vw,clamp(20px,6vw,96px))}.mgm-l{padding-right:42vw}
	.mgm-r .mgm-row{grid-template-columns:48px 1fr 28px}.mgm-r .mgm-row span{grid-column:2;grid-row:2}.mgm-r .mgm-row i{grid-column:3;grid-row:1/3}
	.mgm-r h2,.mgm-r .mgm-tag{max-width:none}
}
@media (max-width:900px){.mgm-row,.mgm-faq details{background:rgba(7,6,13,.72)}}
.mgm-stat b i{font-style:normal;font-size:.5em;margin-left:.1em;letter-spacing:0}

/* custom graphics / mockup: text + before/after (+ video) */
.mgm-feat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(24px,4vw,64px)}
.mgm-feat.is-flip .mgm-feat-text{order:2}
.mgm-feat-text{display:flex;flex-direction:column;gap:22px;min-width:0}.mgm-feat h2{max-width:none;font-size:calc(clamp(32px,4.6vw,68px)*var(--u-hs,1))}
.mgm-feat-media{display:grid;gap:18px;min-width:0}
.mgm-points{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mgm-points li{padding-left:22px;position:relative;color:var(--mg-mut);line-height:1.5;font-size:calc(16px*var(--mg-ts));opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.mgm-points li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--mg-a),var(--mg-b))}
.mgm-points b{color:var(--mg-ink)}
.mgm-ba,.mgm-yt{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.mgm .mgm-ba.in-view,.mgm .mgm-yt.in-view{opacity:1;transform:none}
.mgm-ba{--pos:50%;position:relative;aspect-ratio:3/2;border-radius:var(--mg-r);overflow:hidden;background:#14122a;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px -30px rgba(143,123,255,.5);touch-action:pan-y;user-select:none;cursor:ew-resize}
.mgm-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.mgm-ba-b{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.mgm-ba-h{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 18px var(--mg-a);pointer-events:none}
.mgm-ba-h::after{content:"↔";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#07060d;font-weight:800;box-shadow:0 8px 26px rgba(0,0,0,.4);transition:transform .2s}
.mgm-ba.is-drag .mgm-ba-h::after{transform:scale(1.15)}
.mgm-ba-l{position:absolute;bottom:14px;padding:6px 12px;border-radius:999px;background:rgba(7,6,13,.72);color:#fff;font:700 11px/1 ui-monospace,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.mgm-ba-lb{left:14px}.mgm-ba-la{right:14px}
.mgm-ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.mgm-ba input:focus-visible{opacity:1;outline:3px solid var(--mg-a);outline-offset:-3px;background:transparent}
.mgm-yt,.mgm-yt-frame{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:calc(var(--mg-r)*.85);overflow:hidden}
.mgm-yt{position:relative;padding:0;cursor:pointer;background:#000 center/cover no-repeat;border:1px solid rgba(255,255,255,.12)}
.mgm-yt::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(7,6,13,.85))}
.mgm-yt-play{position:absolute;z-index:1;left:50%;top:50%;width:72px;height:72px;margin:-36px;border-radius:50%;display:grid;place-items:center;font-size:24px;color:#fff;padding-left:4px;background:linear-gradient(135deg,var(--mg-a),var(--mg-b));box-shadow:0 12px 40px -6px var(--mg-a);transition:transform .25s}
.mgm-yt:hover .mgm-yt-play{transform:scale(1.12)}
.mgm-yt em{position:absolute;z-index:1;left:18px;bottom:14px;font:700 12px/1 ui-monospace,Consolas,monospace;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#fff}
@media (max-width:900px){.mgm-feat{grid-template-columns:1fr}.mgm-feat.is-flip .mgm-feat-text{order:0}}
@media (prefers-reduced-motion:reduce){.mgm-points li,.mgm-ba,.mgm-yt{transition:none;opacity:1;transform:none}}