/* Core services: full-screen scenes scroll past under a pinned focus lens while the copy changes on either side. */
.seamkt-services {
	--services-count: 5;
	--services-slice: 72;
	--sv-ink: #f4f2ee;
	--sv-soft: rgba(244, 242, 238, 0.8);
	--sv-muted: rgba(244, 242, 238, 0.6);
	--sv-faint: rgba(244, 242, 238, 0.34);
	--sv-line: rgba(255, 255, 255, 0.14);
	--sv-accent: #d5f34a;
	--sv-font: var(--seamkt-font, 'Manrope', system-ui, sans-serif);
	--sv-gutter: clamp(20px, 3.4vw, 60px);
	--sv-ease: cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
	isolation: isolate;
	overflow: clip;
	border-radius: clamp(20px, 2.4vw, 36px) clamp(20px, 2.4vw, 36px) 0 0;
	background: #050505;
	color: var(--sv-ink);
	font-family: var(--sv-font);
}

.seamkt-services *,
.seamkt-services *::before,
.seamkt-services *::after {
	box-sizing: border-box;
}

/* ---------- Shared typography (also the readable no-JS layout) ---------- */

.seamkt-services__stage {
	position: relative;
	padding: clamp(96px, 12vw, 160px) var(--sv-gutter);
}

.seamkt-services__backdrop,
.seamkt-services__focus-area,
.seamkt-services__cta-titles {
	display: none;
}

.seamkt-services__aside {
	margin: 0 0 clamp(56px, 8vw, 96px);
}

/* "Our core" in a firm weight, "service." in a light one: one typeface, two voices. */
.seamkt-services .seamkt-services__heading {
	margin: 0;
	padding: 0;
	color: var(--sv-ink);
	font-family: var(--sv-font);
	font-size: clamp(44px, 4.6vw, 84px);
	font-weight: 600;
	line-height: 0.98;
	letter-spacing: -0.04em;
	text-transform: none;
}

.seamkt-services__heading span,
.seamkt-services__heading em {
	display: block;
}

.seamkt-services__heading em {
	color: var(--sv-soft);
	font-style: normal;
	font-weight: 300;
	letter-spacing: -0.035em;
}

.seamkt-services__details {
	display: grid;
	gap: clamp(64px, 9vw, 120px);
}

.seamkt-services__item {
	max-width: 640px;
}

.seamkt-services .seamkt-services__thumb {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0 0 24px;
	border-radius: 16px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.seamkt-services .seamkt-services__title {
	margin: 0 0 16px;
	padding: 0;
	color: #fff;
	font-family: var(--sv-font);
	font-size: clamp(28px, 3vw, 44px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.04em;
	text-transform: none;
}

/* The summary is the lead line of the right-hand column. */
.seamkt-services .seamkt-services__summary {
	max-width: 19em;
	margin: 0;
	color: var(--sv-ink);
	font-family: var(--sv-font);
	font-size: clamp(19px, 1.45vw, 27px);
	font-weight: 400;
	line-height: 1.38;
	letter-spacing: -0.015em;
	text-wrap: pretty;
}

/* Key points: hairlines and quiet counters, like the story section's tag list. */
.seamkt-services__points {
	max-width: 30em;
	margin: clamp(26px, 4.4svh, 44px) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: services-point;
}

.seamkt-services__points li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: clamp(11px, 1.7svh, 15px) 0;
	border-top: 1px solid var(--sv-line);
	color: var(--sv-soft);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.35;
	counter-increment: services-point;
}

.seamkt-services__points li:last-child {
	border-bottom: 1px solid var(--sv-line);
}

.seamkt-services__points li::after {
	flex: none;
	color: var(--sv-faint);
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.1em;
	content: counter(services-point, decimal-leading-zero);
}

.seamkt-services .seamkt-services__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: clamp(56px, 8vw, 96px);
	padding: 16px 30px;
	border: 1px solid #fff;
	border-radius: 999px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.76) 44%, rgba(255, 255, 255, 0) 45%),
		linear-gradient(180deg, #fff 0%, #f7f7f5 48%, #deded9 100%);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	box-shadow:
		0 18px 46px rgba(0, 0, 0, 0.56),
		0 4px 12px rgba(0, 0, 0, 0.22),
		inset 0 2px 0 rgba(255, 255, 255, 0.96),
		inset 0 -2px 0 rgba(0, 0, 0, 0.08);
	color: #111;
	font-family: var(--sv-font);
	font-size: clamp(16px, 1.05vw, 18px);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	transition: background 300ms ease, border-color 300ms ease, color 300ms ease, box-shadow 300ms ease, transform 300ms var(--sv-ease);
}

.seamkt-services .seamkt-services__cta:hover,
.seamkt-services .seamkt-services__cta:focus-visible {
	border-color: #fff;
	background:
		linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.86) 44%, rgba(255, 255, 255, 0) 45%),
		linear-gradient(180deg, #fff 0%, #fafaf8 48%, #e8e8e4 100%);
	box-shadow: 0 18px 52px rgba(0, 0, 0, 0.58), 0 0 0 4px rgba(255, 255, 255, 0.08);
	color: #111;
}

.seamkt-services__cta:focus-visible {
	outline: 1px solid #fff;
	outline-offset: 4px;
}

/* ---------- Enhanced: pinned stage over natively scrolling scenes ---------- */

.seamkt-services.is-enhanced .seamkt-services__scroller {
	position: relative;
}

/* The stage is pinned for as long as the scenes underneath are scrolling. */
.seamkt-services.is-enhanced .seamkt-services__stage {
	--services-pos: 0;
	--services-enter: 1;
	--services-exit: 0;
	--lens: min(56svh, 34vw, 560px);
	--side: calc((100% - var(--lens) * 1.32) / 2 - var(--sv-gutter) - 32px);
	position: sticky;
	z-index: 2;
	top: 0;
	height: 100svh;
	padding: 0;
	overflow: hidden;
}

/* The following Journey section rises over this stage like a dark curtain. */
.seamkt-services.is-enhanced {
	z-index: 1;
}

.seamkt-services.is-enhanced + .seamkt-journey {
	z-index: 3;
	/* Start one screen early: Journey travels from the viewport bottom to the top
	   while the final Services frame remains pinned underneath. */
	margin-top: -100svh;
	overflow: clip;
	border-radius: clamp(24px, 3vw, 48px) clamp(24px, 3vw, 48px) 0 0;
	box-shadow: 0 -30px 90px rgba(0, 0, 0, 0.72);
}

/* A fixed scrim: dims the scenes and keeps both text columns on a dark ground. */
.seamkt-services.is-enhanced .seamkt-services__stage::before {
	position: absolute;
	z-index: 0;
	inset: 0;
	/* A pool of light around the lens that falls off into darkness, so the soft scenes
	   recede and the sharp circle carries the eye; the side bands keep both columns of
	   copy on a dark ground. */
	background:
		radial-gradient(circle at 50% 50%, rgba(5, 5, 5, 0.1) 0, rgba(5, 5, 5, 0.18) calc(var(--lens) * 0.6), rgba(5, 5, 5, 0.6) calc(var(--lens) * 1.15), rgba(5, 5, 5, 0.82) 100%),
		linear-gradient(90deg, rgba(5, 5, 5, 0.6), rgba(5, 5, 5, 0.2) 26%, transparent 40%, transparent 58%, rgba(5, 5, 5, 0.26) 68%, rgba(5, 5, 5, 0.64) 100%);
	pointer-events: none;
	content: '';
}

/* Darken the outgoing scene progressively while Journey covers it from below. */
.seamkt-services.is-enhanced .seamkt-services__stage::after {
	position: absolute;
	z-index: 10;
	inset: 0;
	background: #000;
	opacity: calc(var(--services-exit) * 0.72);
	pointer-events: none;
	content: '';
	will-change: opacity;
}

/* Pulled up under the stage; every scene is exactly one screen tall. */
.seamkt-services.is-enhanced .seamkt-services__backdrop {
	position: relative;
	z-index: 0;
	display: block;
	margin-top: -100svh;
}

.seamkt-services__scene {
	height: 100svh;
	overflow: hidden;
	background: #050505;
}

/* The last scene is one screen taller and its picture stays put through that extra screen,
   so the whole frame (picture, lens and copy) holds still while Journey slides over it
   like a curtain. (Padding would not do: sticky elements stop at their container's
   content edge.) Clip, not hidden: hidden would make the scene a scroll container and
   stop the picture sticking, while visible let the zoomed picture spill ~16% of a screen
   up over the previous scene, so its edge no longer met the line the lens cuts at. */
.seamkt-services.is-enhanced .seamkt-services__scene:last-child {
	height: 200svh;
	/* Browsers without clip keep the old behaviour rather than losing the sticky picture. */
	overflow: visible;
	overflow: clip;
}

.seamkt-services.is-enhanced .seamkt-services__scene:last-child img {
	position: sticky;
	top: 0;
	height: 100svh;
}

/* Behind the lens each scene is pushed in close on its device and kept dim. */
.seamkt-services .seamkt-services__scene img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	transform: scale(1.32);
	user-select: none;
}

.seamkt-services.is-enhanced .seamkt-services__focus-area {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.seamkt-services__focus {
	position: relative;
	width: var(--lens);
	aspect-ratio: 1;
	transform: scale(calc(0.84 + 0.16 * var(--services-enter)));
}

/* The lens lifts off the scene on a deep, soft shadow (the lens itself is clipped round,
   so its shadow lives on this layer behind it). */
.seamkt-services__focus::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 90px rgba(255, 255, 255, 0.05);
	content: '';
}

.seamkt-services__lens {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 50%;
	background: #1a1a1a;
	clip-path: circle(50% at 50% 50%);
}

/* The lens is a window: every shot stays still, and the script clips each one to the
   part of the lens its scene is passing behind, so scene edges cut straight across it. */
.seamkt-services__reel {
	position: relative;
	height: 100%;
}

.seamkt-services__lens-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* Inside the lens the photo fills the whole circle, sharp and untouched, centred on its device. */
.seamkt-services .seamkt-services__lens-slide img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	user-select: none;
}

/* Until the script measures the scenes, only the first shot shows. */
.seamkt-services__lens-slide + .seamkt-services__lens-slide {
	clip-path: inset(100% 0 0 0);
}

.seamkt-services__glass {
	position: absolute;
	z-index: 1;
	inset: 0;
	border-radius: 50%;
	/* A crisp rim and a faint sheen of glass along the top edge. */
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 32%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 0 0 40px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

/* Dial: one quiet arc per service, a bright arc that travels with the scroll, and the numbers outside. */
.seamkt-services__dial {
	position: absolute;
	inset: -16%;
	transform: rotate(calc((1 - var(--services-enter)) * -36deg));
}

.seamkt-services__dial svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.seamkt-services__dial circle {
	fill: none;
	transform-box: fill-box;
	transform-origin: center;
}

/* Arcs start a half-gap past 12 o'clock so each one is centred on its number. */
.seamkt-services__dial-track {
	stroke: rgba(255, 255, 255, 0.24);
	/* Stroke widths are in dial units: the dial is drawn on a 200-unit square. */
	stroke-width: 0.4;
	transform: rotate(-83deg);
}

.seamkt-services__dial-glow {
	stroke: #fff;
	stroke-width: 0.75;
	stroke-linecap: round;
	transform: rotate(calc(-83deg + var(--services-pos) * var(--services-slice) * 1deg));
}

.seamkt-services__mark {
	--angle: calc((var(--k) + 0.5) * var(--services-slice) * 1deg);
	position: absolute;
	top: 50%;
	left: 50%;
	color: var(--sv-faint);
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
	line-height: 1;
	transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--lens) * -0.6)) rotate(calc(var(--angle) * -1));
	transition: color 500ms ease;
}

.seamkt-services__mark.is-active {
	color: #fff;
}

/* Left: the section title, pinned and still. */
.seamkt-services.is-enhanced .seamkt-services__aside {
	position: absolute;
	z-index: 3;
	top: 50%;
	left: var(--sv-gutter);
	width: var(--side);
	max-width: 400px;
	margin: 0;
	transform: translateY(calc(-50% - clamp(48px, 7svh, 72px)));
}

/* Right: every service shares one grid cell, so the column never jumps in height. */
.seamkt-services.is-enhanced .seamkt-services__details {
	position: absolute;
	z-index: 3;
	top: 50%;
	right: var(--sv-gutter);
	width: var(--side);
	max-width: 400px;
	gap: 0;
	transform: translateY(-50%);
}

.seamkt-services.is-enhanced .seamkt-services__item {
	grid-area: 1 / 1;
	align-self: center;
	max-width: none;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear 450ms;
}

.seamkt-services.is-enhanced .seamkt-services__item.is-active {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.seamkt-services.is-enhanced .seamkt-services__thumb {
	display: none;
}

/* On the stage the title lives in the pill; the heading stays for screen readers. */
.seamkt-services.is-enhanced .seamkt-services__title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Only one service is ever readable: the old copy leaves quickly before the new copy arrives. */
.seamkt-services.is-enhanced :is(.seamkt-services__summary, .seamkt-services__points li) {
	opacity: 0;
	transform: translate3d(0, 12px, 0);
	transition: opacity 250ms ease, transform 250ms ease;
}

.seamkt-services.is-enhanced .seamkt-services__item.is-past :is(.seamkt-services__summary, .seamkt-services__points li) {
	transform: translate3d(0, -12px, 0);
}

.seamkt-services.is-enhanced .seamkt-services__item.is-active :is(.seamkt-services__summary, .seamkt-services__points li) {
	opacity: 1;
	transform: none;
	transition: opacity 650ms ease 300ms, transform 900ms var(--sv-ease) 300ms;
}

.seamkt-services.is-enhanced .seamkt-services__item.is-active .seamkt-services__points li {
	transition-delay: calc(460ms + var(--i) * 70ms);
}

.seamkt-services.is-enhanced .seamkt-services__summary {
	text-shadow: 0 1px 18px rgba(0, 0, 0, 0.5);
}

/* The pill under the lens carries the active service's title, sliding between titles. */
.seamkt-services.is-enhanced .seamkt-services__cta {
	position: absolute;
	z-index: 4;
	bottom: clamp(40px, 6svh, 72px);
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
}

.seamkt-services.is-enhanced .seamkt-services__cta-label {
	display: none;
}

.seamkt-services.is-enhanced .seamkt-services__cta-titles {
	position: relative;
	display: block;
	width: var(--cta-w, 12em);
	height: 1.55em;
	overflow: hidden;
	transition: width 650ms var(--sv-ease);
}

.seamkt-services__cta-title {
	position: absolute;
	top: 0;
	left: 0;
	line-height: 1.45;
	white-space: nowrap;
	opacity: 0;
	transform: translate3d(0, 110%, 0);
	transition: transform 450ms cubic-bezier(0.55, 0, 0.75, 0.2), opacity 300ms ease;
}

.seamkt-services__cta-title.is-past {
	transform: translate3d(0, -110%, 0);
}

.seamkt-services__cta-title.is-active {
	opacity: 1;
	transform: none;
	text-shadow: none;
	transition: transform 800ms var(--sv-ease) 200ms, opacity 500ms ease 200ms;
}

/* ---------- Narrow screens: title on top, lens, the pill, then the copy ---------- */
@media (max-width: 1100px) {
	.seamkt-services.is-enhanced .seamkt-services__stage {
		display: grid;
		grid-template-areas:
			'head'
			'focus'
			'cta'
			'copy';
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr) auto auto;
		gap: clamp(12px, 2.4svh, 24px);
		padding: clamp(80px, 12svh, 112px) var(--sv-gutter) clamp(20px, 4svh, 40px);
	}

	.seamkt-services.is-enhanced .seamkt-services__stage::before {
		background: linear-gradient(180deg, rgba(5, 5, 5, 0.76), rgba(5, 5, 5, 0.62) 22%, rgba(5, 5, 5, 0.5) 42%, rgba(5, 5, 5, 0.68) 62%, rgba(5, 5, 5, 0.82));
	}

	.seamkt-services.is-enhanced .seamkt-services__aside {
		position: relative;
		inset: auto;
		grid-area: head;
		width: auto;
		max-width: none;
		transform: none;
	}

	.seamkt-services .seamkt-services__heading {
		display: flex;
		flex-wrap: wrap;
		gap: 0 0.24em;
		font-size: clamp(30px, 6vw, 52px);
		text-shadow: 0 2px 28px rgba(0, 0, 0, 0.7);
	}

	.seamkt-services.is-enhanced .seamkt-services__focus-area {
		position: relative;
		inset: auto;
		grid-area: focus;
		min-height: 0;
		container-type: size;
	}

	/* The lens takes whatever height the copy leaves free, keeping room for the dial. */
	.seamkt-services.is-enhanced .seamkt-services__focus {
		--lens: min(36svh, 60vw);
		width: var(--lens);
	}

	@supports (container-type: size) {
		.seamkt-services.is-enhanced .seamkt-services__focus {
			--lens: min(calc(100cqh / 1.34), 64cqw, 460px);
		}
	}

	.seamkt-services.is-enhanced .seamkt-services__cta {
		position: relative;
		inset: auto;
		grid-area: cta;
		justify-self: center;
		transform: none;
	}

	.seamkt-services.is-enhanced .seamkt-services__details {
		position: relative;
		inset: auto;
		grid-area: copy;
		width: auto;
		max-width: 640px;
		transform: none;
	}

	.seamkt-services.is-enhanced .seamkt-services__item {
		align-self: start;
	}

	.seamkt-services .seamkt-services__summary {
		max-width: 30em;
		font-size: clamp(16px, 2.6vw, 21px);
	}

	/* Key points become one quiet line of slash-separated tags. */
	.seamkt-services.is-enhanced .seamkt-services__points {
		display: flex;
		flex-wrap: wrap;
		max-width: none;
		margin-top: 12px;
	}

	.seamkt-services.is-enhanced .seamkt-services__points li,
	.seamkt-services.is-enhanced .seamkt-services__points li:last-child {
		justify-content: flex-start;
		gap: 0;
		padding: 2px 0;
		border: 0;
		color: var(--sv-muted);
		font-size: 13px;
	}

	.seamkt-services.is-enhanced .seamkt-services__points li::after {
		content: none;
	}

	.seamkt-services.is-enhanced .seamkt-services__points li + li::before {
		margin: 0 8px;
		color: var(--sv-faint);
		content: '/';
	}
}

@media (max-width: 767px) {
	.seamkt-services {
		--sv-gutter: 16px;
	}

	.seamkt-services .seamkt-services__heading {
		font-size: clamp(28px, 8.4vw, 40px);
	}

	.seamkt-services .seamkt-services__summary {
		font-size: 16px;
		line-height: 1.4;
	}

	.seamkt-services__mark {
		font-size: 9px;
	}

	@supports (container-type: size) {
		.seamkt-services.is-enhanced .seamkt-services__focus {
			--lens: min(calc(100cqh / 1.34), 72cqw, 400px);
		}
	}

	/* A slim pill that eases to the size of the title in view; long titles wrap onto a second line. */
	.seamkt-services.is-enhanced .seamkt-services__cta {
		max-width: 100%;
		padding: 9px 18px;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.3;
		white-space: normal;
		box-shadow:
			0 10px 26px rgba(0, 0, 0, 0.32),
			inset 0 1px 0 rgba(255, 255, 255, 0.96),
			inset 0 -1px 0 rgba(0, 0, 0, 0.06);
	}

	.seamkt-services.is-enhanced .seamkt-services__cta-titles {
		width: var(--cta-w, 12em);
		height: var(--cta-h, 1.3em);
		transition: width 650ms var(--sv-ease), height 650ms var(--sv-ease);
	}

	.seamkt-services__cta-title {
		width: max-content;
		max-width: min(250px, calc(100vw - 80px));
		line-height: 1.3;
		white-space: normal;
		text-align: center;
	}

	/* Phones: the stage and scenes fill the large viewport (Safari's toolbar collapsed), so no
	   strip of the next scene opens under them while the toolbar shrinks and grows mid-scroll;
	   the copy keeps clear of the toolbar's height at the bottom. */
	@supports (height: 100lvh) {
		.seamkt-services.is-enhanced .seamkt-services__stage {
			height: 100lvh;
			padding-bottom: calc(clamp(20px, 4svh, 40px) + 100lvh - 100svh);
		}

		.seamkt-services.is-enhanced .seamkt-services__backdrop {
			margin-top: -100lvh;
		}

		.seamkt-services__scene {
			height: 100lvh;
		}

		.seamkt-services.is-enhanced .seamkt-services__scene:last-child {
			height: 200lvh;
		}

		.seamkt-services.is-enhanced .seamkt-services__scene:last-child img {
			height: 100lvh;
		}

		.seamkt-services.is-enhanced + .seamkt-journey {
			margin-top: -100lvh;
		}
	}

	/* Phones: neither this section nor Journey clips its overflow, so Safari can keep both pinned
	   stages on its own scrolling thread (see home.css); the stage and the scenes clip themselves.
	   Only the first scene keeps the rounded entrance; the pinned stage must fill later frames. */
	.seamkt-services,
	.seamkt-services.is-enhanced + .seamkt-journey {
		overflow: visible;
	}

	/* The stage's translucent dark scrim turns the white story behind the first
	   scene's rounded corners grey. Cover only those two corners at the section start. */
	.seamkt-services::before,
	.seamkt-services::after {
		position: absolute;
		z-index: 3;
		top: 0;
		width: 20px;
		height: 20px;
		pointer-events: none;
		content: '';
	}

	.seamkt-services::before {
		left: 0;
		background: radial-gradient(circle at right bottom, transparent 20px, #fff 20.5px);
	}

	.seamkt-services::after {
		right: 0;
		background: radial-gradient(circle at left bottom, transparent 20px, #fff 20.5px);
	}

	.seamkt-services__scene:first-child {
		border-radius: 20px 20px 0 0;
	}

	.seamkt-services.is-enhanced .seamkt-services__stage {
		border-radius: 0;
	}

	/* The lens arrives at full size, without growing in or turning its dial as the section
	   comes up (services-focus.js no longer drives it on phones). */
	.seamkt-services__focus,
	.seamkt-services__dial {
		transform: none;
	}

	/* One fixed lens size: fitted to the room the copy left, it grew and shrank each time the
	   pill under it switched between one and two lines, re-laying out the pictures inside. */
	.seamkt-services.is-enhanced .seamkt-services__focus {
		--lens: min(56vw, 30svh, 260px);
	}

	/* With no curtain the last scene is one screen tall, so its picture has nothing to hold
	   still for; left sticky inside the scene's clip, Safari would move it by hand. */
	.seamkt-services.is-enhanced .seamkt-services__scene:last-child img {
		position: static;
	}

	/* Phones: no curtain. Journey follows the services as ordinary content instead of rising
	   over the held last frame, so the phone never has both scenes to draw at once. */
	.seamkt-services.is-enhanced .seamkt-services__scene:last-child {
		height: 100svh;
	}

	.seamkt-services.is-enhanced + .seamkt-journey {
		margin-top: 0;
		box-shadow: none;
	}

	@supports (height: 100lvh) {
		.seamkt-services.is-enhanced .seamkt-services__scene:last-child {
			height: 100lvh;
		}
	}

	/* Phones: the title sits higher, the scenes show through a lighter scrim, and the
	   copy keeps a soft dark pool only where it is read. */
	.seamkt-services.is-enhanced .seamkt-services__stage {
		gap: clamp(10px, 2svh, 18px);
		padding-top: clamp(52px, 8svh, 68px);
	}

	.seamkt-services.is-enhanced .seamkt-services__stage::before {
		background:
			linear-gradient(180deg, rgba(5, 5, 5, 0.5), rgba(5, 5, 5, 0.12) 24%, rgba(5, 5, 5, 0.08) 50%, rgba(5, 5, 5, 0.38) 68%, rgba(5, 5, 5, 0.72));
	}

	.seamkt-services .seamkt-services__heading {
		line-height: 1;
	}

	.seamkt-services__focus::before {
		box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
	}

	/* The pill is opaque anyway; its backdrop blur over the scrolling scenes cost a redraw every frame. */
	.seamkt-services .seamkt-services__cta {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.seamkt-services.is-enhanced .seamkt-services__summary {
		font-size: 15px;
		line-height: 1.45;
		text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
	}

	/* Key points become small glass chips instead of a slash list that broke across lines. */
	.seamkt-services.is-enhanced .seamkt-services__points {
		gap: 6px;
		margin-top: 14px;
	}

	.seamkt-services.is-enhanced .seamkt-services__points li,
	.seamkt-services.is-enhanced .seamkt-services__points li:last-child {
		padding: 5px 10px;
		border: 1px solid rgba(255, 255, 255, 0.16);
		border-radius: 999px;
		background: rgba(20, 20, 20, 0.42);
		color: var(--sv-soft);
		font-size: 11.5px;
		line-height: 1.3;
		white-space: nowrap;
	}

	.seamkt-services.is-enhanced .seamkt-services__points li + li::before {
		content: none;
	}
}

/* Very short phones keep the lens a usable size by dropping the tag line. */
@media (max-width: 767px) and (max-height: 640px) {
	.seamkt-services.is-enhanced .seamkt-services__points {
		display: none;
	}
}

/* Short laptop screens: tighten the key points. */
@media (max-height: 720px) and (min-width: 1101px) {
	.seamkt-services .seamkt-services__heading {
		font-size: clamp(38px, 3.6vw, 60px);
	}

	.seamkt-services__points li {
		padding-block: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.seamkt-services.is-enhanced .seamkt-services__item :is(.seamkt-services__summary, .seamkt-services__points li),
	.seamkt-services__cta-title {
		transform: none !important;
		transition: opacity 200ms linear !important;
	}

	.seamkt-services.is-enhanced .seamkt-services__cta-titles {
		transition: none;
	}
}