/* =============================================================
   SA HEDGE FUND — ABOUT PAGE
   ============================================================= */


/* =============================================================
   PAGE-SPECIFIC
   ============================================================= */

.about-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;

    min-height:48px;
    padding:0 26px;

    font-size:0.86rem;
    letter-spacing:0.02em;

    transition:all .25s ease;

    border:1px solid transparent;

    cursor:pointer;

    font-family:inherit;
}

.about-btn-line{
    border-bottom:1px solid var(--gold-dim);

    padding:0 0 4px;

    color:var(--on-navy);
}

.about-btn-line:hover{
    border-color:var(--gold);
    color:var(--gold);
}

.about-btn:hover .about-btn-arrow{
    transform:translateX(3px);
}

.about-btn-arrow{
    transition:transform .25s ease;
}

.about-btn-dark-line{
    border-bottom:1px solid rgba(11,31,51,0.3);

    color:var(--on-cream);
}

.about-btn-dark-line:hover{
    border-color:var(--navy);
    color:var(--navy);
}


/* =============================================================
   PAGE CONTAINER
   ============================================================= */

/*
 * Uses the same global container architecture as the rest
 * of the SA Hedge Fund website.
 *
 * Do not use --max here.
 */

.about-wrap{

    width:min(
        var(--layout-container),
        calc(100% - (var(--gutter) * 2))
    );

    max-width:var(--layout-container);

    margin-inline:auto;
}


/* =============================================================
   SHARED EDITORIAL PRIMITIVES
   ============================================================= */

.about-eyebrow{
    display:inline-flex;

    align-items:center;

    gap:10px;

    font-size:0.74rem;

    letter-spacing:0.16em;

    text-transform:uppercase;

    color:var(--gold);

    margin-bottom:24px;
}

.about-eyebrow::before{
    content:'';

    width:24px;
    height:1px;

    background:var(--gold);
}

.about-eyebrow.about-on-light{
    color:var(--gold-dark);
}

.about-eyebrow.about-on-light::before{
    background:var(--gold-dark);
}

.about-section-head{
    max-width:640px;

    margin:0 0 clamp(40px,6vw,64px);
}

.about-section-head h2{
    font-size:clamp(1.6rem,3.4vw,2.2rem);

    line-height:1.28;
}

.about-section-head p{
    margin-top:16px;

    color:var(--on-navy-mute);

    font-size:1rem;

    line-height:1.7;

    max-width:52ch;
}

.about-section-head.about-on-light p{
    color:var(--on-cream-mute);
}

.about-coord{
    font-size:0.68rem;

    letter-spacing:0.06em;

    color:var(--gold-dark);

    opacity:0.65;
}

.about-tag{
    font-size:0.72rem;

    letter-spacing:0.1em;

    text-transform:uppercase;

    color:var(--gold-dark);
}


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

.about-hero{
    background:var(--cream);

    color:var(--on-cream);

    padding:
        clamp(80px,13vw,140px)
        0
        clamp(64px,9vw,96px);

    border-bottom:1px solid rgba(11,31,51,0.1);
}

.about-hero .about-wrap{
    max-width:760px;
}

.about-hero h1{
    font-size:clamp(2.6rem, 5vw, 3.8rem);

    line-height:1.2;

    letter-spacing:-0.01em;
}

.about-hero-lede{
    margin-top:28px;

    font-size:clamp(1.02rem,1.6vw,1.15rem);

    line-height:1.8;

    color:var(--on-cream-mute);

    max-width:58ch;
}


/* =============================================================
   MANIFESTO BLOCK + EDITORIAL SPLIT
   ============================================================= */

.about-manifesto{
    background:var(--navy);

    padding:clamp(80px,12vw,140px) 0;

    border-bottom:1px solid rgba(201,162,77,0.18);
}

.about-manifesto .about-wrap{
    max-width:880px;
}

.about-manifesto-block{
    font-family:'Playfair Display',serif;

    font-weight:500;

    font-size:clamp(1.5rem,3.6vw,2.3rem);

    line-height:1.42;

    letter-spacing:-0.005em;

    max-width:22ch;
}

.about-split{
    margin-top:clamp(56px,8vw,84px);

    display:grid;

    grid-template-columns:
        minmax(0,0.9fr)
        minmax(0,1.6fr);

    gap:clamp(32px,5vw,64px);

    padding-top:clamp(48px,7vw,64px);

    border-top:1px solid rgba(201,162,77,0.18);
}

.about-split-anchor{
    position:sticky;

    top:100px;

    align-self:start;
}

.about-split-anchor p{
    font-family:'Playfair Display',serif;

    font-style:italic;

    font-size:clamp(1.15rem,2vw,1.4rem);

    line-height:1.5;

    color:var(--on-navy);
}

.about-split-body{
    display:flex;

    flex-direction:column;

    gap:clamp(24px,3.5vw,32px);
}

.about-split-body p{
    font-size:1rem;

    line-height:1.8;

    color:var(--on-navy-mute);

    max-width:58ch;
}


/* =============================================================
   PRINCIPLES LIST
   ============================================================= */

.about-philosophy{
    background:var(--cream);

    color:var(--on-cream);

    padding:clamp(80px,12vw,140px) 0;
}

.about-philosophy-list{
    border-top:1px solid rgba(11,31,51,0.14);
}

.about-philosophy-row{
    display:grid;

    grid-template-columns:
        64px
        minmax(0,1fr);

    gap:clamp(20px,3vw,32px);

    padding:clamp(28px,4vw,40px) 0;

    border-bottom:1px solid rgba(11,31,51,0.14);
}

.about-philosophy-num{
    font-family:'Playfair Display',serif;

    font-style:italic;

    font-size:1.4rem;

    color:var(--gold-dark);
}

.about-philosophy-row h3{
    font-size:1.12rem;

    margin-bottom:10px;
}

.about-philosophy-row p{
    font-size:0.98rem;

    line-height:1.75;

    color:var(--on-cream-mute);

    max-width:62ch;
}


/* =============================================================
   FRAMEWORK TIMELINE
   ============================================================= */

.about-framework{
    background:var(--navy);

    padding:clamp(80px,12vw,140px) 0;

    border-bottom:1px solid rgba(201,162,77,0.18);
}

.about-steps{
    position:relative;

    border-top:1px solid rgba(201,162,77,0.18);
}

.about-steps::before{
    content:'';

    position:absolute;

    left:27px;

    top:0;

    bottom:0;

    width:1px;

    background:
        linear-gradient(
            var(--gold-dim),
            var(--gold),
            var(--gold-dim)
        );

    opacity:0.8;
}

.about-step{
    display:grid;

    grid-template-columns:
        56px
        minmax(0,1fr);

    gap:clamp(20px,3vw,32px);

    padding:clamp(30px,4.5vw,40px) 0;

    border-bottom:1px solid rgba(201,162,77,0.18);

    scroll-margin-top:96px;
}

.about-step:last-child{
    border-bottom:none;
}

.about-step-marker{
    position:relative;

    display:flex;

    justify-content:center;
}

.about-step-num{
    position:relative;

    z-index:1;

    width:38px;
    height:38px;

    border:1px solid var(--gold);

    border-radius:50%;

    background:var(--navy);

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:'Playfair Display',serif;

    font-style:italic;

    color:var(--gold);

    font-size:0.95rem;
}

.about-step h3{
    font-family:'Inter',sans-serif;

    font-weight:600;

    font-size:1.1rem;

    margin-bottom:10px;

    color:var(--on-navy);
}

.about-step p{
    color:var(--on-navy-mute);

    font-size:0.98rem;

    line-height:1.75;

    max-width:62ch;
}


/* =============================================================
   PRINCIPLES
   ============================================================= */

.about-principles{
    background:var(--cream);

    color:var(--on-cream);

    padding:clamp(80px,12vw,140px) 0;
}

.about-principles-list{
    display:grid;

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

    border-top:1px solid rgba(11,31,51,0.14);

    border-left:1px solid rgba(11,31,51,0.14);
}

.about-principles-list li{
    padding:
        clamp(28px,4vw,36px)
        clamp(24px,3vw,32px);

    border-right:1px solid rgba(11,31,51,0.14);

    border-bottom:1px solid rgba(11,31,51,0.14);
}

.about-principles-list p{
    font-family:'Playfair Display',serif;

    font-weight:500;

    font-size:clamp(1.05rem,1.8vw,1.28rem);

    line-height:1.5;

    letter-spacing:-0.005em;
}


/* =============================================================
   PROCESS STRIP
   ============================================================= */

.about-process{
    background:var(--navy);

    padding:clamp(80px,12vw,140px) 0;

    border-bottom:1px solid rgba(201,162,77,0.18);
}

.about-process-strip{
    display:grid;

    grid-template-columns:
        repeat(5,minmax(0,1fr));

    gap:1px;

    background:rgba(201,162,77,0.18);

    border:1px solid rgba(201,162,77,0.18);

    margin-top:clamp(8px,2vw,16px);
}

.about-process-stage{
    background:var(--navy-deep);

    padding:
        clamp(24px,3vw,30px)
        clamp(18px,2.4vw,22px);
}

.about-process-stage .about-process-index{
    font-family:'Playfair Display',serif;

    font-style:italic;

    color:var(--gold);

    font-size:0.85rem;

    display:block;

    margin-bottom:14px;
}

.about-process-stage h3{
    font-family:'Inter',sans-serif;

    font-weight:600;

    font-size:0.98rem;

    color:var(--on-navy);

    margin-bottom:10px;
}

.about-process-stage p{
    font-size:0.86rem;

    line-height:1.65;

    color:var(--on-navy-mute);
}


/* =============================================================
   FEATURE CARDS
   ============================================================= */

.about-difference{
    background:var(--neutral);

    color:var(--on-cream);

    padding:clamp(80px,12vw,140px) 0;
}

.about-feature-cards{
    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(240px,1fr));

    gap:1px;

    background:rgba(11,31,51,0.1);

    border:1px solid rgba(11,31,51,0.1);
}

.about-feature-card{
    background:#fff;

    padding:
        clamp(28px,4vw,34px)
        clamp(24px,3vw,28px);
}

.about-feature-card .about-feature-index{
    display:block;

    font-family:'Playfair Display',serif;

    font-style:italic;

    color:var(--gold-dark);

    font-size:0.85rem;

    margin-bottom:18px;
}

.about-feature-card h3{
    font-size:1.08rem;

    line-height:1.35;

    margin-bottom:12px;
}

.about-feature-card p{
    font-size:0.92rem;

    line-height:1.68;

    color:var(--on-cream-mute);
}


/* =============================================================
   RESEARCH BRIDGE
   ============================================================= */

.about-bridge{
    background:var(--cream);

    color:var(--on-cream);

    padding:clamp(80px,12vw,140px) 0;
}

.about-bridge-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap:clamp(40px,6vw,72px);

    align-items:start;
}

.about-bridge-copy p{
    font-size:1.02rem;

    line-height:1.85;

    color:var(--on-cream-mute);

    max-width:48ch;
}

.about-bridge-copy p + p{
    margin-top:20px;
}

.about-bridge-copy .about-btn-dark-line{
    display:inline-block;

    margin-top:28px;
}

.about-bridge-feature{
    background:#fff;

    border:1px solid rgba(11,31,51,0.1);

    padding:clamp(28px,4vw,36px);

    position:relative;
}

.about-bridge-feature .about-coord{
    position:absolute;

    top:20px;

    right:22px;
}

.about-bridge-feature .about-tag{
    display:block;

    margin-bottom:16px;
}

.about-bridge-feature h3{
    font-family:'Playfair Display',serif;

    font-weight:600;

    font-size:clamp(1.2rem,2vw,1.5rem);

    line-height:1.35;

    padding-right:36px;
}

.about-bridge-feature p{
    font-size:0.94rem;

    line-height:1.7;

    color:var(--on-cream-mute);

    margin-top:14px;
}

.about-bridge-feature .about-bridge-read{
    margin-top:20px;

    font-size:0.82rem;

    font-weight:500;

    display:inline-flex;

    gap:8px;

    align-items:center;

    color:var(--navy);

    border-bottom:1px solid rgba(11,31,51,0.25);

    padding-bottom:2px;
}

.about-bridge-feature:hover{
    background:#fbfaf8;
}


/* =============================================================
   CLOSING STATEMENT
   ============================================================= */

.about-closing{
    padding:clamp(80px,13vw,150px) 0;

    text-align:center;
}

.about-closing .about-closing-rule{
    width:44px;

    height:2px;

    background:var(--gold);

    margin:0 auto 40px;
}

.about-closing-lines{
    font-family:'Playfair Display',serif;

    font-weight:500;

    font-size:clamp(1.4rem,3.2vw,2rem);

    line-height:1.6;

    max-width:26ch;

    margin:0 auto;
}

.about-closing-lines em{
    font-style:italic;

    color:var(--gold);
}

.about-closing .about-btn-line{
    display:inline-block;

    margin-top:clamp(40px,6vw,52px);
}


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

@media (max-width:860px){

    .nav-links{
        display:none;
    }

    .nav-burger{
        display:flex;
    }

    .about-split{
        grid-template-columns:1fr;
    }

    .about-split-anchor{
        position:static;
    }

    .about-process-strip{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .about-bridge-grid{
        grid-template-columns:1fr;
    }

}


@media (max-width:640px){

    .about-step{
        grid-template-columns:
            44px
            minmax(0,1fr);

        gap:18px;
    }

    .about-step-num{
        width:32px;
        height:32px;

        font-size:0.85rem;
    }

    .about-steps::before{
        left:22px;
    }

    .about-philosophy-row{
        grid-template-columns:
            40px
            minmax(0,1fr);
    }

    .about-principles-list{
        grid-template-columns:1fr;
    }

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

}


@media (max-width:480px){

    .about-process-strip{
        grid-template-columns:1fr;
    }

}