/* ============================================================
   About Us / "Our Story" — STANDALONE native rebuild (Phase 4).
   Loaded only on page-about-us.php. Light content page.
   ============================================================ */

.wwg-about { color: var(--wwg-caput-mortuum-xdark); }
.wwg-about-inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.wwg-about-h2 {
	font-family: var(--wwg-font-display);
	font-size: 44px;
	font-weight: 400;
	color: var(--wwg-ivory);
	margin: 0 0 16px;
	line-height: 1.1;
}

/* ── Hero ── */
.wwg-about-hero {
	position: relative;
	min-height: 560px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-size: cover;
	background-position: center;
	color: var(--wwg-bone-xlight);
}
.wwg-about-hero::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--wwg-ivory) 50%, transparent); }
.wwg-about-hero-inner { position: relative; z-index: 1; max-width: 760px; padding: 40px 24px; }
.wwg-about-hero h1 {
	font-family: var(--wwg-font-display);
	font-size: 64px;
	font-weight: 400;
	margin: 0 0 18px;
	color: var(--wwg-bone-xlight);
	line-height: 1.05;
}
.wwg-about-hero p { font-family: var(--wwg-font-body); font-size: var(--wwg-text-lg-size); line-height: var(--wwg-text-lg-line); margin: 0; color: var(--wwg-bone-xlight); }

/* ── Centred heading band (Our Mission) ── */
.wwg-about-band { padding: 60px 24px 8px; text-align: center; background: var(--wwg-bone-xlight); }

/* ── Mission trio (wood-grain bg) ── */
.wwg-about-trio { background-color: var(--wwg-bone-light); background-size: cover; background-position: center; padding: 52px 24px; }
.wwg-about-trio-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; }
.wwg-about-trio-item .sub { font-family: var(--wwg-font-body); font-size: var(--wwg-text-sm-size); color: var(--wwg-iron); margin: 0 0 8px; line-height: var(--wwg-text-sm-line); }
.wwg-about-trio-item h2 { font-family: var(--wwg-font-display); font-size: 34px; font-weight: 400; color: var(--wwg-ivory); margin: 0; }

/* ── About Us story + team ── */
.wwg-about-story { background: var(--wwg-gypsum); padding: 64px 24px; }
.wwg-about-story p { font-family: var(--wwg-font-body); font-size: var(--wwg-text-md-size); line-height: var(--wwg-text-md-line); max-width: 640px; margin: 0 0 16px; }
.wwg-about-team { display: flex; flex-wrap: wrap; gap: 56px; margin-top: 34px; }
.wwg-about-team-member h3 { font-family: var(--wwg-font-display); font-size: 20px; font-weight: 400; margin: 0 0 2px; }
.wwg-about-team-member span { font-family: var(--wwg-font-body); font-size: var(--wwg-text-sm-size); color: var(--wwg-color-text-subtle); line-height: var(--wwg-text-sm-line); }

/* ── Full-width photos ── */
.wwg-about-photo img { width: 100%; height: auto; display: block; }

/* ── Sourcing & Sustainability overlay card ── */
.wwg-about-sustain { position: relative; min-height: 560px; background-size: cover; background-position: center; display: flex; align-items: center; padding: 48px 24px; }
.wwg-about-sustain-card { position: relative; background: color-mix(in srgb, var(--wwg-bone-xlight) 95%, transparent); max-width: 470px; padding: 40px; border-radius: 4px; margin-left: 6%; }
.wwg-about-sustain-card h3 { font-family: var(--wwg-font-display); font-size: 28px; font-weight: 400; margin: 0 0 14px; }
.wwg-about-sustain-card p { font-family: var(--wwg-font-body); font-size: var(--wwg-text-md-size); line-height: var(--wwg-text-md-line); margin: 0 0 14px; }
.wwg-about-sustain-card a { color: var(--wwg-color-link); font-weight: var(--wwg-btn-weight); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 1px; }
.wwg-about-sustain-card a:hover { color: var(--wwg-color-link-hover); }

/* ── Press / "See What People Say" (wood bg) ── */
.wwg-about-press { background-color: var(--wwg-bone); background-size: cover; background-position: center; padding: 64px 24px; text-align: center; }
.wwg-about-press .wwg-about-h2 { text-align: center; }
.wwg-about-press .intro { font-family: var(--wwg-font-body); font-size: var(--wwg-text-md-size); line-height: var(--wwg-text-md-line); max-width: 800px; margin: 0 auto 22px; }
.wwg-about-press-links a { color: var(--wwg-color-link); font-weight: var(--wwg-btn-weight); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 1px; }
.wwg-about-press-links a:hover { color: var(--wwg-color-link-hover); }
.wwg-about-press-links .sep { color: var(--wwg-pewter); margin: 0 8px; }

/* ── "Designs …" text sections ── */
.wwg-about-designs { padding: 58px 24px; background: var(--wwg-bone-xlight); }
.wwg-about-designs p { font-family: var(--wwg-font-body); font-size: var(--wwg-text-md-size); line-height: var(--wwg-text-md-line); max-width: 640px; margin: 0 0 16px; }

/* ── Footer info blocks ── */
.wwg-about-blocks { background: var(--wwg-bone-xlight); padding: 48px 24px 76px; }
.wwg-about-blocks-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 44px; }
.wwg-about-block h2, .wwg-about-block h3 { font-family: var(--wwg-font-display); font-weight: 400; font-size: 24px; margin: 0 0 12px; color: var(--wwg-ivory); }
.wwg-about-block p { font-family: var(--wwg-font-body); font-size: var(--wwg-text-md-size); line-height: var(--wwg-text-md-line); margin: 0 0 14px; }
.wwg-about-block a:not(.wwg-about-btn) { color: var(--wwg-color-link); text-decoration: none; }
.wwg-about-btn { display: inline-block; background: var(--wwg-btn-emphasis-fill); color: var(--wwg-btn-emphasis-on-fill); font-family: var(--wwg-font-body); font-weight: 600; padding: 10px 26px; border-radius: 4px; text-decoration: none; transition: background .2s; }
.wwg-about-btn:hover { background: var(--wwg-burnt-sienna-dark); color: var(--wwg-bone-xlight); }

@media (max-width: 900px) {
	.wwg-about-trio-grid, .wwg-about-blocks-grid { grid-template-columns: 1fr; gap: 30px; }
	.wwg-about-team { gap: 28px 40px; }
	.wwg-about-hero h1 { font-size: 44px; }
	.wwg-about-h2 { font-size: 34px; }
	.wwg-about-sustain-card { margin-left: 0; }
}

/* ---- Mobile type (Figma "Typogrophy" Mobile mode) ---- */
@media (max-width: 767px) {
	.wwg-about-hero p { font-size: var(--wwg-text-lg-size-mobile); line-height: var(--wwg-text-lg-line-mobile); }
	.wwg-about-story p,
	.wwg-about-sustain-card p,
	.wwg-about-press .intro,
	.wwg-about-designs p,
	.wwg-about-block p { font-size: var(--wwg-text-md-size-mobile); line-height: var(--wwg-text-md-line-mobile); }
	.wwg-about-trio-item .sub,
	.wwg-about-team-member span { font-size: var(--wwg-text-sm-size-mobile); line-height: var(--wwg-text-sm-line-mobile); }
}