/* ── 4 PILLAR CARDS ── */
#pillars {
  display: flex;
  width: 100%;
  height: 85vh;
  min-height: 600px;
}

.pillar {
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: none;
}

.pillar-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55%;
  pointer-events: none;
}

.pillar-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 24px;
  z-index: 2;
}

.pillar-counter {
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
  opacity: 0.5;
}

.pillar-title {
  font-family: 'Barlow', sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 2.2vw, 26px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  line-height: 0.95;
}

.pillar-services {
  list-style: none;
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.8;
}

/* Card colours */
.pillar.p1 { background: var(--black); }
.pillar.p1 .pillar-counter,
.pillar.p1 .pillar-title,
.pillar.p1 .pillar-services { color: #fff; }
.pillar.p1 .pillar-services { opacity: 0.65; }

.pillar.p2 { background: var(--teal); }
.pillar.p2 .pillar-counter,
.pillar.p2 .pillar-title,
.pillar.p2 .pillar-services { color: #0d2e2e; }

.pillar.p3 { background: var(--orange); }
.pillar.p3 .pillar-counter,
.pillar.p3 .pillar-title,
.pillar.p3 .pillar-services { color: #3a1000; }

.pillar.p4 { background: var(--grey-c); }
.pillar.p4 .pillar-counter,
.pillar.p4 .pillar-title,
.pillar.p4 .pillar-services { color: var(--text-dk); }