/* ============ GRAFFT WHY WIDGET ============ */
.grafft-why{
	background: var(--paper, #f4f1ec);
}
.grafft-why .why-grid{
	display: grid;
	grid-template-columns: 400px 1fr;
	gap: 60px;
	align-items: start;
}
.grafft-why .eyebrow{
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: monospace;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bronze-deep, #8a6d3b);
}
.grafft-why-eyebrow-line-yes .grafft-why .eyebrow::before{
	content: "";
	display: inline-block;
	width: 20px;
	height: 1px;
	background: currentColor;
}
.grafft-why .why-lead p{
	font-family: var(--serif, serif);
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 400;
	line-height: 1.35;
	color: var(--ink, #1a1a1a);
}
.grafft-why .why-body p{
	color: var(--ink, #1a1a1a);
}
.grafft-why .why-close{
	font-family: var(--serif, serif);
	font-style: italic;
	color: var(--bronze-deep, #8a6d3b);
}
.grafft-why .why-cta{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding: 15px 26px;
    font-family: var(--mono, 'IBM Plex Mono', monospace);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--white, #FFFDF9);
    background: var(--ink, #1C1B19);
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}
.grafft-why .why-cta:hover{
    background: var(--bronze-deep, #6E5A3E);
    transform: translateX(2px);
}



@media (max-width: 860px){
	.grafft-why .why-grid{
		grid-template-columns: 1fr !important;
		gap: 30px !important;
	}
}