/* 40-pillars. Figma Section/Brain-scroll 35:1426 (>=1024) and Section/Pillar cards 33:475 (<1024). */
.kd-home .kd-home-pillars {
	background: var(--kdh-cloud);
	padding-block: var(--kdh-s-64);
	scroll-margin-top: 80px;
}
.kd-home .kd-home-pillars__header { display: flex; flex-direction: column; gap: var(--kdh-s-12); padding-bottom: var(--kdh-s-32); }
.kd-home .kd-home-pillars__heading { font-size: var(--kdh-fs-h2); line-height: var(--kdh-lh-h2); letter-spacing: -0.01em; }
.kd-home .kd-home-pillars__intro { max-width: 760px; }

/* Illustration: disc + line art, positioned in % of a 145.455 x 160 box (Figma Illustration/Pillar) */
.kd-home .kd-home-pillars__ill { position: relative; width: 145.455px; max-width: 100%; aspect-ratio: 145.455 / 160; flex: none; }
.kd-home .kd-home-pillars__ill img { position: absolute; display: block; max-width: none; height: auto; }
.kd-home .kd-home-pillars__disc { left: 0; top: 27.27%; width: 75%; height: 68.18%; }
.kd-home .kd-home-pillars__art { top: 4.54%; height: 90.91%; }
.kd-home .kd-home-pillars__ill--strategy .kd-home-pillars__art { left: 9.93%; width: 70.15%; }
.kd-home .kd-home-pillars__ill--creative .kd-home-pillars__art { left: 20.71%; width: 68.57%; }
.kd-home .kd-home-pillars__ill--people .kd-home-pillars__disc { left: 5%; }
.kd-home .kd-home-pillars__ill--people .kd-home-pillars__art { left: 15.55%; width: 68.9%; }
.kd-home .kd-home-pillars__ill img { width: auto; }
.kd-home .kd-home-pillars__ill .kd-home-pillars__disc { height: 68.18%; }

/* Panels = cards on phone/tablet */
.kd-home .kd-home-pillars__layout { display: block; }
.kd-home .kd-home-pillars__sticky { display: none; }
.kd-home .kd-home-pillars__panels { display: flex; flex-direction: column; gap: var(--kdh-s-24); }
.kd-home .kd-home-pillars__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--kdh-s-16);
	padding: var(--kdh-s-32);
	background: var(--kdh-white);
	border-radius: var(--kdh-r-card);
	box-shadow: 0 1px 4px rgba(28, 33, 97, .08);
	transition: transform .2s ease, box-shadow .2s ease;
}
.kd-home .kd-home-pillars__eyebrow { display: none; }
.kd-home .kd-home-pillars__title {
	font-size: 2rem;
	line-height: 38px;
	letter-spacing: 0;
}
.kd-home .kd-home-pillars__body { font-size: 1.125rem; line-height: 29px; color: var(--kdh-ink); }
.kd-home .kd-home-pillars__link { margin: 0; }
.kd-home .kd-home-pillars__panel .kd-home-pillars__link a {
	display: inline-flex;
	align-items: center;
	gap: var(--kdh-s-8);
	min-height: 48px;
	padding-block: var(--kdh-s-12);
	font-family: var(--kdh-font-head);
	font-size: var(--kdh-fs-button);
	font-weight: 600;
	line-height: 16px;
	letter-spacing: var(--kdh-ls-button);
	text-transform: uppercase;
	color: var(--kdh-blue-ink);
	text-decoration: none;
}
.kd-home .kd-home-pillars__panel .kd-home-pillars__link a:hover { color: var(--kdh-blue-ink-hover); }
.kd-home .kd-home-pillars__arrow {
	flex: none; width: 20px; height: 20px; background-color: currentColor;
	-webkit-mask: var(--kdh-arrow) center / contain no-repeat; mask: var(--kdh-arrow) center / contain no-repeat;
	transition: transform .15s ease;
}
.kd-home .kd-home-pillars__panel .kd-home-pillars__link a:hover .kd-home-pillars__arrow { transform: translateX(3px); }
/* whole card is the link */
.kd-home .kd-home-pillars__panel .kd-home-pillars__link a::before { content: ""; position: absolute; inset: 0; border-radius: var(--kdh-r-card); }
.kd-home .kd-home-pillars__panel .kd-home-pillars__link a:focus-visible { outline: none; }
.kd-home .kd-home-pillars__panel .kd-home-pillars__link a:focus-visible::before { outline: 2px solid var(--kdh-navy); outline-offset: 3px; }
@media (hover: hover) {
	.kd-home .kd-home-pillars__panel:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(28, 33, 97, .14); }
}

@media (min-width: 768px) {
	.kd-home .kd-home-pillars { padding-block: var(--kdh-s-96); }
	.kd-home .kd-home-pillars__header { padding-bottom: var(--kdh-s-64); }
}

/* ---------- Desktop: sticky brain + scrolling panels ---------- */
@media (min-width: 1024px) {
	.kd-home .kd-home-pillars { background: var(--kdh-white); }
	/* visually hidden section heading (one H2 for the outline) */
	.kd-home .kd-home-pillars__header {
		position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
		clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}
	.kd-home .kd-home-pillars__layout {
		display: grid;
		grid-template-columns: 620fr 604fr;
		gap: clamp(40px, 6.667vw, 96px);
		align-items: start;
	}
	.kd-home .kd-home-pillars__sticky {
		display: block;
		position: sticky;
		top: max(152px, calc((100vh - 560px) / 2));
		height: 560px;
		border-radius: var(--kdh-r-card);
		overflow: clip;
	}
	.kd-home .kd-home-pillars__sticky .kd-home-pillars__ill {
		position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
		width: min(327.273px, 56%); max-width: none;
		height: auto;
		opacity: 0; transition: opacity .35s ease;
	}
	.kd-home .kd-home-pillars__sticky .kd-home-pillars__ill--strategy { opacity: 1; }
	.kd-home .kd-home-pillars:not(.is-enhanced) .kd-home-pillars__sticky .kd-home-pillars__ill:not(.kd-home-pillars__ill--strategy) { display: none; }
	.kd-home .kd-home-pillars[data-active="creative"] .kd-home-pillars__sticky .kd-home-pillars__ill { opacity: 0; }
	.kd-home .kd-home-pillars[data-active="people"] .kd-home-pillars__sticky .kd-home-pillars__ill { opacity: 0; }
	.kd-home .kd-home-pillars[data-active="creative"] .kd-home-pillars__sticky .kd-home-pillars__ill--creative,
	.kd-home .kd-home-pillars[data-active="people"] .kd-home-pillars__sticky .kd-home-pillars__ill--people { opacity: 1; }

	.kd-home .kd-home-pillars__panels { gap: 0; }
	.kd-home .kd-home-pillars__panel {
		min-height: max(340px, 46vh); /* Alain 2026-10-19: 64vh made the scroll between pillars too long */
		justify-content: center;
		gap: var(--kdh-s-12);
		padding: 0;
		background: transparent;
		border-radius: 0;
		box-shadow: none;
		/* accent bar column: ::before spans the 4 visible rows (eyebrow, title, body, link) */
		display: grid;
		grid-template-columns: 4px minmax(0, 1fr);
		grid-template-rows: repeat(4, auto);
		align-content: center;
		align-items: stretch; /* the card rule's flex-start would collapse the bar to 0 */
		justify-items: start;
		column-gap: var(--kdh-s-32);
		row-gap: var(--kdh-s-12);
	}
	.kd-home .kd-home-pillars__panel > * { grid-column: 2; }
	.kd-home .kd-home-pillars__panel::before {
		content: "";
		grid-column: 1;
		grid-row: 1 / -1;
		justify-self: stretch; /* justify-items: start would shrink the empty bar to 0 */
		border-radius: var(--kdh-r-pill);
		background: var(--kdh-border);
		transition: background-color .35s ease;
	}
	.kd-home .kd-home-pillars__panel :is(.kd-home-pillars__eyebrow, .kd-home-pillars__title, .kd-home-pillars__body, .kd-home-pillars__link a) {
		transition: color .35s ease;
	}
	.kd-home .kd-home-pillars__panel:hover { transform: none; box-shadow: none; }
	.kd-home .kd-home-pillars__card-ill { display: none; }
	.kd-home .kd-home-pillars__eyebrow { display: block; font-weight: 500; }
	.kd-home .kd-home-pillars__title { font-size: var(--kdh-fs-h1); line-height: 1.1; letter-spacing: -0.015em; }
	.kd-home .kd-home-pillars__panel .kd-home-pillars__link a { padding-block: var(--kdh-s-12); }
	.kd-home .kd-home-pillars__panel .kd-home-pillars__link a::before { display: none; }
	.kd-home .kd-home-pillars__panel .kd-home-pillars__link a:focus-visible { outline: 2px solid var(--kdh-navy); outline-offset: 4px; border-radius: var(--kdh-r-sm); }
	/* scroll-linked state (JS adds .is-enhanced; without JS every panel stays full opacity) */
	/* Inactive panels go stone grey (4.8:1 on white, still AA); the active one keeps its colours
	   and lights its bar in the pillar's colour. Without JS every bar shows its colour. */
	.kd-home .kd-home-pillars__panel--strategy::before { background: var(--kdh-green); }
	.kd-home .kd-home-pillars__panel--creative::before { background: var(--kdh-yellow); }
	.kd-home .kd-home-pillars__panel--people::before { background: var(--kdh-blue); }
	.kd-home .kd-home-pillars.is-enhanced .kd-home-pillars__panel:not(.is-active):not(:focus-within)::before { background: var(--kdh-border); }
	.kd-home .kd-home-pillars.is-enhanced .kd-home-pillars__panel:not(.is-active):not(:focus-within) :is(.kd-home-pillars__eyebrow, .kd-home-pillars__title, .kd-home-pillars__body, .kd-home-pillars__link a) {
		color: var(--kdh-stone);
	}
}
@media (prefers-reduced-motion: reduce) {
	.kd-home .kd-home-pillars__sticky .kd-home-pillars__ill,
	.kd-home .kd-home-pillars__panel::before,
	.kd-home .kd-home-pillars__panel :is(.kd-home-pillars__eyebrow, .kd-home-pillars__title, .kd-home-pillars__body, .kd-home-pillars__link a) { transition: none; }
}