/* ===== Postage-stamp services board (animated) ===== */
.st-board{--st-blue:#0b4fc2;--st-sky:#a6cbec;--st-line:#6f9fd6;--st-cream:#fdf6ec;--st-shadow:#4a82d0;
 position:relative;overflow:hidden;border-radius:34px;padding:76px 40px 84px;background-color:var(--st-sky);
 background-image:linear-gradient(var(--st-line) 1.5px,transparent 1.5px),linear-gradient(90deg,var(--st-line) 1.5px,transparent 1.5px);
 background-size:92px 92px;animation:stGrid 40s linear infinite}
@keyframes stGrid{to{background-position:92px 92px}}

.st-stampwrap{position:relative;max-width:900px;margin:0 auto;filter:drop-shadow(10px 10px 0 var(--st-shadow));opacity:0;perspective:1400px}
.st-board.in .st-stampwrap{animation:stStamp 1.05s cubic-bezier(.2,.9,.25,1.1) forwards}
@keyframes stStamp{0%{opacity:0;transform:translateY(-110px) rotate(-5deg) scale(1.18)}50%{opacity:1}62%{transform:translateY(0) rotate(.8deg) scale(.985)}80%{transform:rotate(-.35deg) scale(1.004)}100%{opacity:1;transform:none}}
.st-tilt{position:relative;transition:transform .35s ease-out;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

.st-card{position:relative;background:var(--st-cream);padding:70px 46px 40px;--p:9px;--s:26px;
 -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}

.st-card h2{margin:0 0 30px;text-align:center;font:400 clamp(54px,8.4vw,98px)/1.05 "DM Serif Display",Georgia,serif;letter-spacing:.005em;text-transform:uppercase;color:var(--st-blue);padding-bottom:6px;clip-path:inset(0 0 100% 0)}
.st-board.in .st-card h2{animation:stTitle .9s .45s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes stTitle{from{clip-path:inset(0 0 100% 0);transform:translateY(24px)}to{clip-path:inset(0 0 -10% 0);transform:none}}

.st-list{display:block}
.st-row{position:relative;isolation:isolate;display:grid;grid-template-columns:54px 250px 1fr 44px;gap:0 28px;align-items:center;padding:30px 18px;color:var(--st-blue);text-decoration:none;opacity:0;transform:translateX(-46px)}
.st-board.in .st-row{animation:stRow .75s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.95s + var(--i)*.15s)}
@keyframes stRow{to{opacity:1;transform:none}}
.st-row+.st-row::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:repeating-linear-gradient(90deg,#a1a69b 0 7px,transparent 7px 12px);clip-path:inset(0 100% 0 0)}
.st-board.in .st-row+.st-row::after{animation:stLine .9s ease forwards;animation-delay:calc(.95s + var(--i)*.15s)}
@keyframes stLine{to{clip-path:inset(0 0 0 0)}}
.st-row::before{content:"";position:absolute;inset:4px -8px;z-index:-1;border-radius:14px;background:#e6eefb;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.st-row:hover::before,.st-row:focus-visible::before{transform:scaleX(1)}
.st-row:focus-visible{outline:2px solid var(--st-blue);outline-offset:2px;border-radius:14px}

.st-n{font:400 24px/1 "DM Serif Display",Georgia,serif;display:inline-block;transition:transform .4s cubic-bezier(.2,.9,.3,1.4)}
.st-row:hover .st-n{transform:scale(1.3) rotate(-6deg)}
.st-t{display:block;font:400 clamp(24px,2.6vw,32px)/1.04 "DM Serif Display",Georgia,serif;text-transform:uppercase;letter-spacing:.01em;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.st-row:hover .st-t{transform:translateX(10px)}
.st-d{display:block;font:500 16px/1.55 Poppins,Inter,Arial,sans-serif;color:var(--st-blue);max-width:360px}
.st-go{justify-self:end;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--st-blue);color:#fff;font-style:normal;font-weight:700;transition:transform .45s cubic-bezier(.2,.9,.3,1.3),opacity .3s}
@media(hover:hover){.st-go{opacity:0;transform:translateX(-14px) rotate(-45deg)}.st-row:hover .st-go,.st-row:focus-visible .st-go{opacity:1;transform:none}}

/* round badge */
.st-badge{position:absolute;left:-44px;top:-48px;width:154px;height:154px;z-index:4;transform:rotate(-8deg)}
.st-badge svg{width:100%;height:100%;display:block;overflow:visible}
.st-ring{transform-origin:50px 50px;animation:stSpin 24s linear infinite}
@keyframes stSpin{to{transform:rotate(360deg)}}
.st-mark{transform-origin:50px 50px;animation:stBob 3.2s ease-in-out infinite alternate}
@keyframes stBob{from{transform:scale(1) rotate(-4deg)}to{transform:scale(1.1) rotate(4deg)}}
.st-board.in .st-badge{animation:stPop .8s .7s cubic-bezier(.2,.9,.3,1.5) backwards}
@keyframes stPop{from{opacity:0;transform:rotate(-90deg) scale(.2)}}

@media(max-width:860px){
 .st-board{padding:64px 14px 60px;border-radius:26px}
 .st-card{padding:62px 22px 26px;--s:22px;--p:7px}
 .st-row{grid-template-columns:40px minmax(0,1fr) 36px;gap:6px 14px;padding:24px 8px}
 .st-t{grid-column:2;font-size:22px}.st-d{grid-column:2;grid-row:2;font-size:14.5px;max-width:none}.st-n{grid-row:1/3;align-self:start;padding-top:4px}
 .st-go{grid-column:3;grid-row:1/3;width:36px;height:36px;opacity:1;transform:none}
 .st-badge{width:104px;height:104px;left:-14px;top:-30px}
}
@media(prefers-reduced-motion:reduce){
 .st-board,.st-ring,.st-mark{animation:none!important}
 .st-stampwrap,.st-row{opacity:1!important;transform:none!important;animation:none!important}
 .st-card h2{clip-path:none!important;animation:none!important}
 .st-row+.st-row::after{clip-path:none!important;animation:none!important}
 .st-board.in .st-badge{animation:none!important}
}