/* What sets us apart: a pinned heading inside a ring of ticks, with six photos rising past it on either side (assets/js/apart.js). */
.seamkt-apart {
	--ap-paper: #f1f0ee;
	--ap-ink: #0d0d0c;
	--ap-soft: #57554f;
	--ap-muted: #8a877f;
	--ap-tick: rgba(13, 13, 12, 0.15);
	--ap-font: var(--seamkt-font, 'Manrope', system-ui, sans-serif);
	--ap-gutter: clamp(20px, 3.4vw, 60px);
	--ap-ease: cubic-bezier(0.22, 1, 0.36, 1);
	/* The ring, and the heading and note that sit inside it. */
	--ap-dial: min(66svh, 38vw, 640px);
	--ap-head-fs: clamp(32px, min(3.4vw, 6.4svh), 60px);
	/* Photo rounding inside the print, and the width of the print's paper border. */
	--ap-radius: 10px;
	--ap-mat: clamp(10px, 0.8vw, 14px);
	position: relative;
	isolation: isolate;
	overflow: clip;
	background: var(--ap-paper);
	color: var(--ap-ink);
	font-family: var(--ap-font);
}

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

/* ---------- Curtain over the Industries panel ---------- */

/* Industries stays pinned for one more screen while this section rises over it, the same
   curtain that carries Services → Journey → Industries. Needs :has() to lengthen the
   Industries pin; without it the sections simply follow each other. */
@supports selector(:has(*)) {
	.seamkt-journey.is-enhanced + .seamkt-industries.is-enhanced:has(+ .seamkt-apart) {
		--in-tail: 100svh;
	}

	.seamkt-journey.is-enhanced + .seamkt-industries.is-enhanced + .seamkt-apart {
		z-index: 6;
		margin-top: -100svh;
		border-radius: clamp(20px, 2.4vw, 36px) clamp(20px, 2.4vw, 36px) 0 0;
		box-shadow: 0 -50px 70px -20px rgba(0, 0, 0, 0.4);
	}
}

/* The Industries panel dims as it is covered. apart.js adds this layer and sets its opacity
   directly, so a scroll frame restyles one element instead of the whole Industries section. */
.seamkt-apart-veil {
	position: absolute;
	z-index: 20;
	inset: 0;
	background: #060607;
	opacity: 0;
	pointer-events: none;
	will-change: opacity;
}

/* ---------- Pinned stage: ring, heading and note ---------- */

/* Pinned for the whole section, with the photos pulled up over it (see __cards). The stage
   keeps its full height: a negative margin here would let sticky hold it a screen past
   the end of the section, where the next section would appear to slide over it. */
.seamkt-apart__stage {
	position: sticky;
	z-index: 0;
	top: 0;
	display: grid;
	place-items: center;
	height: 100svh;
	padding: 0 var(--ap-gutter);
}

.seamkt-apart__dial {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--ap-dial);
	aspect-ratio: 1;
	transform: translate(-50%, -50%) rotate(var(--ap-turn, 0deg));
	will-change: transform;
	pointer-events: none;
}

/* A hairline circle just inside the ticks gives the ring some depth. */
.seamkt-apart__orbit {
	position: absolute;
	inset: 8.5%;
	border: 1px solid rgba(13, 13, 12, 0.07);
	border-radius: 50%;
}

.seamkt-apart__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	stroke: var(--ap-tick);
	stroke-width: 1.6;
	stroke-linecap: round;
}

/* The dark copy of the ticks, revealed clockwise as the photos pass (--p set by apart.js). */
.seamkt-apart__ring--fill {
	--p: 0;
	stroke: rgba(13, 13, 12, 0.62);
	-webkit-mask-image: conic-gradient(#000 calc(var(--p) * 1turn), transparent 0);
	mask-image: conic-gradient(#000 calc(var(--p) * 1turn), transparent 0);
}

.seamkt-apart__center {
	position: relative;
	display: grid;
	justify-items: center;
	width: min(calc(var(--ap-dial) * 0.7), 100%);
	text-align: center;
}

.seamkt-apart .seamkt-apart__eyebrow {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	margin: 0 0 clamp(14px, 2.2svh, 22px);
	color: var(--ap-muted);
	font-size: clamp(14px, 1.15vw, 17px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}

.seamkt-apart__eyebrow::before,
.seamkt-apart__eyebrow::after {
	width: 18px;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
	content: '';
}

.seamkt-apart .seamkt-apart__heading {
	margin: 0;
	padding: 0;
	color: var(--ap-ink);
	font-family: var(--ap-font);
	font-size: var(--ap-head-fs);
	font-weight: 600;
	line-height: 0.98;
	letter-spacing: -0.04em;
	text-transform: none;
}

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

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

/* A short rule between the heading and the note. */
.seamkt-apart__notes {
	display: grid;
	width: 100%;
	margin-top: clamp(18px, 2.8svh, 30px);
	padding-top: clamp(18px, 2.8svh, 30px);
	background: linear-gradient(var(--ap-ink), var(--ap-ink)) top center / 28px 1px no-repeat;
}

/* The notes share one cell, so the block keeps the height of the longest. */
.seamkt-apart__note {
	grid-area: 1 / 1;
	align-self: start;
	display: grid;
	gap: 12px;
	justify-items: center;
}

.seamkt-apart__note:not(.is-active) {
	visibility: hidden;
}

.seamkt-apart .seamkt-apart__note-title {
	margin: 0;
	color: var(--ap-ink);
	font-size: clamp(19px, 1.45vw, 25px);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.seamkt-apart .seamkt-apart__note-text {
	max-width: 38ch;
	margin: 0;
	color: var(--ap-soft);
	font-size: clamp(16px, 1.1vw, 18px);
	line-height: 1.7;
	text-wrap: pretty;
}

.seamkt-apart__keep {
	white-space: nowrap;
}

/* Six steps under the note; the one in focus grows long and dark (set by apart.js). */
.seamkt-apart__steps {
	display: flex;
	gap: 6px;
	align-items: center;
	margin-top: clamp(18px, 2.8svh, 28px);
}

.seamkt-apart__steps i {
	display: block;
	width: 8px;
	height: 2px;
	border-radius: 2px;
	background: rgba(13, 13, 12, 0.16);
	transition: width 0.7s var(--ap-ease), background-color 0.5s ease;
}

.seamkt-apart__steps i.is-on {
	width: 26px;
	background: var(--ap-ink);
}

.seamkt-apart__steps i.is-done {
	background: rgba(13, 13, 12, 0.42);
}

/* ---------- Rising photos ---------- */

.seamkt-apart .seamkt-apart__cards {
	position: relative;
	z-index: 1;
	/* Pulled up a full screen so the photos scroll over the pinned stage. */
	margin: -100svh 0 0;
	/* The first photo enters from the bottom just after the section lands. */
	padding: 78svh 0 40svh;
	list-style: none;
}

.seamkt-apart__card {
	position: relative;
	display: block;
	width: var(--w);
	margin: var(--gap, 0) 0 0 var(--x);
	padding: 0;
}

/* Alternating sides, clear of the ring, well apart, each at its own slight angle. */
.seamkt-apart__card:nth-child(1) { --x: 8%; --w: 19%; --ratio: 4 / 5; --tilt: -2deg; }
.seamkt-apart__card:nth-child(2) { --x: 72%; --w: 19%; --ratio: 1; --tilt: 1.6deg; --gap: 26svh; }
.seamkt-apart__card:nth-child(3) { --x: 10%; --w: 18%; --ratio: 1; --tilt: -1.4deg; --gap: 26svh; }
.seamkt-apart__card:nth-child(4) { --x: 71%; --w: 20%; --ratio: 4 / 5; --tilt: 2deg; --gap: 26svh; }
.seamkt-apart__card:nth-child(5) { --x: 7%; --w: 21%; --ratio: 5 / 4; --tilt: -1.6deg; --gap: 26svh; }
.seamkt-apart__card:nth-child(6) { --x: 72%; --w: 19%; --ratio: 4 / 5; --tilt: 1.4deg; --gap: 26svh; }

.seamkt-apart .seamkt-apart__figure {
	--rot: var(--tilt, 0deg);
	--lift: 0px;
	--scale: 1;
	position: relative;
	margin: 0;
	/* A white print: the photo on a paper mat, its name written on the mat underneath. */
	padding: var(--ap-mat) var(--ap-mat) 0;
	border-radius: calc(var(--ap-radius) + var(--ap-mat) * 0.5);
	background: #fff;
	box-shadow: 0 1px 2px rgba(13, 13, 12, 0.06), 0 40px 70px -40px rgba(13, 13, 12, 0.42);
	transform: translateY(var(--lift)) rotate(var(--rot)) scale(var(--scale));
	transition: transform 1.1s var(--ap-ease), box-shadow 1.1s var(--ap-ease), opacity 0.9s ease;
}

.seamkt-apart__frame {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--ap-radius);
	background: #dcdbd7;
	aspect-ratio: var(--ratio, 1);
}

/* A faint light edge inside the rounded frame keeps dark photos crisp against the paper. */
.seamkt-apart__frame::after {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
	pointer-events: none;
	content: '';
}

.seamkt-apart__media {
	position: absolute;
	inset: -7% 0;
	display: block;
	will-change: transform;
}

.seamkt-apart .seamkt-apart__media img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s var(--ap-ease), filter 1s var(--ap-ease);
}

/* The principle's name, written under the photo with a hairline running to its edge. */
.seamkt-apart__label {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: clamp(14px, 1.1vw, 18px) 2px clamp(15px, 1.2vw, 19px);
	color: var(--ap-muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: color 0.6s ease, opacity 0.8s ease 0.6s, transform 1s var(--ap-ease) 0.6s;
}

.seamkt-apart__label::after {
	flex: 1;
	min-width: 24px;
	height: 1px;
	background: currentColor;
	opacity: 0.35;
	content: '';
}

/* Without the script the full caption below says it all, so the label steps aside. */
.seamkt-apart:not(.is-enhanced) .seamkt-apart__label {
	display: none;
}

/* Without the script, each photo carries its own principle underneath. */
.seamkt-apart .seamkt-apart__caption {
	display: grid;
	gap: 6px;
	padding: 16px 2px 18px;
	font-style: normal;
	text-align: left;
}

.seamkt-apart .seamkt-apart__card-title {
	margin: 0;
	padding: 0;
	color: var(--ap-ink);
	font-family: var(--ap-font);
	font-size: clamp(16px, 1.2vw, 20px);
	font-style: normal;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-transform: none;
}

.seamkt-apart__card-text {
	color: var(--ap-soft);
	font-size: 14px;
	line-height: 1.55;
}

/* ---------- Enhanced: reveals, focus and the crossfading note ---------- */

/* The note under the heading carries the text, so the photos stay clean (captions remain for screen readers). */
.seamkt-apart.is-enhanced .seamkt-apart__caption {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Each photo drops in from below at a steeper angle, then is unveiled upward. */
.seamkt-apart.is-enhanced .seamkt-apart__figure {
	--lift: 70px;
	--rot: calc(var(--tilt, 0deg) * 2.2);
	opacity: 0;
}

.seamkt-apart.is-enhanced .is-in .seamkt-apart__figure {
	--lift: 0px;
	--rot: var(--tilt, 0deg);
	opacity: 1;
}

/* The photo is shown whole inside its print from the start; only its colour waits for focus. */
.seamkt-apart.is-enhanced .seamkt-apart__media img {
	filter: grayscale(1);
}

/* In focus the photo straightens, lifts towards the viewer and comes into colour. */
.seamkt-apart.is-enhanced .is-in.is-active .seamkt-apart__figure {
	--rot: 0deg;
	--scale: 1.04;
}

.seamkt-apart.is-enhanced .is-in.is-active .seamkt-apart__figure {
	box-shadow: 0 1px 2px rgba(13, 13, 12, 0.06), 0 60px 90px -40px rgba(13, 13, 12, 0.5);
}

.seamkt-apart.is-enhanced .is-active .seamkt-apart__media img {
	filter: none;
}

/* The label follows the photo in, and darkens with it in focus. */
.seamkt-apart.is-enhanced .seamkt-apart__label {
	opacity: 0;
	transform: translateY(8px);
}

.seamkt-apart.is-enhanced .is-in .seamkt-apart__label {
	opacity: 1;
	transform: none;
}

.seamkt-apart.is-enhanced .is-active .seamkt-apart__label {
	color: var(--ap-ink);
}

/* The outgoing note slips up and away quickly; the next one settles in a beat later. */
.seamkt-apart.is-enhanced .seamkt-apart__note {
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 0.35s ease, transform 0.45s var(--ap-ease), visibility 0s linear 0.45s;
}

.seamkt-apart.is-enhanced .seamkt-apart__note.is-ahead {
	transform: translateY(14px);
}

.seamkt-apart.is-enhanced .seamkt-apart__note.is-active {
	opacity: 1;
	transform: none;
	transition: opacity 0.8s ease 0.3s, transform 1s var(--ap-ease) 0.3s, visibility 0s;
}

/* The title leads and the description follows. */
.seamkt-apart.is-enhanced .seamkt-apart__note .seamkt-apart__note-text {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.seamkt-apart.is-enhanced .seamkt-apart__note.is-active .seamkt-apart__note-text {
	opacity: 1;
	transition: opacity 0.9s ease 0.5s;
}

.seamkt-apart:not(.is-enhanced) .seamkt-apart__steps {
	display: none;
}

/* ---------- Narrower screens ---------- */

@media (max-width: 1023px) {
	.seamkt-apart {
		--ap-dial: min(62svh, 66vw, 580px);
	}

	.seamkt-apart__card:nth-child(n) { --w: 24%; --gap: 36svh; }
	.seamkt-apart__card:nth-child(odd) { --x: 3%; }
	.seamkt-apart__card:nth-child(even) { --x: 72%; }
	.seamkt-apart__card:nth-child(1) { --gap: 0; }
}

@media (max-width: 767px) {
	.seamkt-apart {
		--ap-gutter: 20px;
		--ap-dial: min(94vw, 58svh);
		--ap-head-fs: clamp(30px, 9vw, 40px);
		--ap-radius: 8px;
		--ap-mat: 8px;
	}

	.seamkt-apart__center {
		width: min(80vw, 330px);
	}

	/* On a phone the photos pass over the note; keep them well apart. */
	.seamkt-apart__card:nth-child(n) { --w: 42%; --gap: 50svh; }
	.seamkt-apart__card:nth-child(odd) { --x: 4%; }
	.seamkt-apart__card:nth-child(even) { --x: 54%; }
	.seamkt-apart__card:nth-child(1) { --gap: 0; }

	/* The pinned stage fills the large viewport (Safari's toolbar collapsed), so nothing shows
	   through beneath it as the toolbar shrinks mid-scroll; the copy is centred in the part
	   of the screen the toolbar never covers. */
	@supports (height: 100lvh) {
		.seamkt-apart__stage {
			height: 100lvh;
			padding-bottom: calc(100lvh - 100svh);
		}

		.seamkt-apart .seamkt-apart__cards {
			margin-top: -100lvh;
		}
	}

	/* Phones: the section does not clip, so Safari keeps the pinned stage on its own scrolling
	   thread (see home.css); the stage clips its own wide ring instead. */
	.seamkt-apart {
		overflow: visible;
	}

	.seamkt-apart__stage {
		overflow: hidden;
	}

	/* Phones: no curtain. This section follows Industries as ordinary content instead of
	   rising over its held panel, so the phone never has both to draw at once (apart.js then
	   leaves the veil off, as the section no longer overlaps). */
	@supports selector(:has(*)) {
		.seamkt-journey.is-enhanced + .seamkt-industries.is-enhanced:has(+ .seamkt-apart) {
			--in-tail: 0px;
		}

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

	/* The ring runs wider than the screen, a large arc above and below the copy, so the
	   eyebrow and the note never sit on its ticks. */
	.seamkt-apart {
		--ap-dial: min(140vw, 92svh);
	}

	.seamkt-apart__center {
		width: min(86vw, 340px);
	}

	.seamkt-apart .seamkt-apart__eyebrow {
		gap: 10px;
		margin-bottom: 14px;
		font-size: 12px;
		letter-spacing: 0.22em;
	}

	.seamkt-apart__notes {
		margin-top: 16px;
		padding-top: 16px;
	}

	.seamkt-apart__note {
		gap: 8px;
	}

	.seamkt-apart .seamkt-apart__note-title {
		font-size: 18px;
	}

	.seamkt-apart .seamkt-apart__note-text {
		font-size: 15px;
		line-height: 1.6;
	}

	.seamkt-apart__steps {
		margin-top: 18px;
	}

	/* The name under each photo: tighter tracking and no hairline, so it reads in one or two lines. */
	.seamkt-apart__label {
		padding: 10px 2px 12px;
		font-size: 10px;
		line-height: 1.35;
		letter-spacing: 0.1em;
	}

	.seamkt-apart__label::after {
		content: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.seamkt-apart *,
	.seamkt-apart.is-enhanced .seamkt-apart__note.is-active,
	.seamkt-apart.is-enhanced .seamkt-apart__note.is-active .seamkt-apart__note-text {
		transition: none !important;
	}
}