/* Consultancy page bits (hero art + small helpers) */

/* 2–3 column helpers to reuse your neumorphic look */
.svc-grid-3 {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1100px){ .svc-grid-3{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){  .svc-grid-3{ grid-template-columns: 1fr; } }

.timeline {
  counter-reset: step;
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: 10px;
}
.timeline li {
  background: var(--bg);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow:
    var(--offset) var(--offset) calc(var(--offset)*2) var(--shadow-dark),
    calc(var(--offset)*-1) calc(var(--offset)*-1) calc(var(--offset)*2) var(--shadow-light);
}
.timeline li::before{
  counter-increment: step;
  content: counter(step);
  display:inline-grid; place-items:center;
  width:24px; height:24px; margin-right:8px;
  border-radius:8px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  font-weight:700; color:#4b5870;
}

/* Hero right-side: “document stack” */
.doc-stack{
  position: relative;
  width: clamp(220px, 32vw, 360px);
  height: clamp(220px, 32vw, 360px);
  display: grid;
  place-items: center;
  filter: drop-shadow(0 20px 30px rgba(15,23,42,.12));
}
.doc-stack .sheet{
  position: absolute;
  width: 74%;
  height: 64%;
  border-radius: 18px;
  background: linear-gradient(145deg, #e9eef7, #cfd6e4);
  box-shadow:
    10px 10px 22px rgba(0,0,0,.06),
    -6px -6px 16px rgba(255,255,255,.85),
    inset 0 1px 0 rgba(255,255,255,.45);
  transform: rotateX(8deg) rotateZ(-4deg);
}
.doc-stack .s1 { transform: translate(-12px, -18px) rotateZ(-6deg); opacity: .75; }
.doc-stack .s2 { transform: translate(  8px,  -4px) rotateZ(-4deg); opacity: .9;  }
.doc-stack .s3 { transform: translate( 18px,  10px) rotateZ(-2deg); }

.doc-stack .tag{
  position: absolute;
  bottom: 20%;
  right: 14%;
  width: 54px; height: 54px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(145deg, #7dd3fc, #60a5fa);
  color: #083344; font-weight: 800; font-size: 20px;
  box-shadow:
    6px 6px 16px rgba(2,6,23,.12),
    -6px -6px 16px rgba(255,255,255,.9),
    inset 0 1px 0 rgba(255,255,255,.45);
}
