/* ============================================================
   Chusoon About Us Page Styles
   大气商务 About 页 · 工业蓝 + 橙色强调（复用 chusoon.css 变量）
   ============================================================ */

/* ---------- Hero ---------- */
.cs-about-hero { padding-bottom: 34px; }
.cs-about-hero .cs-about-hero-inner { max-width: 820px; }
.cs-about-hero h1 { font-size: 46px; }
.cs-about-hero h1 .cs-accent { color: var(--cs-orange); }
.cs-about-hero .cs-hero-sub { color: #c6d4e4; font-size: 17px; max-width: 720px; margin: 16px 0 28px; }
.cs-about-hero .cs-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero 内统计条：顶部细线分隔 */
.cs-about-hero .cs-about-stats {
	margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.16);
}
.cs-about-hero .cs-stat span { color: #aebfd1; }

/* ---------- 段头 ---------- */
.cs-sec-head { margin-bottom: 40px; }
.cs-sec-head .cs-kicker { display: block; margin-bottom: 4px; }

/* ---------- Who We Are ---------- */
.cs-about-who .cs-who-copy p { color: #52637a; line-height: 1.75; }
.cs-who-btn {
	display: inline-block; background: var(--cs-orange); color: #fff !important; padding: 12px 26px;
	border-radius: 6px; font-weight: 700; margin-top: 8px;
}
.cs-who-btn:hover { background: #dd7a13; color: #fff !important; text-decoration: none; }

/* 右侧视觉卡 */
.cs-who-visual { position: relative; }
.cs-vcard {
	position: relative; background: #fff; border: 1px solid #e4eaf1; border-radius: 18px;
	padding: 20px; box-shadow: 0 18px 44px rgba(30,58,95,.12);
}
.cs-vcard-badge {
	position: absolute; top: 18px; right: -10px; z-index: 3; background: var(--cs-orange); color: #fff;
	font-size: 12.5px; font-weight: 700; letter-spacing: .4px; padding: 8px 16px; border-radius: 30px 4px 30px 30px;
	box-shadow: 0 8px 18px rgba(246,139,30,.35);
}
.cs-vcard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cs-vcard-grid figure {
	margin: 0; background: linear-gradient(160deg, #f4f7fb, #e7eef6);
	border: 1px solid #e4eaf1; border-radius: 12px; display: flex; align-items: center; justify-content: center;
	min-height: 150px; overflow: hidden;
}
.cs-vcard-grid figure img { max-width: 84%; max-height: 132px; object-fit: contain; transition: transform .25s ease; }
.cs-vcard-grid figure:hover img { transform: scale(1.06); }
.cs-vcard-foot {
	display: flex; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed #dbe4ee; flex-wrap: wrap;
}
.cs-vcard-foot span {
	background: #eef4fb; border: 1px solid #dce7f3; color: var(--cs-blue);
	border-radius: 30px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .3px;
}

/* ---------- Core Strengths ---------- */
.cs-strengths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cs-strength {
	background: #fff; border: 1px solid #e4eaf1; border-radius: 14px; padding: 28px 24px;
	transition: box-shadow .22s ease, transform .22s ease; position: relative; overflow: hidden;
}
.cs-strength::before {
	content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 4px;
	background: var(--cs-orange); transform: scaleY(0); transform-origin: top; transition: transform .25s;
}
.cs-strength:hover { box-shadow: 0 14px 30px rgba(30,58,95,.12); transform: translateY(-4px); }
.cs-strength:hover::before { transform: scaleY(1); }
.cs-strength i {
	width: 54px; height: 54px; line-height: 54px; text-align: center; font-size: 22px; color: #fff;
	background: linear-gradient(135deg, var(--cs-blue), #2f5b92); border-radius: 12px; margin-bottom: 16px;
}
.cs-strength h3 { font-size: 17px; font-weight: 800; color: var(--cs-blue); margin: 0 0 8px; }
.cs-strength p { font-size: 13.5px; color: #5f7183; line-height: 1.7; margin: 0; }

/* ---------- What We Supply ---------- */
.cs-lines { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.cs-line {
	background: #fff; border: 1px solid #e4eaf1; border-radius: 12px; padding: 22px 14px 18px; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--cs-blue);
	transition: box-shadow .22s ease, transform .22s ease, border-color .22s;
}
.cs-line:hover { color: var(--cs-blue); text-decoration: none; border-color: #cdd9e8; box-shadow: 0 12px 26px rgba(30,58,95,.13); transform: translateY(-4px); }
.cs-line i { font-size: 24px; color: var(--cs-orange); }
.cs-line span { font-size: 13px; font-weight: 700; line-height: 1.35; }

/* ---------- Mission / Vision ---------- */
.cs-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cs-mv-card {
	background:
		radial-gradient(520px 240px at 100% 0%, rgba(246,139,30,.22), transparent 60%),
		linear-gradient(135deg, #12233d, #1e3a5f 70%);
	border-radius: 18px; padding: 40px 36px; color: #fff; position: relative; overflow: hidden;
}
.cs-mv-card i { font-size: 30px; color: var(--cs-orange); margin-bottom: 16px; }
.cs-mv-card .cs-kicker { font-size: 12px; }
.cs-mv-card h3 { font-size: 21px; font-weight: 800; margin: 8px 0 12px; }
.cs-mv-card p { color: #c3d2e2; font-size: 14.5px; line-height: 1.75; margin: 0; }

/* ---------- CTA ---------- */
.cs-about-cta .cs-cta { padding: 46px 44px; }
.cs-about-cta .cs-cta a { white-space: nowrap; }

/* ---------- 响应式 ---------- */
@media (max-width: 1199px) {
	.cs-lines { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 991px) {
	.cs-about-hero h1 { font-size: 34px; }
	.cs-strengths { grid-template-columns: repeat(2, 1fr); }
	.cs-lines { grid-template-columns: repeat(3, 1fr); }
	.cs-vcard-grid figure { min-height: 130px; }
}
@media (max-width: 767px) {
	.cs-mv { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
	.cs-strengths { grid-template-columns: 1fr; }
	.cs-lines { grid-template-columns: repeat(2, 1fr); }
	.cs-about-hero h1 { font-size: 28px; }
	.cs-mv-card { padding: 30px 24px; }
	.cs-about-cta .cs-cta { padding: 30px 24px; }
}