.ehpl-list{
    --ehpl-row-min-h:154px;
    --ehpl-pad-t:0px;
    --ehpl-pad-r:4.3%;
    --ehpl-pad-b:0px;
    --ehpl-pad-l:4.3%;
    --ehpl-number-w:205px;
    --ehpl-copy-gap:0px;
    --ehpl-copy-pt:24px;
    --ehpl-copy-pr:25px;
    --ehpl-copy-pb:24px;
    --ehpl-copy-pl:0px;
    --ehpl-title-mb:11px;
    --ehpl-image-w:335px;
    --ehpl-image-h:216px;
    --ehpl-image-radius:31px;
    --ehpl-image-right:12.5%;
    --ehpl-row-gap:18px;
    --ehpl-arrow-gap:24px;
    --ehpl-arrow-size:78px;
    --ehpl-arrow-icon-size:37px;
    --ehpl-arrow-border:1px;
    --ehpl-normal-bg:#fff;
    --ehpl-hover-bg:#595959;
    --ehpl-accent:#00551d;
    --ehpl-hover-accent:#d8ff27;
    --ehpl-content:#5d5d5d;
    --ehpl-hover-content:#f4f4f4;
    --ehpl-number:#e9e9e9;
    --ehpl-hover-number:#737373;

    width:100%;
    overflow:visible;
}

.ehpl-item{
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
    min-height:var(--ehpl-row-min-h);
    padding:var(--ehpl-pad-t) var(--ehpl-pad-r) var(--ehpl-pad-b) var(--ehpl-pad-l);
    border-top:1px solid;
    transition:background-color .32s ease;
    isolation:isolate;
    box-sizing:border-box;
}

.ehpl-item:last-child{
    border-bottom:1px solid;
}

.ehpl-number{
    width:var(--ehpl-number-w);
    flex:0 0 var(--ehpl-number-w);
    margin-right:var(--ehpl-copy-gap);
    font-size:96px;
    line-height:.85;
    font-weight:500;
    letter-spacing:-.06em;
    transition:color .32s ease;
    user-select:none;
}

.ehpl-copy{
    position:relative;
    z-index:3;
    min-width:0;
    padding:var(--ehpl-copy-pt) var(--ehpl-copy-pr) var(--ehpl-copy-pb) var(--ehpl-copy-pl);
    flex:1 1 auto;
}

.ehpl-title{
    font-size:25px;
    line-height:1.15;
    font-weight:600;
    margin:0 0 var(--ehpl-title-mb);
    transition:color .32s ease;
}

.ehpl-description{
    font-size:18px;
    line-height:1.45;
    font-weight:400;
    transition:color .32s ease;
    max-width:900px;
}

.ehpl-image-wrap{
    position:absolute;
    z-index:2;
    right:var(--ehpl-image-right);
    top:50%;
    width:var(--ehpl-image-w);
    height:var(--ehpl-image-h);
    border-radius:var(--ehpl-image-radius);
    transform:translateY(-50%) scale(.92);
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    pointer-events:none;
    transition:
        opacity .28s ease,
        transform .38s cubic-bezier(.2,.8,.2,1),
        visibility .28s ease;
    box-shadow:0 14px 35px rgba(0,0,0,.08);
}

.ehpl-image-wrap img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:inherit;
}

.ehpl-arrow{
    position:relative;
    z-index:4;
    flex:0 0 var(--ehpl-arrow-size);
    display:flex;
    align-items:center;
    justify-content:center;
    width:var(--ehpl-arrow-size);
    height:var(--ehpl-arrow-size);
    border-style:solid;
    border-width:var(--ehpl-arrow-border);
    border-radius:50%;
    text-decoration:none;
    margin-left:var(--ehpl-arrow-gap);
    transition:color .32s ease,border-color .32s ease,transform .32s ease;
    box-sizing:border-box;
}

.ehpl-arrow svg{
    width:var(--ehpl-arrow-icon-size);
    height:var(--ehpl-arrow-icon-size);
    transition:transform .28s ease;
}

.ehpl-arrow:hover{
    transform:rotate(2deg) scale(1.03);
}

.ehpl-item:hover .ehpl-image-wrap,
.ehpl-item.is-active .ehpl-image-wrap,
.ehpl-item:focus-within .ehpl-image-wrap{
    opacity:1;
    visibility:visible;
    transform:translateY(-50%) scale(1);
}

.ehpl-item:hover .ehpl-arrow svg,
.ehpl-item.is-active .ehpl-arrow svg{
    transform:translate(2px,-2px);
}

/* Tablet: same hover layout as desktop, but every dimension comes from
   Elementor's tablet responsive control values. */
@media (max-width:1024px) and (min-width:768px){
    .ehpl-image-wrap{
        max-width:calc(100% - var(--ehpl-pad-l) - var(--ehpl-pad-r) - var(--ehpl-arrow-size) - var(--ehpl-arrow-gap));
    }
}

/* Mobile layout:
   line 1 = number + heading/content
   line 2 = image + arrow
   no hover behavior. All sizes/paddings still use responsive Elementor values. */
@media (max-width:767px){
    .ehpl-item{
        display:grid;
        grid-template-columns:var(--ehpl-number-w) minmax(0,1fr) var(--ehpl-arrow-size);
        grid-template-rows:auto auto;
        column-gap:var(--ehpl-copy-gap);
        row-gap:var(--ehpl-row-gap);
        align-items:start;
        background-color:var(--ehpl-normal-bg) !important;
    }

    .ehpl-number{
        grid-column:1;
        grid-row:1;
        width:var(--ehpl-number-w);
        min-width:0;
        flex:none;
        margin-right:0;
        align-self:start;
        color:var(--ehpl-number) !important;
    }

    .ehpl-copy{
        grid-column:2 / 4;
        grid-row:1;
        padding:var(--ehpl-copy-pt) var(--ehpl-copy-pr) var(--ehpl-copy-pb) var(--ehpl-copy-pl);
        min-width:0;
        align-self:start;
    }

    .ehpl-image-wrap{
        position:relative;
        grid-column:1 / 3;
        grid-row:2;
        right:auto;
        top:auto;
        width:var(--ehpl-image-w);
        max-width:100%;
        height:var(--ehpl-image-h);
        justify-self:start;
        align-self:center;
        opacity:1;
        visibility:visible;
        transform:none;
    }

    .ehpl-arrow{
        grid-column:3;
        grid-row:2;
        width:var(--ehpl-arrow-size);
        height:var(--ehpl-arrow-size);
        flex:none;
        margin-left:var(--ehpl-arrow-gap);
        align-self:center;
        justify-self:end;
        color:var(--ehpl-accent) !important;
        border-color:var(--ehpl-accent) !important;
        transform:none !important;
    }

    .ehpl-title,
    .ehpl-item:hover .ehpl-title,
    .ehpl-item.is-active .ehpl-title,
    .ehpl-item:focus-within .ehpl-title{
        color:var(--ehpl-accent) !important;
    }

    .ehpl-description,
    .ehpl-item:hover .ehpl-description,
    .ehpl-item.is-active .ehpl-description,
    .ehpl-item:focus-within .ehpl-description{
        color:var(--ehpl-content) !important;
    }

    .ehpl-item:hover,
    .ehpl-item.is-active,
    .ehpl-item:focus-within{
        background-color:var(--ehpl-normal-bg) !important;
    }

    .ehpl-item:hover .ehpl-image-wrap,
    .ehpl-item.is-active .ehpl-image-wrap,
    .ehpl-item:focus-within .ehpl-image-wrap{
        opacity:1;
        visibility:visible;
        transform:none;
    }

    .ehpl-item:hover .ehpl-arrow svg,
    .ehpl-item.is-active .ehpl-arrow svg{
        transform:none;
    }
}

@media (prefers-reduced-motion:reduce){
    .ehpl-item,
    .ehpl-number,
    .ehpl-title,
    .ehpl-description,
    .ehpl-image-wrap,
    .ehpl-arrow,
    .ehpl-arrow svg{
        transition:none !important;
    }
}