/* ==========================================================================
   messe-display — About
   Figma page ABOUT, frame "about-page" (55:4), 1440x5179.
   The page uses a 100px gutter throughout (1240px content band) and Outfit +
   Geist rather than the Inter system used on Home.
   ========================================================================== */

.md-about-gutter { padding-inline: 100px; }

/* hero — 1440x640, IMAGE over #1A1A1A, pad 100 all round, itemSpacing 24. */
.md-about-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 24px;
	height: 640px;
	padding: 100px;
	background: var(--md-ink) center/cover no-repeat;
	text-align: center;
}
.md-about-hero h1 { margin: 0; max-width: 1025px; }
/* Geist 400/20 lh=26 #FFFFFF */
.md-about-hero p {
	margin: 0;
	max-width: 596px;
	font-family: var(--md-font-ui);
	font-size: 20px;
	line-height: 26px;
	color: var(--md-white);
}

/* about-intro — 1440x800, pad 120/100, two columns gap 48. */
/* 596+596+48 = 1240 plus 200px padding needs 1440 exactly; below that the
   fixed columns overflowed. Equal proportional columns instead. */
.md-about-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	justify-content: space-between;
	gap: 48px;
	align-items: center;
	padding: 120px 100px;
}
.md-about-intro__text { display: flex; flex-direction: column; gap: 40px; }
.md-about-intro__head { display: flex; flex-direction: column; gap: 16px; }
.md-about-intro__head h2 { margin: 0; }
.md-about-intro img {
	width: 100%;
	height: 560px;
	border-radius: 12px;
	object-fit: cover;
}

.md-about-divider { height: 1px; margin-inline: 100px; background: var(--md-line); }

/* presence — 1440x804, pad 120/100, itemSpacing 80. */
.md-about-presence { padding: 120px 100px; }
.md-about-presence__head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 80px; text-align: center; }
.md-about-presence__head h2 { margin: 0; }
.md-about-presence__head p  { margin: 0 auto; max-width: 703px; }

.md-about-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 48px;
	align-items: start;
}
/* Card: pad 48, cornerRadius 24, 1px #E8E6E1. */
.md-about-card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 48px;
	border: 1px solid var(--md-line);
	border-radius: var(--md-r-24);
	background: var(--md-white);
}
.md-about-card h3 { margin: 0; }
.md-about-card p  { margin: 0; }

/* Pills — pad 8/16, cornerRadius 100. Filled = the hub, outlined = markets. */
.md-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.md-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border: 1px solid var(--md-line);
	border-radius: 100px;
	font-family: var(--md-font);
	font-weight: 600;
	font-size: 13px;
	line-height: 15.7px;
	color: var(--md-ink);
}
.md-pill--solid { border-color: var(--md-purple); background: var(--md-purple); color: var(--md-white); text-transform: uppercase; }

/* stats — 1440x320 on #342155, pad 0/200, 1px white rules between items. */
.md-about-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	height: 320px;
	padding: 0 200px;
	background: var(--md-purple);
}
.md-about-stats__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	text-align: center;
}
.md-about-stats__item + .md-about-stats__item { border-left: 1px solid var(--md-white); }

/* mission-vision — 1440x553, pad 120/100, cards pad 64. */
.md-about-mv {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 48px;
	align-items: start;
	padding: 120px 100px;
}
.md-about-mv .md-about-card { padding: 64px; }

/* approach — 1440x880, pad 120/100, itemSpacing 80. */
.md-about-approach {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	justify-content: space-between;
	gap: 80px;
	align-items: center;
	padding: 120px 100px;
}
.md-about-approach img {
	width: 100%;
	height: 640px;
	border-radius: var(--md-r-24);
	object-fit: cover;
}
.md-about-approach__text { display: flex; flex-direction: column; gap: 40px; }
.md-about-approach__head { display: flex; flex-direction: column; gap: 16px; }
.md-about-approach__head h2 { margin: 0; }

/* Button — Figma 192x49, fill #342155, cornerRadius 8, pad 16/24. */
.md-btn-purple {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 49px;
	padding: 16px 24px;
	border-radius: 8px;
	background: var(--md-purple);
	color: var(--md-white);
	font-family: var(--md-font);
	font-weight: 700;
	font-size: 14px;
	line-height: 16.9px;
	text-transform: uppercase;
}

/* goal-statement — 1440x432 on #1A1A1A, pad 160/100, centred quote. */
.md-about-goal {
	padding: 160px 100px;
	background: var(--md-ink);
	text-align: center;
}
.md-about-goal p { margin: 0 auto; max-width: 1025px; }

@media (max-width: 1099px) {
	/* Cards hold long German headings; two columns stop fitting well before 760. */
	.md-about-cards,
	.md-about-mv { grid-template-columns: 1fr; }
	.md-about-hero { height: auto; padding: 72px 40px; }
	.md-about-hero h1 { font-size: 48px; line-height: 56px; }
	.md-about-intro,
	.md-about-approach { grid-template-columns: 1fr; padding: 72px 40px; }
	.md-about-intro img { height: 380px; }
	.md-about-approach img { height: 420px; }
	.md-about-presence, .md-about-mv { padding: 72px 40px; }
	.md-about-divider { margin-inline: 40px; }
	.md-about-stats { padding-inline: 40px; }
	.md-about-goal { padding: 96px 40px; }
	.md-h2-about { font-size: 36px; line-height: 44px; }
}
@media (max-width: 759px) {
	.md-about-hero { padding: 48px 16px; }
	.md-about-hero h1 { font-size: 32px; line-height: 38px; }
	.md-about-intro, .md-about-approach, .md-about-presence, .md-about-mv { padding: 48px 16px; }
	.md-about-divider { margin-inline: 16px; }
	.md-about-cards, .md-about-mv { grid-template-columns: 1fr; }
	.md-about-card, .md-about-mv .md-about-card { padding: 28px; }
	.md-about-stats { grid-template-columns: 1fr; height: auto; padding: 40px 16px; gap: 28px; }
	.md-about-stats__item + .md-about-stats__item { border-left: 0; border-top: 1px solid var(--md-white); padding-top: 28px; }
	.md-about-goal { padding: 56px 16px; }
	.md-quote { font-size: 24px; line-height: 34px; }
	.md-h2-intro { font-size: 28px; line-height: 36px; }
}