/* ==========================================================================
   MEETR, About page
   Loads only on /about-meetr/. Editorial brand-story layout.
   ========================================================================== */

.meetr-about { background: var(--meetr-bg); }

/* Hero --------------------------------------------------------------------- */
.meetr-about__hero {
	position: relative;
	background-color: var(--meetr-summit);
	background-size: cover;
	background-position: center 35%;
	color: #fff;
	isolation: isolate;
}
.meetr-about__hero::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(12,26,36,0.55) 0%, rgba(12,26,36,0.35) 40%, rgba(12,26,36,0.75) 100%);
}
.meetr-about__hero-inner {
	max-width: 900px;
	margin-inline: auto;
	padding: clamp(6rem, 16vh, 11rem) var(--meetr-space-m) clamp(3rem, 8vh, 5rem);
	text-align: center;
}
.meetr-about__hero .meetr-eyebrow { color: var(--meetr-glacier); justify-content: center; }
.meetr-about__hero .meetr-eyebrow::before { background: var(--meetr-glacier); }
.meetr-about__title {
	color: #fff !important;
	text-shadow: 0 2px 28px rgba(12, 26, 36, 0.55);
	font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem);
	max-width: 20ch;
	margin: var(--meetr-space-s) auto;
}
.meetr-about__lede {
	color: rgba(255,255,255,0.9);
	font-size: var(--meetr-step-1);
	max-width: 60ch;
	margin: var(--meetr-space-m) auto 0;
}

/* Prose sections ----------------------------------------------------------- */
.meetr-prose { max-width: 720px; }
.meetr-prose .meetr-eyebrow { margin-bottom: var(--meetr-space-s); }
.meetr-prose h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); margin: 0 0 var(--meetr-space-m); }
.meetr-prose p {
	font-size: 1.13rem;
	line-height: 1.75;
	color: var(--meetr-summit);
	margin: 0 0 1.25em;
	max-width: none;
}
.meetr-about__pull {
	font-family: var(--meetr-font-display) !important;
	font-style: italic;
	font-size: var(--meetr-step-2) !important;
	color: var(--meetr-alpine) !important;
	margin-top: var(--meetr-space-m) !important;
}

/* Alternating tinted band -------------------------------------------------- */
.meetr-about__band { background: var(--meetr-mist); }

/* Preservation grid -------------------------------------------------------- */
.meetr-about__gridhead { margin-bottom: var(--meetr-space-l); }
.meetr-about__grid {
	display: grid;
	gap: var(--meetr-space-m);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.meetr-about__card {
	background: var(--meetr-surface);
	border: var(--meetr-hairline);
	border-radius: var(--meetr-radius-lg);
	padding: var(--meetr-space-m);
	border-top: 3px solid transparent;
	border-image: var(--meetr-gradient) 1;
}
.meetr-about__card h3 { font-size: var(--meetr-step-1); margin: 0 0 var(--meetr-space-2xs); }
.meetr-about__card p { color: var(--meetr-stone); margin: 0; }

/* ---- Editorial photo splits + bands -------------------------------------- */
.meetr-about__split {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) 1fr;
	gap: var(--meetr-space-xl);
	align-items: center;
	max-width: 1080px;
	margin-inline: auto;
}
.meetr-about__split .meetr-prose { max-width: none; }
.meetr-about__split .meetr-prose .meetr-eyebrow { margin-bottom: var(--meetr-space-s); }
.meetr-about__splitimg {
	margin: 0;
	border-radius: var(--meetr-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border: var(--meetr-hairline);
	box-shadow: var(--meetr-shadow);
}
.meetr-about__splitimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meetr-about__split--reverse .meetr-about__splitimg { order: 2; }

.meetr-about__band-img {
	margin: var(--meetr-space-xl) 0 0;
	border-radius: var(--meetr-radius-lg);
	overflow: hidden;
	aspect-ratio: 16 / 7;
	border: var(--meetr-hairline);
	box-shadow: var(--meetr-shadow);
}
.meetr-about__band-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 860px) {
	.meetr-about__split { grid-template-columns: 1fr; gap: var(--meetr-space-l); }
	.meetr-about__split--reverse .meetr-about__splitimg { order: 0; }
	.meetr-about__splitimg { aspect-ratio: 16 / 10; }
	.meetr-about__band-img { aspect-ratio: 16 / 9; }
}