/* Jompom Services: bento of tilting cards with a 3D toy each. */
.jp-services{background:var(--ink);color:#fff;padding:90px 0 120px}
.jp-services .sv-head{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:end;margin-bottom:56px}
.jp-services .sv-title{color:#fff}
.jp-services .sv-head p{color:#c9d3da;font-size:17px;max-width:30em}
.jp-services .sv-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.jp-services .sv-card{--rx:0deg;--ry:0deg;position:relative;border-radius:30px;padding:34px 34px 32px;min-height:400px;display:flex;flex-direction:column;justify-content:flex-end;transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .7s var(--spring);border:3px solid var(--ink)}
.jp-services .sv-card.tilting{transition:transform .12s linear}
.jp-services .sv-card.w-5{grid-column:span 5}
.jp-services .sv-card.w-6{grid-column:span 6}
.jp-services .sv-card.w-7{grid-column:span 7}
.jp-services .sv-card.w-12{grid-column:1/-1}
.jp-services .sv-card.t-blue{background:var(--blue);color:var(--ink)}
.jp-services .sv-card.t-light{background:var(--light);color:var(--ink)}
.jp-services .sv-card.t-deep{background:#1a7bb3;color:#fff}
.jp-services .sv-card.t-dark{background:var(--ink2);color:#fff;border-color:#3a3d40}
.jp-services .sv-toy{position:absolute;right:26px;top:22px;width:clamp(130px,15vw,190px);aspect-ratio:1;transform:translateZ(70px);transform-style:preserve-3d}
.jp-services .sv-toy .ex{transition:transform 1s var(--spring)}
.jp-services .sv-card:hover .sv-toy .ex,.jp-services .sv-card:focus-within .sv-toy .ex{transform:rotateY(32deg) rotateX(-12deg) scale(1.1)}
.jp-services .sv-toy .bob{--a1:-18deg;--a2:18deg}
.jp-services .sv-card-title{color:inherit;max-width:12em;position:relative;transform:translateZ(30px)}
.jp-services .sv-card p{margin:12px 0 24px;max-width:30em;font-size:16px;transform:translateZ(20px)}
.jp-services .sv-card.t-blue p,.jp-services .sv-card.t-light p{color:#2b3238}
.jp-services .sv-card.t-deep p{color:#fff}
.jp-services .sv-card.t-dark p{color:#c9d3da}
.jp-services .sv-card .btn{align-self:flex-start;transform:translateZ(40px)}
.jp-services .sv-card .btn:hover{transform:translateZ(40px) translate(-3px,-3px) rotate(-1.5deg)}
.jp-services .sv-card .btn:active{transform:translateZ(40px) translate(4px,4px)}
.jp-services .sv-card.t-light .btn,.jp-services .sv-card.t-dark .btn{background:var(--blue)}
.jp-services .sv-card.t-deep .btn{background:var(--sun)}
.jp-services .sv-tag{display:inline-block;align-self:flex-start;font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px;border:2px solid currentColor;margin-bottom:16px;transform:translateZ(25px)}

@media (max-width:980px){
  .jp-services .sv-head{grid-template-columns:minmax(0,1fr)}
  .jp-services .sv-card[class*="w-"]{grid-column:1/-1;min-height:360px}
}
@media (max-width:560px){
  .jp-services .sv-card{padding:26px 22px;min-height:380px}
  .jp-services .sv-toy{width:120px;right:16px;top:16px}
}