.alster-service-timeline {
    --alster-service-bg: #181818;
    --alster-service-fg: #f2f2f2;
    --alster-service-muted: rgba(242, 242, 242, .55);
    --alster-service-line: #4b4b4b;
    --alster-service-media: #222;
    --alster-service-text-size: 20px;
    --alster-service-text-line: 31px;
    --alster-service-heading-size: 24px;
    --alster-service-heading-line: 36px;
    --alster-service-small-size: 16px;
    --alster-service-small-line: 24px;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: var(--alster-service-bg);
    color: var(--alster-service-fg);
    font-family: inherit;
    font-size: var(--alster-service-text-size);
    font-weight: 400;
    line-height: var(--alster-service-text-line);
    font-synthesis: none;
    letter-spacing: normal;
    text-transform: none;
    container: alster-service-timeline / inline-size;
}

.alster-service-timeline,
.alster-service-timeline *,
.alster-service-timeline *::before,
.alster-service-timeline *::after {
    box-sizing: border-box;
}

.alster-service-timeline ::selection {
    background: #e1e1e1;
    color: #181818;
}

.alster-service-timeline .alster-service-timeline__inner {
    position: relative;
    width: calc(100% - 96px);
    max-width: 1504px;
    margin: 64px auto 0;
    padding: 0;
}

.alster-service-timeline h2,
.alster-service-timeline h3,
.alster-service-timeline p,
.alster-service-timeline figure {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.alster-service-timeline p {
    color: var(--alster-service-muted);
    font-size: var(--alster-service-text-size);
    line-height: var(--alster-service-text-line);
}

.alster-service-timeline .alster-service-timeline__label,
.alster-service-timeline .alster-service-timeline__phase-number,
.alster-service-timeline .alster-service-timeline__partner,
.alster-service-timeline .alster-service-timeline__collaborator {
    display: block;
    font-size: var(--alster-service-small-size);
    line-height: var(--alster-service-small-line);
}

.alster-service-timeline .alster-service-timeline__track {
    position: absolute;
    left: 50%;
    top: 9px;
    bottom: 80px;
    width: 1px;
    background: #393939;
    pointer-events: none;
}

.alster-service-timeline .alster-service-timeline__fill {
    width: 100%;
    height: 100%;
    background: #bfbfbf;
    transform: scaleY(1);
    transform-origin: top;
}

.alster-service-timeline .alster-service-timeline__step {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 144px minmax(0, 1fr);
    margin: 0;
    padding: 0 0 160px;
    min-width: 0;
}

.alster-service-timeline .alster-service-timeline__inner > .alster-service-timeline__step:last-child,
.alster-service-timeline .alster-service-timeline__step--last {
    padding-bottom: 64px;
}

.alster-service-timeline .alster-service-timeline__dot {
    position: absolute;
    top: 9px;
    left: calc(50% - 3px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--alster-service-fg);
    box-shadow: 0 0 0 7px var(--alster-service-bg);
    pointer-events: none;
}

.alster-service-timeline .alster-service-timeline__copy {
    grid-column: 1;
    grid-row: 1;
    max-width: 520px;
    min-width: 0;
}

.alster-service-timeline .alster-service-timeline__step--right .alster-service-timeline__copy {
    grid-column: 3;
}

.alster-service-timeline .alster-service-timeline__phase-number {
    margin-bottom: 12px;
    color: var(--alster-service-muted);
}

.alster-service-timeline .alster-service-timeline__title {
    margin-bottom: 26px;
    color: var(--alster-service-fg);
    font-family: inherit;
    font-size: var(--alster-service-heading-size);
    font-weight: 400;
    line-height: var(--alster-service-heading-line);
}

.alster-service-timeline .alster-service-timeline__intro p + p {
    margin-top: 12px;
}

.alster-service-timeline .alster-service-timeline__partner {
    margin-top: 34px;
    color: var(--alster-service-muted);
}

.alster-service-timeline .alster-service-timeline__detail {
    margin-top: 38px;
}

.alster-service-timeline .alster-service-timeline__detail-title,
.alster-service-timeline .alster-service-timeline__closing h3 {
    color: var(--alster-service-fg);
    font-size: var(--alster-service-text-size);
    line-height: var(--alster-service-text-line);
}

.alster-service-timeline .alster-service-timeline__detail p {
    margin-top: 12px;
}

.alster-service-timeline .alster-service-timeline__collaborator {
    margin-top: 7px;
    color: var(--alster-service-muted);
}

.alster-service-timeline .alster-service-timeline__collaborator + p {
    margin-top: 14px;
}

.alster-service-timeline .alster-service-timeline__list {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    color: var(--alster-service-muted);
    font-size: 16px;
    line-height: 24px;
}

.alster-service-timeline .alster-service-timeline__list li {
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid #343434;
    list-style: none;
    font-size: inherit;
    line-height: inherit;
}

.alster-service-timeline .alster-service-timeline__list li:first-child {
    border-top: 1px solid #343434;
}

.alster-service-timeline .alster-service-timeline__outcome {
    margin-top: 38px;
    border-top: 1px solid var(--alster-service-line);
    padding-top: 20px;
}

.alster-service-timeline .alster-service-timeline__outcome p {
    margin-top: 12px;
}

.alster-service-timeline .alster-service-timeline__visual {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    padding-top: 48px;
    align-self: start;
}

.alster-service-timeline .alster-service-timeline__step--right .alster-service-timeline__visual {
    grid-column: 1;
}

.alster-service-timeline .alster-service-timeline__media {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    aspect-ratio: 1.15;
    background: var(--alster-service-media);
}

.alster-service-timeline .alster-service-timeline__media img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    object-fit: contain;
}

.alster-service-timeline .alster-service-timeline__media--cover img {
    object-fit: cover;
}

.alster-service-timeline .alster-service-timeline__media--contain img {
    object-fit: contain;
}

.alster-service-timeline .alster-service-timeline__visual .alster-service-timeline__media--contain {
    background: var(--alster-service-bg);
}

.alster-service-timeline .alster-service-timeline__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 0;
    padding: 50px 24px;
}

.alster-service-timeline .alster-service-timeline__placeholder-tag {
    position: absolute;
    top: 20px;
    left: 24px;
    right: 24px;
    color: var(--alster-service-muted);
    font-size: var(--alster-service-text-size);
    line-height: var(--alster-service-text-line);
}

.alster-service-timeline .alster-service-timeline__placeholder-title {
    color: var(--alster-service-muted);
    font-size: var(--alster-service-text-size);
    font-weight: 400;
    line-height: var(--alster-service-text-line);
    text-align: center;
}

.alster-service-timeline .alster-service-timeline__caption {
    margin-top: 14px;
    color: var(--alster-service-muted);
    font-size: var(--alster-service-small-size);
    line-height: var(--alster-service-small-line);
}

.alster-service-timeline .alster-service-timeline__stage {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    margin-top: 72px;
    background: var(--alster-service-bg);
}

.alster-service-timeline .alster-service-timeline__stage > figure {
    min-width: 0;
}

.alster-service-timeline .alster-service-timeline__stage--single .alster-service-timeline__media {
    aspect-ratio: 2.25;
    background: #242424;
}

.alster-service-timeline .alster-service-timeline__step--text {
    min-height: 460px;
}

.alster-service-timeline .alster-service-timeline__stage--comparison {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
}

.alster-service-timeline .alster-service-timeline__stage--comparison .alster-service-timeline__media {
    aspect-ratio: 1.4;
}

.alster-service-timeline .alster-service-timeline__closing {
    position: relative;
    grid-column: 3;
    grid-row: 3;
    margin-top: 64px;
    background: var(--alster-service-bg);
}

.alster-service-timeline .alster-service-timeline__closing p {
    margin-top: 14px;
}

/* Brahmsallee content additions retain the existing alternating timeline. */
.alster-service-timeline [hidden] { display: none !important; }

.alster-service-timeline .alster-service-timeline__header {
    width: calc(100% - 96px);
    max-width: 1504px;
    margin: 0 auto;
    padding: 48px 0 38px;
    border-bottom: 1px solid var(--alster-service-line);
}

.alster-service-timeline .alster-service-timeline__header-title {
    margin: 12px 0;
    color: var(--alster-service-fg);
    font-size: var(--alster-service-heading-size);
    line-height: var(--alster-service-heading-line);
}

.alster-service-timeline .alster-service-timeline__eyebrow,
.alster-service-timeline .alster-service-timeline__plan-label,
.alster-service-timeline .alster-service-timeline__closing .alster-service-timeline__closing-label {
    font-size: var(--alster-service-small-size);
    line-height: var(--alster-service-small-line);
}

.alster-service-timeline .alster-service-timeline__header > p:last-child { max-width: 740px; }

.alster-service-timeline .alster-service-timeline__disclosure {
    margin-top: 34px;
    border-top: 1px solid var(--alster-service-line);
}

.alster-service-timeline .alster-service-timeline__disclosure summary {
    padding: 14px 0;
    color: var(--alster-service-fg);
    cursor: pointer;
    font: inherit;
}

.alster-service-timeline .alster-service-timeline__disclosure .alster-service-timeline__detail,
.alster-service-timeline .alster-service-timeline__disclosure .alster-service-timeline__list { margin-top: 0; }

.alster-service-timeline .alster-service-timeline__pdf {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    margin-top: 8px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: #bdbdbd;
    font: inherit;
    font-size: var(--alster-service-small-size);
    line-height: var(--alster-service-small-line);
    text-decoration: none;
    transition: color .18s ease;
}
.alster-service-timeline .alster-service-timeline__pdf:hover,
.alster-service-timeline .alster-service-timeline__pdf:focus-visible { color: #f2f2f2; }
.alster-service-timeline .alster-service-timeline__pdf:hover .alster-service-timeline__pdf-name,
.alster-service-timeline .alster-service-timeline__pdf:focus-visible .alster-service-timeline__pdf-name {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.alster-service-timeline .alster-service-timeline__pdf-icon { flex: 0 0 18px; }
.alster-service-timeline .alster-service-timeline__pdf-name { min-width: 0; }
.alster-service-timeline .alster-service-timeline__pdf-type {
    flex: 0 0 auto;
    padding: 1px 4px;
    border: 1px solid #656565;
    border-radius: 2px;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: .04em;
}

.alster-service-timeline .alster-service-timeline__plan-label { margin-bottom: 18px; }
.alster-service-timeline .alster-service-timeline__plan-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.alster-service-timeline .alster-service-timeline__plan-tabs button {
    appearance: none;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--alster-service-line);
    border-radius: 0;
    background: transparent;
    color: var(--alster-service-fg);
    font: inherit;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
}

.alster-service-timeline .alster-service-timeline__plan-tabs button[aria-selected="true"] {
    background: var(--alster-service-fg);
    color: var(--alster-service-bg);
    border-color: var(--alster-service-fg);
}

.alster-service-timeline .alster-service-timeline__plan-panel + .alster-service-timeline__plan-panel { margin-top: 28px; }
.alster-service-timeline .alster-service-timeline__plans--ready .alster-service-timeline__plan-panel { margin-top: 0; }

.alster-service-timeline .alster-service-timeline__concepts {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    min-width: 0;
    margin-top: 72px;
    background: var(--alster-service-bg);
}

.alster-service-timeline .alster-service-timeline__concept { min-width: 0; }
.alster-service-timeline .alster-service-timeline__concept .alster-service-timeline__media { margin: 20px 0 18px; }
.alster-service-timeline .alster-service-timeline__concept p { font-size: 16px; line-height: 24px; }
.alster-service-timeline .alster-service-timeline__concept p + p { margin-top: 12px; }
.alster-service-timeline .alster-service-timeline__concepts ~ .alster-service-timeline__stage { grid-row: 3; }
.alster-service-timeline .alster-service-timeline__gallery-note {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 16px;
    font-size: 16px;
    line-height: 24px;
}

.alster-service-timeline .alster-service-timeline__closing {
    grid-row: 5;
    padding-top: 24px;
    border-top: 1px solid var(--alster-service-line);
}
.alster-service-timeline .alster-service-timeline__closing .alster-service-timeline__closing-label { margin: 0 0 18px; }
.alster-service-timeline .alster-service-timeline__next-steps {
    counter-reset: alster-next-step;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    color: var(--alster-service-muted);
    font: inherit;
}
.alster-service-timeline .alster-service-timeline__next-steps li {
    display: grid;
    grid-template-columns: 2ch minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    margin: 0;
    padding: 16px 0;
    border-bottom: 1px solid var(--alster-service-line);
    list-style: none;
}
.alster-service-timeline .alster-service-timeline__next-steps li::before {
    counter-increment: alster-next-step;
    content: counter(alster-next-step, decimal-leading-zero);
    color: var(--alster-service-fg);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.alster-service-timeline .alster-service-timeline__zoom,
.alster-service-timeline .alster-service-timeline__document {
    display: block;
    width: 100%;
    height: 100%;
    color: var(--alster-service-fg);
    text-decoration: none;
}
.alster-service-timeline .alster-service-timeline__zoom { cursor: zoom-in; }
.alster-service-timeline .alster-service-timeline__document { cursor: pointer; }
.alster-service-timeline .alster-service-timeline__zoom-label {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eee8dc;
    color: #181818;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
    transition: background .18s ease;
}
.alster-service-timeline .alster-service-timeline__zoom-label svg { flex: 0 0 20px; }
.alster-service-timeline .alster-service-timeline__zoom-hint {
    position: absolute;
    right: calc(100% + 10px);
    padding: 5px 9px;
    border-radius: 3px;
    background: #181818;
    color: #f2f2f2;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.alster-service-timeline .alster-service-timeline__zoom:hover .alster-service-timeline__zoom-label,
.alster-service-timeline .alster-service-timeline__zoom:focus-visible .alster-service-timeline__zoom-label { background: #fff; }
.alster-service-timeline .alster-service-timeline__zoom:focus-visible .alster-service-timeline__zoom-hint { opacity: 1; }
@media (hover: hover) {
    .alster-service-timeline .alster-service-timeline__zoom:hover .alster-service-timeline__zoom-hint { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .alster-service-timeline .alster-service-timeline__zoom-label,
    .alster-service-timeline .alster-service-timeline__zoom-hint,
    .alster-service-timeline .alster-service-timeline__pdf { transition: none; }
}
.alster-service-timeline a:focus-visible,
.alster-service-timeline button:focus-visible,
.alster-service-timeline summary:focus-visible,
.alster-service-timeline [role="tabpanel"]:focus-visible {
    outline: 2px solid var(--alster-service-fg);
    outline-offset: 5px;
}

/* The image viewer is added only when a real attachment is opened. */
.alster-service-lightbox {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 22px 30px 18px;
    border: 0;
    background: #181818;
    color: #f2f2f2;
    font: 18px/1.5 neue-haas-unica, Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}
.alster-service-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 18px; }
.alster-service-lightbox::backdrop { background: rgba(0, 0, 0, .9); }
.alster-service-lightbox__toolbar { display: flex; align-items: center; gap: 24px; min-width: 0; }
.alster-service-lightbox__toolbar > span { margin-right: auto; color: #888; font-size: 16px; }
.alster-service-lightbox button {
    appearance: none;
    position: static;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #f2f2f2;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
}
.alster-service-lightbox .alster-service-lightbox__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    cursor: zoom-in;
    touch-action: none;
}
.alster-service-lightbox--zoomed .alster-service-lightbox__stage { cursor: crosshair; }
.alster-service-lightbox .alster-service-lightbox__stage[aria-pressed="true"] { cursor: grab; }
.alster-service-lightbox .alster-service-lightbox__stage[aria-pressed="true"]:active { cursor: grabbing; }
.alster-service-lightbox img {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    transition: transform .16s ease;
}
.alster-service-lightbox__footer { min-width: 0; }
.alster-service-lightbox__footer p { margin: 0; font: inherit; font-size: 14px; line-height: 22px; }
.alster-service-lightbox__footer p + p { margin-top: 4px; color: #888; font-size: 13px; }
.alster-service-lightbox button:focus-visible { outline: 1px solid #f2f2f2; outline-offset: 5px; }
@media (max-width: 767px) {
    .alster-service-lightbox { padding: 16px 15px; gap: 14px; font-size: 16px; }
    .alster-service-lightbox__toolbar { gap: 18px; }
    .alster-service-lightbox__toolbar > span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .alster-service-lightbox img { transition: none; }
}

@container alster-service-timeline (max-width: 680px) {
    .alster-service-timeline .alster-service-timeline__header { width: calc(100% - 40px); padding-top: 32px; }
    .alster-service-timeline .alster-service-timeline__concepts { grid-template-columns: 1fr; gap: 36px; margin-top: 4px; }
    .alster-service-timeline .alster-service-timeline__gallery-note { margin-top: -16px; }
}

@supports not (container-type: inline-size) {
    @media (max-width: 680px) {
        .alster-service-timeline .alster-service-timeline__header { width: calc(100% - 40px); padding-top: 32px; }
        .alster-service-timeline .alster-service-timeline__concepts { grid-template-columns: 1fr; gap: 36px; margin-top: 4px; }
        .alster-service-timeline .alster-service-timeline__gallery-note { margin-top: -16px; }
    }
}

/* Content remains fully readable until JavaScript enables reveal observation. */
.alster-service-timeline [data-alster-service-reveal] {
    opacity: 1;
    transform: none;
}

.alster-service-timeline.alster-service-timeline--animated .alster-service-timeline__fill {
    transform: scaleY(0);
}

.alster-service-timeline.alster-service-timeline--animated .alster-service-timeline__dot {
    background: #6a6a6a;
    box-shadow: none;
    transition: background .4s, box-shadow .4s;
}

.alster-service-timeline.alster-service-timeline--animated .alster-service-timeline__step--active .alster-service-timeline__dot {
    background: var(--alster-service-fg);
    box-shadow: 0 0 0 7px var(--alster-service-bg);
}

.alster-service-timeline.alster-service-timeline--reveal [data-alster-service-reveal] {
    opacity: .12;
    transform: translateY(26px);
    transition: opacity .85s ease, transform .85s cubic-bezier(.22, .61, .36, 1);
}

.alster-service-timeline.alster-service-timeline--reveal .alster-service-timeline__copy[data-alster-service-reveal] {
    transform: translateX(-24px);
}

.alster-service-timeline.alster-service-timeline--reveal .alster-service-timeline__step--right .alster-service-timeline__copy[data-alster-service-reveal] {
    transform: translateX(24px);
}

.alster-service-timeline.alster-service-timeline--reveal [data-alster-service-reveal].alster-service-timeline__revealed {
    opacity: 1;
    transform: none;
}

@container alster-service-timeline (max-width: 1000px) {
    .alster-service-timeline .alster-service-timeline__step {
        grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
    }
    .alster-service-timeline .alster-service-timeline__visual .alster-service-timeline__media {
        aspect-ratio: .85;
    }
}

@container alster-service-timeline (max-width: 680px) {
    .alster-service-timeline .alster-service-timeline__inner {
        width: calc(100% - 40px);
        margin-top: 38px;
        padding-left: 30px;
        font-size: var(--alster-service-text-size);
        line-height: var(--alster-service-text-line);
    }
    .alster-service-timeline .alster-service-timeline__track {
        left: 3px;
        bottom: 64px;
    }
    .alster-service-timeline .alster-service-timeline__step {
        display: flex;
        flex-direction: column;
        gap: 32px;
        min-height: 0;
        padding-bottom: 76px;
    }
    .alster-service-timeline .alster-service-timeline__inner > .alster-service-timeline__step:last-child,
    .alster-service-timeline .alster-service-timeline__step--last {
        padding-bottom: 38px;
    }
    .alster-service-timeline .alster-service-timeline__dot { left: -30px; }
    .alster-service-timeline .alster-service-timeline__copy { max-width: none; }
    .alster-service-timeline .alster-service-timeline__title { margin-bottom: 20px; }
    .alster-service-timeline .alster-service-timeline__partner { margin-top: 24px; }
    .alster-service-timeline .alster-service-timeline__detail,
    .alster-service-timeline .alster-service-timeline__outcome { margin-top: 30px; }
    .alster-service-timeline .alster-service-timeline__visual { width: 100%; padding: 0; }
    .alster-service-timeline .alster-service-timeline__visual .alster-service-timeline__media { aspect-ratio: 1.15; }
    .alster-service-timeline .alster-service-timeline__stage { margin-top: 4px; }
    .alster-service-timeline .alster-service-timeline__stage--single .alster-service-timeline__media,
    .alster-service-timeline .alster-service-timeline__stage--comparison .alster-service-timeline__media { aspect-ratio: 1.2; }
    .alster-service-timeline .alster-service-timeline__placeholder-tag { left: 20px; right: 20px; }
    .alster-service-timeline .alster-service-timeline__stage--comparison { grid-template-columns: 1fr; gap: 28px; }
    .alster-service-timeline .alster-service-timeline__closing { margin-top: 8px; }
    .alster-service-timeline.alster-service-timeline--reveal .alster-service-timeline__copy[data-alster-service-reveal],
    .alster-service-timeline.alster-service-timeline--reveal .alster-service-timeline__step--right .alster-service-timeline__copy[data-alster-service-reveal] { transform: translateY(22px); }
    .alster-service-timeline.alster-service-timeline--reveal [data-alster-service-reveal].alster-service-timeline__revealed { transform: none; }
}

/* Equivalent viewport breakpoints for browsers without container queries. */
@supports not (container-type: inline-size) {
    @media (max-width: 1000px) {
        .alster-service-timeline .alster-service-timeline__step { grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); }
        .alster-service-timeline .alster-service-timeline__visual .alster-service-timeline__media { aspect-ratio: .85; }
    }
    @media (max-width: 680px) {
        .alster-service-timeline .alster-service-timeline__inner {
            width: calc(100% - 40px);
            margin-top: 38px;
            padding-left: 30px;
            font-size: var(--alster-service-text-size);
            line-height: var(--alster-service-text-line);
        }
        .alster-service-timeline .alster-service-timeline__track { left: 3px; bottom: 64px; }
        .alster-service-timeline .alster-service-timeline__step { display: flex; flex-direction: column; gap: 32px; min-height: 0; padding-bottom: 76px; }
        .alster-service-timeline .alster-service-timeline__inner > .alster-service-timeline__step:last-child,
        .alster-service-timeline .alster-service-timeline__step--last { padding-bottom: 38px; }
        .alster-service-timeline .alster-service-timeline__dot { left: -30px; }
        .alster-service-timeline .alster-service-timeline__copy { max-width: none; }
        .alster-service-timeline .alster-service-timeline__title { margin-bottom: 20px; }
        .alster-service-timeline .alster-service-timeline__partner { margin-top: 24px; }
        .alster-service-timeline .alster-service-timeline__detail,
        .alster-service-timeline .alster-service-timeline__outcome { margin-top: 30px; }
        .alster-service-timeline .alster-service-timeline__visual { width: 100%; padding: 0; }
        .alster-service-timeline .alster-service-timeline__visual .alster-service-timeline__media { aspect-ratio: 1.15; }
        .alster-service-timeline .alster-service-timeline__stage { margin-top: 4px; }
        .alster-service-timeline .alster-service-timeline__stage--single .alster-service-timeline__media,
        .alster-service-timeline .alster-service-timeline__stage--comparison .alster-service-timeline__media { aspect-ratio: 1.2; }
        .alster-service-timeline .alster-service-timeline__placeholder-tag { left: 20px; right: 20px; }
        .alster-service-timeline .alster-service-timeline__stage--comparison { grid-template-columns: 1fr; gap: 28px; }
        .alster-service-timeline .alster-service-timeline__closing { margin-top: 8px; }
        .alster-service-timeline.alster-service-timeline--reveal .alster-service-timeline__copy[data-alster-service-reveal],
        .alster-service-timeline.alster-service-timeline--reveal .alster-service-timeline__step--right .alster-service-timeline__copy[data-alster-service-reveal] { transform: translateY(22px); }
        .alster-service-timeline.alster-service-timeline--reveal [data-alster-service-reveal].alster-service-timeline__revealed { transform: none; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .alster-service-timeline [data-alster-service-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    .alster-service-timeline .alster-service-timeline__fill { transform: scaleY(1) !important; }
    .alster-service-timeline .alster-service-timeline__dot {
        background: var(--alster-service-fg) !important;
        box-shadow: 0 0 0 7px var(--alster-service-bg) !important;
        transition: none !important;
    }
}

/* Alternative 02: each sticky text block ends at its own main-media split. */
.alster-service-timeline .alster-service-timeline__step { display: block; }
.alster-service-timeline .alster-service-timeline__split {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 144px minmax(0, 1fr);
    align-items: start;
    min-width: 0;
}
.alster-service-timeline .alster-service-timeline__closing--beside {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    min-width: 0;
    margin: 48px 0 0;
}
.alster-service-timeline .alster-service-timeline__step--right .alster-service-timeline__closing--beside { grid-column: 1; }

.alster-service-timeline--split {
    --alster-service-sticky-top: 60px;
}
.alster-service-timeline--split .alster-service-timeline__inner,
.alster-service-timeline--split .alster-service-timeline__header {
    width: calc(100% - 60px);
    max-width: none;
}
.alster-service-timeline--split .alster-service-timeline__inner { margin-top: 60px; }
/* Full-width WPBakery rows already provide the reference's outer gutters. */
.grve-fullwidth .alster-service-timeline--split > .alster-service-timeline__inner,
.grve-fullwidth .alster-service-timeline--split > .alster-service-timeline__header { width: 100%; }
.alster-service-timeline--split .alster-service-timeline__step { min-height: 0; padding-bottom: 120px; }
.alster-service-timeline--split .alster-service-timeline__step--last { padding-bottom: 60px; }
.alster-service-timeline--split .alster-service-timeline__split { min-height: min(90vh, 900px); }
.alster-service-timeline--split .alster-service-timeline__step--text .alster-service-timeline__split { min-height: 65vh; }
.alster-service-timeline--split .alster-service-timeline__copy {
    position: sticky;
    top: var(--alster-service-sticky-top);
    align-self: start;
    grid-column: 1;
    grid-row: 1;
}
.alster-service-timeline.alster-service-timeline--split .alster-service-timeline__copy[data-alster-service-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
}
.alster-service-timeline--split .alster-service-timeline__title { margin-bottom: 18px; }
.alster-service-timeline--split .alster-service-timeline__visual { grid-column: 3; grid-row: 1; }
.alster-service-timeline--split .alster-service-timeline__disclosure { border-bottom: 1px solid var(--alster-service-line); }
.alster-service-timeline .alster-service-timeline__disclosure summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    list-style: none;
    color: rgba(242, 242, 242, .78);
    font-size: 16px;
    line-height: 24px;
}
.alster-service-timeline .alster-service-timeline__disclosure summary::marker { content: ''; }
.alster-service-timeline .alster-service-timeline__disclosure summary::-webkit-details-marker { display: none; }
.alster-service-timeline .alster-service-timeline__disclosure summary::after {
    content: '';
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    margin-right: 3px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
}
.alster-service-timeline .alster-service-timeline__disclosure[open] summary::after { transform: translateY(2px) rotate(225deg); }
.alster-service-timeline .alster-service-timeline__disclosure summary:hover { color: var(--alster-service-fg); }
.alster-service-timeline .alster-service-timeline__disclosure .alster-service-timeline__detail { padding: 0 0 16px; }
.alster-service-timeline .alster-service-timeline__disclosure .alster-service-timeline__list li { padding: 8px 0; border: 0; font-size: 16px; line-height: 24px; }
.alster-service-timeline--split .alster-service-timeline__concepts {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid var(--alster-service-line);
}
.alster-service-timeline--split .alster-service-timeline__concept .alster-service-timeline__media { aspect-ratio: 1.35; }
.alster-service-timeline--split .alster-service-timeline__step--gallery .alster-service-timeline__visual .alster-service-timeline__media { aspect-ratio: .95; }
.alster-service-timeline--split .alster-service-timeline__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    margin-top: 60px;
}
.alster-service-timeline--split .alster-service-timeline__stage .alster-service-timeline__media { aspect-ratio: 1.8; }

/* The theme otherwise makes the body a separate, non-scrolling ancestor. */
@supports (overflow: clip) {
    body.alster-service-sticky-page,
    body:has(.alster-service-timeline--split) { overflow-x: clip; overflow-y: visible; }
}

@container alster-service-timeline (max-width: 1000px) {
    .alster-service-timeline .alster-service-timeline__split { grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); }
    .alster-service-timeline--split .alster-service-timeline__visual .alster-service-timeline__media { aspect-ratio: 1.15; }
}
@container alster-service-timeline (max-width: 680px) {
    .alster-service-timeline .alster-service-timeline__split { display: flex; flex-direction: column; gap: 32px; }
    .alster-service-timeline .alster-service-timeline__closing--beside { margin-top: 0; }
}
@container alster-service-timeline (max-width: 767px) {
    .alster-service-timeline--split .alster-service-timeline__inner,
    .alster-service-timeline--split .alster-service-timeline__header { width: calc(100% - 30px); max-width: none; padding-left: 0; }
    .alster-service-timeline--split .alster-service-timeline__header { padding-top: 30px; padding-bottom: 30px; }
    .alster-service-timeline--split .alster-service-timeline__inner {
        margin-top: 40px;
    }
    .alster-service-timeline--split .alster-service-timeline__track { left: -9px; bottom: 60px; }
    .alster-service-timeline--split .alster-service-timeline__dot { left: -12px; }
    .alster-service-timeline--split .alster-service-timeline__step { padding-bottom: 76px; gap: 30px; }
    .alster-service-timeline--split .alster-service-timeline__step--last { padding-bottom: 30px; }
    .alster-service-timeline--split .alster-service-timeline__split,
    .alster-service-timeline--split .alster-service-timeline__step--text .alster-service-timeline__split { display: flex; flex-direction: column; gap: 30px; min-height: 0; }
    .alster-service-timeline--split .alster-service-timeline__copy { position: relative; top: auto; max-width: none; }
    .alster-service-timeline--split .alster-service-timeline__visual { width: 100%; padding: 0; }
    .alster-service-timeline--split .alster-service-timeline__concepts { grid-template-columns: 1fr; gap: 40px; margin-top: 4px; }
    .alster-service-timeline--split .alster-service-timeline__stage { margin-top: 4px; gap: 30px; }
    .alster-service-timeline--split .alster-service-timeline__stage .alster-service-timeline__media { aspect-ratio: 1.3; }
    .alster-service-timeline--split .alster-service-timeline__step--gallery .alster-service-timeline__visual .alster-service-timeline__media { aspect-ratio: 1.15; }
    .alster-service-timeline--split .alster-service-timeline__gallery-note { margin-top: 16px; }
    .alster-service-timeline--split .alster-service-timeline__closing--beside { width: 100%; margin-top: 0; }
}
@media (max-height: 560px) {
    .alster-service-timeline--split .alster-service-timeline__copy { position: relative; top: auto; }
}

@supports not (container-type: inline-size) {
    @media (max-width: 1000px) {
        .alster-service-timeline .alster-service-timeline__split { grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); }
    }
    @media (max-width: 767px) {
        .alster-service-timeline--split .alster-service-timeline__inner,
        .alster-service-timeline--split .alster-service-timeline__header { width: calc(100% - 30px); padding-left: 0; }
        .alster-service-timeline--split .alster-service-timeline__track { left: -9px; }
        .alster-service-timeline--split .alster-service-timeline__dot { left: -12px; }
        .alster-service-timeline--split .alster-service-timeline__split,
        .alster-service-timeline--split .alster-service-timeline__step--text .alster-service-timeline__split { display: flex; flex-direction: column; gap: 30px; min-height: 0; }
        .alster-service-timeline--split .alster-service-timeline__copy { position: relative; top: auto; max-width: none; }
        .alster-service-timeline--split .alster-service-timeline__visual { width: 100%; padding: 0; }
        .alster-service-timeline--split .alster-service-timeline__concepts { grid-template-columns: 1fr; }
        .alster-service-timeline--split .alster-service-timeline__closing--beside { width: 100%; margin-top: 0; }
    }
    @media (max-width: 680px) {
        .alster-service-timeline .alster-service-timeline__split { display: flex; flex-direction: column; gap: 32px; }
    }
}