@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap');


/* ══ WRAPPER ══ */
.bhs-wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    font-family: 'Jost', sans-serif;
    display: flex;
}

/* ══ LEFT WRAP — full height, slides stack inside ══ */
.bhs-left-wrap {
    width: 42%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

/* each text slide fills the left wrap */
.bhs-text-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 40px 0 7%;
    opacity: 0;
    transition: opacity 0.9s ease;
    z-index: 1;
}
.bhs-text-slide.bhs-active {
    opacity: 1;
    z-index: 2;
}

/* leaf watermark */
.bhs-leaf {
    position: absolute;
    bottom: -60px; left: -80px;
    width: 500px; height: 500px;
    opacity: .06; z-index: 0;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cg fill='%238a7a60'%3E%3Cellipse cx='250' cy='360' rx='45' ry='140' transform='rotate(-30 250 360)'/%3E%3Cellipse cx='200' cy='310' rx='35' ry='115' transform='rotate(-55 200 310)'/%3E%3Cellipse cx='300' cy='330' rx='40' ry='125' transform='rotate(-10 300 330)'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
}

/* ══ TEXT ELEMENTS ══ */
.bhs-tag {
    display: block;
    font-size: 10px; font-weight: 500;
    letter-spacing: 5px; text-transform: uppercase;
    color: #7a6e64; margin-bottom: 20px;
}
.bhs-heading {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(36px, 4.5vw, 70px) !important;
    font-weight: 400 !important; line-height: 1.05 !important;
    color: #3a3028 !important; margin: 0 0 24px !important;
    padding: 0 !important; border: none !important; background: none !important;
}
.bhs-desc {
    font-size: 13px; font-weight: 300;
    line-height: 1.9; color: #7a6e64;
    max-width: 360px; margin-bottom: 36px;
}
.bhs-btn {
    display: inline-block; padding: 13px 36px;
    border: 1px solid #3a3028 !important; border-radius: 40px;
    font-size: 10px; font-weight: 500; letter-spacing: 3px;
    text-transform: uppercase; color: #3a3028 !important;
    text-decoration: none !important; background: transparent !important;
    transition: all .3s ease; font-family: 'Jost', sans-serif; cursor: pointer;
    align-self: flex-start;
}
.bhs-btn:hover { background: #3a3028 !important; color: #fff !important; }

/* ══ DOTS ══ */
.bhs-dots {
    position: absolute; bottom: 30px; left: 7%;
    display: flex; gap: 8px; align-items: center; z-index: 10;
}
.bhs-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #7a6e64; opacity: .4;
    cursor: pointer; transition: all .35s ease;
}
.bhs-dot.bhs-dot-active {
    width: 24px; height: 6px; border-radius: 4px;
    background: #3a3028; opacity: 1;
}

/* ══ RIGHT — 3 permanent scrolling columns ══ */
.bhs-right {
    flex: 1;
    height: 100%;
    display: flex;
    gap: 12px;
    padding: 0 12px 0 8px;
    overflow: hidden;
    align-items: flex-start;

    position: relative;
    z-index: 3;
}

.bhs-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

.bhs-col-1 { animation: bhs-scroll-down 16s linear infinite; }
.bhs-col-2 { animation: bhs-scroll-up   16s linear infinite; }
.bhs-col-3 { animation: bhs-scroll-down 18s linear infinite; }

@keyframes bhs-scroll-down {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
@keyframes bhs-scroll-up {
    0%   { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

/* ══ IMAGE ITEMS ══ */
.bhs-img-item {
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    display: block;
    background: #e8ddd4;
}
.bhs-img-item img,
.bhs-img-item svg {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center !important;
    display: block !important;
}

/* PILL shape — padding-bottom trick for correct ratio */
.bhs-img-item.bhs-oval {
    height: 0 !important; 
    padding-bottom: 176% !important;
    border-radius: 999px !important;
}

/* ══ TEXT ENTRY ANIMATIONS ══ */
@keyframes bhs-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.bhs-text-slide.bhs-active .bhs-tag     { animation: bhs-fade-up .6s ease both .05s; }
.bhs-text-slide.bhs-active .bhs-heading { animation: bhs-fade-up .7s ease both .2s;  }
.bhs-text-slide.bhs-active .bhs-desc    { animation: bhs-fade-up .7s ease both .35s; }
.bhs-text-slide.bhs-active .bhs-btn     { animation: bhs-fade-up .7s ease both .5s;  }

/* ══ MOBILE ══ */
@media (max-width: 800px) {
    .bhs-wrap { flex-direction: column; height: auto; min-height: 100vh; }
    .bhs-left-wrap { width: 100%; min-height: 50vh; position: relative; }
    .bhs-right { width: 100%; height: 55vw; padding: 0 10px; overflow: hidden; }
    .bhs-heading { font-size: 28px !important; }
    .bhs-dots { left: 50%; transform: translateX(-50%); }
}