/* ============================================================
   PRINCE ALEX DIGITAL — SERVICES PAGE  (services.css)
   Relies on /assets/css/pad.css for the design system.
   ============================================================ */

/* ---------- SERVICE CARDS ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.svc-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:30px 28px;display:flex;flex-direction:column;
  opacity:0;transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-card.is-visible{opacity:1;transform:translateY(0);}
.svc-card:hover{box-shadow:var(--shadow-md);border-color:var(--line-strong);transform:translateY(-4px);}
.svc-card.is-visible:hover{transform:translateY(-4px);}
.svc-card h3{margin-bottom:10px;font-size:1.15rem;}
.svc-card > p{font-size:0.95rem;}
.svc-card ul{margin:16px 0 8px;display:grid;gap:8px;}
.svc-card ul li{font-size:0.9rem;color:var(--muted);display:flex;align-items:center;gap:8px;}
.svc-card ul li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--teal);flex:none;}
.svc-card .do-link{margin-top:auto;padding-top:16px;}
.svc-cta-card{
  background:linear-gradient(150deg, var(--navy) 0%, var(--royal) 100%);
  border-color:transparent;color:#fff;
}
.svc-cta-card h3,.svc-cta-card p{color:#fff;}
.svc-cta-card .eyebrow{color:var(--teal-bright);}
.svc-cta-card .eyebrow::before{background:var(--teal-bright);}
.svc-cta-card .do-link{color:#fff;}
.svc-cta-card:hover{border-color:var(--royal);}
@media (max-width:880px){.svc-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.svc-grid{grid-template-columns:1fr;}}

/* ---------- AUTOMATION SHOWCASE ---------- */
.automation-showcase{
  margin-top:44px;display:flex;flex-direction:column;gap:10px;align-items:center;max-width:560px;
}
.automation-showcase .fl-row{width:100%;max-width:520px;}

/* ---------- JUMP NAV ---------- */
.page-hero .jump-nav a{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.25);color:#E2E8F0;}
.page-hero .jump-nav a:hover{background:rgba(255,255,255,0.14);border-color:var(--teal-bright);color:#fff;}