/**
 * Marby About — section.framer-9fypkl pixel layout
 * Loaded after style/tailwind so layout cannot be overridden.
 */

.tk-about {
	--tk-about-ink: var(--color-ink);
	--tk-about-fog: var(--color-fog);
	--tk-about-mist: #d5d5db;
	--tk-about-mute: var(--color-text-muted);
	--tk-about-white: #ffffff;
	--tk-about-ease: cubic-bezier(0.12, 0.23, 0.5, 1);
	--tk-about-duration: 0.4s;
	--tk-about-onest: var(--font-ui);
	--tk-about-urbanist: var(--font-heading);

	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 40px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 80px 0 !important;
	background-color: var(--tk-about-white) !important;
	position: relative;
	overflow: visible;
	-webkit-font-smoothing: antialiased;
}

.tk-about *,
.tk-about *::before,
.tk-about *::after {
	box-sizing: border-box;
}

.tk-about__container {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 40px !important;
	width: 100% !important;
	max-width: 1240px !important;
	margin: 0 auto !important;
	padding: 0 20px !important;
}

/* Top: image column | copy column */
.tk-about__top {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 20px !important;
	width: 100% !important;
}

.tk-about__media-col {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 20px !important;
	flex: 1 1 0 !important;
	width: 0 !important;
	min-width: 0 !important;
}

.tk-about__copy-col {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 20px !important;
	flex: 1 1 0 !important;
	width: 0 !important;
	max-width: 460px !important;
	min-width: 0 !important;
}

.tk-about__badge {
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
	font-family: var(--tk-about-onest);
	font-size: 12px;
	font-weight: 400;
	line-height: 100%;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--tk-about-mute);
	white-space: pre-wrap;
}

.tk-about__image {
	position: relative !important;
	display: block !important;
	width: 473px !important;
	max-width: 100% !important;
	height: 234px !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	flex: none !important;
}

.tk-about__image-inner {
	position: absolute !important;
	inset: 0 !important;
	border-radius: inherit;
	overflow: hidden;
}

.tk-about__image img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: fill !important;
	object-position: center !important;
	border-radius: inherit;
}

.tk-about__title {
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
	max-width: 460px;
	font-family: var(--tk-about-urbanist);
	font-size: 48px;
	font-weight: 500;
	line-height: 120%;
	letter-spacing: 0;
	color: var(--tk-about-ink);
	text-wrap: balance;
}

.tk-about__desc {
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
	font-family: var(--tk-about-urbanist);
	font-size: 14px;
	font-weight: 400;
	line-height: 110%;
	letter-spacing: 0;
	color: var(--tk-about-mute);
	text-align: start;
}

.tk-about__cta-wrap {
	display: block !important;
	width: auto;
	height: 28px;
}

.tk-about__cta {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 20px !important;
	height: 28px !important;
	padding: 4px 8px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 4px !important;
	background-color: var(--tk-about-ink) !important;
	color: var(--tk-about-fog) !important;
	text-decoration: none !important;
	overflow: hidden;
	cursor: pointer;
	white-space: nowrap;
	transition:
		transform var(--tk-about-duration) var(--tk-about-ease),
		background-color 0.25s ease;
}

.tk-about__cta-label {
	margin: 0 !important;
	font-family: var(--tk-about-onest);
	font-size: 12px;
	font-weight: 400;
	line-height: 100%;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--tk-about-fog);
}

.tk-about__cta-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--tk-about-fog);
	transition: transform var(--tk-about-duration) var(--tk-about-ease);
}

.tk-about__cta-icon svg {
	display: block;
	width: 16px;
	height: 16px;
}

.tk-about__cta:hover {
	transform: translateY(-1px);
	background-color: rgb(40, 40, 56) !important;
}

.tk-about__cta:hover .tk-about__cta-icon {
	transform: translate(2px, -2px);
}

.tk-about__cta:active {
	transform: translateY(0) scale(0.98);
}

/* Stats row — 3 equal cards */
.tk-about__stats {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 20px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.tk-about__card {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 80px !important;
	flex: 1 1 0 !important;
	width: 0 !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 20px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background-color: var(--tk-about-fog) !important;
}

.tk-about__card-title {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 0 20px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--tk-about-mist) !important;
}

.tk-about__card-label {
	margin: 0 !important;
	font-family: var(--tk-about-onest);
	font-size: 12px;
	font-weight: 400;
	line-height: 100%;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--tk-about-mute);
	white-space: pre-wrap;
}

.tk-about__card-numbers {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-end !important;
	justify-content: flex-start !important;
	gap: 80px !important;
	width: 100% !important;
}

.tk-about__card-number {
	margin: 0 !important;
	flex: 1 1 0 !important;
	min-width: 0;
	font-family: var(--tk-about-urbanist);
	font-size: 48px;
	font-weight: 500;
	line-height: 120%;
	letter-spacing: 0;
	color: var(--tk-about-ink);
	text-wrap: balance;
}

.tk-about__card-index {
	margin: 0 !important;
	flex: none;
	width: 22px;
	font-family: var(--tk-about-urbanist);
	font-size: 10px;
	font-weight: 400;
	line-height: 120%;
	color: var(--tk-about-mute);
}

/* Appear — Marby: opacity + translateY(20px), 0.4s */
.tk-about [data-tk-about-reveal] {
	opacity: 0;
	transform: translateY(20px);
	will-change: transform, opacity;
	transition:
		opacity var(--tk-about-duration) var(--tk-about-ease),
		transform var(--tk-about-duration) var(--tk-about-ease);
}

.tk-about [data-tk-about-reveal].is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.tk-about [data-tk-about-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Tablet 810–1199 */
@media (max-width: 1199px) and (min-width: 810px) {
	.tk-about {
		padding: 40px 0 !important;
	}

	.tk-about__top,
	.tk-about__stats {
		flex-direction: column !important;
	}

	.tk-about__media-col,
	.tk-about__copy-col,
	.tk-about__card {
		flex: none !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.tk-about__image {
		width: 473px !important;
		height: 234px !important;
	}

	.tk-about__badge,
	.tk-about__cta-label,
	.tk-about__card-label {
		font-size: 10px;
	}

	.tk-about__title,
	.tk-about__card-number {
		font-size: 38px;
	}
}

/* Mobile ≤809 */
@media (max-width: 809px) {
	.tk-about {
		padding: 40px 0 !important;
	}

	.tk-about__top,
	.tk-about__stats {
		flex-direction: column !important;
	}

	.tk-about__media-col,
	.tk-about__copy-col,
	.tk-about__card {
		flex: none !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.tk-about__image {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 473 / 234;
	}

	.tk-about__badge,
	.tk-about__cta-label,
	.tk-about__card-label {
		font-size: 12px;
	}

	.tk-about__title,
	.tk-about__card-number {
		font-size: 30px;
	}

	.tk-about__card-index {
		font-size: 12px;
	}
}