/* =============================================================================
   service.css: v2 layout for the generic service-page template and the two
   surgical additions on the PIV showpiece template (hero CTAs, related cards).

   Enqueued as `samson-service` on template-service.php AND
   template-service-piv.php, after samson-pages (see inc/enqueue.php), so this
   file is the ONLY stylesheet guaranteed to load on both, which is why the
   shared .related-cards partial is styled here rather than in pages.css.

   Mobile-first. Breakpoints at 700px and 1080px. Tokens only from
   critical.css :root (palette, --s1..--s12, --sec-pad, --r-tile/--r-btn/
   --r-pill, --shadow). Inside .band--dark the neutral tokens (--charslate,
   --slate-60, --line) already re-scope themselves (critical.css), so this
   file uses them literally everywhere without a single dark-mode override.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   .btn-sm (SPEC-V4 section C.1): the small outline-button variant used by the
   cutaway hotspot "See the fix" links (template-parts/blocks/cutaway.php).
   Global critical.css/main.css did not define this class at verify time, so
   it is added here, scoped, per this round's instructions; if a global
   .btn-sm lands in a later pass this local copy is redundant but harmless
   (identical values), and can be deleted then.
   ----------------------------------------------------------------------------- */
.btn-sm {
	padding: 0.55em 0.95em;
	font-size: 0.9rem;
}

/* -----------------------------------------------------------------------------
   Shared heading treatment for this file's H2s (kept local and explicit
   rather than reusing pages.css's selector list, so this file has no hidden
   dependency on a stylesheet it does not own).
   ----------------------------------------------------------------------------- */
.svc-highlights__title,
.svc-process__title,
.svc-good__title,
.svc-guarantee__title,
.svc-stages__title,
.svc-related__title {
	font-family: var(--ff-display, "Plus Jakarta Sans", system-ui, sans-serif);
	font-weight: 800;
	font-size: clamp(1.875rem, 3.6vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -0.005em;
}

/* -----------------------------------------------------------------------------
   Hero: h1 + lead + treats chips + CTA pair, hero visual right. v2.2 navy
   hero restyle: same uniform, tight padding recipe as every other
   inner-page hero (pages.css .page-hero, area.css .area-hero, problem.css
   .problem-hero).
   ----------------------------------------------------------------------------- */
.svc-hero {
	padding-block: clamp(48px, 6vw, 84px);
}

.svc-hero__inner {
	display: grid;
	gap: var(--s8);
	align-items: start;
}

.svc-hero__title {
	font-family: var(--ff-display, "Plus Jakarta Sans", system-ui, sans-serif);
	font-weight: 800;
	font-size: clamp(2.25rem, 4.5vw, 3.75rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
	max-width: 20ch;
}

.svc-hero__copy {
	max-width: 62ch;
}

.svc-hero__lead {
	margin-top: var(--s5);
	color: var(--on-dark);
	max-width: 58ch;
}

/* Optional single-line guarantee note under the lead (round 14), reading as a
   ticked promise rather than another paragraph. Green ticks are the theme's
   only use of --green (DESIGN.md section 2) and it holds up on navy. */
.svc-hero__note {
	display: flex;
	align-items: flex-start;
	gap: var(--s3);
	margin-top: var(--s4);
	font-weight: 600;
	color: #FFFFFF;
}

.svc-hero__note-tick {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.15em;
	color: var(--green);
}

.svc-hero__treats-label {
	display: block;
	margin-top: var(--s6);
	color: var(--on-dark);
}

.svc-hero__treats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	list-style: none;
	padding: 0;
	margin: var(--s3) 0 0;
}

/* .pill is a shared component also used on light grounds elsewhere (areas
   hub pills), so it is not touched globally; scoped here to the outline-on-
   dark pattern critical.css's own .band--dark .btn-outline already uses
   (literal white, not the var(--blue)/var(--blue-deep) tokens .pill reads
   by default, which are unaffected by the .band--dark remap and would be
   near-invisible on navy). */
.svc-hero__treats .pill {
	background: transparent;
	color: #FFFFFF;
	border-color: #FFFFFF;
}

.svc-hero__treats .pill:hover {
	background: rgba(255, 255, 255, .1);
	color: #FFFFFF;
	border-color: #FFFFFF;
}

.svc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s4);
	margin-top: var(--s7);
}

.svc-hero__actions .samson-icon {
	width: 1.2em;
	height: 1.2em;
}

/* Framed as a card so the photo reads as sitting intentionally on the navy
   hero (DESIGN.md section 4 card anatomy, 16px radius): --shadow-card is
   tuned for light grounds and all but disappears against navy, so the
   elevation here is a literal dark-appropriate shadow instead; the border
   reads var(--line), which .band--dark already remaps to a translucent
   white hairline (critical.css), giving a light frame edge for free. */
.svc-hero__media {
	margin: 0;
	border-radius: var(--r-card);
	overflow: hidden;
	background: var(--sky);
	/* Landscape by default; a service whose hero photograph is portrait sets
	   --hero-ratio inline from its service data so the shot is not cropped to
	   a letterbox (DESIGN.md section 6.4: art-direct every photo). */
	aspect-ratio: var(--hero-ratio, 5 / 4);
	max-height: 60vh;
	border: 1px solid var(--line);
	box-shadow: 0 20px 44px -18px rgba(6, 16, 32, .5);
}

.svc-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.svc-hero__media .samson-img-placeholder {
	width: 100%;
	height: 100%;
	border-radius: 0;
	aspect-ratio: auto;
}

/* -----------------------------------------------------------------------------
   Highlights: 4 designed blocks, skytint cards with a drawn mark and one bold
   line each (not plain paragraphs). Equal heights via grid row stretch.
   ----------------------------------------------------------------------------- */
.svc-highlights__title {
	margin-bottom: var(--s7);
}

.svc-highlights__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s5);
	list-style: none;
	padding: 0;
	margin: 0;
}

/* SPEC-V4 section I.1: illustrations were icon-sized (3rem); they now fill
   the card width at the top, like the homepage room tiles (.home-room__frame
   in home.css: full-width image frame, then the line of text), so the
   card's own padding moves off the <li> and onto the text line instead. */
.svc-highlight {
	display: flex;
	flex-direction: column;
	background: var(--sky);
	border-radius: var(--r-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	transition: transform .18s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.svc-highlight:hover {
		transform: translateY(-4px);
	}
}

.svc-highlight__media {
	/* Round 6 defect 3: most illustrations already bake in the pale sky-tint
	   canvas (v1 #E7F2F6, now retinted toward v2 --sky #F1F6FA via .ill-retint
	   on the <img> itself, see pages.css), so a white frame behind them showed
	   as a mismatched rectangle wherever an illustration's own canvas was
	   white. Sky matches the baked-in canvas, so every card reads as one
	   continuous tinted frame like the homepage room tiles. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--sky);
	padding: var(--s6);
}

.svc-highlight__media:empty {
	display: none;
}

.svc-highlight__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* A client photograph fills the frame edge to edge instead of floating inside
   the padded sky well the line illustrations need (round 18). */
.svc-highlight__media--photo {
	padding: 0;
}

.svc-highlight__media--photo .svc-highlight__img {
	object-fit: cover;
}

.svc-highlight__media .samson-img-placeholder {
	width: 100%;
	height: 100%;
	border-radius: 0;
	aspect-ratio: auto;
}

.svc-highlight__line {
	margin: 0;
	padding: var(--s5) var(--s6) var(--s6);
	font-family: var(--ff-display, "Plus Jakarta Sans", system-ui, sans-serif);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--navy);
}

/* Titled variant (round 14, damp-proof-course): the card carries a heading and
   a paragraph instead of one line, so the illustration frame gives back some
   height and the text block takes the card's padding. Untitled cards on the
   other five services are untouched. */
.svc-highlight--titled .svc-highlight__media {
	aspect-ratio: 16 / 10;
	padding: var(--s5);
}

.svc-highlight--titled .svc-highlight__media--photo {
	padding: 0;
}

.svc-highlight__body {
	padding: var(--s5) var(--s6) var(--s6);
}

.svc-highlight__title {
	font-family: var(--ff-display, "Plus Jakarta Sans", system-ui, sans-serif);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--navy);
}

.svc-highlight__text {
	margin: var(--s3) 0 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--slate);
}

/* -----------------------------------------------------------------------------
   Guarantee band (optional): the client's guarantee emblem beside a short
   statement and the mid-page CTA pair. Sky ground, so it sits between the
   daylight highlights band and the navy process band without breaking the
   band-alternation rule (DESIGN.md section 6.7).
   ----------------------------------------------------------------------------- */
.svc-guarantee__inner {
	display: grid;
	gap: var(--s7);
	align-items: center;
}

.svc-guarantee__badge {
	display: flex;
	justify-content: center;
}

.svc-guarantee__img {
	width: 100%;
	max-width: 220px;
	height: auto;
	display: block;
}

.svc-guarantee__title {
	margin-top: var(--s3);
}

.svc-guarantee__body {
	margin: var(--s5) 0 0;
	color: var(--slate);
}

.svc-guarantee__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s4);
	margin-top: var(--s6);
}

.svc-guarantee__actions .samson-icon {
	width: 1.2em;
	height: 1.2em;
}

/* Staggered reveal: each card carries its own --rd offset inline. Only takes
   effect where the global reveal system has already applied the transition
   (main.css, gated behind (scripting: enabled)). */
@media (scripting: enabled) {
	.svc-highlight[data-reveal],
	.svc-process__step[data-reveal],
	.related-card[data-reveal] {
		transition-delay: var(--rd, 0ms);
	}
}

/* -----------------------------------------------------------------------------
   Process (charslate band): numbered steps left, illustration or the
   animated DPC scene right.
   ----------------------------------------------------------------------------- */
.svc-process__inner {
	display: grid;
	gap: var(--s8);
}

.svc-process__title {
	margin-bottom: var(--s6);
}

.svc-process__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s6);
}

/* This is a white-ground card nested inside .band--dark. .svc-process__body
   below reads its text colour from var(--slate), a :root-level token
   .band--dark never remaps (unlike the old --slate-60 alias), so no local
   re-anchor is needed for the trap here (DESIGN.md section 2). */
.svc-process__step {
	display: flex;
	gap: var(--s5);
	align-items: flex-start;
	background: var(--white);
	border-left: 4px solid var(--blue);
	border-radius: var(--r-card);
	box-shadow: var(--shadow-card);
	padding: var(--s6);
}

.svc-process__n {
	flex: none;
	min-width: 1.2em;
	font-family: var(--ff-display, "Plus Jakarta Sans", system-ui, sans-serif);
	font-weight: 800;
	font-size: clamp(2.25rem, 4vw, 3rem);
	line-height: 1;
	color: var(--blue);
	display: inline-block;
}

.svc-process__body {
	margin: 0;
	max-width: 46ch;
	color: var(--slate);
}

/* Subtle numeral pop once a step settles into view. Reduced-motion visitors
   get [data-reveal]'s instant, transition-free final state from main.css, so
   this keyframe is scoped to (prefers-reduced-motion: no-preference) and
   never fires for them. */
@media (prefers-reduced-motion: no-preference) {
	.svc-process__step.is-revealed .svc-process__n {
		animation: samson-process-n-pop 0.5s ease-out;
	}

	@keyframes samson-process-n-pop {
		0% {
			transform: scale(0.7);
		}
		60% {
			transform: scale(1.15);
		}
		100% {
			transform: scale(1);
		}
	}
}

/* Another white card nested in .band--dark, but border-color here reads
   var(--line) directly, and --line IS one of the tokens .band--dark remaps by
   its real v2 name (critical.css), not just an old alias — left alone this
   border would render as a barely-visible translucent-white hairline on a
   white card. Re-anchor to the literal light value (DESIGN.md section 2). */
.svc-process__panel {
	--line: #DCE6EF;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	box-shadow: var(--shadow-card);
	padding: var(--s6);
}

.svc-process__panel img {
	width: 100%;
	max-width: 340px;
	height: auto;
	display: block;
	margin-inline: auto;
}

/* A job photograph fills the panel edge to edge instead of sitting at 340px
   inside a padded white card, which is what the line illustrations need. */
.svc-process__panel--photo {
	padding: 0;
	overflow: hidden;
}

/* Two classes, because `.svc-process__panel img` (0,1,1) outranks a lone
   class and would keep the 340px cap that stops a line illustration
   ballooning inside the card. */
.svc-process__panel--photo .svc-process__photo {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
}

.svc-process__panel .scene-dpc {
	width: 100%;
}

.svc-process__panel .scene-dpc svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

/* Optional full-width job photograph below the process grid, still inside the
   navy band. No white card frame here: the photo is its own object, so it
   takes the translucent-white hairline .band--dark already remaps var(--line)
   to, and the caption reads --on-dark. Nothing nested needs re-anchoring. */
.svc-process__shot {
	margin: var(--s8) auto 0;
}

.svc-process__shot-img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 42%;
	display: block;
	border-radius: var(--r-card);
	border: 1px solid var(--line);
}

.svc-process__shot-cap {
	margin-top: var(--s3);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--on-dark);
}

/* -----------------------------------------------------------------------------
   Stages (optional): labelled photographs of one room at two points in the
   job. Daylight ground, so the white cards need no dark-band re-anchoring.
   ----------------------------------------------------------------------------- */
.svc-stages__head {
	display: grid;
	gap: var(--s5);
	margin-bottom: var(--s8);
}

.svc-stages__title {
	margin-top: var(--s3);
}

.svc-stages__body {
	margin: var(--s5) 0 0;
	color: var(--slate);
}

.svc-stages__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s4);
}

.svc-stages__actions .samson-icon {
	width: 1.2em;
	height: 1.2em;
}

.svc-stages__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s5);
	list-style: none;
	padding: 0;
	margin: 0;
}

.svc-stage {
	display: flex;
}

.svc-stage__fig {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.svc-stage__img {
	width: 100%;
	/* Landscape since round 16: both stage photographs are wide shots of the
	   same room, and a 4/5 portrait frame cropped the bay window out of them. */
	aspect-ratio: 4 / 3;
	max-height: 60vh;
	object-fit: cover;
	object-position: center;
	display: block;
}

.svc-stage__cap {
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	padding: var(--s5) var(--s6) var(--s6);
}

.svc-stage__label {
	font-family: var(--ff-body);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	line-height: 1.2;
	color: var(--blue);
}

.svc-stage__text {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--slate);
}

/* Scene-dpc base markup already IS the finished state: holes filled, the
   moisture line risen. This is what reduced-motion (and no-JS/no-CSS-anim)
   visitors see, per DESIGN.md/claude.md motion rules. */
.dpc-hole {
	opacity: 1;
}

.dpc-moisture {
	stroke-dasharray: 6 7;
	stroke-dashoffset: 0;
}

/* Motion only when welcome: fill the holes one after another and rise the
   dashed moisture line to meet the treated bed, slow and calm, looping every
   6s with a long rest at the settled/filled state. */
@media (prefers-reduced-motion: no-preference) {
	.dpc-hole {
		opacity: 0;
		transform-box: fill-box;
		transform-origin: center;
		animation: samson-dpc-hole 6s ease-in-out infinite;
	}
	.dpc-hole:nth-child(1) {
		animation-delay: 0s;
	}
	.dpc-hole:nth-child(2) {
		animation-delay: 0.32s;
	}
	.dpc-hole:nth-child(3) {
		animation-delay: 0.64s;
	}
	.dpc-hole:nth-child(4) {
		animation-delay: 0.96s;
	}
	.dpc-hole:nth-child(5) {
		animation-delay: 1.28s;
	}
	.dpc-hole:nth-child(6) {
		animation-delay: 1.6s;
	}
	.dpc-hole:nth-child(7) {
		animation-delay: 1.92s;
	}
	.dpc-hole:nth-child(8) {
		animation-delay: 2.24s;
	}

	.dpc-moisture {
		stroke-dashoffset: 26;
		animation: samson-dpc-rise 6s ease-in-out infinite;
	}

	@keyframes samson-dpc-hole {
		0%,
		6% {
			opacity: 0;
			transform: scale(0.5);
		}
		16% {
			opacity: 1;
			transform: scale(1.15);
		}
		24% {
			transform: scale(1);
		}
		78% {
			opacity: 1;
			transform: scale(1);
		}
		92%,
		100% {
			opacity: 0;
			transform: scale(0.5);
		}
	}

	@keyframes samson-dpc-rise {
		0%,
		8% {
			stroke-dashoffset: 26;
			opacity: 0.35;
		}
		45%,
		80% {
			stroke-dashoffset: 0;
			opacity: 1;
		}
		96%,
		100% {
			stroke-dashoffset: 26;
			opacity: 0.35;
		}
	}
}

/* -----------------------------------------------------------------------------
   Slim dark CTA band (round 6 defect 2): blocks/cta-inline.php, reused at
   every "contact prompt" waypoint on the service and PIV templates. Self
   contained band--dark section, so a repeated prompt reads as a smaller
   relative of the big foot-of-page cta-band rather than a bare button row.
   Roughly half the vertical rhythm of a full band. Placement is each caller's
   job, chosen so it never repeats the ground either side of it (DESIGN.md
   section 6.5). v2 restyle: the cta-dark.webp skyline backdrop is retired
   (DESIGN.md section 7); .cta-slim__bg has no matching <img> left in
   cta-inline.php, so the rule is removed rather than left as dead CSS — the
   band is the plain .band--dark navy gradient ground now.
   ----------------------------------------------------------------------------- */
.cta-slim {
	position: relative;
	overflow: hidden;
	padding-block: calc(var(--sec-pad, clamp(64px, 9vw, 120px)) / 2);
}

.cta-slim__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--s5);
}

.cta-slim__line {
	margin: 0;
	font-family: var(--ff-display, "Plus Jakarta Sans", system-ui, sans-serif);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.3;
}

.cta-slim__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s4);
}

/* -----------------------------------------------------------------------------
   Good to know: per-service designed band (replaces the old the_content()
   dump). A split band, full width: copy (title, body/checklist/chips) beside
   a framed illustration. Sits on skytint, between a daylight inline-CTA band
   above and the light related-help band below, so no shared-edge halving is
   needed either side (DESIGN.md section 6.5 applies only to same-ground
   neighbours).
   ----------------------------------------------------------------------------- */
.svc-good__inner {
	display: grid;
	gap: var(--s8);
	align-items: center;
}

.svc-good__title {
	margin-bottom: var(--s5);
}

.svc-good__body {
	margin: 0;
	max-width: 60ch;
	color: var(--navy);
}

.svc-good__checklist {
	list-style: none;
	padding: 0;
	margin: var(--s5) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--s3);
	max-width: 60ch;
}

.svc-good__checklist li {
	display: flex;
	gap: var(--s3);
	align-items: flex-start;
}

.svc-good__check {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.15em;
	color: var(--blue);
}

.svc-good__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	list-style: none;
	padding: 0;
	margin: var(--s5) 0 0;
}

.svc-good__media {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	box-shadow: var(--shadow-card);
	padding: var(--s6);
}

.svc-good__img {
	width: 100%;
	max-width: 320px;
	height: auto;
	display: block;
	margin-inline: auto;
}

/* A photograph or diagram fills the panel edge to edge rather than sitting at
   320px on a padded white card, which is what the line illustrations need
   (round 20). The breathability diagram in particular is only legible at the
   larger size. */
.svc-good__media--photo {
	padding: 0;
	overflow: hidden;
}

.svc-good__media--photo .svc-good__img {
	max-width: 100%;
}

.svc-good__media .samson-img-placeholder {
	width: 100%;
	max-width: 320px;
	aspect-ratio: 1 / 1;
	border-radius: 0;
}

/* -----------------------------------------------------------------------------
   Related help: shared cards partial (also used by the PIV template).
   ----------------------------------------------------------------------------- */
.svc-related.band {
	padding-block: calc(var(--sec-pad, clamp(64px, 9vw, 120px)) / 2);
}

/* The related-help band and the reviews block that follows it are both plain
   (daylight-ground) bands, same-ground neighbours per DESIGN.md section 6.5,
   so the shared edge halves. Targeted as "whatever .band sits right after
   related help" rather than a specific reviews-block class, since the
   reviews-scroller partial (owned elsewhere) may change its own class names. */
.svc-related + .band {
	padding-block-start: calc(var(--sec-pad, clamp(64px, 9vw, 120px)) / 2);
}

.svc-related__title {
	margin-bottom: var(--s7);
}

.related-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s5);
	list-style: none;
	padding: 0;
	margin: 0;
}

.related-card {
	display: flex;
}

.related-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-decoration: none;
	color: var(--navy);
	background: var(--sky);
	border: 1px solid transparent;
	border-radius: var(--r-card);
	overflow: hidden;
	transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.related-card__link:hover,
.related-card__link:focus-visible {
	border-color: var(--blue);
	transform: translateY(-4px);
	box-shadow: var(--shadow-card);
}

.related-card__media {
	display: block;
	/* Round 18: 16/10 since these went photographic. A 1/1 well made a very
	   tall card beside its title and snippet, and squaring off a landscape
	   photograph cropped the subject out of it. */
	aspect-ratio: 16 / 10;
	background: var(--sky);
	overflow: hidden;
}

.related-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* A line illustration carries its own square canvas, so covering the 16/10
   well clips the top and bottom off the drawing. Contain it instead: the
   baked-in canvas matches the frame's sky ground, so it reads as one panel. */
.related-card__media:not(.related-card__media--photo) .related-card__img {
	object-fit: contain;
}

.related-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	flex: 1;
	padding: var(--s5);
}

.related-card__title {
	font-family: var(--ff-display, "Plus Jakarta Sans", system-ui, sans-serif);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.25;
}

.related-card__snippet {
	color: var(--slate);
	font-size: 0.9375rem;
	flex: 1;
}

.related-card__arrow {
	margin-top: auto;
	display: inline-flex;
	color: var(--blue-deep);
}

.related-card__arrow svg {
	transition: transform 0.18s ease;
}

.related-card__link:hover .related-card__arrow svg {
	transform: translateX(3px);
}

/* -----------------------------------------------------------------------------
   Breakpoint: 700px
   ----------------------------------------------------------------------------- */
@media (min-width: 700px) {
	.svc-highlights__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.svc-stages__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.svc-process__shot-img {
		aspect-ratio: 16 / 9;
	}

	.related-cards {
		grid-template-columns: repeat(3, 1fr);
	}

	.cta-slim__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--s6);
	}

	.cta-slim__line {
		flex: 1 1 320px;
	}

	.cta-slim__actions {
		flex: none;
	}
}

/* -----------------------------------------------------------------------------
   Breakpoint: 1080px (full desktop grids)
   ----------------------------------------------------------------------------- */
@media (min-width: 1080px) {
	.svc-hero__inner {
		grid-template-columns: 7fr 5fr;
		gap: var(--s10);
	}

	/* Landscape hero photos sit level with the middle of the copy. */
	.svc-hero__media--wide {
		align-self: center;
	}

	.svc-highlights__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.svc-process__inner {
		grid-template-columns: 6fr 5fr;
		gap: var(--s10);
		align-items: center;
	}

	.svc-good__inner {
		grid-template-columns: 7fr 5fr;
		gap: var(--s10);
	}

	.svc-guarantee__inner {
		grid-template-columns: 4fr 8fr;
		gap: var(--s10);
	}

	.svc-guarantee__img {
		max-width: 300px;
	}

	/* Heading block left, CTA pair right, so neither column leaves the row
	   half empty (no narrow text blocks). */
	.svc-stages__head {
		grid-template-columns: 7fr 5fr;
		gap: var(--s10);
		align-items: end;
	}

	.svc-stages__actions {
		justify-content: flex-end;
		padding-bottom: var(--s1);
	}

	.svc-process__shot-img {
		aspect-ratio: 21 / 9;
	}
}

/* -----------------------------------------------------------------------------
   Reduced motion: settle the remaining hover/transition flourishes.
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.related-card__link,
	.related-card__arrow svg {
		transition: none;
	}
}