/* About Us page — hero + two alternating intro blocks (reusing
   .product-block / .specialise / .services-grid from product-page.css).
   Uses "Playfair Display" for this page's own headings, layered on top
   of the site's existing serif/gradient heading style. */

.about-hero {
	background-color: var(--color-surface);
	padding: 56px 0 36px;
	text-align: center;
}

.about-hero__title {
	display: inline-block;
	font-family: 'Playfair Display', var(--font-heading);
	font-weight: 600;
	font-size: clamp(32px, 5vw, 48px);
	letter-spacing: 0.5px;
	background: linear-gradient(135deg, #4b006e, #8b5e00, #e4c203);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.about-hero__subtitle {
	margin-top: 10px;
	font-family: 'Playfair Display', var(--font-heading);
	font-style: italic;
	font-size: 1.1rem;
	color: var(--color-text-muted);
}

.about-block__heading {
	font-family: 'Playfair Display', var(--font-heading);
	font-weight: 600;
	font-size: 1.7rem;
	color: var(--color-primary);
}