.ht-scroll-trigger-69e1c677 {
    position: relative;
}

.ht-sticky-container-69e1c677 {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

.ht-container-69e1c677 {
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ht-slides-viewport-69e1c677 {
    width: 100%;
    overflow: hidden;
}

.ht-slides-track-69e1c677 {
    display: flex;
    transition: transform 0.1s cubic-bezier(0.1, 0.8, 0.2, 1);
    will-change: transform;
}

.ht-slide-69e1c677 {
    flex: 0 0 auto;
    box-sizing: border-box;
}

.ht-slide-content-69e1c677 {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.ht-image-wrap-69e1c677 {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
	.ht-image-wrap-69e1c677 {
		padding-left: 10%;
		padding-right: 10%;
	}
}

.ht-image-wrap-69e1c677 img {
    width: auto;
    height: 340px;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

@media (max-width: 767px) {
	.ht-image-wrap-69e1c677 img {
		width: 100% !important;
		height: auto !important;
		max-height: 270px;
	}
}
@media (max-width: 567px) {
	.ht-image-wrap-69e1c677 img {
		max-height: 170px;
	}
}

.ht-text-wrap-69e1c677 {
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 30px;
    padding-left: 85px;
    padding-right: 125px;
    box-sizing: content-box;
    flex: 0 0 420px;
    width: 420px;
}

.ht-slide-year-69e1c677 {
    font-size: 5.5rem;
    font-weight: 300;
    margin: 0;
    line-height: 1;
    color: #5b4a3f;
    letter-spacing: -2px;
}

.ht-slide-desc-69e1c677 {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #333333;
    margin: 0;
}

/* BOTTOM PROGRESS TIMELINE BAR */
.ht-bottom-bar-69e1c677 {
    width: 100%;
    margin-top: 70px;
    position: relative;
    z-index: 10;
    box-sizing: border-box;
}

.ht-progress-track-69e1c677 {
    width: 100%;
    height: 1px;
    background-color: #e6e0da;
    position: relative;
}

@media (max-width: 768px) {
    .ht-progress-track-69e1c677 {
		width: 80%;
		left: 10%;
	}
}

.ht-progress-fill-69e1c677 {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 2px;
    width: 0%;
    background-color: #5b4a3f;
    transition: width 0.1s ease-out;
}

.ht-years-row-69e1c677 {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    padding-left: 7%;
    padding-right: 7%;
    box-sizing: border-box;
}

.ht-bar-year-69e1c677 {
    font-size: 0.9rem;
    color: #999999;
    cursor: pointer;
    transition: color 0.3s ease, font-weight 0.3s ease;
    user-select: none;
}

.ht-bar-year-69e1c677.ht-active {
    color: #5b4a3f;
    font-weight: bold;
}

/* TABLET + MOBILE: image stacks above text, year stacks above description
   (left aligned), and the year labels under the progress line are hidden -
   only the line itself shows since there's no room to keep them aligned to
   individual slides at this width. */
@media (max-width: 1024px) {
    .ht-slide-content-69e1c677 {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .ht-text-wrap-69e1c677 {
        flex-direction: column;
        align-items: flex-start;
        /* Content-box on desktop lets the padding double as the inter-slide
           gap (by design). On mobile/tablet there's no "next slide sharing
           space" concept in the same way, so padding needs to be absorbed
           into whatever width the Content Width field is set to instead of
           adding on top of it, or it overflows past the slide. */
        box-sizing: border-box;
    }

    .ht-years-row-69e1c677 {
        display: none;
    }
}

/* Tablet only */
@media (min-width: 769px) and (max-width: 1024px) {
    .ht-slide-69e1c677 {
        width: 86%;
        margin-right: 7%;
    }
}

/* Mobile only */
@media (max-width: 768px) {
    .ht-slide-69e1c677 {
        width: 100%;
        margin-right: 0%;
    }
}