/* =========================================================
   FYNIXIUM — ELECTRICIAN SAMPLE
   BrightSpark Electrical
   ========================================================= */

.electrician-page {
	--electrician-accent: #f5b942;
	--electrician-accent-soft: rgba(245, 185, 66, 0.12);
}


	/* Hero */

	.electrician-page .project-browser {
		background: radial-gradient( circle at 75% 25%, rgba(245, 185, 66, 0.16), transparent 35% ), #0b0e13;
	}

	.electrician-page .project-browser-copy > span {
		color: var(--electrician-accent);
	}

	.electrician-page .mock-button {
		background: var(--electrician-accent);
	}


	/* Project accent */

	.electrician-page .project-category {
		color: var(--electrician-accent);
	}

	.electrician-page .project-results-grid h3 {
		color: var(--color-text);
	}


/* Electrician browser */

.electrician-browser {
	position: relative;
}

	.electrician-browser::after {
		content: "24 / 7";
		position: absolute;
		right: 5rem;
		top: 5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100px;
		height: 100px;
		color: var(--electrician-accent);
		background: var(--electrician-accent-soft);
		border: 1px solid rgba(245, 185, 66, 0.25);
		border-radius: 50%;
		font-family: "Space Grotesk", sans-serif;
		font-size: 1.1rem;
		font-weight: 700;
	}


/* Service highlights */

.electrician-services {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 4rem;
}

.electrician-service {
	padding: 1.5rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 12px;
}

	.electrician-service span {
		display: block;
		margin-bottom: 0.75rem;
		color: var(--electrician-accent);
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.08em;
	}

	.electrician-service h3 {
		margin: 0;
		font-family: "Space Grotesk", sans-serif;
	}


/* Mobile */

@media (max-width: 700px) {

	.electrician-browser::after {
		width: 70px;
		height: 70px;
		right: 1.5rem;
		top: 4rem;
		font-size: 0.85rem;
	}

	.electrician-services {
		grid-template-columns: 1fr;
	}
}