/* ==========================================
   NT CORPORATE SOLUTIONS
   ABOUT PAGE
========================================== */

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

.about-page{
    --about-navy:#081b3a;
    --about-navy-light:#102d5f;
    --about-navy-dark:#06152d;
    --about-gold:#d4af37;
    --about-gold-dark:#bd9627;
    --about-white:#ffffff;
    --about-light:#f8f9fc;
    --about-text:#555f6d;
    --about-muted:#667085;
    --about-border:#e5e9f0;

    --about-shadow:
        0 12px 35px rgba(8,27,58,.08);

    --about-shadow-hover:
        0 22px 48px rgba(8,27,58,.14);
}

/* ==========================================
   SHARED ABOUT PAGE ELEMENTS
========================================== */

.about-page .hero-label,
.about-page .section-kicker,
.about-page .section-title > span,
.about-page .highlight-label,
.about-page .purpose-label,
.about-page .division-label,
.about-page .leader-role,
.about-page .leader-highlight > span,
.about-page .recognition-summary > span{
    display:inline-block;
    margin-bottom:18px;
    color:var(--about-gold);
    font-size:.78rem;
    font-weight:800;
    line-height:1.4;
    letter-spacing:2px;
    text-transform:uppercase;
}

.about-page .section-title{
    max-width:850px;
    margin:0 auto 58px;
    text-align:center;
}

.about-page .section-title h2,
.about-page .story-content h2,
.about-page .leadership-intro h2,
.about-page .leader-content h2,
.about-page .cir-content h2,
.about-page .recognition-content h2{
    margin-bottom:18px;
    color:var(--about-navy);
    font-size:clamp(2rem,4vw,3rem);
    font-weight:800;
    line-height:1.18;
}

.about-page .section-title p,
.about-page .story-content p,
.about-page .leader-content p,
.about-page .cir-content p,
.about-page .recognition-content p{
    color:var(--about-muted);
    line-height:1.85;
}

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

.about-page .about-hero{
    position:relative;
    min-height:650px;
    display:flex;
    align-items:center;
    padding:155px 0 115px;

    background:
        linear-gradient(
            90deg,
            rgba(8,27,58,.97) 0%,
            rgba(8,27,58,.90) 55%,
            rgba(8,27,58,.72) 100%
        ),
        url("../images/about-banner.jpg") center/cover no-repeat;

    overflow:hidden;
}

.about-page .about-hero::before{
    content:"";
    position:absolute;
    right:-190px;
    bottom:-255px;
    width:540px;
    height:540px;
    border:1px solid rgba(212,175,55,.22);
    border-radius:50%;
    pointer-events:none;
}

.about-page .about-hero::after{
    content:"";
    position:absolute;
    right:-75px;
    bottom:-140px;
    width:320px;
    height:320px;
    border:1px solid rgba(212,175,55,.15);
    border-radius:50%;
    pointer-events:none;
}

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

.about-page .hero-content{
    max-width:900px;
}

.about-page .about-hero h1{
    max-width:950px;
    margin-bottom:25px;
    color:var(--about-white);
    font-size:clamp(2.7rem,5.4vw,4.7rem);
    font-weight:800;
    line-height:1.07;
}

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

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

.about-page .about-hero .btn-outline{
    border-color:var(--about-white);
    color:var(--about-white);
}

.about-page .about-hero .btn-outline:hover{
    background:var(--about-white);
    color:var(--about-navy);
}

/* ==========================================
   COMPANY STORY
========================================== */

.about-page .about-intro{
    background:var(--about-white);
}

.about-page .story-layout{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr);
    gap:65px;
    align-items:start;
}

.about-page .story-content{
    max-width:760px;
}

.about-page .story-content p{
    margin-bottom:20px;
}

.about-page .story-content p:last-child{
    margin-bottom:0;
}

.about-page .story-highlight{
    position:relative;
    padding:42px;

    background:
        linear-gradient(
            145deg,
            var(--about-navy),
            var(--about-navy-light)
        );

    border-radius:24px;
    box-shadow:
        0 20px 45px rgba(8,27,58,.18);

    overflow:hidden;
}

.about-page .story-highlight::after{
    content:"";
    position:absolute;
    right:-90px;
    bottom:-120px;
    width:250px;
    height:250px;
    border:1px solid rgba(212,175,55,.2);
    border-radius:50%;
}

.about-page .story-highlight > *{
    position:relative;
    z-index:1;
}

.about-page .story-highlight blockquote{
    margin-bottom:24px;
    color:var(--about-white);
    font-size:1.45rem;
    font-weight:700;
    line-height:1.55;
}

.about-page .story-highlight p{
    color:#dce4ef;
    line-height:1.8;
}

/* ==========================================
   MISSION AND VISION
========================================== */

.about-page .mission-vision-section{
    background:var(--about-light);
}

.about-page .mission-vision-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px;
}

.about-page .purpose-card{
    position:relative;
    min-height:390px;
    padding:46px 40px;

    background:var(--about-white);
    border:1px solid var(--about-border);
    border-radius:23px;
    box-shadow:var(--about-shadow);

    overflow:hidden;

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

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

.about-page .purpose-card:hover{
    transform:translateY(-8px);
    border-color:rgba(212,175,55,.5);
    box-shadow:var(--about-shadow-hover);
}

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

.about-page .purpose-card h2{
    margin-bottom:18px;
    color:var(--about-navy);
    font-size:clamp(1.7rem,3vw,2.2rem);
    line-height:1.25;
}

.about-page .purpose-card p{
    color:var(--about-muted);
    line-height:1.8;
}

/* ==========================================
   BUSINESS DIVISIONS
========================================== */

.about-page .divisions-section{
    background:var(--about-white);
}

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

.about-page .division-card{
    position:relative;
    height:100%;
    padding:40px 34px 36px;

    background:var(--about-white);
    border:1px solid var(--about-border);
    border-radius:22px;
    box-shadow:var(--about-shadow);

    overflow:hidden;

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

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

.about-page .division-card:hover{
    transform:translateY(-8px);
    border-color:rgba(212,175,55,.5);
    box-shadow:var(--about-shadow-hover);
}

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

.about-page .division-label{
    margin-bottom:15px;
    padding:7px 13px;
    color:var(--about-gold-dark);
    background:rgba(212,175,55,.12);
    border-radius:50px;
    font-size:.7rem;
    letter-spacing:1px;
}

.about-page .division-card h3{
    margin-bottom:16px;
    color:var(--about-navy);
    font-size:1.4rem;
    line-height:1.3;
}

.about-page .division-card p{
    margin-bottom:22px;
    color:var(--about-muted);
    line-height:1.75;
}

.about-page .division-card ul{
    display:grid;
    gap:10px;
    margin-bottom:28px;
}

.about-page .division-card li{
    position:relative;
    padding-left:24px;
    color:#4f5968;
    line-height:1.6;
}

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

/* ==========================================
   TEXT LINKS
========================================== */

.about-page .text-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--about-navy);
    font-weight:700;
    line-height:1.5;
    transition:color .3s ease;
}

.about-page .text-link::after{
    content:"→";
    color:var(--about-gold);
    transition:transform .3s ease;
}

.about-page .text-link:hover{
    color:var(--about-gold-dark);
}

.about-page .text-link:hover::after{
    transform:translateX(5px);
}

/* ==========================================
   LEADERSHIP INTRODUCTION
========================================== */

.about-page .leadership-intro{
    background:
        linear-gradient(
            135deg,
            var(--about-navy),
            var(--about-navy-light)
        );
}

.about-page .leadership-intro-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);
    gap:65px;
    align-items:center;
}

.about-page .leadership-intro h2{
    margin-bottom:0;
    color:var(--about-white);
}

.about-page .leadership-intro-layout > p{
    padding-left:35px;
    color:#dce4ef;
    line-height:1.85;
    border-left:3px solid var(--about-gold);
}

/* ==========================================
   LEADERSHIP TEAM
========================================== */

.about-page .leadership-section{
    background:var(--about-white);
}

.about-page .leader-card{
    display:grid;
    grid-template-columns:minmax(330px,.8fr) minmax(0,1.2fr);
    gap:65px;
    align-items:center;
    margin-bottom:90px;
}

.about-page .leader-card:last-child{
    margin-bottom:0;
}

.about-page .leader-card.reverse .leader-image{
    order:2;
}

.about-page .leader-card.reverse .leader-content{
    order:1;
}

.about-page .leader-image{
    position:relative;
}

.about-page .leader-image::before{
    content:"";
    position:absolute;
    left:-16px;
    bottom:-16px;
    width:72%;
    height:72%;
    background:var(--about-gold);
    border-radius:23px;
    z-index:0;
}

.about-page .leader-card.reverse .leader-image::before{
    left:auto;
    right:-16px;
}

.about-page .leader-image img{
    position:relative;
    z-index:1;
    width:100%;
    min-height:500px;
    object-fit:cover;
    object-position:center;
    border-radius:23px;
    box-shadow:
        0 22px 48px rgba(8,27,58,.16);
}

.about-page .leader-content{
    max-width:760px;
}

.about-page .leader-content h2{
    margin-bottom:24px;
}

.about-page .leader-content p{
    margin-bottom:18px;
}

.about-page .leader-highlight{
    margin-top:30px;
    padding:25px 28px;
    background:var(--about-light);
    border-left:4px solid var(--about-gold);
    border-radius:0 16px 16px 0;
}

.about-page .leader-highlight > span{
    margin-bottom:8px;
    font-size:.7rem;
}

.about-page .leader-highlight p{
    margin-bottom:0;
    color:var(--about-navy);
    font-weight:600;
    line-height:1.75;
}

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

.about-page .cir-feature{
    position:relative;

    background:
        linear-gradient(
            90deg,
            rgba(8,27,58,.97),
            rgba(8,27,58,.87)
        ),
        url("../images/cir-banner.jpg") center/cover no-repeat;

    overflow:hidden;
}

.about-page .cir-feature::after{
    content:"";
    position:absolute;
    right:-160px;
    top:-180px;
    width:430px;
    height:430px;
    border:1px solid rgba(212,175,55,.2);
    border-radius:50%;
}

.about-page .cir-layout{
    position:relative;
    z-index:1;
    max-width:880px;
}

.about-page .cir-content h2{
    color:var(--about-white);
}

.about-page .cir-content p{
    max-width:800px;
    margin-bottom:20px;
    color:#dce4ef;
}

.about-page .cir-buttons{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-top:32px;
}

.about-page .cir-feature .btn-outline{
    border-color:var(--about-white);
    color:var(--about-white);
}

.about-page .cir-feature .btn-outline:hover{
    background:var(--about-white);
    color:var(--about-navy);
}

/* ==========================================
   CORE VALUES
========================================== */

.about-page .values-section{
    background:var(--about-light);
}

.about-page .values-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
}

.about-page .value-card{
    position:relative;
    height:100%;
    padding:36px 28px;

    background:var(--about-white);
    border:1px solid var(--about-border);
    border-radius:20px;
    box-shadow:var(--about-shadow);

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

.about-page .value-card:hover{
    transform:translateY(-7px);
    border-color:rgba(212,175,55,.5);
    box-shadow:var(--about-shadow-hover);
}

.about-page .value-number{
    display:block;
    margin-bottom:26px;
    color:rgba(8,27,58,.14);
    font-size:2.6rem;
    font-weight:800;
    line-height:1;
}

.about-page .value-card h3{
    margin-bottom:13px;
    color:var(--about-navy);
    font-size:1.35rem;
}

.about-page .value-card p{
    color:var(--about-muted);
    line-height:1.75;
}

/* ==========================================
   RECOGNITION
========================================== */

.about-page .recognition-section{
    background:var(--about-white);
}

.about-page .recognition-layout{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);
    gap:65px;
    align-items:center;
}

.about-page .recognition-content p{
    margin-bottom:20px;
}

.about-page .recognition-content .btn{
    margin-top:10px;
}

.about-page .recognition-summary{
    position:relative;
    padding:42px;

    background:
        linear-gradient(
            145deg,
            var(--about-navy),
            var(--about-navy-light)
        );

    border-radius:24px;
    box-shadow:
        0 20px 45px rgba(8,27,58,.18);

    overflow:hidden;
}

.about-page .recognition-summary::after{
    content:"";
    position:absolute;
    right:-90px;
    bottom:-110px;
    width:240px;
    height:240px;
    border:1px solid rgba(212,175,55,.2);
    border-radius:50%;
}

.about-page .recognition-summary > *{
    position:relative;
    z-index:1;
}

.about-page .recognition-summary h3{
    margin-bottom:18px;
    color:var(--about-white);
    font-size:clamp(1.7rem,3vw,2.25rem);
    line-height:1.3;
}

.about-page .recognition-summary p{
    color:#dce4ef;
    line-height:1.8;
}

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

.about-page .cta{
    position:relative;
    padding:100px 0;
    text-align:center;

    background:
        linear-gradient(
            135deg,
            var(--about-navy-dark),
            var(--about-navy-light)
        );

    overflow:hidden;
}

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

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

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

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

.about-page .cta-buttons{
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
}

.about-page .cta .btn-outline{
    border-color:var(--about-white);
    color:var(--about-white);
}

.about-page .cta .btn-outline:hover{
    background:var(--about-white);
    color:var(--about-navy);
}

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

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

.about-page section[id]{
    scroll-margin-top:110px;
}

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

@media(max-width:1100px){

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

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

}

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

@media(max-width:992px){

    .about-page .about-hero{
        min-height:590px;
        padding:135px 0 100px;
    }

    .about-page .story-layout,
    .about-page .leadership-intro-layout,
    .about-page .recognition-layout{
        grid-template-columns:1fr;
        gap:42px;
    }

    .about-page .leadership-intro-layout > p{
        padding-left:24px;
    }

    .about-page .leader-card,
    .about-page .leader-card.reverse{
        grid-template-columns:1fr;
        gap:45px;
    }

    .about-page .leader-card.reverse .leader-image,
    .about-page .leader-card.reverse .leader-content{
        order:initial;
    }

    .about-page .leader-image{
        max-width:650px;
    }

    .about-page .leader-image img{
        min-height:430px;
    }

}

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

@media(max-width:768px){

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

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

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

    .about-page .hero-buttons,
    .about-page .cir-buttons,
    .about-page .cta-buttons{
        justify-content:center;
    }

    .about-page .hero-buttons .btn,
    .about-page .cir-buttons .btn,
    .about-page .cta-buttons .btn{
        width:100%;
        max-width:360px;
        text-align:center;
    }

    .about-page .mission-vision-grid,
    .about-page .divisions-grid,
    .about-page .values-grid{
        grid-template-columns:1fr;
    }

    .about-page .story-highlight,
    .about-page .purpose-card,
    .about-page .division-card,
    .about-page .value-card,
    .about-page .recognition-summary{
        padding:28px;
    }

    .about-page .leader-card{
        margin-bottom:70px;
    }

    .about-page .leader-image::before{
        left:-10px;
        bottom:-10px;
    }

    .about-page .leader-card.reverse .leader-image::before{
        right:-10px;
    }

    .about-page .leader-image img{
        min-height:350px;
    }

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

}

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

@media(max-width:480px){

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

    .about-page .story-highlight,
    .about-page .purpose-card,
    .about-page .division-card,
    .about-page .value-card,
    .about-page .recognition-summary{
        padding:23px;
        border-radius:17px;
    }

    .about-page .purpose-number,
    .about-page .division-number{
        margin-bottom:22px;
        font-size:3.1rem;
    }

    .about-page .story-highlight blockquote{
        font-size:1.2rem;
    }

    .about-page .leader-image img{
        min-height:290px;
        border-radius:18px;
    }

    .about-page .leader-highlight{
        padding:21px;
    }

}

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

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

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

}