/* ============================================================
   about.html · 复古美式工业风 · H1全幅图Banner + B1左图右文错位 +
   E4引用语录 + C5铆钉角标卡 + D2竖向时间线 + C6色带磁贴 + E5徽章墙
   ============================================================ */

/* ---------- 题头：H1 全幅图深色 Banner ---------- */
.about-hero{
  position:relative;min-height:460px;display:flex;align-items:flex-end;
  padding-top:calc(var(--header-h) + 60px);padding-bottom:60px;
  background:var(--green-900);overflow:hidden;
}
.about-hero-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.38;
}
.about-hero-mask{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,33,24,.55) 0%,rgba(15,33,24,.75) 70%,rgba(15,33,24,.92) 100%);
}
.about-hero-inner{position:relative;z-index:2;max-width:820px}
.about-hero h1{
  font-size:clamp(38px,5.5vw,64px);color:var(--cream-50);
  margin:18px 0 14px;letter-spacing:.04em;
}
.about-hero-inner > p{
  color:var(--cream-200);font-size:17px;line-height:1.9;max-width:640px;
}
.about-hero .crumb a{color:var(--brass-light)}
.about-hero-ruler{
  position:absolute;left:0;right:0;bottom:0;height:6px;
  background:repeating-linear-gradient(90deg,var(--brass) 0 18px,var(--brown-800) 18px 36px);
  opacity:.7;
}

/* ---------- 品牌故事：B1 左图右文错位 ---------- */
.about-story{background:var(--cream-50)}
.story-wrap{
  display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,70px);align-items:start;
}
.story-media{position:relative;margin-top:30px}
.story-media img{
  width:100%;height:460px;object-fit:cover;border-radius:var(--r-sm);
  border:1px solid var(--line);box-shadow:var(--shadow-md);
}
.story-stamp{
  position:absolute;left:-22px;bottom:-22px;
  background:var(--brown-800);color:var(--brass-light);
  padding:14px 22px;font-family:var(--font-display);font-size:15px;letter-spacing:.2em;
  border:2px solid var(--brass);border-radius:var(--r-xs);transform:rotate(-3deg);
}
.story-body h2{font-size:clamp(26px,3vw,38px);margin:6px 0 22px}
.story-body p{color:var(--ink-soft);margin-bottom:16px;line-height:1.95}

/* ---------- 服务理念：E4 引用语录块 ---------- */
.about-philo{border-top:1px solid var(--line)}
.philo-quote{
  position:relative;max-width:880px;margin:0 auto 60px;padding:30px 40px;
  background:var(--cream-50);border-left:5px solid var(--brass);
  box-shadow:var(--shadow-sm);
}
.philo-quote svg{position:absolute;top:-18px;left:20px;width:48px;height:48px;color:var(--brass)}
.philo-quote blockquote p{
  font-family:var(--font-display);font-size:clamp(18px,2vw,23px);line-height:1.7;color:var(--brown-800);
}
.philo-quote cite{display:block;margin-top:14px;font-style:normal;font-size:14px;color:var(--muted)}
.philo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.philo-card{
  background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:30px 26px;position:relative;transition:transform .3s ease,box-shadow .3s ease;
}
.philo-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.philo-num{
  font-family:var(--font-display);font-size:42px;color:var(--brass);opacity:.55;line-height:1;
}
.philo-card h3{margin:14px 0 10px;font-size:20px}
.philo-card p{color:var(--muted);font-size:14.5px;line-height:1.85}

/* ---------- 团队介绍：C5 铆钉角标卡 ---------- */
.about-team{background:var(--cream-50)}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.team-card{
  position:relative;background:var(--cream-50);
  border:1.5px solid var(--brown-700);border-radius:var(--r-sm);
  padding:38px 28px 30px;box-shadow:var(--shadow-sm);
}
.team-card::before,.team-card::after{
  content:"";position:absolute;width:8px;height:8px;border-radius:50%;
  background:var(--brass);box-shadow:0 0 0 2px var(--cream-50),0 0 0 3.5px var(--brass);
}
.team-card::before{top:10px;left:10px}
.team-card::after{bottom:10px;right:10px}
.team-rivet{display:none}
.team-role{
  display:inline-block;font-size:12px;letter-spacing:.22em;color:var(--brass);
  border:1px solid var(--brass);padding:4px 10px;margin-bottom:14px;text-transform:uppercase;
}
.team-card h3{font-size:21px;margin-bottom:10px}
.team-card > p{color:var(--ink-soft);font-size:14.5px;line-height:1.85;margin-bottom:16px}
.team-card ul{border-top:1px dashed var(--line);padding-top:14px}
.team-card ul li{
  font-size:14px;color:var(--muted);padding:5px 0 5px 18px;position:relative;
}
.team-card ul li::before{content:"▸";position:absolute;left:0;color:var(--brass)}

/* ---------- 发展历程：D2 竖向时间线 ---------- */
.about-history{
  border-top:4px solid var(--brass);
  background:
    linear-gradient(180deg,rgba(15,33,24,.96),rgba(15,33,24,.98)),
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(210,176,120,.06) 39px 40px);
}
.about-history .sec-head h2{color:var(--cream-50)}
.about-history .sec-lead{color:var(--cream-200)}
.history-line{
  position:relative;max-width:780px;margin:0 auto;padding-left:30px;
}
.history-line::before{
  content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--brass),var(--brass-light),var(--brass));
}
.history-line li{position:relative;padding:0 0 36px 30px}
.history-dot{
  position:absolute;left:-30px;top:6px;width:18px;height:18px;border-radius:50%;
  background:var(--brass);box-shadow:0 0 0 4px rgba(181,137,63,.25);
}
.history-body h3{
  color:var(--brass-light);font-size:20px;margin-bottom:8px;
}
.history-body p{color:var(--cream-200);font-size:15px;line-height:1.85}

/* ---------- 服务承诺：C6 连续色带磁贴 ---------- */
.about-promise{background:var(--cream-50)}
.promise-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:2px solid var(--brown-700)}
.promise-cell{
  padding:30px 22px;border-right:1px solid var(--brown-700);
  background:var(--cream-100);
}
.promise-cell:last-child{border-right:none}
.promise-cell:nth-child(odd){background:var(--brown-700);color:var(--cream-100)}
.promise-cell:nth-child(odd) h3{color:var(--brass-light)}
.promise-cell:nth-child(odd) p{color:var(--cream-200)}
.promise-cell h3{font-size:18px;margin-bottom:10px;color:var(--brown-800)}
.promise-cell p{font-size:14px;color:var(--ink-soft);line-height:1.8}

/* ---------- 资质荣誉：E5 徽章墙（图文） ---------- */
.about-honor{border-top:1px solid var(--line)}
.honor-wrap{
  display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center;
  background:var(--cream-50);padding:30px;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
}
.honor-wrap img{width:100%;height:340px;object-fit:cover;border-radius:var(--r-sm)}
.honor-notes p{color:var(--ink-soft);margin-bottom:14px;line-height:1.9;font-size:15px}
.honor-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.honor-badge{
  display:inline-block;padding:8px 16px;border:1.5px solid var(--green-600);
  color:var(--green-700);background:var(--cream-50);font-size:13px;font-weight:600;
  border-radius:var(--r-xs);letter-spacing:.05em;
}

/* ---------- 底部 CTA ---------- */
.about-cta{border-top:4px solid var(--brass)}
.about-cta-inner{
  display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;
}
.about-cta-text h2{color:var(--cream-50);font-size:clamp(24px,3vw,34px);margin-bottom:10px}
.about-cta-text p{color:var(--cream-200)}
.about-cta-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .story-wrap{grid-template-columns:1fr}
  .story-media{margin-top:0}
  .philo-grid,.team-grid{grid-template-columns:1fr}
  .promise-strip{grid-template-columns:1fr 1fr}
  .promise-cell{border-bottom:1px solid var(--brown-700)}
  .honor-wrap{grid-template-columns:1fr}
  .about-cta-inner{grid-template-columns:1fr}
  .about-cta-actions{justify-content:flex-start}
}