/* About page — extracted from about.html prototype. */

.about-intro { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 820px) { .about-intro { grid-template-columns: 1fr; gap: 40px; } }
.about-intro h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
.about-intro p { font-size: 1.1rem; color: var(--ink-soft); }
.about-intro .side-card {
	background: white; padding: 28px; border-radius: var(--radius-lg);
	border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.about-intro .side-card h4 {
	font-family: var(--f-body); font-size: 0.82rem; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--orange-deep); margin-bottom: 14px;
}
.about-intro .side-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 0.95rem; }
.about-intro .side-card dt { font-weight: 700; color: var(--ink-soft); }
.about-intro .side-card dd { margin: 0; }

.aristo-section { background: var(--cream-deep); }
.aristo-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; }
@media (max-width: 820px) { .aristo-grid { grid-template-columns: 1fr; gap: 32px; } }
.aristo-visual {
	background: white; padding: 48px; border-radius: var(--radius-lg);
	border: 1px solid var(--line); text-align: center;
}
.aristo-mark {
	width: 120px; height: 120px; border-radius: 32px; background: var(--blue);
	color: white; display: flex; align-items: center; justify-content: center;
	font-family: var(--f-display); font-size: 3.2rem; font-weight: 700; margin: 0 auto 20px;
}
.aristo-visual h3 { font-family: var(--f-display); margin-bottom: 8px; }
.aristo-visual .aristo-stars { color: var(--yellow); font-size: 1.3rem; letter-spacing: 3px; margin: 12px 0 6px; }
.aristo-visual a { font-size: 0.95rem; font-weight: 700; }

.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .values { grid-template-columns: 1fr; } }
.value-card {
	background: white; padding: 28px; border-radius: var(--radius-lg); border: 1px solid var(--line);
}
.value-num {
	font-family: var(--f-display); color: var(--orange-deep); font-size: 1.6rem;
	font-weight: 700; margin-bottom: 8px;
}

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
@media (max-width: 820px) { .team-grid { grid-template-columns: 1fr; } }
.team-card { background: white; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.team-photo {
	aspect-ratio: 1;
	background: var(--cream-deep);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	overflow: hidden;
	position: relative;
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-photo-icon {
	width: 88px; height: 88px;
	border-radius: 50%;
	background: var(--orange-soft);
	color: var(--orange-deep);
	display: flex; align-items: center; justify-content: center;
}
.team-card:nth-child(2) .team-photo-icon { background: var(--blue-soft); color: var(--blue); }
.team-card:nth-child(3) .team-photo-icon { background: #D9F0ED; color: #2E7B74; }
.team-photo-icon svg { width: 44px; height: 44px; }
.team-photo-coming {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.team-body { padding: 24px; }
.team-body h3 { margin-bottom: 4px; }
.team-role { font-size: 0.88rem; color: var(--orange-deep); font-weight: 700; letter-spacing: 0.04em; margin-bottom: 12px; }
.team-body p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

.about-team-section { background: var(--cream-deep); }