:root{
  --primary: #FF6F47;
  --gray: #B9B9B9;
  --midline: #ffffff;
  --card-w: 413.33px; /* max length/width per your spec */
}

.dual-timeline {
  position: relative;
  padding: 24px 0;
  color: #fff;
}

.timeline-heading{
  margin: 0 0 12px 0;
}

/* Shared horizontal scroller */
.dual-timeline__scroller{
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 48px 0; /* space for content above/below line */
}

/* Midline */
.dual-timeline__midline{
  position: sticky; /* stays centered while scrolling */
  top: 50%;
  transform: translateY(-1px);
  height: 2px;
  width: 100%;
  background: var(--midline);
  z-index: 0;
}

/* Rows */
.timeline-row{
  position: relative;
  display: flex;
  gap: 24px;
  padding: 0 16px;
  z-index: 1; /* above line for content */
}

.timeline-row--top{
  align-items: flex-end; /* content above the line */
  margin-bottom: 56px;   /* room above the line */
}

.timeline-row--bottom{
  align-items: flex-start; /* content below the line */
  bottom: 56px;
  top: -56px;
}

/* Cards / Items */
.timeline-card{
  position: relative;
  flex: 0 0 var(--card-w);
  max-width: var(--card-w);
  scroll-snap-align: start;
    bottom: -12px;
    margin-top: -16px;
}

.timeline-dot.dot-head {
   margin-top: 12px;
}

/* TOP: content above time */
.timeline-card__head{
  color: #272727;
  display: block;
  margin-bottom: 20px; /* space down to the node/time on midline */
}

/* BOTTOM: content below time */
.timeline-card__foot{
  color: #272727;
  display: block;
  margin-top: 20px; /* space up from the node/time on midline */
}

.timeline-card__copy{
  color: #272727;
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}

/* Node on the midline */
.timeline-node{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Dot sits exactly on the midline via translateY */
.timeline-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  transform: translateY(-50%); /* pin it to the midline */
}

/* Time label style (below the dot for top row, above for bottom row handled by flex order) */
.timeline-time{
  /* “Headlines/Highlighted/H6 – Highlighted” style */
  color: var(--primary);
  font-family: "DIN Pro", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-style: italic;
  font-weight: 900;
  line-height: 110%;
  letter-spacing: 0.15px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Color variants */
.timeline-row--primary .timeline-dot{ background: var(--primary); }
.timeline-row--primary .timeline-time{ color: var(--primary); }

.timeline-row--gray .timeline-dot{ background: var(--gray); }
.timeline-row--gray .timeline-time{ color: var(--gray); }

/* Accessibility helper */
.sr-only{
  position:absolute!important;
  height:1px;width:1px;
  overflow:hidden;clip:rect(1px,1px,1px,1px);
  white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* Optional: subtle snap & dragging feel (no custom colors/styles here) */
.dual-timeline__scroller::-webkit-scrollbar{ height: 8px; }

/* scope to your module to avoid side effects */
#hs_cos_wrapper_widget_1756898492595 .dual-timeline{
  margin-left: -20px;
  margin-right: -20px;
}

/* Replace the ID with your module wrapper if needed */
.hs_cos_wrapper > .dual-timeline {
  display: block;
  margin-left: -20px;  /* match your row’s horizontal padding */
  margin-right: -20px; /* match your row’s horizontal padding */
  padding-left: 0;
  padding-right: 0;
}


:root{
  --card-w: 413.33px;      /* your max event width */
  --page-max: 1277.440px;  /* updated design max width */
}

/* Default for older browsers */
.dual-timeline { --pad: 16px; }

/* Modern: min 16px, else (100vw - 1277.440px)/2 */
@supports (margin-left: max(0px)) {
  .dual-timeline {
    --pad: max(16px, calc((100vw - var(--page-max)) / 2));
  }
}

/* Use margin-left (not padding) so scroll start reveals a true left gutter */
.timeline-row--top{
  margin-left: var(--pad) !important;
  padding-left: 0 !important;   /* neutralize any prior padding */
}

.timeline-row--bottom{
  margin-left: calc(var(--pad) + (var(--card-w) / 2));  /* 50% shift + pad */
  padding-left: 0 !important;
}

/* Shift the midline so it aligns with the gutter */
.dual-timeline__midline{
    margin-left: calc((100vw - var(--page-max)) / 2 + 22px);
    width: 1955px;
    margin-top: 45px;
}

.timeline-card__copy{
min-height: 220px;
}

/* Help scroll snapping respect your gutter */
.dual-timeline__scroller{
  scroll-padding-inline-start: var(--pad);
  scroll-padding-left: var(--pad); /* legacy fallback */
}

.timeline-card__head h5, .timeline-card__foot h5 {
height: 69px;
margin: 0px 0px 18px 0;
}

@media (max-width: 1300px){
.dual-timeline__midline{    
margin-left: 30px;
  }
}

@media (max-width: 760px){
.timeline-card {
    max-width: 270px;
  }
.dual-timeline__midline{  
    width: 1327px;
  }
.timeline-row--bottom {
    margin-left: 165px;
  }
.timeline-card__copy {
    min-height: 340px;
}
}