/* ==========================================
   NT CORPORATE SOLUTIONS
   SERVICES PAGE
========================================== */

/* ==========================================
   PAGE VARIABLES
========================================== */

.services-page{
    --service-surface:#ffffff;
    --service-surface-alt:#f8f9fc;
    --service-border:#e7eaf0;
    --service-muted:#667085;
    --service-navy:#081b3a;
    --service-navy-light:#102d5f;
    --service-gold:#d4af37;
    --service-gold-dark:#bd9627;
}

/* ==========================================
   HERO
========================================== */

.services-page .services-hero{
    position:relative;
    min-height:650px;
    display:flex;
    align-items:center;
    padding:150px 0 110px;
    text-align:left;
    background:
        linear-gradient(
            90deg,
            rgba(8,27,58,.96) 0%,
            rgba(8,27,58,.88) 55%,
            rgba(8,27,58,.72) 100%
        ),
        url("../images/services-banner.jpg") center/cover no-repeat;
    overflow:hidden;
}

.services-page .services-hero::after{
    content:"";
    position:absolute;
    right:-160px;
    bottom:-220px;
    width:500px;
    height:500px;
    border:1px solid rgba(212,175,55,.25);
    border-radius:50%;
    pointer-events:none;
}

.services-page .services-hero .container{
    position:relative;
    z-index:1;
}

.services-page .hero-content{
    max-width:830px;
}

.services-page .hero-label,
.services-page .section-kicker,
.services-page .section-title > span,
.services-page .programme-banner > span{
    display:inline-block;
    margin-bottom:18px;
    color:var(--service-gold);
    font-size:.78rem;
    font-weight:800;
    line-height:1.4;
    letter-spacing:2px;
    text-transform:uppercase;
}

.services-page .services-hero h1{
    max-width:900px;
    margin-bottom:24px;
    color:#fff;
    font-size:clamp(2.6rem,5vw,4.5rem);
    font-weight:800;
    line-height:1.08;
}

.services-page .services-hero p{
    max-width:770px;
    margin-bottom:38px;
    color:#e5eaf2;
    font-size:1.12rem;
    line-height:1.85;
}

.services-page .hero-buttons{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.services-page .services-hero .btn-outline{
    border-color:#fff;
    color:#fff;
}

.services-page .services-hero .btn-outline:hover{
    background:#fff;
    color:var(--service-navy);
}

/* ==========================================
   SECTION HEADINGS
========================================== */

.services-page .section-title,
.services-page .service-copy{
    max-width:760px;
}

.services-page .section-title{
    margin:0 auto 55px;
    text-align:center;
}

.services-page .section-title h2,
.services-page .service-copy h2{
    margin-bottom:18px;
    color:var(--service-navy);
    font-size:clamp(2rem,4vw,3rem);
    font-weight:800;
    line-height:1.18;
}

.services-page .section-title p,
.services-page .service-copy p{
    color:var(--service-muted);
    line-height:1.85;
}

/* ==========================================
   SERVICES INTRODUCTION
========================================== */

.services-page .services-intro{
    background:var(--service-surface-alt);
}

.services-page .division-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;
}

.services-page .division-card{
    position:relative;
    min-height:300px;
    padding:42px 34px 36px;
    background:var(--service-surface);
    border:1px solid var(--service-border);
    border-radius:22px;
    box-shadow:0 12px 35px rgba(8,27,58,.07);
    overflow:hidden;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.services-page .division-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:var(--service-gold);
}

.services-page .division-card:hover{
    transform:translateY(-8px);
    border-color:rgba(212,175,55,.55);
    box-shadow:0 22px 45px rgba(8,27,58,.12);
}

.services-page .division-number{
    display:block;
    margin-bottom:34px;
    color:rgba(8,27,58,.12);
    font-size:4rem;
    font-weight:800;
    line-height:1;
}

.services-page .division-card h3{
    margin-bottom:16px;
    color:var(--service-navy);
    font-size:1.35rem;
}

.services-page .division-card p{
    color:var(--service-muted);
    line-height:1.75;
}

/* ==========================================
   SERVICE BLOCKS
========================================== */

.services-page .service-block{
    background:var(--service-surface);
}

.services-page .service-block.light-section,
.services-page .training-block{
    background:var(--service-surface-alt);
}

.services-page .service-layout{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
    gap:60px;
    align-items:center;
    margin-bottom:65px;
}

.services-page .service-layout.reverse{
    grid-template-columns:minmax(300px,.65fr) minmax(0,1.35fr);
}

.services-page .service-copy .btn{
    margin-top:28px;
}

.services-page .service-highlight{
    padding:36px;
    background:
        linear-gradient(
            145deg,
            var(--service-navy),
            var(--service-navy-light)
        );
    border-radius:22px;
    box-shadow:0 20px 45px rgba(8,27,58,.2);
}

.services-page .service-highlight h3{
    margin-bottom:22px;
    color:var(--service-gold);
    font-size:1.35rem;
}

.services-page .service-highlight ul{
    display:grid;
    gap:13px;
}

.services-page .service-highlight li{
    position:relative;
    padding-left:27px;
    color:#e3e9f2;
    line-height:1.6;
}

.services-page .service-highlight li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:var(--service-gold);
    font-weight:800;
}

/* ==========================================
   SERVICE AND FEATURE GRIDS
========================================== */

.services-page .services-grid,
.services-page .feature-grid{
    display:grid;
    gap:28px;
}

.services-page .services-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.services-page .feature-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

/* ==========================================
   SERVICE CARDS
========================================== */

.services-page .service-card,
.services-page .feature-box{
    position:relative;
    height:100%;
    padding:34px;
    background:var(--service-surface);
    border:1px solid var(--service-border);
    border-radius:20px;
    box-shadow:0 10px 30px rgba(8,27,58,.07);
    overflow:hidden;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.services-page .service-card::before,
.services-page .feature-box::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:var(--service-gold);
}

.services-page .service-card:hover,
.services-page .feature-box:hover{
    transform:translateY(-8px);
    border-color:rgba(212,175,55,.5);
    box-shadow:0 20px 42px rgba(8,27,58,.12);
}

.services-page .service-card h3,
.services-page .feature-box h3{
    margin-bottom:16px;
    color:var(--service-navy);
    font-size:1.28rem;
}

.services-page .service-card p,
.services-page .feature-box p{
    margin-bottom:18px;
    color:var(--service-muted);
    line-height:1.75;
}

.services-page .service-card ul,
.services-page .feature-box ul{
    display:grid;
    gap:10px;
}

.services-page .service-card li,
.services-page .feature-box li{
    position:relative;
    padding-left:24px;
    color:#4f5968;
    line-height:1.6;
}

.services-page .service-card li::before,
.services-page .feature-box li::before{
    content:"";
    position:absolute;
    left:0;
    top:.65em;
    width:7px;
    height:7px;
    background:var(--service-gold);
    border-radius:50%;
}

/* ==========================================
   FEATURED PROGRAMME
========================================== */

.services-page .programme-banner{
    position:relative;
    margin-top:60px;
    padding:58px;
    text-align:center;
    background:
        linear-gradient(
            135deg,
            var(--service-navy),
            var(--service-navy-light)
        );
    border-radius:26px;
    box-shadow:0 20px 45px rgba(8,27,58,.18);
    overflow:hidden;
}

.services-page .programme-banner::after{
    content:"";
    position:absolute;
    right:-70px;
    top:-70px;
    width:210px;
    height:210px;
    border:1px solid rgba(212,175,55,.25);
    border-radius:50%;
}

.services-page .programme-banner h2{
    position:relative;
    z-index:1;
    margin-bottom:18px;
    color:#fff;
    font-size:clamp(2rem,4vw,2.8rem);
}

.services-page .programme-banner p{
    position:relative;
    z-index:1;
    max-width:820px;
    margin:0 auto;
    color:#dce4ef;
    line-height:1.85;
}

/* ==========================================
   COMMUNITY IMPACT RADIO BANNER
========================================== */

.services-page .cir-banner{
    margin-top:60px;
    padding:58px;
    text-align:center;
    background:
        linear-gradient(
            135deg,
            var(--service-navy),
            #0e2a57
        );
    border-radius:26px;
    box-shadow:0 20px 45px rgba(8,27,58,.18);
}

.services-page .cir-banner h3{
    margin-bottom:16px;
    color:var(--service-gold);
    font-size:clamp(1.55rem,3vw,2rem);
}

.services-page .cir-banner p{
    max-width:780px;
    margin:0 auto 30px;
    color:#dce4ef;
    line-height:1.8;
}

/* ==========================================
   WHY CHOOSE US
========================================== */

.services-page .why-us{
    background:
        linear-gradient(
            135deg,
            var(--service-navy),
            var(--service-navy-light)
        );
}

.services-page .why-us .section-title h2{
    color:#fff;
}

.services-page .why-us .section-title p{
    color:#dce4ef;
}

.services-page .why-us .feature-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.services-page .why-us .feature-box{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:none;
    backdrop-filter:blur(8px);
}

.services-page .why-us .feature-box::before{
    background:var(--service-gold);
}

.services-page .why-us .feature-box h3{
    color:var(--service-gold);
}

.services-page .why-us .feature-box p{
    margin-bottom:0;
    color:#e2e8f1;
}

.services-page .why-us .feature-box:hover{
    border-color:rgba(212,175,55,.5);
    background:rgba(255,255,255,.1);
}

/* ==========================================
   CALL TO ACTION
========================================== */

.services-page .cta{
    position:relative;
    padding:100px 0;
    text-align:center;
    background:
        linear-gradient(
            135deg,
            #06152d,
            var(--service-navy-light)
        );
    overflow:hidden;
}

.services-page .cta::before{
    content:"";
    position:absolute;
    left:-180px;
    bottom:-260px;
    width:500px;
    height:500px;
    border:1px solid rgba(212,175,55,.18);
    border-radius:50%;
}

.services-page .cta .container{
    position:relative;
    z-index:1;
}

.services-page .cta h2{
    margin-bottom:20px;
    color:#fff;
    font-size:clamp(2rem,4vw,3.2rem);
}

.services-page .cta p{
    max-width:820px;
    margin:0 auto 34px;
    color:#dce4ef;
    line-height:1.85;
}

/* ==========================================
   ACCESSIBILITY
========================================== */

.services-page a:focus-visible{
    outline:3px solid var(--service-gold);
    outline-offset:4px;
}

.services-page section[id]{
    scroll-margin-top:100px;
}

/* ==========================================
   TABLET
========================================== */

@media(max-width:1100px){

    .services-page .services-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .services-page .why-us .feature-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media(max-width:992px){

    .services-page .services-hero{
        min-height:580px;
        padding:130px 0 95px;
    }

    .services-page .division-grid,
    .services-page .feature-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .services-page .service-layout,
    .services-page .service-layout.reverse{
        grid-template-columns:1fr;
        gap:38px;
    }

    .services-page .service-layout.reverse .service-highlight{
        order:2;
    }

    .services-page .service-layout.reverse .service-copy{
        order:1;
    }

}

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

@media(max-width:768px){

    .services-page .services-hero{
        min-height:auto;
        padding:115px 0 80px;
        text-align:center;
        background-position:60% center;
    }

    .services-page .hero-content{
        margin:0 auto;
    }

    .services-page .hero-buttons{
        justify-content:center;
    }

    .services-page .hero-buttons .btn{
        width:100%;
        max-width:360px;
    }

    .services-page .services-hero p{
        font-size:1rem;
    }

    .services-page .division-grid,
    .services-page .services-grid,
    .services-page .feature-grid,
    .services-page .why-us .feature-grid{
        grid-template-columns:1fr;
    }

    .services-page .service-layout{
        margin-bottom:48px;
    }

    .services-page .division-card{
        min-height:auto;
    }

    .services-page .service-highlight,
    .services-page .service-card,
    .services-page .feature-box{
        padding:28px;
    }

    .services-page .programme-banner,
    .services-page .cir-banner{
        margin-top:45px;
        padding:40px 28px;
    }

    .services-page .cta{
        padding:75px 0;
    }

}

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

@media(max-width:480px){

    .services-page .services-hero{
        padding:105px 0 70px;
    }

    .services-page .division-card,
    .services-page .service-card,
    .services-page .feature-box,
    .services-page .service-highlight{
        padding:24px;
        border-radius:17px;
    }

    .services-page .division-number{
        margin-bottom:24px;
        font-size:3.2rem;
    }

    .services-page .programme-banner,
    .services-page .cir-banner{
        padding:32px 22px;
        border-radius:20px;
    }

}

/* ==========================================
   REDUCED MOTION
========================================== */

@media(prefers-reduced-motion:reduce){

    .services-page *,
    .services-page *::before,
    .services-page *::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

}