/*! REME Builder 8.1 — Motion Pro 4.
 *
 * html.mp-on    the engine is running (a page preset, or at least one element with Motion settings)
 * html.mp-site  a page preset is active (demo pages, or the preset chosen in Site settings)
 *
 * The engine only ever declares the START state of an effect (":not(.mp-in)"). Once an element has
 * entered, nothing here applies to it any more, so a widget keeps its own transform, filter and
 * transitions. Only opacity, filter, clip-path and translate / scale / rotate are animated. */
@property --mp-p{syntax:'<number>';inherits:false;initial-value:0}
mp-x{display:block}mp-w,mp-s,mp-c{display:inline}.mp-li{display:contents!important;list-style:none!important}
html.mp-on{--mp-ease:cubic-bezier(.2,.7,.2,1);--mp-out:cubic-bezier(.16,1,.3,1);--mp-back:cubic-bezier(.34,1.4,.5,1);--mp-acc:var(--t-accent,var(--rm-accent,#111827));--mp-t:1}
html.mp-on body.mp-slow{--mp-t:1.45}
html.mp-on .rm-w{--mp-acc:var(--t-accent,var(--rm-accent,#111827))}

/* ==================================================================== 1. ENTRANCES */
html.mp-on:not(.mp-reduce) .mp-i:not(.mp-done){transition:opacity calc(.8s*var(--mp-t)) var(--mp-ease) var(--mp-d,0ms),translate calc(1s*var(--mp-t)) var(--mp-out) var(--mp-d,0ms),scale calc(1s*var(--mp-t)) var(--mp-out) var(--mp-d,0ms),rotate calc(1s*var(--mp-t)) var(--mp-out) var(--mp-d,0ms),filter calc(.7s*var(--mp-t)) var(--mp-ease) var(--mp-d,0ms)}
html.mp-on:not(.mp-reduce) .mp-i:not(.mp-in){opacity:0;translate:0 34px}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-fade:not(.mp-in){translate:none}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-zoom:not(.mp-in){translate:none;scale:.88}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-zoomout:not(.mp-in){translate:none;scale:1.12}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-slide:not(.mp-in){translate:-46px 0}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-slideend:not(.mp-in){translate:46px 0}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-slide:not(.mp-in):is([dir=rtl] *){translate:46px 0}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-slideend:not(.mp-in):is([dir=rtl] *){translate:-46px 0}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-flip:not(.mp-in){translate:0 30px;rotate:x -22deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-flipy:not(.mp-in){translate:none;rotate:y 68deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-blur:not(.mp-in){translate:0 16px;filter:blur(7px)}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-clip:not(.mp-in){translate:0 46px;scale:.97}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-drop:not(.mp-in){translate:0 -60px;rotate:-3deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-fan:not(.mp-in){translate:-30px 40px;rotate:-9deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-pop:not(.mp-in){translate:none;scale:.6}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-swing:not(.mp-in){translate:0 -8px;rotate:-12deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-roll:not(.mp-in){translate:-70px 0;rotate:-16deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-roll:not(.mp-in):is([dir=rtl] *){translate:70px 0;rotate:16deg}
html.mp-on:not(.mp-reduce) .mp-i:is(.mp-r-flip,.mp-r-swing):not(.mp-done){transform-origin:50% 0}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-fan:not(.mp-done){transform-origin:0 100%}
html.mp-on:not(.mp-reduce) .mp-i:is(.mp-r-drop,.mp-r-fan,.mp-r-pop,.mp-r-swing,.mp-r-roll):not(.mp-done){transition-timing-function:var(--mp-ease),var(--mp-back),var(--mp-back),var(--mp-back),var(--mp-ease)}
/* hover lift keeps the card's own transitions and adds one for the lift */
html.mp-on.mp-fine:not(.mp-reduce) .mp-hv-lift:is(.mp-done,.mp-lift){transition:var(--mp-own,all 0s),translate .35s var(--mp-out)}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hv-lift:is(.mp-done,.mp-lift):hover{translate:0 -6px}

/* ==================================================================== 2. HEADINGS */
html.mp-on:not(.mp-reduce) .mp-h .mp-w{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.08em .14em;margin-block:-.08em -.14em}
html.mp-on:not(.mp-reduce) .mp-h .mp-w>.mp-s{display:inline-block;transition:translate calc(.95s*var(--mp-t)) var(--mp-out);transition-delay:calc(var(--mp-wi,0)*55ms)}
html.mp-on:not(.mp-reduce) .mp-h:not(.mp-in) .mp-w>.mp-s{translate:0 112%}
/* fade + rise (also the base of marker and scribble) */
html.mp-on:not(.mp-reduce) .mp-h:is(.mp-hd-fade,.mp-hd-marker,.mp-hd-scribble,.mp-hd-line){transition:opacity calc(.9s*var(--mp-t)) var(--mp-ease),translate calc(1s*var(--mp-t)) var(--mp-out)}
html.mp-on:not(.mp-reduce) .mp-h:is(.mp-hd-fade,.mp-hd-marker,.mp-hd-scribble,.mp-hd-line):not(.mp-in){opacity:0;translate:0 22px}
/* accent line (an extra element under the heading, so the layout never moves) */
.mp-ln{position:absolute;left:0;bottom:-.16em;width:72px;height:2px;border-radius:2px;background:var(--mp-acc);transform-origin:0 50%;scale:0 1;pointer-events:none;transition:scale calc(1.2s*var(--mp-t,1)) var(--mp-out,ease) .25s}
.mp-h.mp-in>.mp-ln{scale:1 1}
.mp-h-c>.mp-ln{left:50%;margin-left:-36px;transform-origin:50% 50%}
.mp-h:not(.mp-h-c)>.mp-ln:is([dir=rtl] *){left:auto;right:0;transform-origin:100% 50%}
/* blur in (also used while a heading unscrambles) */
html.mp-on:not(.mp-reduce) .mp-h:is(.mp-hd-blur,.mp-hd-scramble){transition:opacity calc(.8s*var(--mp-t)) var(--mp-ease),filter calc(.9s*var(--mp-t)) var(--mp-ease)}
html.mp-on:not(.mp-reduce) .mp-h:is(.mp-hd-blur,.mp-hd-scramble):not(.mp-in){opacity:0;filter:blur(12px)}
/* letters */
html.mp-on:not(.mp-reduce) .mp-h-chars .mp-w>.mp-s{translate:none!important;transition:none!important}
html.mp-on:not(.mp-reduce) .mp-h-chars .mp-c{display:inline-block;transition:opacity .5s var(--mp-ease),translate .7s var(--mp-out),rotate .7s var(--mp-out),scale .3s cubic-bezier(.34,1.6,.5,1);transition-delay:calc(var(--mp-ci,0)*22ms),calc(var(--mp-ci,0)*22ms),calc(var(--mp-ci,0)*22ms),0ms}
html.mp-on:not(.mp-reduce) .mp-h-chars:not(.mp-in) .mp-c{opacity:0;translate:0 70%;rotate:8deg}
html.mp-on.mp-fine:not(.mp-reduce) .mp-h-chars.mp-in .mp-c:hover{scale:1.22 .86}
/* letter wave */
html.mp-on:not(.mp-reduce) .mp-hd-wave .mp-w{overflow:visible}
html.mp-on:not(.mp-reduce) .mp-hd-wave.mp-h-chars .mp-c{transition:scale .3s cubic-bezier(.34,1.6,.5,1)}
html.mp-on:not(.mp-reduce) .mp-hd-wave.mp-h-chars:not(.mp-in) .mp-c{rotate:none;translate:0 70%}
html.mp-on:not(.mp-reduce) .mp-hd-wave.mp-h-chars.mp-in .mp-c{animation:mpWave calc(.9s*var(--mp-t)) var(--mp-out) both;animation-delay:calc(var(--mp-ci,0)*34ms)}
@keyframes mpWave{0%{opacity:0;translate:0 70%}55%{opacity:1;translate:0 -22%}100%{opacity:1;translate:0 0}}
/* words turn up in perspective */
html.mp-on:not(.mp-reduce) .mp-hd-persp .mp-w{overflow:visible;perspective:600px}
html.mp-on:not(.mp-reduce) .mp-hd-persp .mp-w>.mp-s{transform-origin:50% 100%;transition:translate calc(.9s*var(--mp-t)) var(--mp-out),rotate calc(.9s*var(--mp-t)) var(--mp-out),opacity .6s;transition-delay:calc(var(--mp-wi,0)*60ms)}
html.mp-on:not(.mp-reduce) .mp-hd-persp:not(.mp-in) .mp-w>.mp-s{translate:0 40%;rotate:x -82deg;opacity:0}
/* highlighter + hand-drawn underline */
html.mp-on .mp-mk{background:linear-gradient(color-mix(in srgb,var(--mp-acc) 17%,transparent),color-mix(in srgb,var(--mp-acc) 17%,transparent)) no-repeat 0 90%/0 30%;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.1s var(--mp-out) .2s}
html.mp-on .mp-h.mp-in .mp-mk,html.mp-reduce .mp-mk{background-size:100% 30%}
html.mp-on .mp-mk:is([dir=rtl] *){background-position:100% 90%}
.mp-scr{position:absolute;left:0;bottom:-.34em;width:min(100%,300px);height:.5em;overflow:visible;fill:none;pointer-events:none}
.mp-h-c>.mp-scr{left:50%;margin-left:calc(min(100%,300px)/-2)}
.mp-h:not(.mp-h-c)>.mp-scr:is([dir=rtl] *){left:auto;right:0}
.mp-scr path{stroke:var(--mp-acc);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--mp-out,ease) .35s}
.mp-h.mp-in>.mp-scr path,html.mp-reduce .mp-scr path{stroke-dashoffset:0}
/* typewriter */
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-type:not(.mp-in){opacity:0}
.mp-caret{display:inline-block;width:.07em;min-width:2px;height:.95em;margin-inline-start:.06em;vertical-align:-.1em;background:currentColor;animation:mpCaret .8s steps(1) infinite}
@keyframes mpCaret{50%{opacity:0}}
/* a light sweeps across the heading */
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-shine{background:linear-gradient(100deg,currentColor 0 42%,var(--mp-acc) 50%,currentColor 58% 100%) 100% 0/260% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:opacity .6s var(--mp-ease)}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-shine:not(.mp-in){opacity:0}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-shine.mp-in{animation:mpTextShine calc(1.6s*var(--mp-t)) var(--mp-ease) .15s both}
@keyframes mpTextShine{from{background-position:100% 0}to{background-position:0 0}}

/* ==================================================================== 3. PICTURES */
html.mp-on:not(.mp-reduce) .mp-m{overflow:hidden}
html.mp-on:not(.mp-reduce) .mp-m:not(.mp-done)>img,html.mp-on:not(.mp-reduce) .mp-m:not(.mp-done)>a>img,html.mp-on:not(.mp-reduce) .mp-m:not(.mp-done)>picture>img{transition:scale calc(1.5s*var(--mp-t)) var(--mp-out)}
html.mp-on:not(.mp-reduce) .mp-m:not(.mp-in)>img,html.mp-on:not(.mp-reduce) .mp-m:not(.mp-in)>a>img,html.mp-on:not(.mp-reduce) .mp-m:not(.mp-in)>picture>img{scale:1.18}
/* curtain + its variants */
.mp-wipe{position:absolute;inset:0;z-index:3;pointer-events:none;background:var(--t-paper,var(--rm-bg,#f4f1ea));transform-origin:50% 0;transition:scale calc(1.1s*var(--mp-t)) cubic-bezier(.7,0,.2,1) var(--mp-d,0ms)}
html.mp-on:not(.mp-reduce) .mp-m.mp-in>.mp-wipe{scale:1 0}
html.mp-reduce .mp-wipe{display:none}
.mp-wipe:is(.mp-wipe-doors,.mp-wipe-slices,.mp-wipe-strips,.mp-wipe-pixels){background:none;display:grid;scale:1!important}
.mp-wipe>mp-x{display:block;background:var(--t-paper,var(--rm-bg,#f4f1ea));transition:scale calc(.9s*var(--mp-t,1)) cubic-bezier(.7,0,.2,1),opacity .5s;transition-delay:calc(var(--k,0)*70ms)}
.mp-wipe-doors{grid-template-columns:1fr 1fr}
.mp-wipe-doors>mp-x:first-child{transform-origin:0 50%}.mp-wipe-doors>mp-x:last-child{transform-origin:100% 50%}
.mp-wipe-doors>mp-x{transition-delay:0ms}
.mp-wipe-slices{grid-template-columns:repeat(6,1fr)}.mp-wipe-slices>mp-x{transform-origin:50% 0}.mp-wipe-slices>mp-x:nth-child(even){transform-origin:50% 100%}
.mp-wipe-strips{grid-template-rows:repeat(5,1fr)}.mp-wipe-strips>mp-x{transform-origin:0 50%}.mp-wipe-strips>mp-x:nth-child(even){transform-origin:100% 50%}
.mp-wipe-pixels{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(5,1fr)}.mp-wipe-pixels>mp-x{transition:opacity .45s;transition-delay:calc(var(--k,0)*55ms)}
html.mp-on:not(.mp-reduce) .mp-m.mp-in>.mp-wipe-doors>mp-x{scale:0 1}
html.mp-on:not(.mp-reduce) .mp-m.mp-in>.mp-wipe-slices>mp-x{scale:1 0}
html.mp-on:not(.mp-reduce) .mp-m.mp-in>.mp-wipe-strips>mp-x{scale:0 1}
html.mp-on:not(.mp-reduce) .mp-m.mp-in>.mp-wipe-pixels>mp-x{opacity:0}
.mp-wipe-diag{inset:-2% -40%;transform:skewX(-20deg);transition:translate calc(1.1s*var(--mp-t,1)) cubic-bezier(.7,0,.2,1)}
html.mp-on:not(.mp-reduce) .mp-m.mp-in>.mp-wipe-diag{scale:1;translate:120% 0}
html.mp-on:not(.mp-reduce) .mp-m-aperture:not(.mp-done) img{transition:clip-path calc(1.3s*var(--mp-t,1)) cubic-bezier(.7,0,.2,1),scale calc(1.5s*var(--mp-t)) var(--mp-out)}
html.mp-on:not(.mp-reduce) .mp-m-aperture:not(.mp-in) img{clip-path:circle(0% at 50% 50%)}
html.mp-on:not(.mp-reduce) .mp-m-aperture.mp-in:not(.mp-done) img{clip-path:circle(75% at 50% 50%)}
html.mp-on:not(.mp-reduce) .mp-m-gray:not(.mp-done) img{transition:filter 1.4s ease .2s,scale calc(1.5s*var(--mp-t)) var(--mp-out)}
html.mp-on:not(.mp-reduce) .mp-m-gray:not(.mp-in) img{filter:grayscale(1) contrast(1.05)}
/* hover zoom */
html.mp-on.mp-fine:not(.mp-reduce) .mp-hvz{overflow:hidden}
html.mp-on.mp-fine:not(.mp-reduce) :is(.mp-m.mp-done,.mp-hvz).mp-hv-zoom>img,html.mp-on.mp-fine:not(.mp-reduce) :is(.mp-m.mp-done,.mp-hvz).mp-hv-zoom>a>img,html.mp-on.mp-fine:not(.mp-reduce) :is(.mp-m.mp-done,.mp-hvz).mp-hv-zoom>picture>img{transition:scale .7s var(--mp-out),transform .7s var(--mp-out),filter .5s,opacity .4s}
html.mp-on.mp-fine:not(.mp-reduce) :is(.mp-m.mp-done,.mp-hvz).mp-hv-zoom:hover>img,html.mp-on.mp-fine:not(.mp-reduce) :is(.mp-m.mp-done,.mp-hvz).mp-hv-zoom:hover>a>img,html.mp-on.mp-fine:not(.mp-reduce) :is(.mp-m.mp-done,.mp-hvz).mp-hv-zoom:hover>picture>img{scale:1.08}
/* shimmer while loading, then a soft focus-in */
html.mp-on .mp-loading{background:linear-gradient(100deg,rgba(128,128,128,.10) 30%,rgba(128,128,128,.22) 50%,rgba(128,128,128,.10) 70%) 0 0/220% 100%;animation:mpShimmer 1.3s linear infinite}
html.mp-on .mp-loading img{opacity:0}
html.mp-on .mp-focus img{animation:mpFocus .7s ease both}
@keyframes mpShimmer{to{background-position:-220% 0}}
@keyframes mpFocus{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:none}}

/* ==================================================================== 4. SCROLL */
html.mp-on:not(.mp-reduce) .mp-par{scale:1.14;will-change:translate}
html.mp-on:not(.mp-reduce) body.mp-kenburns .rmt-hero img,html.mp-on:not(.mp-reduce) body.mp-kenburns .rm-hero-slide .rm-hero-bg{animation:mpKen 18s ease-in-out infinite alternate}
@keyframes mpKen{from{scale:1.02}to{scale:1.12}}
html.mp-on:not(.mp-reduce) .mp-skew{transform:skewX(calc(var(--mp-skew,0)*-1deg));transition:transform .25s linear}
html.mp-on:not(.mp-reduce) body.mp-pulse :is(.rwc-badge-sale,.rmt-badge,.rm-badge){animation:mpPulse 2.6s ease-in-out infinite}
@keyframes mpPulse{0%,100%{scale:1}50%{scale:1.07}}
/* an element follows its own scroll progress (Motion tab → Scroll effect). --mp-p runs 0 → 1 */
html.mp-on:not(.mp-reduce) .mp-sc.mp-sc-on.mp-sc-rise>:not(.mp-bgx,.mp-fgx){translate:0 calc((1 - var(--mp-p))*70px);opacity:calc(.25 + var(--mp-p)*.75)}
html.mp-on:not(.mp-reduce) .mp-sc.mp-sc-on.mp-sc-zoom>:not(.mp-bgx,.mp-fgx){scale:calc(.86 + var(--mp-p)*.14);opacity:calc(.3 + var(--mp-p)*.7)}
html.mp-on:not(.mp-reduce) .mp-sc.mp-sc-on.mp-sc-fade>:not(.mp-bgx,.mp-fgx){opacity:var(--mp-p)}
html.mp-on:not(.mp-reduce) .mp-sc.mp-sc-on.mp-sc-tilt>:not(.mp-bgx,.mp-fgx){rotate:calc((1 - var(--mp-p))*-4deg);translate:0 calc((1 - var(--mp-p))*50px);transform-origin:0 100%}
html.mp-on:not(.mp-reduce) .mp-sc.mp-sc-on.mp-sc-slide>:not(.mp-bgx,.mp-fgx){translate:calc((1 - var(--mp-p))*-90px) 0;opacity:calc(.25 + var(--mp-p)*.75)}
html.mp-on:not(.mp-reduce) .mp-sc.mp-sc-on.mp-sc-slide:is([dir=rtl] *)>:not(.mp-bgx,.mp-fgx){translate:calc((1 - var(--mp-p))*90px) 0}
/* sticky chapters */
@media (min-width:1025px){html.mp-on:not(.mp-reduce) .mp-stick{position:sticky!important;top:112px;align-self:start}}
/* horizontal scroll */
.mp-hs{position:relative}
.mp-hs-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
html.mp-on .mp-hs-track{display:flex!important;flex-wrap:nowrap!important;gap:24px!important;width:max-content!important;max-width:none!important;grid-template-columns:none!important;will-change:translate;padding-inline:max(24px,calc((100vw - var(--t-max,1240px))/2))}
html.mp-on .mp-hs-track>*{flex:0 0 clamp(280px,27vw,380px)!important;width:clamp(280px,27vw,380px)!important;max-width:none!important;margin:0!important}
.mp-hs-bar{display:block;width:min(240px,40vw);height:3px;margin:28px auto 0;border-radius:3px;background:color-mix(in srgb,currentColor 14%,transparent);overflow:hidden}
.mp-hs-bar>mp-x{display:block;height:100%;background:var(--mp-acc);transform-origin:0 50%;scale:0 1}
.mp-hs-bar>mp-x:is([dir=rtl] *){transform-origin:100% 50%}
/* hero scales into a frame while its copy leaves faster (--mp-ho runs 0 → 1) */
html.mp-on:not(.mp-reduce) .mp-hero-out{scale:calc(1 - var(--mp-ho,0)*.06);border-radius:calc(var(--mp-ho,0)*28px);overflow:hidden;transform-origin:50% 100%}
html.mp-on:not(.mp-reduce) .mp-hero-out :is(.rm-hero-content,.rm-hero-box,.rmt-copyblock,.rmt-immersive-copy){opacity:calc(1 - var(--mp-ho,0)*.8)}
/* line drawing */
.mp-line{position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;background:var(--mp-acc);transform-origin:50% 0;scale:1 0;pointer-events:none;z-index:1}
.mp-line:is([dir=rtl] *){left:auto;right:0}
.mp-route{position:absolute;left:0;right:0;bottom:-34px;width:100%;height:70px;z-index:0;pointer-events:none;overflow:visible;fill:none}
.mp-route path{stroke:var(--mp-acc);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.45;vector-effect:non-scaling-stroke}
html.mp-reduce .mp-route,html.mp-reduce .mp-line{display:none}
html.mp-on:not(.mp-reduce) .mp-step-on :is(.rm-ico-wrap,.rmt-step-n,b:first-child,span:first-child):first-child{animation:mpPopIn .5s cubic-bezier(.34,1.6,.5,1) both}
@keyframes mpPopIn{from{scale:.6}to{scale:1}}
.mp-plane{fill:var(--mp-acc);opacity:0;transition:opacity .3s}
/* section colour shift (only shows through sections without their own background) */
html.mp-on:not(.mp-reduce) body.mp-shift .rmb-canvas-main{transition:background-color 1.2s ease}
html.mp-on:not(.mp-reduce) body.mp-shift[data-mp-ch="1"] .rmb-canvas-main{background-color:color-mix(in srgb,var(--mp-acc) 5%,var(--t-paper,var(--rm-bg,#fff)))}
html.mp-on:not(.mp-reduce) body.mp-shift[data-mp-ch="2"] .rmb-canvas-main{background-color:color-mix(in srgb,var(--t-deep,var(--rm-dark,#111)) 5%,var(--t-paper,var(--rm-bg,#fff)))}
html.mp-on:not(.mp-reduce) body.mp-shift[data-mp-ch="3"] .rmb-canvas-main{background-color:color-mix(in srgb,var(--t-gold,var(--mp-acc)) 7%,var(--t-paper,var(--rm-bg,#fff)))}
/* scroll velocity */
html.mp-on:not(.mp-reduce) body.mp-velskew .mp-h{transform:skewY(calc(var(--mp-v,0)*.035deg));transition:transform .2s linear}
html.mp-on:not(.mp-reduce) body.mp-stretch .mp-m.mp-in>:is(img,a,picture){transform:scaleY(calc(1 + var(--mp-va,0)*.0022));transition:transform .2s linear}
html.mp-site:not(.mp-reduce) body.mp-down:not(.mp-has-bar) .rm-float{translate:0 140%}
html.mp-site .rm-float{transition:translate .45s var(--mp-out)}

/* ==================================================================== 5. BACK-TO-TOP RING */
.mp-ring{position:fixed;left:18px;bottom:18px;z-index:9990;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:#fff;color:#111827;box-shadow:0 10px 30px -10px rgba(0,0,0,.35);cursor:pointer;opacity:0;visibility:hidden;translate:0 14px;transition:opacity .35s,translate .45s var(--mp-out),visibility .35s}
.mp-ring.is-on{opacity:1;visibility:visible;translate:0 0}
.mp-ring svg{display:block;width:48px;height:48px;fill:none}
.mp-ring circle{stroke-width:2.5}
.mp-ring .mp-ring-bg{stroke:rgba(17,24,39,.12)}
.mp-ring .mp-ring-fg{stroke:var(--mp-acc);stroke-linecap:round;transform:rotate(-90deg);transform-origin:24px 24px;transition:stroke-dashoffset .15s linear}
.mp-ring path{stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:translate .3s var(--mp-out)}
.mp-ring:hover path{translate:0 -2px}
html.mp-site .rm-float .rm-totop{display:none!important}
.mp-ring:focus-visible{outline:2px solid var(--mp-acc);outline-offset:3px}

/* ==================================================================== 6. MOUSE */
html.mp-on .mp-mag{transition:translate .35s var(--mp-out)}
html.mp-on .mp-tilt{transition:rotate .5s var(--mp-out);transform-style:preserve-3d}
html.mp-on :has(>.mp-tilt:hover){perspective:1000px}
.mp-glare{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;opacity:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.34),transparent 55%);mix-blend-mode:soft-light;transition:opacity .4s}
.mp-tilt:hover>.mp-glare{opacity:1}
body.mp-slow .mp-glare{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,244,214,.55),transparent 60%);mix-blend-mode:overlay}
.mp-holo{background:conic-gradient(from 0deg at var(--mx,50%) var(--my,50%),#ff5fa2,#ffd75f,#5fffb0,#5fc8ff,#b05fff,#ff5fa2)!important;mix-blend-mode:color-dodge!important;filter:blur(18px)}
.mp-tilt:hover>.mp-holo{opacity:.32}
.mp-edge{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;background:linear-gradient(var(--mp-acc),var(--mp-acc)) 0 0/0 2px no-repeat,linear-gradient(var(--mp-acc),var(--mp-acc)) 100% 0/2px 0 no-repeat,linear-gradient(var(--mp-acc),var(--mp-acc)) 100% 100%/0 2px no-repeat,linear-gradient(var(--mp-acc),var(--mp-acc)) 0 100%/2px 0 no-repeat;transition:background-size .22s linear .66s,background-size .22s linear .44s,background-size .22s linear .22s,background-size .22s linear 0s}
:hover>.mp-edge{background-size:100% 2px,2px 100%,100% 2px,2px 100%;transition:background-size .2s linear}
.mp-liq{position:absolute;z-index:4;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;pointer-events:none;background:var(--mp-acc);mix-blend-mode:multiply;opacity:0;scale:0;transition:scale .7s var(--mp-out,ease),opacity .5s}
:hover>.mp-liq{scale:60;opacity:.2}
html.mp-on .mp-pan{overflow:hidden}
html.mp-on .mp-pan img{scale:1.12;transition:translate .5s var(--mp-out),scale 1.5s var(--mp-out)}
/* cursor */
.mp-cur{position:fixed;left:0;top:0;z-index:99999;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:difference}
.mp-cur.is-on{opacity:1}
.mp-cur.is-label,.mp-cur-tag{mix-blend-mode:normal}
.mp-cur i{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:1.5px solid #fff;opacity:.85;transition:scale .35s var(--mp-out),background-color .3s,opacity .3s,border-color .3s}
.mp-cur-dot i{left:-5px;top:-5px;width:10px;height:10px;border:0;background:#fff;opacity:.95}
.mp-cur.is-link i{scale:1.55;background:rgba(255,255,255,.16)}
.mp-cur-dot.is-link i{scale:3.4;opacity:.3}
.mp-cur.is-down i{scale:.8}
.mp-cur b{position:absolute;left:0;top:0;translate:-50% -50%;scale:0;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--mp-acc);color:#fff;font:700 11px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-align:center;transition:scale .4s var(--mp-out)}
.mp-cur.is-label b{scale:1}
.mp-cur.is-label i,.mp-cur-tag i{opacity:0}
.mp-cur-blob i{left:-23px;top:-23px;width:46px;height:46px;border:0;background:#fff;opacity:.9;transition:background-color .3s,opacity .3s}
.mp-cur-spark i,.mp-cur-trail i{left:-4px;top:-4px;width:8px;height:8px;border:0;background:#fff}
.mp-cs{position:fixed!important;z-index:99998}
.mp-td{position:fixed;left:-4px;top:-4px;z-index:99998;width:8px;height:8px;border-radius:50%;background:var(--mp-acc);pointer-events:none;opacity:0;scale:calc(1 - var(--k,0)*.13);transition:opacity .3s}
body.mp-td-on .mp-td{opacity:calc(.7 - var(--k,0)*.1)}
.mp-trail{position:fixed;z-index:9980;width:170px;height:210px;margin:-105px 0 0 -85px;object-fit:cover;border-radius:10px;pointer-events:none;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);rotate:var(--mp-r,0deg);animation:mpTrailIn .5s var(--mp-out) both;transition:opacity .7s,scale .7s var(--mp-ease)}
.mp-trail.is-out{opacity:0;scale:.82}
@keyframes mpTrailIn{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
.mp-spot{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.13),transparent 60%);transition:opacity .5s}
.mp-spot.is-on{opacity:1}
.mp-spot.mp-spot-acc{background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--mp-acc) 18%,transparent),transparent 62%)}
.mp-spark{position:absolute;z-index:5;width:14px;height:14px;margin:-7px 0 0 -7px;pointer-events:none;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 6px rgba(255,236,170,.95));animation:mpSpark .8s var(--mp-out) both}
@keyframes mpSpark{0%{opacity:0;scale:0;rotate:0deg}35%{opacity:1;scale:var(--mp-s,1)}100%{opacity:0;scale:.2;rotate:90deg;translate:0 -14px}}
html.mp-on .mp-drag{cursor:grab;user-select:none}
html.mp-on .mp-drag:active{cursor:grabbing}
/* hover reveal */
.mp-peek{position:fixed;left:0;top:0;z-index:9979;width:220px;height:160px;border-radius:12px;overflow:hidden;pointer-events:none;opacity:0;scale:.8;rotate:-3deg;box-shadow:0 24px 60px -22px rgba(0,0,0,.6);transition:opacity .3s,scale .45s var(--mp-out),rotate .45s var(--mp-out)}
.mp-peek.is-on{opacity:1;scale:1;rotate:0deg}
.mp-peek img{display:block;width:100%;height:100%;object-fit:cover}
.mp-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ==================================================================== 7. BUTTONS + NAVIGATION */
.mp-shine{position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg)}
.mp-b-shine:hover>.mp-shine,.rf-logo-a:hover>.mp-shine-logo{animation:mpShine .8s ease}
.mp-b-shine.mp-cta-pulse>.mp-shine{animation:mpShine 1s ease .3s}
@keyframes mpShine{to{left:130%}}
.mp-fillc{position:absolute;z-index:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.2);scale:0;transition:scale .55s var(--mp-out,ease)}
.mp-b-fill:hover>.mp-fillc{scale:60}
html.mp-on.mp-fine .mp-b-elastic:hover{animation:mpElastic .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes mpElastic{0%{scale:1}30%{scale:1.08 .92}55%{scale:.96 1.05}100%{scale:1}}
html.mp-on .mp-b svg{transition:translate .35s var(--mp-out)}
html.mp-on .mp-b-arrow:hover svg:last-child,html.mp-on .mp-b:hover .rm-ico:last-child{translate:5px 0}
html.mp-on .mp-b:hover .rm-ico:last-child:is([dir=rtl] *),html.mp-on .mp-b-arrow:hover svg:last-child:is([dir=rtl] *){translate:-5px 0}
html.mp-on:not(.mp-reduce) .mp-cta-pulse{animation:mpCta 1.2s ease .2s 1}
@keyframes mpCta{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mp-acc) 55%,transparent)}100%{box-shadow:0 0 0 18px transparent}}
.mp-nav{isolation:isolate}
.mp-pill{position:absolute!important;left:0;top:0;z-index:-1;display:block!important;margin:0!important;padding:0!important;border:0!important;list-style:none;border-radius:999px;background:color-mix(in srgb,currentColor 9%,transparent);opacity:0;pointer-events:none;transition:translate .4s cubic-bezier(.16,1,.3,1),width .4s cubic-bezier(.16,1,.3,1),opacity .25s}
.mp-pill.is-on{opacity:1}
html.mp-site .rmt-header .rf-logo-a{transition:scale .45s var(--mp-out);transform-origin:0 50%}
html.mp-site .rmt-header .rf-logo-a:is([dir=rtl] *){transform-origin:100% 50%}
html.mp-site body.mp-scrolled .rmt-header .rf-logo-a{scale:.9}
/* 8.0: the growing underline is for text links only (menu links and links without a class). It used to
   be written as a 'background' shorthand on every footer link, which wiped the background of pills,
   cards and buttons that are links. */
html.mp-site :is(.rmt-footer .rmb-col :is(a.rf-nav-a,a:not([class])),.rm-prose a:not([class]),.rm-more,.rwc-card-title a){background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .45s var(--mp-out);text-decoration:none}
html.mp-site :is(.rmt-footer .rmb-col :is(a.rf-nav-a,a:not([class])),.rm-prose a:not([class]),.rm-more,.rwc-card-title a):hover{background-size:100% 1px}
html.mp-site :is(.rmt-footer .rmb-col :is(a.rf-nav-a,a:not([class])),.rm-prose a:not([class]),.rm-more,.rwc-card-title a):is([dir=rtl] *){background-position:100% 100%}

/* ==================================================================== 8. TOUCH */
html.mp-on .mp-press{scale:.972;transition:scale .18s var(--mp-ease)}
.mp-rip{position:absolute;z-index:3;border-radius:50%;pointer-events:none;background:currentColor;opacity:.2;scale:0;animation:mpRip .65s var(--mp-out) forwards}
@keyframes mpRip{to{scale:1;opacity:0}}
@media (hover:none){html.mp-site :is(.is-swipe,.rmt-dest-chips,.mp-drag){scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}html.mp-site :is(.is-swipe,.rmt-dest-chips)>*{scroll-snap-align:start}}
.mp-bar{display:none}
@media (max-width:782px){
  .mp-bar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:9985;display:flex;gap:6px;padding:6px;border-radius:18px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 44px -14px rgba(0,0,0,.4),0 0 0 1px rgba(17,24,39,.06);transition:translate .45s var(--mp-out),opacity .3s}
  .mp-bar.is-off{translate:0 140%;opacity:0}
  .mp-bar a{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;min-height:46px;padding:0 3px;border-radius:13px;color:#111827;font:700 12px/1 system-ui,sans-serif;text-decoration:none;white-space:nowrap}
  .mp-bar a span{overflow:hidden;text-overflow:ellipsis}
  .mp-bar a.is-main{flex:1.15 1 0;background:var(--t-btn-bg,var(--mp-acc));color:var(--t-btn-fg,#fff)}
  .mp-bar svg{flex:0 0 auto;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mp-bar a:active{scale:.96}
  body.mp-has-bar{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  body.mp-has-bar .mp-ring{bottom:calc(84px + env(safe-area-inset-bottom,0px));left:12px;width:42px;height:42px}
  body.mp-has-bar .mp-ring svg{width:42px;height:42px}
  body.mp-has-bar .rm-float,body.mp-has-bar .rmw-floating-contact{display:none!important}
}
/* drawer links arrive one after another */
html.mp-site .rf-drawer.is-open :is(.rf-mm-li,.rf-nav-li,.rf-drawer-foot>*){animation:mpDrawer .55s var(--mp-out,cubic-bezier(.16,1,.3,1)) both}
html.mp-site .rf-drawer.is-open :is(.rf-mm-li,.rf-nav-li):nth-child(2){animation-delay:.05s}html.mp-site .rf-drawer.is-open :is(.rf-mm-li,.rf-nav-li):nth-child(3){animation-delay:.1s}html.mp-site .rf-drawer.is-open :is(.rf-mm-li,.rf-nav-li):nth-child(4){animation-delay:.15s}html.mp-site .rf-drawer.is-open :is(.rf-mm-li,.rf-nav-li):nth-child(5){animation-delay:.2s}html.mp-site .rf-drawer.is-open :is(.rf-mm-li,.rf-nav-li):nth-child(6){animation-delay:.25s}html.mp-site .rf-drawer.is-open :is(.rf-mm-li,.rf-nav-li):nth-child(n+7){animation-delay:.3s}html.mp-site .rf-drawer.is-open .rf-drawer-foot>*{animation-delay:.34s}
@keyframes mpDrawer{from{opacity:0;translate:26px 0}to{opacity:1;translate:0 0}}

/* ==================================================================== 9. CART, QUICK VIEW, PAGE TRANSITIONS */
.mp-fly{position:fixed;z-index:99990;object-fit:cover;border-radius:12px;pointer-events:none;box-shadow:0 20px 40px -18px rgba(0,0,0,.5);transition:left .75s var(--mp-out),top .75s cubic-bezier(.5,-.3,.7,.6),width .75s var(--mp-out),height .75s var(--mp-out),opacity .75s,border-radius .75s}
.mp-bump{animation:mpBump .5s var(--mp-out)}
@keyframes mpBump{30%{scale:1.3}60%{scale:.92}100%{scale:1}}
.mp-pop{animation:mpPop .45s var(--mp-out)}
@keyframes mpPop{35%{scale:1.4}70%{scale:.9}100%{scale:1}}
.mp-curtain{position:fixed;inset:0;z-index:99995;pointer-events:none;background:var(--t-deep,var(--rm-dark,#0f172a));transform:scaleY(0);transform-origin:50% 100%;transition:transform .34s cubic-bezier(.7,0,.3,1)}
.mp-curtain.is-on{transform:scaleY(1);pointer-events:auto}
.mp-curtain-circle{transform:none;clip-path:circle(0 at var(--cx,50%) var(--cy,50%));transition:clip-path .36s cubic-bezier(.7,0,.3,1)}
.mp-curtain-circle.is-on{transform:none;clip-path:circle(150% at var(--cx,50%) var(--cy,50%))}
.mp-curtain-slide{transform:translateX(-101%);transition:transform .34s cubic-bezier(.7,0,.3,1)}
.mp-curtain-slide.is-on{transform:none}
.mp-curtain-fade{transform:none;opacity:0;transition:opacity .3s}
.mp-curtain-fade.is-on{transform:none;opacity:1}
body.rme-mp-enter .rmb-canvas-main{animation:mpEnter .8s cubic-bezier(.16,1,.3,1) both}
@keyframes mpEnter{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
body.rme-mp-intro::before{content:"";position:fixed;inset:0;z-index:99996;background:var(--t-deep,var(--rm-dark,#0f172a));pointer-events:none;transform-origin:50% 0;animation:mpIntro 1.25s cubic-bezier(.7,0,.2,1) .15s both}
body.rme-mp-intro::after{content:"";position:fixed;left:50%;top:50%;z-index:99997;width:120px;height:2px;margin-left:-60px;background:#fff;pointer-events:none;transform-origin:0 50%;animation:mpIntroLine 1.1s cubic-bezier(.7,0,.2,1) both}
@keyframes mpIntro{0%,35%{transform:scaleY(1)}100%{transform:scaleY(0);visibility:hidden}}
@keyframes mpIntroLine{0%{transform:scaleX(0);opacity:1}55%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0;visibility:hidden}}
.mp-qv{position:absolute;left:12px;bottom:12px;z-index:6;display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 13px;border:0;border-radius:999px;background:rgba(255,255,255,.94);color:#111827;font:700 12px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 10px 26px -12px rgba(0,0,0,.5);opacity:0;translate:0 10px;transition:opacity .3s,translate .4s var(--mp-out)}
.mp-qv:is([dir=rtl] *){left:auto;right:12px}
.mp-qv svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:is(.rwc-card,.rmt-tour-card,.rm-qcard):hover .mp-qv,.mp-qv:focus-visible{opacity:1;translate:0 0}
@media (hover:none){.mp-qv{opacity:1;translate:0 0;width:44px;min-height:44px;padding:0;justify-content:center}.mp-qv span{display:none}}
.mp-sheet{position:fixed;inset:0;z-index:99980;visibility:hidden;pointer-events:none}
.mp-sheet.is-on{visibility:visible;pointer-events:auto}
.mp-sheet-bd{position:absolute;inset:0;background:rgba(10,14,20,.55);opacity:0;transition:opacity .35s}
.mp-sheet.is-on .mp-sheet-bd{opacity:1}
.mp-sheet-box{box-sizing:border-box;position:absolute;left:50%;bottom:0;width:min(920px,100%);max-height:88vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:34px 28px 28px;border-radius:24px 24px 0 0;background:#fff;color:#111827;translate:-50% 105%;transition:translate .55s cubic-bezier(.16,1,.3,1);box-shadow:0 -30px 80px -30px rgba(0,0,0,.5)}
.mp-sheet.is-on .mp-sheet-box{translate:-50% 0}
.mp-sheet-grab{position:absolute;left:50%;top:10px;width:44px;height:5px;margin-left:-22px;border-radius:5px;background:#d6d9de}
.mp-sheet-x{position:absolute;right:14px;top:12px;width:44px;height:44px;border:0;border-radius:50%;background:#f1f2f4;color:#111827;font:400 24px/1 system-ui,sans-serif;cursor:pointer}
.mp-sheet-x:is([dir=rtl] *){right:auto;left:14px}
.mp-sheet-pic{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#f1f2f4;touch-action:pan-y}
.mp-sheet-pic.is-zoom{touch-action:none;cursor:zoom-out}
.mp-sheet-pic.is-lens{cursor:crosshair}
.mp-sheet-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .25s ease;cursor:zoom-in}
.mp-sheet-pic small{position:absolute;left:10px;bottom:10px;padding:6px 10px;border-radius:999px;background:rgba(17,24,39,.72);color:#fff;font:600 11px/1 system-ui,sans-serif}
.mp-sheet-pic.is-zoom small{display:none}
@media (hover:hover) and (pointer:fine){.mp-sheet-pic small{display:none}}
.mp-sheet-info{align-self:center;min-width:0}
.mp-sheet-cat{display:block;margin-bottom:10px;font:700 11px/1.3 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mp-acc)}
.mp-sheet-t{margin:0 0 10px;font:700 clamp(22px,2.6vw,30px)/1.15 var(--t-display,var(--rm-font-head,system-ui)),sans-serif;color:#111827}
.mp-sheet-price{margin-bottom:12px;font:700 18px/1.2 system-ui,sans-serif;color:#111827}
.mp-sheet-price del{opacity:.6;font-weight:500;margin-inline-end:6px}
.mp-sheet-d{margin:0 0 20px;font:400 15px/1.6 system-ui,sans-serif;color:#4b5563}
.mp-sheet-acts{display:flex;flex-wrap:wrap;gap:10px}
.mp-sheet-acts>*{flex:1 1 150px;display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 20px;border-radius:999px;border:1.5px solid #111827;background:#fff;color:#111827;font:700 14px/1 system-ui,sans-serif;text-decoration:none;cursor:pointer}
.mp-sheet-acts .mp-sheet-add,.mp-sheet-acts>:only-child{background:var(--t-btn-bg,var(--mp-acc));border-color:var(--t-btn-bg,var(--mp-acc));color:var(--t-btn-fg,#fff)}
body.mp-sheet-open{overflow:hidden}
@media (max-width:700px){.mp-sheet-box{grid-template-columns:1fr;gap:18px;padding:30px 16px calc(18px + env(safe-area-inset-bottom,0px))}.mp-sheet-pic{aspect-ratio:4/3}}
.mp-toasts{position:fixed;left:18px;bottom:78px;z-index:99985;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.mp-toast{padding:12px 16px;border-radius:12px;background:#111827;color:#fff;font:600 13px/1.35 system-ui,sans-serif;box-shadow:0 16px 40px -16px rgba(0,0,0,.6);animation:mpToast .45s cubic-bezier(.16,1,.3,1) both;max-width:min(320px,80vw)}
.mp-toast.is-out{opacity:0;translate:0 10px;transition:opacity .35s,translate .35s}
@keyframes mpToast{from{opacity:0;translate:0 16px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
.mp-shake{animation:mpShake .5s ease}
@keyframes mpShake{20%{translate:-5px 0}40%{translate:5px 0}60%{translate:-3px 0}80%{translate:3px 0}}
.mp-added{animation:mpBump .5s cubic-bezier(.16,1,.3,1)}
.mp-burst{position:fixed;z-index:99990;width:7px;height:7px;margin:-3px 0 0 -3px;border-radius:50%;background:#e11d48;pointer-events:none;animation:mpBurst .6s ease-out both}
@keyframes mpBurst{from{transform:rotate(var(--a)) translateY(0) scale(1);opacity:1}to{transform:rotate(var(--a)) translateY(-34px) scale(.3);opacity:0}}

/* ==================================================================== 10. ATMOSPHERE */
.mp-pts{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.mp-pts>mp-x{position:absolute;width:var(--s,5px);height:var(--s,5px);border-radius:50%;background:#fff;opacity:.5;translate:calc(var(--px,0)*var(--k,10)*-3px) calc(var(--py,0)*var(--k,10)*-3px);transition:translate .7s cubic-bezier(.16,1,.3,1);animation:mpPt var(--t,8s) linear var(--dl,0s) infinite}
.mp-pts-dust>mp-x{background:#f1d9a0;opacity:.45;filter:blur(.5px)}
.mp-pts-sparks>mp-x{background:#ffb347;box-shadow:0 0 8px #ff8a00}
.mp-pts-stars>mp-x{clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);width:calc(var(--s,5px)*2);height:calc(var(--s,5px)*2);animation-name:mpTw}
.mp-pts-bubbles>mp-x{background:none;border:1.5px solid rgba(255,255,255,.7);width:calc(var(--s,5px)*2.4);height:calc(var(--s,5px)*2.4)}
/* inside an element the particles take the text colour, so they show on light and on dark */
.mp-pts-ink:not(.mp-pts-sparks):not(.mp-pts-bubbles)>mp-x{background:currentColor;opacity:.3;filter:none}
.mp-pts-ink.mp-pts-bubbles>mp-x{border-color:currentColor;opacity:.4}
@keyframes mpPt{0%{transform:translateY(30px);opacity:0}15%{opacity:.6}85%{opacity:.5}100%{transform:translateY(-110px);opacity:0}}
.mp-pts-ink>mp-x{animation-name:mpPtInk}
.mp-pts-ink.mp-pts-stars>mp-x{animation-name:mpTw}
@keyframes mpPtInk{0%{transform:translateY(30px);opacity:0}15%{opacity:.34}85%{opacity:.28}100%{transform:translateY(-110px);opacity:0}}
@keyframes mpTw{0%,100%{transform:scale(.4);opacity:.15}50%{transform:scale(1);opacity:.85}}
.mp-rings{position:absolute;right:14px;bottom:14px;z-index:1;width:190px;height:190px;fill:none;stroke:currentColor;stroke-width:.8;opacity:.28;pointer-events:none;animation:mpSpin 60s linear infinite}
.mp-rings circle:nth-child(2){stroke-dasharray:3 7}.mp-rings circle:nth-child(3){stroke-dasharray:1 5}
.mp-rings:is([dir=rtl] *){right:auto;left:14px}
@keyframes mpSpin{to{transform:rotate(360deg)}}
.mp-rings,.mp-badge{transform-origin:50% 50%;transform-box:fill-box}
.mp-badge{position:absolute;right:26px;top:26px;z-index:2;width:112px;height:112px;pointer-events:none;animation:mpSpin 22s linear infinite}
.mp-badge:is([dir=rtl] *){right:auto;left:26px}
.mp-badge text{font:700 10.5px/1 system-ui,sans-serif;letter-spacing:.14em;fill:currentColor}
.mp-badge circle{fill:var(--mp-acc)}
.mp-lb{position:absolute;left:0;right:0;z-index:6;height:17%;background:#000;pointer-events:none;animation:mpLb 1.5s cubic-bezier(.7,0,.2,1) .5s both}
.mp-lb-a{top:0;transform-origin:50% 0}.mp-lb-b{bottom:0;transform-origin:50% 100%}
@keyframes mpLb{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@media (max-width:782px){.mp-badge{width:78px;height:78px;right:12px;top:12px}.mp-rings{width:120px;height:120px}.mp-pts>mp-x:nth-child(n+10){display:none}}
.mp-grain{position:fixed;inset:-50%;z-index:9970;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:mpGrain 1.1s steps(6) infinite}
.mp-grain-local{position:absolute;inset:0;opacity:.09;border-radius:inherit;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes mpGrain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.mp-aurora,.mp-net{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mp-net{width:100%;height:100%}
.mp-aurora>mp-x{position:absolute;width:46%;aspect-ratio:1;border-radius:50%;filter:blur(70px);opacity:.34;background:var(--mp-acc);animation:mpAur 16s ease-in-out infinite alternate}
.mp-aurora>mp-x:nth-child(1){left:-8%;top:-30%}
.mp-aurora>mp-x:nth-child(2){right:-6%;top:10%;background:var(--t-gold,#4f8cff);animation-duration:21s;animation-delay:-6s}
.mp-aurora>mp-x:nth-child(3){left:34%;bottom:-60%;background:#fff;opacity:.1;animation-duration:26s;animation-delay:-11s}
@keyframes mpAur{from{transform:translate(-6%,-4%) scale(.9)}to{transform:translate(10%,8%) scale(1.15)}}
/* an element's own atmosphere: behind its content (aurora, net) or as a light film over it */
.mp-bg-host{isolation:isolate}
.mp-bgx{z-index:-1!important;border-radius:inherit}
.mp-fgx{z-index:2;pointer-events:none!important}
.mp-aurora.mp-bgx>mp-x{opacity:.26}
.mp-aurora.mp-bgx>mp-x:nth-child(2){background:color-mix(in srgb,var(--mp-acc) 45%,#4f8cff)}
.mp-aurora.mp-bgx>mp-x:nth-child(3){background:var(--mp-acc);opacity:.12}

/* ==================================================================== 11. SMALL THINGS (page presets only) */
html.mp-on:not(.mp-reduce) body.mp-stamp :is(.rmt-badge,.rm-badge){opacity:0}
html.mp-on:not(.mp-reduce) body.mp-stamp .mp-seen :is(.rmt-badge,.rm-badge),html.mp-on:not(.mp-reduce) body.mp-stamp .mp-in :is(.rmt-badge,.rm-badge){animation:mpStamp .55s cubic-bezier(.3,1.5,.5,1) .35s both}
@keyframes mpStamp{0%{opacity:0;scale:2.4;rotate:-18deg}60%{opacity:1;scale:.92;rotate:-4deg}100%{opacity:1;scale:1;rotate:0deg}}
html.mp-on:not(.mp-reduce) body.mp-polaroid .mp-pol{transition:opacity .7s,rotate 1.1s var(--mp-back),translate 1.1s var(--mp-back)}
html.mp-on:not(.mp-reduce) body.mp-polaroid .mp-pol:not(.mp-in){opacity:0;rotate:var(--mp-pr,0deg);translate:var(--mp-px,0) var(--mp-py,40px)}
html.mp-site.mp-fine .mp-seen :is(.rwc-price,.rm-price){transition:rotate .4s var(--mp-out);transform-origin:0 0}
html.mp-site.mp-fine :is(.rwc-card,.rmt-tour-card,.rm-qcard):hover :is(.rwc-price,.rm-price){rotate:-2deg}
html.mp-site :is(.rrx-marquee,.rmd-ss,.rm-marquee):hover *{animation-play-state:paused}
html.mp-site.mp-fine :is(.rm-logos,.rm-brands,.rm-logo-row) img{filter:grayscale(1);opacity:.7;transition:filter .4s,opacity .4s,scale .4s var(--mp-out)}
html.mp-site.mp-fine :is(.rm-logos,.rm-brands,.rm-logo-row) img:hover{filter:none;opacity:1;scale:1.06}
html.mp-site.mp-fine :is(.rm-ico-wrap,.rmd-tb-ico,.rmd-ss-ico){transition:rotate .5s cubic-bezier(.34,1.5,.5,1),scale .5s cubic-bezier(.34,1.5,.5,1)}
html.mp-site.mp-fine :is(.rm-card,.rm-fc,.rmd-tb-i,.rmd-ss-i):hover :is(.rm-ico-wrap,.rmd-tb-ico,.rmd-ss-ico){rotate:-8deg;scale:1.1}
html.mp-site:not(.mp-reduce) .rm-fbtn-wa{animation:mpWa 2.8s ease-out infinite}
@keyframes mpWa{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%,100%{box-shadow:0 0 0 16px rgba(37,211,102,0)}}
html.mp-site:not(.mp-reduce) .rm-fbtn-phone{animation:mpWa 2.8s ease-out 1.2s infinite}

/* ==================================================================== 12. SAFETY */
/* no effect may ever widen the page */
html.mp-on body{overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  body.rme-mp-enter .rmb-canvas-main{animation:none}
  body.rme-mp-intro::before,body.rme-mp-intro::after{display:none}
  .mp-ring,.mp-bar,.mp-rip,.mp-fly,.mp-curtain,.mp-sheet-box,.mp-sheet-bd{transition:none;animation:none}
  html.mp-site .rf-drawer.is-open :is(.rf-mm-li,.rf-nav-li,.rf-drawer-foot>*){animation:none}
  .mp-grain,.mp-grain-local,.mp-pts,.mp-rings,.mp-badge,.mp-lb,.mp-aurora,.mp-net,.mp-td,.mp-burst,.mp-caret,.mp-ln{display:none!important}
  .mp-toast{animation:none}
}
@media print{
  html.mp-on :is(.mp-i,.mp-h,.mp-pol,.mp-h .mp-w>.mp-s,.mp-c){opacity:1!important;translate:none!important;scale:none!important;rotate:none!important;filter:none!important;animation:none!important}
  html.mp-on .mp-m img{scale:none!important;clip-path:none!important;filter:none!important}
  html.mp-on .mp-sc>*{opacity:1!important;translate:none!important;scale:none!important;rotate:none!important}
  .mp-wipe,.mp-ring,.mp-bar,.mp-cur,.mp-grain,.mp-grain-local,.mp-pts,.mp-rings,.mp-badge,.mp-aurora,.mp-net,.mp-qv,.mp-curtain,.mp-toasts{display:none!important}
}

/* ==== MOTION PRO 4 ==== (generated by tools: fx/build/build_css.py) ==== */
/* ==================================================================== 13. ENTRANCES — Motion Pro 4
   Same contract as section 1: only the START state is declared (":not(.mp-in)"), or a keyframe run
   that ends in the element's natural state. Nothing applies once the element is ".mp-done". */
html.mp-on:not(.mp-reduce) .mp-i.mp-r-risefar:not(.mp-in){translate:0 110px}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-sink:not(.mp-in){translate:0 -38px}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-left:not(.mp-in){translate:-84px 0}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-right:not(.mp-in){translate:84px 0}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-zoomrot:not(.mp-in){translate:none;scale:.78;rotate:-9deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-spiral:not(.mp-in){translate:none;scale:.3;rotate:-200deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-tiltin:not(.mp-in){translate:0 52px;rotate:7deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-peel:not(.mp-in){translate:0 18px;rotate:-13deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-unfold:not(.mp-in){translate:none;rotate:x -88deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-unfoldy:not(.mp-in){translate:none;rotate:y 88deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-unfoldy:not(.mp-in):is([dir=rtl] *){rotate:y -88deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-door:not(.mp-in){translate:none;rotate:y -78deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-flipdown:not(.mp-in){translate:none;rotate:x 78deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-depth:not(.mp-in){translate:none;scale:1.6;filter:blur(10px)}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-far:not(.mp-in){translate:none;scale:.5;filter:blur(6px)}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-shrink:not(.mp-in){translate:none;scale:1.24}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-squash:not(.mp-in){translate:none;scale:1 .3}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-stretchx:not(.mp-in){translate:none;scale:.2 1}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-glide:not(.mp-in){translate:-110px 0}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-glide:not(.mp-in):is([dir=rtl] *){translate:110px 0}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-cascade:not(.mp-in){translate:0 -110px;rotate:-5deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-cascade:nth-child(even):not(.mp-in){rotate:5deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-deal:not(.mp-in){translate:-130px 70px;rotate:-24deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-deal:not(.mp-in):is([dir=rtl] *){translate:130px 70px;rotate:24deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-stack:not(.mp-in){translate:0 46px;scale:.8;rotate:-3deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-stack:nth-child(even):not(.mp-in){rotate:3deg}
/* neighbours arrive from different sides */
html.mp-on:not(.mp-reduce) .mp-i.mp-r-scatter:not(.mp-in){translate:-50px 60px;rotate:-10deg;scale:.9}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-scatter:nth-child(3n+2):not(.mp-in){translate:0 90px;rotate:5deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-scatter:nth-child(3n):not(.mp-in){translate:60px 40px;rotate:12deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-alternate:not(.mp-in){translate:-70px 0}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-alternate:nth-child(even):not(.mp-in){translate:70px 0}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-updown:not(.mp-in){translate:0 -52px}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-updown:nth-child(even):not(.mp-in){translate:0 52px}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-zigzag:not(.mp-in){translate:0 40px;rotate:-6deg}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-zigzag:nth-child(even):not(.mp-in){rotate:6deg}
/* origins, perspective and easing */
html.mp-on:not(.mp-reduce) .mp-i:is(.mp-r-unfold,.mp-r-peel):not(.mp-done){transform-origin:50% 0}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-peel:not(.mp-done){transform-origin:0 0}
html.mp-on:not(.mp-reduce) .mp-i:is(.mp-r-unfoldy,.mp-r-door,.mp-r-stretchx):not(.mp-done){transform-origin:0 50%}
html.mp-on:not(.mp-reduce) .mp-i:is(.mp-r-unfoldy,.mp-r-door,.mp-r-stretchx):not(.mp-done):is([dir=rtl] *){transform-origin:100% 50%}
html.mp-on:not(.mp-reduce) .mp-i:is(.mp-r-flipdown,.mp-r-squash,.mp-r-tiltin):not(.mp-done){transform-origin:50% 100%}
html.mp-on:not(.mp-reduce) :has(>.mp-i:is(.mp-r-unfold,.mp-r-unfoldy,.mp-r-door,.mp-r-flipdown,.mp-r-flipy,.mp-r-flip):not(.mp-done)){perspective:1100px}
html.mp-on:not(.mp-reduce) .mp-i:is(.mp-r-zoomrot,.mp-r-spiral,.mp-r-tiltin,.mp-r-peel,.mp-r-squash,.mp-r-stretchx,.mp-r-cascade,.mp-r-deal,.mp-r-stack,.mp-r-scatter,.mp-r-zigzag):not(.mp-done){transition-timing-function:var(--mp-ease),var(--mp-back),var(--mp-back),var(--mp-back),var(--mp-ease)}
html.mp-on:not(.mp-reduce) .mp-i:is(.mp-r-glide,.mp-r-deal,.mp-r-risefar,.mp-r-spiral):not(.mp-done){transition-duration:calc(.9s*var(--mp-t)),calc(1.35s*var(--mp-t)),calc(1.35s*var(--mp-t)),calc(1.35s*var(--mp-t)),calc(.8s*var(--mp-t))}
/* uncovered by a moving edge. Until it enters, the element is hidden by opacity alone: an element that is
   clipped away completely is never reported by the browser's observer. The clip then runs as a keyframe. */
html.mp-on:not(.mp-reduce) .mp-i:is(.mp-r-curtain,.mp-r-curtainup,.mp-r-wipex,.mp-r-iris,.mp-r-diamond,.mp-r-corner,.mp-r-split,.mp-r-splitv):not(.mp-done){transition:opacity .01s linear var(--mp-d,0ms)}
html.mp-on:not(.mp-reduce) .mp-i:is(.mp-r-curtain,.mp-r-curtainup,.mp-r-wipex,.mp-r-iris,.mp-r-diamond,.mp-r-corner,.mp-r-split,.mp-r-splitv):not(.mp-in){translate:none}
html.mp-on:not(.mp-reduce) .mp-i:is(.mp-r-curtain,.mp-r-curtainup,.mp-r-wipex,.mp-r-iris,.mp-r-diamond,.mp-r-corner,.mp-r-split,.mp-r-splitv).mp-in:not(.mp-done){animation:mpxClipDown calc(1.1s*var(--mp-t)) cubic-bezier(.7,0,.2,1) var(--mp-d,0ms) both}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-curtainup.mp-in:not(.mp-done){animation-name:mpxClipUp}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-wipex.mp-in:not(.mp-done){animation-name:mpxClipSide}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-wipex.mp-in:not(.mp-done):is([dir=rtl] *){animation-name:mpxClipSideR}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-split.mp-in:not(.mp-done){animation-name:mpxClipSplit}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-splitv.mp-in:not(.mp-done){animation-name:mpxClipSplitV}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-iris.mp-in:not(.mp-done){animation-name:mpxClipIris}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-corner.mp-in:not(.mp-done){animation-name:mpxClipCorner}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-diamond.mp-in:not(.mp-done){animation-name:mpxClipDiamond}
@keyframes mpxClipDown{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mpxClipUp{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mpxClipSide{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mpxClipSideR{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes mpxClipSplit{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes mpxClipSplitV{from{clip-path:inset(50% 0 50% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mpxClipIris{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}
@keyframes mpxClipCorner{from{clip-path:circle(0% at 0 0)}to{clip-path:circle(150% at 0 0)}}
@keyframes mpxClipDiamond{from{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}to{clip-path:polygon(50% -50%,150% 50%,50% 150%,-50% 50%)}}
/* slanted arrivals (the element's own transform is untouched once it has entered) */
html.mp-on:not(.mp-reduce) .mp-i:is(.mp-r-skew,.mp-r-skewx,.mp-r-lightspeed):not(.mp-done){transition:opacity calc(.8s*var(--mp-t)) var(--mp-ease) var(--mp-d,0ms),translate calc(1s*var(--mp-t)) var(--mp-out) var(--mp-d,0ms),transform calc(1s*var(--mp-t)) var(--mp-out) var(--mp-d,0ms)}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-skew:not(.mp-in){translate:0 60px;transform:skewY(7deg)}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-skewx:not(.mp-in){translate:-50px 0;transform:skewX(-16deg)}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-lightspeed:not(.mp-in){translate:90px 0;transform:skewX(-28deg)}
/* keyframe arrivals */
html.mp-on:not(.mp-reduce) .mp-i:is(.mp-r-bounce,.mp-r-elastic,.mp-r-rubber,.mp-r-jelly,.mp-r-stamp,.mp-r-tv,.mp-r-flicker,.mp-r-glitch,.mp-r-pendulum,.mp-r-tada,.mp-r-backin):not(.mp-in){translate:none}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-bounce.mp-in:not(.mp-done){animation:mpxBounce calc(1.1s*var(--mp-t)) both var(--mp-d,0ms)}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-elastic.mp-in:not(.mp-done){animation:mpxElastic calc(1s*var(--mp-t)) both var(--mp-d,0ms)}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-rubber.mp-in:not(.mp-done){animation:mpxRubber calc(1s*var(--mp-t)) both var(--mp-d,0ms)}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-jelly.mp-in:not(.mp-done){animation:mpxJelly calc(1s*var(--mp-t)) both var(--mp-d,0ms)}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-stamp.mp-in:not(.mp-done){animation:mpxStamp calc(.7s*var(--mp-t)) cubic-bezier(.2,.9,.3,1) both var(--mp-d,0ms)}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-tv.mp-in:not(.mp-done){animation:mpxTv calc(.9s*var(--mp-t)) cubic-bezier(.7,0,.2,1) both var(--mp-d,0ms)}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-flicker.mp-in:not(.mp-done){animation:mpxFlicker calc(1.1s*var(--mp-t)) linear both var(--mp-d,0ms)}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-glitch.mp-in:not(.mp-done){animation:mpxGlitch calc(.8s*var(--mp-t)) steps(1,end) both var(--mp-d,0ms)}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-pendulum.mp-in:not(.mp-done){animation:mpxPendulum calc(1.2s*var(--mp-t)) ease-out both var(--mp-d,0ms);transform-origin:50% 0}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-tada.mp-in:not(.mp-done){animation:mpxTada calc(1s*var(--mp-t)) ease both var(--mp-d,0ms)}
html.mp-on:not(.mp-reduce) .mp-i.mp-r-backin.mp-in:not(.mp-done){animation:mpxBackIn calc(1.1s*var(--mp-t)) var(--mp-out) both var(--mp-d,0ms)}
@keyframes mpxBounce{0%{opacity:0;translate:0 -90px}35%{opacity:1;translate:0 0}52%{translate:0 -26px}68%{translate:0 0}80%{translate:0 -9px}100%{opacity:1;translate:0 0}}
@keyframes mpxElastic{0%{opacity:0;scale:.3}45%{opacity:1;scale:1.12}62%{scale:.94}78%{scale:1.04}100%{opacity:1;scale:1}}
@keyframes mpxRubber{0%{opacity:0;scale:1}20%{opacity:1;scale:1.25 .75}40%{scale:.75 1.25}55%{scale:1.15 .85}70%{scale:.95 1.05}85%{scale:1.04 .96}100%{opacity:1;scale:1}}
@keyframes mpxJelly{0%{opacity:0;scale:.9;rotate:0deg}25%{opacity:1;rotate:-4deg;scale:1.04}45%{rotate:3deg}62%{rotate:-2deg}80%{rotate:1deg}100%{opacity:1;rotate:0deg;scale:1}}
@keyframes mpxStamp{0%{opacity:0;scale:2.3;rotate:-10deg}55%{opacity:1;scale:.94;rotate:1deg}72%{scale:1.03}100%{opacity:1;scale:1;rotate:0deg}}
@keyframes mpxTv{0%{opacity:0;scale:.02 .012}8%{opacity:1}45%{scale:1 .012}100%{opacity:1;scale:1 1}}
@keyframes mpxFlicker{0%{opacity:0}8%{opacity:.9}14%{opacity:.1}22%{opacity:1}30%{opacity:.25}42%{opacity:1}55%{opacity:.6}70%,100%{opacity:1}}
@keyframes mpxGlitch{0%{opacity:0;translate:-14px 0;clip-path:inset(0 0 70% 0)}14%{opacity:1;translate:10px 0;clip-path:inset(40% 0 20% 0)}28%{translate:-6px 0;clip-path:inset(10% 0 60% 0)}42%{translate:8px 0;clip-path:inset(60% 0 5% 0)}56%{translate:-3px 0;clip-path:inset(20% 0 30% 0)}70%{translate:2px 0;clip-path:inset(0 0 0 0)}100%{opacity:1;translate:0 0;clip-path:inset(0 0 0 0)}}
@keyframes mpxPendulum{0%{opacity:0;rotate:-38deg}30%{opacity:1;rotate:22deg}52%{rotate:-12deg}70%{rotate:6deg}86%{rotate:-2deg}100%{opacity:1;rotate:0deg}}
@keyframes mpxTada{0%{opacity:0;scale:.7}20%{opacity:1;scale:.9;rotate:-3deg}40%,60%{scale:1.08;rotate:3deg}50%,70%{scale:1.08;rotate:-3deg}100%{opacity:1;scale:1;rotate:0deg}}
@keyframes mpxBackIn{0%{opacity:0;translate:0 120px;scale:.7}65%{opacity:.8;translate:0 0;scale:.7}100%{opacity:1;translate:0 0;scale:1}}

/* ==================================================================== 14. HEADINGS — Motion Pro 4 */
html.mp-on,html.mp-on .rm-w{--mp-acct:var(--rm-accent-text,var(--mp-acc));--mp-acc2:var(--t-gold,var(--rm-yellow,#4f8cff))}
/* words, without the mask */
html.mp-on:not(.mp-reduce) .mp-h:is(.mp-hd-words,.mp-hd-wordsblur,.mp-hd-wordszoom,.mp-hd-wordsdrop,.mp-hd-wordsside,.mp-hd-wordsflip) .mp-w{overflow:visible}
html.mp-on:not(.mp-reduce) .mp-h:is(.mp-hd-words,.mp-hd-wordsblur,.mp-hd-wordszoom,.mp-hd-wordsdrop,.mp-hd-wordsside,.mp-hd-wordsflip) .mp-w>.mp-s{transition:translate calc(.8s*var(--mp-t)) var(--mp-out),opacity calc(.7s*var(--mp-t)) var(--mp-ease),filter calc(.7s*var(--mp-t)) var(--mp-ease),scale calc(.8s*var(--mp-t)) var(--mp-out),rotate calc(.8s*var(--mp-t)) var(--mp-out);transition-delay:calc(var(--mp-wi,0)*70ms)}
html.mp-on:not(.mp-reduce) .mp-hd-words:not(.mp-in) .mp-w>.mp-s{translate:0 45%;opacity:0}
html.mp-on:not(.mp-reduce) .mp-hd-wordsblur:not(.mp-in) .mp-w>.mp-s{translate:none;opacity:0;filter:blur(12px)}
html.mp-on:not(.mp-reduce) .mp-hd-wordszoom:not(.mp-in) .mp-w>.mp-s{translate:none;opacity:0;scale:1.7;filter:blur(6px)}
html.mp-on:not(.mp-reduce) .mp-hd-wordsdrop:not(.mp-in) .mp-w>.mp-s{translate:0 -90%;opacity:0}
html.mp-on:not(.mp-reduce) .mp-hd-wordsdrop .mp-w>.mp-s{transition-timing-function:var(--mp-back),var(--mp-ease),ease,ease,ease}
html.mp-on:not(.mp-reduce) .mp-hd-wordsside:not(.mp-in) .mp-w>.mp-s{translate:60% 0;opacity:0}
html.mp-on:not(.mp-reduce) .mp-hd-wordsside:not(.mp-in) .mp-w>.mp-s:is([dir=rtl] *){translate:-60% 0}
html.mp-on:not(.mp-reduce) .mp-hd-wordsflip .mp-w{perspective:500px}
html.mp-on:not(.mp-reduce) .mp-hd-wordsflip:not(.mp-in) .mp-w>.mp-s{translate:none;opacity:0;rotate:y 90deg}
/* letters */
html.mp-on:not(.mp-reduce) .mp-h:is(.mp-hd-flipchars,.mp-hd-dropchars,.mp-hd-zoomchars,.mp-hd-sidechars,.mp-hd-spinchars,.mp-hd-track,.mp-hd-elastic) .mp-w{overflow:visible}
html.mp-on:not(.mp-reduce) .mp-hd-flipchars .mp-w{perspective:500px}
html.mp-on:not(.mp-reduce) .mp-hd-flipchars.mp-h-chars:not(.mp-in) .mp-c{translate:none;rotate:x -90deg}
html.mp-on:not(.mp-reduce) .mp-hd-dropchars.mp-h-chars .mp-c{transition-timing-function:var(--mp-ease),cubic-bezier(.34,1.56,.64,1),var(--mp-out),cubic-bezier(.34,1.6,.5,1)}
html.mp-on:not(.mp-reduce) .mp-hd-dropchars.mp-h-chars:not(.mp-in) .mp-c{translate:0 -140%;rotate:none}
html.mp-on:not(.mp-reduce) .mp-hd-zoomchars.mp-h-chars .mp-c{transition:opacity .5s var(--mp-ease),scale .65s var(--mp-out),filter .5s var(--mp-ease);transition-delay:calc(var(--mp-ci,0)*26ms)}
html.mp-on:not(.mp-reduce) .mp-hd-zoomchars.mp-h-chars:not(.mp-in) .mp-c{translate:none;rotate:none;scale:2.6;filter:blur(8px)}
html.mp-on:not(.mp-reduce) .mp-hd-sidechars.mp-h-chars:not(.mp-in) .mp-c{translate:90% 0;rotate:none}
html.mp-on:not(.mp-reduce) .mp-hd-sidechars.mp-h-chars:not(.mp-in) .mp-c:is([dir=rtl] *){translate:-90% 0}
html.mp-on:not(.mp-reduce) .mp-hd-spinchars.mp-h-chars .mp-c{transition:opacity .5s var(--mp-ease),rotate .8s var(--mp-out),scale .8s var(--mp-out);transition-delay:calc(var(--mp-ci,0)*24ms)}
html.mp-on:not(.mp-reduce) .mp-hd-spinchars.mp-h-chars:not(.mp-in) .mp-c{translate:none;rotate:200deg;scale:.2}
/* elastic letters: they spring in, and afterwards each letter stretches under the pointer */
html.mp-on:not(.mp-reduce) .mp-hd-elastic.mp-h-chars .mp-c{transform-origin:50% 100%;transition:opacity .4s var(--mp-ease),scale .7s cubic-bezier(.3,2.3,.4,1),translate .7s cubic-bezier(.3,2.3,.4,1);transition-delay:calc(var(--mp-ci,0)*22ms)}
html.mp-on:not(.mp-reduce) .mp-hd-elastic.mp-h-chars:not(.mp-in) .mp-c{translate:none;rotate:none;scale:.3 1.7}
html.mp-on:not(.mp-reduce) .mp-hd-elastic.mp-h-chars.mp-done .mp-c{transition-delay:0ms;transition-duration:.55s}
@media (hover:hover){html.mp-on:not(.mp-reduce) .mp-hd-elastic.mp-h-chars.mp-done .mp-c:hover{scale:1.24 .76;translate:0 3%}}
html.mp-on:not(.mp-reduce) .mp-hd-fadechars.mp-h-chars:not(.mp-in) .mp-c{translate:none;rotate:none}
html.mp-on:not(.mp-reduce) .mp-hd-fadechars.mp-h-chars .mp-c{transition:opacity .25s linear;transition-delay:calc(var(--mp-ci,0)*34ms)}
/* letters gather from a wide spread (no change of letter-spacing, so the lines never re-wrap) */
html.mp-on:not(.mp-reduce) .mp-hd-track.mp-h-chars .mp-c{transition:opacity .7s var(--mp-ease),translate calc(1.1s*var(--mp-t)) var(--mp-out),filter .7s;transition-delay:0ms}
html.mp-on:not(.mp-reduce) .mp-hd-track.mp-h-chars:not(.mp-in) .mp-c{rotate:none;translate:calc(var(--mp-co,0)*.34em) 0;filter:blur(3px)}
/* a gradient keeps travelling through the heading */
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-gradient{background:linear-gradient(100deg,currentColor 0 30%,var(--mp-acct) 50%,currentColor 70% 100%) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:mpxGradText 6s linear infinite;transition:opacity .6s var(--mp-ease)}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-gradient:not(.mp-in){opacity:0}
@keyframes mpxGradText{to{background-position:-300% 0}}
/* neon sign */
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-neon:not(.mp-in){opacity:0}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-neon.mp-in{text-shadow:0 0 .32em color-mix(in srgb,var(--mp-acc) 50%,transparent);animation:mpxFlicker calc(1.3s*var(--mp-t)) linear both}
/* outline first, the fill follows */
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-stroke:not(.mp-done){transition:-webkit-text-fill-color calc(.9s*var(--mp-t)) var(--mp-ease) .45s,opacity .4s var(--mp-ease);-webkit-text-stroke:1px currentColor}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-stroke:not(.mp-in){-webkit-text-fill-color:transparent;opacity:0}
/* uncovered from the start side / by a soft light */
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-wipe:not(.mp-in){opacity:0}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-wipe.mp-in:not(.mp-done){animation:mpxHdWipe calc(1s*var(--mp-t)) cubic-bezier(.7,0,.2,1) both}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-wipe.mp-in:not(.mp-done):is([dir=rtl] *){animation-name:mpxHdWipeR}
@keyframes mpxHdWipe{from{clip-path:inset(-10% 100% -20% -2%)}to{clip-path:inset(-10% -2% -20% -2%)}}
@keyframes mpxHdWipeR{from{clip-path:inset(-10% -2% -20% 100%)}to{clip-path:inset(-10% -2% -20% -2%)}}
@property --mpx-m{syntax:'<percentage>';inherits:false;initial-value:0%}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-reveal:not(.mp-done){-webkit-mask-image:linear-gradient(100deg,#000 calc(var(--mpx-m) - 30%),transparent var(--mpx-m));mask-image:linear-gradient(100deg,#000 calc(var(--mpx-m) - 30%),transparent var(--mpx-m));transition:--mpx-m calc(1.4s*var(--mp-t)) var(--mp-ease)}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-reveal.mp-in:not(.mp-done){--mpx-m:140%}
/* the whole heading */
html.mp-on:not(.mp-reduce) .mp-h:is(.mp-hd-zoom,.mp-hd-flip,.mp-hd-rise,.mp-hd-slidein){transition:opacity calc(.8s*var(--mp-t)) var(--mp-ease),translate calc(1s*var(--mp-t)) var(--mp-out),scale calc(1s*var(--mp-t)) var(--mp-out),rotate calc(1s*var(--mp-t)) var(--mp-out),filter .7s var(--mp-ease)}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-zoom:not(.mp-in){opacity:0;scale:1.3;filter:blur(6px)}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-flip{transform-origin:50% 100%}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-flip:not(.mp-in){opacity:0;rotate:x -84deg}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-rise:not(.mp-in){opacity:0;translate:0 70px}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-slidein:not(.mp-in){opacity:0;translate:-70px 0}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-slidein:not(.mp-in):is([dir=rtl] *){translate:70px 0}
html.mp-on:not(.mp-reduce) .mp-h:is(.mp-hd-bounce,.mp-hd-swing,.mp-hd-glitch,.mp-hd-pop):not(.mp-in){opacity:0}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-bounce.mp-in:not(.mp-done){animation:mpxBounce calc(1.1s*var(--mp-t)) both}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-pop.mp-in:not(.mp-done){animation:mpxElastic calc(.9s*var(--mp-t)) both}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-swing.mp-in:not(.mp-done){animation:mpxPendulum calc(1.2s*var(--mp-t)) ease-out both;transform-origin:50% 0}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-glitch.mp-in:not(.mp-done){animation:mpxGlitchT calc(.9s*var(--mp-t)) steps(1,end) both}
html.mp-on.mp-fine:not(.mp-reduce) .mp-h.mp-hd-glitch.mp-done:hover{animation:mpxGlitchT .5s steps(1,end)}
@keyframes mpxGlitchT{0%{opacity:0;text-shadow:-.06em 0 #ff2d6f,.06em 0 #2de2ff;translate:-6px 0}20%{opacity:1;text-shadow:.05em 0 #ff2d6f,-.05em 0 #2de2ff;translate:5px 0}40%{opacity:1;text-shadow:-.03em 0 #ff2d6f,.03em 0 #2de2ff;translate:-3px 0}60%{opacity:1;text-shadow:.02em 0 #ff2d6f,-.02em 0 #2de2ff;translate:2px 0}80%,100%{opacity:1;text-shadow:none;translate:0 0}}
/* drawn around or under the heading (an extra SVG, so nothing moves) */
.mp-scr-zigzag,.mp-scr-double,.mp-scr-brush,.mp-scr-arrow{height:.6em;bottom:-.42em}
.mp-scr-brush path{stroke-width:7;opacity:.55}
.mp-ring-draw{position:absolute;left:-6%;top:-12%;width:112%;height:124%;overflow:visible;fill:none;pointer-events:none;z-index:-1}
.mp-ring-draw path{stroke:var(--mp-acc);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--mp-out,ease) .4s}
.mp-h.mp-in .mp-ring-draw path,html.mp-reduce .mp-ring-draw path{stroke-dashoffset:0}
html.mp-on .mp-h:is(.mp-hd-circle,.mp-hd-box,.mp-hd-bracket){isolation:isolate}
html.mp-on .mp-h:is(.mp-hd-circle,.mp-hd-box,.mp-hd-bracket) .mp-w.mp-mark{position:relative;overflow:visible}
html.mp-on:not(.mp-reduce) .mp-h:is(.mp-hd-circle,.mp-hd-box,.mp-hd-bracket,.mp-hd-zigzag,.mp-hd-double,.mp-hd-brush,.mp-hd-arrow){transition:opacity calc(.9s*var(--mp-t)) var(--mp-ease),translate calc(1s*var(--mp-t)) var(--mp-out)}
html.mp-on:not(.mp-reduce) .mp-h:is(.mp-hd-circle,.mp-hd-box,.mp-hd-bracket,.mp-hd-zigzag,.mp-hd-double,.mp-hd-brush,.mp-hd-arrow):not(.mp-in){opacity:0;translate:0 22px}
html.mp-on:not(.mp-reduce) .mp-h:is(.mp-hd-circle,.mp-hd-box,.mp-hd-bracket) .mp-w>.mp-s{translate:none!important}
/* rotating / morphing words */
.mp-rot{position:relative;display:inline-block;vertical-align:top;overflow:hidden;white-space:nowrap;transition:width .45s var(--mp-out,ease);padding-block:.08em .14em;margin-block:-.08em -.14em}
.mp-rot>mp-s{display:inline-block;color:var(--mp-acct);transition:translate .55s var(--mp-out,ease),opacity .45s,filter .45s}
.mp-rot>mp-s:not(.is-on){position:absolute;inset-inline-start:0;top:.08em;opacity:0;translate:0 105%;pointer-events:none}
.mp-rot>mp-s.is-out{opacity:0;translate:0 -105%}
.mp-rot-morph>mp-s:not(.is-on),.mp-rot-morph>mp-s.is-out{translate:none;filter:blur(10px)}
html.mp-reduce .mp-rot>mp-s:not(:first-child){display:none}
/* scroll-linked typography (the pack's scroll loop feeds --mp-q 0 → 1 and --mp-va) */
/* kinetic: the heading drifts through the free room of its own box as the page scrolls and leans with the scroll speed */
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-kinetic{translate:calc(var(--mp-q,.5)*var(--mp-kin,0px)) 0;transform:skewX(calc(var(--mp-hv,0)*-.12deg));transition:transform .35s cubic-bezier(.2,.7,.2,1);will-change:translate,transform}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-kinetic:is([dir=rtl] *){translate:calc(var(--mp-q,.5)*var(--mp-kin,0px)*-1) 0}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-kinetic.mp-h-c{translate:calc((var(--mp-q,.5) - .5)*2*var(--mp-kin,0px)) 0}
html.mp-on:not(.mp-reduce) .mp-h.mp-hd-compress{scale:1 calc(1 + var(--mp-hv,0)*.006);transform-origin:50% 100%;transition:scale .25s linear}

/* ==================================================================== 15. PICTURES — Motion Pro 4 */
/* covers made of cells */
.mp-wipe:is(.mp-wipe-blinds,.mp-wipe-shutters,.mp-wipe-tiles,.mp-wipe-checker,.mp-wipe-quarters,.mp-wipe-stairs,.mp-wipe-rows,.mp-wipe-spiral){background:none;display:grid;scale:1!important}
.mp-wipe-blinds{grid-template-rows:repeat(8,1fr)}.mp-wipe-blinds>mp-x{transform-origin:50% 50%;transition-delay:calc(var(--k,0)*45ms)}
.mp-wipe-shutters{grid-template-columns:repeat(8,1fr)}.mp-wipe-shutters>mp-x{transform-origin:50% 50%;transition-delay:calc(var(--k,0)*45ms)}
.mp-wipe-stairs{grid-template-columns:repeat(7,1fr)}.mp-wipe-stairs>mp-x{transform-origin:50% 100%;transition-delay:calc(var(--k,0)*85ms)}
.mp-wipe-rows{grid-template-rows:repeat(6,1fr)}.mp-wipe-rows>mp-x{transform-origin:0 50%;transition-delay:calc(var(--k,0)*80ms)}
.mp-wipe-rows>mp-x:is([dir=rtl] *){transform-origin:100% 50%}
.mp-wipe-tiles,.mp-wipe-checker,.mp-wipe-spiral{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr)}
.mp-wipe-tiles>mp-x{transition:scale .5s cubic-bezier(.7,0,.2,1),opacity .4s;transition-delay:calc(var(--k,0)*38ms)}
.mp-wipe-checker>mp-x{transition:opacity .5s;transition-delay:calc(var(--k,0)*360ms)}
.mp-wipe-spiral>mp-x{transition:scale .45s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--k,0)*36ms)}
.mp-wipe-quarters{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.mp-wipe-quarters>mp-x{transition:translate calc(1s*var(--mp-t,1)) cubic-bezier(.7,0,.2,1);transition-delay:0ms}
html.mp-on:not(.mp-reduce) .mp-m.mp-in>.mp-wipe-blinds>mp-x{scale:1 0}
html.mp-on:not(.mp-reduce) .mp-m.mp-in>.mp-wipe-shutters>mp-x{scale:0 1}
html.mp-on:not(.mp-reduce) .mp-m.mp-in>.mp-wipe-stairs>mp-x{scale:1 0}
html.mp-on:not(.mp-reduce) .mp-m.mp-in>.mp-wipe-rows>mp-x{scale:0 1}
html.mp-on:not(.mp-reduce) .mp-m.mp-in>.mp-wipe-tiles>mp-x{scale:0;opacity:0}
html.mp-on:not(.mp-reduce) .mp-m.mp-in>.mp-wipe-checker>mp-x{opacity:0}
html.mp-on:not(.mp-reduce) .mp-m.mp-in>.mp-wipe-spiral>mp-x{scale:0}
html.mp-on:not(.mp-reduce) .mp-m.mp-in>.mp-wipe-quarters>mp-x:nth-child(1){translate:-101% -101%}
html.mp-on:not(.mp-reduce) .mp-m.mp-in>.mp-wipe-quarters>mp-x:nth-child(2){translate:101% -101%}
html.mp-on:not(.mp-reduce) .mp-m.mp-in>.mp-wipe-quarters>mp-x:nth-child(3){translate:-101% 101%}
html.mp-on:not(.mp-reduce) .mp-m.mp-in>.mp-wipe-quarters>mp-x:nth-child(4){translate:101% 101%}
/* directional curtains */
.mp-wipe-up{transform-origin:50% 100%}.mp-wipe-start{transform-origin:100% 50%}.mp-wipe-end{transform-origin:0 50%}
.mp-wipe-start:is([dir=rtl] *){transform-origin:0 50%}.mp-wipe-end:is([dir=rtl] *){transform-origin:100% 50%}
html.mp-on:not(.mp-reduce) .mp-m.mp-in>:is(.mp-wipe-start,.mp-wipe-end){scale:0 1}
/* a frosted cover clears; a white flash */
.mp-wipe-glass{background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:opacity calc(1.1s*var(--mp-t,1)) ease var(--mp-d,0ms)}
html.mp-on:not(.mp-reduce) .mp-m.mp-in>.mp-wipe-glass{scale:1;opacity:0}
.mp-wipe-flash{background:#fff;transition:opacity calc(.9s*var(--mp-t,1)) ease-out var(--mp-d,0ms)}
html.mp-on:not(.mp-reduce) .mp-m.mp-in>.mp-wipe-flash{scale:1;opacity:0}
/* an inner frame draws itself over the picture */
.mp-frame{position:absolute;inset:12px;z-index:3;pointer-events:none;border-radius:inherit;background:linear-gradient(#fff,#fff) 0 0/0 1.5px no-repeat,linear-gradient(#fff,#fff) 100% 0/1.5px 0 no-repeat,linear-gradient(#fff,#fff) 100% 100%/0 1.5px no-repeat,linear-gradient(#fff,#fff) 0 100%/1.5px 0 no-repeat;opacity:.9;transition:background-size .5s linear .5s,background-size .5s linear}
.mp-m.mp-in>.mp-frame,html.mp-reduce .mp-frame{background-size:100% 1.5px,1.5px 100%,100% 1.5px,1.5px 100%}
/* shapes cut out of the picture itself */
html.mp-on:not(.mp-reduce) :is(.mp-m-iris,.mp-m-diamond,.mp-m-hex,.mp-m-up,.mp-m-down,.mp-m-skew,.mp-m-oval,.mp-m-corner):not(.mp-done) img{transition:clip-path calc(1.25s*var(--mp-t,1)) cubic-bezier(.7,0,.2,1),scale calc(1.5s*var(--mp-t)) var(--mp-out)}
html.mp-on:not(.mp-reduce) .mp-m-iris:not(.mp-in) img{clip-path:inset(50% 50% 50% 50%)}
html.mp-on:not(.mp-reduce) .mp-m-up:not(.mp-in) img{clip-path:inset(100% 0 0 0)}
html.mp-on:not(.mp-reduce) .mp-m-down:not(.mp-in) img{clip-path:inset(0 0 100% 0)}
html.mp-on:not(.mp-reduce) :is(.mp-m-iris,.mp-m-up,.mp-m-down).mp-in:not(.mp-done) img{clip-path:inset(0 0 0 0)}
html.mp-on:not(.mp-reduce) .mp-m-diamond:not(.mp-in) img{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}
html.mp-on:not(.mp-reduce) .mp-m-diamond.mp-in:not(.mp-done) img{clip-path:polygon(50% -50%,150% 50%,50% 150%,-50% 50%)}
html.mp-on:not(.mp-reduce) .mp-m-hex:not(.mp-in) img{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%)}
html.mp-on:not(.mp-reduce) .mp-m-hex.mp-in:not(.mp-done) img{clip-path:polygon(50% -40%,140% 5%,140% 95%,50% 140%,-40% 95%,-40% 5%)}
html.mp-on:not(.mp-reduce) .mp-m-skew:not(.mp-in) img{clip-path:polygon(0 0,0 0,-30% 100%,-30% 100%)}
html.mp-on:not(.mp-reduce) .mp-m-skew.mp-in:not(.mp-done) img{clip-path:polygon(0 0,130% 0,100% 100%,-30% 100%)}
html.mp-on:not(.mp-reduce) .mp-m-oval:not(.mp-in) img{clip-path:ellipse(0% 60% at 50% 50%)}
html.mp-on:not(.mp-reduce) .mp-m-oval.mp-in:not(.mp-done) img{clip-path:ellipse(80% 80% at 50% 50%)}
html.mp-on:not(.mp-reduce) .mp-m-corner:not(.mp-in) img{clip-path:circle(0% at 0 100%)}
html.mp-on:not(.mp-reduce) .mp-m-corner.mp-in:not(.mp-done) img{clip-path:circle(150% at 0 100%)}
/* a clock hand sweeps the picture in */
@property --mpx-a{syntax:'<angle>';inherits:false;initial-value:0deg}
html.mp-on:not(.mp-reduce) .mp-m-clock:not(.mp-done) img{-webkit-mask-image:conic-gradient(#000 var(--mpx-a),transparent var(--mpx-a));mask-image:conic-gradient(#000 var(--mpx-a),transparent var(--mpx-a));transition:--mpx-a calc(1.2s*var(--mp-t,1)) cubic-bezier(.6,0,.2,1),scale calc(1.5s*var(--mp-t)) var(--mp-out)}
html.mp-on:not(.mp-reduce) .mp-m-clock.mp-in:not(.mp-done) img{--mpx-a:360deg}
/* tone and focus */
html.mp-on:not(.mp-reduce) :is(.mp-m-blurin,.mp-m-sepia,.mp-m-duotone,.mp-m-bright):not(.mp-done) img{transition:filter calc(1.3s*var(--mp-t,1)) ease .1s,scale calc(1.5s*var(--mp-t)) var(--mp-out),opacity .6s}
html.mp-on:not(.mp-reduce) .mp-m-blurin:not(.mp-in) img{filter:blur(18px);opacity:.4}
html.mp-on:not(.mp-reduce) .mp-m-sepia:not(.mp-in) img{filter:sepia(1) contrast(.9)}
html.mp-on:not(.mp-reduce) .mp-m-duotone:not(.mp-in) img{filter:grayscale(1) sepia(1) hue-rotate(180deg) saturate(1.6)}
html.mp-on:not(.mp-reduce) .mp-m-bright:not(.mp-in) img{filter:brightness(2.6) saturate(0)}
/* scale, turn, depth */
html.mp-on:not(.mp-reduce) .mp-m-zoomout:not(.mp-in)>img,html.mp-on:not(.mp-reduce) .mp-m-zoomout:not(.mp-in)>a>img,html.mp-on:not(.mp-reduce) .mp-m-zoomout:not(.mp-in)>picture>img{scale:.8}
html.mp-on:not(.mp-reduce) .mp-m-turn:not(.mp-in)>img,html.mp-on:not(.mp-reduce) .mp-m-turn:not(.mp-in)>a>img,html.mp-on:not(.mp-reduce) .mp-m-turn:not(.mp-in)>picture>img{scale:1.35;rotate:-7deg}
html.mp-on:not(.mp-reduce) .mp-m-turn:not(.mp-done) img{transition:scale calc(1.5s*var(--mp-t)) var(--mp-out),rotate calc(1.5s*var(--mp-t)) var(--mp-out)}
html.mp-on:not(.mp-reduce) :is(.mp-m-depth,.mp-m-tv):not(.mp-done){transition:scale calc(1.2s*var(--mp-t)) var(--mp-out),opacity .6s var(--mp-ease)}
html.mp-on:not(.mp-reduce) .mp-m-depth:not(.mp-in){scale:.88;opacity:0}
html.mp-on:not(.mp-reduce) .mp-m-depth:not(.mp-in)>img,html.mp-on:not(.mp-reduce) .mp-m-depth:not(.mp-in)>a>img,html.mp-on:not(.mp-reduce) .mp-m-depth:not(.mp-in)>picture>img{scale:1.45}
html.mp-on:not(.mp-reduce) .mp-m-tv:not(.mp-in){scale:1 .012;opacity:.6}

/* ==================================================================== 16. HOVER — Motion Pro 4
   Applied by the engine as "mp-hx mp-hx-<name>" on a card or picture frame. Mouse only. */
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx:not(.mp-i:not(.mp-done)){transition:var(--mp-own,all 0s),translate .35s var(--mp-out),scale .35s var(--mp-out),rotate .35s var(--mp-out),box-shadow .35s ease,filter .35s ease}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-pop:hover{scale:1.035}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-press:hover{translate:0 -3px}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-press:active{translate:0 1px;scale:.985}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-shadow:hover{translate:0 -4px;box-shadow:0 34px 60px -30px rgba(0,0,0,.5)}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-neon:hover{box-shadow:0 0 0 1.5px var(--mp-acc),0 0 30px -4px var(--mp-acc)}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-lean:hover{rotate:-1.6deg;scale:1.02}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-lean:nth-child(even):hover{rotate:1.6deg}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-wiggle:hover{animation:mpxWiggle .55s ease}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-swing:hover{animation:mpxSwingH .7s ease;transform-origin:50% 0}
@keyframes mpxWiggle{0%,100%{rotate:0deg}20%{rotate:-2.4deg}40%{rotate:2deg}60%{rotate:-1.4deg}80%{rotate:.8deg}}
@keyframes mpxSwingH{0%,100%{rotate:0deg}25%{rotate:3deg}50%{rotate:-2.2deg}75%{rotate:1.2deg}}
/* picture tone and size */
html.mp-on.mp-fine:not(.mp-reduce) :is(.mp-hx-mono,.mp-hx-colour,.mp-hx-out,.mp-hx-skew,.mp-hx-bright) img{transition:filter .5s ease,scale .7s var(--mp-out),transform .6s var(--mp-out)}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-mono:hover img{filter:grayscale(1) contrast(1.05)}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-colour img{filter:grayscale(1)}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-colour:hover img{filter:none}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-bright:hover img{filter:brightness(1.12) saturate(1.15)}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-out{overflow:hidden}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-out img{scale:1.14}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-out:hover img{scale:1}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-skew{overflow:hidden}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-skew:hover img{transform:skewX(-4deg) scale(1.12)}
/* neighbours step back */
html.mp-on.mp-fine:not(.mp-reduce) .mp-dimg>*{transition:var(--mp-own,all 0s),opacity .35s ease,filter .35s ease}
html.mp-on.mp-fine:not(.mp-reduce) .mp-dimg:hover>:not(:hover):not(mp-x){opacity:.45}
html.mp-on.mp-fine:not(.mp-reduce) .mp-dimg.mp-dimg-blur:hover>:not(:hover):not(mp-x){opacity:.6;filter:blur(2px)}
/* light: a sheen, a moving border light, a prism edge, metal and glass reflections */
.mp-sheen{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;overflow:hidden}
.mp-sheen::before{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg)}
:hover>.mp-sheen::before{animation:mpShine .85s ease}
.mp-sheen.is-loop::before{animation:mpShine 3.6s ease 1.2s infinite}
.mp-chase{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--mpx-a),transparent 0 62%,var(--mp-acc) 82%,#fff 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .3s}
:hover>.mp-chase,.mp-chase.is-loop{opacity:1;animation:mpxTurn 2.4s linear infinite}
.mp-chase.mp-prism{background:conic-gradient(from var(--mpx-a),#ff5fa2,#ffd75f,#5fffb0,#5fc8ff,#b05fff,#ff5fa2);padding:2px}
:hover>.mp-chase.mp-prism{animation-duration:4s}
@keyframes mpxTurn{to{--mpx-a:360deg}}
.mp-metal{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;opacity:0;background:linear-gradient(115deg,transparent calc(var(--mx,50%) - 26%),rgba(255,255,255,.5) var(--mx,50%),transparent calc(var(--mx,50%) + 26%));mix-blend-mode:soft-light;transition:opacity .35s}
.mp-metal.mp-glassy{background:linear-gradient(115deg,transparent calc(var(--mx,50%) - 14%),rgba(255,255,255,.28) calc(var(--mx,50%) - 6%),rgba(255,255,255,.06) var(--mx,50%),rgba(255,255,255,.22) calc(var(--mx,50%) + 5%),transparent calc(var(--mx,50%) + 16%));mix-blend-mode:screen}
:hover>.mp-metal{opacity:1}
/* layers inside a card move at different depths (--nx / --ny run −.5 … .5) */
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-depth :is(img,picture){transition:translate .5s var(--mp-out)}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-depth:hover :is(img,picture){translate:calc(var(--nx,0)*-12px) calc(var(--ny,0)*-12px)}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-depth :is(h2,h3,h4,.rm-title,.rwc-card-title){transition:translate .5s var(--mp-out)}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-depth:hover :is(h2,h3,h4,.rm-title,.rwc-card-title){translate:calc(var(--nx,0)*8px) calc(var(--ny,0)*8px)}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-depth :is(.rm-btn,.rwc-btn,.rm-badge,.rwc-badge,.rm-ico-wrap){transition:translate .5s var(--mp-out)}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-depth:hover :is(.rm-btn,.rwc-btn,.rm-badge,.rwc-badge,.rm-ico-wrap){translate:calc(var(--nx,0)*16px) calc(var(--ny,0)*16px)}
/* a folded corner */
.mp-peelc{position:absolute;top:0;inset-inline-end:0;z-index:5;width:0;height:0;pointer-events:none;background:linear-gradient(225deg,transparent 50%,rgba(0,0,0,.16) 50%,rgba(255,255,255,.9) 56%,rgba(235,235,235,.95) 100%);box-shadow:-6px 6px 12px -6px rgba(0,0,0,.35);transition:width .4s var(--mp-out,ease),height .4s var(--mp-out,ease)}
.mp-peelc:is([dir=rtl] *){background:linear-gradient(135deg,transparent 50%,rgba(0,0,0,.16) 50%,rgba(255,255,255,.9) 56%,rgba(235,235,235,.95) 100%)}
:hover>.mp-peelc{width:46px;height:46px}
/* the title underlines itself */
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-underline :is(h2,h3,h4,.rm-title,.rwc-card-title)>a,html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-underline :is(h2,h3,h4,.rm-title):not(:has(a)){background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px;transition:background-size .45s var(--mp-out)}
html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-underline:hover :is(h2,h3,h4,.rm-title,.rwc-card-title)>a,html.mp-on.mp-fine:not(.mp-reduce) .mp-hx-underline:hover :is(h2,h3,h4,.rm-title):not(:has(a)){background-size:100% 1.5px}

/* ==================================================================== 17. BUTTONS — Motion Pro 4 */
html.mp-on.mp-fine:not(.mp-reduce) .mp-b:is(.mp-b-lift,.mp-b-press,.mp-b-glow,.mp-b-tilt){transition:var(--mp-own,all 0s),translate .3s var(--mp-out),scale .3s var(--mp-out),rotate .3s var(--mp-out),box-shadow .3s ease}
html.mp-on.mp-fine:not(.mp-reduce) .mp-b-lift:hover{translate:0 -3px;box-shadow:0 16px 28px -14px rgba(0,0,0,.45)}
html.mp-on:not(.mp-reduce) .mp-b-press:hover{translate:0 -2px}
html.mp-on:not(.mp-reduce) .mp-b-press:active{translate:0 2px;scale:.97}
html.mp-on.mp-fine:not(.mp-reduce) .mp-b-glow:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--mp-acc) 26%,transparent),0 0 26px -2px color-mix(in srgb,var(--mp-acc) 70%,transparent)}
html.mp-on.mp-fine:not(.mp-reduce) .mp-b-tilt:hover{rotate:-2deg;scale:1.03}
html.mp-on.mp-fine:not(.mp-reduce) .mp-b-wobble:hover{animation:mpxWobble .6s ease}
html.mp-on.mp-fine:not(.mp-reduce) .mp-b-bounce:hover{animation:mpxBtnBounce .6s ease}
html.mp-on.mp-fine:not(.mp-reduce) .mp-b-jelly:hover{animation:mpxBtnJelly .6s ease}
@keyframes mpxWobble{0%,100%{translate:0 0;rotate:0deg}20%{translate:-5px 0;rotate:-3deg}40%{translate:4px 0;rotate:2deg}60%{translate:-3px 0;rotate:-1.5deg}80%{translate:2px 0;rotate:1deg}}
@keyframes mpxBtnBounce{0%,100%{translate:0 0}30%{translate:0 -7px}55%{translate:0 0}75%{translate:0 -3px}}
@keyframes mpxBtnJelly{0%,100%{scale:1}25%{scale:1.1 .9}50%{scale:.94 1.06}75%{scale:1.03 .97}}
/* rings pulse out of the button (also when it comes into view) */
html.mp-on:not(.mp-reduce) .mp-b-pulse{animation:mpxPulseRing 2.4s ease-out infinite}
html.mp-on:not(.mp-reduce) .mp-b-ringout:hover{animation:mpCta .7s ease 1}
@keyframes mpxPulseRing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mp-acc) 50%,transparent)}70%,100%{box-shadow:0 0 0 16px transparent}}
/* a wash slides across; a circle grows from the middle */
.mp-slidec{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background:rgba(255,255,255,.2);transform-origin:0 50%;scale:0 1;transition:scale .45s var(--mp-out,ease)}
.mp-slidec:is([dir=rtl] *){transform-origin:100% 50%}
.mp-b-slide:hover>.mp-slidec{scale:1 1}
.mp-b-circle>.mp-fillc{left:50%;top:50%}
.mp-b-circle:hover>.mp-fillc{scale:70}
/* the label slides out and the same label slides in */
.mp-swap{position:relative;display:inline-block;overflow:hidden;vertical-align:bottom}
.mp-swap>mp-x{display:block;transition:translate .42s var(--mp-out,ease)}
.mp-swap::after{content:attr(data-mp-t);position:absolute;inset-inline-start:0;top:0;white-space:nowrap;translate:0 115%;transition:translate .42s var(--mp-out,ease)}
html.mp-on.mp-fine:not(.mp-reduce) .mp-b-swap:hover .mp-swap>mp-x{translate:0 -115%}
html.mp-on.mp-fine:not(.mp-reduce) .mp-b-swap:hover .mp-swap::after{translate:0 0}
/* the icon turns; the border draws; a light runs around the edge */
html.mp-on.mp-fine:not(.mp-reduce) .mp-b-icon :is(svg,.rm-ico){transition:rotate .6s var(--mp-out),scale .3s}
html.mp-on.mp-fine:not(.mp-reduce) .mp-b-icon:hover :is(svg,.rm-ico){rotate:360deg;scale:1.1}
.mp-b-border>.mp-edge{inset:-3px}
.mp-b-chase>.mp-chase{inset:-2px}
.mp-b-sheen>.mp-sheen.is-loop::before{animation-duration:4.2s}

/* ==================================================================== 18. SCROLL — Motion Pro 4
   --mp-p runs 0 → 1 while the element arrives (as in section 4);
   --mp-q runs 0 → 1 over the element's whole pass through the window ("mp-scq"). */
html.mp-on:not(.mp-reduce) .mp-sc.mp-sc-on.mp-sc-rotate>:not(.mp-bgx,.mp-fgx){rotate:calc((1 - var(--mp-p))*-8deg);scale:calc(.9 + var(--mp-p)*.1);opacity:calc(.3 + var(--mp-p)*.7)}
html.mp-on:not(.mp-reduce) .mp-sc.mp-sc-on.mp-sc-blur>:not(.mp-bgx,.mp-fgx){filter:blur(calc((1 - var(--mp-p))*10px));opacity:calc(.4 + var(--mp-p)*.6)}
html.mp-on:not(.mp-reduce) .mp-sc.mp-sc-on.mp-sc-unzoom>:not(.mp-bgx,.mp-fgx){scale:calc(1.22 - var(--mp-p)*.22);opacity:calc(.3 + var(--mp-p)*.7)}
html.mp-on:not(.mp-reduce) .mp-sc.mp-sc-persp{perspective:1200px}
html.mp-on:not(.mp-reduce) .mp-sc.mp-sc-on.mp-sc-persp>:not(.mp-bgx,.mp-fgx){rotate:x calc((1 - var(--mp-p))*26deg);transform-origin:50% 100%;opacity:calc(.3 + var(--mp-p)*.7)}
html.mp-on:not(.mp-reduce) .mp-sc.mp-sc-on.mp-sc-swing>:not(.mp-bgx,.mp-fgx){rotate:y calc((1 - var(--mp-p))*-28deg);transform-origin:0 50%;opacity:calc(.3 + var(--mp-p)*.7)}
html.mp-on:not(.mp-reduce) .mp-sc.mp-sc-swing{perspective:1200px}
html.mp-on:not(.mp-reduce) .mp-sc.mp-sc-on.mp-sc-end>:not(.mp-bgx,.mp-fgx){translate:calc((1 - var(--mp-p))*90px) 0;opacity:calc(.25 + var(--mp-p)*.75)}
html.mp-on:not(.mp-reduce) .mp-sc.mp-sc-on.mp-sc-end:is([dir=rtl] *)>:not(.mp-bgx,.mp-fgx){translate:calc((1 - var(--mp-p))*-90px) 0}
/* a rounded card grows into the full width; a circle opens */
html.mp-on:not(.mp-reduce) .mp-sc.mp-sc-on.mp-sc-radius{clip-path:inset(0 calc((1 - var(--mp-p))*9%) round calc((1 - var(--mp-p))*44px))}
html.mp-on:not(.mp-reduce) .mp-sc.mp-sc-on.mp-sc-circle{clip-path:circle(calc(22% + var(--mp-p)*80%) at 50% 50%)}
html.mp-on:not(.mp-reduce) .mp-sc.mp-sc-on.mp-sc-curtain{clip-path:inset(0 0 calc((1 - var(--mp-p))*60%) 0)}
/* over the whole pass */
html.mp-on:not(.mp-reduce) .mp-scq.mp-sc-drift>:not(.mp-bgx,.mp-fgx){translate:calc((.5 - var(--mp-q,.5))*130px) 0;will-change:translate}
html.mp-on:not(.mp-reduce) .mp-scq.mp-sc-driftend>:not(.mp-bgx,.mp-fgx){translate:calc((var(--mp-q,.5) - .5)*130px) 0;will-change:translate}
html.mp-on:not(.mp-reduce) .mp-scq.mp-sc-float>:not(.mp-bgx,.mp-fgx){translate:0 calc((.5 - var(--mp-q,.5))*70px);will-change:translate}
html.mp-on:not(.mp-reduce) .mp-scq.mp-sc-spin :is(.rm-ico-wrap,.rm-ico,.rmd-tb-ico,svg.rm-ico){rotate:calc(var(--mp-q,0)*360deg)}
html.mp-on:not(.mp-reduce) .mp-scq.mp-sc-fadeout>:not(.mp-bgx,.mp-fgx){opacity:calc(2.4 - var(--mp-q,0)*2.4)}
html.mp-on:not(.mp-reduce) .mp-scq.mp-sc-through>:not(.mp-bgx,.mp-fgx){scale:calc(1 + max(0,var(--mp-q,0) - .55)*1.1);opacity:calc(3 - var(--mp-q,0)*3.2)}
html.mp-on:not(.mp-reduce) .mp-scq.mp-sc-focus>:not(.mp-bgx,.mp-fgx){filter:blur(calc(max(0,max(.35 - var(--mp-q,.5),var(--mp-q,.5) - .65))*22px));opacity:calc(1 - max(0,max(.3 - var(--mp-q,.5),var(--mp-q,.5) - .7))*1.6)}
/* reacts to how fast the page is scrolled (--mp-hv, signed; --mp-ha, absolute) */
html.mp-on:not(.mp-reduce) .mp-sc-vskew{transform:skewY(calc(var(--mp-hv,0)*.05deg));transition:transform .2s linear}
html.mp-on:not(.mp-reduce) .mp-sc-vstretch img{transform:scaleY(calc(1 + var(--mp-ha,0)*.003));transition:transform .2s linear}
/* sections stack on top of each other (desktop) */
@media (min-width:1025px){
html.mp-on:not(.mp-reduce) .mp-sc-stack{position:sticky!important;top:calc(84px + var(--mp-sti,0)*14px);z-index:calc(1 + var(--mp-sti,0))}
html.mp-on:not(.mp-reduce) .mp-sc-stack.is-under{scale:.96;filter:brightness(.9);transform-origin:50% 0;transition:scale .5s var(--mp-out),filter .5s}
}

/* ==================================================================== 19. ANIMATED BACKGROUNDS — Motion Pro 4
   One wrapper ".mp-fxbg mp-fxbg-<kind>" with a few cells; it sits above the element's background and
   below its content (mp-bgx) and only runs while it is on screen (".is-live"). */
.mp-fxbg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit;container-type:size}
.mp-fxbg:not(.is-live),.mp-fxbg:not(.is-live) *{animation-play-state:paused!important}
.mp-fxbg>mp-x{position:absolute;display:block}
/* The soft colour fields are painted with colours the surface can carry: a tint of the accent that is hardly darker than a
   light surface, a deep tone that is hardly lighter than a dark one (class mp-fx-dk). The engine measures the surface and hands
   its lightness over as --mp-sfl, so the field differs from the surface in colour far more than in lightness — and the text on
   top keeps its contrast whatever the accent colour is, a white or a neon accent included. */
.mp-fxbg,.mp-aurora.mp-bgx{--mp-fxc:color-mix(in srgb,var(--mp-acc) 11%,#fff);--mp-fxc2:color-mix(in srgb,var(--mp-acc2,#4f8cff) 11%,#fff);--mp-fxc3:color-mix(in srgb,var(--mp-acc) 7%,#fff);--mp-fxc4:color-mix(in srgb,var(--mp-acc2,#4f8cff) 8%,#fff)}
.mp-fxbg.mp-fx-dk,.mp-aurora.mp-bgx.mp-fx-dk{--mp-fxc:color-mix(in srgb,var(--mp-acc) 22%,#000);--mp-fxc2:color-mix(in srgb,var(--mp-acc2,#4f8cff) 22%,#000);--mp-fxc3:color-mix(in srgb,var(--mp-acc) 16%,#000);--mp-fxc4:color-mix(in srgb,var(--mp-acc2,#4f8cff) 15%,#000)}
@supports (color:oklch(from red l c h)){
.mp-fxbg,.mp-aurora.mp-bgx{--mp-fxc:oklch(from var(--mp-acc) max(l,calc(var(--mp-sfl,.96) - .035)) min(c,.075) h);--mp-fxc2:oklch(from var(--mp-acc2,#4f8cff) max(l,calc(var(--mp-sfl,.96) - .035)) min(c,.075) h);--mp-fxc3:oklch(from var(--mp-acc) max(l,calc(var(--mp-sfl,.96) - .025)) min(c,.055) calc(h + 38));--mp-fxc4:oklch(from var(--mp-acc2,#4f8cff) max(l,calc(var(--mp-sfl,.96) - .025)) min(c,.055) calc(h - 32))}
.mp-fxbg.mp-fx-dk,.mp-aurora.mp-bgx.mp-fx-dk{--mp-fxc:oklch(from var(--mp-acc) min(l,calc(var(--mp-sfl,.24) + .07)) c h);--mp-fxc2:oklch(from var(--mp-acc2,#4f8cff) min(l,calc(var(--mp-sfl,.24) + .07)) c h);--mp-fxc3:oklch(from var(--mp-acc) min(l,calc(var(--mp-sfl,.24) + .05)) c calc(h + 38));--mp-fxc4:oklch(from var(--mp-acc2,#4f8cff) min(l,calc(var(--mp-sfl,.24) + .05)) c calc(h - 32))}
}
/* On a picture (a hero, a band with a photo) light text sits on the photo: the fields are light and see-through there, so the picture
   stays the background and nothing reads as a stain on it. */
.mp-fxbg.mp-fx-pic{--mp-fxc:rgba(255,255,255,.3);--mp-fxc2:rgba(255,241,214,.28);--mp-fxc3:rgba(255,255,255,.2);--mp-fxc4:rgba(255,236,204,.2)}
.mp-aurora.mp-bgx>mp-x{background:var(--mp-fxc);opacity:.55}
.mp-aurora.mp-bgx>mp-x:nth-child(2){background:var(--mp-fxc2)}
.mp-aurora.mp-bgx>mp-x:nth-child(3){background:var(--mp-fxc);opacity:.35}
/* gradient drift */
.mp-fxbg-gradient{background:linear-gradient(120deg,color-mix(in srgb,var(--mp-fxc) 80%,transparent),transparent 30%,color-mix(in srgb,var(--mp-fxc2) 75%,transparent) 55%,transparent 75%,color-mix(in srgb,var(--mp-fxc) 65%,transparent)) 0 0/300% 300%;animation:mpxBgMove 16s ease-in-out infinite alternate}
@keyframes mpxBgMove{to{background-position:100% 100%}}
/* mesh: four soft colour fields change places */
.mp-fxbg-mesh>mp-x{width:60%;aspect-ratio:1;border-radius:50%;filter:blur(64px);opacity:.7;background:var(--mp-fxc);animation:mpxMesh 20s ease-in-out infinite alternate}
.mp-fxbg-mesh>mp-x:nth-child(1){left:-18%;top:-34%}
.mp-fxbg-mesh>mp-x:nth-child(2){right:-20%;top:-10%;background:var(--mp-fxc2);animation-duration:26s;animation-delay:-7s}
.mp-fxbg-mesh>mp-x:nth-child(3){left:10%;bottom:-60%;background:var(--mp-fxc3);animation-duration:23s;animation-delay:-12s}
.mp-fxbg-mesh>mp-x:nth-child(4){right:6%;bottom:-70%;background:var(--mp-fxc4);opacity:.5;animation-duration:30s;animation-delay:-4s}
@keyframes mpxMesh{0%{translate:0 0;scale:1}50%{translate:14% 10%;scale:1.15}100%{translate:-10% 18%;scale:.92}}
/* blobs that change shape */
.mp-fxbg-blobs>mp-x{width:38%;aspect-ratio:1;background:color-mix(in srgb,var(--mp-fxc) 55%,transparent);border-radius:42% 58% 63% 37%/45% 40% 60% 55%;animation:mpxBlob 18s ease-in-out infinite}
.mp-fxbg-blobs>mp-x:nth-child(1){left:-8%;top:-18%}
.mp-fxbg-blobs>mp-x:nth-child(2){right:-10%;bottom:-26%;width:46%;animation-duration:24s;animation-delay:-8s;background:color-mix(in srgb,var(--mp-fxc2) 48%,transparent)}
.mp-fxbg-blobs>mp-x:nth-child(3){left:calc(var(--mxp,48%) - 10%);top:calc(var(--myp,50%) - 20%);width:20%;animation-duration:15s;animation-delay:-3s;opacity:.7;transition:left 1.4s cubic-bezier(.2,.7,.2,1),top 1.4s cubic-bezier(.2,.7,.2,1)}
@keyframes mpxBlob{0%,100%{border-radius:42% 58% 63% 37%/45% 40% 60% 55%;translate:0 0;rotate:0deg}33%{border-radius:60% 40% 38% 62%/58% 62% 38% 42%;translate:6% 8%;rotate:40deg}66%{border-radius:35% 65% 55% 45%/40% 52% 48% 60%;translate:-5% 4%;rotate:-25deg}}
/* light rays */
/* the rays swing inside the layer, which clips them: they never reach over the section above or below */
.mp-fxbg-rays::before{content:"";position:absolute;inset:-10% -30%;background:repeating-conic-gradient(from 0deg at 50% -20%,color-mix(in srgb,currentColor 9%,transparent) 0deg 4deg,transparent 4deg 13deg);-webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%);animation:mpxRays 22s ease-in-out infinite alternate;transform-origin:50% 0}
.mp-fxbg-rays:not(.mp-fx-dk)::before{opacity:.45}
.mp-fxbg:not(.is-live)::before{animation-play-state:paused!important}
@keyframes mpxRays{from{rotate:-7deg}to{rotate:7deg}}
/* a grid floor moving toward the viewer */
.mp-fxbg-grid>mp-x{left:-50%;right:-50%;bottom:-10%;height:75%;background-image:linear-gradient(color-mix(in srgb,currentColor 22%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,currentColor 22%,transparent) 1px,transparent 1px);background-size:56px 56px;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(transparent,#000 55%);mask-image:linear-gradient(transparent,#000 55%);animation:mpxGrid 2.6s linear infinite;opacity:.6;translate:calc(var(--mxr,0)*-46px) 0;transition:translate .7s cubic-bezier(.2,.7,.2,1)}
@keyframes mpxGrid{to{background-position:0 56px,0 0}}
/* waves along the bottom edge */
.mp-fxbg-waves>mp-x{left:0;bottom:-1px;width:200%;height:min(26%,150px);background:currentColor;opacity:.08;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 C150 110 300 10 450 60 S750 110 900 60 1050 10 1200 60 V120 H0z'/%3E%3C/svg%3E") 0 0/50% 100% repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 C150 110 300 10 450 60 S750 110 900 60 1050 10 1200 60 V120 H0z'/%3E%3C/svg%3E") 0 0/50% 100% repeat-x;animation:mpxWaves 14s linear infinite}
.mp-fxbg-waves>mp-x:nth-child(2){opacity:.06;height:min(34%,190px);animation-duration:22s;animation-direction:reverse}
.mp-fxbg-waves>mp-x:nth-child(3){opacity:.05;height:min(20%,110px);animation-duration:9s}
@keyframes mpxWaves{to{translate:-50% 0}}
/* things that fall or drift: snow, rain, petals, meteors, fireflies, bokeh, clouds */
.mp-fxbg-snow>mp-x,.mp-fxbg-petals>mp-x{left:var(--x);top:-6%;width:var(--s,6px);height:var(--s,6px);border-radius:50%;background:color-mix(in srgb,currentColor 24%,#fff);opacity:.75;animation:mpxFall var(--t,11s) linear var(--dl,0s) infinite}
.mp-fxbg-petals>mp-x{width:calc(var(--s,6px)*2);height:calc(var(--s,6px)*1.3);border-radius:80% 0 80% 0;background:color-mix(in srgb,var(--mp-acc) 60%,#fff);opacity:.55;animation-name:mpxPetal}
@keyframes mpxFall{0%{translate:0 0}50%{translate:24px 420px;translate:calc(var(--sw,24px)) 55cqh}100%{translate:-10px 860px;translate:calc(var(--sw,24px)*-.4) 112cqh}}
@keyframes mpxPetal{0%{translate:0 0;rotate:0deg}50%{translate:38px 420px;translate:calc(var(--sw,24px)*1.6) 55cqh;rotate:160deg}100%{translate:-24px 860px;translate:calc(var(--sw,24px)*-1) 112cqh;rotate:340deg}}
.mp-fxbg-rain>mp-x{left:var(--x);top:-12%;width:1px;height:calc(var(--s,6px)*7);background:linear-gradient(transparent,currentColor);opacity:.22;animation:mpxRain calc(var(--t,11s)*.11) linear var(--dl,0s) infinite}
@keyframes mpxRain{to{translate:-30px 900px;translate:-30px 125cqh}}
.mp-fxbg-meteors>mp-x{left:var(--x);top:calc(var(--y)*.4);width:calc(var(--s,6px)*16);height:1.5px;border-radius:2px;background:linear-gradient(90deg,transparent,currentColor);opacity:0;rotate:-32deg;animation:mpxMeteor calc(var(--t,11s)*.7) ease-in var(--dl,0s) infinite}
@keyframes mpxMeteor{0%{opacity:0;translate:60px -40px}6%{opacity:.9}16%{opacity:0;translate:-340px 210px}100%{opacity:0;translate:-340px 210px}}
.mp-fxbg-fireflies>mp-x{left:var(--x);top:var(--y);width:var(--s,6px);height:var(--s,6px);border-radius:50%;background:#ffe9a8;box-shadow:0 0 10px 2px rgba(255,220,120,.7);animation:mpxFly var(--t,11s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes mpxFly{0%{translate:0 0;opacity:.1}25%{opacity:.9}50%{translate:calc(var(--sw,24px)*2) calc(var(--sw,24px)*-1.6);opacity:.3}75%{opacity:1}100%{translate:calc(var(--sw,24px)*-1.4) calc(var(--sw,24px)*1.2);opacity:.2}}
.mp-fxbg-bokeh>mp-x{left:var(--x);top:var(--y);width:calc(var(--s,6px)*16);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--mp-fxc) 90%,transparent),transparent 68%);animation:mpxBokeh var(--t,11s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes mpxBokeh{from{scale:.7;opacity:.25}to{scale:1.25;opacity:.75;translate:calc(var(--sw,24px)) calc(var(--sw,24px)*-.6)}}
.mp-fxbg-clouds>mp-x{left:-30%;top:var(--y);width:calc(var(--s,6px)*46);height:calc(var(--s,6px)*14);border-radius:50%;background:color-mix(in srgb,currentColor 16%,#fff);opacity:.16;filter:blur(18px);animation:mpxCloud calc(var(--t,11s)*5) linear var(--dl,0s) infinite}
@keyframes mpxCloud{to{translate:1900px 0;translate:150cqw 0}}
/* geometry: outlines that float and turn; dots on orbits */
.mp-fxbg-shapes>mp-x{left:var(--x);top:var(--y);width:calc(var(--s,6px)*6);aspect-ratio:1;border:1.5px solid currentColor;opacity:.2;animation:mpxShape var(--t,11s) ease-in-out var(--dl,0s) infinite alternate}
.mp-fxbg-shapes>mp-x:nth-child(3n+1){border-radius:50%}
.mp-fxbg-shapes>mp-x:nth-child(3n){border:0;background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%,50% 0,50% 12%,10% 94%,90% 94%,50% 12%)}
.mp-fxbg-shapes>mp-x:nth-child(4n){border:0;background:currentColor;clip-path:polygon(42% 0,58% 0,58% 42%,100% 42%,100% 58%,58% 58%,58% 100%,42% 100%,42% 58%,0 58%,0 42%,42% 42%)}
@keyframes mpxShape{from{translate:0 0;rotate:0deg}to{translate:calc(var(--sw,24px)) calc(var(--sw,24px)*-1.4);rotate:140deg}}
.mp-fxbg-orbits>mp-x{left:50%;top:50%;width:calc(22% + var(--k,0)*17%);aspect-ratio:1;margin:calc((22% + var(--k,0)*17%)/-2) 0 0 calc((22% + var(--k,0)*17%)/-2);border:1px dashed color-mix(in srgb,currentColor 26%,transparent);border-radius:50%;animation:mpSpin calc(18s + var(--k,0)*9s) linear infinite}
.mp-fxbg-orbits>mp-x:nth-child(even){animation-direction:reverse}
.mp-fxbg-orbits>mp-x::after{content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:var(--mp-acc)}
/* a field of dots lit under the pointer; light beams; confetti (once) */
.mp-fxbg-dots{background-image:radial-gradient(color-mix(in srgb,currentColor 36%,transparent) 1.2px,transparent 1.6px);background-size:22px 22px;opacity:.5;-webkit-mask-image:radial-gradient(340px circle at var(--mx,50%) var(--my,40%),#000,rgba(0,0,0,.18) 70%);mask-image:radial-gradient(340px circle at var(--mx,50%) var(--my,40%),#000,rgba(0,0,0,.18) 70%)}
.mp-fxbg-beams>mp-x{top:-20%;bottom:-20%;left:var(--x);width:calc(var(--s,6px)*9);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--mp-fxc) 75%,transparent),transparent);rotate:14deg;animation:mpxBeam calc(var(--t,11s)*1.6) ease-in-out var(--dl,0s) infinite alternate}
@keyframes mpxBeam{from{translate:-60px 0;opacity:.35}to{translate:60px 0;opacity:1}}
.mp-fxbg-confetti>mp-x{left:50%;top:38%;width:8px;height:12px;background:hsl(calc(var(--k,0)*47deg) 85% 60%);opacity:0}
.mp-fxbg-confetti.is-go>mp-x{animation:mpxConfetti 1.6s cubic-bezier(.2,.7,.3,1) calc(var(--k,0)*12ms) both}
@keyframes mpxConfetti{0%{opacity:1;translate:0 0;rotate:0deg}70%{opacity:1}100%{opacity:0;translate:var(--dx,0) calc(var(--dy,0px) + 130px);rotate:calc(var(--k,0)*70deg)}}
@media (max-width:782px){.mp-fxbg>mp-x:nth-child(n+11){display:none}.mp-fxbg-mesh>mp-x,.mp-fxbg-clouds>mp-x{filter:blur(40px)}}
html.mp-reduce .mp-fxbg{display:none!important}
@media print{.mp-fxbg{display:none!important}}

/* ==================================================================== 20. IDLE MOTION — Motion Pro 4
   Small endless movement on cards or icons ("mp-idle mp-idle-<name>"); it rests while the pointer is
   on the item and while the item is off screen. */
html.mp-on:not(.mp-reduce) .mp-idle.mp-seen2{animation:var(--mpx-idle) var(--mpx-idt,6s) ease-in-out calc(var(--mpx-idn,0)*-.7s) infinite}
html.mp-on:not(.mp-reduce) .mp-idle:hover,html.mp-on:not(.mp-reduce) .mp-idle:not(.is-live){animation-play-state:paused}
.mp-idle-float{--mpx-idle:mpxFloat;--mpx-idt:6s}
.mp-idle-bob{--mpx-idle:mpxBob;--mpx-idt:3.2s}
.mp-idle-breathe{--mpx-idle:mpxBreathe;--mpx-idt:5s}
.mp-idle-sway{--mpx-idle:mpxSway;--mpx-idt:5.5s}
.mp-idle-spin{--mpx-idle:mpSpin;--mpx-idt:24s}
.mp-idle-spin.mp-seen2{animation-timing-function:linear}
.mp-idle-wiggle{--mpx-idle:mpxIdleWiggle;--mpx-idt:5s}
.mp-idle-beat{--mpx-idle:mpxBeat;--mpx-idt:2.4s}
.mp-idle-tilt{--mpx-idle:mpxIdleTilt;--mpx-idt:7s}
.mp-idle-drift{--mpx-idle:mpxDrift;--mpx-idt:9s}
@keyframes mpxFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes mpxBob{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes mpxBreathe{0%,100%{scale:1}50%{scale:1.035}}
@keyframes mpxSway{0%,100%{rotate:-1.6deg}50%{rotate:1.6deg}}
@keyframes mpxIdleWiggle{0%,86%,100%{rotate:0deg}89%{rotate:-5deg}92%{rotate:4deg}95%{rotate:-3deg}98%{rotate:2deg}}
@keyframes mpxBeat{0%,100%{scale:1}12%{scale:1.1}24%{scale:1}36%{scale:1.07}48%{scale:1}}
@keyframes mpxIdleTilt{0%,100%{rotate:0deg;translate:0 0}33%{rotate:.8deg;translate:0 -4px}66%{rotate:-.8deg;translate:0 3px}}
@keyframes mpxDrift{0%,100%{translate:0 0}25%{translate:6px -5px}50%{translate:0 -9px}75%{translate:-6px -4px}}
/* rings pulse around an icon */
.mp-pulse-ring{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 0 color-mix(in srgb,var(--mp-acc) 45%,transparent);animation:mpxPulseRing 2.6s ease-out infinite}
html.mp-reduce .mp-pulse-ring{display:none}

/* ==================================================================== 21. SECTION TRANSITIONS — Motion Pro 4
   The whole element is uncovered by a shape when it scrolls in ("mp-sx mp-sx-<name>"). */
html.mp-on:not(.mp-reduce) .mp-sx:not(.mp-in){opacity:0}
html.mp-on:not(.mp-reduce) .mp-sx:not(.mp-done){transition:opacity .01s linear}
html.mp-on:not(.mp-reduce) .mp-sx:is(.mp-sx-diag,.mp-sx-circle,.mp-sx-poly,.mp-sx-curtain,.mp-sx-rise).mp-in:not(.mp-done){animation:mpxSxDiag calc(1.2s*var(--mp-t,1)) cubic-bezier(.7,0,.2,1) both}
html.mp-on:not(.mp-reduce) .mp-sx-circle.mp-in:not(.mp-done){animation-name:mpxClipIris}
html.mp-on:not(.mp-reduce) .mp-sx-poly.mp-in:not(.mp-done){animation-name:mpxSxPoly}
html.mp-on:not(.mp-reduce) .mp-sx-curtain.mp-in:not(.mp-done){animation-name:mpxClipSplit}
html.mp-on:not(.mp-reduce) .mp-sx-rise.mp-in:not(.mp-done){animation-name:mpxClipUp}
@keyframes mpxSxDiag{from{clip-path:polygon(0 0,0 0,-40% 100%,-40% 100%)}to{clip-path:polygon(0 0,140% 0,100% 100%,-40% 100%)}}
@keyframes mpxSxPoly{from{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%)}to{clip-path:polygon(50% -60%,160% 0%,160% 100%,50% 160%,-60% 100%,-60% 0%)}}
html.mp-on:not(.mp-reduce) .mp-sx:is(.mp-sx-zoom,.mp-sx-panel):not(.mp-done){transition:scale calc(1.2s*var(--mp-t,1)) var(--mp-out),rotate calc(1.2s*var(--mp-t,1)) var(--mp-out),opacity .6s var(--mp-ease),translate calc(1.2s*var(--mp-t,1)) var(--mp-out),border-radius calc(1.2s*var(--mp-t,1)) var(--mp-out)}
html.mp-on:not(.mp-reduce) .mp-sx-zoom:not(.mp-in){scale:.9;border-radius:40px;overflow:hidden}
html.mp-on:not(.mp-reduce) .mp-sx-panel{transform-origin:50% 100%}
html.mp-on:not(.mp-reduce) .mp-sx-panel:not(.mp-in){rotate:x 34deg;translate:0 60px}
html.mp-on:not(.mp-reduce) :has(>.mp-sx-panel:not(.mp-done)){perspective:1400px}
/* edges: an animated wave, a torn edge, layered hills. The edge hangs from the top of the element, inside its
   top padding, in the colour of the section above it — so the section above seems to end in that shape. */
.mp-edge-top{position:absolute;left:0;right:0;top:-1px;height:var(--mpx-eh,48px);scale:1 -1;z-index:2;pointer-events:none;color:inherit;overflow:hidden}
.mp-edge-top>mp-x{position:absolute;left:0;bottom:0;width:200%;height:100%;background:var(--mpx-edge,#fff)}
.mp-edge-wave>mp-x{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 C150 100 300 0 450 50 S750 100 900 50 1050 0 1200 50 V100 H0z'/%3E%3C/svg%3E") 0 0/50% 100% repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 C150 100 300 0 450 50 S750 100 900 50 1050 0 1200 50 V100 H0z'/%3E%3C/svg%3E") 0 0/50% 100% repeat-x;animation:mpxWaves 12s linear infinite}
.mp-edge-wave>mp-x:nth-child(2){opacity:.5;height:140%;animation-duration:19s;animation-direction:reverse}
.mp-edge-torn>mp-x{width:100%;height:100%;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38 L40 30 70 41 110 26 150 36 190 22 240 34 280 25 330 39 370 28 420 35 470 20 520 33 560 27 610 40 660 24 700 36 750 29 800 41 850 23 900 35 940 28 990 38 1040 24 1090 36 1140 27 1200 34 V60 H0z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38 L40 30 70 41 110 26 150 36 190 22 240 34 280 25 330 39 370 28 420 35 470 20 520 33 560 27 610 40 660 24 700 36 750 29 800 41 850 23 900 35 940 28 990 38 1040 24 1090 36 1140 27 1200 34 V60 H0z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.mp-edge-torn{height:min(var(--mpx-eh,48px),40px);filter:drop-shadow(0 -3px 3px rgba(0,0,0,.12))}
.mp-edge-hills>mp-x{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 60 C100 20 200 20 300 50 S500 90 600 55 S800 10 900 45 S1100 80 1200 60 V100 H0z'/%3E%3C/svg%3E") 0 0/50% 100% repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 60 C100 20 200 20 300 50 S500 90 600 55 S800 10 900 45 S1100 80 1200 60 V100 H0z'/%3E%3C/svg%3E") 0 0/50% 100% repeat-x;translate:calc(var(--mp-q,.5)*-9%) 0}
.mp-edge-hills>mp-x:nth-child(2){opacity:.55;height:135%;translate:calc(var(--mp-q,.5)*-18%) 0}
.mp-edge-hills>mp-x:nth-child(3){opacity:.3;height:170%;translate:calc(var(--mp-q,.5)*-30%) 0}
html.mp-reduce .mp-edge-wave>mp-x{animation:none}
/* the element slides over the one above it */
html.mp-on .mp-sx-overlap{margin-top:-46px;border-radius:34px 34px 0 0;box-shadow:0 -24px 50px -30px rgba(0,0,0,.4);z-index:2}

/* ==================================================================== 22. DECORATIONS — Motion Pro 4 */
.mp-deco{position:absolute;z-index:2;pointer-events:none;color:var(--mp-acc)}
.mp-deco svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mp-deco path[pathLength]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--mp-out,ease) .3s}
.mp-deco.is-in path[pathLength],html.mp-reduce .mp-deco path[pathLength]{stroke-dashoffset:0}
.mp-deco-arrows{right:5%;top:10%;width:74px;height:74px;opacity:.8}
.mp-deco-arrows:is([dir=rtl] *){right:auto;left:5%;scale:-1 1}
.mp-deco-arrows.is-in svg{animation:mpxNudge 2.2s ease-in-out 1.6s infinite}
@keyframes mpxNudge{0%,100%{translate:0 0}50%{translate:6px 6px}}
.mp-deco-scribbles{left:3%;bottom:8%;width:110px;height:60px;opacity:.7}
.mp-deco-scribbles:is([dir=rtl] *){left:auto;right:3%}
.mp-deco-signature{right:6%;bottom:6%;width:170px;height:70px;opacity:.85}
.mp-deco-signature:is([dir=rtl] *){right:auto;left:6%}
.mp-deco-signature path[pathLength]{transition-duration:2.4s}
.mp-deco-compass{right:4%;top:8%;width:84px;height:84px;opacity:.75}
.mp-deco-compass:is([dir=rtl] *){right:auto;left:4%}
.mp-deco-compass .mp-needle{transform-origin:50px 50px;transform-box:view-box;animation:mpxNeedle 7s ease-in-out infinite;fill:currentColor;stroke:none}
@keyframes mpxNeedle{0%,100%{rotate:-18deg}35%{rotate:26deg}60%{rotate:4deg}80%{rotate:14deg}}
.mp-deco-stamp{right:6%;top:9%;width:116px;height:116px;opacity:0;rotate:-14deg;scale:2.2}
.mp-deco-stamp:is([dir=rtl] *){right:auto;left:6%}
.mp-deco-stamp.is-in{opacity:.72;scale:1;transition:opacity .25s ease .35s,scale .45s cubic-bezier(.2,.9,.3,1.2) .35s}
.mp-deco-stamp text{fill:currentColor;stroke:none;font:700 11px/1 system-ui,sans-serif;letter-spacing:.2em}
.mp-deco-plane{left:0;top:16%;width:100%;height:60px;color:currentColor;opacity:.55;overflow:hidden}
.mp-deco-plane svg{width:46px;height:46px;stroke:none;fill:currentColor;translate:-60px 30px;rotate:-8deg}
.mp-deco-plane.is-in svg{animation:mpxPlane 5.5s ease-in-out .4s 1 both}
@keyframes mpxPlane{0%{translate:-60px 30px}100%{translate:calc(100vw + 60px) -30px}}
.mp-deco-sparkles{inset:0;color:var(--mp-acc)}
.mp-deco-sparkles>mp-x{position:absolute;left:var(--x);top:var(--y);width:calc(var(--s,6px)*2.6);aspect-ratio:1;background:currentColor;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:mpTw var(--t,5s) ease-in-out var(--dl,0s) infinite}
.mp-deco-corners{inset:14px;border:0;opacity:.7}
.mp-deco-corners>mp-x{position:absolute;width:26px;height:26px;border:2px solid currentColor;scale:0;transition:scale .5s var(--mp-out,ease) .3s}
.mp-deco-corners>mp-x:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;transform-origin:0 0}
.mp-deco-corners>mp-x:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;transform-origin:100% 0}
.mp-deco-corners>mp-x:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;transform-origin:0 100%}
.mp-deco-corners>mp-x:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;transform-origin:100% 100%}
.mp-deco-corners.is-in>mp-x{scale:1}
.mp-deco-badge{right:4%;bottom:8%;width:104px;height:104px;animation:mpSpin 26s linear infinite;opacity:.8}
.mp-deco-badge:is([dir=rtl] *){right:auto;left:4%}
.mp-deco-badge text{fill:currentColor;stroke:none;font:600 10.5px/1 system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase}
/* travel details on cards: a boarding-pass notch, a swinging price tag, taped photos, a postmark */
html.mp-on .mp-tk{-webkit-mask:radial-gradient(circle 9px at 0 62%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 62%,transparent 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 9px at 0 62%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 62%,transparent 98%,#000) right/51% 100% no-repeat}
html.mp-on:not(.mp-reduce) .mp-tag-swing{transform-origin:50% 0;animation:mpxSway 3.4s ease-in-out infinite}
.mp-tape{position:absolute;left:50%;top:-9px;z-index:5;width:74px;height:22px;margin-left:-37px;rotate:-3deg;background:rgba(255,236,170,.72);box-shadow:0 2px 6px -3px rgba(0,0,0,.4);pointer-events:none}
@media (max-width:782px){.mp-deco-arrows,.mp-deco-scribbles,.mp-deco-signature,.mp-deco-compass,.mp-deco-stamp,.mp-deco-badge{scale:.7;transform-origin:100% 0}.mp-deco-stamp.is-in{scale:.7}}
html.mp-reduce .mp-deco-plane,html.mp-reduce .mp-deco-sparkles{display:none}
@media print{.mp-deco,.mp-edge-top,.mp-tape{display:none!important}}

/* ==================================================================== 23. POINTERS AND PAGE CHANGES — Motion Pro 4 */
.mp-cur-invert i{left:-28px;top:-28px;width:56px;height:56px;border:0;background:#fff;opacity:1}
.mp-cur-invert.is-link i{scale:1.6}
.mp-cur-glow{mix-blend-mode:normal}
.mp-cur-glow i{left:-90px;top:-90px;width:180px;height:180px;border:0;background:radial-gradient(circle,color-mix(in srgb,var(--mp-acc) 34%,transparent),transparent 68%);opacity:.9}
.mp-cur-glow.is-link i{scale:1.3}
.mp-cur-arrow{mix-blend-mode:normal}
.mp-cur-arrow i{left:-22px;top:-22px;width:44px;height:44px;border:0;border-radius:50%;background:var(--mp-acc);opacity:.92;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22'/%3E%3C/svg%3E") center/contain no-repeat}
.mp-cur-arrow i::after{content:"";position:absolute;left:14px;top:14px;width:14px;height:14px;border-top:2px solid #fff;border-right:2px solid #fff;rotate:45deg;translate:-3px 0}
.mp-cur-cross i{left:-14px;top:-14px;width:28px;height:28px;border:0;border-radius:0;background:linear-gradient(#fff,#fff) 50% 0/1.5px 100% no-repeat,linear-gradient(#fff,#fff) 0 50%/100% 1.5px no-repeat}
.mp-cur-cross.is-link i{rotate:45deg;scale:1.3}
.mp-cur-double i{box-shadow:0 0 0 7px transparent,0 0 0 8.5px rgba(255,255,255,.55)}
.mp-smoke{position:fixed;left:0;top:0;z-index:99997;width:100vw;height:100vh;pointer-events:none}
.mp-curtain-scale{transform:none;background:var(--mp-acc);clip-path:inset(50% 50% 50% 50% round 30px);transition:clip-path .33s cubic-bezier(.7,0,.2,1)}
.mp-curtain-scale.is-on{transform:none;clip-path:inset(0 0 0 0 round 0)}
.mp-curtain-blinds{transform:none;background:repeating-linear-gradient(90deg,var(--mp-acc) 0 12.5%,color-mix(in srgb,var(--mp-acc) 86%,#000) 12.5% 25%);clip-path:inset(0 0 100% 0);transition:clip-path .33s cubic-bezier(.7,0,.2,1)}
.mp-curtain-blinds.is-on{transform:none;clip-path:inset(0 0 0 0)}
.mp-curtain-diamond{transform:none;background:var(--mp-acc);clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%);transition:clip-path .34s cubic-bezier(.7,0,.2,1)}
.mp-curtain-diamond.is-on{transform:none;clip-path:polygon(50% -60%,160% 50%,50% 160%,-60% 50%)}
.mp-curtain-split{transform:none;background:linear-gradient(var(--mp-acc),var(--mp-acc)) 0 0/100% 0 no-repeat,linear-gradient(var(--mp-acc),var(--mp-acc)) 0 100%/100% 0 no-repeat;transition:background-size .33s cubic-bezier(.7,0,.2,1)}
.mp-curtain-split.is-on{transform:none;background-size:100% 51%,100% 51%}
.mp-curtain-wave{transform:none;background:var(--mp-acc);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q25 0 50 22 T100 16 V130 H0z'/%3E%3C/svg%3E") 0 0/100% 130% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q25 0 50 22 T100 16 V130 H0z'/%3E%3C/svg%3E") 0 0/100% 130% no-repeat;translate:0 100%;transition:translate .36s cubic-bezier(.6,0,.2,1)}
.mp-curtain-wave.is-on{transform:none;translate:0 -24%}
/* menu and logo details (page preset) */
/* the menu button turns into a cross while its panel is open */
html.mp-site:not(.mp-reduce) .rf-burger-i i{transition:rotate .35s var(--mp-out),translate .35s var(--mp-out),opacity .2s,width .25s}
html.mp-site .rf-burger[aria-expanded=true] .rf-burger-i i:nth-child(1){translate:0 7px;rotate:45deg}
html.mp-site .rf-burger[aria-expanded=true] .rf-burger-i i:nth-child(2){opacity:0}
html.mp-site .rf-burger[aria-expanded=true] .rf-burger-i i:nth-child(3){translate:0 -7px;rotate:-45deg}
html.mp-site:not(.mp-reduce,.mp-classic) .rf-nav-li:is(:hover,.is-open,:focus-within)>:is(.rf-rme-mega-panel,.rf-sub) :is(.rf-mm-col,.rf-mm-li,li){animation:mpxMenuIn .5s var(--mp-out) both;animation-delay:calc(var(--mp-mi,0)*28ms)}
@keyframes mpxMenuIn{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
html.mp-site.mp-fine:not(.mp-reduce) .rmt-header .rf-logo-a.mp-logo-tilt{transition:rotate .5s var(--mp-out);transform-style:preserve-3d}
html.mp-site:not(.mp-reduce) :is(.rm-stars,.rwc-stars,.star-rating).mp-stars{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--mp-out) .3s}
html.mp-site:not(.mp-reduce) :is(.rm-stars,.rwc-stars,.star-rating).mp-stars:is([dir=rtl] *){clip-path:inset(0 0 0 100%)}
html.mp-site:not(.mp-reduce) .mp-seen :is(.rm-stars,.rwc-stars,.star-rating).mp-stars,html.mp-site:not(.mp-reduce) :is(.rm-stars,.rwc-stars,.star-rating).mp-stars.is-in{clip-path:inset(0 0 0 0)}
html.mp-site:not(.mp-reduce) .mp-crumb>*{animation:mpxMenuIn .5s var(--mp-out) both;animation-delay:calc(var(--mp-mi,0)*70ms)}
/* ==================================================================== 24. SMALL ADDITIONS — Motion Pro 4 */
/* the hero's own animated layer sits over its picture and under its copy */
.mp-fxbg.mp-fx-hero{z-index:1}
/* a card that takes the pointer spotlight */
.mp-spot.mp-spot-acc{border-radius:inherit}
/* a taped photo: the tape is a little see-through strip over the top edge */
.mp-tape{mix-blend-mode:multiply}
/* idle rings only run while their host is on screen */
.mp-idle:not(.is-live) .mp-pulse-ring{animation-play-state:paused}
/* back to top on the tour demos: a plane that takes off */
.mp-ring-plane path{fill:currentColor;stroke:none}
.mp-ring-plane.is-fly svg path{animation:mpxFlyUp .9s cubic-bezier(.5,0,.2,1)}
@keyframes mpxFlyUp{0%{translate:0 0;opacity:1}45%{translate:0 -30px;opacity:0}46%{translate:0 26px;opacity:0}100%{translate:0 0;opacity:1}}
/* rotating words inside a masked word keep their own clip */
html.mp-on:not(.mp-reduce) .mp-h .mp-w.mp-w-rot{overflow:visible}
.mp-ring-box path,.mp-ring-bracket path{stroke-linejoin:round}

/* tabs: an underline glides to the selected tab; a panel fades in when it is shown */
.mp-tabink{position:absolute;left:0;bottom:0;height:2px;width:0;border-radius:2px;background:var(--mp-acc);opacity:0;pointer-events:none;transition:translate .45s var(--mp-out,ease),width .45s var(--mp-out,ease),opacity .25s}
.mp-tabink.is-on{opacity:1}
html.mp-site:not(.mp-reduce,.mp-classic) .rmb-canvas-main [role=tabpanel]:not([hidden]){animation:mpxTabIn .45s var(--mp-out) both}
/* --mp-td is the side the chosen tab lies on (1 = after the tab before, -1 = before it): the panel comes from there */
@keyframes mpxTabIn{from{opacity:0;translate:calc(var(--mp-td,0)*30px) 6px}}

/* scroll option "pin": the element stays in place while the taller column beside it scrolls (desktop) */
@media (min-width:1025px){html.mp-on:not(.mp-reduce) .mp-pin{position:sticky!important;top:112px;z-index:1}}

/* scroll option "snap": on desktop the page settles on the top of the section when the scroll ends near it */
@media (min-width:1025px) and (prefers-reduced-motion:no-preference){html.mp-snap{scroll-snap-type:y proximity}html.mp-snap .mp-snap-row{scroll-snap-align:start}}

/* the full-screen menu opens as a circle growing from its button, or as a curtain coming down */
html.mp-menu-circle:not(.mp-reduce) .rf-drawer.rf-drawer-full{transform:none;clip-path:circle(0 at var(--mp-bx,calc(100% - 34px)) var(--mp-by,34px));transition:clip-path .7s cubic-bezier(.7,0,.2,1),opacity .25s,visibility .7s}
html.mp-menu-circle:not(.mp-reduce) .rf-drawer.rf-drawer-full.is-open{clip-path:circle(150vmax at var(--mp-bx,calc(100% - 34px)) var(--mp-by,34px))}
html.mp-menu-curtain:not(.mp-reduce) .rf-drawer.rf-drawer-full{transform:none;clip-path:inset(0 0 100% 0);transition:clip-path .6s cubic-bezier(.7,0,.2,1),opacity .25s,visibility .6s}
html.mp-menu-curtain:not(.mp-reduce) .rf-drawer.rf-drawer-full.is-open{clip-path:inset(0 0 0 0)}

/* ==================================================================== 25. SAFETY — Motion Pro 4 */
@media (prefers-reduced-motion:reduce){
  .mp-fxbg,.mp-deco-plane,.mp-deco-sparkles,.mp-smoke,.mp-pulse-ring,.mp-edge-wave>mp-x{animation:none!important}
  .mp-fxbg,.mp-smoke,.mp-pulse-ring{display:none!important}
  .mp-rot>mp-s:not(:first-child){display:none}
}
@media print{
  html.mp-on :is(.mp-i,.mp-sx){clip-path:none!important;transform:none!important}
  html.mp-on .mp-sc,html.mp-on .mp-sc-stack{clip-path:none!important;position:static!important}
  .mp-fxbg,.mp-deco,.mp-edge-top,.mp-tape,.mp-smoke,.mp-frame,.mp-sheen,.mp-chase,.mp-metal,.mp-peelc,.mp-pulse-ring{display:none!important}
  .mp-rot>mp-s:not(:first-child){display:none}
}