.elocutio-approach {
  --ea-navy: #0f2340;
  --ea-blue: #3e7cb1;
  --ea-line: rgb(62 124 177 / 38%);
  --ea-gap: clamp(30px, 4.5vw, 58px);
  width: min(100%, 1180px);
  margin-inline: auto;
  padding-block: clamp(24px, 4vw, 52px);
  color: var(--ea-navy);
  background: transparent;
}

.elocutio-approach *,
.elocutio-approach *::before,
.elocutio-approach *::after { box-sizing: border-box; }

.elocutio-approach__canvas { position: relative; }

.elocutio-approach__main-flow {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.elocutio-approach__main-flow path {
  fill: none;
  stroke: var(--ea-line);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--tree-line-progress, 0));
}

.elocutio-approach__origin,
.elocutio-approach__outcome,
.elocutio-approach__path {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  min-width: 0;
  background: transparent;
}

.elocutio-approach__origin,
.elocutio-approach__outcome {
  width: min(100%, 600px);
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.elocutio-approach__origin > div,
.elocutio-approach__outcome > div { max-width: 590px; }

.elocutio-approach__origin > div { grid-row: 1; }
.elocutio-approach__origin > .elocutio-approach__number {
  grid-row: 2;
  margin-top: 26px;
}

.elocutio-approach__outcome > .elocutio-approach__number {
  grid-row: 1;
  margin-bottom: 26px;
}
.elocutio-approach__outcome > div { grid-row: 2; }

.elocutio-approach__origin { margin-bottom: clamp(68px, 8vw, 100px); }
.elocutio-approach__outcome { margin-top: clamp(68px, 8vw, 100px); }

.elocutio-approach__paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ea-gap);
  align-items: stretch;
}

.elocutio-approach__number {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ea-blue);
  border-radius: 50%;
  background: #fff;
  color: var(--ea-blue);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

.elocutio-approach__number--brand {
  background: var(--ea-navy);
  border-color: var(--ea-navy);
  overflow: hidden;
  padding: 8px;
}

.elocutio-approach__number--brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.elocutio-approach__path-content { padding-top: 54px; }

.elocutio-approach__eyebrow {
  margin: 0 0 7px !important;
  color: var(--ea-blue) !important;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.2 !important;
  text-transform: uppercase;
}

.elocutio-approach h3 {
  margin: 0 0 10px !important;
  color: var(--ea-navy) !important;
  font-size: clamp(25px, 2.45vw, 35px) !important;
  line-height: 1.13 !important;
}

.elocutio-approach p:not(.elocutio-approach__eyebrow) {
  margin: 0 !important;
  color: rgb(15 35 64 / 75%);
  font-size: 16px;
  line-height: 1.62;
}

.elocutio-approach__path::before {
  content: "";
  position: absolute;
  top: var(--rail-top, 42px);
  left: 21px;
  width: 1px;
  height: var(--rail-height, calc(100% - 42px));
  background: var(--ea-line);
  transform: scaleY(var(--capability-line-progress, 0));
  transform-origin: top;
}

.elocutio-approach__capabilities {
  position: relative;
  margin: 25px 0 0 -52px;
  padding-left: 68px;
}

.elocutio-approach__capability {
  position: relative;
  min-height: 88px;
  padding: 10px 0 17px;
}

.elocutio-approach__capability::before {
  content: "";
  position: absolute;
  top: 23px;
  left: -47px;
  width: 43px;
  height: 1px;
  background: var(--ea-line);
  transform: scaleX(var(--capability-progress, 0));
  transform-origin: left;
}

.elocutio-approach__capability h4 {
  margin: 0 0 6px !important;
  color: var(--ea-navy) !important;
  font-family: inherit;
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.3 !important;
}

.elocutio-approach__capability p { font-size: 14px !important; line-height: 1.5 !important; }

.elocutio-approach [data-tree-node] {
  opacity: max(.08, var(--node-progress, 0));
  filter: blur(calc((1 - var(--node-progress, 0)) * 4px));
  transform: translateY(calc((1 - var(--node-progress, 0)) * 26px));
}

.elocutio-approach [data-tree-node] .elocutio-approach__number:not(.elocutio-approach__number--brand) {
  background: color-mix(in srgb, #fff calc((1 - var(--node-progress, 0)) * 100%), var(--ea-blue));
  color: color-mix(in srgb, var(--ea-blue) calc((1 - var(--node-progress, 0)) * 100%), #fff);
  transform: scale(calc(.78 + var(--node-progress, 0) * .22));
}

.elocutio-approach__capability {
  opacity: max(.12, var(--capability-progress, 0));
  transform: translateX(calc((1 - var(--capability-progress, 0)) * 14px));
}

@media (max-width: 767px) {
  .elocutio-approach { padding-block: 18px; }
  .elocutio-approach__origin,
  .elocutio-approach__outcome,
  .elocutio-approach__path { grid-template-columns: 46px minmax(0, 1fr); width: 100%; }
  .elocutio-approach__origin,
  .elocutio-approach__outcome { grid-template-columns: minmax(0, 1fr); }
  .elocutio-approach__origin { margin-bottom: 54px; }
  .elocutio-approach__outcome { margin: 54px 0 0; }
  .elocutio-approach__paths { display: block; }
  .elocutio-approach__path { margin-bottom: 54px; }
  .elocutio-approach__path:last-child { margin-bottom: 0; }
  .elocutio-approach__number { width: 36px; height: 36px; font-size: 11px; }
  .elocutio-approach h3 { font-size: 28px !important; }
  .elocutio-approach p:not(.elocutio-approach__eyebrow) { font-size: 15px; }
  .elocutio-approach__path::before { left: 18px; }
  .elocutio-approach__capabilities { margin-left: -46px; padding-left: 58px; }
  .elocutio-approach__capability::before { left: -40px; width: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .elocutio-approach { --tree-line-progress: 1 !important; }
  .elocutio-approach [data-tree-node] { --node-progress: 1 !important; opacity: 1 !important; filter: none !important; transform: none !important; }
  .elocutio-approach__path { --capability-line-progress: 1 !important; }
  .elocutio-approach__capability { --capability-progress: 1 !important; opacity: 1 !important; transform: none !important; }
}