.sepal-timeline,
.sepal-timeline * { box-sizing: border-box; }
.sepal-timeline {
  --sepal-green-deep: #0a1e1b;
  --sepal-yellow: #f5c842;
  --sepal-yellow-border: rgba(245,200,66,0.28);
  --sepal-text-muted: rgba(255,255,255,0.42);
  --sepal-display: 'Fraunces', Georgia, serif;
  --sepal-body: 'DM Sans', sans-serif;
  --sepal-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background: var(--sepal-green-deep);
  padding: 100px 88px;
  color: #fff;
  font-family: var(--sepal-body);
}
.sepal-timeline__head { margin-bottom: 88px; }
.sepal-timeline__eyebrow {
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--sepal-yellow);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.sepal-timeline__eyebrow::before { content: ''; width: 32px; height: 1px; background: currentColor; flex: 0 0 auto; }
.sepal-timeline__title {
  font-family: var(--sepal-display);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 200;
  line-height: 1.05;
  color: #fff;
  margin: 0;
}
.sepal-timeline__title em { font-style: italic; color: var(--sepal-yellow); font-weight: 300; }
.sepal-timeline__inner { position: relative; max-width: 1060px; }
.sepal-timeline__line { position: absolute; left: 120px; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, var(--sepal-yellow-border), transparent); }
.sepal-tl-item {
  display: grid;
  gap: 0 40px;
  margin-bottom: 72px;
  position: relative;
  align-items: start;
}
.sepal-tl-item:last-child { margin-bottom: 0; }
.sepal-tl-item--has-img { grid-template-columns: 120px 220px 1fr; }
.sepal-tl-item--no-img { grid-template-columns: 120px 1fr; }
.sepal-tl-item__year {
  font-family: var(--sepal-display);
  font-size: 44px;
  font-weight: 200;
  color: var(--sepal-yellow);
  opacity: .25;
  line-height: 1;
  text-align: right;
  padding-right: 28px;
  padding-top: 8px;
  transition: opacity .3s;
}
.sepal-tl-item:hover .sepal-tl-item__year { opacity: 1; }
.sepal-tl-item__dot {
  position: absolute;
  left: 112px;
  top: 14px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid var(--sepal-yellow-border);
  background: var(--sepal-green-deep);
  transition: border-color .3s, background .3s;
}
.sepal-tl-item:hover .sepal-tl-item__dot { border-color: var(--sepal-yellow); background: var(--sepal-yellow); }
.sepal-tl-item__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/2;
  align-self: start;
  margin-top: 6px;
}
.sepal-tl-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.7) brightness(0.82);
  transition: transform .65s var(--sepal-ease), filter .45s ease;
}
.sepal-tl-item:hover .sepal-tl-item__img img { transform: scale(1.06); filter: saturate(1) brightness(0.95); }
.sepal-tl-item__img::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--sepal-yellow-border);
  pointer-events: none;
  transition: border-color .4s, inset .4s var(--sepal-ease);
}
.sepal-tl-item:hover .sepal-tl-item__img::after { border-color: rgba(245,200,66,.5); inset: 10px; }
.sepal-tl-item__body { padding-top: 8px; }
.sepal-tl-item__title {
  font-family: var(--sepal-display);
  font-size: 26px;
  font-weight: 200;
  color: #fff;
  margin: 0 0 14px;
}
.sepal-tl-item__text { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--sepal-text-muted); margin: 0; }
.sepal-tl-item__tag {
  display: inline-flex;
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sepal-yellow);
  border: 1px solid var(--sepal-yellow-border);
  padding: 4px 14px;
}
@media(max-width:1100px) {
  .sepal-timeline { padding: 80px 40px; }
  .sepal-timeline__line { left: 80px; }
  .sepal-tl-item,
  .sepal-tl-item--has-img,
  .sepal-tl-item--no-img { grid-template-columns: 80px 1fr !important; gap: 0 40px; }
  .sepal-tl-item__dot { left: 72px; }
  .sepal-tl-item__img { display: none; }
}
@media(max-width:640px) {
  .sepal-timeline { padding: 60px 24px; }
  .sepal-timeline__head { margin-bottom: 56px; }
  .sepal-timeline__line { display: none; }
  .sepal-tl-item,
  .sepal-tl-item--has-img,
  .sepal-tl-item--no-img { grid-template-columns: 1fr !important; gap: 8px; margin-bottom: 52px; }
  .sepal-tl-item__year { text-align: left; font-size: 32px; opacity: .5; padding-right: 0; }
  .sepal-tl-item__dot { display: none; }
}