/* Trades-Site.co.uk home motion layer. Everything is visible by default. Start states apply only under
   html.m-on, which motion.js sets when JS runs, IntersectionObserver exists and reduced motion is off. */
:root{--e:cubic-bezier(.2,.8,.2,1);--eb:cubic-bezier(.3,1.5,.5,1)}
.hero-m{position:relative;overflow:hidden;overflow:clip}
.hero-m .hero-grid{position:relative;z-index:1}
.hero-fx{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-fx span{position:absolute;display:block;translate:0 calc(var(--sy,0)*var(--k)*1px)}
.hero-fx span:nth-child(1){--k:.28;width:min(560px,80%);height:520px;right:0;top:-120px;background:radial-gradient(farthest-side at 100% 30%,rgba(245,166,35,.26),rgba(245,166,35,0))}
.hero-fx span:nth-child(2){--k:-.12;width:min(420px,70%);height:420px;left:0;bottom:-160px;background:radial-gradient(farthest-side at 0 70%,rgba(11,37,69,.10),rgba(11,37,69,0))}
.hero-fx span:nth-child(3){--k:-.3;width:min(240px,50%);height:170px;right:4%;bottom:4%;background-image:radial-gradient(rgba(11,37,69,.2) 1.5px,transparent 1.7px);background-size:16px 16px}
/* Email-client card */
.mail-stage{min-width:0;perspective:1400px}
.mail{background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;max-width:540px;margin:0 auto;box-shadow:0 34px 60px -24px rgba(11,37,69,.4),0 8px 18px rgba(11,37,69,.08);transform-origin:50% 60%}
.mail-bar{display:flex;gap:6px;align-items:center;background:var(--navy);padding:.6rem .95rem}
.mail-bar span{width:10px;height:10px;border-radius:50%;background:rgba(250,247,240,.35)}
.mail-bar b{margin-left:.5rem;color:var(--bg);font-size:.82rem;letter-spacing:.05em}
.mail-head{background:var(--stone);padding:.85rem 1.1rem;font-size:.93rem;border-bottom:1px solid var(--line)}
.mail-head p{margin:.1rem 0}
.mail-head .mail-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.4rem}
.mail-badge{transform-origin:100% 50%;background:var(--amber);color:var(--navy);font-weight:800;border-radius:999px;padding:.15rem .75rem;font-size:.86rem;font-variant-numeric:tabular-nums}
.mail-body{padding:1rem 1.1rem .4rem}
.mail-body>p{margin:0 0 .75rem}
[data-type]{position:relative}
.ty{position:absolute;inset:0;color:var(--tc)}
.caret{display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-.17em;background:var(--amber);animation:blink .9s steps(1) infinite}
.mrows{list-style:none;padding:0;margin:0 0 .75rem;display:grid;gap:.55rem;perspective:900px}
.mrow{display:grid;grid-template-columns:4.9rem minmax(0,1fr);gap:.8rem;border:1px solid var(--line);border-left:6px solid var(--navy);border-radius:10px;padding:.6rem .85rem;font-size:.95rem;line-height:1.45;transform-origin:50% 0}
.mrow p{margin:0}
.mrow .job-time{font-weight:800;font-size:1.08rem}
.stamp{display:inline-block;margin-top:.3rem;border:2px solid var(--navy);border-radius:6px;padding:.05rem .35rem;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-6deg)}
.stamp::before{content:"";display:inline-block;width:.32em;height:.62em;border:solid var(--navy);border-width:0 2px 2px 0;transform:rotate(45deg);margin:0 .4em 0 .1em;position:relative;top:-.1em}
[data-countup]{display:inline-block;font-variant-numeric:tabular-nums;text-align:right}
.narrow{max-width:820px}
.trade-split{margin-bottom:2rem}
.cta-rv .btn-book{position:relative;overflow:hidden}
/* ---- motion (html.m-on only) ---- */
.m-on .hero-m h1.mask:not(.is-split){visibility:hidden}
.mask .w{display:inline-block;clip-path:inset(-.15em -.12em -.25em -.12em)}
.mask .w>i{display:inline-block;font-style:normal}
.m-on .hero-m h1 .w>i{animation:wup .85s var(--e) backwards;animation-delay:calc(var(--d,0)*45ms + 60ms)}
.m-on .hero-copy>:not(h1){animation:up .8s var(--e) backwards}
.m-on .hero-copy>:nth-child(2){animation-delay:.35s}.m-on .hero-copy>:nth-child(3){animation-delay:.45s}
.m-on .hero-copy>:nth-child(4){animation-delay:.55s}.m-on .hero-copy>:nth-child(5){animation-delay:.65s}
.m-on .hero-copy .ticks li{animation:pop .5s var(--eb) backwards}
.m-on .hero-copy .ticks li:nth-child(1){animation-delay:.8s}.m-on .hero-copy .ticks li:nth-child(2){animation-delay:.9s}
.m-on .hero-copy .ticks li:nth-child(3){animation-delay:1s}.m-on .hero-copy .ticks li:nth-child(4){animation-delay:1.1s}
.m-on .hero-actions .btn-book::after,.m-on .cta-rv .btn-book::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);transform:translateX(-130%);pointer-events:none}
.m-on .hero-actions .btn-book{position:relative;overflow:hidden}
.m-on .hero-actions .btn-book::after{animation:glint 1.2s 1.4s var(--e)}
.m-on .cta-rv.in .btn-book::after{animation:glint 1.2s .7s var(--e)}
.m-on .mail{transform:rotateY(var(--ty,0deg)) rotateX(var(--tx,0deg));transition:transform 1.2s var(--e),opacity .8s}
.m-on .mail.ready{transition:transform .5s var(--e)}
.m-on .mail:not(.seen){opacity:0;transform:translate3d(0,50px,-80px) rotateX(18deg) scale(.94)}
.m-on .mail:not(.m-done) [data-type]:not(.typed){color:transparent}
.m-on .mail:not(.m-done) .mrow:not(.land){opacity:0;transform:translate3d(0,-16px,0) rotateX(-40deg) scale(.96)}
.m-on .mrow{transition:opacity .3s,transform .6s var(--eb)}
.m-on .mail:not(.m-done) .mrow:not(.land) .stamp{opacity:0;transform:scale(2.4) rotate(-22deg)}
.m-on .mrow .stamp{transition:opacity .15s .3s,transform .4s .3s var(--eb)}
.m-on .mrow.land{animation:glow 1.3s ease-out}
.m-on .mail-badge.bump{animation:bump .45s var(--eb)}
/* scroll reveals */
.m-on [data-rv]{perspective:1200px}
.m-on .rvi{transition:opacity .7s var(--e),transform .95s var(--e);transition-delay:calc(var(--i,0)*85ms);transform-origin:50% 100%}
.m-on [data-rv]:not(.in) .rvi{opacity:0;transform:translate3d(0,48px,0) rotateX(16deg)}
.m-on .rv-wave .rvi{transform-origin:0 50%}
.m-on .rv-wave:not(.in) .rvi{transform:translate3d(-24px,40px,-60px) rotateY(18deg)}
.m-on .rv-wave .ico>*{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--e);transition-delay:calc(var(--i,0)*85ms + .35s)}
.m-on .rv-wave:not(.in) .ico>*{stroke-dashoffset:1}
.m-on .mask .w>i{transition:transform .85s var(--e);transition-delay:calc(var(--d,0)*40ms)}
.m-on [data-rv]:not(.in) .mask .w>i,.m-on .mask[data-rv]:not(.in) .w>i{transform:translate3d(0,112%,0) rotate(3deg)}
.m-on .rv-depth{transition:opacity .8s var(--e),transform 1.1s var(--e)}
.m-on .rv-depth:not(.in){opacity:0;transform:translate3d(0,64px,-140px) rotateX(20deg)}
.m-on .steps.in li::before{animation:stampn .65s var(--eb) backwards;animation-delay:calc(var(--i,0)*85ms + .35s)}
@media (min-width:901px){
 .m-on .mail{--ty:-7deg;--tx:3deg}
 .m-on .mail:not(.seen){transform:translate3d(40px,40px,-80px) rotateY(-24deg) rotateX(14deg) scale(.92)}
 .m-on .mail-stage{translate:0 calc(var(--sy,0)*.08px)}
}
@keyframes wup{from{transform:translate3d(0,112%,0) rotate(4deg)}}
@keyframes up{from{opacity:0;transform:translate3d(0,26px,0)}}
@keyframes pop{from{opacity:0;transform:scale(.6)}}
@keyframes glint{to{transform:translateX(130%)}}
@keyframes blink{50%{opacity:0}}
@keyframes glow{from{box-shadow:0 0 0 5px rgba(245,166,35,.6)}to{box-shadow:0 0 0 0 rgba(245,166,35,0)}}
@keyframes bump{50%{transform:scale(1.25)}}
@keyframes stampn{0%{opacity:0;transform:scale(2.6) rotate(-30deg);background:var(--amber);color:var(--navy)}60%{opacity:1;transform:scale(.9)}}
@media (prefers-reduced-motion:reduce){.m-on *,.m-on *::before,.m-on *::after{animation:none!important;transition:none!important}}