/* Services page: a typed headline over a staggered row of eight service posters that fills one screen (clean light paper, black, white and warm grey only), then every plan at a glance in the Service packages grid (night). Motion in assets/js/services-page.js. */
.seamkt-svcpage {
	--svc-paper: #f1f0ee;
	--svc-line: #e4e3df;
	--svc-ink: #0d0d0c;
	--svc-soft: #57554f;
	--svc-muted: #8a877f;
	--svc-night: #050505;
	--svc-light: #f4f2ee;
	--svc-glass: linear-gradient(180deg, #1c1c1f, #111113);
	--svc-font: var(--seamkt-font, 'Manrope', system-ui, sans-serif);
	--svc-gutter: clamp(20px, 3.4vw, 60px);
	--svc-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--svc-radius: clamp(20px, 2.4vw, 36px);
	position: relative;
	isolation: isolate;
	background: var(--svc-paper);
	color: var(--svc-ink);
	font-family: var(--svc-font);
}

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

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

/* ---------- Hero: one screen tall ---------- */

/* The eyebrow, headline, poster row, promise and prompt fill exactly one viewport: the
   posters take the width the row allows, or the height left after the text (a card plus
   its stagger), whichever is smaller. */
.seamkt-svc-hero {
	--gap: clamp(9px, 0.9vw, 16px);
	--card-w: clamp(78px, min(calc((100vw - 2 * var(--svc-gutter) - 7 * var(--gap)) / 8), calc((82svh - 350px) / 1.5)), 226px);
	position: sticky;
	z-index: 0;
	top: 0;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100svh;
	min-height: 620px;
	padding: 124px var(--svc-gutter) clamp(24px, 4svh, 44px);
	overflow: clip;
	background:
		radial-gradient(ellipse 70% 55% at 50% 50%, #fff, transparent 75%),
		linear-gradient(180deg, #fbfaf8, var(--svc-paper));
	text-align: center;
}

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

/* "Build any ___ you imagine": one typeface, two voices, as in the homepage headings. The
   frame is firm, the word in between is typed in a light weight on a hairline rule that
   holds its place while it is being rewritten. */
.seamkt-svcpage .seamkt-svc-hero__title {
	margin: 0;
	padding: 0;
	color: var(--svc-ink);
	font-family: var(--svc-font);
	font-size: clamp(36px, min(5.2vw, 9svh), 92px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.045em;
	text-transform: none;
	transform: translateY(clamp(-70px, -7.4svh, -54px));
}

.seamkt-svc-hero__line {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.1em 0.26em;
}

.seamkt-svc-hero__mark {
	white-space: nowrap;
	animation: svc-rise 900ms var(--svc-ease) 120ms both;
}

.seamkt-svc-hero__mark--late {
	animation-delay: 260ms;
}

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

/* A fixed line box, so the rule and caret stay put even while the word is empty. */
.seamkt-svc-hero__word {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 3.5em;
	height: 1.12em;
	padding: 0 0.06em;
	color: var(--svc-soft);
	font-weight: 300;
	letter-spacing: -0.04em;
	white-space: nowrap;
	animation: svc-rise 900ms var(--svc-ease) 190ms both;
}

.seamkt-svc-hero__word::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0.02em;
	left: 0;
	height: 0.045em;
	border-radius: 1em;
	background: linear-gradient(90deg, transparent, rgba(13, 13, 12, 0.32) 18%, rgba(13, 13, 12, 0.32) 82%, transparent);
}

.seamkt-svc-hero__typed {
	line-height: 1.12;
}

/* Set apart from the light letters so it never reads as an extra "l". */
.seamkt-svc-hero__word .seamkt-svc-hero__caret {
	width: 0.04em;
	height: 0.66em;
	margin-left: 0.12em;
	background: var(--svc-muted);
}

.seamkt-svc-hero__caret,
.seamkt-svc-prompt__caret {
	flex: none;
	display: inline-block;
	align-self: center;
	width: 0.05em;
	height: 0.78em;
	margin-left: 0.05em;
	border-radius: 2px;
	background: currentColor;
	animation: svc-blink 1s steps(1) infinite;
}

@keyframes svc-blink {
	50% {
		opacity: 0;
	}
}

/* The poster row: eight upright posters, high and low in turn like the reference fan.
   Each one floats gently on its own beat. */
.seamkt-svc-fan {
	--drop: calc(var(--card-w) * 0.18);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: var(--gap);
	max-width: 100%;
	margin: clamp(6px, 1.8svh, 20px) 0 0;
	padding: 0;
	list-style: none;
	transform: translateY(clamp(-10px, -1svh, -6px));
}

.seamkt-svc-fan__card {
	position: relative;
	flex: none;
	width: var(--card-w);
	margin: 0;
	padding: 0;
	animation: svc-deal 1100ms var(--svc-ease) calc(var(--i) * 70ms + 300ms) both;
}

.seamkt-svc-fan__card:is(:nth-child(2), :nth-child(4), :nth-child(5), :nth-child(7)) {
	margin-top: var(--drop);
}

@keyframes svc-deal {
	from {
		opacity: 0;
		filter: blur(8px);
		translate: 0 56px;
	}
}

.seamkt-svc-fan__float {
	position: relative;
	display: block;
	animation: svc-float 6s ease-in-out calc(var(--i) * -0.75s) infinite alternate;
}

@keyframes svc-float {
	from {
		translate: 0 -3px;
	}

	to {
		translate: 0 3px;
	}
}

.seamkt-svc-fan__link {
	display: block;
	overflow: hidden;
	border-radius: clamp(12px, 1vw, 18px);
	box-shadow: 0 24px 42px -26px rgba(13, 13, 12, 0.48);
	transition: transform 600ms var(--svc-ease), box-shadow 600ms var(--svc-ease);
}

.seamkt-svc-fan__link img {
	display: block;
	border-radius: inherit;
	width: 100%;
	height: auto;
	aspect-ratio: 18 / 25;
	object-fit: cover;
	transform: translateY(4px) scale(1.025);
	transition: transform 800ms var(--svc-ease);
	user-select: none;
}

.seamkt-svc-fan__link:hover,
.seamkt-svc-fan__link:focus-visible {
	box-shadow: 0 34px 58px -28px rgba(13, 13, 12, 0.56);
	transform: translateY(-10px);
}

.seamkt-svc-fan__link:hover img,
.seamkt-svc-fan__link:focus-visible img {
	transform: translateY(4px) scale(1.065);
}

.seamkt-svc-fan__link:focus-visible {
	outline: 2px solid var(--svc-ink);
	outline-offset: 4px;
}

.seamkt-svc-hero__lead {
	display: grid;
	gap: 2px;
	max-width: 34em;
	margin: clamp(44px, 6.5svh, 70px) 0 0;
	color: var(--svc-soft);
	font-size: clamp(15px, 1.1vw, 17px);
	font-weight: 500;
	line-height: 1.6;
	translate: 0 clamp(22px, 3svh, 30px);
	animation: svc-rise 900ms var(--svc-ease) 800ms both;
}

.seamkt-svc-hero__lead strong {
	color: var(--svc-ink);
	font-weight: 700;
}

/* The prompt bar: glossy black glass that writes a goal and leads to the plans. */
.seamkt-svcpage .seamkt-svc-prompt {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
	width: min(620px, 100%);
	min-height: 62px;
	margin-top: clamp(20px, 3.2svh, 34px);
	padding: 7px 7px 7px 22px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background:
		radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.16), transparent 38%),
		linear-gradient(135deg, rgba(38, 38, 42, 0.97), rgba(7, 7, 9, 0.98));
	box-shadow: 0 22px 52px -26px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.72);
	backdrop-filter: blur(20px) saturate(0.85);
	-webkit-backdrop-filter: blur(20px) saturate(0.85);
	color: #f7f7f7;
	font-size: clamp(14px, 1.05vw, 16px);
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	translate: 0 clamp(22px, 3svh, 30px);
	animation: svc-rise 900ms var(--svc-ease) 950ms both;
	transition: transform 300ms var(--svc-ease), box-shadow 300ms var(--svc-ease), border-color 300ms ease, background 300ms ease;
}

.seamkt-svcpage .seamkt-svc-prompt:hover,
.seamkt-svcpage .seamkt-svc-prompt:focus-visible {
	border-color: rgba(255, 255, 255, 0.28);
	background:
		radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.21), transparent 42%),
		linear-gradient(135deg, rgba(45, 45, 50, 0.98), rgba(10, 10, 12, 0.99));
	box-shadow: 0 26px 60px -28px rgba(0, 0, 0, 0.86), 0 0 0 4px rgba(0, 0, 0, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.78);
	color: #fff;
	outline: none;
	transform: translateY(-2px);
}

.seamkt-svc-prompt__globe {
	flex: none;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: rgba(255, 255, 255, 0.58);
	stroke-width: 1.6;
}

.seamkt-svc-prompt__scheme {
	flex: none;
	color: rgba(255, 255, 255, 0.52);
	font-weight: 600;
}

.seamkt-svc-prompt__text {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}

.seamkt-svc-prompt__typed {
	overflow: hidden;
	text-overflow: ellipsis;
}

.seamkt-svc-prompt__caret {
	width: 2px;
	height: 1.15em;
	margin-left: 2px;
}

/* The round button in the header's dark glass. */
.seamkt-svc-prompt__go {
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: linear-gradient(145deg, #3a3b40, #0b0b0d 65%);
	box-shadow: 0 9px 22px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.24);
	color: #fff;
	transition: transform 300ms var(--svc-ease);
}

.seamkt-svc-prompt__go svg,
.seamkt-svc-card__cta svg,
.seamkt-svc-packages__contact svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.seamkt-svc-prompt__go svg {
	rotate: 0deg;
}

.seamkt-svc-prompt:hover .seamkt-svc-prompt__go,
.seamkt-svc-prompt:focus-visible .seamkt-svc-prompt__go {
	transform: translateX(3px);
}

/* ---------- Service packages ---------- */

.seamkt-svc-packages {
	position: relative;
	isolation: isolate;
	padding: clamp(88px, 10vw, 150px) var(--svc-gutter) clamp(88px, 10vw, 150px);
	overflow: clip;
	border-radius: var(--svc-radius) var(--svc-radius) 0 0;
	background: var(--svc-night);
	color: var(--svc-light);
}

.seamkt-svc-packages__glow {
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 50% 32% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 70%);
}

.seamkt-svc-packages__intro {
	max-width: 900px;
	margin: 0 auto clamp(52px, 6.5vw, 88px);
	text-align: center;
}

.seamkt-svc-packages__kicker {
	display: inline-block;
	margin: 0;
	padding: 9px 18px;
	border: 1px solid #ffffff1f;
	border-radius: 999px;
	background: #ffffff0d;
	color: rgba(244, 242, 238, 0.66);
	font-size: clamp(14px, 1.15vw, 17px);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.seamkt-svc-packages__kicker em {
	color: #fff;
	font-style: normal;
	font-weight: 700;
}

/* Silver lettering, like the poster titles. */
.seamkt-svcpage .seamkt-svc-packages__title {
	margin: 0.3em 0 0;
	padding: 0 0 0.06em;
	background: linear-gradient(180deg, #fff 20%, rgba(244, 242, 238, 0.42));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: var(--svc-font);
	font-size: clamp(46px, 7.2vw, 124px);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.055em;
	text-transform: none;
}

.seamkt-svc-packages__lead {
	max-width: 38em;
	margin: 22px auto 0;
	color: rgba(244, 242, 238, 0.62);
	font-size: clamp(15px, 1.15vw, 18px);
	line-height: 1.65;
}

.seamkt-svc-grid {
	--cols: 4;
	--gap: clamp(14px, 1.6vw, 26px);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap);
	max-width: 1400px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.seamkt-svc-card {
	flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
	min-width: 0;
	margin: 0;
	padding: 0;
	border-radius: 24px;
	scroll-margin-top: 120px;
}

.seamkt-svcpage .seamkt-svc-card__link {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	height: 100%;
	padding: 10px;
	border: 1px solid #ffffff17;
	border-radius: inherit;
	background: linear-gradient(180deg, #141413, #0a0a09);
	color: var(--svc-light);
	text-decoration: none;
	transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform 600ms var(--svc-ease), border-color 400ms ease, box-shadow 600ms var(--svc-ease);
}

.seamkt-svc-card__link.is-tilting {
	transition: transform 120ms linear, border-color 400ms ease, box-shadow 600ms var(--svc-ease);
}

.seamkt-svc-card__media {
	position: relative;
	grid-column: 1 / -1;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	border-radius: 16px;
	background: #000;
}

.seamkt-svc-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1100ms var(--svc-ease);
	user-select: none;
}

.seamkt-svc-card__sheen {
	position: absolute;
	inset: 0;
	background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.1), transparent 42%);
	opacity: 0;
	transition: opacity 500ms ease;
}

.seamkt-svc-card__index {
	padding: 14px 8px 4px;
	color: rgba(244, 242, 238, 0.38);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	font-variant-numeric: tabular-nums;
}

.seamkt-svc-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	margin: 10px 2px 0 0;
	padding: 0 14px 0 18px;
	border: 1px solid #ffffff2e;
	border-radius: 999px;
	color: var(--svc-light);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: background 300ms ease, border-color 300ms ease, color 300ms ease;
}

.seamkt-svc-card__cta svg {
	width: 16px;
	height: 16px;
	transition: transform 300ms var(--svc-ease);
}

.seamkt-svcpage .seamkt-svc-card__link:hover,
.seamkt-svcpage .seamkt-svc-card__link:focus-visible,
.seamkt-svc-card.is-flash .seamkt-svc-card__link {
	border-color: #ffffff4d;
	box-shadow: 0 40px 90px -40px rgba(255, 255, 255, 0.16);
	color: var(--svc-light);
	outline: none;
}

.seamkt-svc-card__link:hover img,
.seamkt-svc-card__link:focus-visible img {
	transform: scale(1.04);
}

.seamkt-svc-card__link:hover .seamkt-svc-card__sheen,
.seamkt-svc-card__link:focus-visible .seamkt-svc-card__sheen,
.seamkt-svc-card.is-flash .seamkt-svc-card__sheen {
	opacity: 1;
}

/* The pill turns white like the current page in the navigation bar. */
.seamkt-svc-card__link:hover .seamkt-svc-card__cta,
.seamkt-svc-card__link:focus-visible .seamkt-svc-card__cta,
.seamkt-svc-card.is-flash .seamkt-svc-card__cta {
	border-color: #fff;
	background: #fff;
	color: #111;
}

.seamkt-svc-card__link:hover .seamkt-svc-card__cta svg,
.seamkt-svc-card__link:focus-visible .seamkt-svc-card__cta svg {
	transform: translateX(3px);
}

.seamkt-svc-card__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

/* With the script, cards rise into place as they enter the screen, a row at a time. */
.seamkt-svc-packages.is-enhanced .seamkt-svc-card {
	opacity: 0;
	translate: 0 48px;
	transition: opacity 900ms var(--svc-ease), translate 1100ms var(--svc-ease);
	transition-delay: calc(mod(var(--i), var(--cols)) * 90ms);
}

.seamkt-svc-packages.is-enhanced .seamkt-svc-card.is-in {
	opacity: 1;
	translate: none;
}

.seamkt-svc-packages__outro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	max-width: 1400px;
	margin: clamp(64px, 7vw, 104px) auto 0;
	padding-top: clamp(40px, 4.4vw, 64px);
	border-top: 1px solid #ffffff1a;
	text-align: center;
}

.seamkt-svc-packages__outro p {
	margin: 0;
	color: rgba(244, 242, 238, 0.72);
	font-size: clamp(17px, 1.4vw, 22px);
	font-weight: 500;
	letter-spacing: -0.01em;
}

.seamkt-svcpage .seamkt-svc-packages__contact {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 26px 0 30px;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 300ms var(--svc-ease), background 300ms ease;
}

.seamkt-svcpage .seamkt-svc-packages__contact:hover,
.seamkt-svcpage .seamkt-svc-packages__contact:focus-visible {
	background: #e6e6e6;
	color: #111;
	outline: none;
	transform: translateY(-2px);
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
	.seamkt-svc-grid {
		--cols: 3;
	}
}

@media (max-width: 782px) {
	.admin-bar .seamkt-svc-hero {
		height: auto;
	}
}

/* Phones: the posters sit in two even rows of four. Let shorter viewports
   scroll to the prompt instead of clipping it at the hero's bottom edge. */
@media (max-width: 767px) {
	.seamkt-svc-hero {
		position: relative;
		top: auto;
		height: auto;
		min-height: 100svh;
		padding-top: 104px;
		padding-bottom: max(44px, calc(28px + env(safe-area-inset-bottom)));
		overflow: visible;
	}

	.seamkt-svcpage .seamkt-svc-hero__title {
		font-size: clamp(32px, 9.6vw, 46px);
		transform: translateY(-16px);
	}

	.seamkt-svc-hero__word {
		min-width: 3.1em;
	}

	.seamkt-svc-hero__line {
		gap: 0.14em 0.24em;
	}

	.seamkt-svc-fan {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
		width: 100%;
		margin-top: 14px;
		transform: translateY(-4px);
	}

	.seamkt-svc-fan__card {
		width: auto;
		margin-top: 0;
	}

	.seamkt-svc-fan__card:nth-child(even) {
		margin-top: 14px;
	}

	.seamkt-svc-fan__link {
		border-radius: 10px;
	}

	.seamkt-svc-fan__link img {
		border-radius: 7px;
	}

	.seamkt-svc-fan__link:hover,
	.seamkt-svc-fan__link:focus-visible {
		transform: translateY(-4px);
	}

	.seamkt-svc-hero__lead {
		margin-top: 42px;
		translate: none;
	}

	.seamkt-svcpage .seamkt-svc-prompt {
		min-height: 58px;
		margin-top: 24px;
		padding: 6px 6px 6px 18px;
		gap: 9px;
		translate: none;
	}

	.seamkt-svc-prompt__globe {
		display: none;
	}

	.seamkt-svc-prompt__go {
		width: 44px;
		height: 44px;
	}

	.seamkt-svc-grid {
		--cols: 2;
		--gap: 12px;
	}

	.seamkt-svc-card {
		border-radius: 20px;
	}

	.seamkt-svcpage .seamkt-svc-card__link {
		grid-template-columns: 1fr;
		padding: 7px;
	}

	.seamkt-svc-card__media {
		border-radius: 14px;
	}

	.seamkt-svc-card__index {
		display: none;
	}

	.seamkt-svc-card__cta {
		justify-content: center;
		min-height: 38px;
		margin: 8px 0 0;
		padding: 0 12px;
		font-size: 13px;
	}

	/* Give the plan labels their own space above the centered icon on phones. */
	.seamkt-svcpage .seamkt-plan__media {
		min-height: 150px;
		aspect-ratio: 2.1 / 1;
		padding-top: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.seamkt-svc-hero__mark,
	.seamkt-svc-hero__word,
	.seamkt-svc-fan__card,
	.seamkt-svc-fan__float,
	.seamkt-svc-hero__lead,
	.seamkt-svcpage .seamkt-svc-prompt,
	.seamkt-svc-hero__caret,
	.seamkt-svc-prompt__caret {
		animation: none;
	}

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