/* =========================================================
   Adtora Base v0.8.0
   Service Detail Pages
   ========================================================= */

.service-hero {
	overflow: hidden;
	padding: 92px 0 86px;
	color: #fff;
	background:
		radial-gradient(circle at 82% 28%, rgba(53, 113, 184, .22), transparent 30%),
		linear-gradient(120deg, #06172a, #0b2543);
}

.service-hero--led {
	background:
		radial-gradient(circle at 80% 28%, rgba(46, 113, 255, .35), transparent 31%),
		linear-gradient(120deg, #051525, #0a2a50);
}

.service-hero--production {
	background:
		radial-gradient(circle at 80% 25%, rgba(215, 25, 32, .16), transparent 30%),
		linear-gradient(120deg, #06172a, #152131);
}

.service-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, .78fr);
	gap: clamp(56px, 8vw, 110px);
	align-items: center;
}

.service-hero__eyebrow,
.service-kicker {
	margin: 0 0 16px;
	font-size: .68rem;
	font-weight: 900;
	letter-spacing: .16em;
	color: #ff5d62;
}

.service-hero__title {
	margin: 0;
	font-size: clamp(2.7rem, 5.3vw, 5.2rem);
	line-height: 1.06;
	letter-spacing: -.045em;
}

.service-hero__lead {
	max-width: 690px;
	margin: 28px 0 0;
	font-size: 1rem;
	line-height: 1.95;
	color: rgba(255,255,255,.7);
}

.service-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 34px;
}

.button--outline-dark {
	color: #fff;
	border: 1px solid rgba(255,255,255,.25);
	background: transparent;
}

.service-hero__visual {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 420px;
	padding: 34px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 18px;
	background:
		linear-gradient(145deg, rgba(38, 85, 133, .8), rgba(6, 22, 39, .95));
	box-shadow: 0 30px 70px rgba(0,0,0,.27);
}

.service-hero__visual--led {
	background:
		linear-gradient(145deg, rgba(26, 81, 163, .86), rgba(6, 22, 39, .95));
}

.service-hero__visual--production {
	background:
		linear-gradient(145deg, rgba(82, 49, 53, .75), rgba(6, 22, 39, .96));
}

.service-hero__visual::before {
	content: "";
	position: absolute;
	top: 17%;
	left: 11%;
	width: 78%;
	height: 35%;
	border: 1px solid rgba(255,255,255,.12);
	transform: skewY(-10deg);
	box-shadow: 0 0 70px rgba(42, 106, 184, .2) inset;
}

.service-hero__visual i {
	position: absolute;
	right: -12%;
	bottom: -16%;
	width: 65%;
	height: 45%;
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 50%;
}

.service-hero__visual-label {
	position: relative;
	z-index: 2;
	margin-bottom: 8px;
	font-size: .64rem;
	font-weight: 900;
	letter-spacing: .16em;
	color: rgba(255,255,255,.48);
}

.service-hero__visual strong {
	position: relative;
	z-index: 2;
	font-size: clamp(2rem, 4vw, 3.7rem);
	line-height: 1;
	letter-spacing: -.04em;
}

.service-section {
	padding: 104px 0 114px;
	background: #fff;
}

.service-section--gray {
	background: #f4f6f8;
}

.service-section--dark {
	color: #fff;
	background: #071a2f;
}

.service-intro {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(360px, .75fr);
	gap: clamp(50px, 8vw, 110px);
	align-items: end;
}

.service-intro h2,
.service-heading h2 {
	margin: 0;
	font-size: clamp(2rem, 4.2vw, 3.8rem);
	line-height: 1.2;
	letter-spacing: -.04em;
	color: #071a2f;
}

.service-intro > div:last-child > p {
	margin: 0;
	font-size: .96rem;
	line-height: 1.95;
	color: #657181;
}

.service-heading {
	margin-bottom: 48px;
}

.service-heading--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, .7fr);
	gap: 70px;
	align-items: end;
}

.service-heading--split > p {
	margin: 0;
	line-height: 1.9;
	color: #657181;
}

.service-heading--light h2 {
	color: #fff;
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid #dce2e8;
	border-left: 1px solid #dce2e8;
}

.feature-grid article {
	min-height: 310px;
	padding: 28px;
	border-right: 1px solid #dce2e8;
	border-bottom: 1px solid #dce2e8;
	background: #fff;
}

.feature-grid article > span {
	font-size: .67rem;
	font-weight: 900;
	letter-spacing: .12em;
	color: #d71920;
}

.feature-grid h3 {
	margin: 90px 0 0;
	font-size: 1.2rem;
	color: #071a2f;
}

.feature-grid p {
	margin: 14px 0 0;
	font-size: .86rem;
	line-height: 1.85;
	color: #687484;
}

.feature-grid--dark {
	border-color: rgba(255,255,255,.14);
}

.feature-grid--dark article {
	border-color: rgba(255,255,255,.14);
	background: rgba(255,255,255,.035);
}

.feature-grid--dark h3 {
	color: #fff;
}

.feature-grid--dark p {
	color: rgba(255,255,255,.57);
}

.usecase-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid #dce2e8;
	border-left: 1px solid #dce2e8;
}

.usecase-grid > div {
	padding: 28px 30px;
	border-right: 1px solid #dce2e8;
	border-bottom: 1px solid #dce2e8;
}

.usecase-grid strong {
	display: block;
	font-size: 1.05rem;
	color: #071a2f;
}

.usecase-grid span {
	display: block;
	margin-top: 9px;
	font-size: .83rem;
	line-height: 1.7;
	color: #687484;
}

.process-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid #dce2e8;
	border-left: 1px solid #dce2e8;
}

.process-grid--four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.process-grid > div {
	min-height: 235px;
	padding: 27px;
	border-right: 1px solid #dce2e8;
	border-bottom: 1px solid #dce2e8;
}

.process-grid > div > span {
	font-size: .66rem;
	font-weight: 900;
	color: #d71920;
}

.process-grid strong {
	display: block;
	margin-top: 62px;
	font-size: 1.05rem;
	color: #071a2f;
}

.process-grid p {
	margin: 10px 0 0;
	font-size: .82rem;
	line-height: 1.8;
	color: #687484;
}

.service-cta {
	padding: 84px 0;
	color: #fff;
	background: #d71920;
}

.service-cta--blue {
	background:
		linear-gradient(120deg, #0c4f9a, #062a51);
}

.service-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 70px;
	align-items: end;
}

.service-cta h2 {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3.8rem);
	line-height: 1.2;
	letter-spacing: -.04em;
}

.service-cta .service-kicker {
	color: rgba(255,255,255,.65);
}

@media (max-width: 980px) {
	.service-hero__grid,
	.service-intro {
		grid-template-columns: 1fr;
	}

	.service-hero__visual {
		min-height: 320px;
	}

	.feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.process-grid,
	.process-grid--four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.service-cta__inner {
		grid-template-columns: 1fr;
		gap: 34px;
	}
}

@media (max-width: 640px) {
	.service-hero {
		padding: 68px 0 62px;
	}

	.service-section {
		padding: 78px 0 86px;
	}

	.service-heading--split {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.feature-grid,
	.usecase-grid,
	.process-grid,
	.process-grid--four {
		grid-template-columns: 1fr;
	}

	.feature-grid article {
		min-height: 250px;
	}

	.feature-grid h3 {
		margin-top: 56px;
	}

	.service-cta {
		padding: 68px 0;
	}
}