/*
 * Service pages: the hero and its practice instrument (VOY-975, spec KB-525
 * section 01).
 *
 * Copy on the left, the instrument on the right: a glass panel of three panes
 * (core groups). Without JavaScript the panes read in order, each under its
 * own label. svc-hero.js adds .is-js, builds the tab list from the labels and
 * shows one pane at a time, cycling, pausing on hover and focus, switching on
 * click, and tilting toward the cursor. The tilt reads --tilt-x / --tilt-y.
 *
 * Custom cursors belong on instrument pieces only (the spec's cursor rule):
 * the panel takes a crosshair, the tabs a pointer.
 */

.vy-svc-page .vy-svc-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
}

/* ---- The instrument ---------------------------------------------------------------- */

.vy-svc-page .vy-svc-inst {
	--tilt-x: 0deg;
	--tilt-y: 0deg;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 28px;
	border: 1px solid color-mix(in oklab, var(--um-500) 32%, transparent);
	border-radius: 6px;
	background:
		radial-gradient(120% 80% at 100% 0, color-mix(in oklab, var(--um-500) 16%, transparent), transparent 60%),
		color-mix(in oklab, var(--bg-panel) 82%, transparent);
	backdrop-filter: blur(14px);
	box-shadow: 0 40px 80px -40px color-mix(in oklab, var(--um-700) 60%, transparent);
	transform: perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
	transition: transform 400ms var(--svc-ease);
	cursor: crosshair;
}
.vy-svc-page .vy-svc-inst > .vy-dither {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	border-radius: inherit;
}
/* The burst field sits under the tabs and panes, never over them. */
.vy-svc-page .vy-svc-inst > :not(.vy-dither) { position: relative; z-index: 1; }

/* Pane label: a mono heading without JavaScript, replaced by the tabs with it. */
.vy-svc-page .vy-svc-inst__tab {
	margin-bottom: 14px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--um-500);
}

.vy-svc-page .vy-svc-inst__query {
	position: relative;
	min-height: 48px;
	margin-bottom: 20px;
	padding: 13px 18px 13px 44px;
	box-sizing: border-box;
	border: 1px solid var(--border-1);
	border-radius: 6px;
	background: var(--bg-canvas);
	font-size: 16px;
	color: var(--fg-1);
}
/* A search glyph drawn in CSS, not an icon file. */
.vy-svc-page .vy-svc-inst__query::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 50%;
	width: 11px;
	height: 11px;
	border: 2px solid var(--fg-4);
	border-radius: 50%;
	transform: translateY(-60%);
}
.vy-svc-page .vy-svc-inst__query.is-typing::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 1.1em;
	margin-left: 2px;
	vertical-align: -0.15em;
	background: var(--um-500);
	animation: vy-svc-caret 900ms steps(1) infinite;
}
@keyframes vy-svc-caret { 50% { opacity: 0; } }

/* Google results: the receipt. */
.vy-svc-page .vy-svc-inst__result {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 4px 20px;
	align-items: center;
	padding: 18px 20px;
	border: 1px solid color-mix(in oklab, var(--um-500) 50%, transparent);
	border-radius: 6px;
	background: color-mix(in oklab, var(--um-500) 8%, var(--bg-canvas));
}
.vy-svc-page .vy-svc-inst__rank {
	grid-row: span 2;
	min-width: 2.6ch;
	font-family: var(--font-display);
	font-size: 56px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--um-500);
	font-variant-numeric: tabular-nums;
}
.vy-svc-page .vy-svc-inst__site {
	font-size: 15px;
	line-height: 1.4;
	color: var(--fg-1);
}
.vy-svc-page .vy-svc-inst__was {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-3);
}

/* Map pack: three listings, yours marked. */
.vy-svc-page .vy-svc-inst__list {
	counter-reset: pin;
	display: grid;
	gap: 8px;
	padding: 0;
	list-style: none;
}
.vy-svc-page .vy-svc-inst__list > li:nth-child(n) {
	counter-increment: pin;
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: 12px;
	padding: 12px 16px;
	border: 1px solid var(--border-hair);
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--fg-3);
}
.vy-svc-page .vy-svc-inst__list > li::before {
	content: counter(pin, upper-alpha);
	grid-row: span 2;
	font-family: var(--font-mono);
	font-weight: 600;
	color: var(--fg-4);
}
.vy-svc-page .vy-svc-inst__list > li.is-you {
	border-color: var(--um-500);
	background: color-mix(in oklab, var(--um-500) 10%, transparent);
	color: var(--fg-1);
}
.vy-svc-page .vy-svc-inst__list > li.is-you::before { color: var(--um-500); }

/* AI answers. */
.vy-svc-page .vy-svc-inst__answer {
	padding: 18px 20px;
	border-radius: 6px;
	background: var(--bg-canvas);
	font-size: 15px;
	line-height: 1.6;
	color: var(--fg-2);
}
.vy-svc-page .vy-svc-inst__answer strong {
	color: var(--fg-1);
	box-shadow: inset 0 -0.4em 0 color-mix(in oklab, var(--um-500) 35%, transparent);
}

.vy-svc-page .vy-svc-inst__source {
	margin-top: 16px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-4);
}
.vy-svc-page .vy-svc-inst__source a { color: var(--fg-3); }

/* ---- JavaScript on: tabs, one pane at a time ---------------------------------------- */

.vy-svc-page .vy-svc-inst.is-js { gap: 0; min-height: 380px; }
.vy-svc-page .vy-svc-inst.is-js .vy-svc-inst__tab { display: none; }
.vy-svc-page .vy-svc-inst.is-js .vy-svc-inst__pane[hidden] { display: none; }

.vy-svc-page .vy-svc-inst__tabs {
	position: relative;
	display: flex;
	gap: 4px;
	margin-bottom: 24px;
	padding: 4px;
	border: 1px solid var(--border-hair);
	border-radius: 6px;
	background: var(--bg-canvas);
}
.vy-svc-page .vy-svc-inst__tabs button {
	position: relative;
	flex: 1;
	min-height: 44px;
	padding: 0 12px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-3);
	cursor: pointer;
	transition: color 200ms var(--svc-ease), background-color 200ms var(--svc-ease);
}
.vy-svc-page .vy-svc-inst__tabs button:hover { color: var(--fg-1); }
.vy-svc-page .vy-svc-inst__tabs button[aria-selected="true"] {
	background: color-mix(in oklab, var(--um-500) 16%, var(--bg-panel));
	color: var(--fg-1);
}
.vy-svc-page .vy-svc-inst__tabs button:focus-visible {
	outline: 2px solid var(--um-500);
	outline-offset: 2px;
}
/* The cycle's progress: a 2px bar under the active tab, paused with the cycle. */
.vy-svc-page .vy-svc-inst__tabs button[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 5px;
	height: 2px;
	background: var(--um-500);
	transform-origin: left;
	animation: vy-svc-cycle var(--cycle-ms, 5000ms) linear both;
}
.vy-svc-page .vy-svc-inst.is-paused .vy-svc-inst__tabs button::after { animation-play-state: paused; }
.vy-svc-page .vy-svc-inst.is-still .vy-svc-inst__tabs button::after { animation: none; transform: none; }
@keyframes vy-svc-cycle { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.vy-svc-page .vy-svc-inst__pane.is-in { animation: vy-svc-pane-in 360ms var(--svc-ease) both; }
@keyframes vy-svc-pane-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* ---- Mobile: copy first, then the instrument ------------------------------------------ */

@media (max-width: 1023px) {
	.vy-svc-page .vy-svc-hero { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 767px) {
	.vy-svc-page .vy-svc-inst { padding: 16px; }
	.vy-svc-page .vy-svc-inst.is-js { min-height: 340px; }
	.vy-svc-page .vy-svc-inst__rank { font-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.vy-svc-page .vy-svc-inst { transform: none; transition: none; }
	.vy-svc-page .vy-svc-inst__pane.is-in { animation: none; }
	.vy-svc-page .vy-svc-inst__query.is-typing::after { animation: none; }
}

/* ---- Short template: breadcrumb and "· Service" lockup (VOY-976) -------------------- */

.vy-svc-page .vy-svc-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin-bottom: 24px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-3);
}
/* The separators are drawn, so the trail's text stays "Services Voyager/SEO Local SEO". */
.vy-svc-page .vy-svc-crumbs > * + *::before {
	content: "\203A";
	margin-right: 10px;
	color: var(--fg-4);
}
.vy-svc-page .vy-svc-crumbs a { color: var(--fg-3); text-decoration: none; }
.vy-svc-page .vy-svc-crumbs a[href="/services/"] + a,
.vy-svc-page .vy-svc-crumbs a:hover { color: var(--um-500); }

.vy-svc-page .vy-svc-lockup {
	align-items: center;
	gap: 0.4em;
	margin-bottom: 28px;
	font-size: var(--wp--preset--font-size--2-xl);
}
.vy-svc-page .vy-svc-lockup .vy-lockup { margin: 0; font-size: inherit; }
.vy-svc-page .vy-svc-lockup__service {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	white-space: nowrap;
	color: var(--fg-2);
}
/* On a phone the service name wraps under the lockup: "· Content System"
   beside "Voyager/SEO" ran to 418px at 390 (VOY-984). */
@media (max-width: 767px) {
	.vy-svc-page .vy-svc-lockup { flex-wrap: wrap; row-gap: 8px; font-size: 24px; }
	.vy-svc-page .vy-svc-lockup__service { white-space: normal; }
}