/**
 * Styles every service page rendered by template-parts/service-page.php.
 *
 * Page-scoped: every class carries the short `svc` prefix so nothing leaks into
 * the homepage sections. Loaded only on service page slugs (see enqueue.php).
 * Alternating ink / porcelain bands mirror the homepage's cinematic rhythm and
 * reference the same design tokens — no raw values live here.
 *
 * Built by Zinuxtech (ZX · Zinux) to the ZinuxTech Development Guide.
 */

/* ------------------------------------------------------------------ *
 * Hero — dark ink, clears the absolute header, sets the tone.
 * ------------------------------------------------------------------ */
.svc-hero {
	position: relative;
	overflow: hidden;
	padding-block: calc(var(--inv-header-height) + var(--inv-space-2xl)) var(--inv-sect);
	background: var(--inv-ink) var(--inv-backdrop) center / cover no-repeat;
	color: var(--inv-text-inv);
}

/* Nothing sits on top of the backdrop photograph. The hairline grid, the gold
   orbital ring and the heavy grain wash that used to live here were the OLD
   CSS studio backdrop, drawn back when this band was flat ink; over the
   photograph they read as two backgrounds fighting — the ring in particular
   cut a visible arc straight across the beam. The image is the backdrop now
   (Direction §2a). */

.svc-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: start;
	gap: var(--inv-space-md);
}

.svc-hero__eyebrow {
	color: var(--inv-muted-inv);
}

.svc-hero__title {
	max-width: 18ch;
}

.svc-hero__title::after {
	display: inline-block;
	width: 0.12em;
	height: 0.12em;
	margin-left: 0.06em;
	border-radius: 50%;
	background: var(--inv-signal);
	content: "";
}

.svc-hero__intro {
	max-width: 46rem;
	color: var(--inv-muted-inv);
	font-size: clamp(1rem, 1.25vw, 1.25rem);
}

.svc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--inv-space-md);
	margin-top: var(--inv-space-xs);
}

.svc-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--inv-space-sm) var(--inv-space-2xl);
	margin: 0;
	margin-top: var(--inv-space-lg);
	padding-top: var(--inv-space-lg);
	border-top: 1px solid var(--inv-line-inv);
	width: 100%;
}

.svc-hero__stats div {
	display: grid;
	gap: var(--inv-space-2xs);
}

.svc-hero__stats dt {
	color: var(--inv-text-inv);
	font-family: var(--inv-font-display);
	font-size: clamp(1.9rem, 3.5vw, 2.75rem);
	font-weight: 650;
	letter-spacing: -0.04em;
	line-height: 1;
}

.svc-hero__stats dd {
	margin: 0;
	color: var(--inv-muted-inv);
	font-family: var(--inv-font-mono);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * Positioning band — porcelain, statement + outcome list.
 * ------------------------------------------------------------------ */
.svc-lead {
	padding-block: var(--inv-sect);
	background: var(--inv-paper);
}

.svc-lead__inner {
	display: grid;
	gap: var(--inv-space-xl);
}

.svc-lead__copy h2 {
	margin-top: var(--inv-space-sm);
	max-width: 20ch;
}

.svc-lead__body {
	margin-top: var(--inv-space-md);
	max-width: 44rem;
	color: var(--inv-text);
	font-size: clamp(1.02rem, 1.4vw, 1.2rem);
	line-height: 1.6;
}

.svc-lead__points {
	display: grid;
	gap: var(--inv-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.svc-lead__points li {
	position: relative;
	padding-left: var(--inv-space-lg);
	padding-block: var(--inv-space-xs);
	border-top: 1px solid var(--inv-line);
	color: var(--inv-text);
	font-size: 1.0625rem;
}

.svc-lead__points li::before {
	position: absolute;
	top: calc(var(--inv-space-xs) + 0.55em);
	left: 0;
	width: 0.85rem;
	height: 0.125rem;
	background: var(--inv-signal);
	content: "";
}

@media (min-width: 54rem) {
	.svc-lead__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.8fr);
		align-items: start;
	}
}

/* ------------------------------------------------------------------ *
 * Capabilities — dark, four productised cards.
 * ------------------------------------------------------------------ */
.svc-caps {
	position: relative;
	overflow: hidden;
	padding-block: var(--inv-sect);
	background: var(--inv-ink-2);
	color: var(--inv-text-inv);
}

.svc-caps::before {
	position: absolute;
	inset: 0;
	background-image: var(--inv-grain);
	opacity: 0.1;
	content: "";
	pointer-events: none;
}

.svc-caps__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--inv-space-xl);
}

.svc-caps__intro {
	max-width: 52rem;
}

.svc-caps__intro h2 {
	margin-top: var(--inv-space-sm);
}

.svc-caps__grid {
	display: grid;
	gap: var(--inv-space-sm);
}

.svc-cap {
	display: grid;
	align-content: start;
	gap: var(--inv-space-xs);
	padding: var(--inv-space-lg);
	border: 1px solid var(--inv-line-inv);
	border-radius: var(--inv-radius-md);
	background: var(--inv-white-glass);
	transition: border-color var(--inv-duration) var(--inv-ease), transform var(--inv-duration) var(--inv-ease);
}

.svc-cap:hover {
	border-color: var(--inv-signal);
	transform: translateY(-0.35rem);
}

.svc-cap__number {
	color: var(--inv-signal);
	font-family: var(--inv-font-mono);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.svc-cap__title {
	color: var(--inv-text-inv);
}

.svc-cap__desc {
	color: var(--inv-muted-inv);
	font-size: 0.95rem;
	line-height: 1.55;
}

@media (min-width: 40rem) {
	.svc-caps__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.svc-caps__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------ *
 * Process — porcelain, numbered pipeline.
 * ------------------------------------------------------------------ */
.svc-process {
	padding-block: var(--inv-sect);
	background: var(--inv-paper-deep);
}

.svc-process__inner {
	display: grid;
	gap: var(--inv-space-xl);
}

.svc-process__intro {
	max-width: 50rem;
}

.svc-process__intro h2 {
	margin-top: var(--inv-space-sm);
}

.svc-process__body {
	margin-top: var(--inv-space-md);
	color: var(--inv-muted);
	font-size: clamp(1rem, 1.25vw, 1.2rem);
}

.svc-process__steps {
	display: grid;
	gap: var(--inv-space-sm);
	margin: 0;
	padding: 0;
	counter-reset: none;
	list-style: none;
}

.svc-step {
	display: grid;
	align-content: start;
	gap: var(--inv-space-xs);
	padding: var(--inv-space-lg);
	border-radius: var(--inv-radius-md);
	background: var(--inv-paper);
	box-shadow: var(--inv-shadow);
}

.svc-step__num {
	color: var(--inv-signal-deep);
	font-family: var(--inv-font-mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.svc-step__title {
	font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}

.svc-step__desc {
	color: var(--inv-muted);
	font-size: 0.95rem;
	line-height: 1.55;
}

@media (min-width: 44rem) {
	.svc-process__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 68rem) {
	.svc-process__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------ *
 * Selected work — reuses the work-card component (cards.css, global).
 * ------------------------------------------------------------------ */
.svc-work {
	padding-block: var(--inv-sect);
	background: var(--inv-paper);
}

.svc-work__inner {
	display: grid;
	gap: var(--inv-space-xl);
}

.svc-work__intro h2 {
	margin-top: var(--inv-space-sm);
}

.svc-work__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--inv-space-lg) var(--inv-space-md);
}

@media (min-width: 38rem) {
	.svc-work__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62rem) {
	.svc-work__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--inv-space-xl) var(--inv-space-lg);
	}
}

/* ------------------------------------------------------------------ *
 * Why us — dark, differentiator grid.
 * ------------------------------------------------------------------ */
.svc-why {
	padding-block: var(--inv-sect);
	background: var(--inv-ink);
	color: var(--inv-text-inv);
}

.svc-why__inner {
	display: grid;
	gap: var(--inv-space-xl);
}

.svc-why__intro {
	max-width: 46rem;
}

.svc-why__intro h2 {
	margin-top: var(--inv-space-sm);
}

.svc-why__grid {
	display: grid;
	gap: var(--inv-space-lg);
}

.svc-why__item {
	display: grid;
	gap: var(--inv-space-xs);
	padding-top: var(--inv-space-md);
	border-top: 1px solid var(--inv-line-inv);
}

.svc-why__title {
	font-size: clamp(1.2rem, 1.7vw, 1.45rem);
}

.svc-why__desc {
	color: var(--inv-muted-inv);
	font-size: 0.95rem;
	line-height: 1.55;
}

@media (min-width: 48rem) {
	.svc-why__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--inv-space-xl) var(--inv-space-2xl);
	}
}

@media (min-width: 72rem) {
	.svc-why__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------ *
 * FAQ — porcelain, native <details> accordion (works with no JS).
 * ------------------------------------------------------------------ */
.svc-faq {
	padding-block: var(--inv-sect);
	background: var(--inv-paper);
}

.svc-faq__inner {
	display: grid;
	gap: var(--inv-space-xl);
}

.svc-faq__intro h2 {
	margin-top: var(--inv-space-sm);
}

.svc-faq__list {
	display: grid;
	gap: var(--inv-space-xs);
	max-width: 52rem;
}

.svc-faq__item {
	border-top: 1px solid var(--inv-line);
}

.svc-faq__item:last-child {
	border-bottom: 1px solid var(--inv-line);
}

.svc-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--inv-space-md);
	padding-block: var(--inv-space-md);
	color: var(--inv-text);
	font-family: var(--inv-font-display);
	font-size: clamp(1.1rem, 1.6vw, 1.35rem);
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.25;
	cursor: pointer;
	list-style: none;
}

.svc-faq__q::-webkit-details-marker {
	display: none;
}

.svc-faq__q i {
	position: relative;
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
}

.svc-faq__q i::before,
.svc-faq__q i::after {
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--inv-signal-deep);
	content: "";
	transform: translate(-50%, -50%);
}

.svc-faq__q i::before {
	width: 1.1rem;
	height: 0.125rem;
}

.svc-faq__q i::after {
	width: 0.125rem;
	height: 1.1rem;
	transition: transform var(--inv-duration-fast) var(--inv-ease);
}

.svc-faq__item[open] .svc-faq__q i::after {
	transform: translate(-50%, -50%) scaleY(0);
}

.svc-faq__a {
	max-width: 46rem;
	margin: 0;
	padding-bottom: var(--inv-space-md);
	color: var(--inv-muted);
	font-size: 1rem;
	line-height: 1.6;
}

/* ------------------------------------------------------------------ *
 * Conversion CTA — dark, single primary action + cross-sell.
 * ------------------------------------------------------------------ */
.svc-cta {
	position: relative;
	overflow: hidden;
	padding-block: var(--inv-sect);
	background: var(--inv-ink-2);
	color: var(--inv-text-inv);
}

.svc-cta__grain {
	position: absolute;
	inset: 0;
	background-image: var(--inv-grain);
	opacity: 0.12;
	pointer-events: none;
}

.svc-cta__inner {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: var(--inv-space-md);
	text-align: center;
}

.svc-cta__inner h2 {
	max-width: 20ch;
}

.svc-cta__body {
	max-width: 40rem;
	color: var(--inv-muted-inv);
	font-size: clamp(1rem, 1.25vw, 1.2rem);
}

.svc-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--inv-space-md);
	margin-top: var(--inv-space-xs);
}

.svc-cta__cross {
	margin-top: var(--inv-space-sm);
	color: var(--inv-muted-inv);
	font-family: var(--inv-font-mono);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.svc-cta__cross a {
	color: var(--inv-signal);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}