/* Background is a flat light band by default. The photo treatment below is
   commented out rather than deleted so it can be switched back on; re-enable it
   together with the light heading rules further down. */
.technicians-section {
	position: relative;
	background: var(--c-bg);
	/* background: url("../img/home/image1.jpg") center center / cover no-repeat; */
	padding: 85px 20px 100px;
	isolation: isolate;
}

/* .technicians-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: -1;
	pointer-events: none;
} */

/* Heading sits on the light band, so it uses the dark text tokens. Swap these
   for the commented light-text block below when the photo band is re-enabled. */
.technicians-section .section-heading h2,
.technicians-section .section-heading p {
	color: var(--c-text-heading) !important;
}

.technicians-section .section-heading .section-kicker {
	color: var(--c-primary-dark) !important;
}

.technicians-section .section-heading .section-kicker::before,
.technicians-section .section-heading .section-kicker::after {
	background: var(--c-primary);
}

/* Light heading treatment for the commented photo band above:
.technicians-section .section-heading h2,
.technicians-section .section-heading p {
	color: #ffffff !important;
	text-shadow: 0 3px 12px rgba(0, 0, 0, 0.55);
}

.technicians-section .section-heading .section-kicker {
	color: #ffffff !important;
	text-shadow: 0 3px 12px rgba(0, 0, 0, 0.55);
}

.technicians-section .section-heading .section-kicker::before,
.technicians-section .section-heading .section-kicker::after {
	background: #ffffff;
} */

/* Kicker size: this section was never added to the home.css font-size lists, so
   it fell back to the 11px uppercase base while every other section title runs
   at 32px. Mirrors the home.css values and breakpoints exactly so the section
   titles line up. */
.technicians-section .section-heading .section-kicker {
	font-size: 32px;
}

@media (max-width: 1199.98px) {
	.technicians-section .section-heading .section-kicker {
		font-size: 26px;
		letter-spacing: 0.8px;
	}
}

@media (max-width: 991.98px) {
	.technicians-section .section-heading .section-kicker {
		font-size: 22px;
		letter-spacing: 0.6px;
	}
}

@media (max-width: 575.98px) {
	.technicians-section .section-heading .section-kicker {
		font-size: 18px;
		letter-spacing: 0.4px;
		gap: 2px;
	}
}

.technician-slider .owl-stage-outer {
	padding: 6px 0;
	margin: -6px 0;
}

.technician-slider .owl-item {
	display: flex;
}

.technician-slider .technician-card {
	width: 100%;
	flex: 1 1 auto;
}

.technician-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: 0;
	padding: 0;
	/* Warm hairline instead of the cool --c-border-muted gray, so the card
	   edge reads against the warm section bands. The soft lift shadow keeps
	   the card off the band without a heavy outline. Tokens now live in
	   theme.css so news / article / stakeholder cards can share them. */
	border: 1px solid var(--c-border-warm);
	border-radius: 14px;
	background: var(--c-bg);
	box-shadow: var(--c-shadow-warm);
	overflow: hidden;
	transition:
		transform 0.25s ease,
		border-color 0.25s ease,
		box-shadow 0.25s ease;
}

.technician-card-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

.technician-card:hover {
	transform: translateY(-3px);
	border-color: var(--c-border-warm-hover);
	box-shadow: var(--c-shadow-warm-hover);
	z-index: 2;
}

.technician-card:focus-within {
	border-color: var(--c-border-warm-hover);
	box-shadow: var(--c-shadow-warm-hover);
}

.technician-avatar {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 300px;
	overflow: hidden;
	background: transparent;
	color: var(--primary);
	font-size: 64px;
	padding: 0;
}

/* No profile image: the bare placeholder icon fills the whole avatar box and
   carries the orange tint. When a photo is present the box stays transparent. */
.technician-avatar > i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--c-tint-17), var(--c-brand-12));
}

/* Images fill the whole avatar area; placeholders stay centred on the tint. */
.technician-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	max-width: none;
	max-height: none;
}

.technician-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 18px 18px 20px;
}

.technician-body h3 {
	margin: 0 0 6px;
	color: var(--c-text-strong);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.technician-designation,
.technician-institute {
	margin: 0;
	color: var(--c-text-muted);
	font-size: 13px;
	line-height: 1.5;
}

.technician-designation {
	color: var(--primary-dark);
	font-weight: 600;
	margin-bottom: 6px;
}

.technician-institute i {
	margin-right: 4px;
	color: var(--primary);
}

.technician-institute {
	margin-bottom: 14px;
}

.technician-card-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	flex-shrink: 0;
	gap: 8px;
	margin-top: auto;
	padding: 9px 18px;
	border: 1px solid rgba(238, 147, 16, 0.55);
	border-radius: 999px;
	background: var(--c-tint-21);
	color: var(--primary-dark);
	font-size: 13px;
	font-weight: 600;
	transition:
		background 0.25s ease,
		color 0.25s ease;
}

.technician-card:hover .technician-card-btn {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--c-bg);
}

@media (min-width: 992px) {
	.technician-slider .technician-card {
		height: 510px;
	}
	.technician-slider .technician-body {
		flex: 1;
		overflow: hidden;
	}
}

.instrument-slider .owl-dots,
.technician-slider .owl-dots {
	margin-top: 18px;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.instrument-slider .owl-dot span,
.technician-slider .owl-dot span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(17, 24, 39, 0.2);
	transition: all 0.25s ease;
}

.instrument-slider .owl-dot.active span,
.technician-slider .owl-dot.active span {
	width: 32px;
	border-radius: 999px;
	background: var(--primary);
}

@media (max-width: 575px) {
	.instrument-body {
		min-height: 190px;
	}
	.instrument-image {
		height: 200px;
	}
}

/* STATS */
.stats-section {
	position: relative;
	overflow: hidden;
	background: var(--c-bg);
	color: var(--c-text-strong);
}

#main-content > section.stats-section {
	min-height: auto;
}
.technicians-content {
	position: relative;
	z-index: 1;
}