.emt-timeline{
  --emt-primary:#c9a227;
  --emt-text:#171717;
  --emt-muted:#616161;
  --emt-line:#e7e7e7;
  --emt-card:#fff;
  width:100%;
}
.emt-timeline *,.emt-timeline *:before,.emt-timeline *:after{box-sizing:border-box}
.emt-timeline__header{max-width:768px;margin:0 auto;text-align:center}
.emt-timeline__eyebrow-wrap{display:flex;justify-content:center}
.emt-timeline__eyebrow{display:flex;align-items:center;gap:12px;margin:0;color:var(--emt-primary);font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.16em;text-transform:uppercase}
.emt-timeline__eyebrow-line{width:32px;height:1px;background:currentColor;display:inline-block;flex:0 0 auto}
.emt-timeline__heading{margin:24px 0 0;color:var(--emt-text);font-size:50px;font-weight:600;line-height:1.15}
.emt-timeline__heading-highlight{color:var(--emt-primary)}
.emt-timeline__body{position:relative;max-width:1152px;margin:80px auto 0}
.emt-timeline__line{position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);background:var(--emt-line)}
.emt-timeline__items{position:relative;z-index:1;display:flex;flex-direction:column;gap:56px}
.emt-timeline__item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:center;min-height:128px}
.emt-timeline__card{position:relative;background:var(--emt-card);padding:28px;border-radius:6px;box-shadow:0 4px 18px rgba(15,15,15,.12)}
.emt-timeline__item--left .emt-timeline__card{grid-column:1;grid-row:1;margin-right:16px;border-right:3px solid var(--emt-primary)}
.emt-timeline__item--right .emt-timeline__card{grid-column:3;grid-row:1;margin-left:16px;border-left:3px solid var(--emt-primary)}
.emt-timeline__arrow{position:absolute;top:50%;width:16px;height:16px;background:var(--emt-card);transform:translateY(-50%) rotate(45deg)}
.emt-timeline__item--left .emt-timeline__arrow{right:-8px;border-top:3px solid var(--emt-primary);border-right:3px solid var(--emt-primary)}
.emt-timeline__item--right .emt-timeline__arrow{left:-8px;border-bottom:3px solid var(--emt-primary);border-left:3px solid var(--emt-primary)}
.emt-timeline__step-label{margin:0;color:var(--emt-primary);font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.16em;text-transform:uppercase}
.emt-timeline__step-title{margin:8px 0 0;color:var(--emt-text);font-size:22px;font-weight:600;line-height:1.25}
.emt-timeline__description{margin:12px 0 0;color:var(--emt-muted);font-size:15px;line-height:1.7}
.emt-timeline__dot{position:relative;z-index:2;grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin:auto;border:2px solid var(--emt-line);border-radius:50%;background:#fff}
.emt-timeline__dot-inner{display:block;width:14px;height:14px;border-radius:50%;background:var(--emt-primary)}
.emt-timeline--animate .emt-timeline__item{opacity:0;transform:translateY(28px);transition:opacity .7s ease-out,transform .7s ease-out}
.emt-timeline--animate .emt-timeline__item.is-visible{opacity:1;transform:translateY(0)}

/* @media(max-width:767px){
  .emt-timeline__heading{font-size:40px}
  .emt-timeline__body{margin-top:64px}
  .emt-timeline__line{left:17px;transform:none}
  .emt-timeline__items{gap:40px}
  .emt-timeline__item{grid-template-columns:36px minmax(0,1fr);gap:20px}
  .emt-timeline__item .emt-timeline__card{grid-column:2;grid-row:1;margin:0;border-left:0;border-right:0;padding:24px}
  .emt-timeline__arrow{display:none}
  .emt-timeline__dot{position:absolute;left:8px;top:50%;width:20px;height:20px;margin:0;transform:translateY(-50%)}
  .emt-timeline__dot-inner{width:12px;height:12px}
  .emt-timeline__step-title{font-size:21px}
} */

@media (max-width: 767px) {

  .emt-timeline__heading {
    font-size: 40px;
  }

  .emt-timeline__body {
    margin-top: 64px;
  }

  /* Vertical timeline */
  .emt-timeline__line {
    left: 18px;
    transform: translateX(-50%);
  }

  .emt-timeline__items {
    gap: 40px;
  }

  /*
   * Column 1 = timeline / dot
   * Column 2 = card
   */
  .emt-timeline__item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 20px;
    align-items: center;
    min-height: 128px;
    position: relative;
  }

  /* Card always stays in column 2 */
  .emt-timeline__item .emt-timeline__card {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    border-left: 0;
    border-right: 0;
    padding: 24px;
    width: 100%;
  }

  .emt-timeline__arrow {
    display: none;
  }

  /*
   * IMPORTANT FIX:
   * Do NOT use absolute positioning.
   * Put the dot in the first grid column.
   */
  .emt-timeline__dot {
    position: relative;
    grid-column: 1;
    grid-row: 1;

    justify-self: center;
    align-self: center;

    left: auto;
    top: auto;

    width: 20px;
    height: 20px;

    margin: 0;

    transform: none;

    z-index: 10;
  }

  .emt-timeline__dot-inner {
    width: 12px;
    height: 12px;
  }

  .emt-timeline__step-title {
    font-size: 21px;
  }
}

@media(prefers-reduced-motion:reduce){
  .emt-timeline--animate .emt-timeline__item{opacity:1;transform:none;transition:none}
}
