/* About Page geometry follows the saved desktop and mobile reference. */
.about-page { background: var(--dermobliss-background-primary); }
.about-eyebrow {
	color: var(--dermobliss-accent-gold-dark);
	font-family: var(--dermobliss-font-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.about-hero {
	margin-block-start: -1px;
	padding-block: 80px;
	background: radial-gradient(ellipse 80% 65% at 70% 35%, rgb(212 175 55 / 9%), transparent 65%), radial-gradient(ellipse 65% 50% at 15% 85%, rgb(184 150 92 / 7%), transparent 60%);
}
.about-hero h1 {
	max-inline-size: 900px;
	margin-block-start: 24px;
	font-size: 36px;
	font-weight: 300;
	line-height: 1.1;
}
.about-hero h1 em { color: var(--dermobliss-accent-gold-dark); font-weight: inherit; }
.about-hero__intro {
	max-inline-size: 640px;
	margin-block-start: 32px;
	color: var(--dermobliss-text-secondary);
	font-size: 16px;
	font-weight: 300;
	line-height: 26px;
}
.about-hero__intro > * + * { margin-block-start: 16px; }
.about-pair { display: grid; align-items: center; gap: 56px; }
.about-pair > * { min-inline-size: 0; }
.about-laboratory__media {
	aspect-ratio: 4 / 3;
	background: var(--dermobliss-background-secondary);
}
.about-promise__media {
	aspect-ratio: 4 / 5;
	background: var(--dermobliss-background-secondary);
	clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
}
.about-product-stage { overflow: hidden; background: linear-gradient(145deg, #f1ece4, #e7dfd4); }
.about-product-stage img { display: block; inline-size: 100%; block-size: 100%; padding: 8%; object-fit: contain; filter: drop-shadow(0 22px 20px rgb(28 27 26 / 14%)); }
.about-direction { background: var(--dermobliss-background-secondary); }
.about-direction__grid { display: grid; gap: 32px; }
.about-direction__item { padding-block-start: 24px; border-block-start: 1px solid rgb(184 150 92 / 40%); }
.about-direction__item h2 { font-size: 1.5rem; }
.about-direction__item p { margin-block-start: 16px; color: var(--dermobliss-text-secondary); line-height: 1.75; }
.about-pair__copy h2 {
	margin-block-start: 16px;
	font-size: 24px;
	font-weight: 400;
	line-height: 32px;
}
.about-pair__copy > p:not(.about-eyebrow):not(.about-promise__quote) {
	margin-block-start: 24px;
	color: var(--dermobliss-text-secondary);
	font-size: 14px;
	font-weight: 300;
	line-height: 22.75px;
}
.about-principles { background: var(--dermobliss-background-secondary); }
.about-principles__grid { display: grid; gap: 48px; margin-block-start: 48px; }
.about-principle { min-inline-size: 0; padding-block-start: 24px; border-block-start: 1px solid rgb(184 150 92 / 45%); }
.about-principle__number {
	color: var(--dermobliss-accent-gold-dark);
	font-family: var(--dermobliss-font-mono);
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.22em;
}
.about-principle h3 { margin-block-start: 16px; font-weight: 500; }
.about-principle p { margin-block-start: 16px; color: var(--dermobliss-text-secondary); font-size: 14px; font-weight: 300; line-height: 22.75px; }
.about-promise__quote {
	margin-block-start: 24px;
	color: var(--dermobliss-accent-gold-dark);
	font-family: var(--dermobliss-font-display);
	font-size: 20px;
	font-style: italic;
	line-height: 28px;
}
.about-promise__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	max-inline-size: 100%;
	min-block-size: 48px;
	margin-block-start: 40px;
	padding: 16px 32px;
	background: var(--dermobliss-text-primary);
	color: var(--dermobliss-background-primary);
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.14em;
	text-decoration: none;
}
.about-promise__action:hover { background: var(--dermobliss-accent-gold-dark); color: var(--dermobliss-background-primary); }
.about-promise__action svg { flex: none; }
@media (min-width: 640px) {
	.about-hero h1 { font-size: 48px; line-height: 1; }
	.about-pair__copy h2 { font-size: 30px; line-height: 36px; }
}
@media (min-width: 768px) {
	.about-principles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.about-direction__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.about-hero { padding-block: 112px; }
	.about-hero h1 { font-size: 60px; }
	.about-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.about-pair__copy h2 { font-size: 36px; line-height: 40px; }
	.about-promise__media { grid-column: 2; grid-row: 1; }
	.about-promise .about-pair__copy { grid-column: 1; grid-row: 1; }
}