/*==================================================
SECTION 5 - OUR APPROACH
PART 1 - LAYOUT FOUNDATION
==================================================*/

.about-approach{

    position:relative;

    padding:92px 0;

    background:#ffffff;

    overflow:hidden;

}

.about-approach .container{

    max-width:1400px;

    margin:0 auto;

    padding:0 30px;

}

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

.approach-header{

    max-width:950px;

    margin:0 auto 48px;

    text-align:center;

}

.section-label{

    display:inline-flex;

    align-items:center;

    gap:20px;

    margin-bottom:24px;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    color:var(--primary-blue);

}

.section-label::before,
.section-label::after{

    content:"";

    width:70px;

    height:2px;

    background:var(--primary-blue);

    opacity:.30;

}

.approach-header h2{

    margin:0;

    font-size:3.4rem;

    line-height:1.15;

    color:var(--primary-blue);

}

.approach-header p{

    margin:18px auto 0;

    max-width:900px;

    font-size:1.12rem;

    line-height:1.7;

    color:#59697e;

}

/*==================================================
FRAMEWORK GRID
==================================================*/

.approach-framework{

    display:grid;

    grid-template-columns:

        320px
        470px
        320px;

    grid-template-rows:

        auto
        auto;

    grid-template-areas:

        "assess centre develop"
        "sustain centre apply";

    justify-content:center;

    align-items:start;

    column-gap:18px;

    row-gap:18px;

}

.assess{

    grid-area:assess;

}

.develop{

    grid-area:develop;

}

.sustain{

    grid-area:sustain;

}

.apply{

    grid-area:apply;

}

.framework-centre{

    grid-area:centre;

}

.framework-centre{

    display:flex;

    justify-content:center;

    align-items:center;

    align-self:center;

}

.framework-centre img{

    width:100%;

    max-width:540px;

    display:block;

}

@media (max-width:1280px){

    .approach-framework{

        grid-template-columns:

            290px
            420px
            290px;

        column-gap:16px;

    }

}

@media (max-width:992px){

    .about-approach{

        padding:78px 0;

    }

    .approach-header{

        margin:0 auto 38px;

    }

    .approach-header p{

        margin-top:14px;

    }

    .approach-framework{

        grid-template-columns:1fr;

        grid-template-areas:

            "centre"
            "assess"
            "develop"
            "apply"
            "sustain";

        row-gap:24px;

    }

    .framework-centre{

        margin-bottom:6px;

    }

    .framework-centre img{

        max-width:360px;

    }

}

/*==================================================
FRAMEWORK CARDS
==================================================*/

.framework-card{

    position:relative;

    background:#ffffff;

    border-radius:20px;

    padding:22px 24px 24px;

    border:1px solid #e7edf5;

    box-shadow:
        0 12px 35px rgba(15,42,85,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.framework-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 20px 45px rgba(15,42,85,.14);

}

.framework-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    border-radius:22px 22px 0 0;

}

.assess::before{

    background:#0E497C;

}

.develop::before{

    background:#1C9BD7;

}

.apply::before{

    background:#F5B400;

}

.sustain::before{

    background:#0B9B53;

}

.card-badge{

    width:44px;

    height:44px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:12px;

    font-size:1.1rem;

    font-weight:700;

    color:#ffffff;

}

.assess .card-badge{

    background:#0E497C;

}

.develop .card-badge{

    background:#1C9BD7;

}

.apply .card-badge{

    background:#F5B400;

}

.sustain .card-badge{

    background:#0B9B53;

}

.framework-card h3{

    margin:0;

    font-size:1.7rem;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

}

.framework-card h4{

    margin:6px 0 12px;

    font-size:1rem;

    font-weight:600;

    color:#25374d;

}

.assess h3{

    color:#0E497C;

}

.develop h3{

    color:#1C9BD7;

}

.apply h3{

    color:#F5B400;

}

.sustain h3{

    color:#0B9B53;

}

.framework-card p{

    margin:0;

    font-size:.94rem;

    line-height:1.65;

    color:#5f6d82;

}

.card-divider{

    width:100%;

    height:1px;

    background:#e7edf5;

    margin:16px 0 14px;

}

.framework-card h5{

    margin:0 0 10px;

    font-size:.88rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}

.assess h5{

    color:#0E497C;

}

.develop h5{

    color:#1C9BD7;

}

.apply h5{

    color:#F5B400;

}

.sustain h5{

    color:#0B9B53;

}

.framework-card ul{

    margin:0;

    padding-left:20px;

}

.framework-card li{

    margin-bottom:6px;

    color:#45576f;

    line-height:1.6;

}

@media (max-width:992px){

    .framework-card{

        padding:22px;

    }

    .framework-card h3{

        font-size:1.55rem;

    }

}

/*==================================================
SECTION 5 - OUR APPROACH
PART 3 - CENTRE FRAMEWORK
==================================================*/

/*=========================================
Framework Container
=========================================*/

.framework-centre{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:14px;

}


/* Decorative Background Circle */

.framework-centre::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(14,73,124,.045) 0%,
        rgba(14,73,124,.020) 55%,
        transparent 72%);

    z-index:0;

}


/*=========================================
Framework Image
=========================================*/

.framework-centre img{

    position:relative;

    z-index:2;

    display:block;

    width:100%;

    max-width:450px;

    height:auto;

    filter:
        drop-shadow(0 18px 32px rgba(15,42,85,.10));

    transition:
        transform .45s ease,
        filter .45s ease;

}


/*=========================================
Hover Effect
=========================================*/

.about-approach:hover .framework-centre img{

    transform:scale(1.02);

    filter:
        drop-shadow(0 24px 45px rgba(15,42,85,.16));

}


/*=========================================
Subtle Decorative Ring
=========================================*/

.framework-centre::after{

    content:"";

    position:absolute;

    width:460px;

    height:460px;

    border-radius:50%;

    border:1px dashed rgba(14,73,124,.12);

    z-index:1;

}


/*=========================================
Desktop Fine Tuning
=========================================*/

@media (min-width:1400px){

    .framework-centre{

        padding:55px;

    }

    .framework-centre img{

        max-width:560px;

    }

}


/*=========================================
Laptop
=========================================*/

@media (max-width:1280px){

    .framework-centre{

        padding:30px;

    }

    .framework-centre::before{

        width:520px;

        height:520px;

    }

    .framework-centre::after{

        width:485px;

        height:485px;

    }

    .framework-centre img{

        max-width:470px;

    }

}


/*=========================================
Tablet
=========================================*/

@media (max-width:992px){

    .framework-centre{

        padding:8px;

        margin:0 auto;

    }

    .framework-centre::before{

        width:390px;

        height:390px;

    }

    .framework-centre::after{

        width:360px;

        height:360px;

    }

    .framework-centre img{

        max-width:360px;

    }

}


/*=========================================
Mobile
=========================================*/

@media (max-width:768px){

    .framework-centre{

        padding:4px;

    }

    .framework-centre::before{

        width:280px;

        height:280px;

    }

    .framework-centre::after{

        width:252px;

        height:252px;

    }

    .framework-centre img{

        max-width:270px;

    }

    .framework-card{

        padding:18px 18px 20px;

    }

    .framework-card h3{

        font-size:1.4rem;

    }

    .framework-card h4{

        font-size:.95rem;

    }

    .framework-card p,
    .framework-card li{

        font-size:.9rem;

        line-height:1.55;

    }

}

/*==================================================
SECTION 5 - OUR APPROACH
PART 4 - PLATFORM STRIP
==================================================*/

.platform-strip{

    display:grid;

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

    gap:16px;

    margin-top:34px;

    margin-bottom:34px;

}



/*=========================================
Platform Card
=========================================*/

.platform-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px 20px;

    background:#ffffff;

    border:1px solid #e8edf5;

    border-radius:18px;

    box-shadow:
        0 10px 28px rgba(15,42,85,.06);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.platform-item:hover{

    transform:translateY(-6px);

    border-color:rgba(14,73,124,.20);

    box-shadow:
        0 18px 40px rgba(15,42,85,.12);

}



/*=========================================
Platform Icon
=========================================*/

.platform-icon{

    flex-shrink:0;

    width:48px;

    height:48px;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #0E497C,
        #1B6AA8);

    color:#ffffff;

    font-size:1.15rem;

}

.platform-icon img,
.performance-icon img{

    width:36px;

    height:36px;

    object-fit:contain;

    display:block;

}

.platform-item:nth-child(2) .platform-icon img,
.platform-item:nth-child(3) .platform-icon img,
.performance-icon img{

    width:48px;

    height:48px;

}



/*=========================================
Platform Text
=========================================*/

.platform-text{

    display:flex;

    flex-direction:column;

}

.platform-text span{

    margin-bottom:4px;

    font-size:.72rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1.5px;

    color:#7b8ca2;

}

.platform-text strong{

    font-size:1.05rem;

    font-weight:700;

    color:var(--primary-blue);

}



/*=========================================
Hover Animation
=========================================*/

.platform-item:hover .platform-icon{

    transform:rotate(-6deg) scale(1.06);

    transition:all .35s ease;

}



/*=========================================
Responsive
=========================================*/

@media (max-width:1200px){

    .platform-strip{

        gap:20px;

    }

}



@media (max-width:992px){

    .platform-strip{

        grid-template-columns:1fr;

        gap:22px;

        margin-top:60px;

        margin-bottom:60px;

    }

}



@media (max-width:768px){

    .platform-item{

        padding:22px;

    }

    .platform-icon{

        width:56px;

        height:56px;

        border-radius:16px;

    }

    .platform-text strong{

        font-size:1.1rem;

    }

}

/*==================================================
SECTION 5 - OUR APPROACH
PART 5
Platform Strip Enhancement + Performance Panel
==================================================*/


/*=========================================
PLATFORM COLOUR ENHANCEMENTS
=========================================*/

.platform-item{

    position:relative;

    overflow:hidden;

    border-left:5px solid transparent;

}


/* ENE Compass */

.platform-item:nth-child(1){

    border-left-color:#0E497C;

}

.platform-item:nth-child(1) .platform-icon{

    background:linear-gradient(
        135deg,
        #0E497C,
        #2F6EA3);

}

.platform-item:nth-child(1) strong{

    color:#0E497C;

}


/* InnSim */

.platform-item:nth-child(2){

    border-left-color:#D4A017;

}

.platform-item:nth-child(2) .platform-icon{

    background:linear-gradient(
        135deg,
        #D4A017,
        #F2C94C);

}

.platform-item:nth-child(2) strong{

    color:#C58B00;

}


/* ENE Masterclass */

.platform-item:nth-child(3){

    border-left-color:#198754;

}

.platform-item:nth-child(3) .platform-icon{

    background:linear-gradient(
        135deg,
        #198754,
        #3AB97B);

}

.platform-item:nth-child(3) strong{

    color:#198754;

}



/*=========================================
PERFORMANCE PANEL
=========================================*/

.performance-panel{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:28px;

    padding:30px 34px;

    background:

        linear-gradient(
        135deg,
        #0E497C,
        #164D7A);

    border-radius:28px;

    overflow:hidden;

    position:relative;

}


/* Decorative Glow */

.performance-panel::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    top:-180px;

    border-radius:50%;

    background:

        radial-gradient(circle,
        rgba(255,255,255,.10),
        transparent 70%);

}



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

.performance-left{

    display:flex;

    align-items:flex-start;

    gap:25px;

    flex:2;

}


.performance-icon{

    width:64px;

    height:64px;

    border-radius:18px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

        rgba(255,255,255,.14);

    backdrop-filter:blur(12px);

}


.performance-content h3{

    margin:0 0 10px;

    font-size:1.75rem;

    font-weight:700;

    color:#ffffff;

}

.performance-content p{

    margin:0;

    font-size:.98rem;

    line-height:1.7;

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

}



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

.performance-right{

    flex:1;

}


.performance-right ul{

    list-style:none;

    margin:0;

    padding:0;

}


.performance-right li{

    position:relative;

    padding-left:30px;

    margin-bottom:12px;

    font-size:1rem;

    font-weight:600;

    color:#ffffff;

}


.performance-right li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    width:24px;

    height:24px;

    border-radius:50%;

    background:#ffffff;

    color:#0E497C;

    font-size:.82rem;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

}



/*=========================================
HOVER EFFECT
=========================================*/

.performance-panel{

    transition:

        transform .4s ease,

        box-shadow .4s ease;

}


.performance-panel:hover{

    transform:translateY(-6px);

    box-shadow:

        0 24px 60px rgba(15,42,85,.20);

}



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

@media (max-width:1100px){

    .performance-panel{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

        padding:24px 26px;

    }

}


@media (max-width:768px){

    .performance-panel{

        padding:20px 18px;

        gap:18px;

    }

    .performance-left{

        flex-direction:column;

        gap:14px;

    }

    .performance-icon{

        width:52px;

        height:52px;

        border-radius:14px;

    }

    .performance-content h3{

        font-size:1.45rem;

    }

    .performance-content p{

        font-size:.95rem;

        line-height:1.6;

    }

    .performance-right li{

        margin-bottom:10px;

        font-size:.95rem;

    }

}