/* ==========================================
            AI STRATEGY
========================================== */

.strategy-section{

    background:#0B0B0D;

    color:#fff;

    padding:140px 0;

    position:relative;

    overflow:hidden;

}

.strategy-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);

    background-size:52px 52px;

    opacity:.35;

}

.strategy-section .container{

    position:relative;

    z-index:2;

}


/* ==========================================
            HEADER
========================================== */

.strategy-header{

    max-width:760px;

    margin:auto;

    text-align:center;

    margin-bottom:90px;

}

.strategy-header h2{

    font-size:72px;

    line-height:.95;

    margin:25px 0;

}

.strategy-header p{

    font-size:20px;

    line-height:1.8;

    color:#9d9d9d;

}


/* ==========================================
            LAYOUT
========================================== */

.strategy-sheet{

    display:grid;

    grid-template-columns:42% 58%;

    gap:80px;

    align-items:start;

}


/* ==========================================
            LEFT
========================================== */

.sheet-left{

    position:sticky;

    top:120px;

}

.sheet-note{

    margin-bottom:60px;

}

.sheet-note span{

    display:block;

    color:var(--orange);

    font-size:12px;

    letter-spacing:.25em;

    margin-bottom:18px;

}

.sheet-note p{

    font-size:34px;

    line-height:1.3;

    max-width:420px;

    color:#f2f2f2;

}


/* ==========================================
            WORKFLOW
========================================== */

.workflow{

    position:relative;

}

.workflow-step{

    display:flex;

    gap:28px;

    align-items:flex-start;

}

.workflow-node{

    width:16px;

    height:16px;

    margin-top:8px;

    border-radius:50%;

    background:#0B0B0D;

    border:3px solid var(--orange);

    flex-shrink:0;

    box-shadow:0 0 20px rgba(255,139,77,.25);

}

.workflow-step.active .workflow-node{

    background:var(--orange);

    box-shadow:0 0 22px rgba(255,139,77,.8);

}

.workflow-line{

    width:2px;

    height:60px;

    background:rgba(255,255,255,.08);

    margin:10px 0 10px 7px;

    transform-origin:top center;



}

.workflow-step small{

    display:block;

    color:#666;

    font-size:11px;

    letter-spacing:.2em;

    margin-bottom:10px;

}

.workflow-step h3{

    font-size:30px;

    margin-bottom:12px;

}

.workflow-step p{

    color:#949494;

    line-height:1.8;

    max-width:340px;

}


/* ==========================================
            RIGHT
========================================== */

.sheet-right{

    display:flex;

    flex-direction:column;

    gap:60px;

}

.sheet-title{

    display:block;

    color:var(--orange);

    font-size:12px;

    letter-spacing:.25em;

    margin-bottom:30px;

}


/* ==========================================
            QUESTIONS
========================================== */

.question-list{

    list-style:none;

    padding:0;

    margin:0;

}

.question-list li{

    position:relative;

    padding:18px 0 18px 34px;

    border-bottom:1px solid rgba(255,255,255,.05);

    color:#e3e3e3;

    font-size:18px;

    transition:.35s;

}

.question-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--orange);

}

.question-list li:hover{

    padding-left:42px;

    color:#fff;

}


/* ==========================================
            DIVIDER
========================================== */

.sheet-divider{

    height:1px;

    background:rgba(255,255,255,.08);

}


/* ==========================================
            DELIVERABLES
========================================== */

.deliverables{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.deliverables div{

    display:flex;

    align-items:center;

    gap:18px;

    padding:20px;

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

    border-radius:20px;

    background:#141416;

    transition:.35s;

}

.deliverables div:hover{

    transform:translateY(-4px);

    border-color:rgba(255,139,77,.28);

}

.deliverables span{

    width:38px;

    height:38px;

    border-radius:50%;

    background:rgba(255,139,77,.15);

    color:var(--orange);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:13px;

    font-weight:700;

    transition:.35s;


}


/* ==========================================
        ENGINEER NOTE
========================================== */

.engineer-note{

    border-left:2px solid var(--orange);

    padding-left:24px;

}

.engineer-note span{

    display:block;

    color:var(--orange);

    font-size:12px;

    letter-spacing:.2em;

    margin-bottom:16px;

}

.engineer-note p{

    color:#9a9a9a;

    line-height:1.9;

}


/* ==========================================
            RESPONSIVE
========================================== */

@media(max-width:992px){

    .strategy-sheet{

        grid-template-columns:1fr;

        gap:80px;

    }

    .sheet-left{

        position:relative;

        top:0;

    }

}

@media(max-width:768px){

    .strategy-section{

        padding:90px 0;

    }

    .strategy-header{

        margin-bottom:60px;

    }

    .strategy-header h2{

        font-size:48px;

    }

    .strategy-header p{

        font-size:18px;

    }

    .deliverables{

        grid-template-columns:1fr;

    }

    .workflow-step h3{

        font-size:24px;

    }

}