/* LASPNET Pillars: Vision / Mission / Goal / Mandate */
.lsp-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }

.lsp-pillar {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	background: #fcfafa; border: 1px solid var(--lsp-line, #ddd9da); border-radius: 24px;
	box-shadow: 0 2px 8px rgba(38, 9, 15, .05);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Gold-to-brand bar that sweeps across on hover */
.lsp-pillar::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 5px;
	background: linear-gradient(90deg, var(--lsp-gold, #f4b400), var(--lsp-brand, #8f1d2c));
	transform: scaleX(.18); transform-origin: left; transition: transform .35s ease;
}
.lsp-pillar:hover, .lsp-pillar:focus-within {
	transform: translateY(-5px); border-color: transparent; box-shadow: 0 18px 36px rgba(38, 9, 15, .16);
}
.lsp-pillar:hover::after, .lsp-pillar:focus-within::after { transform: scaleX(1); }

/* Deep-red header panel */
.lsp-pillar__head {
	position: relative; padding: 1.75rem 1.5rem 1.4rem;
	background: var(--lsp-brand-deep, #6b1521); border-bottom: 3px solid var(--lsp-gold, #f4b400); color: #fff;
}
.lsp-pillar__num {
	position: absolute; top: .9rem; right: 1.25rem;
	font-family: var(--lsp-font-display, Georgia, serif); font-size: 2.4rem; line-height: 1;
	color: #fff; opacity: .16;
}
.lsp-pillar__icon {
	display: grid; place-items: center; width: 3.75rem; height: 3.75rem; margin-bottom: 1.1rem;
	color: var(--lsp-gold, #f4b400); background: rgba(255, 255, 255, .08);
	border: 3px solid var(--lsp-gold, #f4b400); border-radius: 50%;
}
.lsp-pillar__title {
	margin: 0; font-family: var(--lsp-font-display, Georgia, serif); font-weight: 400;
	font-size: clamp(1.35rem, 1.9vw, 1.6rem); line-height: 1.2; color: #fff;
}

/* Body */
.lsp-pillar__text { flex: 1; padding: 1.5rem 1.5rem 1.9rem; font-size: .98rem; line-height: 1.65; color: var(--lsp-muted, #5f5859); }
.lsp-pillar__text > :first-child { margin-top: 0; }
.lsp-pillar__text p:last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
	.lsp-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.lsp-pillars { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
	.lsp-pillar, .lsp-pillar::after { transition: none; }
	.lsp-pillar:hover, .lsp-pillar:focus-within { transform: none; }
}