/* ===========================
   DEVELOPMENT IMPACT
=========================== */

.development-impact-section{

    background:
    radial-gradient(circle at 50% 30%,rgba(255,200,0,.08),transparent 35%),
    linear-gradient(to bottom,#090909,#050505);

}

.development-impact-header{

    max-width:850px;

    margin:auto auto 90px;

    text-align:center;

}

.development-impact-header h2{

    font-family:"Playfair Display",serif;

    font-size:clamp(48px,6vw,84px);

    line-height:1.05;

    margin:24px 0;

}

.development-impact-header h2::first-line{

    color:var(--primary);

}

.development-impact-header p{

    max-width:720px;

    margin:auto;

    line-height:1.8;

    color:rgba(255,255,255,.72);

}

/* GRID */

.impact-layout{

    display:grid;

    grid-template-columns:1fr 140px 1fr;

    gap:30px;

    align-items:center;

}

/* CARD */

.impact-card{

    border-radius:32px;

    padding:45px;

    border:1px solid rgba(255,255,255,.08);

    transition:.45s;

}

.before{

    background:#151515;

}

.after{

    background:linear-gradient(145deg,#ffd54a,#f5be18);

    color:#111;

    transform:translateY(-12px);

    box-shadow:0 30px 80px rgba(255,200,0,.22);

}

.impact-label{

    display:inline-block;

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:900;

    margin-bottom:20px;

}

.before .impact-label{

    color:var(--primary);

}

.after .impact-label{

    color:#7d5300;

}

.impact-card h3{

    font-family:"Playfair Display",serif;

    font-size:42px;

    margin-bottom:35px;

}

.impact-card ul{

    list-style:none;

    display:grid;

    gap:18px;

}

.impact-card li{

    display:flex;

    gap:14px;

    align-items:flex-start;

    font-size:17px;

    line-height:1.7;

}

.before li{

    color:rgba(255,255,255,.72);

}

.after li{

    color:#111;

}

.before i{

    color:#666;

}

.after i{

    color:#111;

}

/* ===========================
   FILM STRIP TRANSFER
=========================== */

.impact-arrow{

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

}

.film-transfer{

    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;

}

/* Film Strip */

.film-strip-horizontal{

    position:relative;

    width:100%;
    height:44px;

    border-top:2px solid rgba(255,200,0,.45);
    border-bottom:2px solid rgba(255,200,0,.45);

    background:
        linear-gradient(
            to right,
            rgba(255,200,0,.22),
            rgba(255,200,0,.08)
        );

    overflow:hidden;
    background-size:0% 100%;
    background-repeat:no-repeat;

    transition:1.2s ease;

}

.development-impact-section.active .film-strip-horizontal{

background-size:100% 100%;

}

/* holes */

.film-strip-horizontal::before,
.film-strip-horizontal::after{

    content:"";

    position:absolute;

    left:0;

    width:100%;
    height:8px;

    background:
    repeating-linear-gradient(
        90deg,

        transparent 0 12px,

        rgba(0,0,0,.55) 12px 22px

    );

}

.film-strip-horizontal::before{

    top:-2px;

}

.film-strip-horizontal::after{

    bottom:-2px;

}

/* arrow */

.film-arrow-head{

    width:78px;
    height:78px;

    margin-left:-2px;

    border-radius:50%;

    background:linear-gradient(
        145deg,
        #ffd54a,
        #f5be18
    );

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

    box-shadow:
        0 0 28px rgba(255,200,0,.25);

    transition:.45s;

}

.film-arrow-head i{

    font-size:28px;
    color:#111;


}


/* NOTE */

.impact-note{

    max-width:900px;

    margin:70px auto 0;

    text-align:center;

    padding:28px 36px;

    border-left:4px solid var(--primary);

    color:rgba(255,255,255,.72);

    line-height:1.9;

}

/* MOBILE */

@media(max-width:950px){

.impact-layout{

grid-template-columns:1fr;

}

.impact-arrow{

transform:rotate(90deg);

margin:10px 0;

}

.after{

transform:none;

}

}