/* Contact page: how to reach SEAMKT on the left, the glass globe with the two offices on the
   right. Same paper, ink and warm greys as the About and Marketing pages, Manrope in two
   voices. Motion in assets/js/contact-page.js, the globe in assets/js/globe.js. */
.seamkt-contactpage {
	--ct-paper: #f1f0ee;
	--ct-line: #dfddd8;
	--ct-ink: #0d0d0c;
	--ct-soft: #57554f;
	--ct-muted: #8a877f;
	--ct-success: #15803d;
	--ct-font: var(--seamkt-font, 'Manrope', system-ui, sans-serif);
	--ct-gutter: clamp(20px, 3.4vw, 60px);
	--ct-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ct-step: clamp(40px, 5.6svh, 56px);
	--ct-row: clamp(30px, 4.2svh, 40px);
	position: relative;
	isolation: isolate;
	overflow: clip;
	background:
		radial-gradient(ellipse 55% 70% at 82% 50%, #fff, transparent 70%),
		linear-gradient(180deg, #f8f7f5, var(--ct-paper));
	color: var(--ct-ink);
	font-family: var(--ct-font);
}

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

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

/* The heading over the details on the left; the globe on the right, reaching the edge. */
.seamkt-contact__inner {
	display: grid;
	grid-template-areas:
		'head globe'
		'details globe';
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	grid-template-rows: auto auto;
	gap: var(--ct-step) clamp(32px, 4vw, 80px);
	align-content: center;
	width: 100%;
	max-width: 1440px;
	min-height: 100svh;
	margin: 0 auto;
	padding: clamp(72px, 11svh, 120px) 0 clamp(64px, 10svh, 112px) var(--ct-gutter);
}

/* ---------- The heading ---------- */

/* The heading sizes itself from its column, so each voice always holds one line. */
.seamkt-contact__head {
	grid-area: head;
	align-self: end;
	container-type: inline-size;
}

/* "— CONTACT", as the section labels of the About page. */
.seamkt-contactpage .seamkt-contact__eyebrow {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	margin: 0;
	color: var(--ct-muted);
	font-size: clamp(14px, 1.15vw, 17px);
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.seamkt-contact__eyebrow::before {
	width: 26px;
	height: 1.5px;
	border-radius: 2px;
	background: currentColor;
	content: '';
}

.seamkt-contactpage .seamkt-contact__title {
	margin: 18px 0 0;
	padding: 0;
	color: var(--ct-ink);
	font-family: var(--ct-font);
	font-size: clamp(28px, 11.2cqi, 76px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.05em;
	text-transform: none;
}

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

.seamkt-contact__line--soft {
	margin-top: 0.03em;
	color: var(--ct-soft);
	font-weight: 300;
	letter-spacing: -0.045em;
}

/* ---------- Email, phone and the two offices: a grid of four ---------- */

.seamkt-contact__details {
	grid-area: details;
	align-self: start;
	max-width: 660px;
}

.seamkt-contact__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ct-row) clamp(28px, 3.4vw, 56px);
}

/* Each cell: a hairline, a small line of facts, then the value. */
.seamkt-contact__cell {
	--accent: var(--ct-ink);
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-top: 20px;
	border-top: 1px solid var(--ct-line);
	outline: none;
}

/* The offices close the grid with a hairline of their own beneath. */
.seamkt-contact__office {
	padding-bottom: 20px;
	border-bottom: 1px solid var(--ct-line);
}

/* An office's hairline darkens from the left while the globe is turned to it. */
.seamkt-contact__cell::before {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--ct-ink);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 700ms var(--ct-ease);
	content: '';
}

.seamkt-contact__office:hover::before,
.seamkt-contact__office.is-active::before,
.seamkt-contact__office:focus-within::before {
	transform: scaleX(1);
}

.seamkt-contact__meta {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	min-height: 26px;
	color: var(--ct-muted);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.seamkt-contactpage .seamkt-contact__value {
	align-self: flex-start;
	max-width: 100%;
	margin-top: 12px;
	overflow: hidden;
	color: var(--ct-ink);
	line-height: 1.15;
	font-size: clamp(23px, 2vw, 30px);
	font-weight: 600;
	letter-spacing: -0.03em;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.seamkt-contactpage .seamkt-contact__value:hover,
.seamkt-contactpage .seamkt-contact__value:focus-visible {
	color: var(--ct-ink);
}

/* The office's local time in an outlined pill, with a dot that breathes while the globe is
   turned to it. */
.seamkt-contact__time {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	padding: 6px 12px 6px 10px;
	border: 1px solid var(--ct-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.5);
	color: var(--ct-soft);
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.seamkt-contact__time:not(:empty)::before {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 0 rgba(13, 13, 12, 0.35);
	content: '';
}

.seamkt-contact__office.is-active .seamkt-contact__time::before {
	animation: ct-breathe 1.8s ease-out infinite;
}

@keyframes ct-breathe {
	from {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
	}

	to {
		box-shadow: 0 0 0 7px transparent;
	}
}

.seamkt-contactpage .seamkt-contact__city {
	margin: 12px 0 0;
	padding: 0;
	color: var(--ct-ink);
	font-family: var(--ct-font);
	font-size: clamp(23px, 2vw, 30px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.03em;
	text-transform: none;
}

/* The country in the light second voice. */
.seamkt-contact__city span {
	color: var(--ct-muted);
	font-weight: 300;
}

.seamkt-contactpage .seamkt-contact__address {
	margin: 8px 0 0;
	font-style: normal;
}

.seamkt-contactpage .seamkt-contact__address a {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	color: var(--ct-soft);
	font-size: clamp(16px, 1.15vw, 17px);
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: color 300ms ease;
}

.seamkt-contact__address svg {
	flex: none;
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.55;
	transition: opacity 300ms ease, transform 500ms var(--ct-ease);
}

.seamkt-contactpage .seamkt-contact__address a:hover,
.seamkt-contactpage .seamkt-contact__address a:focus-visible {
	color: var(--ct-ink);
}

.seamkt-contact__address a:hover svg,
.seamkt-contact__address a:focus-visible svg {
	opacity: 1;
	transform: translate(2px, -2px);
}

/* ---------- "Leave your details" and the social profiles ---------- */

.seamkt-contact__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: var(--ct-step);
}

.seamkt-contactpage .seamkt-contact__open {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	height: 48px;
	margin: 0 6px 0 0;
	padding: 0 20px 0 24px;
	border: 0;
	border-radius: 999px;
	background: var(--ct-ink);
	box-shadow: 0 18px 40px -22px rgba(13, 13, 12, 0.6);
	color: var(--ct-paper);
	font-family: var(--ct-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 300ms ease, transform 500ms var(--ct-ease);
}

.seamkt-contact__open svg,
.seamkt-contact__send svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 500ms var(--ct-ease);
}

.seamkt-contactpage .seamkt-contact__open:hover,
.seamkt-contactpage .seamkt-contact__open:focus-visible {
	background: #2a2a28;
	color: var(--ct-paper);
	transform: translateY(-1px);
}

.seamkt-contact__open:hover svg,
.seamkt-contact__open:focus-visible svg,
.seamkt-contact__send:hover svg,
.seamkt-contact__send:focus-visible svg {
	transform: translateX(4px);
}

.seamkt-contactpage .seamkt-contact__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.seamkt-contactpage .seamkt-contact__social a {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--ct-line);
	border-radius: 50%;
	color: var(--ct-soft);
	transition: background 300ms ease, border-color 300ms ease, color 300ms ease, transform 500ms var(--ct-ease);
}

.seamkt-contact__social svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.seamkt-contactpage .seamkt-contact__social a:hover,
.seamkt-contactpage .seamkt-contact__social a:focus-visible {
	border-color: var(--ct-ink);
	background: var(--ct-ink);
	color: var(--ct-paper);
	transform: translateY(-2px);
}

/* ---------- The globe ---------- */

/* Set to the right, its far edge just past the screen. */
.seamkt-contactpage .seamkt-contact__globe {
	position: relative;
	grid-area: globe;
	align-self: center;
	justify-self: end;
	width: min(100%, 640px, 78svh);
	margin: 0 clamp(-60px, -3vw, -20px) 0 0;
}

/* Its shadow on the paper. */
.seamkt-contact__globe::after {
	position: absolute;
	z-index: -1;
	right: 10%;
	bottom: -11%;
	left: 10%;
	height: 11%;
	background: radial-gradient(closest-side, rgba(13, 13, 12, 0.16), rgba(13, 13, 12, 0.04) 60%, transparent);
	content: '';
}

.seamkt-contact__sphere {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	touch-action: pan-y;
}

.seamkt-contact__globe.is-painted .seamkt-contact__sphere {
	cursor: grab;
}

.seamkt-contact__globe.is-dragging .seamkt-contact__sphere {
	cursor: grabbing;
}

.seamkt-contact__shape {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	fill: rgba(255, 255, 255, 0.6);
	stroke: rgba(13, 13, 12, 0.12);
	stroke-width: 1.5;
}

.seamkt-contact__globe.is-painted .seamkt-contact__shape {
	visibility: hidden;
}

/* The canvas reaches a little past the sphere for the line of light lifted above it. */
.seamkt-contact__canvas {
	position: absolute;
	top: -18%;
	left: -18%;
	display: block;
	width: 136%;
	height: 136%;
	pointer-events: none;
}

/* The office labels, placed over their marks by the script and faded toward the rim. */
.seamkt-contact__pin {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	gap: 2px;
	padding: 9px 13px 10px;
	border: 1px solid rgba(13, 13, 12, 0.08);
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 14px 30px -18px rgba(13, 13, 12, 0.45);
	color: var(--ct-ink);
	white-space: nowrap;
	pointer-events: none;
	transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(-50%, calc(-100% - 20px));
	transition: background-color 400ms ease, color 400ms ease;
	will-change: transform, opacity;
}

.seamkt-contact__globe.is-painted .seamkt-contact__pin {
	display: grid;
}

/* A hairline from the label down to its mark (moved along when the label slides in from the
   screen's edge). */
.seamkt-contact__pin::after {
	position: absolute;
	top: 100%;
	left: calc(50% + var(--tail, 0px));
	width: 1px;
	height: 14px;
	background: currentColor;
	opacity: 0.35;
	content: '';
}

.seamkt-contact__pin strong {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.seamkt-contact__pin small {
	color: var(--ct-muted);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	transition: color 400ms ease;
}

.seamkt-contact__pin.is-active {
	border-color: transparent;
	background: var(--accent, var(--ct-ink));
	color: #fff;
}

.seamkt-contact__pin.is-active small {
	color: rgba(255, 255, 255, 0.78);
}

/* ---------- The "Leave your details" dialog ---------- */

.seamkt-contactpage .seamkt-contact__dialog {
	position: fixed;
	width: min(100% - 32px, 500px);
	max-height: min(100% - 32px, 760px);
	margin: auto;
	padding: clamp(28px, 4vw, 44px);
	overflow: auto;
	border: 0;
	border-radius: 28px;
	background: #fbfaf8;
	box-shadow: 0 40px 100px -30px rgba(13, 13, 12, 0.45), 0 0 0 1px rgba(13, 13, 12, 0.05);
	color: var(--ct-ink);
	font-family: var(--ct-font);
	overscroll-behavior: contain;
}

.seamkt-contact__dialog::backdrop {
	background: rgba(13, 13, 12, 0.38);
	backdrop-filter: blur(4px);
}

/* It rises in as it opens and sinks away as it closes. */
.seamkt-contact__dialog[open] {
	animation: ct-dialog-in 600ms var(--ct-ease);
}

.seamkt-contact__dialog[open]::backdrop {
	animation: ct-fade-in 400ms ease;
}

.seamkt-contact__dialog.is-closing {
	animation: ct-dialog-out 260ms ease forwards;
}

.seamkt-contact__dialog.is-closing::backdrop {
	animation: ct-fade-out 260ms ease forwards;
}

@keyframes ct-dialog-in {
	from {
		opacity: 0;
		transform: translateY(24px) scale(0.98);
	}
}

@keyframes ct-dialog-out {
	to {
		opacity: 0;
		transform: translateY(12px) scale(0.99);
	}
}

@keyframes ct-fade-in {
	from {
		opacity: 0;
	}
}

@keyframes ct-fade-out {
	to {
		opacity: 0;
	}
}

.seamkt-contactpage .seamkt-contact__close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--ct-line);
	border-radius: 50%;
	background: transparent;
	color: var(--ct-ink);
	cursor: pointer;
	transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}

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

.seamkt-contactpage .seamkt-contact__close:hover,
.seamkt-contactpage .seamkt-contact__close:focus-visible {
	border-color: var(--ct-ink);
	background: var(--ct-ink);
	color: var(--ct-paper);
}

.seamkt-contactpage .seamkt-contact__form-eyebrow {
	margin: 0;
	color: var(--ct-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.seamkt-contactpage .seamkt-contact__form-title {
	margin: 14px 0 0;
	padding: 0;
	color: var(--ct-ink);
	font-family: var(--ct-font);
	font-size: clamp(30px, 3vw, 40px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.045em;
	text-transform: none;
}

.seamkt-contact__form-title span {
	display: block;
}

.seamkt-contact__line--quiet {
	color: var(--ct-soft);
	font-weight: 300;
}

.seamkt-contactpage .seamkt-contact__form-lead {
	margin: 14px 0 0;
	color: var(--ct-soft);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.55;
}

.seamkt-contactpage .seamkt-contact__field {
	display: grid;
	gap: 8px;
	margin-top: 20px;
}

.seamkt-contact__form-lead + .seamkt-contact__field {
	margin-top: 28px;
}

.seamkt-contact__field > span {
	color: var(--ct-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.seamkt-contactpage .seamkt-contact__field input {
	width: 100%;
	height: 54px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--ct-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: none;
	color: var(--ct-ink);
	font-family: var(--ct-font);
	font-size: 16px;
	font-weight: 500;
	outline: none;
	transition: border-color 300ms ease, box-shadow 300ms ease;
}

.seamkt-contact__field input::placeholder {
	color: #b3b0a9;
}

.seamkt-contactpage .seamkt-contact__field input:focus {
	border-color: var(--ct-ink);
	box-shadow: 0 0 0 4px rgba(13, 13, 12, 0.06);
}

.seamkt-contactpage .seamkt-contact__field input.is-invalid {
	border-color: #d14343;
	box-shadow: 0 0 0 4px rgba(209, 67, 67, 0.08);
}

/* The field only robots see. */
.seamkt-contact__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.seamkt-contactpage .seamkt-contact__form-error {
	margin: 16px 0 0;
	color: #c23b3b;
	font-size: 14px;
	font-weight: 600;
}

.seamkt-contactpage .seamkt-contact__send {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 56px;
	margin-top: 26px;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	background: var(--ct-ink);
	color: var(--ct-paper);
	font-family: var(--ct-font);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 300ms ease, opacity 300ms ease;
}

.seamkt-contactpage .seamkt-contact__send:hover,
.seamkt-contactpage .seamkt-contact__send:focus-visible {
	background: #2a2a28;
	color: var(--ct-paper);
}

.seamkt-contactpage .seamkt-contact__send[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.seamkt-contact__thanks {
	display: grid;
	justify-items: center;
	padding: 10px 0 4px;
	text-align: center;
}

.seamkt-contact__tick {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--ct-success);
	box-shadow: 0 0 0 8px rgba(21, 128, 61, 0.1), 0 18px 36px -18px rgba(21, 128, 61, 0.65);
	color: #fff;
	animation: ct-dialog-in 700ms var(--ct-ease);
}

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

.seamkt-contact__thanks .seamkt-contact__form-title {
	margin-top: 28px;
	text-wrap: balance;
}

.seamkt-contactpage .seamkt-contact__thanks .seamkt-contact__form-lead {
	max-width: 29em;
	margin-top: 18px;
}

.seamkt-contactpage .seamkt-contact__thanks .seamkt-contact__send {
	width: min(100%, 280px);
	margin-top: 28px;
}

.seamkt-contact__thanks[hidden],
.seamkt-contact__form[hidden],
.seamkt-contact__form-error[hidden] {
	display: none;
}

/* ---------- Coming in ---------- */

/* Only with the script (it adds .is-ready), so nothing is ever left hidden. */
.seamkt-contact.is-ready .seamkt-contact__head > *,
.seamkt-contact.is-ready .seamkt-contact__cell,
.seamkt-contact.is-ready .seamkt-contact__social,
.seamkt-contact.is-ready .seamkt-contact__open,
.seamkt-contact.is-ready .seamkt-contact__globe {
	opacity: 0;
	translate: 0 24px;
	transition: opacity 900ms ease, translate 1200ms var(--ct-ease);
	transition-delay: calc(var(--d, 0) * 80ms);
}

.seamkt-contact.is-ready .seamkt-contact__globe {
	translate: 40px 0;
	transition-duration: 1200ms, 1600ms;
}

.seamkt-contact.is-in .seamkt-contact__head > *,
.seamkt-contact.is-in .seamkt-contact__cell,
.seamkt-contact.is-in .seamkt-contact__social,
.seamkt-contact.is-in .seamkt-contact__open,
.seamkt-contact.is-in .seamkt-contact__globe {
	opacity: 1;
	translate: none;
}

.seamkt-contact__head > :nth-child(2) { --d: 1; }
.seamkt-contact__cell:nth-child(1) { --d: 3; }
.seamkt-contact__cell:nth-child(2) { --d: 4; }
.seamkt-contact__cell:nth-child(3) { --d: 5; }
.seamkt-contact__cell:nth-child(4) { --d: 6; }
.seamkt-contact__open { --d: 7; }
.seamkt-contact__social { --d: 8; }
.seamkt-contact__globe { --d: 2; }

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

/* Upright screens: the heading, then the globe, then the details. */
@media (max-width: 900px) {
	.seamkt-contact__inner {
		grid-template-areas:
			'head'
			'globe'
			'details';
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		padding: clamp(96px, 14svh, 128px) var(--ct-gutter) clamp(56px, 9svh, 96px);
	}

	.seamkt-contactpage .seamkt-contact__globe {
		justify-self: center;
		width: min(86%, 520px);
		margin: 0 0 clamp(16px, 3svh, 32px);
	}

	.seamkt-contact__details {
		max-width: none;
	}
}

@media (max-width: 560px) {
	.seamkt-contact__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.seamkt-contact__pin {
		padding: 7px 10px 8px;
	}

	.seamkt-contact__pin small {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.seamkt-contact.is-ready .seamkt-contact__head > *,
	.seamkt-contact.is-ready .seamkt-contact__cell,
	.seamkt-contact.is-ready .seamkt-contact__social,
	.seamkt-contact.is-ready .seamkt-contact__open,
	.seamkt-contact.is-ready .seamkt-contact__globe {
		transition-duration: 1ms;
		transition-delay: 0ms;
	}

	.seamkt-contact__office.is-active .seamkt-contact__time::before {
		animation: none;
	}
}

/* The page keeps its scrollbar's room while the dialog holds the scrolling still. */
html:has(.seamkt-contact__dialog[open]) {
	scrollbar-gutter: stable;
}