/* Why WES: statement + team photo, then four ruled points in a row (hairlines, no cards). */
.why { background: linear-gradient(180deg, var(--ink), var(--ink-2)); }
.why__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }

.why__title {
	margin-top: 18px; display: grid;
	font-size: clamp(2.4rem, 1.2rem + 3.4vw, 4.2rem); font-weight: 600; line-height: 1; letter-spacing: -.045em;
}
.why__soft { color: var(--paper-faint); font-weight: 400; }
.why__head .section__lede { max-width: 28rem; }
.why__call { display: inline-grid; gap: 2px; margin-top: 32px; padding-left: 16px; border-left: 2px solid var(--amber); }
.why__call-k { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-faint); }
.why__call-v { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; transition: color .25s; }
.why__call:hover .why__call-v, .why__call:focus-visible .why__call-v { color: var(--amber); }

.why__photo {
	position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 28px;
	background: var(--ink-3);
	box-shadow: 0 0 0 1px var(--line), 0 50px 90px -40px rgba(0, 0, 0, .9);
}
.why__photo img { width: 100%; height: 100%; object-fit: cover; }
.why__photo::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, transparent 55%, rgba(5, 7, 14, .55)), linear-gradient(135deg, rgba(59, 123, 255, .1), transparent 50%);
}

.why__grid {
	margin-top: var(--head-gap);
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--line);
}
.why__item { padding: 28px clamp(16px, 2vw, 28px) 4px; }
.why__item:first-child { padding-left: 0; }
.why__item + .why__item { border-left: 1px solid var(--line); }
.why__icon { display: inline-grid; color: var(--cyan); }
.why__item h3 { margin-top: 18px; font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }
.why__item p { margin-top: 8px; color: var(--paper-dim); font-size: 15px; }

@media (max-width: 1023px) {
	.why__grid { grid-template-columns: 1fr 1fr; }
	.why__item:nth-child(3) { padding-left: 0; border-left: 0; }
	.why__item:nth-child(n+3) { border-top: 1px solid var(--line); }
	.why__item { padding-bottom: 28px; }
}
@media (max-width: 899px) {
	.why__top { grid-template-columns: 1fr; }
	.why__photo { border-radius: 22px; }
}
@media (max-width: 559px) {
	.why__grid { grid-template-columns: 1fr; }
	.why__item, .why__item + .why__item { padding: 24px 0; border-left: 0; }
	.why__item + .why__item { border-top: 1px solid var(--line); }
}