/* Industries we serve: eight posters around one large wheel, turned by drag, swipe or arrows (assets/js/industries.js). */
.seamkt-industries {
	--industries-count: 8;
	--in-bg: #f4f2ee;
	--in-ink: #0d0d0c;
	--in-soft: #57554f;
	--in-muted: #8a877f;
	--in-line: rgba(13, 13, 12, 0.12);
	--in-word: #ebe8e2;
	--in-paper: #fff;
	--in-font: var(--seamkt-font, 'Manrope', system-ui, sans-serif);
	--in-gutter: clamp(20px, 3.4vw, 60px);
	--in-ease: cubic-bezier(0.22, 1, 0.36, 1);
	/* Use the live viewport height so browser UI cannot leave a strip below the panel. */
	--in-screen: 100vh;
	/*
	 * The section fills exactly one screen: the poster takes whatever height is left
	 * after the padding, the heading (two lines) and the title/controls block.
	 */
	--pad-top: clamp(64px, 11svh, 140px);
	--pad-bottom: clamp(24px, 4svh, 56px);
	--head-fs: clamp(34px, min(4.2vw, 7.4svh), 76px);
	--intro-h: calc(var(--head-fs) * 1.96);
	--orbit-top: clamp(16px, 4svh, 56px);
	--info-gap: clamp(16px, 2.6svh, 36px);
	--info-h: 190px;
	--card-fit: calc(var(--in-screen) - var(--pad-top) - var(--intro-h) - var(--orbit-top) - var(--info-gap) - var(--info-h) - var(--pad-bottom));
	/* Wheel geometry: the top poster's centre sits var(--r) above the wheel's hub. */
	--card-w: clamp(150px, min(var(--card-fit) * 0.75, 18vw), 320px);
	--card-h: calc(var(--card-w) * 4 / 3);
	--r: clamp(300px, 38vw, 720px);
	--step: calc(360deg / var(--industries-count));
	position: relative;
	min-height: var(--in-screen);
	/* On phones, the dark ground shows while the rounded panel enters. */
	background: #060607;
	color: var(--in-ink);
	font-family: var(--in-font);
}

/* The Industries panel starts rising a little later over the Rocket Journey,
   giving the rocket more room to leave before the curtain covers the sky. */
.seamkt-journey.is-enhanced + .seamkt-industries {
	z-index: 5;
	/* A smaller overlap delays the curtain without changing the rocket's flight. */
	margin-top: -85svh;
}

/* The shadow only falls upward onto Journey: a negative spread keeps it from greying
   the top of the white content below the panel. */
.seamkt-journey.is-enhanced + .seamkt-industries .seamkt-industries__panel {
	box-shadow: 0 -50px 70px -20px rgba(0, 0, 0, 0.5);
}

/* Once the curtain has risen, the panel stays pinned in frame, so stopping a little past
   the landing point never leaves it cut off at the top with a gap underneath. The hold
   is kept short: a long stretch where nothing moves reads as the page sticking. */
.seamkt-journey.is-enhanced + .seamkt-industries.is-enhanced {
	--in-hold: 20svh;
	/* --in-tail: one more pinned screen while the next section rises over it (apart.css). */
	height: calc(var(--in-screen) + var(--in-hold) + var(--in-tail, 0px));
}

.seamkt-journey.is-enhanced + .seamkt-industries.is-enhanced .seamkt-industries__panel {
	position: sticky;
	top: 0;
	height: var(--in-screen);
}

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

.seamkt-industries__panel {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: var(--in-screen);
	overflow: clip;
	padding: var(--pad-top) 0 var(--pad-bottom);
	border-radius: clamp(20px, 2.4vw, 36px) clamp(20px, 2.4vw, 36px) 0 0;
	background: var(--in-bg);
}

@media (min-width: 768px) {
	.seamkt-industries__panel {
		border-radius: 0;
	}
}

/* Once the wheel is enhanced, keep the whole experience to exactly one screen. */
.seamkt-industries.is-enhanced {
	height: var(--in-screen);
}

.seamkt-industries.is-enhanced .seamkt-industries__panel {
	height: 100%;
	min-height: 0;
}

@supports (height: 100dvh) {
	.seamkt-industries {
		--in-screen: 100dvh;
	}
}

/* ---------- Giant background word ---------- */

.seamkt-industries__backword {
	position: absolute;
	z-index: 0;
	top: clamp(16px, 2vw, 32px);
	left: 1.2vw;
	width: 97.6vw;
	height: min(78%, 64vw);
	color: var(--in-word);
	pointer-events: none;
	overflow: visible;
}

.seamkt-industries__backword text {
	font-family: var(--in-font);
	font-size: 320px;
	font-weight: 800;
	letter-spacing: 0;
}

/* ---------- Heading ---------- */

.seamkt-industries__intro {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
	align-items: flex-end;
	justify-content: space-between;
	padding: 0 var(--in-gutter);
}

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

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

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


/* ---------- Posters (also the readable no-JS layout: a scrolling row) ---------- */

.seamkt-industries__orbit {
	position: relative;
	z-index: 2;
	margin-top: clamp(4px, 1.4vw, 24px);
}

.seamkt-industries .seamkt-industries__wheel {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0 var(--in-gutter) 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	list-style: none;
}

.seamkt-industries__arm {
	flex: 0 0 var(--card-w);
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

.seamkt-industries .seamkt-industries__card {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: var(--in-word);
	color: var(--in-ink);
	font: inherit;
	text-align: left;
	white-space: normal;
	cursor: pointer;
	transition: box-shadow 0.6s var(--in-ease);
}

.seamkt-industries .seamkt-industries__card img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	border-radius: inherit;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
}

.seamkt-industries__chip {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 2px 10px -4px rgba(13, 13, 12, 0.3);
	color: var(--in-ink);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	transition: background-color 0.5s var(--in-ease), color 0.5s var(--in-ease);
}

.seamkt-industries__caption {
	display: block;
	padding: 12px 2px 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.seamkt-industries__spoke,
.seamkt-industries__ring,
.seamkt-industries__cursor,
.seamkt-industries__info {
	display: none;
}

/* ---------- The wheel ---------- */

.seamkt-industries.is-enhanced .seamkt-industries__orbit {
	flex: none;
	/* Spare height on tall screens is shared above the wheel and below the controls. */
	margin-top: auto;
	height: calc(var(--orbit-top) + var(--card-h));
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.seamkt-industries.is-dragging .seamkt-industries__orbit {
	cursor: grabbing;
}

/* The hub of the wheel: every arm turns around this point. */
.seamkt-industries.is-enhanced .seamkt-industries__wheel {
	position: absolute;
	top: calc(var(--orbit-top) + var(--card-h) / 2 + var(--r));
	left: 50%;
	display: block;
	width: 0;
	height: 0;
	padding: 0;
	overflow: visible;
	transition: opacity 1s var(--in-ease), transform 1.6s var(--in-ease);
}

.seamkt-industries.is-enhanced .seamkt-industries__arm {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	transform: rotate(calc(var(--k) * var(--step)));
	will-change: transform, opacity;
}

.seamkt-industries.is-enhanced .seamkt-industries__card {
	position: absolute;
	top: calc(-1 * var(--r) - var(--card-h) / 2);
	left: calc(var(--card-w) / -2);
	width: var(--card-w);
	height: var(--card-h);
	overflow: hidden;
	box-shadow: 0 24px 44px -32px rgba(13, 13, 12, 0.4);
	filter: grayscale(calc(var(--g, 1) * var(--gk, 1)));
	transform: scale(var(--s, 1));
	will-change: transform, filter;
	cursor: inherit;
}

.seamkt-industries.is-enhanced .seamkt-industries__card img {
	height: 100%;
	aspect-ratio: auto;
	pointer-events: none;
}

.seamkt-industries.is-enhanced .seamkt-industries__caption {
	display: none;
}

.seamkt-industries.is-enhanced .is-active .seamkt-industries__card {
	box-shadow: 0 44px 70px -38px rgba(13, 13, 12, 0.45), 0 0 0 1px rgba(13, 13, 12, 0.05);
}

.seamkt-industries.is-enhanced .is-active .seamkt-industries__chip {
	background: var(--in-ink);
	color: var(--in-paper);
}

@media (hover: hover) and (pointer: fine) {
	.seamkt-industries.is-enhanced .seamkt-industries__arm:not(.is-active) .seamkt-industries__card:hover {
		--gk: 0.35;
	}
}

/* Faint spokes from the hub to each poster, and the rim they hang on. */
.seamkt-industries.is-enhanced .seamkt-industries__spoke {
	position: absolute;
	bottom: 0;
	left: -0.5px;
	display: block;
	width: 1px;
	height: calc(var(--r) - var(--card-h) / 2 - 18px);
	background: linear-gradient(to top, transparent 15%, var(--in-line));
	pointer-events: none;
}

.seamkt-industries.is-enhanced .seamkt-industries__ring {
	position: absolute;
	z-index: -1;
	top: calc(var(--orbit-top) + var(--card-h) / 2);
	left: 50%;
	display: block;
	width: calc(var(--r) * 2);
	height: calc(var(--r) * 2);
	border: 1px solid var(--in-line);
	border-radius: 50%;
	transform: translateX(-50%);
	pointer-events: none;
	transition: opacity 1.2s var(--in-ease);
}

/* Before the section is reached the wheel waits below, then rises as it spins in. */
.seamkt-industries.is-enhanced:not(.is-revealed) .seamkt-industries__wheel {
	opacity: 0;
	transform: translateY(90px);
}

.seamkt-industries.is-enhanced:not(.is-revealed) .seamkt-industries__ring {
	opacity: 0;
}

/* The "Drag" label follows the mouse over the wheel. */
@media (hover: hover) and (pointer: fine) {
	.seamkt-industries.is-hovering .seamkt-industries__orbit {
		cursor: none;
	}

	.seamkt-industries.is-enhanced .seamkt-industries__cursor {
		position: absolute;
		z-index: 5;
		top: 0;
		left: 0;
		display: inline-flex;
		gap: 10px;
		align-items: center;
		padding: 13px 16px 13px 20px;
		border-radius: 999px;
		background: var(--in-ink);
		box-shadow: 0 16px 34px -16px rgba(13, 13, 12, 0.55);
		color: var(--in-paper);
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		pointer-events: none;
		transform: translate(-50%, -50%);
		scale: 0;
		transition: scale 0.4s var(--in-ease);
	}

	.seamkt-industries.is-hovering .seamkt-industries__cursor {
		scale: 1;
	}

	.seamkt-industries.is-hovering.is-dragging .seamkt-industries__cursor {
		scale: 0.86;
	}
}

.seamkt-industries__cursor svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Title, counter and controls under the top poster ---------- */

.seamkt-industries.is-enhanced .seamkt-industries__info {
	position: relative;
	z-index: 3;
	display: grid;
	justify-items: center;
	gap: 10px;
	width: min(480px, 100% - 2 * var(--in-gutter));
	margin: var(--info-gap) auto auto;
	text-align: center;
}

.seamkt-industries .seamkt-industries__count {
	margin: 0;
	color: var(--in-muted);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.14em;
}

.seamkt-industries__count-now {
	color: var(--in-ink);
}

.seamkt-industries__titles {
	display: grid;
	width: 100%;
}

.seamkt-industries .seamkt-industries__title {
	grid-area: 1 / 1;
	align-self: center;
	margin: 0;
	padding: 0;
	color: var(--in-ink);
	font-family: var(--in-font);
	font-size: clamp(22px, min(2.2vw, 4svh), 36px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.035em;
	text-wrap: balance;
	opacity: 0;
	filter: blur(6px);
	transform: translateY(0.45em);
	transition: opacity 0.45s var(--in-ease), filter 0.45s var(--in-ease), transform 0.6s var(--in-ease);
}

.seamkt-industries .seamkt-industries__title.is-active {
	opacity: 1;
	filter: none;
	transform: none;
}

.seamkt-industries__controls {
	display: flex;
	gap: clamp(18px, 2vw, 28px);
	align-items: center;
	margin-top: 6px;
}

.seamkt-industries .seamkt-industries__nav {
	display: inline-grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(13, 13, 12, 0.16);
	border-radius: 50%;
	background: var(--in-paper);
	color: var(--in-ink);
	cursor: pointer;
	transform: translateY(8px);
	transition: background-color 0.35s var(--in-ease), border-color 0.35s var(--in-ease), color 0.35s var(--in-ease), transform 0.35s var(--in-ease);
}

.seamkt-industries .seamkt-industries__nav:hover {
	border-color: var(--in-ink);
	background: var(--in-ink);
	color: var(--in-paper);
}

.seamkt-industries .seamkt-industries__nav:active {
	transform: translateY(8px) scale(0.94);
}

.seamkt-industries .seamkt-industries__nav:focus-visible {
	outline: 2px solid var(--in-ink);
	outline-offset: 3px;
}

.seamkt-industries__nav svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* A small compass that turns with the wheel; the pin marks the poster on top. */
.seamkt-industries__dial {
	position: relative;
	flex: none;
	width: 112px;
	height: 70px;
	overflow: hidden;
}

.seamkt-industries__dial-ring {
	position: absolute;
	top: 6px;
	left: 0;
	width: 112px;
	height: 112px;
	will-change: transform;
}

.seamkt-industries__tick {
	position: absolute;
	top: 6px;
	left: calc(50% - 1px);
	width: 2px;
	height: 7px;
	border-radius: 1px;
	background: rgba(13, 13, 12, 0.22);
	transform: rotate(calc(var(--t) * 360deg / (var(--industries-count) * 3)));
	transform-origin: 50% 50px;
}

.seamkt-industries__tick--major {
	top: 0;
	height: 12px;
	background: rgba(13, 13, 12, 0.55);
	transform-origin: 50% 56px;
}

.seamkt-industries__dial-pin {
	position: absolute;
	top: 0;
	left: calc(50% - 2px);
	width: 4px;
	height: 22px;
	border-radius: 2px;
	background: var(--in-ink);
	box-shadow: 0 0 0 3px var(--in-bg);
}

.seamkt-industries__dial-dot {
	position: absolute;
	top: 57px;
	left: calc(50% - 5px);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--in-ink);
}

.seamkt-industries__live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

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

@media (max-width: 1100px) {
	.seamkt-industries {
		--card-w: clamp(150px, min(var(--card-fit) * 0.75, 30vw), 300px);
		--r: clamp(300px, 48vw, 540px);
	}
}

@media (max-width: 767px) {
	.seamkt-industries {
		--in-gutter: 16px;
		--pad-top: clamp(48px, 8svh, 88px);
		--pad-bottom: 12px;
		--head-fs: clamp(34px, min(11vw, 6svh), 52px);
		--orbit-top: clamp(12px, 3svh, 32px);
		--info-h: 172px;
		--card-w: clamp(150px, min(var(--card-fit) * 0.75, 56vw), 250px);
		--r: max(280px, 80vw);
		/* Match the bottom of Journey's sky behind this panel's rounded top corners. */
		background: #17171a;
	}

	/* Keep Industries' paper behind the rounded top corners of the following section. */
	.seamkt-industries::after {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 30px;
		background: var(--in-bg);
		pointer-events: none;
		content: '';
	}

	/* Phones: no curtain. The panel follows the Journey as ordinary content instead of rising
	   over the pinned rocket and holding for the next section, so the phone never has two
	   scenes to draw at once. */
	.seamkt-journey.is-enhanced + .seamkt-industries {
		margin-top: 0;
	}

	.seamkt-journey.is-enhanced + .seamkt-industries.is-enhanced {
		--in-hold: 0px;
		--in-tail: 0px;
		height: var(--in-screen);
	}

	.seamkt-journey.is-enhanced + .seamkt-industries.is-enhanced .seamkt-industries__panel {
		position: relative;
		box-shadow: none;
	}

	/* The posters fade at the sides instead of turning grey: a filter re-renders the picture,
	   opacity is applied by the GPU as it is, which keeps a drag on the wheel smooth. */
	.seamkt-industries.is-enhanced .seamkt-industries__card {
		filter: none;
		opacity: calc(1 - var(--g, 1) * 0.4);
		will-change: transform, opacity;
	}

	/* Phones: the panel fills the large viewport, a fixed size, instead of the live (dvh)
	   height, which re-laid out the whole wheel on every frame while Safari's toolbar
	   shrank or grew mid-scroll. The wheel and controls are fitted to the part of the
	   screen the toolbar never covers. */
	@supports (height: 100lvh) {
		.seamkt-industries {
			--in-screen: 100lvh;
			--pad-bottom: calc(12px + 100lvh - 100svh);
		}
	}

	/* Let spare height sit above the wheel, with the controls close to the next section. */
	.seamkt-industries.is-enhanced .seamkt-industries__info {
		margin-bottom: 0;
	}

	.seamkt-industries.is-flush-top .seamkt-industries__panel {
		border-radius: 0;
	}

	.seamkt-industries__backword {
		height: min(40%, 70vw);
	}

	/* The titles cross-fade and rise without the blur: re-blurring the text on every frame of a
	   switch was too much for a phone while the wheel spins in. */
	.seamkt-industries .seamkt-industries__title {
		font-size: clamp(22px, 6.4vw, 28px);
		filter: none;
		transition: opacity 0.45s var(--in-ease), transform 0.6s var(--in-ease);
	}

	.seamkt-industries .seamkt-industries__nav {
		width: 48px;
		height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.seamkt-industries.is-enhanced .seamkt-industries__wheel,
	.seamkt-industries.is-enhanced .seamkt-industries__ring,
	.seamkt-industries .seamkt-industries__title,
	.seamkt-industries__cursor {
		transition: none;
	}
}