/* ==========================================================================
   What We Do section
   ========================================================================== */

.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.pillar {
  position: relative;
  overflow: hidden;
  padding: var(--space-lg) var(--space-md);
  text-align: left;
}

/* Same faint corner treatment as the Solutions cards (see solutions.css)
   — a whisper of the flowing line-art from Get In Touch, tucked in the
   top-right corner and fading into the card. Kept as its own rule here
   so this section stays fully independent. */
.pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/wave-lines-accent.svg");
  background-repeat: no-repeat;
  background-position: right -20px top -20px;
  background-size: 190px 190px;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(circle at 100% 0%, black 0%, black 20%, transparent 55%);
  mask-image: radial-gradient(circle at 100% 0%, black 0%, black 20%, transparent 55%);
  pointer-events: none;
  z-index: -1;
}

.pillar h3 {
  font-size: 1.05rem;
  color: var(--color-indigo-deep);
  margin-block: var(--space-md) var(--space-xs);
}

.pillar p {
  font-size: 0.94rem;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}