/* Jompom More Services: light grid of tilted tiles; icon wiggles on hover. Pop-in comes from base (.pops). */
.jp-more{background:var(--light);color:var(--ink);padding:110px 0}
.jp-more .ms-head{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:end;margin-bottom:56px}
.jp-more .ms-head p{color:#3f4a52;font-size:17px;max-width:30em}
.jp-more .ms-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.jp-more .ms-tile{--r:0deg;position:relative;background:#fff;border:3px solid var(--ink);border-radius:24px;padding:26px;box-shadow:6px 6px 0 var(--ink);display:flex;flex-direction:column;gap:16px;transform:rotate(var(--r));transition:transform .6s var(--spring),box-shadow .35s}
.jp-more .ms-tile:nth-child(odd){--r:-.8deg}
.jp-more .ms-tile:nth-child(even){--r:.8deg}
.jp-more .ms-tile:hover,.jp-more .ms-tile:focus-within{transform:translate(-4px,-5px) rotate(calc(var(--r) * -2));box-shadow:10px 11px 0 var(--ink)}
.jp-more .ms-tile:hover .ic-box,.jp-more .ms-tile:focus-within .ic-box{animation:jp-wiggle .7s var(--out)}
.jp-more .ms-tile:nth-child(3n+2) .ic-box{background:var(--sun)}
.jp-more .ms-tile:nth-child(3n) .ic-box{background:var(--sky)}
.jp-more .ms-tile h3{font-size:24px}
.jp-more .ms-tile p{color:#3f4a52;font-size:15.5px}
/* optional link: the whole tile is the click target */
.jp-more .ms-link::after{content:"";position:absolute;inset:0;border-radius:21px}
.jp-more .ms-link:focus-visible{outline:none}
.jp-more .ms-link:focus-visible::after{outline:3px solid var(--sun);outline-offset:4px}

@media (max-width:980px){
  .jp-more .ms-head{grid-template-columns:minmax(0,1fr)}
  .jp-more .ms-tiles{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .jp-more .ms-tiles{grid-template-columns:minmax(0,1fr)}
}