/* Marketing Department page: the desk photo whose monitor turns to the front and plays the showreel
   (night), then the eight roles as a deck of cards pinned in turn, followed by the planning principles.
   Same palette and type as the Services page: paper, ink, warm grey and night, Manrope in two
   voices. Motion in assets/js/marketing-page.js. */
.seamkt-mktpage {
	--mkt-paper: #f1f0ee;
	--mkt-line: #e4e3df;
	--mkt-ink: #0d0d0c;
	--mkt-soft: #57554f;
	--mkt-muted: #8a877f;
	--mkt-night: #050505;
	--mkt-light: #f4f2ee;
	--mkt-font: var(--seamkt-font, 'Manrope', system-ui, sans-serif);
	--mkt-gutter: clamp(20px, 3.4vw, 60px);
	--mkt-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mkt-radius: clamp(20px, 2.4vw, 36px);
	position: relative;
	isolation: isolate;
	background: var(--mkt-paper);
	color: var(--mkt-ink);
	font-family: var(--mkt-font);
}

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

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

/* The section labels share one type style. */
.seamkt-mktpage .seamkt-mkt-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	color: var(--mkt-muted);
	font-size: clamp(14px, 1.15vw, 17px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: none;
}

.seamkt-mkt-eyebrow::before {
	content: '';
	width: 28px;
	height: 1px;
	background: currentColor;
}

/* The second voice of every heading: the same face, light and warm grey. */
.seamkt-mkt-soft {
	color: var(--mkt-soft);
	font-weight: 300;
	letter-spacing: -0.04em;
}

@keyframes mkt-rise {
	from {
		opacity: 0;
		filter: blur(10px);
		translate: 0 0.5em;
	}
}

/* ---------- Hero: the desk and its screen ---------- */

.seamkt-mkt-hero {
	position: relative;
}

/* Scrolling scene (set by the script): one pinned screen, the run of the animation, then one
   more screen while the roles slide up over it. */
.seamkt-mkt-hero.is-live {
	--mkt-run: 240svh;
	height: calc(200svh + var(--mkt-run));
	background: var(--mkt-night);
}

.seamkt-mkt-hero__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100svh;
	min-height: 560px;
	padding: clamp(100px, 13svh, 128px) var(--mkt-gutter) clamp(22px, 4svh, 44px);
	overflow: clip;
	background:
		radial-gradient(ellipse 70% 55% at 50% 60%, #fff, transparent 75%),
		linear-gradient(180deg, #fbfaf8, var(--mkt-paper));
	transform-origin: 50% 0;
}

.seamkt-mkt-hero.is-live .seamkt-mkt-hero__stage {
	position: sticky;
	top: 0;
	min-height: 0;
	will-change: transform;
}

/* Everything the scene moves sits on its own layer and changes only by transform or opacity, so
   scrolling never makes the browser redraw the photo, the screen or their shadows. */
.seamkt-mkt-hero.is-live .seamkt-mkt-hero__intro {
	will-change: transform, opacity;
}

.seamkt-mkt-hero.is-dark .seamkt-mkt-hero__stage,
.seamkt-mkt-hero.is-dark .seamkt-mkt-hero__frame {
	background: var(--mkt-night);
}

.admin-bar .seamkt-mkt-hero__stage {
	height: calc(100svh - 32px);
}

.seamkt-mkt-hero__intro {
	position: relative;
	top: clamp(-24px, -2.2svh, -14px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
	align-items: start;
	gap: clamp(14px, 2svh, 22px) clamp(32px, 5vw, 96px);
	width: 100%;
	max-width: 1400px;
	margin: 0 auto clamp(20px, 3.6svh, 40px);
}

/* The label on its own row; the headline and the side copy share the row below it. */
.seamkt-mktpage .seamkt-mkt-hero__eyebrow {
	grid-area: 1 / 1;
}

.seamkt-mkt-hero__heading {
	grid-area: 2 / 1;
}

.seamkt-mkt-hero__eyebrow,
.seamkt-mkt-hero__heading,
.seamkt-mkt-hero__side {
	animation: mkt-rise 1000ms var(--mkt-ease) 120ms both;
}

/* The headline is sized from its own column, so each half always holds one line. */
.seamkt-mkt-hero__heading {
	min-width: 0;
	container-type: inline-size;
}

/* Beside the headline and as tall as it: the copy starts at the top of its capitals and the button
   sits on the baseline of "without the hiring." */
.seamkt-mkt-hero__side {
	grid-area: 2 / 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	align-self: stretch;
	gap: 14px;
	padding: 14px 0 0;
	animation-delay: 320ms;
}

.seamkt-mktpage .seamkt-mkt-hero__title {
	margin: 0;
	padding: 0;
	color: var(--mkt-ink);
	font-family: var(--mkt-font);
	font-size: clamp(34px, min(7.4cqi, 8.6svh), 92px);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.05em;
	text-transform: none;
}

.seamkt-mkt-hero__line {
	display: block;
	white-space: nowrap;
}

.seamkt-mkt-hero__line.seamkt-mkt-soft {
	margin-top: 0.04em;
	letter-spacing: -0.045em;
}

.seamkt-mktpage .seamkt-mkt-hero__lead {
	max-width: 30em;
	margin: 0;
	color: var(--mkt-soft);
	font-size: clamp(15px, 1.05vw, 17px);
	font-weight: 500;
	line-height: 1.5;
	text-wrap: pretty;
}

/* "Scroll to play": a small twin of the play button on the screen. */
.seamkt-mkt-hero__cue {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 4px 16px 4px 4px;
	border: 1px solid var(--mkt-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.7);
	color: var(--mkt-ink);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.005em;
}

.seamkt-mkt-hero__cue-icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--mkt-ink);
	color: #fff;
}

.seamkt-mkt-hero__cue-icon svg {
	width: 10px;
	height: 10px;
	margin-left: 1px;
	fill: currentColor;
}

.seamkt-mkt-hero__cue-icon::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid var(--mkt-ink);
	border-radius: inherit;
	animation: mkt-ping 2.4s var(--mkt-ease) infinite;
}

/* Once the intro has faded out (marketing-page.js), the ping stops: unseen, it still restyled
   every frame of the scene. */
.seamkt-mkt-hero.is-opened .seamkt-mkt-hero__cue-icon::after {
	animation: none;
}

@keyframes mkt-ping {
	from {
		opacity: 0.5;
		scale: 1;
	}

	to {
		opacity: 0;
		scale: 1.8;
	}
}

/* The photo as a framed card under the headline (the whole hero without the script). */
.seamkt-mkt-hero__slot {
	display: grid;
	flex: 1 1 auto;
	place-items: center;
	min-height: 0;
	container-type: size;
}

.seamkt-mkt-hero__frame {
	position: relative;
	width: min(100cqw, 100cqh * 1672 / 941);
	aspect-ratio: 1672 / 941;
	overflow: hidden;
	border-radius: var(--mkt-radius);
	background: #e9e7e3;
	box-shadow: 0 40px 90px -50px rgba(13, 13, 12, 0.5);
	animation: mkt-rise 1200ms var(--mkt-ease) 260ms both;
}

.seamkt-mkt-hero__room {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
}

.seamkt-mkt-hero__night {
	position: absolute;
	inset: 0;
	background: var(--mkt-night);
	opacity: 0;
	pointer-events: none;
	will-change: opacity;
}

/* The screen and the play button exist only once the script can lay them over the monitor. */
.seamkt-mkt-screen,
.seamkt-mkt-play {
	display: none;
}

/* ----- The scene, driven by the script ----- */

/* The frame covers the whole stage and is cut down to the card with a clip-path, so it is never
   resized; the photo keeps its natural size and is moved with a transform, so the monitor's
   corners can be tracked exactly. */
.seamkt-mkt-hero.is-ready .seamkt-mkt-hero__frame {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: auto;
	height: auto;
	aspect-ratio: auto;
	border-radius: 0;
	box-shadow: none;
}

.seamkt-mkt-hero__shade {
	display: none;
}

.seamkt-mkt-hero.is-ready .seamkt-mkt-hero__shade {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	display: block;
	border-radius: var(--mkt-radius);
	box-shadow: 0 40px 90px -50px rgba(13, 13, 12, 0.5);
	animation: mkt-rise 1200ms var(--mkt-ease) 260ms both;
	will-change: opacity;
	pointer-events: none;
}

.seamkt-mkt-hero.is-ready .seamkt-mkt-hero__room {
	position: absolute;
	top: 0;
	left: 0;
	width: 1672px;
	max-width: none;
	height: 941px;
	transform-origin: 0 0;
	will-change: transform, opacity;
}

/* Where the photo is narrower than the stage (phones), its edges melt into the paper. */
.seamkt-mkt-hero.is-ready .seamkt-mkt-hero__room.is-edged {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(var(--mkt-edge, 0) * 9%), #000 calc(100% - var(--mkt-edge, 0) * 9%), transparent), linear-gradient(180deg, transparent, #000 calc(var(--mkt-edge, 0) * 9%), #000 calc(100% - var(--mkt-edge, 0) * 9%), transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent, #000 calc(var(--mkt-edge, 0) * 9%), #000 calc(100% - var(--mkt-edge, 0) * 9%), transparent), linear-gradient(180deg, transparent, #000 calc(var(--mkt-edge, 0) * 9%), #000 calc(100% - var(--mkt-edge, 0) * 9%), transparent);
	mask-composite: intersect;
}

/* The flat 16:9 screen, mapped onto the monitor with a matrix3d from its top-left corner. */
.seamkt-mkt-hero.is-ready .seamkt-mkt-screen {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	display: block;
	width: 1600px;
	height: 900px;
	transform-origin: 0 0;
	pointer-events: none;
	backface-visibility: hidden;
	will-change: transform;
}

/* Its shadow is drawn once at full strength and only fades in as the screen lifts. */
.seamkt-mkt-screen__shadow {
	position: absolute;
	inset: -10% -14% -36%;
	background: radial-gradient(ellipse 46% 42% at 50% 60%, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35) 55%, transparent 75%);
	opacity: var(--mkt-lift, 0);
	will-change: opacity;
}

.seamkt-mkt-screen__panel {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 26px;
	background: #0b0b0c;
}

.seamkt-mkt-screen__poster,
.seamkt-mkt-screen__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	user-select: none;
}

.seamkt-mkt-screen__video {
	opacity: var(--mkt-reel, 0);
	background: #000;
}

/* A faint pane of glass that catches the light as the screen turns. */
.seamkt-mkt-screen__glare {
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.025) 34%, transparent 52%);
	border-radius: 26px;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.1);
	opacity: calc(0.35 + 0.65 * var(--mkt-lift, 0));
	pointer-events: none;
	will-change: opacity;
}

/* The play button: frosted glass on the screen, a ring that fills while scrolling, and a
   soft halo that breathes until it is pressed. Sized and placed by the script. */
.seamkt-mkt-hero.is-ready .seamkt-mkt-play {
	--size: 96px;
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	color: #fff;
	pointer-events: none;
	will-change: transform, opacity;
}

.seamkt-mkt-play::before {
	content: '';
	position: absolute;
	inset: 10%;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.28);
	animation: mkt-halo 2.6s var(--mkt-ease) infinite;
	pointer-events: none;
}

@keyframes mkt-halo {
	from {
		opacity: 0.7;
		scale: 1;
	}

	to {
		opacity: 0;
		scale: 1.75;
	}
}

.seamkt-mkt-play.is-pressed::before {
	animation: none;
	opacity: 0;
}

.seamkt-mkt-play__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	rotate: -90deg;
	fill: none;
	stroke-width: 1.6;
}

.seamkt-mkt-play__track {
	stroke: rgba(255, 255, 255, 0.34);
}

.seamkt-mkt-play__fill {
	stroke: #fff;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: calc(100 - 100 * var(--mkt-ring, 0));
}

.seamkt-mkt-play__core {
	position: relative;
	display: grid;
	place-items: center;
	width: 78%;
	height: 78%;
	border: 1px solid rgba(255, 255, 255, 0.42);
	border-radius: 50%;
	background:
		radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.42), transparent 55%),
		rgba(255, 255, 255, 0.14);
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	transition: transform 500ms var(--mkt-ease), background 400ms ease;
}

.seamkt-mkt-play__core svg {
	width: 34%;
	height: 34%;
	margin-left: 6%;
	fill: currentColor;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* Pressed: the glass dips in and turns solid white, as a real button would. */
.seamkt-mkt-play.is-pressed .seamkt-mkt-play__core {
	background: #fff;
	color: var(--mkt-ink);
	transform: scale(0.86);
}

.seamkt-mkt-play.is-pressed .seamkt-mkt-play__core svg {
	filter: none;
}

/* ---------- The eight roles ---------- */

.seamkt-mkt-services {
	position: relative;
	z-index: 1;
	padding: clamp(64px, 6vw, 96px) var(--mkt-gutter) clamp(110px, 12vw, 190px);
	border-radius: var(--mkt-radius) var(--mkt-radius) 0 0;
	background:
		radial-gradient(ellipse 50% 30% at 85% 4%, #fff, transparent 70%),
		radial-gradient(ellipse 45% 26% at 8% 40%, rgba(255, 255, 255, 0.85), transparent 70%),
		var(--mkt-paper);
}

/* Slide up over the pinned screen for its last viewport. */
.seamkt-mkt-hero.is-live + .seamkt-mkt-services {
	margin-top: -100svh;
	box-shadow: 0 -40px 80px -40px rgba(0, 0, 0, 0.5);
}

.admin-bar .seamkt-mkt-hero.is-live + .seamkt-mkt-services {
	margin-top: calc(32px - 100svh);
}

.seamkt-mkt-services__intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, min(44%, 540px));
	align-items: end;
	gap: 28px clamp(32px, 4vw, 64px);
	max-width: 1320px;
	margin: 0 auto clamp(64px, 7vw, 110px);
}

/* Sized from its own column, so each half always holds one line, as in the hero. */
.seamkt-mkt-services__heading {
	min-width: 0;
	container-type: inline-size;
}

.seamkt-mktpage .seamkt-mkt-services__title {
	margin: clamp(14px, 1.6vw, 22px) 0 0;
	padding: 0;
	color: var(--mkt-ink);
	font-family: var(--mkt-font);
	font-size: clamp(34px, 8.4cqi, 96px);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.05em;
	text-transform: none;
}

.seamkt-mkt-services__line {
	display: block;
	white-space: nowrap;
}

.seamkt-mkt-services__line.seamkt-mkt-soft {
	margin-top: 0.04em;
	letter-spacing: -0.045em;
}

.seamkt-mkt-services__side {
	padding-bottom: 0.55em;
}

.seamkt-mktpage .seamkt-mkt-services__side p {
	max-width: 540px;
	margin: 0;
	color: var(--mkt-soft);
	font-size: clamp(17px, 1.3vw, 21px);
	font-weight: 500;
	line-height: 1.55;
	text-wrap: balance;
}

/* The role colour of the card on top, eased from one to the next (where supported). */
@property --mkt-deck-accent {
	syntax: '<color>';
	inherits: true;
	initial-value: #e86a56;
}

/* The deck: every card pins in turn, a step lower than the one before, so the cards it slides over
   still show their top edge. The card's height is the smallest of: what the screen holds, a cap,
   and what leaves the copy a fair column beside a 4:3 poster. */
.seamkt-mktpage .seamkt-mkt-list {
	--card-pad: clamp(10px, 0.9vw, 14px);
	--card-step: 14px;
	--card-h: min(620px, calc(100svh - 150px), calc((min(1320px, 100vw - 2 * var(--mkt-gutter)) - 400px) * 0.75));
	--deck-gap: 22svh;
	position: relative;
	display: grid;
	gap: var(--deck-gap);
	max-width: 1320px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* A wash of the top card's colour, held behind the deck while it plays. Its own element, so the
   script's per-frame fade and colour never make the browser restyle the cards; it fades in and
   out with the deck (and stays hidden without the script), so it never shows an edge. */
.seamkt-mkt-glow {
	--mkt-deck-accent: #e86a56;
	position: sticky;
	z-index: -1;
	top: 0;
	display: block;
	height: 100svh;
	margin: 0 calc(-1 * var(--mkt-gutter)) -100svh;
	background:
		radial-gradient(ellipse 46% 42% at 30% 58%, color-mix(in srgb, var(--mkt-deck-accent) 16%, transparent), transparent 72%),
		radial-gradient(ellipse 40% 36% at 78% 40%, color-mix(in srgb, var(--mkt-deck-accent) 10%, transparent), transparent 72%);
	opacity: 0;
	pointer-events: none;
	transition: --mkt-deck-accent 900ms ease;
	will-change: opacity;
}

/* Room for the last card to rest before the deck leaves. */
.seamkt-mkt-list::after {
	content: '';
	height: 6svh;
}

/* Set by the script on each element that uses them: --mkt-a, how far a card has arrived; --mkt-d,
   how many cards lie on it; --mkt-t1..t3, its title and line sliding in. Not inherited: written on
   the card, they used to restyle every element inside it on every frame as the deck arrived over
   the reel. Without the script (or before it runs) every card shows at rest. */
@property --mkt-a {
	syntax: '<number>';
	inherits: false;
	initial-value: 1;
}

@property --mkt-d {
	syntax: '<number>';
	inherits: false;
	initial-value: 0;
}

@property --mkt-t1 {
	syntax: '<number>';
	inherits: false;
	initial-value: 1;
}

@property --mkt-t2 {
	syntax: '<number>';
	inherits: false;
	initial-value: 1;
}

@property --mkt-t3 {
	syntax: '<number>';
	inherits: false;
	initial-value: 1;
}

.seamkt-mktpage .seamkt-mkt-item {
	position: sticky;
	top: calc((100svh - var(--card-h)) / 2 + (var(--i, 0) - 3.5) * var(--card-step));
	margin: 0;
	padding: 0;
}

.seamkt-mkt-list.is-measuring .seamkt-mkt-item {
	position: relative;
	top: auto;
}

/* The card: a sheet of paper framing its poster. It rises tipped back and stands up as it pins,
   then sinks and dims under each card laid over it. */
.seamkt-mkt-card {
	--radius: clamp(24px, 2.4vw, 36px);
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	height: var(--card-h);
	padding: var(--card-pad);
	overflow: hidden;
	border: 1px solid rgba(13, 13, 12, 0.06);
	border-radius: var(--radius);
	background:
		radial-gradient(ellipse 70% 60% at 100% 100%, color-mix(in srgb, var(--accent, #8a877f) 13%, transparent), transparent 70%),
		linear-gradient(160deg, #fff 0%, #faf9f7 70%);
	box-shadow: inset 0 1px 0 #fff;
	transform-origin: 50% 0;
	transform: perspective(1800px) rotateX(calc((1 - var(--mkt-a)) * -9deg)) scale(calc(1 - min(var(--mkt-d), 3) * 0.04));
	opacity: clamp(0, 3.6 - var(--mkt-d), 1);
	/* Its own layer: the card tilts, sinks and fades without being redrawn. */
	will-change: transform, opacity;
}

/* The card's shadow, as soft gradients on a sheet just larger than the card that moves with it
   (same transform about the same point). Blurred box-shadows this size cost the GPU a long first
   draw for every card, all at once as the deck comes near, which is what made the roles stutter
   as they slid over the reel; gradients draw almost for free. */
.seamkt-mkt-item::before {
	/* The values are written on the item (not inherited by default, see @property above). */
	--mkt-a: inherit;
	--mkt-d: inherit;
	content: '';
	position: absolute;
	z-index: -1;
	inset: -30px -4% -70px;
	background:
		radial-gradient(ellipse 46% 60px at 50% calc(100% - 52px), rgba(13, 13, 12, 0.26), transparent),
		radial-gradient(ellipse 48% 34px at 50% 30px, rgba(13, 13, 12, 0.12), transparent);
	transform-origin: 50% 30px;
	transform: perspective(1800px) rotateX(calc((1 - var(--mkt-a)) * -9deg)) scale(calc(1 - min(var(--mkt-d), 3) * 0.04));
	opacity: clamp(0, 3.6 - var(--mkt-d), 1);
	pointer-events: none;
	will-change: transform, opacity;
}

.seamkt-mkt-card::after {
	--mkt-d: inherit;
	content: '';
	position: absolute;
	z-index: 3;
	inset: 0;
	border-radius: inherit;
	background: var(--mkt-ink);
	opacity: calc(min(var(--mkt-d), 1.5) * 0.16);
	pointer-events: none;
	will-change: opacity;
}

.seamkt-mkt-card__media {
	position: relative;
	width: calc((var(--card-h) - 2 * var(--card-pad)) * 4 / 3);
	height: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: calc(var(--radius) - var(--card-pad));
	background: var(--mkt-line);
	isolation: isolate;
}

/* The poster settles from a slight zoom as its card arrives. */
.seamkt-mkt-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	scale: calc(1 + (1 - var(--mkt-a)) * 0.16);
	user-select: none;
	will-change: transform;
}

/* The copy column: at the top the role's icon with its name as a small label and its number across
   the corner, at the foot its promise in the page's two voices, and the deck's steps below. Type is
   sized from the column itself (cqi). */
.seamkt-mkt-card__body {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: clamp(20px, 2vw, 32px);
	min-width: 0;
	padding: clamp(24px, 2.6vw, 48px) clamp(22px, 2.8vw, 52px);
	container-type: inline-size;
}

/* The foot, on a hairline: where the card sits in the deck, then what comes next. */
.seamkt-mkt-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: clamp(18px, 1.6vw, 24px);
	border-top: 1px solid rgba(13, 13, 12, 0.08);
	opacity: var(--mkt-t3);
}

/* One short bar per role: those before this card in its colour, its own filling as it arrives. */
.seamkt-mkt-card__steps {
	display: flex;
	flex: 0 1 200px;
	gap: 6px;
}

.seamkt-mkt-card__steps i {
	position: relative;
	flex: 1;
	height: 3px;
	overflow: hidden;
	border-radius: 3px;
	background: rgba(13, 13, 12, 0.09);
}

.seamkt-mkt-card__steps i::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--accent, var(--mkt-ink));
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.seamkt-mkt-card__steps .is-done::after {
	opacity: 0.35;
	transform: none;
}

.seamkt-mkt-card__steps .is-now::after {
	--mkt-t1: inherit;
	transform: scaleX(var(--mkt-t1));
}

.seamkt-mktpage .seamkt-mkt-card__next {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	color: var(--mkt-muted);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

.seamkt-mkt-card__next b {
	overflow: hidden;
	color: var(--mkt-soft);
	font-weight: 600;
	text-overflow: ellipsis;
}

.seamkt-mkt-card__next svg {
	flex: none;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 300ms var(--mkt-ease);
}

/* After the last card, the foot leads on to the plans. */
.seamkt-mktpage a.seamkt-mkt-card__next:hover,
.seamkt-mktpage a.seamkt-mkt-card__next:focus-visible {
	color: var(--mkt-ink);
}

a.seamkt-mkt-card__next b {
	color: var(--mkt-ink);
}

a.seamkt-mkt-card__next:hover svg,
a.seamkt-mkt-card__next:focus-visible svg {
	transform: translateX(3px);
}

/* The head: the role's icon beside its name, set small and quiet, kept clear of the number. */
.seamkt-mkt-card__head {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1vw, 16px);
	max-width: 62%;
	opacity: var(--mkt-t1);
}

.seamkt-mktpage .seamkt-mkt-card__title {
	margin: 0;
	padding: 0;
	color: var(--mkt-ink);
	font-family: var(--mkt-font);
	font-size: clamp(16px, 4.6cqi, 22px);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.02em;
	text-transform: none;
	text-wrap: balance;
}

/* The role's icon in a compact bordered card; it draws itself stroke by stroke as the card
   arrives. */
.seamkt-mkt-card__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: clamp(42px, 12cqi, 54px);
	height: clamp(42px, 12cqi, 54px);
	padding: clamp(9px, 2.6cqi, 12px);
	border: 1px solid color-mix(in srgb, var(--accent, var(--mkt-ink)) 28%, transparent);
	border-radius: clamp(11px, 3cqi, 14px);
	background: color-mix(in srgb, var(--accent, var(--mkt-ink)) 6%, #fff);
	box-shadow: 0 6px 16px -12px color-mix(in srgb, var(--accent, var(--mkt-ink)) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.8);
	color: var(--accent, var(--mkt-ink));
	box-sizing: border-box;
}

.seamkt-mkt-card__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.seamkt-mkt-card__icon svg > * {
	--mkt-t2: inherit;
	stroke-dasharray: 1 1;
	stroke-dashoffset: calc(1 - var(--mkt-t2));
}

/* The role's number across the top right: a hairline-weight figure filled with its colour, fading
   downward (solid glyphs, so no stroke ever crosses itself as an outline would). */
.seamkt-mkt-card__numeral {
	position: absolute;
	z-index: -1;
	top: clamp(6px, 1vw, 18px);
	right: clamp(16px, 2.4vw, 44px);
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #8a877f) 55%, transparent) 10%, color-mix(in srgb, var(--accent, #8a877f) 4%, transparent) 92%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: clamp(96px, 38cqi, 230px);
	font-weight: 200;
	line-height: 0.86;
	letter-spacing: -0.07em;
	font-variant-numeric: tabular-nums;
	translate: 0 calc((1 - var(--mkt-t2)) * 14%);
	opacity: var(--mkt-t2);
	user-select: none;
	pointer-events: none;
}

/* The promise at the foot of the column: its first words firm and large, sliding up out of their
   own edge, the rest light and a size down, at most two lines each. */
.seamkt-mktpage .seamkt-mkt-card__promise {
	align-self: end;
	margin: 0;
	color: var(--mkt-ink);
	font-family: var(--mkt-font);
	font-size: clamp(32px, 11.4cqi, 66px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.05em;
}

.seamkt-mkt-card__mask {
	display: block;
	overflow: hidden;
	padding-bottom: 0.16em;
	margin-bottom: -0.16em;
}

.seamkt-mkt-card__line {
	display: block;
	text-wrap: balance;
	translate: 0 calc((1 - var(--mkt-t2)) * 110%);
}

.seamkt-mkt-card__rest {
	display: -webkit-box;
	max-width: none;
	margin-top: 0.45em;
	overflow: hidden;
	font-size: clamp(18px, 5.6cqi, 32px);
	line-height: 1.22;
	letter-spacing: -0.03em;
	text-wrap: pretty;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	opacity: var(--mkt-t3);
	translate: 0 calc((1 - var(--mkt-t3)) * 0.4em);
}

/* ---------- How the department works ---------- */

.seamkt-mkt-work {
	position: relative;
	z-index: 1;
	background: #faf9f7;
	color: var(--mkt-ink);
}

/* Set by the script: held in place once its foot reaches the bottom of the screen (top is the
   screen height less its own), so the plans rise over it. */
.seamkt-mkt-work.is-pinned {
	position: sticky;
	top: var(--work-pin, 0px);
}

/* Pinned, the ledger keeps half a screen below its last row, so that row rests in the middle of
   the screen, under the band, while the plans rise over it. */
.seamkt-mkt-work.is-pinned .seamkt-mkt-work__ledger {
	padding-bottom: calc(50svh - var(--row-h) / 2);
}

.seamkt-mkt-work__intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, min(44%, 540px));
	align-items: end;
	gap: 28px clamp(32px, 4vw, 64px);
	max-width: calc(1320px + 2 * var(--mkt-gutter));
	margin: auto;
	padding: clamp(48px, 5vw, 88px) var(--mkt-gutter) clamp(48px, 5vw, 84px);
}

/* Sized from its own column, so each half of the title always holds one line. */
.seamkt-mkt-work__intro-left {
	min-width: 0;
	container-type: inline-size;
}

.seamkt-mktpage .seamkt-mkt-work__intro h2 {
	margin: clamp(14px, 1.6vw, 22px) 0 0;
	padding: 0;
	color: var(--mkt-ink);
	font-family: var(--mkt-font);
	font-size: clamp(34px, 8.6cqi, 96px);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.05em;
	text-transform: none;
}

.seamkt-mkt-work__title-line {
	display: block;
	white-space: nowrap;
}

.seamkt-mkt-work__title-line.seamkt-mkt-soft {
	margin-top: 0.04em;
	letter-spacing: -0.045em;
}

.seamkt-mktpage .seamkt-mkt-work__lead {
	max-width: 540px;
	margin: 0;
	padding-bottom: 0.7em;
	color: var(--mkt-soft);
	font-size: clamp(17px, 1.3vw, 21px);
	font-weight: 500;
	line-height: 1.55;
	text-wrap: balance;
}

/* The ledger: rows of a fixed height on plain paper, no rules between them, and one ink card (set
   by the script) with large rounded corners that rests on the row in focus and glides down from row
   to row. The rows' type is white in "difference" blending, so it reads dark on the paper and light
   on the card, turning exactly where the card's edge passes; nothing fades. */
.seamkt-mkt-work__ledger {
	--row-h: clamp(210px, 16.5vw, 300px);
	--media: clamp(240px, 25vw, 470px);
	--media-h: var(--row-h);
	--inset-x: clamp(10px, 1.2vw, 20px);
	--inset-y: clamp(6px, 0.6vw, 10px);
	--pad: clamp(12px, 1.1vw, 18px);
	--radius: clamp(24px, 2.2vw, 36px);
	--frame-h: calc(var(--media-h) - 2 * (var(--inset-y) + var(--pad)));
	position: relative;
	isolation: isolate;
	padding: 0 0 clamp(20px, 3vw, 48px);
	background: #faf9f7;
}

.seamkt-mkt-work__list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.seamkt-mkt-work__row {
	position: relative;
	display: grid;
	grid-template-columns: var(--media) minmax(0, 1fr);
	align-items: center;
	height: var(--row-h);
}

/* One continuous column of fine dots down the picture side of the whole ledger, fading out at its
   top and bottom; each row's icon sits on it in a white disc. */
.seamkt-mkt-work__list::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--inset-x) + var(--pad));
	width: calc(var(--media) - var(--inset-x) - 2 * var(--pad));
	background: radial-gradient(#97938a 1px, transparent 1.2px) 0 0 / 9px 9px;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
	pointer-events: none;
}

.seamkt-mkt-work__cell {
	position: relative;
	display: grid;
	align-self: stretch;
	place-items: center;
	padding-left: var(--inset-x);
}

/* At rest the picture cell is a fine dot grid in a rounded frame, exactly where the card's picture
   window lands, its edges fading into the paper. */
/* The step's icon, made of the dot column itself: a layer of larger, darker dots on exactly the
   same grid (offset by the row's place in the list), cut to the icon's shape. It spreads out from
   the middle as the row comes into view and sinks back into the dots as it leaves. */
.seamkt-mkt-work__icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--inset-x) + var(--pad));
	width: calc(var(--media) - var(--inset-x) - 2 * var(--pad));
	background: radial-gradient(#1b1a18 1.9px, transparent 2.2px) 0 calc(-1 * var(--i, 0) * var(--row-h)) / 9px 9px;
	-webkit-mask: var(--icon) center / clamp(120px, 10vw, 170px) no-repeat;
	mask: var(--icon) center / clamp(120px, 10vw, 170px) no-repeat;
	clip-path: circle(0% at 50% 50%);
	transition: clip-path 1500ms var(--mkt-ease);
	pointer-events: none;
}

.seamkt-mkt-work .is-seen .seamkt-mkt-work__icon {
	clip-path: circle(46% at 50% 50%);
}

.seamkt-mkt-work .is-gone .seamkt-mkt-work__icon {
	clip-path: circle(0% at 50% 50%);
	transition-duration: 900ms;
}

.seamkt-mkt-work__cell img {
	display: none;
}

.seamkt-mkt-work__copy {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: clamp(24px, 4vw, 80px);
	padding: 0 calc(var(--mkt-gutter) + clamp(70px, 5.4vw, 104px)) 0 clamp(24px, 3vw, 56px);
	color: #fff;
	mix-blend-mode: difference;
}

/* The name in two voices: the firm words, then the rest in a hairline weight. */
.seamkt-mktpage .seamkt-mkt-work__name {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: var(--mkt-font);
	font-size: clamp(30px, 3vw, 56px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.05em;
	text-transform: none;
}

.seamkt-mkt-work__soft {
	color: rgba(255, 255, 255, 0.6);
	font-weight: 300;
	letter-spacing: -0.045em;
}

.seamkt-mktpage .seamkt-mkt-work__detail {
	max-width: 24em;
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: clamp(16px, 1.2vw, 20px);
	font-weight: 500;
	line-height: 1.5;
	text-wrap: pretty;
}

/* Each line rises out of its own edge the first time its row comes into view. */
.seamkt-mkt-work__mask {
	display: block;
	overflow: hidden;
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}

.seamkt-mkt-work__mask > span {
	display: block;
}

.seamkt-mkt-work.is-motion .seamkt-mkt-work__mask > span {
	translate: 0 110%;
	transition: translate 1100ms var(--mkt-ease);
}

.seamkt-mkt-work.is-motion .seamkt-mkt-work__soft > span {
	transition-delay: 90ms;
}

.seamkt-mkt-work.is-motion .seamkt-mkt-work__detail .seamkt-mkt-work__mask > span {
	transition-delay: 180ms;
}

.seamkt-mkt-work.is-motion .is-seen .seamkt-mkt-work__mask > span {
	translate: none;
}

/* The card: soft ink with a warm sheen, inset from the page's edges with large rounded corners,
   its picture in a rounded window on the left and a white disc with an arrow on the right. Moved
   and wiped by the script only (transform and clip-path), so it never re-lays out. */
.seamkt-mkt-work__band {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	left: 0;
	display: none;
	height: var(--row-h);
	background:
		radial-gradient(ellipse 60% 120% at 92% 50%, rgba(255, 255, 255, 0.07), transparent 70%),
		linear-gradient(100deg, #0e0e0d, #1b1a18);
	clip-path: inset(var(--inset-y) calc(var(--inset-x) + (1 - var(--band-in, 0)) * (100% - 2 * var(--inset-x))) var(--inset-y) calc(var(--inset-x) + var(--band-out, 0) * (100% - 2 * var(--inset-x))) round var(--radius));
	will-change: transform, clip-path;
	pointer-events: none;
}

.seamkt-mkt-work.is-motion .seamkt-mkt-work__band {
	display: block;
}

.seamkt-mkt-work__band-media {
	position: absolute;
	top: calc(var(--inset-y) + var(--pad));
	left: calc(var(--inset-x) + var(--pad));
	width: calc(var(--media) - var(--inset-x) - 2 * var(--pad));
	height: var(--frame-h);
	overflow: hidden;
	border-radius: calc(var(--radius) - var(--pad));
}

.seamkt-mkt-work__reel {
	will-change: transform;
}

.seamkt-mkt-work__reel img {
	display: block;
	width: 100%;
	height: var(--frame-h);
	max-width: none;
	object-fit: cover;
	user-select: none;
}

/* A white disc with the arrow in ink; it turns a quarter while the card travels and settles
   level on each row. */
.seamkt-mkt-work__arrow {
	position: absolute;
	top: 50%;
	right: calc(var(--inset-x) + clamp(22px, 2.4vw, 44px));
	display: grid;
	place-items: center;
	width: clamp(50px, 3.8vw, 66px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: #f7f6f3;
	box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.7), inset 0 -2px 0 rgba(0, 0, 0, 0.08);
	color: #0e0e0d;
	translate: 0 -50%;
	rotate: calc(var(--band-move, 0) * 45deg);
	scale: calc(1 - var(--band-move, 0) * 0.12);
}

.seamkt-mkt-work__arrow svg {
	width: 36%;
	height: 36%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Plans: the Services page's pricing cards for the three Marketing Department plans ---------- */

/* The Services page's tokens (services-plans.css reads them), and the section set flat on this page's
   paper, rising over the ledger as a curtain, as on the Services page. */
.seamkt-mkt-plans {
	--svc-paper: #faf9f7;
	--svc-line: #e4e3df;
	--svc-ink: #0d0d0c;
	--svc-soft: #57554f;
	--svc-muted: #8a877f;
	--svc-font: var(--mkt-font);
	--svc-gutter: var(--mkt-gutter);
	--svc-ease: var(--mkt-ease);
	z-index: 2;
	padding-top: clamp(64px, 7vw, 120px);
	padding-bottom: clamp(96px, 10vw, 160px);
	background: #f4f3f0;
	font-family: var(--mkt-font);
}

/* A taller header, so the badge sits clear above the orb. */
.seamkt-mkt-plans .seamkt-plan__media {
	aspect-ratio: 1.62 / 1;
	padding-top: 36px;
}

.seamkt-mkt-plans .seamkt-plans__panel {
	margin-top: clamp(40px, 4.4vw, 64px);
}

/* One category only: its name is already the page, so it is kept for screen readers alone. */
.seamkt-mkt-plans .seamkt-plans__group {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
}

/* ---------- Tablet and phone ---------- */

@media (max-width: 900px) {
	.seamkt-mkt-work__intro {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	/* Upright screens: the picture as a narrow strip on the left, the copy stacked beside it. */
	.seamkt-mkt-work__ledger {
		--row-h: 250px;
		--media: 30%;
	}

	.seamkt-mkt-work__copy {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 0 20px 0 24px;
	}

	.seamkt-mkt-work__arrow {
		display: none;
	}


	.seamkt-mkt-hero.is-live {
		--mkt-run: 190svh;
	}

	/* Upright screens: the headline and the card sit together in the middle of the stage. */
	.seamkt-mkt-hero__stage {
		justify-content: center;
		padding-top: clamp(72px, 10svh, 110px);
	}

	.seamkt-mkt-hero__slot {
		flex: 0 1 auto;
		height: calc((100vw - 2 * var(--mkt-gutter)) * 941 / 1672);
		margin-top: 12px;
	}

	.seamkt-mkt-hero__intro,
	.seamkt-mkt-services__intro {
		grid-template-columns: 1fr;
	}

	.seamkt-mktpage .seamkt-mkt-hero__eyebrow,
	.seamkt-mkt-hero__heading,
	.seamkt-mkt-hero__side {
		grid-area: auto;
	}

	.seamkt-mkt-hero__side {
		padding: 0;
		animation-delay: 220ms;
	}

	.seamkt-mkt-hero__intro {
		top: -10px;
	}

	/* Upright screens: each card holds its poster above its copy and pins near the top. */
	.seamkt-mktpage .seamkt-mkt-list {
		--card-step: 10px;
		--card-h: auto;
		--deck-gap: 16svh;
		max-width: 560px;
	}

	.seamkt-mktpage .seamkt-mkt-item {
		top: calc(4svh + var(--i, 0) * var(--card-step));
	}

	.seamkt-mkt-card {
		grid-template-columns: 1fr;
	}

	.seamkt-mkt-card__media {
		width: auto;
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.seamkt-mkt-card__body {
		gap: 18px;
		padding: 20px 12px 16px;
	}

	/* The head takes the row up to the (smaller) number. */
	.seamkt-mkt-card__head {
		max-width: calc(100% - 84px);
	}

	/* Within the head's row, so it never reaches the promise below. */
	.seamkt-mkt-card__numeral {
		top: 16px;
		right: 12px;
		font-size: 64px;
	}

	.seamkt-mkt-card__foot {
		padding-top: 16px;
	}

	.seamkt-mkt-card__steps {
		flex-basis: 150px;
	}

}

/* Too short to pin a card: the deck lays out as a plain list. */
@media (max-height: 560px) {
	.seamkt-mktpage .seamkt-mkt-item {
		position: relative;
		top: auto;
	}

	.seamkt-mktpage .seamkt-mkt-list {
		--deck-gap: 48px;
	}
}

@media (max-width: 560px) {
	/* Keep both labels in the media header without letting their text collide. */
	.seamkt-mkt-plans .seamkt-plan__badge {
		max-width: calc(100% - 24px);
		font-size: 12px;
		padding: 6px 10px;
	}

	.seamkt-mkt-plans .seamkt-plan__flag {
		top: 12px;
		right: 12px;
		bottom: auto;
	}

	.seamkt-mkt-work__intro {
		padding-top: 44px;
		padding-bottom: 44px;
	}

	.seamkt-mktpage .seamkt-mkt-work__intro h2 {
		font-size: clamp(34px, 10.4vw, 46px);
		line-height: 1.02;
	}

	.seamkt-mkt-work__title-line {
		white-space: normal;
	}

	/* Phones: the picture as a strip across the top of each row, the copy below it. */
	.seamkt-mkt-work__ledger {
		--row-h: 340px;
		--media: 100%;
		--media-h: 140px;
	}

	.seamkt-mkt-work__row {
		grid-template-columns: 1fr;
		grid-template-rows: var(--media-h) 1fr;
	}

	/* Each row keeps its own picture in a rounded frame, drawn over the card, which glides
	   beneath it. */
	.seamkt-mkt-work__cell {
		position: relative;
		z-index: 2;
		display: block;
		padding: calc(var(--inset-y) + var(--pad)) calc(var(--inset-x) + var(--pad)) 0;
	}

	.seamkt-mkt-work__list::before {
		display: none;
	}

	/* The frame starts as a field of fine dots with the step's icon drawn in larger ones; once
	   the row nears the middle of the screen its picture fades up over them (marketing-page.js
	   adds .is-shown). */
	.seamkt-mkt-work__cell::before {
		position: absolute;
		top: calc(var(--inset-y) + var(--pad));
		right: calc(var(--inset-x) + var(--pad));
		bottom: 0;
		left: calc(var(--inset-x) + var(--pad));
		border-radius: calc(var(--radius) - var(--pad));
		background: radial-gradient(#97938a 1px, transparent 1.2px) 0 0 / 9px 9px;
		content: '';
	}

	.seamkt-mkt-work__icon {
		z-index: 1;
		top: calc(var(--inset-y) + var(--pad));
		right: calc(var(--inset-x) + var(--pad));
		bottom: 0;
		left: calc(var(--inset-x) + var(--pad));
		width: auto;
		background-position: 0 0;
		-webkit-mask-size: 76px;
		mask-size: 76px;
	}

	.seamkt-mkt-work__cell img {
		position: relative;
		z-index: 2;
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		border-radius: calc(var(--radius) - var(--pad));
		object-fit: cover;
		opacity: 0;
		transform: scale(1.04);
		transition: opacity 0.9s ease, transform 1.2s var(--mkt-ease);
	}

	.seamkt-mkt-work__row.is-shown .seamkt-mkt-work__cell img {
		opacity: 1;
		transform: none;
	}

	.seamkt-mkt-work__band-media {
		display: none;
	}

	.seamkt-mkt-work__copy {
		align-self: center;
		padding: 0 20px;
	}

	.seamkt-mktpage .seamkt-mkt-hero__title {
		font-size: clamp(34px, 10.4vw, 46px);
		line-height: 1.02;
	}

	.seamkt-mkt-hero__line {
		white-space: normal;
	}

	.seamkt-mkt-hero__lead {
		display: none;
	}

	.seamkt-mktpage .seamkt-mkt-services__title {
		font-size: clamp(34px, 10.4vw, 46px);
		line-height: 1.02;
	}

	.seamkt-mkt-services__line {
		white-space: normal;
	}
}

@media (max-width: 368px) {
	/* On the narrowest phones, put the featured label on a second line above the orb. */
	.seamkt-mkt-plans .seamkt-plan__media {
		min-height: 190px;
	}

	.seamkt-mkt-plans .seamkt-plan__flag {
		top: 44px;
	}
}

/* ---------- Phones: the light hero (marketing-page.js, .is-simple) ---------- */

/* The headline over the desk photo as a card that scrolls like the rest of the page. The reel's
   screen and the play button sit inside the card: once it is in view the ring fills, the button
   presses, and the reel fades in over the photo. No pinned stage, so no strip shows beneath it. */
@media (max-width: 767px) {
	/* Keep each of the five work-step headings on one line on phones. */
	.seamkt-mktpage .seamkt-mkt-work__name {
		display: flex;
		align-items: baseline;
		gap: 0.22em;
		font-size: clamp(15px, 5vw, 20px);
		line-height: 1.2;
		white-space: nowrap;
	}

	.seamkt-mkt-hero.is-simple .seamkt-mkt-hero__stage {
		height: auto;
		min-height: 0;
		padding-bottom: 48px;
	}

	.seamkt-mkt-hero.is-simple .seamkt-mkt-hero__intro {
		top: 0;
	}

	/* The reel starts by itself here, so there is no "Scroll to play" cue. */
	.seamkt-mkt-hero.is-simple .seamkt-mkt-hero__cue {
		display: none;
	}

	.seamkt-mkt-hero.is-simple .seamkt-mkt-screen {
		position: absolute;
		z-index: 2;
		inset: 0;
		display: block;
		opacity: 0;
		transition: opacity 0.9s ease;
		pointer-events: none;
	}

	.seamkt-mkt-hero.is-simple.is-reel .seamkt-mkt-screen {
		opacity: 1;
	}

	.seamkt-mkt-hero.is-simple .seamkt-mkt-screen__shadow {
		display: none;
	}

	.seamkt-mkt-hero.is-simple .seamkt-mkt-screen__panel,
	.seamkt-mkt-hero.is-simple .seamkt-mkt-screen__glare {
		border-radius: 0;
	}

	.seamkt-mkt-hero.is-simple .seamkt-mkt-screen__video {
		opacity: 1;
	}

	.seamkt-mkt-hero.is-simple .seamkt-mkt-screen__glare {
		opacity: 0.5;
	}

	.seamkt-mkt-hero.is-simple .seamkt-mkt-play {
		--size: 76px;
		position: absolute;
		z-index: 3;
		top: 50%;
		left: 50%;
		display: grid;
		place-items: center;
		width: var(--size);
		height: var(--size);
		margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
		border-radius: 50%;
		color: #fff;
		pointer-events: none;
		transition: opacity 0.5s ease 0.2s, transform 0.6s var(--mkt-ease) 0.2s;
	}

	/* A darker glass than on the wide scene, and no live blur over the photo. */
	.seamkt-mkt-hero.is-simple .seamkt-mkt-play__core {
		background:
			radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.35), transparent 55%),
			rgba(13, 13, 12, 0.38);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/* The ring fills once, as the card comes into view. */
	.seamkt-mkt-hero.is-simple .seamkt-mkt-play__fill {
		transition: stroke-dashoffset 1s var(--mkt-ease);
	}

	.seamkt-mkt-hero.is-simple.is-playing .seamkt-mkt-play {
		--mkt-ring: 1;
	}

	.seamkt-mkt-hero.is-simple.is-reel .seamkt-mkt-play {
		opacity: 0;
		transform: scale(1.3);
	}
}

@media (prefers-reduced-motion: reduce) {
	.seamkt-mkt-hero__eyebrow,
	.seamkt-mkt-hero__heading,
	.seamkt-mkt-hero__side,
	.seamkt-mkt-hero__frame,
	.seamkt-mkt-hero__cue-icon::after,
	.seamkt-mkt-play::before {
		animation: none;
	}

	.seamkt-mktpage *,
	.seamkt-mktpage *::before,
	.seamkt-mktpage *::after {
		transition-duration: 1ms !important;
	}
}