.offer-card {
    position: relative;
    border-color: none;
    transition: border-color .25s ease;
}

.offer-card::after {
    content: "";
    position: absolute;
    inset: -2px;              /* border thickness */
    border: 2px solid var(--rmt-green);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.offer-card.is-hovered::after {
    opacity: 1;
}




.success-block{
    position:relative;
    overflow:hidden;
    background:var(--grey-100);
    border-radius:var(--radius-sm);
    border-top:0 solid transparent;
    border-bottom:0 solid transparent;
    transition:
        background var(--t-med) var(--ease-std),
        border-radius var(--t-med) var(--ease-std),
        border-width var(--t-med) var(--ease-std),
        border-color var(--t-med) var(--ease-std);
}

.success-block.is-open{
    background:transparent;
    border-radius:0;
    border-top-width:var(--border-sm);
    border-bottom-width:var(--border-sm);
    border-top-color:var(--grey-700);
    border-bottom-color:var(--grey-700);
}

/* body animation driven by JS height */
.success-body{
    height:0;
    opacity:0;
    overflow:hidden;
    transition:
        height 320ms var(--ease-std),
        opacity 220ms var(--ease-std);
}

.success-block.is-open .success-body{
    opacity:1;
}

/* toggle icon */
.success-toggle{
    position:relative;
    width:1.25rem;
    height:1.25rem;
    border:2px solid var(--grey-800);
    border-radius:var(--radius-circle);
    transition:border-color var(--t-fast),transform var(--t-fast);
}

.success-toggle::before,
.success-toggle::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:var(--grey-800);
    transition:opacity var(--t-fast);
}

.success-toggle::before{ width:10px;height:2px; }
.success-toggle::after{ width:2px;height:10px; }

.success-block.is-open .success-toggle{
    border-color:var(--rmt-green);
}
.success-block.is-open .success-toggle::after{
    opacity:0;
}





/* ===== ROOT ===== */
.carousel{
    position:relative;
    width:100%;
    display:flex;
    align-items:center;
    gap:2rem;
}

/* ===== NAV ===== */
.carousel-nav{
    flex:0 0 3.5rem;
    height:3.5rem;
    border-radius:var(--radius-circle);
    background:rgba(255,255,255,.95);
    box-shadow:var(--shadow-md);
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform var(--t-fast) var(--ease-std),box-shadow var(--t-fast);
    z-index:var(--z-20);
}

.carousel-nav:hover{
    transform:scale(1.06);
    box-shadow:var(--shadow-lg);
}

.carousel-arrow{
    width:10px;
    height:10px;
    border-top:2px solid var(--grey-800);
    border-right:2px solid var(--grey-800);
}
.carousel-arrow.left{ transform:rotate(-135deg); }
.carousel-arrow.right{ transform:rotate(45deg); }

/* ===== VIEWPORT ===== */
.carousel-viewport{
    overflow:hidden;
    flex:1;
    position:relative;
}

/* ===== TRACK ===== */
.carousel-track{
    display:flex;
    gap:3rem;
    will-change:transform;
    cursor:grab;
    transition:transform var(--t-med) var(--ease-std);
}
.carousel-track.dragging{
    cursor:grabbing;
    transition:none;
}

/* ===== SLIDES ===== */
.carousel-slide{
    flex:0 0 44rem;
    height:28rem;
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow-md);
    position:relative;
    overflow:hidden;
    transition:transform var(--t-med) var(--ease-std),box-shadow var(--t-med);
}

.carousel-slide.is-active{
    box-shadow:var(--shadow-lg);
}

/* ===== MEDIA ===== */
.carousel-media{
    position:relative;
    width:100%;
    height:100%;
}

.carousel-img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* ===== OVERLAY ===== */
.carousel-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.35);
    display:flex;
    align-items:flex-end;
    padding:1.5rem;
    opacity:0;
    transition:opacity var(--t-med) var(--ease-std);
    pointer-events:none;
}

.carousel-label{
    color:#fff;
    font-size:1.25rem;
    font-weight:600;
    transform:translateY(12px);
    transition:transform var(--t-med) var(--ease-std);
}

.carousel-slide:hover .carousel-overlay{
    opacity:1;
}

.carousel-slide:hover .carousel-label{
    transform:translateY(0);
}

/* ===== EDGE FADE HOOK ===== */
.carousel-viewport::before,
.carousel-viewport::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:4rem;
    pointer-events:none;
    z-index:10;
}

/* ===== MOBILE ===== */
@media(max-width:810px){

    .carousel{
        display:block;
    }

    .carousel-nav{
        display:none;
    }

    .carousel-viewport{
        overflow:hidden;
    }

    .carousel-track{
        gap:var(--space-4);
        padding:0 10%;
    }

    .carousel-slide{
        flex:0 0 80%;
        height:20rem;
    }

}

@media(max-width:810px){

    #hero-timelapse{
        height:36rem;
    }

    .offer-card{
        width:100%;
        max-width:32rem;
        min-height:22rem;
        height:auto;
    }

    #success-image{
        height:32rem;
        margin:0 auto;
    }

    #success-image-2{
        height:32rem;
        margin:0 auto;
    }

    #hero-timelapse-2{
        height:36rem;
    }

}

@media(max-width:400px){

    #offers-inner, #approach-inner, #carousel-inner, #ownership-inner{
        padding:1rem;
    }

    .offer-card{
        min-height:24rem;
        height:auto;
    }

    #approach-row{
        width:100%;
    }

    #success-image, #success-image-2{
        width:100%;
        height: 24rem;
    }

    .text-xl{
        font-size:1.3rem;
    }

}

@media (max-width:810px){

    .carousel-track{
        gap:2rem;
        padding:0;
    }

    .carousel-slide{
        flex:0 0 84%;
        height:20rem;
        margin:0 calc((100% - 84%) / 2);
    }

}

@media (max-width:640px){

    .carousel-track{
        gap:1rem;
        padding:0;
    }

    .carousel-slide{
        flex:0 0 88%;
        height:17rem;
        margin:0 calc((100% - 88%) / 2);
    }

}

@media (max-width:480px){

    .carousel-track{
        gap:0.4rem;
        padding:0;
    }

    .carousel-slide{
        flex:0 0 92%;
        height:15rem;
        margin:0;
    }

}