.page-about {
  --about-hair: rgba(17, 24, 32, .08);
  --about-invert-soft: rgba(246, 242, 233, .78);
  background: var(--paper-100);
  color: var(--body-text);
}

.page-about .about-crumb {
  padding-top: 18px;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  padding: clamp(22px, 4vw, 44px) 0 clamp(30px, 5vw, 62px);
  border-bottom: 1px solid var(--line);
  background-image:
    linear-gradient(180deg, rgba(7, 28, 46, .055), rgba(7, 28, 46, 0) 68%),
    repeating-linear-gradient(90deg, var(--about-hair) 0 1px, transparent 1px 72px);
}

.page-about .about-hero__grid {
  display: grid;
  gap: clamp(22px, 3vw, 36px);
}

.page-about .about-hero .display-title {
  margin: 10px 0 0;
  font-size: clamp(32px, 6vw, 58px);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--deep-900);
}

.page-about .about-hero__lead .lede {
  margin-top: 16px;
  max-width: 34em;
}

.page-about .about-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.page-about .ledger {
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .66);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 16px 16px 14px;
}

.page-about .ledger__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--stone-500);
}

.page-about .ledger__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
}

.page-about .ledger__value {
  font-family: var(--font-mono);
  font-size: clamp(21px, 3vw, 28px);
  font-weight: 600;
  line-height: 1;
  color: var(--deep-900);
}

.page-about .ledger__value small {
  font-size: 11px;
  font-weight: 400;
  color: var(--stone-500);
}

.page-about .ledger__label {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--stone-500);
  text-align: right;
}

.page-about .ledger__jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--amber-600);
  text-decoration: none;
  border-bottom: 1px solid var(--amber-400);
  padding-bottom: 2px;
}

.page-about .ledger__jump:hover,
.page-about .ledger__jump:focus-visible {
  color: var(--deep-900);
  border-bottom-color: var(--deep-900);
}

/* ---------- 章节骨架 ---------- */
.page-about .about-sec {
  padding: clamp(36px, 5.5vw, 76px) 0;
  border-bottom: 1px solid var(--line);
}

.page-about .about-sec:last-of-type {
  border-bottom: 0;
}

.page-about .about-sec .eyebrow {
  display: block;
  margin: 0 0 10px;
}

.page-about .about-sec .section-title {
  margin: 0 0 18px;
  max-width: 22ch;
  color: var(--deep-900);
}

.page-about .about-sec__body {
  min-width: 0;
}

.page-about .about-sec__note {
  background: var(--paper-0);
  border: 1px solid var(--line);
  border-top: 3px solid var(--amber-400);
  padding: 18px 16px 20px;
}

.page-about .note-title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--stone-500);
}

.page-about .note-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-about .note-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--body-text);
}

.page-about .note-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--amber-600);
  padding-top: 3px;
}

.page-about .note-list b {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--deep-900);
}

/* ---------- 图片 ---------- */
.page-about .about-figure {
  margin: 26px 0 0;
}

.page-about .about-figure--flush {
  margin-top: 0;
}

.page-about .about-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--paper-200);
}

.page-about .about-figure figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  line-height: 1.6;
  color: var(--stone-500);
}

.page-about .about-sec__media {
  min-width: 0;
}

/* ---------- 时间轴 ---------- */
.page-about .about-history__head {
  max-width: 62ch;
}

.page-about .about-history__lede {
  margin-top: 12px;
}

.page-about .tl {
  list-style: none;
  position: relative;
  margin: clamp(26px, 3vw, 38px) 0 0;
  padding: 0 0 0 26px;
  max-width: 880px;
}

.page-about .tl::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--amber-400), var(--deep-700));
}

.page-about .tl-item {
  position: relative;
  padding-bottom: 26px;
}

.page-about .tl-item:last-child {
  padding-bottom: 0;
}

.page-about .tl-item::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 4px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--paper-100);
  border: 2px solid var(--amber-400);
}

.page-about .tl-year {
  display: block;
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--deep-900);
}

.page-about .tl-name {
  display: block;
  margin-top: 2px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--deep-700);
}

.page-about .tl-item p {
  margin: 6px 0 0;
  max-width: 54ch;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--body-text);
}

/* ---------- 区域筛选 ---------- */
.page-about .regions {
  margin-top: 22px;
}

.page-about .region-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-about .region-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-about .region-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  background: var(--paper-0);
  color: var(--deep-700);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.page-about .region-chip:hover {
  border-color: var(--amber-400);
  color: var(--amber-600);
}

.page-about .region-chip:has(input:checked) {
  background: var(--deep-900);
  border-color: var(--deep-900);
  color: var(--paper-100);
}

.page-about .region-chip:has(input:focus-visible) {
  outline: 2px solid var(--amber-400);
  outline-offset: 2px;
}

.page-about .region-grid {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

.page-about .region-card {
  background: var(--paper-0);
  border: 1px solid var(--line);
  border-left: 3px solid var(--celadon-500);
  padding: 13px 14px;
  transition: opacity .2s ease;
}

.page-about .region-card__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--deep-900);
}

.page-about .region-card__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--celadon-500);
}

.page-about .region-card__text {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.62;
  color: var(--stone-500);
}

.page-about .regions:has(#r-ne:checked) .region-card:not(.region-card--ne),
.page-about .regions:has(#r-nb:checked) .region-card:not(.region-card--nb),
.page-about .regions:has(#r-hd:checked) .region-card:not(.region-card--hd),
.page-about .regions:has(#r-hn:checked) .region-card:not(.region-card--hn),
.page-about .regions:has(#r-sw:checked) .region-card:not(.region-card--sw),
.page-about .regions:has(#r-xb:checked) .region-card:not(.region-card--xb) {
  opacity: .34;
}

.page-about .legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 20px 0 0;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px dashed var(--line-strong);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--stone-500);
}

.page-about .legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-about .legend svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

/* ---------- 团队账本 ---------- */
.page-about .team-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 22px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-about .team-ledger__cell {
  background: var(--paper-0);
  padding: 14px 12px;
}

.page-about .team-ledger__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--deep-900);
}

.page-about .team-ledger__unit {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--stone-500);
}

.page-about .team-ledger__label {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--stone-500);
}

.page-about .about-foot-note {
  margin: 18px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--deep-500);
  font-size: 13px;
  line-height: 1.72;
  color: var(--stone-500);
}

/* ---------- 回访 ---------- */
.page-about .about-survey__lede {
  margin-top: 0;
  margin-bottom: 4px;
  max-width: 40em;
}

.page-about .survey-rank {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-about .survey-rank li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
}

.page-about .survey-rank__num {
  display: grid;
  place-items: center;
  height: 26px;
  border: 1px solid var(--amber-400);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--amber-600);
}

.page-about .survey-rank h3 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--deep-900);
}

.page-about .survey-rank p {
  margin: 5px 0 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--body-text);
}

.page-about .survey-quote {
  margin: 0 0 10px;
  padding: 13px 15px;
  background: var(--paper-100);
  border-left: 3px solid var(--celadon-500);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--deep-900);
}

.page-about .survey-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--stone-500);
}

.page-about .survey-stats {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
  display: grid;
  gap: 9px;
}

.page-about .survey-stats div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
}

.page-about .survey-stats dt {
  color: var(--stone-500);
}

.page-about .survey-stats dd {
  margin: 0;
  font-family: var(--font-mono);
  color: var(--deep-900);
}

.page-about .survey-link {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--amber-600);
  text-decoration: none;
  border-bottom: 1px solid var(--amber-400);
  padding-bottom: 2px;
}

.page-about .survey-link:hover,
.page-about .survey-link:focus-visible {
  color: var(--deep-900);
  border-bottom-color: var(--deep-900);
}

/* ---------- 合作生态 ---------- */
.page-about .about-partner__head {
  max-width: 62ch;
}

.page-about .about-partner__head .lede {
  margin-top: 12px;
}

.page-about .partner-row {
  display: grid;
  gap: 16px;
  margin-top: 26px;
}

.page-about .partner-item {
  border-top: 2px solid var(--deep-700);
  padding-top: 12px;
}

.page-about .partner-item__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--deep-900);
}

.page-about .partner-item__unit {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--stone-500);
}

.page-about .partner-item__label {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--deep-700);
}

.page-about .partner-item__text {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.62;
  color: var(--stone-500);
}

.page-about .about-partner__body {
  margin-top: 26px;
  max-width: 72ch;
}

/* ---------- 收束 ---------- */
.page-about .about-cta {
  background: var(--deep-900);
  color: var(--paper-100);
  padding: clamp(32px, 5vw, 60px) 0;
}

.page-about .about-cta__grid {
  display: grid;
  gap: 24px;
}

.page-about .about-cta__title {
  margin: 0;
  font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.25;
  color: var(--paper-100);
}

.page-about .about-cta__text {
  margin: 12px 0 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--about-invert-soft);
}

.page-about .about-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: start;
}

.page-about .about-cta .btn--ghost {
  color: var(--paper-100);
  border-color: rgba(246, 242, 233, .38);
}

.page-about .about-cta .btn--ghost:hover,
.page-about .about-cta .btn--ghost:focus-visible {
  background: rgba(246, 242, 233, .1);
  border-color: var(--amber-400);
}

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-about .team-ledger {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-about .partner-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (min-width: 860px) {
  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-about .about-cta__grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: center;
  }
}

@media (min-width: 900px) {
  .page-about .about-sec__note {
    position: sticky;
    top: 96px;
    align-self: start;
  }

  .page-about .about-sec .section-title {
    max-width: 26ch;
  }

  .page-about .tl {
    padding-left: 30px;
  }

  .page-about .tl-item::before {
    left: -30px;
  }

  .page-about .tl-year {
    font-size: 23px;
  }
}


<main id="main-content" class="page-about">
  <div class="container about-crumb">
    <nav class="breadcrumb" aria-label="面包屑">
      <ol class="breadcrumb__list">
        <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">首页</a></li>
        <li class="breadcrumb__sep" aria-hidden="true">/</li>
        <li class="breadcrumb__item"><span class="breadcrumb__link" aria-current="page">品牌中心</span></li>
      </ol>
    </nav>
  </div>

  <header class="about-hero">
    <div class="container about-hero__grid">
      <div class="about-hero__lead">
        <p class="eyebrow">品牌中心 · 区域代理信息服务</p>
        <h1 class="display-title">覆盖到城市，服务到交付</h1>
        <p class="lede">亚投代理中心自 2017 年起为全国企业客户提供区域代理信息、覆盖查询与设备测评服务。企业负责人、渠道经理与采购人员在这里先确认区域归属，再取用资料、比对设备，把原本要靠几轮沟通才能落定的事，压缩成一次查阅。</p>
        <div class="about-hero__tags">
          <span class="chip chip--celadon"><span class="chip__dot"></span>六大区域服务体系</span>
          <span class="chip chip--amber"><span class="chip__dot"></span>更新批次 05-W2</span>
        </div>
      </div>
      <aside class="about-hero__ledger" aria-label="服务规模">
        <div class="ledger">
          <p class="ledger__head"><span>服务规模</span><span>2017 至今</span></p>
          <div class="ledger__row">
            <span class="ledger__value">4,800<small> 家</small></span>
            <span class="ledger__label">累计服务企业客户</span>
          </div>
          <div class="ledger__row">
            <span class="ledger__value">12,000<small> 名</small></span>
            <span class="ledger__label">订阅用户</span>
          </div>
          <div class="ledger__row">
            <span class="ledger__value">320<small> 家</small></span>
            <span class="ledger__label">全国合作服务点</span>
          </div>
          <div class="ledger__row">
            <span class="ledger__value">45<small> 人</small></span>
            <span class="ledger__label">服务团队</span>
          </div>
          <a class="ledger__jump" href="#survey">查看 1,200 份回访摘要 <span aria-hidden="true">→</span></a>
        </div>
      </aside>
    </div>
  </header>

  <section class="about-sec" id="who" data-reveal>
    <div class="container split-8-4">
      <div class="about-sec__body">
        <p class="eyebrow">01 · 服务对象与问题</p>
        <h2 class="section-title">挑代理服务之前，企业通常先问清三件事</h2>
        <div class="prose">
          <p>这个城市有没有人接、资料是不是齐的、出了状况多久能有回应——企业负责人和渠道经理在选定区域代理服务时，要回答的就是这些具体问题。信息散落在几个渠道里，一个区域常常要问上好几轮才能定下来。</p>
          <p>亚投代理中心把这些环节提前做成可以自己查的内容：区域覆盖按省份、城市和服务类型列清楚，代理资料包按业务环节归类，设备选型有按维度展开的测评记录。采购和运营人员拿到链接就能看完，不必每件事都等一次电话回复。</p>
          <p>我们的客户集中在制造、贸易与渠道分销行业，也有不少合作多年的老用户，回来确认新增区域或比对设备配置。他们要的不是一份漂亮的介绍，而是一条能直接走下去的路径：先看区域，再看资料，最后谈交付。</p>
        </div>
      </div>
      <aside class="about-sec__note">
        <h3 class="note-title">谁在使用这些信息</h3>
        <ol class="note-list">
          <li><span class="note-num">01</span><span><b>企业负责人</b>关心区域是否有人承接，服务能不能长期跟上。</span></li>
          <li><span class="note-num">02</span><span><b>渠道经理</b>要对比不同城市的承接方式与资料齐备程度。</span></li>
          <li><span class="note-num">03</span><span><b>采购与运营</b>需要设备适配清单，把选型一次说清。</span></li>
          <li><span class="note-num">04</span><span><b>老用户</b>回来确认新增区域，或翻看最新的测评记录。</span></li>
        </ol>
      </aside>
    </div>
  </section>

  <section class="about-sec" id="history" data-reveal>
    <div class="container">
      <div class="about-history__head">
        <p class="eyebrow">02 · 发展历程</p>
        <h2 class="section-title">从一次信息整理，长成六大区域的服务承接</h2>
        <p class="lede about-history__lede">起步时只是把区域代理信息从零散记录整理成册；今天，资料整理、测评编辑与客户响应已经放进同一套流程，每一步都留下痕迹。</p>
      </div>
      <figure class="about-figure">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="桌面上的区域代理资料档案册与索引标签，旁边摆放平板与记录表，深海蓝与暖灰白主调" loading="lazy" decoding="async">
        <figcaption>资料档案与索引标签 · 区域代理信息整理</figcaption>
      </figure>
      <ol class="tl">
        <li class="tl-item">
          <span class="tl-year">2017</span>
          <span class="tl-name">服务起步</span>
          <p>开始系统整理区域代理信息，为东北与华北的首批制造、贸易类客户提供区域归属与资料查询。</p>
        </li>
        <li class="tl-item">
          <span class="tl-year">2019</span>
          <span class="tl-name">区域网络扩展</span>
          <p>服务承接延伸到华东、华南、西南与西北，六大区域的服务分工成形，跨城市确认不再只靠一位对接人。</p>
        </li>
        <li class="tl-item">
          <span class="tl-year">2021</span>
          <span class="tl-name">质量体系落地</span>
          <p>通过 ISO 9001 质量管理体系认证，资料整理、测评编辑与客户响应纳入统一流程，交付节奏变得可预期。</p>
        </li>
        <li class="tl-item">
          <span class="tl-year">2023</span>
          <span class="tl-name">工具矩阵上线</span>
          <p>区域覆盖查询、设备适配清单与代理资料包整合进工具中心，客户从提问到拿到清单的等待明显缩短。</p>
        </li>
        <li class="tl-item">
          <span class="tl-year">2025</span>
          <span class="tl-name">订阅与测评体系完善</span>
          <p>订阅栏目保留完整批次记录，V3 平板对比测评按五项维度定期更新，最近一批更新在 5 月第 2 周。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="about-sec" id="coverage" data-reveal>
    <div class="container split-7-5">
      <div class="about-sec__body">
        <p class="eyebrow">03 · 覆盖区域</p>
        <h2 class="section-title">26 个省级区域、180 多个城市，分工到六大区域</h2>
        <div class="prose">
          <p>区域覆盖查询支持按省份、城市和服务类型筛选，出发前一次查清这个城市由谁承接、能拿到哪些资料。全国合作服务点共 320 家，其中 46 家提供设备体验与资料领取，就近看设备、拿纸质材料都能安排。</p>
        </div>
        <div class="regions">
          <input class="region-input" type="radio" name="region" id="r-all" checked>
          <input class="region-input" type="radio" name="region" id="r-ne">
          <input class="region-input" type="radio" name="region" id="r-nb">
          <input class="region-input" type="radio" name="region" id="r-hd">
          <input class="region-input" type="radio" name="region" id="r-hn">
          <input class="region-input" type="radio" name="region" id="r-sw">
          <input class="region-input" type="radio" name="region" id="r-xb">
          <div class="region-chips" role="group" aria-label="按区域查看覆盖">
            <label class="region-chip" for="r-all">全部</label>
            <label class="region-chip" for="r-ne">东北</label>
            <label class="region-chip" for="r-nb">华北</label>
            <label class="region-chip" for="r-hd">华东</label>
            <label class="region-chip" for="r-hn">华南</label>
            <label class="region-chip" for="r-sw">西南</label>
            <label class="region-chip" for="r-xb">西北</label>
          </div>
          <div class="region-grid">
            <article class="region-card region-card--ne">
              <p class="region-card__name">东北 <span class="region-card__tag">承接重心 · 沈阳</span></p>
              <p class="region-card__text">制造与贸易类客户集中，设备体验与资料领取可安排在就近服务点。</p>
            </article>
            <article class="region-card region-card--nb">
              <p class="region-card__name">华北 <span class="region-card__tag">渠道分销集中</span></p>
              <p class="region-card__text">渠道分销类需求较多，区域顾问按城市分片对接。</p>
            </article>
            <article class="region-card region-card--hd">
              <p class="region-card__name">华东 <span class="region-card__tag">设备选型需求多</span></p>
              <p class="region-card__text">选型比较与配置确认的需求集中，适配清单可直接调用。</p>
            </article>
            <article class="region-card region-card--hn">
              <p class="region-card__name">华南 <span class="region-card__tag">响应时效优先</span></p>
              <p class="region-card__text">客户更看重响应速度，邮件与订阅提醒的配合使用较多。</p>
            </article>
            <article class="region-card region-card--sw">
              <p class="region-card__name">西南 <span class="region-card__tag">跨城承接</span></p>
              <p class="region-card__text">跨城市承接的情况常见，区域确认后一次性交付资料。</p>
            </article>
            <article class="region-card region-card--xb">
              <p class="region-card__name">西北 <span class="region-card__tag">资料先到位</span></p>
              <p class="region-card__text">以资料先行、后续跟进的节奏推进，减少往返沟通。</p>
            </article>
          </div>
          <ul class="legend">
            <li>
              <svg viewBox="0 0 12 12" aria-hidden="true"><polygon points="6,1 11,3.5 11,8.5 6,11 1,8.5 1,3.5" fill="#3F7F6B"/></svg>
              已覆盖区域
            </li>
            <li>
              <svg viewBox="0 0 12 12" aria-hidden="true"><polygon points="6,1 11,3.5 11,8.5 6,11 1,8.5 1,3.5" fill="#D9A441"/></svg>
              设备体验与资料领取点 46 家
            </li>
            <li>
              <svg viewBox="0 0 12 12" aria-hidden="true"><polygon points="6,1 11,3.5 11,8.5 6,11 1,8.5 1,3.5" fill="#6C7783"/></svg>
              合作服务点 320 家
            </li>
          </ul>
        </div>
      </div>
      <aside class="about-sec__media">
        <figure class="about-figure about-figure--flush">
          <img src="{zhanqunpic:h:800w:1000}" width="1000" height="800" alt="抽象六边形区域网络与连线节点示意图，青瓷绿高亮重点区域，不出现真实地图边界" loading="lazy" decoding="async">
          <figcaption>六大区域承接示意 · 东北 / 华北 / 华东 / 华南 / 西南 / 西北</figcaption>
        </figure>
      </aside>
    </div>
  </section>

  <section class="about-sec" id="team" data-reveal>
    <div class="container split-4-8">
      <figure class="about-figure about-figure--flush about-figure--side">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="俯视构图下的测评工作台，摆放着平板设备、色卡与记录表格，不出现人物面部" loading="lazy" decoding="async">
        <figcaption>测评工作台 · 屏幕、续航与接口记录的现场</figcaption>
      </figure>
      <div class="about-sec__body">
        <p class="eyebrow">04 · 团队与质量体系</p>
        <h2 class="section-title">45 个人分工到岗，资料与测评都有人盯着</h2>
        <div class="prose">
          <p>团队共 45 人，各自负责一段流程：区域顾问 18 人分片对接客户与区域承接方，内容与测评编辑 12 人负责资料包、适配清单和 V3 平板对比测评的五个维度，技术支持 9 人维护查询工具与订阅提醒，客户服务 6 人处理邮件与回拨排期。</p>
          <p>2021 年通过 ISO 9001 质量管理体系认证后，资料交付、测评编辑与客户响应都按流程走，每月做一次复盘：哪些区域问得多、哪类资料被反复索取、哪些环节拖慢了响应，下一轮就往前调。</p>
        </div>
        <div class="team-ledger">
          <div class="team-ledger__cell">
            <p class="team-ledger__num">18<span class="team-ledger__unit"> 人</span></p>
            <p class="team-ledger__label">区域顾问</p>
          </div>
          <div class="team-ledger__cell">
            <p class="team-ledger__num">12<span class="team-ledger__unit"> 人</span></p>
            <p class="team-ledger__label">内容与测评编辑</p>
          </div>
          <div class="team-ledger__cell">
            <p class="team-ledger__num">9<span class="team-ledger__unit"> 人</span></p>
            <p class="team-ledger__label">技术支持</p>
          </div>
          <div class="team-ledger__cell">
            <p class="team-ledger__num">6<span class="team-ledger__unit"> 人</span></p>
            <p class="team-ledger__label">客户服务</p>
          </div>
        </div>
        <p class="about-foot-note">服务体系覆盖东北、华北、华东、华南、西南、西北六个方向，区域顾问与内容编辑按月对齐资料版本，避免客户拿到的清单与现场不一致。</p>
      </div>
    </div>
  </section>

  <section class="about-sec" id="survey" data-reveal>
    <div class="container split-8-4">
      <div class="about-sec__body">
        <p class="eyebrow">05 · 老用户回访</p>
        <h2 class="section-title">1,200 份回访里，客户最先确认的是覆盖</h2>
        <p class="lede about-survey__lede">老用户看评价选亚投平台代理，最先确认的往往是覆盖区域，其次才是资料完整度和响应速度——先弄清谁在这个城市承接，后面的沟通才有落点。</p>
        <ol class="survey-rank">
          <li>
            <span class="survey-rank__num">1</span>
            <div>
              <h3>覆盖区域是否说得清</h3>
              <p>客户希望打开查询就知道这个城市归哪个区域、由谁承接、能不能安排设备体验，而不是先打电话问一轮。</p>
            </div>
          </li>
          <li>
            <span class="survey-rank__num">2</span>
            <div>
              <h3>资料是否一次给齐</h3>
              <p>代理资料包、适配清单与测评记录能不能一次性拿到，直接决定采购和运营要不要来回催第二遍。</p>
            </div>
          </li>
          <li>
            <span class="survey-rank__num">3</span>
            <div>
              <h3>响应是否按序推进</h3>
              <p>邮件发出后有没有人接住、什么时候回拨、下一次更新在哪一批，客户把这些当作服务是否稳定的判断依据。</p>
            </div>
          </li>
        </ol>
      </div>
      <aside class="about-sec__note about-sec__note--survey">
        <h3 class="note-title">回访记录摘要</h3>
        <p class="survey-quote">「区域一确认，后面的资料和配置沟通就顺了。」</p>
        <p class="survey-meta">回访中出现较多的一类反馈</p>
        <dl class="survey-stats">
          <div><dt>回访样本</dt><dd>1,200 份</dd></div>
          <div><dt>覆盖方向</dt><dd>六大区域</dd></div>
          <div><dt>主要关注点</dt><dd>覆盖 · 资料 · 响应</dd></div>
        </dl>
        <a class="link-arrow survey-link" href="/answers/">相关疑问与答复</a>
      </aside>
    </div>
  </section>

  <section class="about-sec about-sec--partner" id="partners" data-reveal>
    <div class="container">
      <div class="about-partner__head">
        <p class="eyebrow">06 · 合作生态</p>
        <h2 class="section-title">设备厂商、区域服务商与测评机构，各补一块</h2>
        <p class="lede">区域代理服务落到具体城市，靠的不是一个人的经验，而是几方各管一段：厂商提供设备与参数，区域服务商承接落地，测评机构补充横向对比。</p>
      </div>
      <div class="partner-row">
        <div class="partner-item">
          <p class="partner-item__num">12<span class="partner-item__unit"> 家</span></p>
          <p class="partner-item__label">设备厂商合作</p>
          <p class="partner-item__text">提供 V3 平板三档配置的参数与适配说明，支撑测评与选型对照。</p>
        </div>
        <div class="partner-item">
          <p class="partner-item__num">36<span class="partner-item__unit"> 家</span></p>
          <p class="partner-item__label">区域服务商</p>
          <p class="partner-item__text">承接本地资料交付与设备体验，把区域查询的结果落到人。</p>
        </div>
        <div class="partner-item">
          <p class="partner-item__num">8<span class="partner-item__unit"> 家</span></p>
          <p class="partner-item__label">测评内容机构</p>
          <p class="partner-item__text">参与屏幕显示、续航、接口扩展等维度的比对与记录。</p>
        </div>
      </div>
      <div class="about-partner__body prose">
        <p>每年年初，我们会把上一年的区域覆盖变化与工具使用情况汇总成一份《区域代理服务观察》，发给订阅用户参考。这份观察与栏目更新保持同样的节奏：栏目内容每周二、周四更新，每月发布一次月度观察，订阅栏目保留完整批次记录，最近一批停在 5 月第 2 周。</p>
        <p>长期服务靠的是这些日常动作：区域变化有人跟进，测评到期有人重做，客户发来的问题有人按序回拨。想看最新的内容节奏，可以直接翻更新记录；想先确认自己的城市，用区域覆盖查询更快。</p>
      </div>
    </div>
  </section>

  <section class="about-cta">
    <div class="container about-cta__grid">
      <div>
        <h2 class="about-cta__title">下一步：查区域、看测评，或者直接找顾问</h2>
        <p class="about-cta__text">想确认某个城市有没有人接，先用区域覆盖查询；要比较 V3 平板的配置表现，测评栏目按五项维度展开；需要人工对接，邮件里留下联系方式，客服会按序回拨。</p>
      </div>
      <div class="about-cta__links">
        <a class="btn btn--primary" href="/tools/">打开工具中心</a>
        <a class="btn btn--ghost" href="/insights/">看更新记录</a>
        <a class="btn btn--ghost" href="/answers/">常见问题</a>
        <a class="btn btn--ghost" href="/contact-us/">联系我们</a>
      </div>
    </div>
  </section>
</main>

.page-about {
  --about-hair: rgba(17, 24, 32, .08);
  --about-invert-soft: rgba(246, 242, 233, .78);
  background: var(--paper-100);
  color: var(--body-text);
}

.page-about .about-crumb {
  padding-top: 18px;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  padding: clamp(22px, 4vw, 44px) 0 clamp(30px, 5vw, 62px);
  border-bottom: 1px solid var(--line);
  background-image:
    linear-gradient(180deg, rgba(7, 28, 46, .055), rgba(7, 28, 46, 0) 68%),
    repeating-linear-gradient(90deg, var(--about-hair) 0 1px, transparent 1px 72px);
}

.page-about .about-hero__grid {
  display: grid;
  gap: clamp(22px, 3vw, 36px);
}

.page-about .about-hero .display-title {
  margin: 10px 0 0;
  font-size: clamp(32px, 6vw, 58px);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--deep-900);
}

.page-about .about-hero__lead .lede {
  margin-top: 16px;
  max-width: 34em;
}

.page-about .about-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.page-about .ledger {
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .66);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 16px 16px 14px;
}

.page-about .ledger__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--stone-500);
}

.page-about .ledger__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
}

.page-about .ledger__value {
  font-family: var(--font-mono);
  font-size: clamp(21px, 3vw, 28px);
  font-weight: 600;
  line-height: 1;
  color: var(--deep-900);
}

.page-about .ledger__value small {
  font-size: 11px;
  font-weight: 400;
  color: var(--stone-500);
}

.page-about .ledger__label {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--stone-500);
  text-align: right;
}

.page-about .ledger__jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--amber-600);
  text-decoration: none;
  border-bottom: 1px solid var(--amber-400);
  padding-bottom: 2px;
}

.page-about .ledger__jump:hover,
.page-about .ledger__jump:focus-visible {
  color: var(--deep-900);
  border-bottom-color: var(--deep-900);
}

/* ---------- 章节骨架 ---------- */
.page-about .about-sec {
  padding: clamp(36px, 5.5vw, 76px) 0;
  border-bottom: 1px solid var(--line);
}

.page-about .about-sec:last-of-type {
  border-bottom: 0;
}

.page-about .about-sec .eyebrow {
  display: block;
  margin: 0 0 10px;
}

.page-about .about-sec .section-title {
  margin: 0 0 18px;
  max-width: 22ch;
  color: var(--deep-900);
}

.page-about .about-sec__body {
  min-width: 0;
}

.page-about .about-sec__note {
  background: var(--paper-0);
  border: 1px solid var(--line);
  border-top: 3px solid var(--amber-400);
  padding: 18px 16px 20px;
}

.page-about .note-title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--stone-500);
}

.page-about .note-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-about .note-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--body-text);
}

.page-about .note-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--amber-600);
  padding-top: 3px;
}

.page-about .note-list b {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--deep-900);
}

/* ---------- 图片 ---------- */
.page-about .about-figure {
  margin: 26px 0 0;
}

.page-about .about-figure--flush {
  margin-top: 0;
}

.page-about .about-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--paper-200);
}

.page-about .about-figure figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  line-height: 1.6;
  color: var(--stone-500);
}

.page-about .about-sec__media {
  min-width: 0;
}

/* ---------- 时间轴 ---------- */
.page-about .about-history__head {
  max-width: 62ch;
}

.page-about .about-history__lede {
  margin-top: 12px;
}

.page-about .tl {
  list-style: none;
  position: relative;
  margin: clamp(26px, 3vw, 38px) 0 0;
  padding: 0 0 0 26px;
  max-width: 880px;
}

.page-about .tl::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--amber-400), var(--deep-700));
}

.page-about .tl-item {
  position: relative;
  padding-bottom: 26px;
}

.page-about .tl-item:last-child {
  padding-bottom: 0;
}

.page-about .tl-item::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 4px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--paper-100);
  border: 2px solid var(--amber-400);
}

.page-about .tl-year {
  display: block;
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--deep-900);
}

.page-about .tl-name {
  display: block;
  margin-top: 2px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--deep-700);
}

.page-about .tl-item p {
  margin: 6px 0 0;
  max-width: 54ch;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--body-text);
}

/* ---------- 区域筛选 ---------- */
.page-about .regions {
  margin-top: 22px;
}

.page-about .region-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-about .region-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-about .region-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  background: var(--paper-0);
  color: var(--deep-700);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.page-about .region-chip:hover {
  border-color: var(--amber-400);
  color: var(--amber-600);
}

.page-about .region-chip:has(input:checked) {
  background: var(--deep-900);
  border-color: var(--deep-900);
  color: var(--paper-100);
}

.page-about .region-chip:has(input:focus-visible) {
  outline: 2px solid var(--amber-400);
  outline-offset: 2px;
}

.page-about .region-grid {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

.page-about .region-card {
  background: var(--paper-0);
  border: 1px solid var(--line);
  border-left: 3px solid var(--celadon-500);
  padding: 13px 14px;
  transition: opacity .2s ease;
}

.page-about .region-card__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--deep-900);
}

.page-about .region-card__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--celadon-500);
}

.page-about .region-card__text {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.62;
  color: var(--stone-500);
}

.page-about .regions:has(#r-ne:checked) .region-card:not(.region-card--ne),
.page-about .regions:has(#r-nb:checked) .region-card:not(.region-card--nb),
.page-about .regions:has(#r-hd:checked) .region-card:not(.region-card--hd),
.page-about .regions:has(#r-hn:checked) .region-card:not(.region-card--hn),
.page-about .regions:has(#r-sw:checked) .region-card:not(.region-card--sw),
.page-about .regions:has(#r-xb:checked) .region-card:not(.region-card--xb) {
  opacity: .34;
}

.page-about .legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 20px 0 0;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px dashed var(--line-strong);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--stone-500);
}

.page-about .legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-about .legend svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

/* ---------- 团队账本 ---------- */
.page-about .team-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 22px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-about .team-ledger__cell {
  background: var(--paper-0);
  padding: 14px 12px;
}

.page-about .team-ledger__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--deep-900);
}

.page-about .team-ledger__unit {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--stone-500);
}

.page-about .team-ledger__label {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--stone-500);
}

.page-about .about-foot-note {
  margin: 18px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--deep-500);
  font-size: 13px;
  line-height: 1.72;
  color: var(--stone-500);
}

/* ---------- 回访 ---------- */
.page-about .about-survey__lede {
  margin-top: 0;
  margin-bottom: 4px;
  max-width: 40em;
}

.page-about .survey-rank {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-about .survey-rank li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
}

.page-about .survey-rank__num {
  display: grid;
  place-items: center;
  height: 26px;
  border: 1px solid var(--amber-400);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--amber-600);
}

.page-about .survey-rank h3 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--deep-900);
}

.page-about .survey-rank p {
  margin: 5px 0 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--body-text);
}

.page-about .survey-quote {
  margin: 0 0 10px;
  padding: 13px 15px;
  background: var(--paper-100);
  border-left: 3px solid var(--celadon-500);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--deep-900);
}

.page-about .survey-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--stone-500);
}

.page-about .survey-stats {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
  display: grid;
  gap: 9px;
}

.page-about .survey-stats div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
}

.page-about .survey-stats dt {
  color: var(--stone-500);
}

.page-about .survey-stats dd {
  margin: 0;
  font-family: var(--font-mono);
  color: var(--deep-900);
}

.page-about .survey-link {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--amber-600);
  text-decoration: none;
  border-bottom: 1px solid var(--amber-400);
  padding-bottom: 2px;
}

.page-about .survey-link:hover,
.page-about .survey-link:focus-visible {
  color: var(--deep-900);
  border-bottom-color: var(--deep-900);
}

/* ---------- 合作生态 ---------- */
.page-about .about-partner__head {
  max-width: 62ch;
}

.page-about .about-partner__head .lede {
  margin-top: 12px;
}

.page-about .partner-row {
  display: grid;
  gap: 16px;
  margin-top: 26px;
}

.page-about .partner-item {
  border-top: 2px solid var(--deep-700);
  padding-top: 12px;
}

.page-about .partner-item__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--deep-900);
}

.page-about .partner-item__unit {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--stone-500);
}

.page-about .partner-item__label {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--deep-700);
}

.page-about .partner-item__text {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.62;
  color: var(--stone-500);
}

.page-about .about-partner__body {
  margin-top: 26px;
  max-width: 72ch;
}

/* ---------- 收束 ---------- */
.page-about .about-cta {
  background: var(--deep-900);
  color: var(--paper-100);
  padding: clamp(32px, 5vw, 60px) 0;
}

.page-about .about-cta__grid {
  display: grid;
  gap: 24px;
}

.page-about .about-cta__title {
  margin: 0;
  font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.25;
  color: var(--paper-100);
}

.page-about .about-cta__text {
  margin: 12px 0 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--about-invert-soft);
}

.page-about .about-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: start;
}

.page-about .about-cta .btn--ghost {
  color: var(--paper-100);
  border-color: rgba(246, 242, 233, .38);
}

.page-about .about-cta .btn--ghost:hover,
.page-about .about-cta .btn--ghost:focus-visible {
  background: rgba(246, 242, 233, .1);
  border-color: var(--amber-400);
}

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-about .team-ledger {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-about .partner-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (min-width: 860px) {
  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-about .about-cta__grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: center;
  }
}

@media (min-width: 900px) {
  .page-about .about-sec__note {
    position: sticky;
    top: 96px;
    align-self: start;
  }

  .page-about .about-sec .section-title {
    max-width: 26ch;
  }

  .page-about .tl {
    padding-left: 30px;
  }

  .page-about .tl-item::before {
    left: -30px;
  }

  .page-about .tl-year {
    font-size: 23px;
  }
}