.asc-process{
    --asc-navy:#30364F;
    --asc-accent:#ACBAC4;
    --asc-card-bg:#fff;
    --asc-radius:28px;
    --asc-desktop-scroll:340vh;
    position:relative;
    width:100%;
    background:transparent!important;
    color:var(--asc-navy);
    overflow:visible;
}

.asc-process-scroll{
    position:relative;
    height:var(--asc-desktop-scroll);
    background:transparent!important;
}

.asc-process-sticky{
    position:sticky;
    top:18vh;
    width:100%;
    height:64vh;
    min-height:520px;
    overflow:hidden;
    box-sizing:border-box;
    background:transparent!important;
}

.asc-process-stage{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:60px;
    overflow:hidden;
    background:transparent!important;
}

.asc-process-card{
    position:absolute;
    top:50%;
    height:74%;
    min-height:360px;
    overflow:hidden;
    border-radius:var(--asc-radius);
    background:var(--asc-card-bg);
    opacity:0;
    transform:translateY(-50%);
    box-shadow:0 20px 65px rgba(48,54,79,.065);
    will-change:left,width,top,height,opacity,transform;
}

.asc-process-inner{
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:52% 48%;
    box-sizing:border-box;
}

.asc-process-media{
    position:relative;
    margin:10px;
    overflow:hidden;
    border-radius:calc(var(--asc-radius) - 8px);
    background:#ddd;
}

.asc-process-media video,
.asc-process-media img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    transform:scale(1.001);
}

.asc-process-media video{
    pointer-events:none;
}

.asc-process-content{
    position:relative;
    min-width:0;
    padding:28px 32px 28px 28px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
}

.asc-process-content::before{
    content:attr(data-step);
    position:absolute;
    right:var(--asc-watermark-right,18px);
    bottom:var(--asc-watermark-bottom,-28px);
    font-size:var(--asc-watermark-size,190px);
    font-weight:700;
    line-height:1;
    letter-spacing:var(--asc-watermark-spacing,-10px);
    color:var(--asc-accent);
    opacity:var(--asc-watermark-opacity,.13);
    pointer-events:none;
    user-select:none;
    white-space:nowrap;
    z-index:0;
}

.asc-process-content>*{
    position:relative;
    z-index:2;
}

.asc-process-kicker{
    margin-bottom:12px;
    font-size:var(--asc-kicker-size,13px);
    font-weight:700;
    line-height:1;
    letter-spacing:var(--asc-kicker-spacing,1.6px);
    text-transform:uppercase;
    color:var(--asc-accent);
    white-space:nowrap;
}

.asc-process-title{
    margin:0;
    max-width:100%;
    font-size:var(--asc-title-size,54px);
    line-height:.96;
    letter-spacing:var(--asc-title-spacing,-2.2px);
    font-weight:400;
    color:var(--asc-navy);
    white-space:nowrap;
}

.asc-process-description{
    margin:0;
    max-width:500px;
    font-size:var(--asc-description-size,18px);
    line-height:1.5;
    color:var(--asc-navy);
    opacity:.68;
}

.asc-process-progress-wrap{
    position:absolute;
    left:5vw;
    right:5vw;
    bottom:19px;
    z-index:100;
    display:flex;
    align-items:center;
    gap:14px;
}

.asc-process-progress-label{
    flex:0 0 auto;
    font-size:9px;
    color:var(--asc-navy);
    opacity:.28;
}

.asc-process-progress{
    position:relative;
    flex:1;
    height:2px;
    overflow:hidden;
    background:color-mix(in srgb, var(--asc-navy) 10%, transparent);
}

.asc-process-progress-bar{
    position:absolute;
    inset:0;
    background:var(--asc-navy);
    transform:scaleX(0);
    transform-origin:left center;
}

.asc-process-card.is-previous .asc-process-inner{
    grid-template-columns:46% 54%;
}

.asc-process-card.is-previous .asc-process-media{
    margin:9px;
    border-radius:calc(var(--asc-radius) - 10px);
}

.asc-process-card.is-previous .asc-process-content{
    padding:16px 14px 16px 12px;
}

@media(max-width:1100px){
    .asc-process-content{
        padding:24px 25px;
    }
}

@media(max-width:767px){

    .asc-process-scroll{
        height:auto;
    }

    .asc-process-sticky{
        position:relative;
        top:auto;
        width:100%;
        height:72svh;
        min-height:500px;
        max-height:640px;
        transform:none;
        overflow:hidden;
    }

    .asc-process-stage{
        top:8px;
        bottom:34px;
        left:0;
        right:0;
        overflow:hidden;
    }

    .asc-process-card{
        left:5%!important;
        width:90%!important;
        height:95%!important;
        min-height:0;
        border-radius:22px;
        will-change:top,opacity,transform;
        backface-visibility:hidden;
        -webkit-backface-visibility:hidden;
        transform-origin:center center;
    }

    .asc-process-inner,
    .asc-process-card.is-previous .asc-process-inner{
        display:grid;
        grid-template-columns:1fr;
        grid-template-rows:56% 44%;
    }

    .asc-process-media,
    .asc-process-card.is-previous .asc-process-media{
        position:relative;
        inset:auto;
        margin:8px;
        height:auto;
        border-radius:16px;
    }

    .asc-process-content,
    .asc-process-card.is-previous .asc-process-content{
        display:flex;
        padding:17px 19px 20px;
    }

    .asc-process-progress-wrap{
        left:7vw;
        right:7vw;
        bottom:7px;
    }
}


/* v1.2 typography + links */
.asc-process-title{
    font-family:var(--asc-title-family,inherit);
    font-weight:var(--asc-title-weight,400);
}
.asc-process-description{
    font-family:var(--asc-description-family,inherit);
    font-weight:var(--asc-description-weight,400);
}
.asc-process-kicker{
    font-family:var(--asc-kicker-family,inherit);
    font-weight:var(--asc-kicker-weight,700);
}
.asc-process-content::before{
    font-family:var(--asc-watermark-family,inherit);
    font-weight:var(--asc-watermark-weight,700);
}
.asc-process-description a{
    color:var(--asc-link-color,var(--asc-navy));
    text-decoration:underline;
    text-underline-offset:2px;
}
.asc-process-description strong,
.asc-process-description b{
    font-weight:700;
}
.asc-process-description em,
.asc-process-description i{
    font-style:italic;
}
.asc-process-media-link{
    display:block;
    width:100%;
    height:100%;
    color:inherit;
    text-decoration:none;
}
.asc-process-card.has-card-link{
    cursor:pointer;
}