:root {

/* =========================
   EXPERIENCE SECTION (GARDENER)
========================= */

/* background */
--exp-bg:
linear-gradient(
180deg,
#0a120d 0%,
#0b1510 50%,
#0a110c 100%
);

/* text */
--exp-white:var(--global-color);
--exp-text-soft:rgba(235,240,235,0.70);
--exp-text-muted:rgba(235,240,235,0.60);

/* accent (green system) */
--exp-accent:#9fd8b0;
--exp-accent-soft:#bfe9cc;
--exp-accent-mid:#7fc99a;

/* borders */
--exp-card-border:rgba(159,216,176,0.14);
--exp-card-border-hover:rgba(159,216,176,0.28);
--exp-overlay-border:rgba(159,216,176,0.20);
--exp-label-border:rgba(159,216,176,0.18);

/* backgrounds */
--exp-label-bg:rgba(159,216,176,0.06);
--exp-overlay-bg:rgba(159,216,176,0.08);

/* shadows */
--exp-shadow:0 10px 30px rgba(0,0,0,0.45);
--exp-shadow-hover:0 18px 50px rgba(0,0,0,0.55);

/* radius */
--exp-radius:22px;

/* transitions */
--exp-transition:0.35s ease;
--exp-transition-slow:0.6s ease;

/* image system */
--exp-img-filter:brightness(0.72) contrast(1.05);
--exp-img-hover-filter:brightness(0.82) contrast(1.1);
--exp-img-hover-scale:1.04;

/* overlay gradient (hover stripe) */
--exp-hover-stripe:
linear-gradient(
120deg,
transparent,
rgba(159,216,176,0.10),
transparent
);

/* image overlay */
--exp-img-hover-overlay:
linear-gradient(
to top,
rgba(0,0,0,0.35),
rgba(159,216,176,0.10)
);

}

.experience-section{
    position:relative;
    padding:160px 0;
    overflow:hidden;
    background:var(--exp-bg);
    color:var(--exp-white);
}

/* WRAPPER */
.experience-wrapper{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:0.95fr 1.05fr;
    gap:70px;
    align-items:start;
}

/* LABEL */
.exp-label{
    display:inline-flex;
    margin-bottom:22px;
    padding:10px 14px;
    border-radius:6px;
    background:var(--exp-label-bg);
    border:1px solid var(--exp-label-border);
    color:var(--exp-accent-mid);
    font-size:11px;
    font-weight:800;
    letter-spacing:3px;
    text-transform:uppercase;
}

/* TEXT */
.experience-left h2{
    font-size:clamp(38px,7vw,64px);
    line-height:0.95;
    letter-spacing:-2px;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:26px;
    color:rgba(245,245,245,0.88);
}

.experience-left p{
    max-width:520px;
    color:var(--exp-text-soft);
    font-size:17px;
    line-height:1.9;
}

/* RIGHT GRID */
.experience-right{
    display:grid;
    grid-template-columns:1fr 260px;
    gap:22px;
    align-items:stretch;
}

/* CARD BASE */
.exp-card{
    position:relative;
    overflow:hidden;
    border-radius:var(--exp-radius);
    background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.015));
    border:1px solid var(--exp-card-border);
    transition:var(--exp-transition);
    box-shadow:var(--exp-shadow);
}

.exp-card.large{
    min-height:460px;
}

.exp-card:hover{
    transform:translateY(-6px);
    border-color:var(--exp-card-border-hover);
    box-shadow:var(--exp-shadow-hover);
}

/* LARGE IMAGE */
.exp-card.large img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    filter:var(--exp-img-filter);
    transition:var(--exp-transition-slow);
}

.exp-card.large:hover img{
    transform:scale(var(--exp-img-hover-scale));
    filter:var(--exp-img-hover-filter);
}

/* OVERLAY */
.exp-overlay{
    position:absolute;
    left:28px;
    bottom:28px;
    z-index:3;
}

.exp-overlay span{
    display:inline-block;
    margin-bottom:10px;
    padding:8px 12px;
    border-radius:4px;
    background:var(--exp-overlay-bg);
    border:1px solid var(--exp-overlay-border);
    font-size:11px;
    font-weight:800;
    letter-spacing:2px;
    color:var(--exp-accent-soft);
}

.exp-overlay h3{
    font-size:38px;
    line-height:1;
    letter-spacing:-2px;
    max-width:300px;
    color:rgba(245,245,245,0.88);
}

/* SMALL CARDS */
.exp-small-wrap{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.exp-card.small{
    min-height:230px;
}

.exp-card.small img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:var(--exp-img-filter);
}

/* MINI */
.mini-content{
    position:absolute;
    left:20px;
    bottom:20px;
}

.mini-content strong{
    font-size:17px;
    color:rgba(245,245,245,0.88);
}

.mini-content span{
    font-size:13px;
    color:var(--exp-text-muted);
}

/* QUOTE */
.exp-card.dark{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:24px;
    min-height:230px;
    background:linear-gradient(135deg,rgba(159,216,176,0.08),rgba(255,255,255,0.02));
}

.quote-mark{
    font-size:46px;
    color:var(--exp-accent);
    margin-bottom:6px;
}

.exp-card.dark p{
    font-size:19px;
    line-height:1.4;
    font-weight:600;
    color:rgba(245,245,245,0.88);
}

/* HOVER STRIPE */
.exp-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:var(--exp-hover-stripe);
    transform:translateX(-120%);
    transition:var(--exp-transition-slow);
}

.exp-card:hover::after{
    transform:translateX(120%);
}



/* =========================
   MOBILE
========================= */

@media(max-width:1100px){

    .experience-wrapper{
        grid-template-columns:1fr;
    }

    .experience-right{
        grid-template-columns:1fr;
    }

    .exp-small-wrap{
        flex-direction:row;
    }
}

@media(max-width:768px){

    .experience-section{
        padding:120px 0;
    }

    .exp-card.large{
        min-height:380px;
    }

    .exp-overlay h3{
        font-size:30px;
    }

    .exp-small-wrap{
        flex-direction:column;
    }
}

@media(max-width:480px){

    .experience-left h2{
        font-size:44px;
    }
}