<div class="tl10-wrap">
  <div class="tl10-path" aria-hidden="true"></div>

  <div class="tl10-stone">
    <div class="tl10-text">
      <p class="tl10-phase">Phase 01</p>
      <h3 class="tl10-name">Baseline Assessment</h3>
      <p class="tl10-desc">Comprehensive scope 1, 2, and 3 emissions audit completed across all 14 operational sites. The first honest look at our footprint — and it was confronting.</p>
      <div class="tl10-tags">
        <span class="tl10-tag">Carbon Audit</span>
        <span class="tl10-tag">14 Sites</span>
      </div>
    </div>
    <div class="tl10-center">
      <div class="tl10-gem">◉</div>
      <span class="tl10-year">2020</span>
    </div>
    <div class="tl10-img">🌍</div>
  </div>

  <div class="tl10-stone tl10-flip">
    <div class="tl10-img">⚡</div>
    <div class="tl10-center">
      <div class="tl10-gem">⚡</div>
      <span class="tl10-year">2021</span>
    </div>
    <div class="tl10-text">
      <p class="tl10-phase">Phase 02</p>
      <h3 class="tl10-name">Renewable Transition</h3>
      <p class="tl10-desc">Switched 80% of grid electricity to wind and solar PPAs. On-site solar installed at 6 warehouses. Energy costs fell 22% in year one.</p>
      <div class="tl10-tags">
        <span class="tl10-tag">−42% Scope 2</span>
        <span class="tl10-tag">PPA Contracts</span>
      </div>
    </div>
  </div>

  <div class="tl10-stone">
    <div class="tl10-text">
      <p class="tl10-phase">Phase 03</p>
      <h3 class="tl10-name">Supply Chain Engagement</h3>
      <p class="tl10-desc">Rolled out supplier sustainability scorecard to 340 vendors. 82% have committed to science-based targets. Phased out three high-impact suppliers.</p>
      <div class="tl10-tags">
        <span class="tl10-tag">340 Vendors</span>
        <span class="tl10-tag">SBTi Aligned</span>
      </div>
    </div>
    <div class="tl10-center">
      <div class="tl10-gem">◈</div>
      <span class="tl10-year">2023</span>
    </div>
    <div class="tl10-img">🌱</div>
  </div>

  <div class="tl10-stone tl10-flip tl10-last">
    <div class="tl10-img">🎯</div>
    <div class="tl10-center">
      <div class="tl10-gem">★</div>
      <span class="tl10-year">2025</span>
    </div>
    <div class="tl10-text">
      <p class="tl10-phase">Phase 04</p>
      <h3 class="tl10-name">Net Zero Certified</h3>
      <p class="tl10-desc">Achieved verified net zero status across scopes 1 and 2. Scope 3 on target for 2028. B Corp certification under review. The hardest work is still ahead.</p>
      <div class="tl10-tags">
        <span class="tl10-tag">Net Zero S1+S2</span>
        <span class="tl10-tag">B Corp Pending</span>
        <span class="tl10-tag">2028 Target</span>
      </div>
    </div>
  </div>
</div>

.tl10-wrap {
  --tl10-bg: #f2f4f0;
  --tl10-a:  #1b4332;
  --tl10-ink: #0d1f16;
  background: var(--tl10-bg);
  padding: 2.5rem 1.5rem;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
}
.tl10-path {
  position: absolute;
  left: 50%;
  top: 2.5rem;
  bottom: 2.5rem;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(27,67,50,0.3) 0 8px,
    transparent 8px 16px
  );
  transform: translateX(-50%);
}
.tl10-stone {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: center;
  margin-bottom: 3rem;
  position: relative;
}
.tl10-last { margin-bottom: 0; }
.tl10-flip .tl10-text  { grid-column: 3; }
.tl10-flip .tl10-img   { grid-column: 1; }
.tl10-text { padding: 0 1.5rem; }
.tl10-flip .tl10-text { text-align: left; }
.tl10-stone:not(.tl10-flip) .tl10-text { text-align: right; }
.tl10-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
  grid-column: 2;
}
.tl10-gem {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(27,67,50,0.25);
  box-shadow: 0 4px 16px rgba(27,67,50,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--tl10-a);
  transition: transform 0.3s, box-shadow 0.3s;
}
.tl10-stone:hover .tl10-gem {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(27,67,50,0.2);
}
.tl10-year {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--tl10-a);
}
.tl10-phase {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(27,67,50,0.45);
  margin-bottom: 0.35rem;
}
.tl10-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.25rem;
  color: var(--tl10-ink);
  margin: 0 0 0.4rem;
  line-height: 1.25;
}
.tl10-desc {
  font-size: 13.5px;
  color: rgba(13,31,22,0.55);
  line-height: 1.7;
  margin: 0 0 0.7rem;
}
.tl10-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.tl10-stone:not(.tl10-flip) .tl10-tags { justify-content: flex-end; }
.tl10-tag {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  padding: 0.2rem 0.6rem;
  background: rgba(27,67,50,0.08);
  border-radius: 99px;
  color: var(--tl10-a);
}
.tl10-img {
  aspect-ratio: 5 / 4;
  max-width: 220px;
  border-radius: 12px;
  background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  box-shadow: 0 4px 20px rgba(27,67,50,0.12);
}
@media (max-width: 720px) {
  .tl10-path { left: 28px; }
  .tl10-stone, .tl10-flip {
    grid-template-columns: 56px 1fr;
    gap: 0.75rem;
    text-align: left;
  }
  .tl10-flip .tl10-text,
  .tl10-stone:not(.tl10-flip) .tl10-text { text-align: left; grid-column: 2; padding: 0; }
  .tl10-center { grid-column: 1; align-self: flex-start; }
  .tl10-img { display: none; }
  .tl10-stone:not(.tl10-flip) .tl10-tags { justify-content: flex-start; }
}