:root{

/* COLORS */
--signature-bg:rgba(255,122,24,0.05) ;

--signature-accent:#ff7a00;
--signature-accent-light:#ff9a3d;

--signature-white:rgb(220, 219, 219);

--signature-accent-glow:rgba(255,120,0,0.08);
--signature-accent-grid:rgba(255,120,0,0.03);
--signature-border:rgba(255,120,0,0.10);
--signature-border-light:rgba(255,120,0,0.12);
--signature-border-frame:rgba(255,120,0,0.18);

--signature-text-muted:rgba(255,255,255,0.6);
--signature-text-light:rgba(255,255,255,0.4);

--signature-shadow-main:
0 30px 90px rgba(0,0,0,0.75),
inset 0 0 0 1px rgba(255,255,255,0.05),
inset 0 0 0 2px rgba(255,120,0,0.12);

/* SIZES */

--signature-section-padding:80px;
--signature-mobile-padding:100px;

--signature-container-width:min(92%,1400px);

--signature-grid-gap:60px;

--signature-preview-height:460px;
--signature-preview-height-desktop:520px;

--signature-preview-radius:28px;
--signature-frame-radius:22px;
--signature-image-radius:24px;

--signature-item-padding:22px 0;
--signature-item-padding-desktop:20px 0;

--signature-service-gap:28px;

--signature-mobile-image-height:240px;

/* TYPOGRAPHY */

--signature-number-size:13px;
--signature-text-size:14px;
--signature-title-size:clamp(34px,3vw,56px);
--signature-mobile-title-size:30px;
--signature-small-number-size:12px;

--signature-title-spacing:-2px;
--signature-title-line:0.95;
--signature-text-line:1.6;

/* ANIMATION */

--signature-transition:.35s ease;
--signature-transition-image:.5s ease;
--signature-transition-preview:.6s ease;

}




.signature-services{

    position:relative;
    min-height:100vh;
    padding:var(--signature-section-padding) 0;

    background:var(--signature-bg);

    color:var(--signature-white);

    display:flex;
    align-items:center;

    overflow:hidden;
}

.signature-services::before{

    content:"";
    position:absolute;
    inset:0;

    background:
    linear-gradient(
    90deg,
    transparent 0%,
    var(--signature-accent-grid) 50%,
    transparent 100%
    );

    opacity:.7;

    transform:skewY(-6deg);

    pointer-events:none;
}

/* WRAPPER */

.services-container{

    width:var(--signature-container-width);

    margin:auto;

    display:grid;

    grid-template-columns:1fr .8fr;

    gap:var(--signature-grid-gap);

    align-items:center;
}

/* LIST */

.services-list{

    display:flex;
    flex-direction:column;
}

.service-item{

    display:flex;

    gap:var(--signature-service-gap);

    padding:var(--signature-item-padding);

    border-bottom:1px solid var(--signature-border);

    cursor:pointer;

    transition:var(--signature-transition);

    position:relative;
}

.service-item:hover{

    transform:translateX(6px);
}

.service-item::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:0%;

    height:1px;

    background:
    linear-gradient(
    90deg,
    var(--signature-accent),
    transparent
    );

    transition:.5s ease;
}

.service-item:hover::after{

    width:60%;
}

.service-item.active::before{

    content:"";

    position:absolute;

    left:-12px;
    top:10px;
    bottom:10px;

    width:2px;

    background:var(--signature-accent);

    border-radius:4px;

    animation:glowPulse 1.8s infinite;
}

@keyframes glowPulse{

0%,100%{
opacity:.5;
}

50%{
opacity:1;
}

}

/* NUMBER */

.service-number{

    font-size:var(--signature-number-size);

    color:var(--signature-text-light);

    min-width:40px;

    padding-top:6px;
}

.service-item.active .service-number{

    color:var(--signature-accent-light);
}

/* TITLE */

.service-content h2{

    font-size:var(--signature-title-size);

    font-weight:900;

    letter-spacing:var(--signature-title-spacing);

    line-height:var(--signature-title-line);

    margin-bottom:10px;

    transition:.3s ease;
}

.service-item:hover h2{

    transform:translateX(2px);
}

/* TEXT */

.service-content p{

    font-size:var(--signature-text-size);

    line-height:var(--signature-text-line);

    color:var(--signature-text-muted);
}

/* IMAGE */

.services-preview{

    position:relative;

    height:var(--signature-preview-height);

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:var(--signature-preview-radius);

    overflow:hidden;

    background:var(--signature-preview-bg);

    box-shadow:var(--signature-shadow-main);
}

.services-preview::before{

    content:"";

    position:absolute;

    inset:14px;

    border-radius:var(--signature-frame-radius);

    border:1px solid var(--signature-border-frame);

    pointer-events:none;
}

.services-preview::after{

    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
    to bottom,
    transparent 40%,
    rgba(0,0,0,.85) 100%
    );

    pointer-events:none;
}

.preview-image{

    position:absolute;

    width:90%;
    height:90%;

    opacity:0;

    transform:scale(1.05);

    transition:var(--signature-transition-preview);
}

.preview-image.active{

    opacity:1;

    transform:scale(1);
}

.preview-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:var(--signature-image-radius);

    filter:
    brightness(.78)
    contrast(1.08);

    transition:var(--signature-transition-image);
}

.preview-image.active img{

    transform:scale(1.02);
}

/* MOBILE IMAGE */

.inline-mobile-img{

display:none;
margin-top:15px;
}

.service-item.active .inline-mobile-img{

display:none;
}

.inline-mobile-img img{

width:100%;
height:var(--signature-mobile-image-height);

object-fit:cover;

border-radius:20px;

display:block;
}

/* DESKTOP */

@media(min-width:769px){

.services-preview{

height:var(--signature-preview-height-desktop);
}

.service-item{

padding:var(--signature-item-padding-desktop);
}

}

/* MOBILE */

@media(max-width:768px){

.signature-services{

padding:var(--signature-mobile-padding) 0;
}

.services-container{

display:flex;
flex-direction:column;
}

.service-item.active .inline-mobile-img{

display:block;
}

.services-preview{

display:none!important;
}

.service-item:hover{

transform:none;
}

}

/* SMALL MOBILE */

@media(max-width:480px){

.service-content h2{

font-size:var(--signature-mobile-title-size);
}

.service-number{

font-size:var(--signature-small-number-size);
}

}