/* ===== Services post image + side text (animated) — separate from the sticky-note cards ===== */
.sp-sec{padding:40px 0 110px}
.sp-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:70px;align-items:center}
.sp-media{position:relative;display:grid;place-items:center;padding:30px;perspective:1200px}
.sp-media::before{content:"";position:absolute;inset:6% 4%;border-radius:40px;background:#a6cbec;opacity:.55;transform:rotate(-4deg);animation:spBlob 9s ease-in-out infinite alternate}
.sp-media::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:var(--yellow);right:2%;bottom:6%;z-index:0;opacity:.9;animation:spDot 5s ease-in-out infinite alternate}
@keyframes spBlob{to{transform:rotate(3deg) scale(1.04)}}
@keyframes spDot{to{transform:translate(-14px,-22px) scale(1.12)}}
.sp-tilt{position:relative;z-index:1;width:min(100%,470px);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease-out}
.sp-img{position:relative;display:block;border-radius:26px;overflow:hidden;box-shadow:0 34px 70px rgba(11,79,194,.28),0 4px 10px rgba(20,35,50,.1);opacity:0;background:#a6cbec}
.sp-img img{display:block;width:100%;height:auto}
.sp-img::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.sp-media.show .sp-img{animation:spDrop 1.05s cubic-bezier(.2,.9,.25,1.1) forwards,spFloat 6s ease-in-out 1.2s infinite alternate}
.sp-media.show .sp-img::after{animation:spShine 1.4s .9s ease forwards,spShine 1.4s 5s ease infinite}
@keyframes spDrop{0%{opacity:0;transform:translateY(-90px) rotate(-6deg) scale(1.12)}55%{opacity:1}70%{transform:rotate(.8deg) scale(.985)}100%{opacity:1;transform:rotate(-1.5deg)}}
@keyframes spFloat{from{transform:translateY(0) rotate(-1.5deg)}to{transform:translateY(-12px) rotate(1deg)}}
@keyframes spShine{to{transform:translateX(120%)}}

.sp-text .sc-kicker{margin-bottom:14px}
.sp-text h2{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.015em;line-height:.98;font-size:clamp(46px,5.4vw,74px);margin:0 0 20px;color:var(--ink)}
.sp-text h2 span{color:var(--blue)}
.sp-text>p{font-size:17px;line-height:1.75;color:#5b6673;margin:0 0 28px;max-width:560px}
.sp-list{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.sp-list li{display:flex;gap:12px;align-items:flex-start;opacity:0;transform:translateX(30px)}
.sp-text.show .sp-list li{animation:spIn .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.35s + var(--i)*.1s)}
@keyframes spIn{to{opacity:1;transform:none}}
.sp-list i{flex:none;width:34px;height:34px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font:900 12px Inter,Arial,sans-serif;font-style:normal;color:var(--ink);transition:transform .35s cubic-bezier(.2,.9,.3,1.4)}
.sp-list li:hover i{transform:scale(1.2) rotate(-8deg)}
.sp-list b{display:block;font-size:15px;line-height:1.3;color:var(--ink)}
.sp-list small{display:block;font-size:12.5px;line-height:1.5;color:#6c7784;margin-top:2px}
.sp-text .sc-btn{opacity:0}
.sp-text.show .sc-btn{animation:spIn .7s 1.1s cubic-bezier(.2,.8,.2,1) forwards;transform:translateY(14px)}

@media(max-width:1000px){.sp-wrap{grid-template-columns:1fr;gap:40px}.sp-media{order:-1}}
@media(max-width:650px){.sp-sec{padding:20px 0 75px}.sp-list{grid-template-columns:1fr}.sp-media{padding:14px}}
@media(prefers-reduced-motion:reduce){.sp-img,.sp-list li,.sp-text .sc-btn{opacity:1!important;transform:none!important;animation:none!important}.sp-media::before,.sp-media::after{animation:none}}

/* ===== ScaleCraft services stamp (built in HTML/CSS so the text is editable) ===== */
.pb-board{--blue:#0b4fc2;--line:#6f9fd6;position:relative;padding:34px 26px 30px;background-color:#a6cbec;
 background-image:linear-gradient(var(--line) 1.4px,transparent 1.4px),linear-gradient(90deg,var(--line) 1.4px,transparent 1.4px);background-size:54px 54px;animation:pbGrid 30s linear infinite}
@keyframes pbGrid{to{background-position:54px 54px}}
.pb-stampwrap{position:relative;filter:drop-shadow(6px 6px 0 #4a82d0)}
.pb-card{--p:7px;--s:22px;background:#fdf6ec;padding:50px 24px 22px;color:var(--blue);
 -webkit-mask:radial-gradient(circle var(--p) at 50% 0,#0000 96%,#000) 0 0/var(--s) 100% repeat-x,radial-gradient(circle var(--p) at 50% 100%,#0000 96%,#000) 0 0/var(--s) 100% repeat-x,radial-gradient(circle var(--p) at 0 50%,#0000 96%,#000) 0 0/100% var(--s) repeat-y,radial-gradient(circle var(--p) at 100% 50%,#0000 96%,#000) 0 0/100% var(--s) repeat-y;-webkit-mask-composite:source-in;
 mask:radial-gradient(circle var(--p) at 50% 0,#0000 96%,#000) 0 0/var(--s) 100% repeat-x,radial-gradient(circle var(--p) at 50% 100%,#0000 96%,#000) 0 0/var(--s) 100% repeat-x,radial-gradient(circle var(--p) at 0 50%,#0000 96%,#000) 0 0/100% var(--s) repeat-y,radial-gradient(circle var(--p) at 100% 50%,#0000 96%,#000) 0 0/100% var(--s) repeat-y;mask-composite:intersect}
.pb-card h3{margin:0 0 10px;text-align:center;font:400 clamp(40px,5vw,54px)/1.05 "DM Serif Display",Georgia,serif;text-transform:uppercase;letter-spacing:.01em;color:var(--blue);clip-path:inset(0 0 100% 0)}
.sp-media.show .pb-card h3{animation:pbTitle .9s .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pbTitle{from{clip-path:inset(0 0 100% 0);transform:translateY(18px)}to{clip-path:inset(0 0 -10% 0);transform:none}}
.pb-row{position:relative;display:grid;grid-template-columns:26px 112px 1fr;gap:0 14px;align-items:center;padding:13px 2px;opacity:0;transform:translateX(-34px)}
.pb-row+.pb-row::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:repeating-linear-gradient(90deg,#a1a69b 0 6px,transparent 6px 10px);clip-path:inset(0 100% 0 0)}
.sp-media.show .pb-row{animation:pbRow .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(1s + var(--i)*.14s)}
.sp-media.show .pb-row+.pb-row::before{animation:pbLine .8s ease forwards;animation-delay:calc(1s + var(--i)*.14s)}
@keyframes pbRow{to{opacity:1;transform:none}}@keyframes pbLine{to{clip-path:inset(0 0 0 0)}}
.pb-row em{font:400 17px/1 "DM Serif Display",Georgia,serif;font-style:normal;transition:transform .4s cubic-bezier(.2,.9,.3,1.4)}
.pb-row b{font:400 17px/1.05 "DM Serif Display",Georgia,serif;text-transform:uppercase;letter-spacing:.01em;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.pb-row p{margin:0;font:500 11.5px/1.5 Poppins,Inter,Arial,sans-serif;color:var(--blue)}
.pb-row:hover em{transform:scale(1.3) rotate(-6deg)}.pb-row:hover b{transform:translateX(6px)}
.pb-badge{position:absolute;left:-22px;top:-26px;width:104px;height:104px;z-index:3;transform:rotate(-8deg)}
.pb-badge svg{width:100%;height:100%;display:block;overflow:visible}
.pb-ring{transform-origin:50px 50px;animation:pbSpin 22s linear infinite}
@keyframes pbSpin{to{transform:rotate(360deg)}}
.pb-mark{transform-origin:50px 50px;animation:pbBob 3s ease-in-out infinite alternate}
@keyframes pbBob{from{transform:scale(1) rotate(-4deg)}to{transform:scale(1.1) rotate(4deg)}}
.sp-media.show .pb-badge{animation:pbPop .8s .7s cubic-bezier(.2,.9,.3,1.5) backwards}
@keyframes pbPop{from{opacity:0;transform:rotate(-90deg) scale(.2)}}
@media(max-width:650px){.pb-board{padding:30px 14px 24px}.pb-card{padding:46px 14px 16px}.pb-row{grid-template-columns:22px 96px 1fr;gap:0 10px}.pb-row b{font-size:15px}.pb-row p{font-size:10.5px}.pb-badge{width:84px;height:84px;left:-12px;top:-22px}}
@media(prefers-reduced-motion:reduce){.pb-row,.pb-card h3{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important}.pb-board,.pb-ring,.pb-mark{animation:none}}

.sp-why{grid-template-columns:1fr;gap:18px}.sp-why small{max-width:460px}