.mie-process-diagram {
    --process-bg: #f2eeeb;
    --process-ink: var(--mie-navy, #0a2038);
    --process-muted: #45566a;
    --process-accent: var(--mie-red, #cf2030);
    --process-track: var(--mie-cyan, #00d9ff);
    background: var(--process-bg);
    color: var(--process-ink);
    padding: clamp(56px, 7vw, 120px) var(--mie-gutter, 24px);
    font: 400 18px/1.6 'aptos', Arial, sans-serif;
}
.mie-process-diagram--dark {
    --process-bg: var(--mie-navy, #0a2038);
    --process-ink: #fff;
    --process-muted: #c4ced9;
    --process-accent: var(--mie-cyan, #00d9ff);
}
.mie-process-diagram *, .mie-process-diagram *::before, .mie-process-diagram *::after { box-sizing: border-box; }
.mie-process-diagram .mie-process-diagram__steps {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.mie-process-diagram__step {
    --process-junction: clamp(15.4px, 1.65vw, 24.2px);
    position: relative;
    min-height: 160px;
    padding: 0 0 clamp(32px, 3vw, 48px);
    margin: 0;
}
/* Two rounded elbows connect alternating titles, as in the Mirador layout. */
.mie-process-diagram__step:not(:last-child)::before,
.mie-process-diagram__step:not(:last-child)::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border: 0 solid var(--process-track);
}
.mie-process-diagram__step:not(:last-child)::before {
    left: 0;
    width: calc(50% + .5px);
    top: var(--process-junction);
    bottom: 0;
    border-top-width: 1px;
    border-right-width: 1px;
    border-top-right-radius: 32px;
}
.mie-process-diagram__step:not(:last-child)::after {
    left: calc(50% - .5px);
    width: calc(18% - 16px);
    height: calc(var(--process-junction) + .5px);
    bottom: calc(-1 * var(--process-junction));
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-bottom-left-radius: 32px;
}
.mie-process-diagram__step:nth-child(even)::before {
    left: calc(50% - .5px);
    width: calc(18% - 16px);
    border-right-width: 0;
    border-left-width: 1px;
    border-top-right-radius: 0;
    border-top-left-radius: 32px;
}
.mie-process-diagram__step:nth-child(even)::after {
    left: 0;
    width: calc(50% + .5px);
    border-left-width: 0;
    border-right-width: 1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 32px;
}
.mie-process-diagram__step:last-child { padding-bottom: 0; min-height: 64px; }
.mie-process-diagram__content { position: relative; z-index: 1; width: 32%; min-width: 0; }
.mie-process-diagram__step:nth-child(even) .mie-process-diagram__content { margin-left: 68%; }
.mie-process-diagram__image { margin-top: 24px; }
.mie-process-diagram__image img { display: block; width: 100%; max-height: 340px; height: auto; object-fit: contain; object-position: left center; }
.mie-process-diagram .mie-process-diagram__title {
    position: relative;
    width: fit-content;
    max-width: 100%;
    padding-right: 16px;
    margin: 0 0 24px;
    background: var(--process-bg);
    color: var(--process-accent);
    font: 700 clamp(28px, 3vw, 44px)/1.1 'Babcock', Arial, sans-serif;
    letter-spacing: -.015em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.mie-process-diagram__description { color: var(--process-muted); font-size: 18px; overflow-wrap: anywhere; }
.mie-process-diagram__description > :first-child { margin-top: 0; }
.mie-process-diagram__description > :last-child { margin-bottom: 0; }
.mie-process-diagram__description a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.mie-process-diagram__description a:hover { color: var(--process-accent); }
.mie-process-diagram a:focus-visible { outline: 3px solid var(--process-accent); outline-offset: 4px; }
/* Only hide pending steps when the observer is active and motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
    .mie-process-diagram[data-process-ready] .mie-process-diagram__content {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 650ms ease, transform 650ms cubic-bezier(.2,.7,.2,1);
    }
    .mie-process-diagram[data-process-ready] .is-visible .mie-process-diagram__content {
        opacity: 1;
        transform: none;
    }
    .mie-process-diagram[data-process-ready] .mie-process-diagram__step::before,
    .mie-process-diagram[data-process-ready] .mie-process-diagram__step::after {
        clip-path: inset(0 0 100% 0);
    }
    .mie-process-diagram[data-process-ready] .mie-process-diagram__step.is-connected::before {
        clip-path: inset(0);
        transition: clip-path 850ms cubic-bezier(.4,0,.2,1);
    }
    .mie-process-diagram[data-process-ready] .mie-process-diagram__step.is-connected::after {
        clip-path: inset(0);
        transition: clip-path 300ms ease 800ms;
    }
}
@media (max-width: 767px) {
    .mie-process-diagram__step { min-height: 120px; padding-bottom: 40px; }
    .mie-process-diagram__content,
    .mie-process-diagram__step:nth-child(even) .mie-process-diagram__content { width: calc(100% - 24px); margin-left: 24px; }
    .mie-process-diagram__step:not(:last-child)::before { left: 0; width: 1px; top: var(--process-junction); bottom: calc(-1 * var(--process-junction)); background: var(--process-track); border: 0; border-radius: 0; }
    .mie-process-diagram__step:not(:last-child)::after { display: none; }
    .mie-process-diagram__title::before { content: ''; position: absolute; left: -24px; width: 16px; top: var(--process-junction); height: 1px; background: var(--process-track); }
    .mie-process-diagram__description { font-size: 16px; }
    .mie-process-diagram__image { margin-top: 20px; }
    .mie-process-diagram__image img { max-height: 280px; }
}