.expertise-wrapper {
	width: 100%;
}

/* Header */
.expertise-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 80px;
	flex-wrap: wrap;
	gap: 20px;
}

.expertise-header-left {
	flex: 1;
}

.expertise-header-title {
	font-size: 48px;
	font-weight: 400;
	margin: 0;
	line-height: 1.1;
}

.expertise-header-right {
	text-align: right;
	max-width: 300px;
}

.expertise-header-subtitle {
	font-size: 14px;
	color: #666;
	margin-bottom: 5px;
}

.expertise-header-desc {
	font-size: 16px;
	color: #333;
	line-height: 1.4;
}

/* Grid */
.expertise-grid-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* No gap, borders handled manually for crosshair alignment */
}

.expertise-grid-item {
	position: relative;
	padding: 40px 20px;
	/* Border Logic: Only Right and Bottom borders usually, but Grid borders are tricky with crosshairs. */
	/* We'll use a top and left border on every item, and rely on negative margins or nth-child to remove outer ones? */
	/* Better: Use pseudo elements for borders inside the cell? */
	
	/* Simple approach matching image: borders seem to be between items. */
	border-top: 1px solid transparent; /* Placeholder */
	border-left: 1px solid transparent;
}

/* Specific Border Logic for Clean Grid */
/* Add top border to all items except first row */
/* Add left border to all items except first column */

.expertise-grid-container {
	/* Use gap for borders? No, gap prevents crosshair overlap easily. */
}

.expertise-grid-item {
	/* Internal borders */
	border-color: inherit; /* Set via control */
}

/* Crosshairs */
.expertise-crosshair {
	position: absolute;
	top: -7px; /* Half height of cross + 1px border adjust */
	left: -7px; /* Half width */
	width: 15px;
	height: 15px;
	z-index: 2;
	display: none; /* Hidden by default */
}

.expertise-crosshair::before {
	content: '';
	position: absolute;
	top: 7px;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #e0e0e0;
}

.expertise-crosshair::after {
	content: '';
	position: absolute;
	left: 7px;
	top: 0;
	height: 100%;
	width: 1px;
	background-color: #e0e0e0;
}

/* Borders logic to match image */
/* The image has internal grid lines. Outer boundary has no lines? */
/* Let's assume standard internal grid borders. */

.expertise-grid-item {
	border-right: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
}

/* Remove right border from last column */
.expertise-grid-container .expertise-grid-item:nth-child(3n) {
	border-right: none;
}

/* Remove bottom border from last row items */
/* CSS Grid doesn't easily select "last row" without knowing item count. */
/* We'll accept bottom borders on last row or use JS? Let's keep them open if possible or just use a wrapper border. */
/* The image shows dividers between items. */

/* Crosshair Logic: appear at intersection of borders */
/* We need a crosshair at the top-left of items that have both a top and left neighbor? */
/* Actually, the image shows crosshairs at intersections. */
/* Let's place a crosshair at the bottom-right of items, except last column/row? */
/* Simpler: Crosshair at top-left of every item except first col and first row. */

.expertise-grid-item:not(:nth-child(-n+3)) { /* Not first row (assuming 3 cols) */
	/* Add top border logic if not already there */
}

/* Let's simplify: Just styling based on the visual */
.expertise-number {
	font-size: 60px;
	font-weight: 300;
	margin-bottom: 10px;
	line-height: 1;
}

.expertise-label {
	font-size: 16px;
	color: #555;
	max-width: 80%;
}

/* Responsive */
@media (max-width: 767px) {
	.expertise-header {
		flex-direction: column;
	}
	.expertise-header-right {
		text-align: left;
		max-width: 100%;
	}
	
	.expertise-grid-container {
		grid-template-columns: 1fr !important;
	}
	
	.expertise-grid-item {
		border-right: none;
		border-bottom: 1px solid #e0e0e0;
	}
}