/* ═════════════════════════════════════════════════════════════════
   SECTION 8 — IMPLEMENTATION
   4-column phase cards + footer note.
   ═════════════════════════════════════════════════════════════════ */

.impl { background: var(--cream); position: relative; overflow: hidden; }
.impl::after {
	content: '';
	position: absolute;
	right: -10vw; bottom: -6vw;
	width: clamp(380px, 50vw, 760px);
	height: clamp(380px, 50vw, 760px);
	/* background: url(../../../img/object.png) center/contain no-repeat; */
	opacity: .10;
	pointer-events: none;
	z-index: 0;
	-webkit-mask-image: radial-gradient(ellipse 70% 70% at 60% 50%, black 25%, transparent 68%);
	mask-image:         radial-gradient(ellipse 70% 70% at 60% 50%, black 25%, transparent 68%);
}
.impl > * { position: relative; z-index: 1; }
.impl .impl-head .it-tail {
	/* padding-top: 25px; */
}

.impl-head { max-width: 100%; margin-bottom: clamp(48px, 6vw, 96px); }
.impl-head .display { text-transform: uppercase; }

/* ── Phase card grid ── */
.impl-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(24px, 2.6vw, 40px);
}
.impl-col {
	background: rgba(255, 255, 255, 0.60);
	border: 1px solid var(--rule);
	border-radius: 20px;
	padding: clamp(24px, 2.4vw, 30px);
	display: flex; flex-direction: column; gap: 1rem;
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.impl-col:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07); }
@media (prefers-reduced-motion: reduce) {
	.impl-col { transition: border-color 0.25s ease; }
	.impl-col:hover { transform: none; box-shadow: none; }
}

.impl-col-eyebrow {
	font-size: 22px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--green); 
	/* border-bottom: 1px solid var(--rule); */
}
.impl-col.final .impl-col-eyebrow { color: var(--orange); }

.impl-col h3 {
	font-size: clamp(22px, 2.9167vw, 42px);
	font-weight: 500;
	color: var(--ink);
	line-height: 1.05;
	letter-spacing: -.01em;
	white-space: pre-line;
}
.impl-col p { font-size: var(--fs-card-body); color: var(--ink-soft); line-height: 1.5; margin: 0; }

/* ── Footer note ── */
.impl-footer {
	margin-top: clamp(40px, 4vw, 64px);
	font-size: var(--fs-body);
	color: var(--ink);
	line-height: 1.6;
	/* background: #fff; */
	border: 1px solid #0B6623;
	border-radius: 20px;
	padding: clamp(24px, 2.5vw, 40px) clamp(28px, 3vw, 48px);
}

/* ── Responsive ── */
@media (max-width: 1024px) { .impl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
	.impl-grid { grid-template-columns: 1fr; }
	.impl-col-eyebrow { font-size: 14px; }
	.impl-col h3 { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px 0;}
	.impl-col p { font-size: 16px; }
	.impl-col {gap: 12px}
}