/* ==============================================
   SERVICE SINGLE — REDESIGN (desktop + mobile)
   Implemented from Figma node-id=34:31 & 34:283.
   Scoped by .service-single-v2 (class on <main>).
   ============================================== */

/* ----------- Motion: scroll reveal + hero levitation ----------- */
@media (prefers-reduced-motion: no-preference) {
	.service-single-v2 .ssv2-reveal {
		opacity: 0;
		transform: translate3d(0, 28px, 0);
		transition:
			opacity 0.8s ease,
			transform 0.9s cubic-bezier(0.22, 0.7, 0.2, 1);
		will-change: opacity, transform;
	}
	.service-single-v2 .ssv2-reveal.is-in {
		opacity: 1;
		transform: none;
	}

	/* Slight variation per section for a less uniform feel */
	.service-single-v2 .ssv2-hero__visual.ssv2-reveal {
		transform: translate3d(0, 36px, 0) scale(0.985);
	}
	.service-single-v2 .ssv2-hero__visual.ssv2-reveal.is-in {
		transform: none;
	}
	.service-single-v2 .ssv2-card.ssv2-reveal,
	.service-single-v2 .ssv2-phase.ssv2-reveal,
	.service-single-v2 .ssv2-stat.ssv2-reveal {
		transform: translate3d(0, 22px, 0);
	}
	.service-single-v2 .ssv2-card.ssv2-reveal.is-in,
	.service-single-v2 .ssv2-phase.ssv2-reveal.is-in,
	.service-single-v2 .ssv2-stat.ssv2-reveal.is-in {
		transform: none;
	}

	/* Hero image — gentle infinite levitation */
	@keyframes ssv2-levitate {
		0%, 100% { transform: translate3d(0, 0, 0); }
		50%      { transform: translate3d(0, -12px, 0); }
	}
	.service-single-v2 .ssv2-hero__image img {
		animation: ssv2-levitate 6.5s ease-in-out infinite;
		will-change: transform;
	}

	/* Hero background glow — slow, soft pulse */
	@keyframes ssv2-hero-glow {
		0%, 100% { opacity: 0.9; transform: scale(1); }
		50%      { opacity: 1;   transform: scale(1.05); }
	}
	.service-single-v2 .ssv2-hero__glow {
		animation: ssv2-hero-glow 9s ease-in-out infinite;
	}
}

/* ----------- Design tokens ----------- */
.service-single-v2 {
	--ssv2-ink:        #09090b;
	--ssv2-ink-2:      #191c1e;
	--ssv2-body:       #52525b;
	--ssv2-body-2:     #5b4041;
	--ssv2-muted:      #71717a;

	--ssv2-surface:       #ffffff;
	--ssv2-surface-soft:  #fafafa;
	--ssv2-surface-soft2: #f7f9fb;
	--ssv2-surface-mute:  #f2f4f6;
	--ssv2-surface-card:  #f4f4f5;

	--ssv2-border:        #e4e4e7;
	--ssv2-border-soft:   #eceef0;

	/* Brand red, unified across the theme (was rose #f43f5e — replaced so
	   service-single shares the same primary colour as the rest of the site). */
	--ssv2-accent:        #790000;
	--ssv2-accent-2:      #a50000;
	--ssv2-accent-deep:   #5c0000;
	--ssv2-accent-soft:   rgba(121, 0, 0, 0.08);
	--ssv2-accent-ring:   rgba(121, 0, 0, 0.18);

	/* Tonal decor colour — overridden per service via .is-tone-*.
	   Default tone is now brand red (was rose). */
	--ssv2-tone:          #790000;
	--ssv2-tone-soft:     rgba(121, 0, 0, 0.08);
	--ssv2-tone-chip:     rgba(121, 0, 0, 0.12);
	--ssv2-tone-chip-text:#5c0000;

	--ssv2-radius-sm: 4px;
	--ssv2-radius:    8px;
	--ssv2-radius-lg: 12px;

	--ssv2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--ssv2-shadow-md: 0 10px 15px -3px rgba(121, 0, 0, 0.2), 0 4px 6px -4px rgba(121, 0, 0, 0.2);
	--ssv2-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	--ssv2-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

	--ssv2-font-heading: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ssv2-font-body:    'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--ssv2-container:    var(--container-width);

	font-family: var(--ssv2-font-body);
	color: var(--ssv2-ink);
	background: var(--ssv2-surface);
	display: block;
	width: 100%;
}

/* Per-service tonal overrides (subtle decor colour differences). */
.service-single-v2.is-tone-amber    { --ssv2-tone: #f59e0b; --ssv2-tone-soft: rgba(245, 158, 11, 0.10); --ssv2-tone-chip: rgba(245, 158, 11, 0.14); --ssv2-tone-chip-text: #92400e; }
.service-single-v2.is-tone-violet   { --ssv2-tone: #8b5cf6; --ssv2-tone-soft: rgba(139, 92, 246, 0.10); --ssv2-tone-chip: rgba(139, 92, 246, 0.14); --ssv2-tone-chip-text: #5b21b6; }
.service-single-v2.is-tone-rose     { --ssv2-tone: #790000; --ssv2-tone-soft: rgba(121, 0, 0, 0.10);   --ssv2-tone-chip: rgba(121, 0, 0, 0.14);   --ssv2-tone-chip-text: #5c0000; }
.service-single-v2.is-tone-azure    { --ssv2-tone: #2563eb; --ssv2-tone-soft: rgba(37, 99, 235, 0.10);  --ssv2-tone-chip: rgba(37, 99, 235, 0.14);  --ssv2-tone-chip-text: #1d4ed8; }
.service-single-v2.is-tone-teal     { --ssv2-tone: #14b8a6; --ssv2-tone-soft: rgba(20, 184, 166, 0.10); --ssv2-tone-chip: rgba(20, 184, 166, 0.14); --ssv2-tone-chip-text: #0f766e; }
.service-single-v2.is-tone-crimson  { --ssv2-tone: #dc2626; --ssv2-tone-soft: rgba(220, 38, 38, 0.10);  --ssv2-tone-chip: rgba(220, 38, 38, 0.14);  --ssv2-tone-chip-text: #991b1b; }
.service-single-v2.is-tone-ember    { --ssv2-tone: #ea580c; --ssv2-tone-soft: rgba(234, 88, 12, 0.10);  --ssv2-tone-chip: rgba(234, 88, 12, 0.14);  --ssv2-tone-chip-text: #9a3412; }

.service-single-v2 *,
.service-single-v2 *::before,
.service-single-v2 *::after { box-sizing: border-box; }

.service-single-v2 img { max-width: 100%; height: auto; display: block; }

/* Body padding reset — header overlays content. */
body.page-template-page-service-single { padding-top: 0; }

/* ----------- Layout helpers ----------- */
.ssv2-container {
	width: 100%;
	max-width: var(--ssv2-container);
	margin: 0 auto;
	padding: 0 32px;
}

/* ----------- Buttons ----------- */
.ssv2-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 32px;
	font-family: var(--ssv2-font-body);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-radius: 6px;
	border: 1px solid transparent;
	transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease, border-color .2s ease;
	cursor: pointer;
	white-space: nowrap;
}
.ssv2-btn__icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
}
.ssv2-btn__icon svg { width: 100%; height: 100%; }

.ssv2-btn--primary {
	color: #fff;
	background-image: linear-gradient(135deg, var(--ssv2-accent) 0%, var(--ssv2-accent-2) 100%);
	box-shadow: var(--ssv2-shadow-md);
}
.ssv2-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 20px -5px rgba(121, 0, 0, 0.28), 0 6px 8px -4px rgba(121, 0, 0, 0.22); }
.ssv2-btn--primary:focus-visible { outline: 2px solid var(--ssv2-accent); outline-offset: 3px; }

.ssv2-btn--ghost {
	color: var(--ssv2-ink);
	background: transparent;
	border-color: var(--ssv2-border);
}
.ssv2-btn--ghost:hover { background: var(--ssv2-surface-soft); border-color: #d4d4d8; }
.ssv2-btn--ghost:focus-visible { outline: 2px solid var(--ssv2-accent); outline-offset: 3px; }

/* Universal keyboard focus ring for anchors inside the template */
.service-single-v2 a:focus-visible,
.service-single-v2 button:focus-visible {
	outline: 2px solid var(--ssv2-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Screen-reader-only utility (visually hidden but announced) */
.ssv2-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ----------- Eyebrows & badges ----------- */
.ssv2-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	background: var(--ssv2-tone-soft);
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ssv2-tone-chip-text);
	margin-right: auto;
}
.ssv2-eyebrow__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ssv2-tone);
}

.ssv2-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ssv2-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ssv2-accent);
	margin-top: 18px;
}
.ssv2-hero__badge-rule {
	width: 32px;
	height: 1px;
	background: var(--ssv2-accent);
	flex-shrink: 0;
}

/* ==========================================================
   HERO
   ========================================================== */
.ssv2-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(32deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 50%, rgba(121, 0, 0, 0.05) 100%);
	padding: 160px 0 144px;
	border-bottom: 1px solid var(--ssv2-border);
}
.ssv2-hero__glow {
	position: absolute;
	inset: auto -10% -40% auto;
	width: 780px;
	height: 520px;
	background: radial-gradient(circle at 70% 40%, var(--ssv2-tone-soft) 0%, transparent 70%);
	filter: blur(60px);
	pointer-events: none;
	z-index: 0;
}

.ssv2-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 56px;
	align-items: center;
}

.ssv2-hero__copy { display: flex; flex-direction: column; }

.ssv2-hero__title {
	margin: 28px 0 24px;
	font-family: var(--ssv2-font-heading);
	font-weight: 700;
	font-size: clamp(48px, 6.2vw, 88px);
	line-height: 1.02;
	letter-spacing: -0.035em;
	color: var(--ssv2-ink);
}
.ssv2-hero__title-line { display: block; }
.ssv2-hero__title-line--accent {
	background: linear-gradient(123deg, var(--ssv2-accent) 0%, var(--ssv2-accent-2) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.ssv2-hero__lead {
	margin: 0 0 32px;
	max-width: 540px;
	font-size: 19px;
	line-height: 1.6;
	font-weight: 300;
	color: var(--ssv2-body);
}

.ssv2-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Hero visual — full-size image, no card chrome */
.ssv2-hero__visual {
	position: relative;
}
.ssv2-hero__visual-glow { display: none; }
.ssv2-hero__panel {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	display: block;
	overflow: visible;
}
.ssv2-hero__image {
	display: block;
	background: none;
	border-radius: 0;
	overflow: visible;
}
.ssv2-hero__image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	filter: none;
}

/* +25% visual size on desktop (two-column hero) — scale the wrapper so
   the img's own levitation transform stays independent. */
@media (min-width: 769px) {
	.service-single-v2 .ssv2-hero__image {
		transform: scale(1.25);
		transform-origin: center;
	}
}
.ssv2-hero__caption { display: none; }
.ssv2-hero__caption-label { display: none; }

/* ==========================================================
   NARRATIVE + FEATURE CARDS
   ========================================================== */
.ssv2-narrative {
	background: var(--ssv2-surface-soft);
	padding: 128px 0;
	border-bottom: 1px solid var(--ssv2-border);
}
.ssv2-narrative__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 96px;
	align-items: center;
}

.ssv2-narrative__title {
	margin: 0 0 24px;
	font-family: var(--ssv2-font-heading);
	font-weight: 700;
	font-size: clamp(28px, 3vw, 36px);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--ssv2-ink);
}
.ssv2-narrative__title span { display: block; }
.ssv2-narrative__title-accent { color: var(--ssv2-accent); }

.ssv2-narrative__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	color: var(--ssv2-body);
	font-size: 17px;
	line-height: 1.65;
	font-weight: 300;
}
.ssv2-narrative__body p { margin: 0; }

.ssv2-narrative__stats {
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
}
.ssv2-stat {
	padding-left: 20px;
	border-left: 4px solid var(--ssv2-accent);
}
.ssv2-stat__value {
	font-family: var(--ssv2-font-heading);
	font-weight: 700;
	font-size: 30px;
	line-height: 1.2;
	color: var(--ssv2-ink);
}
.ssv2-stat__label {
	margin-top: 4px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ssv2-muted);
}

/* Feature card grid — desktop asymmetric 2x2 */
.ssv2-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: auto auto;
	gap: 16px;
}
.ssv2-card {
	background: var(--ssv2-surface);
	border: 1px solid var(--ssv2-border);
	border-radius: var(--ssv2-radius-sm);
	padding: 32px;
	box-shadow: var(--ssv2-shadow-sm);
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 220px;
	transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.ssv2-card:hover {
	transform: translateY(-2px);
	border-color: var(--ssv2-accent-ring);
	box-shadow: 0 14px 28px -10px rgba(121, 0, 0, 0.18);
}
.ssv2-card__icon {
	width: 44px;
	height: 44px;
	border-radius: var(--ssv2-radius-sm);
	background: var(--ssv2-tone-chip);
	color: var(--ssv2-tone-chip-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ssv2-card__icon svg { width: 22px; height: 22px; }

.ssv2-card__title {
	margin: 0;
	font-family: var(--ssv2-font-heading);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	color: var(--ssv2-ink);
}
.ssv2-card__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ssv2-muted);
}

/* Variants */
.ssv2-card--soft   { background: var(--ssv2-surface); }
.ssv2-card--muted  { background: var(--ssv2-surface-card); border-color: var(--ssv2-border); }
.ssv2-card--accent {
	background: linear-gradient(135deg, var(--ssv2-accent) 0%, var(--ssv2-accent-2) 100%);
	border-color: transparent;
	box-shadow: 0 10px 15px -3px rgba(121, 0, 0, 0.2), 0 4px 6px -4px rgba(121, 0, 0, 0.2);
}
.ssv2-card--accent .ssv2-card__title { color: #fff; }
.ssv2-card--accent .ssv2-card__text  { color: rgba(255, 255, 255, 0.88); }
.ssv2-card--accent .ssv2-card__icon  { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* Asymmetric positioning (desktop only) */
@media (min-width: 961px) {
	.ssv2-features { grid-auto-flow: column; grid-template-rows: repeat(2, auto); }
	.ssv2-card--pos-1 { margin-top: 0; }
	.ssv2-card--pos-2 { margin-bottom: 32px; }
	.ssv2-card--pos-3 { margin-top: 32px; }
	.ssv2-card--pos-4 { margin-bottom: 0; }
}

/* ==========================================================
   KINETIC CYCLE
   ========================================================== */
.ssv2-cycle {
	background: var(--ssv2-surface);
	padding: 128px 0;
	overflow: hidden;
	position: relative;
}
.ssv2-cycle::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 420px;
	height: 420px;
	background: var(--ssv2-tone-soft);
	filter: blur(80px);
	border-radius: 50%;
	pointer-events: none;
}

.ssv2-cycle__head {
	text-align: center;
	margin: 0 auto 72px;
	position: relative;
	z-index: 1;
}
.ssv2-cycle__title {
	margin: 0 0 12px;
	font-family: var(--ssv2-font-heading);
	font-weight: 700;
	font-size: clamp(32px, 3.8vw, 48px);
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--ssv2-ink);
}
.ssv2-cycle__kicker {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ssv2-muted);
}

.ssv2-cycle__grid {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 1024px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	position: relative;
	z-index: 1;
}

.ssv2-phase {
	position: relative;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--ssv2-border);
	border-radius: var(--ssv2-radius-sm);
	padding: 40px;
	box-shadow: var(--ssv2-shadow-sm);
	display: flex;
	flex-direction: column;
	gap: 14px;
	overflow: hidden;
}
.ssv2-phase--2 { background: var(--ssv2-surface-soft); }
.ssv2-phase--3 {
	grid-column: 1 / -1;
	background: var(--ssv2-surface);
	padding: 40px;
}

.ssv2-phase__number {
	position: absolute;
	top: 18px;
	right: 28px;
	font-family: var(--ssv2-font-heading);
	font-weight: 700;
	font-size: 60px;
	line-height: 1;
	color: var(--ssv2-accent);
	opacity: 0.1;
	pointer-events: none;
}
.ssv2-phase__marker { display: none; }

.ssv2-phase__body { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.ssv2-phase__title {
	margin: 0;
	font-family: var(--ssv2-font-heading);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.3;
	color: var(--ssv2-ink);
}
.ssv2-phase__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--ssv2-body);
}

.ssv2-phase__tags {
	list-style: none;
	padding: 0;
	margin: 8px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ssv2-phase__tags li {
	padding: 6px 14px;
	background: #f8fafc;
	border: 1px solid var(--ssv2-accent-ring);
	border-radius: var(--ssv2-radius-sm);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ssv2-accent);
}

/* ==========================================================
   OPTIONAL WP CONTENT
   ========================================================== */
.ssv2-content {
	background: var(--ssv2-surface);
	padding: 96px 0;
}
.ssv2-content__inner {
	max-width: 780px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.7;
	color: var(--ssv2-body);
}
.ssv2-content__inner h2,
.ssv2-content__inner h3,
.ssv2-content__inner h4 {
	font-family: var(--ssv2-font-heading);
	color: var(--ssv2-ink);
	letter-spacing: -0.01em;
}
.ssv2-content__inner h2 { font-size: 28px; margin: 36px 0 16px; }
.ssv2-content__inner h3 { font-size: 22px; margin: 28px 0 12px; }
.ssv2-content__inner a  { color: var(--ssv2-accent); }

/* ==========================================================
   CTA / FORM
   ========================================================== */
.ssv2-cta {
	position: relative;
	background: var(--ssv2-surface-soft);
	padding: 128px 0;
	overflow: hidden;
}
.ssv2-cta::after {
	content: "";
	position: absolute;
	right: -10%;
	bottom: -20%;
	width: 520px;
	height: 520px;
	background: var(--ssv2-tone-soft);
	filter: blur(80px);
	border-radius: 50%;
	pointer-events: none;
}
.ssv2-cta__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 80px;
	align-items: start;
}

.ssv2-cta__title {
	margin: 0 0 28px;
	font-family: var(--ssv2-font-heading);
	font-weight: 700;
	font-size: clamp(36px, 4.4vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--ssv2-ink);
}
.ssv2-cta__title span { display: block; }
.ssv2-cta__title-accent { color: var(--ssv2-accent); }

.ssv2-cta__lead {
	margin: 0 0 36px;
	max-width: 420px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--ssv2-body);
}

.ssv2-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.ssv2-step {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
.ssv2-step__icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--ssv2-radius-sm);
	background: var(--ssv2-surface);
	border: 1px solid var(--ssv2-border);
	box-shadow: var(--ssv2-shadow-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ssv2-accent);
}
.ssv2-step__icon svg { width: 20px; height: 20px; }

.ssv2-step__title {
	margin: 0 0 4px;
	font-family: var(--ssv2-font-heading);
	font-weight: 700;
	font-size: 16px;
	color: var(--ssv2-ink);
}
.ssv2-step__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ssv2-muted);
}

/* Form card + CF7 styling — mirrors `.contacts-v4__form-card` from
   contact-page.css so the form on /services/<single>/ looks identical
   to the one on /contact-us/. Inputs: light grey bg, transparent
   border, brand-red focus ring; labels: sentence-case body font (no
   uppercase tracking). Submit button comes from the unified-button
   block in main.css (red gradient). */
.ssv2-cta__form {
	background: #ffffff;
	border: 1px solid var(--lv-border, #e4e6ea);
	border-radius: 6px;
	box-shadow: 0 4px 14px -8px rgba(25, 28, 29, 0.10);
	padding: 36px 36px 32px;
}
.ssv2-cta__form .wpcf7 { font-family: var(--lv-font-body, 'Manrope', system-ui, sans-serif); }
.ssv2-cta__form form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ssv2-cta__form p {
	display: flex;
	flex-direction: column;
	margin: 0;
	gap: 8px;
}
.ssv2-cta__form label {
	font-family: var(--lv-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--lv-on-surface, #191c1d);
	margin-bottom: 0;
}
.ssv2-cta__form .wpcf7-form-control-wrap { display: block; }
.ssv2-cta__form .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
	width: 100%;
	background: var(--lv-surface-container, #edeeef);
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 12px 16px;
	font-family: var(--lv-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--lv-on-surface, #191c1d);
	transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.ssv2-cta__form .wpcf7-form-control:not([type="submit"]):focus {
	outline: none;
	border-color: #790000;
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(121, 0, 0, 0.18);
}
.ssv2-cta__form textarea { min-height: 140px; resize: vertical; line-height: 1.5; }

.ssv2-cta__form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 14px;
}

/* Submit button — mirrors `.contacts-v4__form-card .wpcf7-submit` design
   so /services/<single>/ matches /contact-us/. Brand-red gradient,
   white text, soft hover lift + glow. */
.ssv2-cta__form .wpcf7-submit,
.ssv2-cta__form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto;
	padding: 14px 28px;
	background: linear-gradient(135deg, #790000 0%, #a50000 100%);
	color: #fff;
	font-family: var(--lv-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 150ms ease, transform 150ms ease, box-shadow 250ms ease;
}
.ssv2-cta__form .wpcf7-submit:hover,
.ssv2-cta__form input[type="submit"]:hover {
	background: linear-gradient(135deg, #5c0000 0%, #790000 100%);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 14px 30px -10px rgba(121, 0, 0, 0.45);
}
.ssv2-cta__form .wpcf7-submit:focus-visible,
.ssv2-cta__form input[type="submit"]:focus-visible {
	outline: 2px solid #790000;
	outline-offset: 3px;
}

/* intl-tel-input integration — same rules as `.contacts-v4__form-card .iti`
   so the phone field on the service-single CTA matches the contact page. */
.ssv2-cta__form .iti {
	width: 100%;
	display: block;
}
.ssv2-cta__form .iti input.wpcf7-tel,
.ssv2-cta__form .iti input[type="tel"] {
	background: var(--lv-surface-container, #edeeef);
	border: 1px solid transparent;
	border-radius: 6px;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-right: 16px;
	font-family: var(--lv-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 14px;
	color: var(--lv-on-surface, #191c1d);
	width: 100%;
}
.ssv2-cta__form .iti input.wpcf7-tel:focus,
.ssv2-cta__form .iti input[type="tel"]:focus {
	outline: none;
	border-color: #790000;
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(121, 0, 0, 0.18);
}

/* ==========================================================
   RESPONSIVE (tablet)
   ========================================================== */
@media (max-width: 1100px) {
	.ssv2-hero { padding: 120px 0 96px; }
	.ssv2-narrative__grid { grid-template-columns: minmax(0, 1fr); gap: 64px; }
	.ssv2-narrative { padding: 96px 0; }
	.ssv2-cycle { padding: 96px 0; }
	.ssv2-cta__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.ssv2-cta { padding: 96px 0; }
}

@media (max-width: 768px) {
	.ssv2-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}

/* ==========================================================
   RESPONSIVE (mobile ≤ 720px) — mirrors Figma 390px layout
   ========================================================== */
@media (max-width: 720px) {
	/* `.ssv2-container` horizontal padding is centralised in main.css
	   (16px ≤768px / 20px ≤1024px) so the logo line matches the content
	   line. The local 24px override that used to live here pushed content
	   to 24px while the header stayed at 16px → 8px misalignment on /services/
	   single pages. Padding-top/bottom on this container is 0 anyway. */

	/* Hero */
	.ssv2-hero {
		padding: 96px 0 80px;
		background: var(--ssv2-surface-soft2);
	}
	.ssv2-hero__glow { inset: -96px -96px auto auto; width: 256px; height: 256px; }
	.ssv2-hero__title { font-size: 44px; line-height: 1.1; margin: 22px 0 18px; }
	.ssv2-hero__lead { font-size: 17px; line-height: 1.6; }
	.ssv2-hero__badge { font-size: 11px; }
	.ssv2-hero__actions .ssv2-btn { width: 100%; justify-content: center; padding: 15px 24px; }
	.ssv2-hero__actions .ssv2-btn--ghost { display: none; }

	.ssv2-hero__image img { max-width: 525px; margin: 0 auto; }

	/* Narrative — single column, cards become uniform list */
	.ssv2-narrative {
		background: var(--ssv2-surface-mute);
		padding: 64px 0;
	}
	.ssv2-narrative__title {
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--ssv2-accent-deep);
		margin-bottom: 20px;
	}
	.ssv2-narrative__title span { display: inline; }
	.ssv2-narrative__title-accent { display: none !important; }
	.ssv2-narrative__body { display: none; }
	.ssv2-narrative__stats { display: none; }

	.ssv2-features { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.ssv2-card {
		margin: 0 !important;
		background: var(--ssv2-surface) !important;
		border: 1px solid rgba(227, 189, 191, 0.3);
		border-radius: var(--ssv2-radius);
		padding: 24px;
		min-height: 0;
		box-shadow: none;
	}
	.ssv2-card__title { color: var(--ssv2-ink-2); font-size: 19px; }
	.ssv2-card__text { color: var(--ssv2-body-2); font-size: 14px; }
	.ssv2-card__icon { background: var(--ssv2-tone-chip); color: var(--ssv2-tone-chip-text); }
	.ssv2-card--accent {
		background: var(--ssv2-surface) !important;
		border: 1px solid rgba(227, 189, 191, 0.3) !important;
	}
	.ssv2-card--accent .ssv2-card__title { color: var(--ssv2-ink-2); }
	.ssv2-card--accent .ssv2-card__text  { color: var(--ssv2-body-2); }
	.ssv2-card--accent .ssv2-card__icon  { background: var(--ssv2-tone-chip); color: var(--ssv2-tone-chip-text); }

	/* Cycle — vertical timeline with numbered markers */
	.ssv2-cycle { background: var(--ssv2-surface-soft2); padding: 64px 0 80px; }
	.ssv2-cycle::before { display: none; }
	.ssv2-cycle__head { text-align: left; margin-bottom: 36px; }
	.ssv2-cycle__title { font-size: 30px; line-height: 1.2; }
	.ssv2-cycle__kicker { display: none; }

	.ssv2-cycle__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
		position: relative;
	}
	.ssv2-cycle__grid::before {
		content: "";
		position: absolute;
		top: 18px;
		bottom: 18px;
		left: 23px;
		width: 1px;
		background: rgba(227, 189, 191, 0.4);
	}
	.ssv2-phase {
		grid-column: auto !important;
		padding: 0 0 0 68px;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		min-height: 0;
	}
	.ssv2-phase__number { display: none; }
	.ssv2-phase__marker {
		display: inline-flex;
		position: absolute;
		left: 0;
		top: 0;
		width: 46px;
		height: 46px;
		border-radius: var(--ssv2-radius-lg);
		background: var(--ssv2-surface);
		border: 4px solid var(--ssv2-surface-soft2);
		box-shadow: var(--ssv2-shadow-sm);
		align-items: center;
		justify-content: center;
		font-family: var(--ssv2-font-heading);
		font-weight: 700;
		font-size: 15px;
		color: var(--ssv2-ink-2);
	}
	.ssv2-phase--1 .ssv2-phase__marker { background: #e0e3e5; color: var(--ssv2-accent-deep); }
	.ssv2-phase--2 .ssv2-phase__marker { background: #acedff; color: #00687a; }
	.ssv2-phase--3 .ssv2-phase__marker { background: var(--ssv2-accent); color: #fff; border-color: var(--ssv2-surface-soft2); }
	.ssv2-phase__title { font-size: 18px; }
	.ssv2-phase__tags { margin-top: 10px; }

	/* CTA / form */
	.ssv2-cta { padding: 80px 0 96px; background: var(--ssv2-surface); }
	.ssv2-cta::after { display: none; }
	.ssv2-cta__grid { gap: 40px; }
	.ssv2-cta__title { font-size: 36px; letter-spacing: -0.04em; }
	.ssv2-cta__title span { display: inline; margin-right: 0.25em; }
	.ssv2-cta__title-accent { color: var(--ssv2-accent); }
	.ssv2-cta__lead { font-size: 16px; }
	.ssv2-steps { display: none; }

	.ssv2-cta__form {
		padding: 0;
		background: transparent;
		border: none;
		box-shadow: none;
	}
	.ssv2-cta__form input[type="text"],
	.ssv2-cta__form input[type="email"],
	.ssv2-cta__form input[type="tel"],
	.ssv2-cta__form input[type="url"],
	.ssv2-cta__form select {
		padding: 14px 16px;
		background: var(--ssv2-surface);
		border-color: #e3bdbf;
		border-radius: var(--ssv2-radius-sm);
	}
	.ssv2-cta__form textarea {
		background: var(--ssv2-surface-mute);
		border: none;
		border-radius: var(--ssv2-radius);
		padding: 18px;
	}
	/* (Old mobile submit border-radius override removed — submit now uses
	   the unified 6px radius from the main submit rule above.) */
}

@media (max-width: 420px) {
	.ssv2-hero__title { font-size: 40px; }
	.ssv2-cta__title  { font-size: 32px; }
}

/* =========================================================================
 * Related reading block — links service pages to blog cluster.
 * Tone is inherited from .service-single-v2.is-tone-* on the parent <main>.
 * ========================================================================= */

.ssv2-related-reading {
	background: var(--ssv2-surface, #faf8f5);
	padding: clamp(72px, 9vw, 120px) 0 clamp(56px, 7vw, 96px);
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.ssv2-rr__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.ssv2-rr__head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 720px;
}

.ssv2-rr__title {
	font-size: clamp(32px, 4.2vw, 48px);
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--ssv2-ink, #191c1d);
	margin: 0;
	font-weight: 500;
}

.ssv2-rr__lead {
	font-size: 17px;
	line-height: 1.55;
	color: var(--ssv2-body, #545e76);
	margin: 0;
	max-width: 56ch;
}

.ssv2-rr__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.ssv2-rr__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.ssv2-rr__grid--one { grid-template-columns: minmax(0, 560px); }

.ssv2-rr-card {
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ssv2-rr-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(20, 25, 40, 0.08);
	border-color: var(--ssv2-tone, #790000);
}

.ssv2-rr-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.ssv2-rr-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--ssv2-surface-mute, #f1ede8);
}

.ssv2-rr-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.ssv2-rr-card:hover .ssv2-rr-card__media img {
	transform: scale(1.04);
}

.ssv2-rr-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 24px 26px;
	flex: 1 1 auto;
}

.ssv2-rr-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ssv2-body-2, #6b7280);
}

.ssv2-rr-card__cat {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--ssv2-tone-chip, rgba(121, 0, 0, 0.10));
	color: var(--ssv2-tone-chip-text, #790000);
	font-weight: 600;
	letter-spacing: 0.06em;
}

.ssv2-rr-card__time {
	color: var(--ssv2-body-2, #6b7280);
	font-weight: 500;
}

.ssv2-rr-card__title {
	font-size: 21px;
	line-height: 1.25;
	color: var(--ssv2-ink, #191c1d);
	margin: 0;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.ssv2-rr-card__excerpt {
	font-size: 15px;
	line-height: 1.55;
	color: var(--ssv2-body, #545e76);
	margin: 0;
}

.ssv2-rr-card__more {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ssv2-tone, #790000);
	padding-top: 6px;
}

@media (max-width: 1024px) {
	.ssv2-rr__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ssv2-rr__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.ssv2-rr__grid,
	.ssv2-rr__grid--two,
	.ssv2-rr__grid--one {
		grid-template-columns: minmax(0, 1fr);
	}
	.ssv2-related-reading {
		padding: 56px 0 48px;
	}
	.ssv2-rr-card__body { padding: 20px 20px 22px; }
	.ssv2-rr-card__title { font-size: 19px; }
}