/* About Us page — a quiet editorial hero (the brand's warm gradient, same
   family as the homepage hero/CTA sections) leading into four numbered
   "pillar" cards for Story/Promise/Vision/Mission, closing on a dark CTA
   band. No stock team photos, partner logos or fake Instagram grid — see
   components/about/template.php's docblock for why those were dropped
   rather than carried over from the old content. */

.qg-about__hero {
	position: relative;
	padding: var(--qg-space-8) 0 var(--qg-space-7);
	background: var(--qg-gradient-warm);
	overflow: hidden;
}

.qg-about__hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 60% at 85% 0%, rgba(255, 255, 255, 0.28) 0%, transparent 100%);
	pointer-events: none;
}

.qg-about__hero-inner {
	position: relative;
	max-width: 760px;
}

.qg-about__hero-inner .qg-section-head__eyebrow {
	color: rgba(22, 19, 15, 0.65);
}

.qg-about__hero-heading {
	margin: 0 0 var(--qg-space-4);
	font-family: var(--qg-font-heading);
	font-weight: 700;
	font-size: clamp(2.1rem, 5vw, 3.4rem);
	line-height: 1.08;
	color: var(--qg-color-ink);
}

.qg-about__hero-text {
	margin: 0 0 var(--qg-space-5);
	max-width: 52ch;
	font-size: 1.05rem;
	line-height: 1.7;
	color: rgba(22, 19, 15, 0.75);
}

.qg-about__values {
	display: flex;
	flex-wrap: wrap;
	gap: var(--qg-space-4) var(--qg-space-5);
	list-style: none;
	margin: 0;
	padding: var(--qg-space-4) 0 0;
	border-top: 1px solid rgba(22, 19, 15, 0.15);
}

.qg-about__value {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--qg-color-ink);
}

.qg-about__value .qg-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* Pillars — Story / Promise / Vision / Mission, as four equal cards rather
   than the plain stacked h3/p sequence the old content had; the big ghost
   number gives each one a clear identity at a glance instead of relying on
   the reader to notice a new heading. */

.qg-about__pillars {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--qg-space-4);
	padding: var(--qg-space-7) var(--qg-space-4);
}

@media (min-width: 640px) {
	.qg-about__pillars {
		grid-template-columns: repeat(2, 1fr);
	}
}

.qg-about__pillar {
	position: relative;
	padding: var(--qg-space-5);
	background: var(--qg-color-surface);
	border: 1px solid var(--qg-color-line);
	border-radius: var(--qg-radius-lg);
	overflow: hidden;
}

.qg-about__pillar-number {
	position: absolute;
	top: -0.4rem;
	right: var(--qg-space-4);
	font-family: var(--qg-font-heading);
	font-weight: 700;
	font-size: 4rem;
	line-height: 1;
	color: var(--qg-color-paper);
	pointer-events: none;
}

.qg-about__pillar-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--qg-space-3);
	border-radius: 50%;
	background: var(--qg-color-accent-soft);
	color: var(--qg-color-accent-dark);
}

.qg-about__pillar-icon .qg-icon {
	width: 20px;
	height: 20px;
}

.qg-about__pillar-title {
	position: relative;
	margin: 0 0 0.6rem;
	font-family: var(--qg-font-heading);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--qg-color-ink);
}

.qg-about__pillar-text {
	position: relative;
	margin: 0;
	color: var(--qg-color-ink-soft);
	line-height: 1.7;
}

/* Closing CTA — the same dark-ink band language as the homepage's brand
   statement section, so the page ends on the same note it started (the
   hero) rather than trailing off after the last card. */

.qg-about__cta {
	background: var(--qg-color-ink);
	padding: var(--qg-space-7) var(--qg-space-4);
}

.qg-about__cta-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--qg-space-4);
	text-align: center;
}

.qg-about__cta-heading {
	margin: 0;
	font-family: var(--qg-font-heading);
	font-weight: 700;
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	color: var(--qg-color-surface);
}

@media (prefers-reduced-motion: reduce) {
	.qg-about__hero::before {
		transition: none;
	}
}