:root{

    /* BASE COLORS */
    --exp-bg-1:rgba(255,122,24,0.05);
    

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

    --exp-orange:#ff7a00;
    --exp-orange-soft:#ff9a3d;
    --exp-orange-mid:#ff8a1f;

    /* GRID */
  

   
    /* TEXT */
    --exp-text-soft:rgba(255,255,255,0.72);
    --exp-text-muted:rgba(255,255,255,0.65);

    /* CARDS */
    --exp-card-border:rgba(255,120,0,0.14);
    --exp-card-border-hover:rgba(255,120,0,0.35);

    --exp-shadow:0 10px 30px rgba(0,0,0,0.45);
    --exp-shadow-hover:0 18px 50px rgba(255,120,0,0.08);

    /* OVERLAY */
    --exp-overlay-bg:rgba(255,120,0,0.1);
    --exp-overlay-border:rgba(255,120,0,0.25);

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

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


/* =========================
   EXPERIENCE SECTION
========================= */

.experience-section{

    position:relative;
    padding:160px 0;
    overflow:hidden;

    background: var(--exp-bg-1);

    color:var(--exp-white);
}



/* NOISE */


/* 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:rgba(255,120,0,0.06);

    border:1px solid rgba(255,120,0,0.18);

    color:var(--exp-orange-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;
}

.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:hover{

    transform:translateY(-6px);

    border-color:var(--exp-card-border-hover);

    box-shadow:var(--exp-shadow-hover);
}

/* LARGE */
.exp-card.large{

    min-height:460px;
}

/* IMAGE */
.exp-card.large img{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    filter:brightness(0.72) contrast(1.05);

    transition:var(--exp-transition-slow);
}

.exp-card.large:hover img{

    transform:scale(1.04);
    filter:brightness(0.82) contrast(1.1);
}

/* 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-orange-soft);
}

.exp-overlay h3{

    font-size:38px;
    line-height:1;
    letter-spacing:-2px;
    max-width:300px;
}

/* SMALL */
.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:brightness(0.72);
}

/* MINI */
.mini-content{

    position:absolute;
    left:20px;
    bottom:20px;
}

.mini-content strong{
    font-size:17px;
}

.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(255,120,0,0.08),
    rgba(255,255,255,0.02));
}

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

.exp-card.dark p{

    font-size:19px;
    line-height:1.4;
    font-weight:600;
}

/* HOVER STRIPE */
.exp-card::after{

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

    background:
    linear-gradient(120deg,
    transparent,
    rgba(255,120,0,0.08),
    transparent);

    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;
    }
}