/* Vertical Timeline — f01918b6 */
.vtl-list {
    --vtl-marker-col: 80px;
    --vtl-item-gap: 56px;
    --vtl-marker-size: 16px;
    --vtl-marker-color: #C9A86A;
    --vtl-line-thickness: 1px;
    --vtl-line-color: #C9A86A;
    --vtl-line-color-2: #1A1A1A;
    --vtl-progress-color: #C9A86A;
    --vtl-line-offset: 50%;
    --vtl-pulse-color: rgba(201, 168, 106, 0.4);
    --vtl-transition: 400ms;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: vtl;
    position: relative;
}

.vtl-item {
    --vtl-marker-hover-scale: 1.15;
    counter-increment: vtl;
    display: flex;
    gap: 0;
    align-items: flex-start;
    position: relative;
    padding-bottom: var(--vtl-item-gap);
    transition: background-color var(--vtl-transition) ease;
}

.vtl-item:last-child { padding-bottom: 0; }

.vtl-marker-wrap {
    flex: 0 0 var(--vtl-marker-col);
    width: var(--vtl-marker-col);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    min-height: calc(var(--vtl-marker-size) + 4px);
}

/* Connector line segments */
.vtl-line {
    position: absolute;
    left: var(--vtl-line-offset);
    transform: translateX(-50%);
    width: var(--vtl-line-thickness);
    background: var(--vtl-line-color);
}

.vtl-line-top {
    top: 0;
    height: calc(50% - (var(--vtl-marker-size) / 2) - 4px);
}

.vtl-line-bottom {
    top: calc(50% + (var(--vtl-marker-size) / 2) + 4px);
    bottom: calc(-1 * var(--vtl-item-gap));
    height: auto;
}

.vtl-item:last-child .vtl-line-bottom { bottom: 0; }

/* Line style variants */
.vtl-line-dashed .vtl-line { background: repeating-linear-gradient(to bottom, var(--vtl-line-color) 0 6px, transparent 6px 12px); }
.vtl-line-dotted .vtl-line { background: repeating-linear-gradient(to bottom, var(--vtl-line-color) 0 2px, transparent 2px 6px); }
.vtl-line-double .vtl-line {
    width: calc(var(--vtl-line-thickness) * 3);
    background:
        linear-gradient(var(--vtl-line-color), var(--vtl-line-color)) left/var(--vtl-line-thickness) 100% no-repeat,
        linear-gradient(var(--vtl-line-color), var(--vtl-line-color)) right/var(--vtl-line-thickness) 100% no-repeat;
}
.vtl-line-gradient .vtl-line { background: linear-gradient(to bottom, var(--vtl-line-color), var(--vtl-line-color-2)); }

/* Hide line before first / after last */
.vtl-hide-before-first .vtl-item.is-first .vtl-line-top { display: none; }
.vtl-hide-after-last .vtl-item.is-last .vtl-line-bottom { display: none; }

/* Marker */
.vtl-marker {
    position: absolute;
    top: 50%;
    left: var(--vtl-line-offset);
    transform: translate(-50%, -50%);
    width: var(--vtl-marker-size);
    height: var(--vtl-marker-size);
    background-color: var(--vtl-marker-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--vtl-transition) ease, box-shadow var(--vtl-transition) ease;
    z-index: 2;
    border-radius: 50%;
    box-sizing: border-box;
}

.vtl-marker.is-square { border-radius: 0; }
.vtl-marker.is-diamond { border-radius: 0; transform: translate(-50%, -50%) rotate(45deg); }
.vtl-marker.is-icon {
    background-color: transparent;
    color: var(--vtl-marker-color);
    border-radius: 0;
    width: auto;
    height: auto;
    min-width: var(--vtl-marker-size);
    min-height: var(--vtl-marker-size);
}
.vtl-marker.is-icon svg { fill: var(--vtl-marker-color); }
.vtl-marker.is-image { width: auto; height: auto; background: transparent; border-radius: 0; }
.vtl-marker.is-image img {
    width: calc(var(--vtl-marker-size) * 2);
    height: calc(var(--vtl-marker-size) * 2);
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.vtl-marker.is-number {
    width: calc(var(--vtl-marker-size) * 2);
    height: calc(var(--vtl-marker-size) * 2);
    border-radius: 50%;
    color: #fff;
    font-weight: 500;
}

.vtl-item:hover .vtl-marker { transform: translate(-50%, -50%) scale(var(--vtl-marker-hover-scale)); }
.vtl-item:hover .vtl-marker.is-diamond { transform: translate(-50%, -50%) rotate(45deg) scale(var(--vtl-marker-hover-scale)); }

/* Pulse / glow */
.vtl-pulse .vtl-marker::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    box-shadow: 0 0 0 0 var(--vtl-pulse-color);
    animation: vtl-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
.vtl-pulse .vtl-marker.is-diamond::before { border-radius: 0; }

@keyframes vtl-pulse {
    0%   { box-shadow: 0 0 0 0 var(--vtl-pulse-color); }
    70%  { box-shadow: 0 0 0 18px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* Content */
.vtl-content {
    flex: 1 1 auto;
    min-width: 0;
    transition: background-color var(--vtl-transition) ease, color var(--vtl-transition) ease, transform var(--vtl-transition) ease;
}

.vtl-label {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vtl-marker-color);
    font-weight: 500;
}

.vtl-heading {
    margin: 0 0 12px;
    font-size: 1.5rem;
    line-height: 1.25;
    color: #111;
    transition: color var(--vtl-transition) ease;
}

.vtl-desc {
    margin: 0;
    color: #555;
    line-height: 1.7;
}

.vtl-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    text-decoration: none;
    color: #111;
    font-weight: 500;
    letter-spacing: 0.04em;
    position: relative;
    transition: color var(--vtl-transition) ease, gap var(--vtl-transition) ease;
}
.vtl-link:hover { gap: 12px; color: var(--vtl-marker-color); }
.vtl-link span { position: relative; }
.vtl-link span::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: -2px;
    height: 1px;
    background: currentColor;
    transition: right var(--vtl-transition) ease;
}
.vtl-link:hover span::after { right: 0; }

/* Keyboard focus */
.vtl-item:focus-visible { outline: 2px solid var(--vtl-marker-color); outline-offset: 4px; border-radius: 4px; }
.vtl-link:focus-visible { outline: 2px solid var(--vtl-marker-color); outline-offset: 3px; }

/* Scroll progress overlay (drawn via a single inserted line on the list) */
.vtl-has-progress { position: relative; }
.vtl-has-progress::before,
.vtl-has-progress::after {
    content: "";
    position: absolute;
    left: var(--vtl-line-offset);
    transform: translateX(-50%);
    width: var(--vtl-line-thickness);
    top: 0;
    bottom: 0;
    pointer-events: none;
}
.vtl-has-progress::after {
    background: var(--vtl-progress-color);
    height: var(--vtl-progress, 0%);
    bottom: auto;
    transition: height 120ms linear;
    z-index: 1;
}
.vtl-has-progress.vtl-hide-before-first::after,
.vtl-has-progress.vtl-hide-after-last::after { /* respected via JS clamp */ }

/* Scroll reveal */
.vtl-reveal .vtl-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms ease, transform 700ms ease;
}
.vtl-reveal .vtl-item.is-visible {
    opacity: 1;
    transform: none;
}

/* Glassmorphism preset */
.vtl-glass .vtl-content {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 24px 28px;
    border-radius: 14px;
}

/* PRESETS */
.vtl-preset-luxury .vtl-heading { font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; font-weight: 400; letter-spacing: 0.01em; }
.vtl-preset-luxury .vtl-label   { letter-spacing: 0.32em; }

.vtl-preset-minimal .vtl-heading { font-weight: 500; letter-spacing: -0.01em; }
.vtl-preset-minimal .vtl-label   { letter-spacing: 0.08em; }

.vtl-preset-modern .vtl-heading { font-weight: 700; letter-spacing: -0.02em; }
.vtl-preset-modern .vtl-marker  { box-shadow: 0 0 0 4px rgba(0,0,0,0.04); }

.vtl-preset-spiritual .vtl-heading { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 300; }
.vtl-preset-spiritual .vtl-label   { font-style: italic; letter-spacing: 0.22em; }

.vtl-preset-editorial .vtl-heading { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; }
.vtl-preset-editorial .vtl-item    { border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: calc(var(--vtl-item-gap) - 8px); margin-bottom: 8px; }
.vtl-preset-editorial .vtl-item:last-child { border-bottom: none; }


/* ===== NEW: Dynamic Marker Alignment ===== */

.vtl-item[data-align="top"] .vtl-marker {
    top: 0;
    transform: translate(-50%, 0);
}

.vtl-item[data-align="heading"] .vtl-marker {
    top: var(--vtl-heading-center, 50%);
    transform: translate(-50%, -50%);
}

.vtl-item[data-align="content-center"] .vtl-marker {
    top: 50%;
    transform: translate(-50%, -50%);
}

.vtl-item[data-align="full-center"] .vtl-marker {
    top: 50%;
    transform: translate(-50%, -50%);
}

.vtl-item[data-align="bottom"] .vtl-marker {
    top: 100%;
    transform: translate(-50%, -100%);
}

.vtl-item[data-align="custom"] .vtl-marker {
    top: calc(50% + var(--vtl-custom-offset, 0px));
    transform: translate(-50%, -50%);
}



/* ===== NEW: Line perfectly meets marker ===== */

.vtl-line-top {
    height: calc(var(--vtl-marker-top, 50%) - (var(--vtl-marker-size) / 2));
}

.vtl-line-bottom {
    top: calc(var(--vtl-marker-top, 50%) + (var(--vtl-marker-size) / 2));
}


/* ===== NEW: Accurate progress alignment ===== */

.vtl-has-progress::after {
    top: var(--vtl-progress-start, 0px);
    height: var(--vtl-progress-height, 0px);
}



/* ===== FIX: Marker wrap should not distort alignment ===== */

.vtl-marker-wrap {
    align-self: stretch;
    position: relative;
}




/* ===== Enhancement: smoother animation ===== */

.vtl-marker,
.vtl-line,
.vtl-has-progress::after {
    will-change: transform, top, height;
}




/* Dark mode */
@media (prefers-color-scheme: dark) {
    .vtl-heading { color: #f5f1ea; }
    .vtl-desc { color: #c9c4bb; }
    .vtl-link { color: #f5f1ea; }
    .vtl-glass .vtl-content {
        background: rgba(20, 18, 16, 0.45);
        border-color: rgba(255, 255, 255, 0.08);
    }
}

/* Responsive */
@media (max-width: 767px) {
    .vtl-list { --vtl-marker-col: 56px; --vtl-item-gap: 36px; }
    .vtl-heading { font-size: 1.25rem; }

    .vtl-mobile-centered .vtl-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .vtl-mobile-centered .vtl-marker-wrap {
        width: 100%;
        flex: 0 0 auto;
        min-height: calc(var(--vtl-marker-size) * 2 + 24px);
    }
    .vtl-mobile-centered .vtl-line { left: 50%; }
    .vtl-mobile-centered .vtl-marker { left: 50%; }
    .vtl-mobile-centered.vtl-has-progress::before,
    .vtl-mobile-centered.vtl-has-progress::after { left: 50%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .vtl-reveal .vtl-item { opacity: 1; transform: none; transition: none; }
    .vtl-pulse .vtl-marker::before { animation: none; }
    .vtl-marker, .vtl-content, .vtl-heading, .vtl-link { transition: none; }
}


/* ===== FIX: Mobile spacing + overlap ===== */

@media (max-width: 767px) {
    .vtl-mobile-centered .vtl-marker-wrap {
        min-height: calc(var(--vtl-marker-size) * 2 + 32px);
    }

    .vtl-mobile-centered .vtl-content {
        margin-top: 8px;
    }
}