/* 1.2.4.3-catpages (Seion 2026-10-19 1:09 AM): bigger category cards with service icons. Lucide icons (ISC). */
.rmg-dir{max-width:1200px}
.rmg-dir h1{font-size:clamp(30px,4vw,44px);margin:0 0 22px}
.rmg-dir-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.rmg-dir-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:170px;padding:26px 24px;border-width:2px;cursor:pointer;transition:box-shadow .2s,transform .2s,border-color .2s}
.rmg-dir-card:hover,.rmg-dir-card:focus-visible{transform:translateY(-3px);border-color:#0095d9}
.rmg-dir-icw{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,#0b5fc6,#0095d9);color:#fff;box-shadow:0 6px 14px rgba(11,95,198,.25)}
.rmg-dir-card:nth-child(3n+2) .rmg-dir-icw{background:linear-gradient(135deg,#fe4c1c,#ff8a1f)}
.rmg-dir-card:nth-child(3n) .rmg-dir-icw{background:linear-gradient(135deg,#082b62,#0b5fc6)}
.rmg-dir-ic{width:30px;height:30px}
.rmg-dir-card strong{font-size:21px;line-height:1.25;margin:4px 0 0;color:#082b62}
.rmg-dir-card small{font-size:15px}
@media(max-width:560px){.rmg-dir{padding:12px}.rmg-dir-grid{grid-template-columns:1fr;gap:14px}.rmg-dir-card{flex-direction:row;align-items:center;flex-wrap:wrap;min-height:0;padding:20px 18px;gap:6px 16px}.rmg-dir-card strong{font-size:19px;flex:1;margin:0}.rmg-dir-card small{flex-basis:100%;padding-left:74px;margin-top:-8px}}
@media (prefers-reduced-motion:reduce){.rmg-dir-card{transition:none}.rmg-dir-card:hover{transform:none}}
/* 1.2.4.3.1-catpages (Seion 2026-10-19 1:27 AM): service icons SPIN, not just pop. Same spin as the live services page (rs-spin: rotate 360deg, 1.1s cubic-bezier(.2,.8,.2,1)); load spin staggered, hover/tap/focus replays it. Own keyframe names, 2 aliases so hover can replay after the load spin. */
@keyframes rmgcp-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes rmgcp-spin2{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.rmg-dir-icw{animation:rmgcp-spin 1.1s cubic-bezier(.2,.8,.2,1) var(--rmgcp-d,0ms) both;will-change:transform}
.rmg-dir-card:nth-child(2) .rmg-dir-icw{--rmgcp-d:90ms}.rmg-dir-card:nth-child(3) .rmg-dir-icw{--rmgcp-d:180ms}.rmg-dir-card:nth-child(4) .rmg-dir-icw{--rmgcp-d:270ms}.rmg-dir-card:nth-child(5) .rmg-dir-icw{--rmgcp-d:360ms}.rmg-dir-card:nth-child(6) .rmg-dir-icw{--rmgcp-d:450ms}.rmg-dir-card:nth-child(7) .rmg-dir-icw{--rmgcp-d:540ms}.rmg-dir-card:nth-child(8) .rmg-dir-icw{--rmgcp-d:630ms}.rmg-dir-card:nth-child(9) .rmg-dir-icw{--rmgcp-d:720ms}.rmg-dir-card:nth-child(10) .rmg-dir-icw{--rmgcp-d:810ms}.rmg-dir-card:nth-child(11) .rmg-dir-icw{--rmgcp-d:900ms}.rmg-dir-card:nth-child(12) .rmg-dir-icw{--rmgcp-d:990ms}
.rmg-dir-card:hover .rmg-dir-icw,.rmg-dir-card:focus-visible .rmg-dir-icw,.rmg-dir-card:active .rmg-dir-icw{animation:rmgcp-spin2 1.1s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.rmg-dir-icw,.rmg-dir-card:hover .rmg-dir-icw,.rmg-dir-card:focus-visible .rmg-dir-icw,.rmg-dir-card:active .rmg-dir-icw{animation:none!important}}
/* 1.2.4.3.2-catpages (Seion 2026-10-19 1:34-1:35 AM): Web Design page only (class rmg-dir-grid--3x3 is only in partials/websites.html). 6 packages as 3 + 3, centered and even, no empty cells; bigger boxes so names spread out. Phones (<=560px) unchanged. */
@media(min-width:561px){.rmg-dir-grid.rmg-dir-grid--3x3{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0 auto}.rmg-dir-grid--3x3 .rmg-dir-card{min-height:220px;padding:32px 30px}}
@media(min-width:561px) and (max-width:900px){.rmg-dir-grid.rmg-dir-grid--3x3{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.rmg-dir-grid--3x3 .rmg-dir-card{padding:26px 24px}}