/**
 * Single service page — uses :root theme tokens from style.css only.
 * Opacity via color-mix(); no ad-hoc hex.
 */

.service-detail-page {
	overflow-x: hidden;
	background: var(--bg-light);
}

.section-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--spacing-lg);
}

/* ----- Hero ----- */
.service-hero {
	position: relative;
	min-height: clamp(500px, 85vh, 960px);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	color: var(--text-light);
	isolation: isolate;
	background: linear-gradient(
		160deg,
		var(--bg-dark) 0%,
		var(--primary-dark) 38%,
		color-mix(in srgb, var(--primary-color) 55%, var(--bg-dark)) 72%,
		var(--bg-dark) 100%
	);
}

/* Slow shifting purple haze (theme colors only) */
.service-hero__aurora {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0.55;
	background:
		linear-gradient(
			125deg,
			color-mix(in srgb, var(--primary-light) 35%, transparent) 0%,
			transparent 40%,
			color-mix(in srgb, var(--primary-color) 25%, transparent) 100%
		);
	animation: service-hero-aurora 14s ease-in-out infinite alternate;
}

@keyframes service-hero-aurora {
	0% {
		opacity: 0.4;
		transform: scale(1) translate(0, 0);
	}
	100% {
		opacity: 0.65;
		transform: scale(1.05) translate(-2%, 1%);
	}
}

.service-hero__orbs {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	overflow: hidden;
}

.service-hero__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(72px);
	mix-blend-mode: screen;
}

.service-hero__orb--a {
	width: min(55vw, 480px);
	height: min(55vw, 480px);
	top: -8%;
	left: -5%;
	background: color-mix(in srgb, var(--primary-light) 55%, transparent);
	animation: service-hero-float-a 18s ease-in-out infinite;
}

.service-hero__orb--b {
	width: min(45vw, 380px);
	height: min(45vw, 380px);
	bottom: 5%;
	right: -3%;
	background: color-mix(in srgb, var(--primary-color) 50%, transparent);
	animation: service-hero-float-b 22s ease-in-out infinite;
}

.service-hero__orb--c {
	width: min(35vw, 280px);
	height: min(35vw, 280px);
	top: 40%;
	right: 12%;
	background: color-mix(in srgb, var(--bg-light) 25%, transparent);
	filter: blur(56px);
	opacity: 0.7;
	animation: service-hero-float-c 20s ease-in-out infinite;
}

@keyframes service-hero-float-a {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	50% {
		transform: translate(4%, 6%) scale(1.08);
	}
}

@keyframes service-hero-float-b {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	50% {
		transform: translate(-5%, -4%) scale(1.05);
	}
}

@keyframes service-hero-float-c {
	0%,
	100% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(3%, -5%);
	}
}

.service-hero__vignette {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background: radial-gradient(
		ellipse 90% 70% at 30% 45%,
		transparent 0%,
		color-mix(in srgb, var(--text-primary) 58%, transparent) 100%
	);
}

.service-hero__scanlines {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	opacity: 0.1;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		color-mix(in srgb, var(--text-primary) 32%, transparent) 2px,
		color-mix(in srgb, var(--text-primary) 32%, transparent) 4px
	);
	mix-blend-mode: multiply;
}

.service-hero__grid-fx {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	opacity: 0.08;
	background-image:
		linear-gradient(
			color-mix(in srgb, var(--primary-light) 45%, transparent) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			color-mix(in srgb, var(--primary-color) 40%, transparent) 1px,
			transparent 1px
		);
	background-size: 40px 40px;
	mask-image: radial-gradient(
		ellipse 85% 75% at 28% 42%,
		var(--text-primary) 15%,
		transparent 70%
	);
}

.service-hero__background {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.service-hero__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.4) saturate(1.12) contrast(1.08);
	border-radius: 5px;
}

/* .service-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		color-mix(in srgb, var(--bg-dark) 92%, transparent) 0%,
		color-mix(in srgb, var(--primary-dark) 52%, transparent) 48%,
		color-mix(in srgb, var(--bg-dark) 78%, transparent) 100%
	);
	z-index: 1;
} */

.service-hero__inner {
	position: relative;
	z-index: 5;
	width: 100%;
	padding-top: calc(var(--spacing-xl) + 1.25rem);
	padding-bottom: var(--spacing-xl);
	/* padding-left: clamp(0.75rem, 3vw, 1.75rem); */
	padding-right: var(--spacing-lg);
}

/* Decorative frame corners (theme palette) */
.service-hero__frame {
	position: absolute;
	inset: clamp(0.75rem, 4vw, 2rem);
	z-index: 0;
	pointer-events: none;
	border: 2px solid color-mix(in srgb, var(--primary-light) 55%, transparent);
	border-radius: var(--radius-md);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--secondary-light) 25%, transparent),
		inset 0 0 60px color-mix(in srgb, var(--primary-color) 18%, transparent);
	opacity: 0.85;
}

.service-hero__content {
	    /* position: relative; */
    /* z-index: 1; */
    max-width: min(46rem, 100%);
    text-align: center;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) clamp(1rem, 2.5vw, 1.75rem);
    /* border-left: 5px solid var(--primary-color); */
    background: 
color-mix(in srgb, var(--bg-dark) 42%, transparent);
    box-shadow: -16px 0 48px 
color-mix(in srgb, var(--primary-color) 22%, transparent), inset 0 1px 0 
color-mix(in srgb, var(--text-light) 8%, transparent);
    border-radius: var(--radius-md);
    backdrop-filter: blur(10px);
    place-self: center;
}

.service-hero__tag {
	font-family: "Press Start 2P", cursive;
	font-size: clamp(0.52rem, 1.2vw, 0.68rem);
	line-height: 1.85;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bg-light);
	margin-bottom: var(--spacing-md);
	text-shadow:
		0 0 14px color-mix(in srgb, var(--bg-light) 45%, transparent),
		2px 2px 0 color-mix(in srgb, var(--text-primary) 85%, transparent);
}

.service-hero__title {
	font-family: inherit;
	font-size: clamp(2rem, 5vw, 3.45rem);
	font-weight: 900;
	line-height: 1.1;
	margin-bottom: var(--spacing-lg);
	max-width: 22ch;
	padding-bottom: 2px;
}

.service-hero__title-text {
	display: inline;
	color: var(--text-light);
	filter: drop-shadow(
		0 4px 24px color-mix(in srgb, var(--primary-dark) 65%, transparent)
	);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.service-hero__title-text {
		background: linear-gradient(
			118deg,
			var(--text-light) 0%,
			var(--secondary-light) 45%,
			var(--text-light) 90%
		);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
}

.service-hero__intro {
	max-width: 42rem;
	font-size: clamp(1rem, 1.35vw, 1.12rem);
	line-height: 1.78;
	color: color-mix(in srgb, var(--text-light) 92%, transparent);
	margin-bottom: var(--spacing-xl);
	padding: var(--spacing-md) var(--spacing-lg);
	background: color-mix(in srgb, var(--bg-dark) 55%, transparent);
	border: 1px solid color-mix(in srgb, var(--primary-light) 45%, transparent);
	border-radius: var(--radius-sm);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--text-light) 6%, transparent),
		0 12px 36px color-mix(in srgb, var(--text-primary) 45%, transparent);
}

.service-hero__intro p {
	color: inherit;
	margin-bottom: var(--spacing-md);
}

.service-hero__intro p:last-child {
	margin-bottom: 0;
}

.service-hero__cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-self: center;
	gap: var(--spacing-md);
}

.service-hero__cta {
	align-self: flex-start;
}

.service-hero__cta-hint {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--secondary-light);
	opacity: 0.95;
}

/* Section titles */
.service-detail-page .section-header {
	text-align: center;
	margin-bottom: clamp(2rem, 5vw, 3rem);
}

.service-detail-page .section-title.service-section-title {
	display: inline-block;
	font-size: clamp(1.75rem, 3.5vw, 2.6rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	color: var(--primary-color);
	margin-bottom: 0;
}

.service-detail-page .service-stats .section-title.service-section-title,
.service-detail-page .service-faq .section-title.service-section-title,
.service-detail-page .service-section-title--on-dark {
	/* color: var(--text-light); */
	text-shadow: 0 2px 20px color-mix(in srgb, var(--primary-light) 55%, transparent);
}

.service-detail-page .section-title.service-section-title::before,
.service-detail-page .section-title.service-section-title::after {
	background: linear-gradient(
		90deg,
		var(--primary-color),
		var(--bg-light),
		var(--primary-light)
	);
}

.service-detail-page .service-stats .section-title.service-section-title::before,
.service-detail-page .service-stats .section-title.service-section-title::after,
.service-detail-page .service-faq .section-title.service-section-title::before,
.service-detail-page .service-faq .section-title.service-section-title::after {
	background: linear-gradient(
		90deg,
		var(--primary-light),
		var(--bg-light),
		var(--primary-color)
	);
}

/* Studio */
.service-studio {
	position: relative;
	background: linear-gradient(
		180deg,
		var(--text-light) 0%,
		color-mix(in srgb, var(--secondary-light) 35%, var(--bg-light)) 100%
	);
}

.service-studio::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: repeating-linear-gradient(
		90deg,
		var(--primary-color) 0 12px,
		var(--bg-light) 12px 24px
	);
	opacity: 0.9;
}

.service-studio__panel {
	position: relative;
	max-width: 920px;
	margin: 0 auto;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	background: var(--bg-light);
	border: 4px solid var(--bg-dark);
	box-shadow:
		6px 6px 0 var(--primary-dark),
		0 0 0 2px var(--secondary-light),
		inset 0 0 0 2px color-mix(in srgb, var(--text-light) 88%, transparent);
}

.service-studio__panel::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 2px dashed color-mix(in srgb, var(--primary-color) 28%, transparent);
	pointer-events: none;
	border-radius: var(--radius-sm);
}

.service-studio__content {
	position: relative;
	text-align: center;
	font-size: 1.06rem;
	line-height: 1.82;
	z-index: 1;
}

.service-studio__content p {
	margin-bottom: var(--spacing-md);
	color: var(--text-gray);
}

.service-studio__content p:last-child {
	margin-bottom: 0;
}

/* Segments */
.service-segments {
	position: relative;
	background:
		radial-gradient(
			ellipse 120% 80% at 50% 0%,
			color-mix(in srgb, var(--primary-color) 10%, transparent) 0%,
			transparent 55%
		),
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--secondary-light) 22%, var(--bg-light)) 0%,
			color-mix(in srgb, var(--secondary-color) 12%, var(--bg-light)) 100%
		);
}

.service-segments::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120px;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--bg-dark) 6%, transparent),
		transparent
	);
	pointer-events: none;
}

.service-segments__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-lg);
}

@media (min-width: 768px) {
	.service-segments__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--spacing-xl);
		align-items: start;
	}

	.service-segments__grid .service-segments__card:nth-child(even) {
		margin-top: 3.75rem;
	}
}

.service-segments__card {
	position: relative;
	background: linear-gradient(
		165deg,
		var(--bg-card) 0%,
		color-mix(in srgb, var(--bg-dark) 92%, var(--primary-dark)) 55%,
		var(--bg-dark) 100%
	);
	border-radius: var(--radius-sm);
	padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-xl) calc(var(--spacing-lg) + 6px);
	box-shadow:
		0 0 0 2px color-mix(in srgb, var(--primary-light) 55%, transparent),
		0 0 32px color-mix(in srgb, var(--primary-color) 22%, transparent),
		inset 0 1px 0 color-mix(in srgb, var(--text-light) 6%, transparent),
		8px 8px 0 color-mix(in srgb, var(--text-primary) 35%, transparent);
	transition: transform var(--transition-normal), box-shadow var(--transition-normal);
	overflow: hidden;
}

.service-segments__card::before {
	content: attr(data-stage);
	font-family: "Press Start 2P", cursive;
	font-size: 0.58rem;
	letter-spacing: 0.06em;
	color: color-mix(in srgb, var(--bg-light) 65%, transparent);
	position: absolute;
	top: var(--spacing-md);
	right: var(--spacing-md);
	opacity: 0.95;
}

.service-segments__card::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	background: linear-gradient(
		180deg,
		var(--bg-light),
		var(--primary-light)
	);
	box-shadow: 0 0 16px color-mix(in srgb, var(--primary-light) 60%, transparent);
}

.service-segments__card:hover {
	transform: translate(-3px, -3px);
	box-shadow:
		0 0 0 2px color-mix(in srgb, var(--bg-light) 55%, transparent),
		0 0 48px color-mix(in srgb, var(--primary-color) 35%, transparent),
		inset 0 1px 0 color-mix(in srgb, var(--text-light) 8%, transparent),
		11px 11px 0 color-mix(in srgb, var(--text-primary) 40%, transparent);
}

.service-segments__card-title {
	color: var(--text-light);
	font-size: 1.22rem;
	margin-bottom: var(--spacing-md);
	font-weight: 800;
	padding-right: 3rem;
	line-height: 1.35;
	text-shadow: 0 2px 8px color-mix(in srgb, var(--text-primary) 50%, transparent);
}

.service-segments__card-text {
	color: color-mix(in srgb, var(--text-light) 84%, transparent);
	font-size: 0.98rem;
	line-height: 1.68;
}

.service-segments__card-text p {
	margin-bottom: var(--spacing-sm);
	color: inherit;
}

/* Tools */
.service-tools {
	position: relative;
	background: linear-gradient(
		180deg,
		var(--text-light) 0%,
		color-mix(in srgb, var(--secondary-light) 18%, var(--bg-light)) 100%
	);
}

.service-tools__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: clamp(1rem, 3vw, 1.75rem);
	list-style: none;
	padding: 0;
	margin: 0;
}

.service-tools__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-md);
	min-width: 132px;
	max-width: 160px;
	padding: var(--spacing-lg) var(--spacing-md);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--bg-card) 95%, var(--secondary-dark)) 0%,
		color-mix(in srgb, var(--bg-dark) 85%, var(--bg-card)) 100%
	);
	border: 3px solid var(--bg-dark);
	border-radius: var(--radius-sm);
	box-shadow:
		4px 4px 0 var(--primary-dark),
		inset 0 0 0 1px color-mix(in srgb, var(--text-light) 6%, transparent);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.service-tools__item:hover {
	transform: translate(-2px, -2px);
	box-shadow:
		6px 6px 0 var(--primary-color),
		inset 0 0 28px color-mix(in srgb, var(--primary-light) 15%, transparent);
}

.service-tools__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: var(--radius-sm);
	background:
		radial-gradient(
			circle at 30% 25%,
			color-mix(in srgb, var(--text-light) 12%, transparent),
			transparent 55%
		),
		linear-gradient(
			145deg,
			color-mix(in srgb, var(--bg-dark) 90%, var(--bg-card)) 0%,
			var(--bg-dark) 100%
		);
	border: 2px solid color-mix(in srgb, var(--primary-light) 45%, transparent);
	box-shadow: inset 0 2px 8px color-mix(in srgb, var(--text-primary) 45%, transparent);
}

.service-tools__icon {
	object-fit: contain;
	max-width: 44px;
	max-height: 44px;
	filter: drop-shadow(
		0 2px 4px color-mix(in srgb, var(--text-primary) 40%, transparent)
	);
}

.service-tools__name {
	font-weight: 700;
	font-size: 0.82rem;
	line-height: 1.35;
	text-align: center;
	color: var(--text-light);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Stats */
.service-stats {
	position: relative;
	background:
		radial-gradient(
			ellipse 80% 60% at 50% 20%,
			color-mix(in srgb, var(--primary-light) 22%, transparent) 0%,
			transparent 55%
		),
		linear-gradient(
			185deg,
			color-mix(in srgb, var(--bg-dark) 95%, var(--primary-dark)) 0%,
			var(--bg-dark) 45%,
			color-mix(in srgb, var(--text-primary) 92%, var(--bg-dark)) 100%
		);
	border-top: 4px solid var(--primary-color);
	border-bottom: 4px solid var(--primary-dark);
	box-shadow: inset 0 0 120px color-mix(in srgb, var(--text-primary) 45%, transparent);
}

.service-stats::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.06;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 3px,
		color-mix(in srgb, var(--text-light) 4%, transparent) 3px,
		color-mix(in srgb, var(--text-light) 4%, transparent) 6px
	);
}

.service-stats__grid {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.25rem, 4vw, 2rem);
	z-index: 1;
}

.service-stats__item {
	flex: 1 1 200px;
	max-width: 260px;
	text-align: center;
	padding: var(--spacing-xl) var(--spacing-lg);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--text-primary) 35%, transparent);
	border: 2px solid color-mix(in srgb, var(--primary-light) 50%, transparent);
	box-shadow:
		0 0 24px color-mix(in srgb, var(--primary-color) 20%, transparent),
		inset 0 1px 0 color-mix(in srgb, var(--text-light) 5%, transparent);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.service-stats__item:hover {
	border-color: color-mix(in srgb, var(--bg-light) 55%, transparent);
	box-shadow:
		0 0 36px color-mix(in srgb, var(--bg-light) 12%, transparent),
		inset 0 0 40px color-mix(in srgb, var(--primary-light) 8%, transparent);
}

.service-stats__value {
	font-family: "Press Start 2P", cursive;
    font-size: clamp(0.95rem, 2.2vw, 5.15rem);
    line-height: 1.5;
    font-weight: 400;
    color: var(--primary-light);
    text-shadow: 0 0 20px 
color-mix(in srgb, var(--bg-light) 45%, transparent), 2px 2px 0 
color-mix(in srgb, #d6d6d6 90%, transparent);
    margin-bottom: var(--spacing-md);
}

.service-stats__label {
	font-size: 0.92rem;
	line-height: 1.45;
	font-weight: 600;
	color: color-mix(in srgb, var(--text-light) 88%, transparent);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Recent work */
.service-recent {
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--bg-light) 70%, var(--text-light)) 0%,
		color-mix(in srgb, var(--secondary-light) 15%, var(--bg-light)) 100%
	);
}

.service-recent__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-lg);
	justify-content: center;
}

.service-recent__card {
	flex: 1 1 calc(25% - var(--spacing-lg));
	min-width: 200px;
	max-width: 300px;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--bg-dark);
	border: 4px solid var(--bg-dark);
	box-shadow:
		6px 6px 0 var(--primary-dark),
		0 16px 40px color-mix(in srgb, var(--text-primary) 15%, transparent);
	transition: transform var(--transition-normal), box-shadow var(--transition-normal),
		border-color var(--transition-normal);
}

.service-recent__card:hover {
	transform: translate(-4px, -4px);
	border-color: var(--primary-light);
	box-shadow:
		10px 10px 0 var(--primary-color),
		0 24px 56px color-mix(in srgb, var(--primary-color) 28%, transparent);
}

.service-recent__image-wrap {
	aspect-ratio: 1;
	overflow: hidden;
	background: linear-gradient(
		135deg,
		var(--bg-card),
		var(--bg-dark)
	);
	position: relative;
}

.service-recent__image-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--text-primary) 65%, transparent) 0%,
		transparent 45%
	);
	opacity: 0.85;
	transition: opacity var(--transition-fast);
}

.service-recent__card:hover .service-recent__image-wrap::after {
	opacity: 0.55;
}

.service-recent__image-wrap--empty {
	min-height: 200px;
	background: repeating-linear-gradient(
		45deg,
		var(--bg-card),
		var(--bg-card) 8px,
		color-mix(in srgb, var(--secondary-dark) 45%, var(--bg-card)) 8px,
		color-mix(in srgb, var(--secondary-dark) 45%, var(--bg-card)) 16px
	);
}

.service-recent__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease, filter var(--transition-fast);
	filter: saturate(1.05);
}

.service-recent__card:hover .service-recent__image {
	transform: scale(1.06);
	filter: saturate(1.15);
}

.service-recent__name {
	padding: var(--spacing-md) var(--spacing-sm);
	font-weight: 800;
	font-size: 0.88rem;
	line-height: 1.35;
	color: var(--text-light);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: linear-gradient(
		180deg,
		var(--bg-card) 0%,
		var(--bg-dark) 100%
	);
	border-top: 2px solid color-mix(in srgb, var(--primary-light) 45%, transparent);
}

.service-recent__empty {
	text-align: center;
	color: var(--text-gray);
	margin-bottom: var(--spacing-lg);
	font-size: 1rem;
}

.service-recent__actions {
	text-align: center;
	margin-top: var(--spacing-xl);
}

.service-recent__more {
	display: inline-flex;
}

/* Why choose */
.service-why {
	background:
		radial-gradient(
			ellipse 100% 60% at 50% 100%,
			color-mix(in srgb, var(--primary-color) 7%, transparent) 0%,
			transparent 50%
		),
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--secondary-light) 18%, var(--bg-light)) 0%,
			color-mix(in srgb, var(--secondary-color) 10%, var(--bg-light)) 100%
		);
}

.service-why__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-lg);
	justify-content: center;
}

.service-why__card {
	flex: 1 1 calc(33.333% - var(--spacing-lg));
	min-width: 260px;
	max-width: 400px;
	padding: var(--spacing-xl);
	background: var(--text-light);
	border-radius: var(--radius-sm);
	border: 3px solid var(--bg-dark);
	box-shadow:
		5px 5px 0 color-mix(in srgb, var(--primary-color) 35%, transparent),
		inset 0 1px 0 color-mix(in srgb, var(--text-light) 90%, transparent);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
	position: relative;
	overflow: hidden;
}


.service-why__card:hover {
	transform: translate(-3px, -3px);
	box-shadow:
		8px 8px 0 color-mix(in srgb, var(--primary-color) 45%, transparent),
		inset 0 1px 0 color-mix(in srgb, var(--text-light) 95%, transparent);
}

.service-why__card-title {
	font-size: 1.12rem;
	color: var(--primary-dark);
	margin-bottom: var(--spacing-md);
	font-weight: 800;
	line-height: 1.35;
	padding-top: var(--spacing-sm);
}

.service-why__card-text {
	font-size: 0.96rem;
	line-height: 1.68;
	color: var(--text-gray);
}

.service-why__card-text p {
	margin-bottom: var(--spacing-sm);
}

/* FAQ */
.service-faq {
	position: relative;
	background: linear-gradient(
		195deg,
		color-mix(in srgb, var(--bg-dark) 92%, var(--primary-dark)) 0%,
		color-mix(in srgb, var(--text-primary) 94%, var(--bg-dark)) 100%
	);
	border-top: 4px solid color-mix(in srgb, var(--primary-light) 60%, transparent);
}

.service-faq::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.05;
	background-image: radial-gradient(
		circle at 20% 30%,
		color-mix(in srgb, var(--primary-light) 50%, transparent) 0%,
		transparent 40%
	);
}

.service-faq__title {
	margin-bottom: var(--spacing-xl);
}

.service-faq__list {
	max-width: 880px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	position: relative;
	z-index: 1;
}

.service-faq__item {
	border: 3px solid color-mix(in srgb, var(--primary-light) 45%, transparent);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--text-primary) 40%, transparent);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--text-light) 4%, transparent),
		4px 4px 0 color-mix(in srgb, var(--text-primary) 35%, transparent);
	overflow: hidden;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.service-faq__item[open] {
	border-color: color-mix(in srgb, var(--bg-light) 55%, transparent);
	box-shadow:
		inset 0 0 24px color-mix(in srgb, var(--primary-light) 12%, transparent),
		4px 4px 0 color-mix(in srgb, var(--primary-color) 45%, transparent);
}

.service-faq__summary {
	list-style: none;
	cursor: pointer;
	padding: var(--spacing-md) var(--spacing-lg);
	font-weight: 700;
	font-size: 0.98rem;
	line-height: 1.45;
	color: var(--text-light);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-md);
	transition: background var(--transition-fast);
}

.service-faq__summary::-webkit-details-marker {
	display: none;
}

.service-faq__summary::after {
	content: "";
	width: 11px;
	height: 11px;
	border-right: 3px solid var(--bg-light);
	border-bottom: 3px solid var(--bg-light);
	transform: rotate(45deg);
	flex-shrink: 0;
	transition: transform var(--transition-fast);
	filter: drop-shadow(
		0 0 6px color-mix(in srgb, var(--bg-light) 50%, transparent)
	);
}

.service-faq__item[open] .service-faq__summary::after {
	transform: rotate(-135deg);
}

.service-faq__summary:hover {
	background: color-mix(in srgb, var(--primary-color) 22%, transparent);
}

.service-faq__answer {
	padding: 0 var(--spacing-lg) var(--spacing-lg);
	color: color-mix(in srgb, var(--text-light) 88%, transparent);
	font-size: 0.95rem;
	line-height: 1.68;
	border-top: 1px solid color-mix(in srgb, var(--primary-light) 25%, transparent);
	padding-top: var(--spacing-md);
	margin-top: 0;
}

.service-faq__answer p {
	margin-bottom: var(--spacing-md);
	color: inherit;
}

.service-faq__answer table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--spacing-md) 0;
	font-size: 0.88rem;
}

.service-faq__answer th,
.service-faq__answer td {
	border: 2px solid color-mix(in srgb, var(--primary-light) 35%, transparent);
	padding: var(--spacing-sm) var(--spacing-md);
	text-align: left;
}

.service-faq__answer th {
	background: color-mix(in srgb, var(--primary-color) 45%, transparent);
	color: var(--text-light);
	font-weight: 700;
}

.service-studio,
.service-segments,
.service-tools,
.service-stats,
.service-recent,
.service-why,
.service-faq {
	padding: clamp(3.25rem, 7vw, 5.5rem) 0;
}

.section-light {
	background: var(--text-light);
	color: var(--text-primary);
}

.section-muted {
	background: transparent;
	color: var(--text-primary);
}

.section-dark {
	background: transparent;
	color: var(--text-light);
}

@media (max-width: 1024px) {
	.service-detail-page .section-title.service-section-title::before,
	.service-detail-page .section-title.service-section-title::after {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.service-hero__aurora,
	.service-hero__orb--a,
	.service-hero__orb--b,
	.service-hero__orb--c {
		animation: none !important;
	}
}

@media (max-width: 640px) {
	.service-hero__inner {
		padding-top: calc(var(--spacing-xl) + 2rem);
	}

	.service-hero__frame {
		inset: 0.5rem;
		opacity: 0.65;
	}

	.service-hero__content {
		padding: var(--spacing-md);
		border-left-width: 4px;
	}

	.service-hero__title {
		max-width: none;
	}

	.service-hero__cta-row {
		flex-direction: column;
		align-items: flex-start;
		justify-self: center;
	}

	.service-recent__card {
		flex: 1 1 100%;
		max-width: none;
	}

	.service-why__card {
		flex: 1 1 100%;
	}

	.service-stats__value {
		font-size: 1.75rem;
	}

	.service-tools__item {
		min-width: calc(50% - 1rem);
		max-width: none;
	}
}