/* ==========================================================================
   WP Mojster — Service-page styles (enqueued only on the service template)
   Ported card by card from design-reference/service-template/: hero, intro,
   problems, solutions, included, process, benefits, related, FAQ, final CTA.
   Breakpoints: 640 / 768 / 1024 only (tokens.css rule).
   ========================================================================== */

/* ---- Shared section rhythm & heading scale ---- */
.svc-intro,
.svc-problems,
.svc-solutions,
.svc-included,
.svc-process,
.svc-benefits,
.svc-related,
.svc-faq,
.contact-cta {
	padding-top: var(--section-pad-mobile);
	padding-bottom: var(--section-pad-mobile);
}

.svc-hero .eyebrow,
.svc-intro .eyebrow,
.svc-problems .eyebrow,
.svc-solutions .eyebrow,
.svc-included .eyebrow,
.svc-process .eyebrow,
.svc-benefits .eyebrow,
.svc-related .eyebrow,
.svc-faq .eyebrow,
.contact-cta .eyebrow { margin-bottom: 12px; }

.svc-h2 {
	font-size: var(--text-lg);
	font-weight: 700;
	margin-bottom: 12px;
	max-width: 24em;
}
.svc-h2 mark {
	background: var(--color-primary-tint);
	color: var(--color-primary-strong);
	padding: 1px 6px;
	border-radius: 5px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.svc-problems .lead,
.svc-solutions .lead,
.svc-included .lead,
.svc-process .lead,
.svc-related .lead,
.svc-benefits .lead,
.svc-faq .lead {
	font-size: 16px;
	color: var(--color-text-muted);
	max-width: 60ch;
}

@media (min-width: 768px) {
	.svc-intro,
	.svc-problems,
	.svc-solutions,
	.svc-included,
	.svc-process,
	.svc-benefits,
	.svc-related,
	.svc-faq,
	.contact-cta {
		padding-top: var(--section-pad);
		padding-bottom: var(--section-pad);
	}
	.svc-h2 { font-size: var(--text-xl); }
	.svc-h2 mark { padding: 1px 8px; border-radius: 6px; }
	.svc-problems .lead,
	.svc-solutions .lead,
	.svc-included .lead,
	.svc-process .lead,
	.svc-related .lead,
	.svc-benefits .lead,
	.svc-faq .lead { font-size: 18px; }
}

/* ==========================================================================
   Hero — paper band with a static petrol-tint radial wash behind the aside
   column. The snapshot panel sits on the report stack: offset sheets
   (pseudo-elements, static transforms, no layout shift) whose count comes
   from the content file (2 = recurring service, 1/0 = one-off).
   ========================================================================== */
.svc-hero {
	padding: 40px 0 48px;
	background:
		radial-gradient(320px 300px at 88% 78%, var(--color-primary-tint) 0%, rgba(227, 240, 243, 0) 72%)
		var(--color-paper);
}
.svc-hero .inner { display: grid; gap: var(--space-8); }

.svc-hero .crumbs { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 16px; }
.svc-hero .crumbs a {
	color: var(--color-primary);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.svc-hero .crumbs a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }
.svc-hero .crumbs .sep { margin: 0 8px; color: var(--color-border); }
.svc-hero .crumbs [aria-current] { font-weight: 500; }

.svc-hero h1 {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.18;
	margin-bottom: 12px;
}
.svc-hero h1 mark {
	background: var(--color-primary-tint);
	color: var(--color-primary-strong);
	padding: 0.02em 0.14em;
	border-radius: 4px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.svc-hero .lead {
	font-size: var(--text-base);
	line-height: 1.55;
	color: var(--color-text-muted);
	max-width: 32em;
	margin-bottom: var(--space-6);
}
.svc-hero .ctas { display: flex; flex-direction: column; gap: 14px; margin-bottom: var(--space-6); }
.svc-hero .ctas .btn { width: 100%; }
.svc-hero .email-alt { font-size: 15px; color: var(--color-text-muted); text-align: center; }
.svc-hero .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Report stack — sheets behind the panel */
.svc-hero .panel-wrap { position: relative; }
.svc-hero .panel-wrap::before,
.svc-hero .panel-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
}
.svc-hero .panel-wrap::before { transform: translate(9px, 9px) rotate(0.5deg); opacity: 0.55; }
.svc-hero .panel-wrap::after { transform: translate(4px, 4px) rotate(0.25deg); opacity: 0.8; }
.svc-hero .panel-wrap--1::before,
.svc-hero .panel-wrap--0::before,
.svc-hero .panel-wrap--0::after { content: none; }

/* Snapshot panel — cadence rows with petrol INFO pills (deliberately not
   the homepage care panel's green statuses) */
.svc-panel {
	position: relative;
	z-index: 1;
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: 0 8px 24px rgba(20, 37, 44, 0.1);
	overflow: hidden;
}
.svc-panel .phead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: 14px 20px;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface);
}
.svc-panel .site { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.svc-panel .tag { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); }
.svc-panel ul { list-style: none; padding: var(--space-2) 0; }
.svc-panel li { display: flex; align-items: center; gap: 12px; padding: 11px 20px; font-size: 15px; }
.svc-panel .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--color-primary); }
.svc-panel .lbl { flex: 1; }
.svc-panel .val {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary-strong);
	background: var(--color-primary-tint);
	border-radius: var(--radius-chip);
	padding: 2px 10px;
	white-space: nowrap;
}
/* Before → after pair rows (example values only — see hero.php):
   amber = the slow "before", success green = the measured "after". */
.svc-panel .vals { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.svc-panel .val--before { color: var(--color-accent); background: var(--color-accent-tint); font-variant-numeric: tabular-nums; }
.svc-panel .val--after { color: var(--color-success); background: var(--color-success-tint); font-variant-numeric: tabular-nums; }
.svc-panel .varrow { font-size: 12px; color: var(--color-text-muted); }
.svc-panel .pfoot {
	padding: 12px 20px 16px;
	border-top: 1px solid var(--color-border);
	font-size: 13px;
	color: var(--color-text-muted);
}
.svc-hero .stack-note {
	margin-top: 16px;
	font-size: 13px;
	color: var(--color-text-muted);
	text-align: right;
	padding-right: 4px;
}

@media (min-width: 640px) {
	.svc-hero .ctas { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-6); }
	.svc-hero .ctas .btn { width: auto; }
	.svc-hero .email-alt { text-align: left; }
}
@media (min-width: 768px) {
	.svc-hero {
		padding: 64px 0 72px;
		background:
			radial-gradient(640px 460px at 82% 42%, var(--color-primary-tint) 0%, rgba(227, 240, 243, 0) 72%)
			var(--color-paper);
	}
	.svc-hero .crumbs { margin-bottom: 20px; }
	.svc-hero h1 { font-size: var(--text-2xl); margin-bottom: 18px; }
	.svc-hero .lead { font-size: var(--text-md); line-height: 1.5; margin-bottom: 28px; }
	.svc-hero .panel-wrap::before { transform: translate(16px, 16px) rotate(0.6deg); }
	.svc-hero .panel-wrap::after { transform: translate(8px, 8px) rotate(0.3deg); }
	.svc-hero .stack-note { margin-top: 26px; }
}
@media (min-width: 1024px) {
	.svc-hero .inner { grid-template-columns: 1.25fr 1fr; gap: var(--space-16); align-items: center; }
}

/* ==========================================================================
   Short intro — surface band: heading + prose left, fit-check panel right
   (hero snapshot anatomy, lighter elevation, halo markers, redirect footer).
   ========================================================================== */
.svc-intro { background: var(--color-surface); border-top: 1px solid var(--color-border); }
.svc-intro .inner { display: grid; gap: var(--space-8); }
.svc-intro .svc-h2 { margin-bottom: 14px; }
.svc-intro .intro-copy { font-size: 16px; color: var(--color-text-muted); line-height: 1.6; }
.svc-intro .intro-copy + .intro-copy { margin-top: 14px; }

.fitpanel {
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: 0 6px 20px rgba(20, 37, 44, 0.07);
	overflow: hidden;
}
.fitpanel .phead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	padding: 14px 18px;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface);
}
.fitpanel .lbl { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.fitpanel .tag { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); white-space: nowrap; }
.fitpanel .fit { list-style: none; }
.fitpanel .fit li { position: relative; padding: 14px 18px 14px 52px; font-size: 15px; color: var(--color-text); }
.fitpanel .fit li + li { border-top: 1px solid var(--color-border); }
/* Halo marker: primary-tint circle + petrol info dot, zero icons */
.fitpanel .fit li::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 17px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--color-primary-tint);
}
.fitpanel .fit li::after {
	content: "";
	position: absolute;
	left: 24px;
	top: 23px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-primary);
}
.fitpanel .fit li b { font-weight: 600; color: var(--color-ink); }
/* Wrong-page redirect — the panel's last row; amber on non-urgent pages */
.fitpanel .redirect {
	background: var(--color-accent-tint);
	border-top: 1px solid var(--color-border);
	padding: 14px 18px;
	font-size: var(--text-sm);
	line-height: 1.6;
	color: var(--color-text);
}
.fitpanel .redirect--plain { background: var(--color-surface); }
.fitpanel .redirect b { font-weight: 600; color: var(--color-ink); }
.fitpanel .redirect b::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);
	margin-right: 9px;
	vertical-align: 1px;
}
.fitpanel .redirect--plain b::before { background: var(--color-primary); }
.fitpanel .redirect a {
	color: var(--color-primary);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.fitpanel .redirect a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }

@media (min-width: 768px) {
	.svc-intro .intro-copy { font-size: 18px; }
	.svc-intro .intro-copy + .intro-copy { font-size: 16px; }
	.fitpanel .phead { padding: 14px 22px; }
	.fitpanel .fit li { padding: 16px 22px 16px 60px; font-size: 16px; }
	.fitpanel .fit li::before { left: 22px; top: 19px; width: 22px; height: 22px; }
	.fitpanel .fit li::after { left: 29px; top: 26px; }
	.fitpanel .redirect { padding: 16px 22px; font-size: 15px; }
}
@media (min-width: 1024px) {
	.svc-intro .inner { grid-template-columns: 5fr 7fr; gap: var(--space-16); align-items: start; }
}

/* ==========================================================================
   Main problems — paper band: the tokens problem item (amber ✕ circle)
   extended with a bold H3 symptom title; bridge line hands over to the
   solutions section. Nothing here is a link — no hover states.
   ========================================================================== */
.svc-problems { background: var(--color-paper); border-top: 1px solid var(--color-border); }
.svc-problems .pgrid { display: grid; gap: 14px; margin-top: var(--space-8); }
.pitem {
	display: flex;
	gap: 14px;
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: 16px 18px;
	box-shadow: var(--shadow-card);
}
.pitem .x {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--color-accent-tint);
	color: var(--color-accent);
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 3px;
}
.pitem h3 { font-size: 16px; font-weight: 600; line-height: 1.35; margin-bottom: 4px; }
.pitem p { font-size: 15px; color: var(--color-text-muted); }
.svc-problems .bridge { margin-top: 28px; font-size: 15px; max-width: 60ch; }
.svc-problems .bridge b { font-weight: 600; color: var(--color-ink); }

@media (min-width: 640px) {
	.svc-problems .pgrid { grid-template-columns: 1fr 1fr; gap: 20px var(--grid-gutter); }
}
@media (min-width: 768px) {
	.svc-problems .pgrid { margin-top: 44px; }
	.pitem { padding: 20px 24px; gap: var(--space-4); }
	.pitem h3 { font-size: 17px; }
	.svc-problems .bridge { margin-top: 36px; font-size: 16px; }
}

/* ==========================================================================
   What WP Mojster does — the petrol-wash band (tint fading to surface):
   the one place the brand color owns the background. Answer cards carry a
   filled ✓ badge + cadence pill; the H2 mark flips to the paper variant.
   ========================================================================== */
.svc-solutions {
	background: linear-gradient(180deg, var(--color-primary-tint) 0, var(--color-primary-tint) 72px, var(--color-surface) 380px);
	border-top: 1px solid var(--color-border);
}
.svc-solutions .eyebrow { color: var(--color-primary-strong); }
.svc-solutions .svc-h2 mark {
	background: var(--color-paper);
	color: var(--color-primary-strong);
	box-shadow: 0 1px 2px rgba(20, 37, 44, 0.08);
}
.svc-solutions .sgrid { display: grid; gap: 14px; margin-top: var(--space-8); }
.sitem {
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: 16px 18px;
	box-shadow: var(--shadow-card);
}
.sitem .srow { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sitem .ok {
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sitem .pill {
	margin-left: auto;
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-primary-strong);
	background: var(--color-primary-tint);
	border-radius: var(--radius-chip);
	padding: 3px 10px;
	white-space: nowrap;
}
.sitem h3 { font-size: 16px; font-weight: 600; line-height: 1.35; margin-bottom: 4px; }
.sitem p { font-size: 15px; color: var(--color-text-muted); }
/* Closing report line — the proof-artifact pill closes the cadence set */
.svc-solutions .report-line { margin-top: 28px; max-width: 64ch; }
.svc-solutions .report-line .pill {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-primary-strong);
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-chip);
	padding: 3px 10px;
	white-space: nowrap;
	margin-bottom: var(--space-2);
}
.svc-solutions .report-line p { font-size: 15px; }
.svc-solutions .report-line b { font-weight: 600; color: var(--color-ink); }

@media (min-width: 640px) {
	.svc-solutions .sgrid { grid-template-columns: 1fr 1fr; gap: 20px var(--grid-gutter); }
	.svc-solutions .report-line { display: flex; align-items: baseline; gap: 12px; }
	.svc-solutions .report-line .pill { flex: none; margin-bottom: 0; }
}
@media (min-width: 768px) {
	.svc-solutions {
		background: linear-gradient(180deg, var(--color-primary-tint) 0, var(--color-primary-tint) 96px, var(--color-surface) 520px);
	}
	.svc-solutions .sgrid { margin-top: 44px; }
	.sitem { padding: 20px 24px; }
	.sitem .srow { margin-bottom: 12px; }
	.sitem .ok { width: 26px; height: 26px; }
	.sitem h3 { font-size: 17px; }
	.svc-solutions .report-line { margin-top: 36px; }
	.svc-solutions .report-line p { font-size: 16px; }
}

/* ==========================================================================
   What's included — the spec sheet: CSS-counter line numbers 01–08 in
   petrol tabular numerals, invoice-style sum row under one heavier rule,
   dashed "Agreed separately" boundary tile (dashed = outside this scope).
   ========================================================================== */
.svc-included { background: var(--color-paper); border-top: 1px solid var(--color-border); }
.svc-included .cols { display: grid; gap: 28px; margin-top: var(--space-8); }
.svc-included .speclabel {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	color: var(--color-text-muted);
	margin-bottom: 6px;
}
.svc-included .spec { list-style: none; counter-reset: spec; }
.svc-included .spec li {
	counter-increment: spec;
	display: grid;
	grid-template-columns: 30px 1fr;
	padding: 16px 0 15px;
	border-bottom: 1px solid var(--color-border);
}
.svc-included .spec li::before {
	content: counter(spec, decimal-leading-zero);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary);
	font-variant-numeric: tabular-nums;
	padding-top: 3px;
}
.svc-included .spec li b {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-ink);
	line-height: 1.35;
	margin-bottom: 2px;
}
.svc-included .spec li span { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
.svc-included .spec li b,
.svc-included .spec li span { grid-column: 2; }
/* The sheet's last row drops its hairline — the sum row's heavier rule is
   the closing line (the two would otherwise stack) */
.svc-included .spec li:last-child { border-bottom: none; padding-bottom: 0; }
.svc-included .sum {
	margin-top: var(--space-4);
	border-top: 2px solid var(--color-ink);
	padding: 16px 0 0 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
}
.svc-included .sum b { font-size: 16px; font-weight: 600; color: var(--color-ink); }
.svc-included .sum span { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Agreed separately: the dashed boundary tile */
.svc-included .sep {
	border: 1.5px dashed var(--color-border);
	background: var(--color-surface);
	border-radius: var(--radius-card);
	padding: 20px;
}
.svc-included .seplabel {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	color: var(--color-text-muted);
	margin-bottom: 14px;
}
.svc-included .sep ul { list-style: none; margin-bottom: 18px; }
.svc-included .sep li { position: relative; padding: 7px 0 7px 20px; font-size: 15px; color: var(--color-text); }
.svc-included .sep li::before { content: "—"; position: absolute; left: 0; color: var(--color-text-muted); }
.svc-included .sepnote {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	border-top: 1px dashed var(--color-border);
	padding-top: 16px;
	line-height: 1.6;
}
.svc-included .sepnote b { font-weight: 600; color: var(--color-ink); }

@media (min-width: 768px) {
	.svc-included .cols { margin-top: 44px; }
	.svc-included .spec { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
	.svc-included .spec li { grid-template-columns: 34px 1fr; }
	.svc-included .spec li:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
	.svc-included .spec li b { font-size: 16px; }
	.svc-included .sum { padding-left: 34px; }
	.svc-included .sep { padding: 26px 28px; }
}
@media (min-width: 1024px) {
	.svc-included .cols { grid-template-columns: 7fr 5fr; gap: var(--space-16); align-items: start; }
}

/* ==========================================================================
   Process — the approved timeline anatomy with service steps: handover
   flow line out of step 1, petrol loop field + echo-ring badge + ghost
   dots on a repeating step, mini-level-mark phase labels (only when the
   content provides them). Vertical rail below 1024px.
   ========================================================================== */
.svc-process { background: var(--color-surface); }
.svc-process .lead { margin-bottom: 40px; }
.svc-process .steps { list-style: none; }
.svc-process .step {
	position: relative;
	display: grid;
	grid-template-columns: 40px 1fr;
	column-gap: var(--space-4);
	padding-bottom: 36px;
}
.svc-process .step:last-child { padding-bottom: 0; }
.svc-process .phase {
	grid-column: 1 / -1;
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	color: var(--color-text-muted);
	margin-bottom: 14px;
}
.svc-process .phase::before {
	content: "";
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	margin-bottom: 8px;
}
.svc-process .phase:empty { display: none; }
.svc-process .step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 48px;
	bottom: 10px;
	width: 2px;
	background: var(--color-border);
}
/* Handover flow line: petrol drains out of the segment leaving step 1 */
.svc-process .step:first-child::before {
	top: 92px;
	background: linear-gradient(180deg, var(--color-primary), var(--color-border) 75%);
}
.svc-process .step:has(+ .step--repeat)::before { bottom: 12px; }
.svc-process .badge {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-base);
	font-weight: 700;
	background: var(--color-primary-tint);
	color: var(--color-primary-strong);
}
.svc-process .step:first-child .badge { background: var(--color-primary); color: #fff; }
.svc-process .body { padding-top: 6px; }
.svc-process .you {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	color: var(--color-primary);
	margin-bottom: var(--space-1);
}
.svc-process .you:empty { display: none; }
.svc-process .step h3 { font-size: 18px; font-weight: 600; line-height: 1.3; margin-bottom: 6px; }
.svc-process .step p { font-size: 15px; color: var(--color-text-muted); }
/* Monthly loop field — the recurring step arrives somewhere */
.svc-process .step--repeat {
	background: var(--color-primary-tint);
	border-radius: 14px;
	padding: 18px 16px 26px;
	margin: 6px -16px 0;
}
.svc-process .step--repeat .phase { color: var(--color-primary-strong); }
.svc-process .step--repeat .badge {
	background: var(--color-paper);
	color: var(--color-primary-strong);
	box-shadow:
		0 0 0 5px rgba(11, 114, 133, 0.18),
		0 52px 0 -8px rgba(11, 114, 133, 0.16),
		0 92px 0 -12px rgba(11, 114, 133, 0.09);
}
.svc-process .step--repeat p { color: var(--color-text); }
/* Arrival field — one-off timelines end by arriving (approved card:
   design-reference/service-template/process-oneoff.html): the final step
   sits on the tint with no ghost dots (nothing repeats — the job ends),
   and the rail regains its petrol on approach, mirroring the handover
   drain out of step 1. Scoped to single-phase timelines so maintenance
   pages keep the loop field untouched. */
.svc-process .steps--nophase .step:has(+ .step:last-child)::before {
	bottom: 12px;
	background: linear-gradient(180deg, var(--color-border) 25%, var(--color-primary));
}
.svc-process .steps--nophase .step:last-child {
	background: var(--color-primary-tint);
	border-radius: 14px;
	padding: 18px 16px 24px;
	margin: 6px -16px 0;
}
.svc-process .steps--nophase .step:last-child .badge {
	background: var(--color-paper);
	color: var(--color-primary-strong);
	box-shadow: 0 0 0 5px rgba(11, 114, 133, 0.18);
}
.svc-process .steps--nophase .step:last-child .you { color: var(--color-primary-strong); }
.svc-process .steps--nophase .step:last-child p { color: var(--color-text); }
.svc-process .ctarow {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	margin-top: 40px;
	text-align: center;
}
.svc-process .or { font-size: 15px; color: var(--color-text-muted); }

@media (min-width: 768px) {
	.svc-process .lead { margin-bottom: 56px; }
}
@media (min-width: 1024px) {
	.svc-process .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 32px; }
	.svc-process .step { display: block; padding-bottom: 0; }
	/* Fixed-height phase slot on every step keeps the badges on one line */
	.svc-process .phase,
	.svc-process .phase:empty { display: block; height: 34px; margin-bottom: 10px; }
	.svc-process .phase:empty::before { content: none; }
	.svc-process .step:not(:last-child)::before {
		top: 63px;
		left: 56px;
		right: -32px;
		bottom: auto;
		width: auto;
		height: 2px;
	}
	.svc-process .step:first-child::before {
		background: linear-gradient(90deg, var(--color-primary), var(--color-border) 75%);
	}
	.svc-process .step:has(+ .step--repeat)::before { right: -4px; }
	/* Single-phase timelines (one-off services) render no phase slot, so the
	   connector re-anchors to the badge center: 40px badge / 2, minus 1px. */
	.svc-process .steps--nophase .step:not(:last-child)::before { top: 19px; }
	/* Arrival field, desktop: the connector into the field regains petrol
	   and stops short of its edge; the field takes the column geometry. */
	.svc-process .steps--nophase .step:has(+ .step:last-child)::before {
		right: -4px;
		bottom: auto;
		background: linear-gradient(90deg, var(--color-border) 25%, var(--color-primary));
	}
	.svc-process .steps--nophase .step:last-child { padding: 24px 20px; margin: -24px -20px; }
	.svc-process .badge { margin-bottom: 18px; }
	.svc-process .body { padding-top: 0; }
	.svc-process .you { display: block; min-height: 24px; margin-bottom: 0; }
	.svc-process .you:empty { display: block; }
	.svc-process .step p { max-width: 38ch; }
	.svc-process .step--repeat { padding: 24px 20px; margin: -24px -20px; }
	.svc-process .step--repeat .badge {
		box-shadow:
			0 0 0 5px rgba(11, 114, 133, 0.18),
			56px 0 0 -8px rgba(11, 114, 133, 0.16),
			100px 0 0 -12px rgba(11, 114, 133, 0.09);
	}
	.svc-process .ctarow {
		flex-direction: row;
		align-items: center;
		gap: 20px;
		margin-top: 56px;
		text-align: left;
	}
}

/* ==========================================================================
   Benefits / outcomes — before→after flow: heading + retired-routine
   stack left (the old routines struck through in petrol, fading step by
   step), the elevated outcome sheet right (petrol top rule, hairline
   quadrant dividers), cells opening directly with the outcome.
   ========================================================================== */
.svc-benefits { background: var(--color-paper); border-top: 1px solid var(--color-border); }
.svc-benefits .inner { display: grid; gap: var(--space-8); }
.svc-benefits .svc-h2 { margin-bottom: 14px; }
/* The petrol strike — the section's signature */
.svc-benefits s {
	text-decoration-line: line-through;
	text-decoration-color: var(--color-primary);
	text-decoration-thickness: 1.5px;
}
.svc-benefits .sheet {
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--color-primary);
	border-radius: var(--radius-card);
	box-shadow: 0 6px 20px rgba(20, 37, 44, 0.08);
	overflow: hidden;
}
.svc-benefits .shead {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 12px;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	padding: 12px 18px;
}
.svc-benefits .shead b {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	color: var(--color-ink);
}
.svc-benefits .shead span { font-size: 13px; color: var(--color-text-muted); }
.svc-benefits .bgrid { display: grid; }
.svc-benefits .scell { padding: 20px 18px 22px; }
.svc-benefits .scell:not(:last-child) { border-bottom: 1px solid var(--color-border); }
/* Retired-routine stack — the strikes at column scale, each line a step
   further gone; the heading column ends with content, not air */
.svc-benefits .retired { margin-top: 28px; }
.svc-benefits .rlabel {
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	color: var(--color-text-muted);
	margin-bottom: 6px;
}
.svc-benefits .rlabel::before {
	content: "";
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	margin-bottom: 8px;
}
.svc-benefits .retired ul { list-style: none; margin: 0; padding: 0; }
.svc-benefits .retired li {
	font-size: 15px;
	color: var(--color-text);
	padding: 11px 0;
	border-bottom: 1px solid var(--color-border);
}
.svc-benefits .retired li:last-child { border-bottom: none; }
/* Fade floor: ink at 0.70 on paper is 5.04:1 — below 0.68 the last line
   drops under the 4.5:1 WCAG minimum (muted-base ladder failed at 0.76). */
.svc-benefits .retired li:nth-child(2) { opacity: 0.9; }
.svc-benefits .retired li:nth-child(3) { opacity: 0.8; }
.svc-benefits .retired li:nth-child(4) { opacity: 0.7; }
.svc-benefits .scell h3 { font-size: 19px; font-weight: 600; line-height: 1.3; margin-bottom: var(--space-2); }
.svc-benefits .scell p { font-size: 15px; color: var(--color-text-muted); }

@media (min-width: 768px) {
	.svc-benefits .shead { padding: 12px 24px; }
	.svc-benefits .bgrid { grid-template-columns: 1fr 1fr; }
	.svc-benefits .scell { padding: 26px 30px 28px; border-bottom: 0; }
	.svc-benefits .scell:nth-child(odd) { border-right: 1px solid var(--color-border); }
	.svc-benefits .scell:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }
}
@media (min-width: 1024px) {
	.svc-benefits .inner { grid-template-columns: 5fr 7fr; gap: var(--space-16); align-items: start; }
	.svc-benefits .retired { margin-top: 40px; }
}

/* ==========================================================================
   Related services — surface band: the approved service-card component
   with signpost tabs (fit lines pinned to the card tops), petrol junction
   lines making the handoff visible (≥1024px; a single stem below), and
   the tinted fourth-route strip to the contact form.
   ========================================================================== */
.svc-related { background: var(--color-surface); }

/* Junction — stem out of the lead, split bar, three drops into the tabs */
.svc-related .junction { display: none; }
.svc-related .mstem {
	width: 2px;
	height: 32px;
	margin: 8px auto 0;
	background: linear-gradient(180deg, var(--color-primary), rgba(11, 114, 133, 0.35));
}
.svc-related .rgrid { display: grid; gap: 30px; }
.svc-related .svc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: var(--space-6);
	box-shadow: var(--shadow-card);
	transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.svc-related .svc-card:hover,
.svc-related .svc-card:focus-within { border-color: var(--color-primary); box-shadow: var(--shadow-card-hover); }
/* Signpost tab — the fit line pinned to the card's top edge; the surface
   ring lets it visibly break the card border (the tab is not the link) */
.svc-related .fit {
	align-self: center;
	position: relative;
	z-index: 1;
	margin: -37px 0 10px;
	background: var(--color-primary-tint);
	color: var(--color-primary-strong);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	padding: 5px 14px;
	border-radius: var(--radius-chip);
	box-shadow: 0 0 0 4px var(--color-surface);
	text-align: center;
}
.svc-related .svc-card h3 { font-size: 20px; font-weight: 600; line-height: 1.3; margin-bottom: var(--space-2); }
.svc-related .svc-card p { font-size: 15px; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.svc-related .svc-card .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.svc-related .svc-card .chip { font-size: 13px; padding: 3px 10px; }
.svc-related .svc-card .chip::before { width: 7px; height: 7px; }
.svc-related .cardlink { margin-top: auto; font-size: 15px; font-weight: 600; color: var(--color-primary); text-decoration: none; }
.svc-related .cardlink::after { content: ""; position: absolute; inset: 0; }
.svc-related .cardlink:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
/* Fourth route — for the visitor none of the cards fit */
.svc-related .route4 {
	margin-top: 28px;
	background: var(--color-primary-tint);
	border-left: 3px solid var(--color-primary);
	border-radius: var(--radius-btn);
	padding: 14px 20px;
	font-size: 15px;
	color: var(--color-text);
}
.svc-related .route4 a {
	color: var(--color-primary-strong);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.svc-related .route4 a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }

@media (min-width: 640px) {
	.svc-related .rgrid { grid-template-columns: 1fr 1fr; gap: 30px var(--grid-gutter); }
}
@media (min-width: 768px) {
	.svc-related .route4 { margin-top: 36px; font-size: 16px; }
}
@media (min-width: 1024px) {
	.svc-related .mstem { display: none; }
	.svc-related .junction { display: block; position: relative; height: 72px; margin-top: 8px; }
	.svc-related .junction::before {
		content: "";
		position: absolute;
		left: calc(50% - 1px);
		top: 0;
		width: 2px;
		height: 34px;
		background: var(--color-primary);
	}
	.svc-related .junction::after {
		content: "";
		position: absolute;
		top: 34px;
		left: calc((100% - 48px) / 6);
		right: calc((100% - 48px) / 6);
		height: 2px;
		background: linear-gradient(90deg, rgba(11, 114, 133, 0.35), var(--color-primary) 38%, var(--color-primary) 62%, rgba(11, 114, 133, 0.35));
	}
	.svc-related .junction span { position: absolute; top: 34px; width: 2px; height: 38px; }
	.svc-related .junction .d1 { left: calc((100% - 48px) / 6 - 1px); background: rgba(11, 114, 133, 0.35); }
	.svc-related .junction .d2 { left: calc(50% - 1px); background: linear-gradient(180deg, var(--color-primary), rgba(11, 114, 133, 0.35)); }
	.svc-related .junction .d3 { right: calc((100% - 48px) / 6 - 1px); background: rgba(11, 114, 133, 0.35); }
	.svc-related .rgrid { grid-template-columns: 1fr 1fr 1fr; gap: var(--grid-gutter); }
}

/* ==========================================================================
   Service FAQ — paper band (the homepage FAQ sits on surface; band
   alternation only). Component styles live in tokens.css; layout mirrors
   the homepage: heading left, panel right, "Just ask" under the heading.
   ========================================================================== */
.svc-faq { background: var(--color-paper); border-top: 1px solid var(--color-border); }
.svc-faq .inner { display: grid; gap: 28px; }
.svc-faq .svc-h2 { margin-bottom: 14px; }
.svc-faq .faq-answer { font-size: 15px; }
.svc-faq .ask { font-size: 15px; }

@media (max-width: 639px) {
	.svc-faq .faq-item summary { padding: 15px 18px; font-size: 16px; }
	.svc-faq .faq-item .faq-answer { padding: 0 18px 15px; }
}
@media (min-width: 768px) {
	.svc-faq .ask { font-size: 16px; }
}
@media (min-width: 1024px) {
	.svc-faq .inner {
		grid-template-columns: 5fr 7fr;
		column-gap: var(--space-16);
		row-gap: var(--space-4);
		align-items: start;
	}
	.svc-faq .head { grid-column: 1; grid-row: 1; }
	.svc-faq .faq-list { grid-column: 2; grid-row: 1 / 3; }
	.svc-faq .ask { grid-column: 1; grid-row: 2; align-self: start; }
}

/* ==========================================================================
   Final contact CTA — the approved on-ink band (same anatomy as the
   homepage; service pages load only this sheet, so the styles live here
   too). Mobile order: heading, form card, tiles, urgent note.
   ========================================================================== */
.contact-cta {
	color: var(--color-text-on-ink);
	background:
		radial-gradient(360px 300px at 90% 0%, rgba(11, 114, 133, 0.35), transparent 70%),
		var(--color-ink);
}
.contact-cta .inner { display: grid; gap: var(--space-6); }
.contact-cta .eyebrow { color: var(--color-link-on-ink); }
.contact-cta .svc-h2--cta { font-size: var(--text-xl); color: #fff; margin-bottom: 14px; max-width: none; }
.contact-cta .svc-h2--cta.section-heading::before { background: var(--color-link-on-ink); }
.contact-cta .lead { font-size: 16px; color: var(--color-text-muted-on-ink); max-width: 44ch; }

/* Direct-line tiles */
.contact-cta .tiles { display: grid; gap: var(--space-3); }
.contact-cta .tile {
	border: 1px solid var(--color-border-on-ink);
	border-radius: var(--radius-card);
	padding: 18px 20px;
	background: rgba(255, 255, 255, 0.03);
	transition: border-color var(--transition-fast);
}
.contact-cta .tile:hover { border-color: var(--color-link-on-ink); }
.contact-cta .tile b {
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	color: var(--color-text-muted-on-ink);
	margin-bottom: 6px;
}
.contact-cta .tile a {
	color: var(--color-link-on-ink);
	font-weight: 600;
	font-size: 18px;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.contact-cta .tile a:focus-visible { outline: var(--focus-ring-on-ink); outline-offset: var(--focus-offset); border-radius: 2px; }
/* Phone is a tel: link but keeps the card's non-link look */
.contact-cta .tile .tile-phone { color: #fff; text-decoration: none; font-variant-numeric: tabular-nums; }

.contact-cta .urgentrow { display: flex; align-items: flex-start; gap: var(--space-3); }
.contact-cta .urgentrow .chip { flex: none; font-size: 13px; font-weight: 600; padding: 3px 12px; margin-top: 2px; }
.contact-cta .urgentrow p { font-size: 15px; color: var(--color-text-muted-on-ink); max-width: 42ch; }

/* Form card — paper on ink, headed by the process step-1 badge */
.contact-cta .formcard {
	background: var(--color-paper);
	border-radius: var(--radius-card);
	padding: var(--space-6);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.contact-cta .fhead { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.contact-cta .fbadge {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.contact-cta .fhead h3 { font-size: 20px; font-weight: 600; color: var(--color-ink); line-height: 1.25; }
.contact-cta .fhead small { display: block; font-size: 13px; font-weight: 500; color: var(--color-text-muted); }

.contact-form .field-input { margin-bottom: var(--space-4); }
.contact-form textarea.field-input { min-height: 110px; resize: vertical; }
.contact-form .frow { display: grid; gap: 0 var(--space-4); }
.contact-form .btn { width: 100%; }
/* The card is paper, so the focus ring inside it is petrol, not the
   on-ink white (overrides the .on-ink rule from tokens.css). */
.contact-cta .formcard .btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.contact-form .f-note { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-3); text-align: center; }

@media (min-width: 640px) {
	.contact-cta .tiles { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
	.contact-form .frow { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
	.contact-cta {
		background:
			radial-gradient(640px 420px at 78% 12%, rgba(11, 114, 133, 0.35), transparent 70%),
			radial-gradient(520px 380px at 4% 100%, rgba(11, 114, 133, 0.18), transparent 70%),
			var(--color-ink);
	}
	.contact-cta .svc-h2--cta { font-size: var(--text-2xl); }
	.contact-cta .lead { font-size: 18px; }
	.contact-cta .tile a { font-size: 19px; }
	.contact-cta .formcard { padding: var(--space-8); }
}
@media (min-width: 1024px) {
	.contact-cta .inner {
		grid-template-columns: 6fr 6fr;
		column-gap: var(--space-16);
		row-gap: 28px;
		align-items: start;
	}
	.contact-cta .head,
	.contact-cta .tiles,
	.contact-cta .urgentrow { grid-column: 1; }
	.contact-cta .formcard { grid-column: 2; grid-row: 1 / 4; }
}