/* ============ SERVICES ============ */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.75rem}
.svc-card{
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:2.25rem 2rem;transition:transform .4s cubic-bezier(.22,.8,.28,1),box-shadow .4s ease,background .4s ease, border-color .4s ease;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
}
.svc-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--tone-color, var(--blue));
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,.8,.28,1);
}
.svc-card:hover{
  transform:translateY(-10px);
  box-shadow:var(--shadow-lg);
  background:var(--paper);
  border-color:var(--tone-color, var(--blue));
}
.svc-card:hover::before{transform:scaleX(1)}
.svc-badge{
  width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  margin-bottom:1.5rem;transition:transform .4s ease, box-shadow .4s ease;
  position:relative;background:var(--tone-tint, var(--blue-tint));
  box-shadow:0 4px 16px -4px var(--tone-color, var(--blue));
}
.svc-badge::after{
  content:'';position:absolute;inset:-4px;border-radius:20px;background:var(--tone-tint, var(--blue-tint));
  opacity:0;transition:opacity .3s ease;z-index:-1;
}
.svc-card:hover .svc-badge{
  transform:scale(1.1) rotate(-3deg);
  box-shadow:0 8px 24px -6px var(--tone-color, var(--blue));
}
.svc-card:hover .svc-badge::after{opacity:1}
.svc-badge svg{width:28px;height:28px;color:var(--tone-color, var(--blue))}
.svc-card h3{font-size:1.15rem;font-weight:600;margin-bottom:.75rem;color:var(--ink);line-height:1.3}
.svc-card p{color:var(--slate);font-size:.92rem;line-height:1.6;margin-bottom:1.5rem;flex-grow:1}
.svc-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.25rem;padding-top:1rem;border-top:1px solid var(--line-soft);margin-top:auto}
.svc-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:var(--tone-color, var(--blue));white-space:nowrap;transition:gap .25s ease, color .25s ease}
.svc-link svg{width:18px;height:18px;flex-shrink:0;transition:transform .3s ease}
.svc-card:hover .svc-link{gap:.75rem}
.svc-card:hover .svc-link svg{transform:translateX(4px)}
.svc-readmore{
  appearance:none;background:var(--tone-tint, var(--blue-tint));border:none;border-radius:999px;flex-shrink:0;
  padding:.55rem 1.15rem;font-size:.82rem;font-weight:600;color:var(--tone-color, var(--blue));cursor:pointer;white-space:nowrap;
  transition:all .3s ease;box-shadow:0 2px 8px -2px var(--tone-color, var(--blue));
}
.svc-readmore:hover,.svc-readmore:focus-visible{
  background:var(--tone-color, var(--blue));
  color:var(--paper);
  transform:translateY(-2px);
  box-shadow:0 6px 20px -4px var(--tone-color, var(--blue));
}

/* ============ SERVICE DETAILS MODAL ============ */
.svc-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:2rem;visibility:hidden;opacity:0;transition:opacity .3s ease,visibility .3s ease}
.svc-modal.open{visibility:visible;opacity:1}
.svc-modal-backdrop{position:absolute;inset:0;background:rgba(16,26,51,.6);backdrop-filter:blur(4px)}
:root[data-theme="dark"] .svc-modal-backdrop{background:rgba(0,0,0,.7)}
.svc-modal-panel{
  position:relative;background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  max-width:900px;width:100%;max-height:85vh;overflow-y:auto;
  padding:3rem;transform:translateY(20px) scale(.96);
  transition:transform .35s cubic-bezier(.22,.8,.28,1);
}
.svc-modal.open .svc-modal-panel{transform:translateY(0) scale(1)}
.svc-modal-close{
  position:absolute;top:1.25rem;right:1.25rem;width:40px;height:40px;border-radius:50%;border:none;
  background:var(--card-alt);color:var(--slate);font-size:1.5rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease, transform .2s ease;
}
.svc-modal-close:hover{background:var(--line);color:var(--ink);transform:rotate(90deg)}
.svc-modal-header{display:flex;align-items:flex-start;gap:1.5rem;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line-soft)}
.svc-modal-badge{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--tone-tint, var(--blue-tint));box-shadow:0 4px 16px -4px var(--tone-color, var(--blue))}
.svc-modal-badge svg{width:30px;height:30px;color:var(--tone-color, var(--blue))}
.svc-modal-title-wrap{flex:1;min-width:0}
.svc-modal-panel h3{font-size:1.6rem;font-weight:700;margin-bottom:.5rem;color:var(--ink);line-height:1.25}
.svc-modal-meta{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;font-size:.85rem;color:var(--slate)}
.svc-modal-body{font-size:1rem;line-height:1.8;color:var(--slate)}
.svc-modal-body h4{font-size:1.15rem;font-weight:600;color:var(--ink);margin:2rem 0 1rem}
.svc-modal-body p{margin-bottom:1.25rem}
.svc-modal-body ul,.svc-modal-body ol{margin:1rem 0 1.5rem 1.5rem}
.svc-modal-body li{margin-bottom:.5rem;line-height:1.7}
.svc-modal-body a{color:var(--tone-color, var(--blue));font-weight:500;text-decoration:underline;text-underline-offset:2px}
.svc-modal-body blockquote{border-left:4px solid var(--tone-color, var(--blue));padding-left:1.5rem;margin:1.5rem 0;font-style:italic;color:var(--slate)}
.svc-modal-body code{background:var(--card-alt);padding:.15rem .4rem;border-radius:4px;font-size:.9em}
.svc-modal-body pre{background:var(--card-alt);border-radius:var(--radius-sm);padding:1.5rem;overflow-x:auto;margin:1.5rem 0}
.svc-modal-body pre code{background:none;padding:0;font-size:.9rem}
body.modal-open{overflow:hidden}