.page-home {
  --home-rail: 108px;
  --home-card: rgba(18, 51, 43, 0.74);
  --home-soft: rgba(221, 229, 223, 0.16);
  background: var(--white);
  color: var(--graphite);
}

.page-home [id] {
  scroll-margin-top: 112px;
}

.page-home .hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--ink);
  color: var(--white);
}

.page-home .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(47, 230, 200, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 230, 200, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent 78%);
}

.page-home .hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-home .hero__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  opacity: 0.28;
}

.page-home .hero__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(11, 31, 26, 0.92) 42%, rgba(11, 31, 26, 0.42) 72%, var(--ink) 100%),
    linear-gradient(0deg, var(--ink) 0%, transparent 42%);
}

.page-home .hero__shell {
  position: relative;
  z-index: 2;
  padding-block: 26px clamp(56px, 9vw, 104px);
}

.page-home .hero__breadcrumb {
  margin-bottom: 30px;
}

.page-home .hero__breadcrumb .breadcrumb__link,
.page-home .hero__breadcrumb .breadcrumb__current,
.page-home .hero__breadcrumb .breadcrumb__item {
  color: var(--silver);
}

.page-home .hero__breadcrumb .breadcrumb__current {
  color: var(--white);
}

.page-home .hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.page-home .hero__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.page-home .hero__rail .eyebrow {
  flex-basis: 100%;
  color: var(--cyan);
}

.page-home .hero__rail-link {
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 180ms var(--ease);
}

.page-home .hero__rail-link:hover,
.page-home .hero__rail-link:focus-visible {
  color: var(--orange);
}

.page-home .hero__status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 0 auto;
  color: var(--mist);
  font-size: 0.72rem;
}

.page-home .hero__copy {
  min-width: 0;
}

.page-home .hero__copy > .eyebrow {
  color: var(--amber);
}

.page-home .hero__title {
  max-width: 12ch;
  margin: 14px 0 24px;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 13.2vw, 9.4rem);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.page-home .hero__title span {
  display: block;
}

.page-home .hero__title-accent {
  color: var(--orange);
}

.page-home .hero__lead {
  max-width: 620px;
  margin: 0;
  color: var(--mist);
  font-size: clamp(1rem, 1.7vw, 1.12rem);
  line-height: 1.75;
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-home .hero__stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: clamp(36px, 6vw, 72px);
}

.page-home .hero__stat {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--home-card);
  backdrop-filter: blur(8px);
}

.page-home .hero__stat-label {
  margin: 0 0 8px;
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-home .hero__stat-value {
  margin: 0 0 6px;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 2.4vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-home .hero__stat-note {
  margin: 0;
  color: var(--silver);
  font-size: 0.82rem;
  line-height: 1.6;
}

.page-home .section {
  padding-block: clamp(56px, 9vw, 112px);
}

.page-home .section-head {
  margin-bottom: clamp(28px, 4vw, 48px);
}

.page-home .section-head .eyebrow {
  color: var(--orange);
}

.page-home .section-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: end;
}

.page-home .section-head h2,
.page-home .services__head h2,
.page-home .mobile-brief h2,
.page-home .trust__head h2,
.page-home .cta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.6vw, 4.2rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.page-home .section-head__grid > p {
  max-width: 60ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
}

.page-home .rounds {
  background: var(--white);
}

.page-home .rounds__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.page-home .rounds__panel {
  min-width: 0;
  padding: clamp(16px, 2.6vw, 26px);
  border: 1px solid rgba(51, 68, 63, 0.16);
  border-radius: var(--radius-lg);
  background: var(--mist);
}

.page-home .rounds__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.page-home .rounds__toolbar .tag {
  border: 1px solid rgba(51, 68, 63, 0.2);
  background: transparent;
  color: var(--graphite);
  cursor: pointer;
}

.page-home .rounds__toolbar .tag[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.page-home .rounds__items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.page-home .rounds__item {
  min-width: 0;
  padding: 18px;
  border-radius: var(--radius-md);
  background: var(--white);
}

.page-home .rounds__item-kicker {
  margin: 0 0 10px;
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.page-home .rounds__item h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.page-home .rounds__item p:last-child {
  margin: 0;
  color: var(--graphite);
  font-size: 0.9rem;
  line-height: 1.7;
}

.page-home .rounds__media {
  margin-top: 14px;
}

.page-home .rounds__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .rounds__side {
  padding: 4px 4px 0;
}

.page-home .rounds__side .eyebrow {
  color: var(--ink-2);
}

.page-home .rounds__timeline {
  display: grid;
  gap: 0;
  margin: 14px 0 20px;
  padding: 0;
  list-style: none;
  border-left: 1px solid rgba(51, 68, 63, 0.24);
}

.page-home .rounds__timeline li {
  position: relative;
  padding: 0 0 18px 18px;
  color: var(--graphite);
  font-size: 0.9rem;
  line-height: 1.6;
}

.page-home .rounds__timeline li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
}

.page-home .rounds__timeline span {
  display: block;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}

.page-home .text-link {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--orange);
  padding-bottom: 2px;
}

.page-home .text-link:hover,
.page-home .text-link:focus-visible {
  color: var(--orange);
}

.page-home .services {
  background: var(--ink-2);
  color: var(--white);
}

.page-home .services__head {
  max-width: 880px;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page-home .services__head .eyebrow {
  color: var(--cyan);
}

.page-home .services__head p:last-child {
  max-width: 66ch;
  margin: 18px 0 0;
  color: var(--mist);
  line-height: 1.8;
}

.page-home .services__media {
  overflow: hidden;
  margin-bottom: 12px;
  border-radius: var(--radius-lg);
  background: var(--ink);
}

.page-home .services__media img {
  display: block;
  width: 100%;
  height: clamp(180px, 30vw, 360px);
  object-fit: cover;
  opacity: 0.9;
}

.page-home .services__list {
  border-top: 1px solid var(--line);
}

.page-home .service {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.page-home .service__index {
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding-top: 4px;
}

.page-home .service__body h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.page-home .service__body p {
  max-width: 72ch;
  margin: 0;
  color: var(--mist);
  font-size: 0.92rem;
  line-height: 1.75;
}

.page-home .service__meta {
  grid-column: 2;
  margin: 0;
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.6;
}

.page-home .services__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 26px;
}

.page-home .services__foot p {
  margin: 0;
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.7;
}

.page-home .services__foot .text-link {
  color: var(--white);
}

.page-home .mobile-brief {
  background: var(--white);
}

.page-home .mobile-brief__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  align-items: center;
}

.page-home .mobile-brief__copy {
  min-width: 0;
}

.page-home .mobile-brief .eyebrow {
  color: var(--orange);
}

.page-home .mobile-brief h2 {
  margin-top: 10px;
  color: var(--ink);
}

.page-home .mobile-brief__copy > p:not(.eyebrow) {
  margin: 18px 0 0;
  max-width: 62ch;
  line-height: 1.8;
}

.page-home .mobile-brief__list {
  display: grid;
  gap: 10px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

.page-home .mobile-brief__list li {
  position: relative;
  padding-left: 20px;
  color: var(--graphite);
  font-size: 0.92rem;
  line-height: 1.7;
}

.page-home .mobile-brief__list li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--cyan);
}

.page-home .tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.page-home .tag-row .tag {
  border: 1px solid rgba(51, 68, 63, 0.18);
  color: var(--ink-2);
  background: var(--mist);
}

.page-home .mobile-brief__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .trust {
  background: var(--mist);
}

.page-home .trust__head {
  max-width: 860px;
  margin-bottom: 30px;
}

.page-home .trust__head .eyebrow {
  color: var(--ink-2);
}

.page-home .trust__head h2 {
  margin-top: 10px;
  color: var(--ink);
}

.page-home .trust__head p:last-child {
  margin: 18px 0 0;
  max-width: 68ch;
  line-height: 1.8;
}

.page-home .trust__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: rgba(51, 68, 63, 0.18);
}

.page-home .trust__stat {
  min-width: 0;
  padding: 20px 18px;
  background: var(--white);
}

.page-home .trust__num {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 4.8rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.05em;
}

.page-home .trust__label {
  margin: 0;
  color: var(--graphite);
  font-size: 0.82rem;
  line-height: 1.6;
}

.page-home .trust__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(51, 68, 63, 0.2);
}

.page-home .trust__certs .eyebrow,
.page-home .trust__response .eyebrow {
  color: var(--ink-2);
}

.page-home .trust__certs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.page-home .trust__certs li {
  padding: 8px 12px;
  border: 1px solid rgba(51, 68, 63, 0.18);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--graphite);
  font-size: 0.78rem;
  line-height: 1.4;
}

.page-home .trust__response p:not(.eyebrow) {
  max-width: 64ch;
  margin: 12px 0 16px;
  line-height: 1.8;
}

.page-home .cta {
  position: relative;
  overflow: clip;
  background: var(--ink);
  color: var(--white);
}

.page-home .cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 107, 44, 0.24), transparent 34%),
    radial-gradient(circle at 92% 100%, rgba(47, 230, 200, 0.16), transparent 40%);
}

.page-home .cta__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: end;
}

.page-home .cta .eyebrow {
  color: var(--orange);
}

.page-home .cta h2 {
  max-width: 15ch;
  margin-top: 12px;
}

.page-home .cta__grid > div:first-child > p:last-child {
  max-width: 58ch;
  margin: 18px 0 0;
  color: var(--mist);
  line-height: 1.8;
}

.page-home .cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.page-home .cta__mail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex-basis: 100%;
  margin: 14px 0 0;
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.page-home .cta__mail strong {
  color: var(--white);
  font-weight: 500;
  word-break: break-all;
}

.page-home .cta__mail .copy-btn {
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.76rem;
  cursor: pointer;
}

.page-home .cta__mail .copy-btn:hover,
.page-home .cta__mail .copy-btn:focus-visible {
  border-color: var(--orange);
  color: var(--orange);
}

@media (min-width: 640px) {
  .page-home .hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .section-head__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
    gap: 28px;
  }

  .page-home .rounds__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .trust__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .services__foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 900px) {
  .page-home .hero__grid {
    grid-template-columns: var(--home-rail) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
  }

  .page-home .hero__rail {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0 0;
    border-bottom: 0;
    border-left: 1px solid var(--line);
    padding-left: 18px;
  }

  .page-home .hero__rail .eyebrow {
    flex-basis: auto;
    margin-bottom: 8px;
  }

  .page-home .hero__status {
    margin: 18px 0 0;
  }

  .page-home .hero__title {
    max-width: 10.5ch;
  }

  .page-home .rounds__layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(240px, 0.58fr);
    gap: clamp(24px, 4vw, 56px);
  }

  .page-home .rounds__side {
    padding-top: 8px;
  }

  .page-home .services__head {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 28px;
    align-items: end;
    max-width: none;
  }

  .page-home .services__head .eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .page-home .services__head h2 {
    margin: 0;
  }

  .page-home .services__head p:last-child {
    margin: 0;
  }

  .page-home .service {
    grid-template-columns: 56px minmax(0, 1.3fr) minmax(180px, 0.7fr);
    gap: 20px;
    align-items: start;
    padding: 24px 0;
  }

  .page-home .service__meta {
    grid-column: 3;
    padding-top: 6px;
    text-align: right;
  }

  .page-home .mobile-brief__grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
    gap: clamp(32px, 6vw, 80px);
  }

  .page-home .trust__bottom {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 48px;
  }

  .page-home .cta__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    gap: 40px;
  }
}

@media (min-width: 1200px) {
  .page-home .hero__copy > .eyebrow {
    letter-spacing: 0.08em;
  }

  .page-home .hero__lead {
    margin-left: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero__rail-link,
  .page-home .text-link,
  .page-home .cta__mail .copy-btn {
    transition: none;
  }
}
<<<END>>>
I'll output the required markers only.
<main id="main-content" class="page-home">
  <section class="hero" aria-labelledby="home-title">
    <div class="hero__backdrop" aria-hidden="true">
      <img src="{zhanqunpic:h:1080w:1920}" width="1920" height="1080" alt="城市球场夜间灯光、看台与远处楼宇的低角度广角画面">
    </div>
    <div class="shell hero__shell">
      <nav class="breadcrumb hero__breadcrumb" aria-label="面包屑">
        <ol class="breadcrumb__list">
          <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">首页</a></li>
          <li class="breadcrumb__item"><span class="breadcrumb__current">城市赛场安装</span></li>
        </ol>
      </nav>

      <div class="hero__grid">
        <aside class="hero__rail" aria-label="页面章节索引">
          <span class="eyebrow">坐标 / 上海</span>
          <a href="#rounds" class="hero__rail-link" data-section-link>01 轮次</a>
          <a href="#services" class="hero__rail-link" data-section-link>02 安装</a>
          <a href="#mobile" class="hero__rail-link" data-section-link>03 战报</a>
          <a href="#trust" class="hero__rail-link" data-section-link>04 现场</a>
          <p class="hero__status"><span class="status-dot"></span>本季轮次已更新</p>
        </aside>

        <div class="hero__copy">
          <p class="eyebrow">乐思体育安装 · 城市赛场旁的安装坐标</p>
          <h1 id="home-title" class="hero__title">
            <span>城市赛场旁，</span>
            <span class="hero__title-accent">把每一块屏</span>
            <span>装到位</span>
          </h1>
          <p class="hero__lead">赛事大屏、场边设备与数据指挥屏，从勘测到上屏由同一支现场团队跟进。贵馆的比赛日节奏，我们从安装阶段就按分钟对齐。</p>
          <div class="hero__actions">
            <a class="btn btn--primary" href="/reach-us/">预约安装评估</a>
            <a class="btn btn--ghost" href="/projects/">查看项目与安装</a>
          </div>
        </div>
      </div>

      <div class="hero__stats" aria-label="本季现场快照">
        <article class="hero__stat">
          <p class="hero__stat-label">本季轮次</p>
          <p class="hero__stat-value">按比赛日更新</p>
          <p class="hero__stat-note">结束后 2 小时内完成上屏校验</p>
        </article>
        <article class="hero__stat">
          <p class="hero__stat-label">覆盖场馆</p>
          <p class="hero__stat-value">46 个</p>
          <p class="hero__stat-note">分布长三角 12 座城市</p>
        </article>
        <article class="hero__stat">
          <p class="hero__stat-label">现场响应</p>
          <p class="hero__stat-value">4 小时到场</p>
          <p class="hero__stat-note">长三角范围，其他地区 24 小时远程支持</p>
        </article>
      </div>
    </div>
  </section>

  <section id="rounds" class="section rounds" data-section aria-labelledby="rounds-title">
    <div class="shell">
      <div class="section-head">
        <p class="eyebrow">01 / 轮次控制台</p>
        <div class="section-head__grid">
          <h2 id="rounds-title">每个比赛日结束后，轮次卡先更新</h2>
          <p>乐思体育赛事大屏轮次安排按比赛日推进，覆盖合作场馆的射门统计与近期战绩。比赛日结束后 2 小时内完成上屏校验，第二天通勤路上就能看到更新后的轮次卡。</p>
        </div>
      </div>

      <div class="rounds__layout">
        <div class="rounds__panel">
          <div class="rounds__toolbar" data-filter-group aria-label="轮次视图">
            <button type="button" class="tag tag--hot" data-filter aria-pressed="true">轮次表</button>
            <button type="button" class="tag" data-filter aria-pressed="false">射门统计</button>
            <button type="button" class="tag" data-filter aria-pressed="false">近期战绩</button>
          </div>

          <div class="rounds__items">
            <article class="rounds__item" data-filter-item>
              <p class="rounds__item-kicker">赛前会议直接投屏</p>
              <h3>对阵与开赛时段</h3>
              <p>轮次表把对阵顺序、开赛时段与场馆日历放在同一视图，教练组和赛事执行方对着同一块屏确认安排。</p>
            </article>
            <article class="rounds__item" data-filter-item>
              <p class="rounds__item-kicker">随轮次同步</p>
              <h3>射门统计</h3>
              <p>射门次数、射正率与禁区触球分布按比赛日归入轮次卡，复盘时不用再翻找多份表格。</p>
            </article>
            <article class="rounds__item" data-filter-item>
              <p class="rounds__item-kicker">判断对手状态</p>
              <h3>近期战绩</h3>
              <p>主客场走势与最近交锋结果并排呈现，赛前准备会上能更快看清对手近况。</p>
            </article>
          </div>

          <div class="media-frame media-frame--wide rounds__media">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="体育场大屏显示轮次表与比分数据的特写，屏幕像素清晰可见" loading="lazy" decoding="async">
            <span class="media-frame__caption">赛事大屏 · 轮次卡与统计同步上屏</span>
          </div>
        </div>

        <aside class="rounds__side">
          <p class="eyebrow">上屏节奏</p>
          <ol class="rounds__timeline">
            <li><span>T+0</span>比赛日结束</li>
            <li><span>T+2h</span>轮次卡校验完成</li>
            <li><span>次日</span>场馆屏与移动端同步</li>
          </ol>
          <a href="/blog/" class="text-link">看赛场笔记里的轮次观察 →</a>
        </aside>
      </div>
    </div>
  </section>

  <section id="services" class="section services" data-section aria-labelledby="services-title">
    <div class="shell">
      <header class="services__head">
        <p class="eyebrow">02 / 安装现场</p>
        <h2 id="services-title">四类现场能力，按场馆条件组合</h2>
        <p>职业与半职业球队主场、训练基地、赛事执行临时场地和青训基地，对屏体、线缆和信号的要求各不相同。我们把安装、校准与巡检放在同一套现场流程里。</p>
      </header>

      <div class="services__media">
        <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="安装人员手套、工具与屏体背架的低角度细节画面" loading="lazy" decoding="async">
      </div>

      <div class="services__list">
        <article class="service">
          <span class="service__index">01</span>
          <div class="service__body">
            <h3>赛事大屏安装</h3>
            <p>LED 赛事大屏的勘测、结构复核、屏体固定与色温校准，适配看台主屏与场边屏。大屏模组色温按场馆照明条件分三档执行。</p>
          </div>
          <p class="service__meta">适用：职业与半职业球队主场</p>
        </article>
        <article class="service">
          <span class="service__index">02</span>
          <div class="service__body">
            <h3>场边设备与线缆</h3>
            <p>场边广告屏、记分屏与线缆桥架的安装整理，比赛日通道保持畅通。线缆、接地与屏体固定三项独立记录，现场执行双人复核。</p>
          </div>
          <p class="service__meta">适用：场边通道与临时赛事场地</p>
        </article>
        <article class="service">
          <span class="service__index">03</span>
          <div class="service__body">
            <h3>数据指挥屏</h3>
            <p>数据指挥屏与看台信息屏的内容编排、信号联调，让轮次和统计按时上屏。屏体厂商、结构件供应商、赛事执行方与场馆物业四方协同。</p>
          </div>
          <p class="service__meta">适用：场馆运营与赛事指挥区</p>
        </article>
        <article class="service">
          <span class="service__index">04</span>
          <div class="service__body">
            <h3>巡检与旧屏改造</h3>
            <p>旧屏体改造、线缆桥架整理与季度巡检，赛季中每月一次例行检查。2023 年完成 14 个场馆的旧屏体改造与线缆桥架整理。</p>
          </div>
          <p class="service__meta">适用：训练基地与使用中的老场馆</p>
        </article>
      </div>

      <div class="services__foot">
        <p>标准安装项目从勘测到上屏平均 18 个工作日，复杂场馆改造约 30 个工作日。</p>
        <a href="/projects/" class="text-link">看交付流程与项目类型 →</a>
      </div>
    </div>
  </section>

  <section id="mobile" class="section mobile-brief" data-section aria-labelledby="mobile-title">
    <div class="shell mobile-brief__grid">
      <div class="mobile-brief__copy">
        <p class="eyebrow">03 / 移动端战报</p>
        <h2 id="mobile-title">通勤路上，把战报看完</h2>
        <p>简体版页面按移动端优先重排，首屏在 4G 环境下加载控制在 1.5 秒内。关注列表按球队归并，最多归并 20 支球队，赛程表、轮次卡和数据说明都收在专家专栏的关注列表里。</p>
        <ul class="mobile-brief__list">
          <li>离线缓存最近 3 个比赛日的轮次卡，进地铁前打开就能看。</li>
          <li>关注列表支持导出为 CSV，交给教练组或赛事执行方继续用。</li>
          <li>资料提供 PDF 与 CSV 两种格式，赛程表另提供 ICS 日历。</li>
        </ul>
        <div class="tag-row" aria-label="资料类型">
          <span class="tag">赛程表</span>
          <span class="tag">轮次卡</span>
          <span class="tag">数据说明</span>
        </div>
        <a class="btn btn--ghost" href="/blog/">进入赛场笔记</a>
      </div>

      <div class="media-frame media-frame--tall mobile-brief__media">
        <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="手持移动设备查看赛事轮次页面，背景是城市通勤光影" loading="lazy" decoding="async">
        <span class="media-frame__caption">移动端轮次卡 · 通勤阅读</span>
      </div>
    </div>
  </section>

  <section id="trust" class="section trust" data-section aria-labelledby="trust-title">
    <div class="shell">
      <div class="trust__head">
        <p class="eyebrow">04 / 现场底账</p>
        <h2 id="trust-title">从 2016 年到现在，经验留在每个场馆里</h2>
        <p>自 2016 年起服务城市赛场，累计参与 9 个赛季的场馆显示与安装项目。2022 年起建立城市赛场安装档案库，按场馆归档勘测图、校准记录与巡检报告。</p>
      </div>

      <div class="trust__stats">
        <article class="trust__stat">
          <p class="trust__num">9</p>
          <p class="trust__label">个赛季的场馆显示与安装项目</p>
        </article>
        <article class="trust__stat">
          <p class="trust__num">46</p>
          <p class="trust__label">个场馆与训练基地安装项目</p>
        </article>
        <article class="trust__stat">
          <p class="trust__num">38</p>
          <p class="trust__label">名安装工程师，22 人持高空作业与电气安装证书</p>
        </article>
        <article class="trust__stat">
          <p class="trust__num">12</p>
          <p class="trust__label">座长三角城市纳入服务网络</p>
        </article>
      </div>

      <div class="trust__bottom">
        <div class="trust__certs">
          <p class="eyebrow">资质与体系</p>
          <ul>
            <li>建筑机电安装工程专业承包资质</li>
            <li>安全生产许可证</li>
            <li>ISO 9001 质量管理体系</li>
            <li>ISO 45001 职业健康安全管理体系</li>
          </ul>
        </div>
        <div class="trust__response">
          <p class="eyebrow">响应与巡检</p>
          <p>长三角范围内 4 小时到场响应，其他地区 24 小时远程支持。每季度对合作场馆执行一次巡检，赛季中每月一次；每年组织两次安装安全演练与一次显示设备校准培训。</p>
          <a href="/brand/" class="text-link">了解品牌现场与服务方法 →</a>
        </div>
      </div>
    </div>
  </section>

  <section id="start" class="section cta" data-section aria-labelledby="cta-title">
    <div class="shell cta__grid">
      <div>
        <p class="eyebrow">下一步</p>
        <h2 id="cta-title">先把场馆情况说清楚，再谈屏怎么装</h2>
        <p>告诉我们场馆类型、屏体尺寸与比赛日安排，我们会在 1 个工作日内回复评估建议。需要先看资料，也可以直接进知识中心查赛程表与安装答疑。</p>
      </div>
      <div class="cta__actions">
        <a class="btn btn--primary" href="/reach-us/">预约安装评估</a>
        <a class="btn btn--ghost" href="/knowledge/">进知识中心</a>
        <p class="cta__mail">
          <span>邮箱</span>
          <strong>email@city-sports-lesi.com.cn</strong>
          <button type="button" class="copy-btn" data-copy="email@city-sports-lesi.com.cn">复制邮箱</button>
        </p>
      </div>
    </div>
  </section>
</main>

.page-home {
  --home-rail: 108px;
  --home-card: rgba(18, 51, 43, 0.74);
  background: var(--white);
  color: var(--graphite);
}

.page-home [id] {
  scroll-margin-top: 112px;
}

.page-home .hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--ink);
  color: var(--white);
}

.page-home .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(47, 230, 200, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 230, 200, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent 78%);
}

.page-home .hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-home .hero__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  opacity: 0.28;
}

.page-home .hero__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(11, 31, 26, 0.92) 42%, rgba(11, 31, 26, 0.42) 72%, var(--ink) 100%),
    linear-gradient(0deg, var(--ink) 0%, transparent 42%);
}

.page-home .hero__shell {
  position: relative;
  z-index: 2;
  padding-block: 26px clamp(56px, 9vw, 104px);
}

.page-home .hero__breadcrumb {
  margin-bottom: 30px;
}

.page-home .hero__breadcrumb .breadcrumb__link,
.page-home .hero__breadcrumb .breadcrumb__current,
.page-home .hero__breadcrumb .breadcrumb__item {
  color: var(--silver);
}

.page-home .hero__breadcrumb .breadcrumb__current {
  color: var(--white);
}

.page-home .hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.page-home .hero__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.page-home .hero__rail .eyebrow {
  flex-basis: 100%;
  color: var(--cyan);
}

.page-home .hero__rail-link {
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 180ms var(--ease);
}

.page-home .hero__rail-link:hover,
.page-home .hero__rail-link:focus-visible {
  color: var(--orange);
}

.page-home .hero__status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 0 auto;
  color: var(--mist);
  font-size: 0.72rem;
}

.page-home .hero__copy {
  min-width: 0;
}

.page-home .hero__copy > .eyebrow {
  color: var(--amber);
}

.page-home .hero__title {
  max-width: 12ch;
  margin: 14px 0 24px;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 13.2vw, 9.4rem);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.page-home .hero__title span {
  display: block;
}

.page-home .hero__title-accent {
  color: var(--orange);
}

.page-home .hero__lead {
  max-width: 620px;
  margin: 0;
  color: var(--mist);
  font-size: clamp(1rem, 1.7vw, 1.12rem);
  line-height: 1.75;
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-home .hero__stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: clamp(36px, 6vw, 72px);
}

.page-home .hero__stat {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--home-card);
  backdrop-filter: blur(8px);
}

.page-home .hero__stat-label {
  margin: 0 0 8px;
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-home .hero__stat-value {
  margin: 0 0 6px;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 2.4vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-home .hero__stat-note {
  margin: 0;
  color: var(--silver);
  font-size: 0.82rem;
  line-height: 1.6;
}

.page-home .section {
  padding-block: clamp(56px, 9vw, 112px);
}

.page-home .section-head {
  margin-bottom: clamp(28px, 4vw, 48px);
}

.page-home .section-head .eyebrow {
  color: var(--orange);
}

.page-home .section-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: end;
}

.page-home .section-head h2,
.page-home .services__head h2,
.page-home .mobile-brief h2,
.page-home .trust__head h2,
.page-home .cta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.6vw, 4.2rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.page-home .section-head__grid > p {
  max-width: 60ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
}

.page-home .rounds {
  background: var(--white);
}

.page-home .rounds__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.page-home .rounds__panel {
  min-width: 0;
  padding: clamp(16px, 2.6vw, 26px);
  border: 1px solid rgba(51, 68, 63, 0.16);
  border-radius: var(--radius-lg);
  background: var(--mist);
}

.page-home .rounds__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.page-home .rounds__toolbar .tag {
  border: 1px solid rgba(51, 68, 63, 0.2);
  background: transparent;
  color: var(--graphite);
  cursor: pointer;
}

.page-home .rounds__toolbar .tag[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.page-home .rounds__items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.page-home .rounds__item {
  min-width: 0;
  padding: 18px;
  border-radius: var(--radius-md);
  background: var(--white);
}

.page-home .rounds__item-kicker {
  margin: 0 0 10px;
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.page-home .rounds__item h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.page-home .rounds__item p:last-child {
  margin: 0;
  color: var(--graphite);
  font-size: 0.9rem;
  line-height: 1.7;
}

.page-home .rounds__media {
  margin-top: 14px;
}

.page-home .rounds__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .rounds__side {
  padding: 4px 4px 0;
}

.page-home .rounds__side .eyebrow {
  color: var(--ink-2);
}

.page-home .rounds__timeline {
  display: grid;
  gap: 0;
  margin: 14px 0 20px;
  padding: 0;
  list-style: none;
  border-left: 1px solid rgba(51, 68, 63, 0.24);
}

.page-home .rounds__timeline li {
  position: relative;
  padding: 0 0 18px 18px;
  color: var(--graphite);
  font-size: 0.9rem;
  line-height: 1.6;
}

.page-home .rounds__timeline li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
}

.page-home .rounds__timeline span {
  display: block;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}

.page-home .text-link {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--orange);
  padding-bottom: 2px;
}

.page-home .text-link:hover,
.page-home .text-link:focus-visible {
  color: var(--orange);
}

.page-home .services {
  background: var(--ink-2);
  color: var(--white);
}

.page-home .services__head {
  max-width: 880px;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page-home .services__head .eyebrow {
  color: var(--cyan);
}

.page-home .services__head p:last-child {
  max-width: 66ch;
  margin: 18px 0 0;
  color: var(--mist);
  line-height: 1.8;
}

.page-home .services__media {
  overflow: hidden;
  margin-bottom: 12px;
  border-radius: var(--radius-lg);
  background: var(--ink);
}

.page-home .services__media img {
  display: block;
  width: 100%;
  height: clamp(180px, 30vw, 360px);
  object-fit: cover;
  opacity: 0.9;
}

.page-home .services__list {
  border-top: 1px solid var(--line);
}

.page-home .service {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.page-home .service__index {
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding-top: 4px;
}

.page-home .service__body h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.page-home .service__body p {
  max-width: 72ch;
  margin: 0;
  color: var(--mist);
  font-size: 0.92rem;
  line-height: 1.75;
}

.page-home .service__meta {
  grid-column: 2;
  margin: 0;
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.6;
}

.page-home .services__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 26px;
}

.page-home .services__foot p {
  margin: 0;
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.7;
}

.page-home .services__foot .text-link {
  color: var(--white);
}

.page-home .mobile-brief {
  background: var(--white);
}

.page-home .mobile-brief__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  align-items: center;
}

.page-home .mobile-brief__copy {
  min-width: 0;
}

.page-home .mobile-brief .eyebrow {
  color: var(--orange);
}

.page-home .mobile-brief h2 {
  margin-top: 10px;
  color: var(--ink);
}

.page-home .mobile-brief__copy > p:not(.eyebrow) {
  margin: 18px 0 0;
  max-width: 62ch;
  line-height: 1.8;
}

.page-home .mobile-brief__list {
  display: grid;
  gap: 10px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

.page-home .mobile-brief__list li {
  position: relative;
  padding-left: 20px;
  color: var(--graphite);
  font-size: 0.92rem;
  line-height: 1.7;
}

.page-home .mobile-brief__list li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--cyan);
}

.page-home .tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.page-home .tag-row .tag {
  border: 1px solid rgba(51, 68, 63, 0.18);
  color: var(--ink-2);
  background: var(--mist);
}

.page-home .mobile-brief__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .trust {
  background: var(--mist);
}

.page-home .trust__head {
  max-width: 860px;
  margin-bottom: 30px;
}

.page-home .trust__head .eyebrow {
  color: var(--ink-2);
}

.page-home .trust__head h2 {
  margin-top: 10px;
  color: var(--ink);
}

.page-home .trust__head p:last-child {
  margin: 18px 0 0;
  max-width: 68ch;
  line-height: 1.8;
}

.page-home .trust__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: rgba(51, 68, 63, 0.18);
}

.page-home .trust__stat {
  min-width: 0;
  padding: 20px 18px;
  background: var(--white);
}

.page-home .trust__num {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 4.8rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.05em;
}

.page-home .trust__label {
  margin: 0;
  color: var(--graphite);
  font-size: 0.82rem;
  line-height: 1.6;
}

.page-home .trust__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(51, 68, 63, 0.2);
}

.page-home .trust__certs .eyebrow,
.page-home .trust__response .eyebrow {
  color: var(--ink-2);
}

.page-home .trust__certs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.page-home .trust__certs li {
  padding: 8px 12px;
  border: 1px solid rgba(51, 68, 63, 0.18);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--graphite);
  font-size: 0.78rem;
  line-height: 1.4;
}

.page-home .trust__response p:not(.eyebrow) {
  max-width: 64ch;
  margin: 12px 0 16px;
  line-height: 1.8;
}

.page-home .cta {
  position: relative;
  overflow: clip;
  background: var(--ink);
  color: var(--white);
}

.page-home .cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 107, 44, 0.24), transparent 34%),
    radial-gradient(circle at 92% 100%, rgba(47, 230, 200, 0.16), transparent 40%);
}

.page-home .cta__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: end;
}

.page-home .cta .eyebrow {
  color: var(--orange);
}

.page-home .cta h2 {
  max-width: 15ch;
  margin-top: 12px;
}

.page-home .cta__grid > div:first-child > p:last-child {
  max-width: 58ch;
  margin: 18px 0 0;
  color: var(--mist);
  line-height: 1.8;
}

.page-home .cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.page-home .cta__mail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex-basis: 100%;
  margin: 14px 0 0;
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.page-home .cta__mail strong {
  color: var(--white);
  font-weight: 500;
  word-break: break-all;
}

.page-home .cta__mail .copy-btn {
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.76rem;
  cursor: pointer;
}

.page-home .cta__mail .copy-btn:hover,
.page-home .cta__mail .copy-btn:focus-visible {
  border-color: var(--orange);
  color: var(--orange);
}

@media (min-width: 640px) {
  .page-home .hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .section-head__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
    gap: 28px;
  }

  .page-home .rounds__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .trust__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .services__foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 900px) {
  .page-home .hero__grid {
    grid-template-columns: var(--home-rail) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
  }

  .page-home .hero__rail {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0 0 18px;
    border-bottom: 0;
    border-left: 1px solid var(--line);
  }

  .page-home .hero__rail .eyebrow {
    flex-basis: auto;
    margin-bottom: 8px;
  }

  .page-home .hero__status {
    margin: 18px 0 0;
  }

  .page-home .hero__title {
    max-width: 10.5ch;
  }

  .page-home .rounds__layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(240px, 0.58fr);
    gap: clamp(24px, 4vw, 56px);
  }

  .page-home .rounds__side {
    padding-top: 8px;
  }

  .page-home .services__head {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 28px;
    align-items: end;
    max-width: none;
  }

  .page-home .services__head .eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .page-home .services__head h2 {
    margin: 0;
  }

  .page-home .services__head p:last-child {
    margin: 0;
  }

  .page-home .service {
    grid-template-columns: 56px minmax(0, 1.3fr) minmax(180px, 0.7fr);
    gap: 20px;
    align-items: start;
    padding: 24px 0;
  }

  .page-home .service__meta {
    grid-column: 3;
    padding-top: 6px;
    text-align: right;
  }

  .page-home .mobile-brief__grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
    gap: clamp(32px, 6vw, 80px);
  }

  .page-home .trust__bottom {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 48px;
  }

  .page-home .cta__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    gap: 40px;
  }
}

@media (min-width: 1200px) {
  .page-home .hero__copy > .eyebrow {
    letter-spacing: 0.08em;
  }

  .page-home .hero__lead {
    margin-left: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero__rail-link,
  .page-home .text-link,
  .page-home .cta__mail .copy-btn {
    transition: none;
  }
}
<<<END>>>