/*
 * About intro. Photo style: Figma 1932:43023 (photo 1220x568 r20, 44 gap, text 765 |
 * counters 350x340), 1940:48939 (text 765 | 44 | CTA card 391x282), mobile 1699:29968
 * (photo 350x260, 24 gaps, header/L). Band style: 1940:47305 (grey band, 64 under the
 * header bar, 720 column header/2XL + body/M grey, 32 gap, logo pills 54 high, 32 bottom),
 * mobile 990:15351 (header/L + body/XS, 24 gap).
 */

/* ---------- Photo ---------- */
.about-intro--photo { padding-top: calc(var(--header-h) + 32px); }

.about-intro__inner {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.about-intro__media {
	aspect-ratio: 1220 / 568;
	border-radius: var(--r-l);
	overflow: hidden;
	background: var(--c-bg-purple);
}

.about-intro__body {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 44px;
}

.about-intro__body--banner { justify-content: center; }

.about-intro__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 0 1 765px;
	min-width: 0;
}

.about-intro__title { font: var(--f-header-xl); color: var(--c-text-dark); text-wrap: balance; }
.about-intro__text { font: var(--f-body-s); color: var(--c-text-dark); }
.about-intro__text > * + * { margin-top: 16px; }

/* mobile/counter 831:11807: two small cards stacked left, tall purple card right. */
.about-intro__counters {
	display: grid;
	flex: none;
	grid-template-columns: 162px 180px;
	grid-template-rows: 166px 166px;
	gap: 8px;
	width: 350px;
}

.about-counter {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 26px 16px;
	border-radius: var(--r-m);
	background: #efe8ff;
	color: var(--c-text-dark);
}

.about-counter--2 { background: #eee; }

.about-counter__inner { display: flex; flex-direction: column; gap: 4px; }

.about-counter--3 {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-items: center;
	padding: 12px 20px;
	background: var(--c-primary);
	color: var(--c-text-white);
}

.about-counter__figure { font: var(--f-header-l); font-variant-numeric: tabular-nums; }
.about-counter__label { font: var(--f-subtitle-xl); }
.about-counter__label strong { display: block; font: var(--f-header-xs); color: var(--c-primary); }
.about-counter--3 .about-counter__label { font: var(--f-subtitle-l); }
.about-counter--3 .about-counter__label strong { color: inherit; }
.about-counter--3 .about-counter__inner { gap: 2px; }
.about-counter--3 .about-counter__figure { white-space: nowrap; }

/* banner/default as a 391x282 card. */
.about-intro__card {
	position: relative;
	display: flex;
	flex: 0 0 391px;
	align-items: center;
	min-height: 282px;
	padding: 32px 20px;
	border-radius: var(--r-l);
	overflow: hidden;
	background: var(--c-text-dark);
	color: var(--c-text-white);
}

.about-intro__card-bg { position: absolute; inset: 0; }
.about-intro__card::after { content: ""; position: absolute; inset: 0; background: rgba(9, 3, 19, .75); }

.about-intro__card-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.about-intro__card-text { display: flex; flex-direction: column; gap: 8px; }
.about-intro__card-title { font: var(--f-header-l); }
.about-intro__card-desc { font: var(--f-body-xs); }

/* ---------- Band ---------- */
.about-intro--band {
	padding: calc(var(--header-h) + 64px) 0 32px;
	background: var(--c-bg-grey);
}

.about-intro__band {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

.about-intro--band .about-intro__head { flex: none; width: 100%; max-width: 720px; gap: 8px; }
.about-intro--band .about-intro__title { font: var(--f-header-2xl); text-wrap: pretty; }
.about-intro--band .about-intro__text { font: var(--f-body-m); color: var(--c-text-grey); }

.about-intro__marquee { width: 100%; overflow: hidden; }

.about-intro__belt {
	display: flex;
	width: max-content;
	animation: about-intro-marquee 40s linear infinite;
}

.about-intro__marquee:hover .about-intro__belt { animation-play-state: paused; }

.about-intro__logos {
	display: flex;
	gap: 24px;
	padding-right: 24px;              /* same as the gap: seamless loop */
}

.about-intro__pill {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	padding: 0 15px;
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-pill);
	background: var(--c-bg-white);
}

.about-intro__pill-img { width: auto; max-width: 200px; height: 34px; object-fit: contain; }

@keyframes about-intro-marquee {
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.about-intro__belt { animation: none; }
	.about-intro__marquee { overflow-x: auto; scrollbar-width: none; }
	.about-intro__logos[aria-hidden="true"] { display: none; }
}

/* ---------- In between ---------- */
@media (max-width: 1100px) {
	.about-intro__body { flex-direction: column; align-items: stretch; gap: 32px; }
	.about-intro__head { flex: none; }
	.about-intro__counters { align-self: flex-start; }
	.about-intro__card { flex: none; width: 100%; max-width: 480px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.about-intro--photo { padding-top: calc(var(--header-h) + 16px); }
	.about-intro__inner,
	.about-intro__body { gap: 24px; }

	.about-intro__media { aspect-ratio: 350 / 260; }
	.about-intro__head { gap: 8px; }
	.about-intro__title { font: var(--f-header-l); }

	.about-intro__counters {
		grid-template-columns: minmax(0, 162fr) minmax(0, 180fr);
		width: 100%;
		max-width: 350px;
	}

	.about-intro__card { max-width: none; min-height: 0; }

	/* Our Story 1699:29968: one paragraph. Our Process 1769:30589: no card. */
	.about-intro__text--first-mobile > :not(:first-child) { display: none; }
	.about-intro__body--aside-desktop > :not(.about-intro__head) { display: none; }

	.about-intro--band { padding: calc(var(--header-h) + 16px) 0 20px; }   /* 990:15348: 305 incl. 50 status bar */
	.about-intro__band { align-items: stretch; gap: 24px; }
	.about-intro--band .about-intro__title { font: var(--f-header-l); }
	.about-intro--band .about-intro__text { font: var(--f-body-xs); }
}