/* VU NATURALS company profile. Keep long-form content fluid at every screen size. */
.vn-about-page {
	--vn-about-ink: #354657;
	--vn-about-muted: #607184;
	--vn-about-line: #dce6ee;
	--vn-about-wash: #f3f7fb;
	background: #fff;
	color: var(--vn-about-ink);
}

.vn-about-wide {
	width: min(1200px, calc(100% - 64px));
	margin: 0 auto;
}

.vn-about-page h1,
.vn-about-page h2,
.vn-about-page h3,
.vn-about-page h4 {
	color: var(--vn-blue);
	font-family: var(--vn-font);
	font-weight: 700;
	overflow-wrap: break-word;
}

.vn-about-page p,
.vn-about-page li {
	font-family: var(--vn-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.75;
}

.vn-about-page p { margin: 0; }

.vn-about-media { margin: 0; }
.vn-about-media img { display: block; width: 100%; height: auto; border-radius: 6px; }
.vn-about-media figcaption { margin-top: 10px; color: var(--vn-about-muted); font-size: 13px; font-weight: 400; line-height: 1.6; }
.vn-about-intro-media { max-width: 480px; margin-top: 28px; }

.vn-about-banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 520px;
	padding: 80px 0;
	background: #102b36 url('../images/reference/hero-reference.jpg') center / cover no-repeat;
}

.vn-about-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(4, 24, 37, .93), rgba(4, 24, 37, .48));
}

.vn-about-banner-content { position: relative; z-index: 1; }

.vn-about-page .vn-about-banner-label {
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.vn-about-page .vn-about-banner h1 {
	max-width: 1000px;
	margin: 14px 0 22px;
	color: #fff;
	font-size: clamp(30px, 3.5vw, 48px);
	line-height: 1.25;
	letter-spacing: .015em;
}

.vn-about-page .vn-about-banner-lead {
	max-width: 820px;
	color: #eef4f6;
	font-size: 18px;
	line-height: 1.7;
}

.vn-about-section { padding: 82px 0; }

.vn-about-split {
	display: grid;
	grid-template-columns: minmax(0, .75fr) minmax(0, 1.65fr);
	gap: 80px;
	align-items: start;
}

.vn-about-section-header h2 {
	margin: 0;
	font-size: clamp(26px, 2.7vw, 36px);
	line-height: 1.3;
}

.vn-about-page .vn-about-eyebrow {
	margin: 0 0 12px;
	color: var(--vn-about-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.vn-about-section-header--center {
	max-width: 940px;
	margin: 0 auto;
	text-align: center;
}

.vn-about-copy p { margin: 0 0 22px; }
.vn-about-copy p:last-child { margin-bottom: 0; }
.vn-about-vision,
.vn-about-facilities { background: var(--vn-about-wash); }

.vn-about-purpose-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	margin-top: 38px;
}

.vn-about-purpose {
	padding: 34px 36px 36px;
	border: 1px solid var(--vn-about-line);
	border-top: 4px solid var(--vn-blue);
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(19, 56, 83, .035);
}

.vn-about-purpose--mission { border-top-color: #35734f; }

.vn-about-purpose-number {
	color: #6c8295;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
}

.vn-about-purpose h3 {
	margin: 14px 0;
	font-size: 27px;
	line-height: 1.3;
}

.vn-about-purpose--mission h3 { color: #35734f; }

.vn-about-page .vn-about-values-heading {
	margin: 46px 0 26px;
	font-size: 24px;
	line-height: 1.35;
	text-align: center;
}

.vn-about-value-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
}

.vn-about-value {
	min-width: 0;
	padding-top: 20px;
	border-top: 1px solid #ccdbe7;
}

.vn-about-value h4 {
	margin: 0 0 10px;
	font-size: 19px;
	line-height: 1.4;
}

.vn-about-value p { color: var(--vn-about-muted); font-size: 15px; }

.vn-about-milestones {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
	margin: 42px 0 0;
	padding: 0;
	list-style: none;
}

.vn-about-milestones > li {
	position: relative;
	min-width: 0;
	padding-top: 26px;
	border-top: 2px solid var(--vn-about-line);
}

.vn-about-milestones > li::before {
	content: '';
	position: absolute;
	top: -7px;
	left: 0;
	width: 12px;
	height: 12px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--vn-blue);
	box-shadow: 0 0 0 1px #c7d8e7;
}

.vn-about-milestone-date {
	color: var(--vn-blue);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.vn-about-milestones h3 {
	min-height: 56px;
	margin: 14px 0 14px;
	font-size: 20px;
	line-height: 1.4;
}

.vn-about-milestones p { color: var(--vn-about-muted); font-size: 15px; }
.vn-about-history { border-top: 1px solid #e6edf3; }

.vn-about-copy .vn-about-belief {
	margin-top: 28px;
	padding: 22px 26px;
	border-left: 3px solid var(--vn-blue);
	background: var(--vn-about-wash);
	color: var(--vn-blue-dark);
	font-weight: 600;
}

.vn-about-facility-layout {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.65fr);
	gap: 60px;
	margin-top: 36px;
	align-items: start;
}

.vn-about-facility-overview { display: grid; gap: 22px; min-width: 0; }
.vn-about-facility-media { overflow: hidden; border: 1px solid var(--vn-about-line); border-radius: 6px; background: #fff; }
.vn-about-facility-media img { border-radius: 0; }
.vn-about-facility-media figcaption { margin: 0; padding: 12px 14px; }
.vn-about-facility-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.vn-about-facility-stat {
	padding: 20px;
	border-radius: 6px;
	background: #07549a;
	color: #fff;
}

.vn-about-facility-stat strong {
	display: block;
	font-family: var(--vn-font);
	font-size: clamp(24px, 2.1vw, 32px);
	font-weight: 700;
	line-height: 1.25;
}

.vn-about-facility-stat span { display: block; margin-top: 12px; font-size: 14px; line-height: 1.6; }

.vn-about-facility-stat--white {
	border: 1px solid #cadce9;
	background: #e5eef7;
	color: var(--vn-blue-dark);
}

.vn-about-page .vn-about-chain-lead {
	margin: 22px auto 14px;
	color: var(--vn-blue);
	font-size: 18px;
	font-weight: 600;
}

.vn-about-chain-intro { color: var(--vn-about-muted); }

.vn-about-chain-media { margin-top: 32px; }
.vn-about-chain-media figcaption { text-align: center; }

.vn-about-chain-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 42px 0 0;
	padding: 0;
	list-style: none;
}

.vn-about-chain-step {
	min-width: 0;
	padding: 28px;
	border: 1px solid var(--vn-about-line);
	border-radius: 6px;
	background: #fff;
}

.vn-about-chain-number {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #edf3f9;
	color: var(--vn-blue);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

.vn-about-chain-step h3 {
	min-height: 54px;
	margin: 20px 0 0;
	font-size: 20px;
	line-height: 1.4;
}

.vn-about-chain-translation {
	display: block;
	margin-top: 6px;
	color: var(--vn-about-muted);
	font-size: 13px;
	line-height: 1.5;
}

.vn-about-chain-step p { margin-top: 16px; font-size: 15px; }

.vn-about-chain-values {
	margin-top: 48px;
	padding: 36px;
	border-radius: 6px;
	background: var(--vn-about-wash);
}

.vn-about-chain-values .vn-about-values-heading { margin: 0 0 26px; }

/* Keep the shared footer proportional to this content-led page. */
.vn-about-page ~ .vn-footer { height: auto; min-height: 0; }
.vn-about-page ~ .vn-footer .vn-footer-top { height: auto; padding: 64px 0 48px; }
.vn-about-page ~ .vn-footer .vn-footer-grid { height: auto; }
.vn-about-page ~ .vn-footer .vn-footer-bottom { height: auto; padding: 18px 0; }

@media (max-width: 1100px) {
	.vn-about-split { gap: 42px; }
	.vn-about-milestones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 28px; }
	.vn-about-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vn-about-chain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vn-about-facility-layout { gap: 36px; }
	.vn-about-facility-stats { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
	.vn-about-wide { width: calc(100% - 40px); }
	.vn-about-section { padding: 58px 0; }
	.vn-about-split,
	.vn-about-facility-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.vn-about-banner { min-height: 440px; padding: 64px 0; }
	.vn-about-page .vn-about-banner h1 { font-size: clamp(28px, 4.5vw, 38px); }
	.vn-about-page .vn-about-banner-lead { max-width: 700px; font-size: 17px; }
	.vn-about-purpose { padding: 28px; }
	.vn-about-facility-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vn-about-facility-stat { padding: 26px; }
	.vn-about-facility-stat strong { font-size: 34px; }
	.vn-about-chain-step { padding: 24px; }
}

@media (max-width: 600px) {
	.vn-about-wide { width: calc(100% - 32px); }
	.vn-about-section { padding: 48px 0; }
	.vn-about-banner { min-height: 430px; padding: 54px 0; }
	.vn-about-page .vn-about-banner h1 { margin: 14px 0 20px; font-size: clamp(27px, 7.3vw, 34px); }
	.vn-about-page .vn-about-banner-lead { font-size: 16px; line-height: 1.65; }
	.vn-about-section-header h2 { font-size: 27px; }
	.vn-about-purpose-grid,
	.vn-about-chain-grid,
	.vn-about-value-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.vn-about-purpose-grid,
	.vn-about-chain-grid { margin-top: 28px; }
	.vn-about-purpose { padding: 26px; }
	.vn-about-purpose h3 { font-size: 25px; }
	.vn-about-page .vn-about-values-heading { margin-top: 34px; font-size: 23px; }
	.vn-about-value { padding-top: 16px; }
	.vn-about-value h4 { font-size: 18px; }
	.vn-about-milestones { grid-template-columns: minmax(0, 1fr); margin-top: 30px; gap: 30px; }
	.vn-about-milestones > li { padding: 0 0 0 24px; border-top: 0; border-left: 2px solid var(--vn-about-line); }
	.vn-about-milestones > li::before { top: 5px; left: -7px; }
	.vn-about-milestones h3 { min-height: 0; margin: 9px 0 10px; }
	.vn-about-copy .vn-about-belief { padding: 20px; }
	.vn-about-facility-layout { margin-top: 28px; }
	.vn-about-chain-step h3 { min-height: 0; }
	.vn-about-chain-values { margin-top: 30px; padding: 26px; }
	.vn-about-chain-values .vn-about-values-heading { margin-top: 0; }
	.vn-about-page ~ .vn-footer .vn-footer-top { padding: 48px 0 36px; }
}

@media (max-width: 480px) {
	.vn-about-facility-stats { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.vn-about-facility-stat { padding: 24px; }
	.vn-about-facility-stat strong { font-size: 34px; }
}