/* One roadmap under a single steering bar, vs five scattered providers (includes/visuals/onemap.php) */
.om { --om-gap: 16px; display: grid; gap: 14px; }

/* today: five providers, the owner in the middle */
.om-now { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px 26px; padding: clamp(18px, 2.4vw, 30px); border-radius: var(--radius); background: var(--paper); }
@media (min-width: 860px) { .om-now { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 36px; align-items: center; } }
.om-now-text { min-width: 0; }
.om-now-tag { display: inline-block; margin: 0 0 10px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--white); color: var(--ink-2); }
.om-now-t { margin: 0 0 8px; font-family: var(--font-serif); font-size: 22px; line-height: 1.25; color: var(--forest); }
.om-now-s { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.om-scatter { min-width: 0; }
.om-prov { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.om-pv { display: grid; gap: 7px; min-width: 0; padding: 10px 11px 11px; border-radius: 8px; background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.om-pv-n { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--forest); }
.om-pv-c { display: flex; flex-wrap: wrap; gap: 4px; }
.om-pv-c span { padding: 2px 7px; border-radius: 999px; font-size: 11px; line-height: 1.3; white-space: nowrap; color: var(--ink-2); box-shadow: 0 0 0 1px var(--line) inset; }
.om-fan { display: none; width: 100%; height: 46px; overflow: visible; }
.om-fan-l { stroke: #7d8a80; stroke-width: 1.5; stroke-dasharray: 5 5; }
.om-owner { margin: 12px auto 0; display: flex; align-items: center; justify-content: center; gap: 9px; width: fit-content; max-width: 100%; padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 1.5px var(--ink-2); font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--forest); }
.om-owner-i { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-2); overflow: hidden; }
.om-owner-i::before { content: ""; position: absolute; left: 7px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); }
.om-owner-i::after { content: ""; position: absolute; left: 3px; top: 14px; width: 16px; height: 14px; border-radius: 50%; background: var(--paper); }
@media (min-width: 640px) {
  .om-prov { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .om-pv--2, .om-pv--4 { transform: translateY(6px); }
  .om-pv--3 { transform: translateY(-4px); }
  .om-fan { display: block; }
  .om-owner { margin-top: 0; }
}

/* the roadmap */
.om-map { position: relative; border-radius: var(--radius); background: var(--forest); color: var(--white); padding: 24px 26px 26px; padding: clamp(18px, 2.6vw, 34px); }
.om-map-tag { display: inline-block; margin: 0 0 16px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--green); color: var(--forest); }
.om-steer { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; padding: 11px 18px; border-radius: 10px; background: var(--green); color: var(--forest); }
.om-steer-l { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-right: 6px; }
.om-steer-i { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.om-steer-i::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--forest); }
.om-blocks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--om-gap); counter-reset: om; }
.om-b { position: relative; min-width: 0; display: grid; gap: 6px; align-content: start; padding: 16px 15px 18px; border-radius: 10px; background: var(--forest-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset; }
.om-b::before { content: ""; position: absolute; left: 50%; top: -22px; width: 2px; height: 22px; margin-left: -1px; background: var(--green); }
.om-b:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: calc(-1 * var(--om-gap) / 2 - 5px); width: 9px; height: 9px; margin-top: -5px; border-top: 2px solid var(--green); border-right: 2px solid var(--green); transform: rotate(45deg); }
.om-b-n { font-family: var(--font-serif); font-size: 21px; line-height: 1.15; color: var(--white); }
.om-b-d { font-size: 13px; line-height: 1.45; color: var(--sage); }

/* the loop from tracking back to the objectives */
.om-loop { position: relative; height: 62px; margin: 0 calc(10% - .4 * var(--om-gap)); }
.om-loop-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.om-loop-p { fill: none; stroke: var(--green); stroke-width: 2; stroke-dasharray: .7 .7; }
.om-loop-a { position: absolute; left: 0; top: 6px; width: 10px; height: 10px; margin-left: -6px; border-top: 2px solid var(--green); border-left: 2px solid var(--green); transform: rotate(45deg); }
.om-loop-t { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); margin: 0; padding: 3px 12px; border-radius: 999px; background: var(--forest); font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--green); box-shadow: 0 0 0 1.5px var(--green) inset; }

@media (max-width: 760px) {
  .om-blocks { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 16px; }
  .om-b::before { display: none; }
  .om-b:not(:last-child)::after { top: auto; right: auto; left: 50%; bottom: -16px; margin: 0 0 0 -5px; transform: rotate(135deg); }
  .om-loop { height: auto; margin: 14px 0 0; }
  .om-loop-svg, .om-loop-a { display: none; }
  .om-loop-t { position: static; transform: none; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: normal; text-align: center; padding: 8px 14px; border-radius: 10px; }
  .om-loop-t::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--green); border-right-color: transparent; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .om-b { padding: 14px 12px 16px; }
  .om-b-n { font-size: 19px; }
  .om-b-d { font-size: 12.5px; }
}

/* animation: the providers land, the fan lines reach the owner; then the steering bar unfolds, the blocks
   hang from it one after the other and the loop closes; the dashes of the loop keep flowing afterwards */
.js .vz-figure .om-pv { opacity: 0; transition: opacity .45s ease; }
.js .vz-figure .om-pv--1 { transition-delay: .05s; } .js .vz-figure .om-pv--2 { transition-delay: .2s; } .js .vz-figure .om-pv--3 { transition-delay: .35s; }
.js .vz-figure .om-pv--4 { transition-delay: .5s; } .js .vz-figure .om-pv--5 { transition-delay: .65s; }
.js .vz-figure .om-fan-l { opacity: 0; transition: opacity .4s ease; }
.js .vz-figure .om-fan-l--1 { transition-delay: .35s; } .js .vz-figure .om-fan-l--2 { transition-delay: .5s; } .js .vz-figure .om-fan-l--3 { transition-delay: .65s; }
.js .vz-figure .om-fan-l--4 { transition-delay: .8s; } .js .vz-figure .om-fan-l--5 { transition-delay: .95s; }
.js .vz-figure .om-owner { opacity: 0; transform: translateY(6px); transition: opacity .5s ease .7s, transform .5s ease .7s; }
.js .vz-figure .om-steer { transform: scaleX(.2); transform-origin: left; transition: transform .7s cubic-bezier(.2, .7, .2, 1) .9s; }
.js .vz-figure .om-steer > * { opacity: 0; transition: opacity .4s ease 1.4s; }
.js .vz-figure .om-b { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .om-b::before { transform: scaleY(0); transform-origin: top; transition: transform .3s ease; }
.js .vz-figure .om-b::after { opacity: 0; transition: opacity .3s ease; }
.js .vz-figure .om-b--1, .js .vz-figure .om-b--1::before, .js .vz-figure .om-b--1::after { transition-delay: 1.5s; }
.js .vz-figure .om-b--2, .js .vz-figure .om-b--2::before, .js .vz-figure .om-b--2::after { transition-delay: 1.7s; }
.js .vz-figure .om-b--3, .js .vz-figure .om-b--3::before, .js .vz-figure .om-b--3::after { transition-delay: 1.9s; }
.js .vz-figure .om-b--4, .js .vz-figure .om-b--4::before, .js .vz-figure .om-b--4::after { transition-delay: 2.1s; }
.js .vz-figure .om-b--5, .js .vz-figure .om-b--5::before { transition-delay: 2.3s; }
.js .vz-figure .om-loop-svg { clip-path: inset(0 0 0 100%); transition: clip-path .8s linear 2.5s; }
.js .vz-figure .om-loop-a, .js .vz-figure .om-loop-t { opacity: 0; transition: opacity .4s ease 3.2s; }
.js .vz-figure.is-visible .om-pv, .js .vz-figure.is-visible .om-fan-l, .js .vz-figure.is-visible .om-steer > *, .js .vz-figure.is-visible .om-b::after, .js .vz-figure.is-visible .om-loop-a, .js .vz-figure.is-visible .om-loop-t { opacity: 1; }
.js .vz-figure.is-visible .om-owner, .js .vz-figure.is-visible .om-b { opacity: 1; transform: none; }
.js .vz-figure.is-visible .om-steer, .js .vz-figure.is-visible .om-b::before { transform: none; }
.js .vz-figure.is-visible .om-loop-svg { clip-path: inset(0); }
.js .vz-figure.is-visible .om-loop-p { animation: om-flow 1.4s linear 3.3s infinite; }
@keyframes om-flow { to { stroke-dashoffset: -2.8; } }