/* ==========================================================================
   PurOstill V2 — about page
   ========================================================================== */

.v2-about { display: flex; flex-direction: column; gap: 3rem; padding-bottom: 3rem; }

/* Dark intro band --------------------------------------------------------- */

.v2-about__intro {
	padding: clamp(1.8rem, 4vw, 3rem);
	border-radius: 24px;
	background: linear-gradient(135deg, var(--v2-dark-2), color-mix(in srgb, var(--v2-accent) 45%, var(--v2-dark-2)));
	color: #fff;
}
.v2-about__eyebrow {
	margin-bottom: .6rem;
	font-size: .76rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .16em;
	color: color-mix(in srgb, #fff 72%, transparent);
}
.v2-about__intro h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 1rem; }
.v2-about__intro p { max-width: 70ch; font-size: 1.08rem; line-height: 1.65; color: rgba(255, 255, 255, .9); }

/* Story ------------------------------------------------------------------- */

.v2-about__story {
	display: grid;
	grid-template-columns: minmax(300px, 1fr) 380px;
	gap: 2rem;
	align-items: start;
}
.v2-about__story-media { justify-self: end; width: 100%; max-width: 420px; }
.v2-about__story-media img {
	width: 100%; border-radius: 18px;
	border: 1px solid var(--v2-line);
	background: var(--v2-tint);
	box-shadow: 0 18px 45px rgba(var(--v2-ink-rgb), .12);
}

/* Section headings --------------------------------------------------------- */

.v2-about__section { display: flex; flex-direction: column; gap: 1.25rem; }
.v2-about__heading h2 { font-size: 1.8rem; color: var(--v2-dark-2); }
.v2-about__heading p { margin-top: .5rem; max-width: 640px; color: var(--v2-muted); line-height: 1.6; }

/* Range grid --------------------------------------------------------------- */

.v2-about__range { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }

.v2-about__range-card {
	display: flex; flex-direction: column; gap: .5rem;
	padding: 1.5rem;
	border: 1px solid var(--v2-line);
	border-radius: 18px;
	background: var(--v2-surface);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.v2-about__range-card:hover {
	transform: translateY(-4px);
	border-color: rgba(var(--v2-accent-rgb), .35);
	box-shadow: 0 18px 40px rgba(var(--v2-ink-rgb), .1);
}
.v2-about__range-icon {
	width: 46px; height: 46px; margin-bottom: .2rem;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: .7rem;
	background: rgba(var(--v2-accent-rgb), .12);
	color: var(--v2-accent);
}
.v2-about__range-card h3 { font-size: 1.05rem; color: var(--v2-ink); }
.v2-about__range-card p { color: var(--v2-muted); line-height: 1.5; font-size: .93rem; }

/* A closing line under a section, and the page's own content. */
.v2-about__note { max-width: 74ch; color: var(--v2-muted); line-height: 1.7; }

.v2-about__content {
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px solid var(--v2-line);
	border-radius: 18px;
	background: var(--v2-surface);
}
.v2-about__content h2 { font-size: 1.8rem; color: var(--v2-dark-2); margin-top: 2rem; }
.v2-about__content > :first-child { margin-top: 0; }

/* The story copy carries its own list, so it gets the shared prose treatment
   without the card frame the standalone prose section uses. */
.v2-about__story-copy ul { margin: 1rem 0; }

/* Highlight cards ---------------------------------------------------------- */

.v2-about__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }

.v2-about__card {
	padding: 1.5rem;
	border: 1px solid var(--v2-line);
	border-radius: 18px;
	background: var(--v2-surface);
	box-shadow: 0 12px 40px rgba(var(--v2-ink-rgb), .05);
}
.v2-about__card h3 { margin-bottom: .5rem; font-size: 1.15rem; }
.v2-about__card p { color: var(--v2-muted); font-size: .95rem; line-height: 1.55; }

/* Closing band ------------------------------------------------------------- */

.v2-about__cta {
	padding: clamp(1.8rem, 4vw, 3rem);
	border: 1px solid var(--v2-line);
	border-radius: 24px;
	background: var(--v2-surface);
	box-shadow: 0 35px 60px rgba(var(--v2-ink-rgb), .07);
	text-align: center;
}
.v2-about__cta h2 { margin-bottom: .75rem; font-size: 2rem; }
.v2-about__cta p { max-width: 620px; margin: 0 auto 1.5rem; color: var(--v2-muted); line-height: 1.65; }

/* Social ------------------------------------------------------------------- */

.v2-about__social { text-align: center; padding: 1rem 0 2rem; }
.v2-about__social h2 { margin-bottom: 1.5rem; font-size: 1.5rem; }
.v2-about__social .v2-news__social svg { width: 32px; height: 32px; }

@media (max-width: 900px) {
	.v2-about__story { grid-template-columns: minmax(0, 1fr); }
	.v2-about__story-media { justify-self: start; max-width: 100%; }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.v2-about { gap: 2rem; }

	.v2-about__intro { padding: 1.5rem 1.25rem; border-radius: 1.25rem; }
	.v2-about__intro h2 { font-size: 1.7rem; }
	.v2-about__intro p { font-size: 1rem; }

	.v2-about__heading h2 { font-size: 1.45rem; }

	.v2-about__range { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
	.v2-about__range-card { padding: 1.15rem; border-radius: 1rem; }

	.v2-about__cards { grid-template-columns: minmax(0, 1fr); }
	.v2-about__card { padding: 1.25rem; border-radius: 1rem; }

	.v2-about__cta { padding: 1.5rem 1.25rem; border-radius: 1.25rem; }
	.v2-about__cta h2 { font-size: 1.5rem; }
	.v2-about__cta .v2-btn { width: 100%; }

	.v2-about__social h2 { font-size: 1.25rem; }
}