/* =====================================================
   UNITED BALLOTS
   FOUNDER SECTION
====================================================== */

.ub-founder-section {

    position: relative;

    overflow: hidden;

    padding:
        110px 0;

    background:

        linear-gradient(
            135deg,
            var(--navy) 0%,
            var(--navy-2) 55%,
            var(--blue) 100%
        );

    color:
        var(--white);

    isolation:
        isolate;

}


/* =====================================================
   MAIN CONTAINER
====================================================== */

.ub-founder-container {

    position:
        relative;

    width:
        min(
            calc(100% - 80px),
            var(--container)
        );

    min-height:
        570px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        0.9fr 1.1fr;

    align-items:
        center;

    gap:
        clamp(
            70px,
            9vw,
            130px
        );

}


/* =====================================================
   BACKGROUND GRID
====================================================== */

.ub-founder-grid {

    position:
        absolute;

    inset:
        0;

    z-index:
        -3;

    opacity:
        0.045;

    background-image:

        linear-gradient(
            rgba(
                255,
                255,
                255,
                0.5
            ) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(
                255,
                255,
                255,
                0.5
            ) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

}


/* =====================================================
   BACKGROUND GLOW
====================================================== */

.ub-founder-glow {

    position:
        absolute;

    width:
        600px;

    height:
        600px;

    left:
        -300px;

    top:
        50%;

    transform:
        translateY(-50%);

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(
                200,
                16,
                46,
                0.18
            ),
            transparent 70%
        );

    filter:
        blur(20px);

    z-index:
        -2;

}


/* =====================================================
   IMAGE VISUAL
====================================================== */

.ub-founder-visual {

    position:
        relative;

    height:
        570px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


/* =====================================================
   LARGE UB
====================================================== */

.ub-founder-ub {

    position:
        absolute;

    top:
        5px;

    left:
        -55px;

    color:
        rgba(
            255,
            255,
            255,
            0.035
        );

    font-size:
        180px;

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -0.12em;

    pointer-events:
        none;

}


/* =====================================================
   IMAGE FRAME
====================================================== */

.ub-founder-image-frame {

    position:
        relative;

    width:
        min(
            100%,
            420px
        );

    height:
        530px;

    padding:
        10px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.2
        );

    background:
        rgba(
            255,
            255,
            255,
            0.04
        );

    transform:
        rotate(
            -2deg
        );

    transition:
        transform
        0.5s ease;

}


.ub-founder-image-frame:hover {

    transform:
        rotate(
            0deg
        )
        translateY(
            -6px
        );

}


/* =====================================================
   IMAGE
====================================================== */

.ub-founder-image {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

    background:
        var(--navy);

}


/* =====================================================
   IMAGE ELEMENT
====================================================== */

.ub-founder-image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center top;

    filter:
        saturate(
            0.9
        );

    transition:
        transform
        0.7s ease,

        filter
        0.7s ease;

}


.ub-founder-image-frame:hover
.ub-founder-image img {

    transform:
        scale(
            1.05
        );

    filter:
        saturate(
            1
        );

}


/* =====================================================
   IMAGE OVERLAY
====================================================== */

.ub-founder-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            to top,
            rgba(
                7,
                26,
                58,
                0.85
            ),
            transparent 45%
        );

    pointer-events:
        none;

}


/* =====================================================
   IMAGE LABEL
====================================================== */

.ub-founder-image-overlay {

    position:
        absolute;

    left:
        25px;

    right:
        25px;

    bottom:
        25px;

    z-index:
        2;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

}


.ub-founder-image-overlay span {

    color:
        rgba(
            255,
            255,
            255,
            0.55
        );

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.15em;

}


.ub-founder-image-overlay strong {

    color:
        var(--white);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.12em;

}


/* =====================================================
   FOUNDER CARD
====================================================== */

.ub-founder-card {

    position:
        absolute;

    left:
        -25px;

    bottom:
        45px;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        14px 20px;

    border:
        1px solid
        rgba(
            7,
            26,
            58,
            0.08
        );

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

    box-shadow:

        0 20px 50px
        rgba(
            0,
            0,
            0,
            0.25
        );

}


.ub-founder-card-line {

    width:
        3px;

    height:
        32px;

    background:
        var(--red);

}


.ub-founder-card strong {

    display:
        block;

    color:
        var(--navy);

    font-size:
        11px;

    font-weight:
        800;

}


.ub-founder-card span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        9px;

}


/* =====================================================
   IMAGE NUMBER
====================================================== */

.ub-founder-number {

    position:
        absolute;

    right:
        15px;

    top:
        30px;

    color:
        rgba(
            255,
            255,
            255,
            0.45
        );

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.15em;

}


/* =====================================================
   CONTENT
====================================================== */

.ub-founder-content {

    position:
        relative;

    max-width:
        680px;

}


/* =====================================================
   EYEBROW
====================================================== */

.ub-founder-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        24px;

    color:
        var(--red-light);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;

}


.ub-founder-eyebrow span {

    width:
        35px;

    height:
        2px;

    background:
        var(--red);

}


/* =====================================================
   HEADING
====================================================== */

.ub-founder-content h2 {

    margin:
        0;

    color:
        var(--white);

    font-size:
        clamp(
            3rem,
            5vw,
            5.2rem
        );

    font-weight:
        700;

    line-height:
        0.98;

    letter-spacing:
        -0.065em;

}


.ub-founder-content h2 em {

    color:
        var(--red-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight:
        400;

}


/* =====================================================
   QUOTE
====================================================== */

.ub-founder-content blockquote {

    position:
        relative;

    margin:
        35px 0 28px;

    padding:
        0 0 0 22px;

    color:
        rgba(
            255,
            255,
            255,
            0.9
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            1.15rem,
            1.8vw,
            1.55rem
        );

    font-style:
        italic;

    line-height:
        1.5;

}


.ub-founder-content blockquote::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        4px;

    width:
        2px;

    height:
        calc(
            100% - 8px
        );

    background:
        var(--red);

}


.ub-founder-quote-mark {

    color:
        var(--red);

    font-size:
        1.8em;

    line-height:
        0;

}


/* =====================================================
   BODY TEXT
====================================================== */

.ub-founder-text {

    max-width:
        600px;

}


.ub-founder-text p {

    margin:
        0 0 14px;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    font-size:
        13px;

    line-height:
        1.7;

}


/* =====================================================
   BUTTON
====================================================== */

.ub-founder-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        25px;

    margin-top:
        16px;

    padding:
        11px 12px 11px 19px;

    color:
        var(--white);

    background:
        var(--red);

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    transition:
        all
        0.35s ease;

}


.ub-founder-button b {

    display:
        grid;

    place-items:
        center;

    width:
        28px;

    height:
        28px;

    color:
        var(--navy);

    background:
        var(--white);

    border-radius:
        50%;

    font-size:
        14px;

    transition:
        transform
        0.35s ease;

}


.ub-founder-button:hover {

    background:
        var(--red-dark);

    transform:
        translateY(
            -3px
        );

    box-shadow:

        0 15px 35px
        rgba(
            200,
            16,
            46,
            0.3
        );

}


.ub-founder-button:hover b {

    transform:
        translateX(
            4px
        );

}


/* =====================================================
   PHILOSOPHY
====================================================== */

.ub-founder-philosophy {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-top:
        35px;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

}


.ub-founder-philosophy span {

    color:
        rgba(
            255,
            255,
            255,
            0.35
        );

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}


.ub-founder-philosophy i {

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        var(--red);

}


/* =====================================================
   REVEAL ANIMATION
====================================================== */

.ub-founder-reveal {

    opacity:
        0;

    transform:
        translateY(
            30px
        );

    animation:

        ubFounderReveal
        0.9s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        forwards;

}


.ub-founder-content {

    animation-delay:
        0.15s;

}


@keyframes ubFounderReveal {

    to {

        opacity:
            1;

        transform:
            translateY(
                0
            );

    }

}


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

@media (max-width: 1000px) {

    .ub-founder-section {

        padding:
            90px 0;

    }


    .ub-founder-container {

        width:
            calc(
                100% - 50px
            );

        grid-template-columns:
            0.8fr 1.2fr;

        gap:
            60px;

    }


    .ub-founder-visual {

        height:
            500px;

    }


    .ub-founder-image-frame {

        height:
            470px;

    }


    .ub-founder-content h2 {

        font-size:
            clamp(
                2.8rem,
                5vw,
                4.5rem
            );

    }


    .ub-founder-text p {

        font-size:
            12px;

    }

}


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

@media (max-width: 700px) {

    .ub-founder-section {

        padding:
            70px 0;

    }


    .ub-founder-container {

        width:
            calc(
                100% - 32px
            );

        grid-template-columns:
            1fr;

        gap:
            65px;

    }


    .ub-founder-visual {

        height:
            500px;

    }


    .ub-founder-image-frame {

        width:
            min(
                100%,
                390px
            );

        height:
            470px;

    }


    .ub-founder-card {

        left:
            0;

        bottom:
            20px;

    }


    .ub-founder-ub {

        left:
            0;

        top:
            10px;

        font-size:
            120px;

    }


    .ub-founder-content h2 {

        font-size:
            clamp(
                2.8rem,
                12vw,
                4rem
            );

    }


    .ub-founder-content blockquote {

        font-size:
            1.15rem;

        margin-top:
            30px;

    }


    .ub-founder-text p {

        font-size:
            13px;

        line-height:
            1.7;

    }

}


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

@media (max-width: 400px) {

    .ub-founder-container {

        width:
            calc(
                100% - 24px
            );

    }


    .ub-founder-visual {

        height:
            450px;

    }


    .ub-founder-image-frame {

        height:
            420px;

    }


    .ub-founder-card {

        padding:
            12px 15px;

    }


    .ub-founder-card strong {

        font-size:
            10px;

    }


    .ub-founder-content h2 {

        font-size:
            2.7rem;

    }


    .ub-founder-philosophy {

        flex-wrap:
            wrap;

    }

}


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

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

    .ub-founder-reveal {

        animation:
            none;

        opacity:
            1;

        transform:
            none;

    }


    .ub-founder-image-frame,
    .ub-founder-image img,
    .ub-founder-button {

        transition:
            none;

    }

}