/* =========================================================
   SR AGENCIES — FOUNDERS & LEADERSHIP
   File: css/founders.css
========================================================= */


/* =========================================================
   01. SECTION BASE
========================================================= */

.founders-section {
    position: relative;
    isolation: isolate;

    padding: 86px 0 92px;

    overflow: hidden;

    background: #f7faff;

    color: #08224a;
}

.founders-section .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   02. BACKGROUND RADIANCE
========================================================= */

.founders-bg-radiance {
    position: absolute;

    width: 850px;
    height: 850px;

    top: -130px;
    right: -230px;

    z-index: -2;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(90, 155, 255, 0.16) 0%,
            rgba(90, 155, 255, 0.095) 28%,
            rgba(90, 155, 255, 0.045) 49%,
            rgba(90, 155, 255, 0.015) 66%,
            transparent 77%
        );

    filter: blur(8px);
}


/* =========================================================
   03. LARGE OUTLINE CIRCLE
========================================================= */

.founders-bg-circle {
    position: absolute;

    width: 730px;
    height: 730px;

    top: 38px;
    right: -40px;

    z-index: -1;

    border: 1px solid rgba(47, 112, 226, 0.075);

    border-radius: 50%;

    pointer-events: none;
}

.founders-bg-circle::before,
.founders-bg-circle::after {
    content: "";

    position: absolute;

    border: 1px solid rgba(47, 112, 226, 0.045);

    border-radius: 50%;
}

.founders-bg-circle::before {
    inset: 36px;
}

.founders-bg-circle::after {
    inset: 78px;
}


/* =========================================================
   04. DOT PATTERN
========================================================= */

.founders-bg-dots {
    position: absolute;

    right: 11%;
    bottom: 105px;

    width: 92px;
    height: 82px;

    z-index: -1;

    pointer-events: none;

    opacity: 0.45;

    background-image:
        radial-gradient(
            circle,
            #66b4ff 1.6px,
            transparent 1.8px
        );

    background-size: 15px 15px;
}


/* =========================================================
   05. MAIN LAYOUT
========================================================= */

.founders-layout {
    display: grid;

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

    align-items: start;

    column-gap: 30px;

    width: 100%;
}


/* =========================================================
   06. LEFT CONTENT
========================================================= */

.founders-content {
    position: relative;
    z-index: 3;

    min-width: 0;

    padding-top: 42px;
}


/* =========================================================
   07. EYEBROW LABEL
========================================================= */

.founders-eyebrow {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 25px;

    color: #285bd6;

    font-size: 12px;
    line-height: 1.3;

    font-weight: 750;

    letter-spacing: 0.17em;

    text-transform: uppercase;
}

.founders-eyebrow-line {
    display: block;

    width: 36px;
    height: 2px;

    flex-shrink: 0;

    background: #285bd6;
}


/* =========================================================
   08. MAIN HEADING
========================================================= */

.founders-title {
    max-width: 900px;

    margin: 0 0 24px;

    color: #08224a;

    font-size: clamp(44px, 4.1vw, 64px);
    line-height: 1.02;

    font-weight: 800;

    letter-spacing: -0.055em;
}

.founders-title span {
    display: block;

    color: #285bd6;
}


/* =========================================================
   09. COMPANY PHILOSOPHY
========================================================= */

.founders-description {
    max-width: 820px;

    margin-bottom: 25px;
}

.founders-description p {
    margin: 0 0 17px;

    color: #647997;

    font-size: 15px;
    line-height: 1.72;

    font-weight: 500;

    letter-spacing: -0.008em;
}

.founders-description p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   10. LEADERSHIP PRINCIPLES GRID
========================================================= */

.founders-principles {
    display: grid;

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

    gap: 14px;

    margin-top: 25px;
}


/* =========================================================
   11. PRINCIPLE CARD
========================================================= */

.founder-principle-card {
    display: flex;
    align-items: center;

    gap: 15px;

    min-width: 0;
    min-height: 136px;

    padding: 17px 15px;

    border: 1px solid rgba(40, 91, 214, 0.09);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(250, 252, 255, 0.96)
        );

    box-shadow:
        0 8px 25px rgba(8, 31, 70, 0.035);

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


/* =========================================================
   12. PRINCIPLE ICON
========================================================= */

.founder-principle-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 66px;
    height: 66px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #e7f1ff,
            #dceaff
        );

    color: #285bd6;

    font-size: 27px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.founder-principle-icon i {
    line-height: 1;
}


/* =========================================================
   13. PRINCIPLE CONTENT
========================================================= */

.founder-principle-content {
    min-width: 0;
}

.founder-principle-number {
    display: block;

    margin-bottom: 7px;

    color: #6092e9;

    font-size: 11px;
    line-height: 1.2;

    font-weight: 800;

    letter-spacing: 0.12em;
}

.founder-principle-content h3 {
    margin: 0 0 5px;

    color: #08224a;

    font-size: 16px;
    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -0.025em;
}

.founder-principle-content p {
    margin: 0;

    color: #7085a2;

    font-size: 12px;
    line-height: 1.5;

    font-weight: 500;
}


/* =========================================================
   14. PRINCIPLE CARD HOVER
========================================================= */

.founder-principle-card:hover {
    transform: translateY(-4px);

    border-color: rgba(40, 91, 214, 0.2);

    box-shadow:
        0 15px 30px rgba(8, 31, 70, 0.075);
}

.founder-principle-card:hover .founder-principle-icon {
    transform: scale(1.04);

    background: #285bd6;

    color: #ffffff;
}


/* =========================================================
   15. DARK CLOSING PANEL
========================================================= */

.founders-closing-panel {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 120px;

    margin-top: 26px;

    padding: 23px 30px;

    overflow: hidden;

    border-radius: 12px;

    background:
        linear-gradient(
            110deg,
            #082953 0%,
            #0a356b 65%,
            #0c3c7c 100%
        );

    box-shadow:
        0 13px 30px rgba(8, 34, 74, 0.13);
}


/* Closing panel radiance */

.founders-closing-panel::before {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    top: -195px;
    right: 4%;

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

    border-radius: 50%;

    box-shadow:
        0 0 0 38px rgba(255, 255, 255, 0.018),
        0 0 0 78px rgba(255, 255, 255, 0.012);

    pointer-events: none;
}

.founders-closing-panel::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    width: 40%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(16, 88, 178, 0.13)
        );
}


/* =========================================================
   16. CLOSING PANEL CONTENT
========================================================= */

.founders-closing-content {
    position: relative;
    z-index: 2;

    min-width: 0;
}


/* =========================================================
   17. CLOSING PANEL LABEL
========================================================= */

.founders-closing-eyebrow {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 12px;

    color: #64aaff;

    font-size: 11px;
    line-height: 1.3;

    font-weight: 750;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}

.founders-closing-line {
    width: 36px;
    height: 2px;

    flex-shrink: 0;

    background: #41a3ff;
}


/* =========================================================
   18. CLOSING PANEL STATEMENT
========================================================= */

.founders-closing-content > p {
    margin: 0;

    color: #ffffff;

    font-size: clamp(17px, 1.45vw, 23px);
    line-height: 1.35;

    font-weight: 800;

    letter-spacing: -0.02em;

    text-transform: uppercase;
}


/* =========================================================
   19. CLOSING PANEL ARROW
========================================================= */

.founders-closing-link {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    flex-shrink: 0;

    border: 1px solid rgba(54, 139, 255, 0.9);

    border-radius: 50%;

    background: rgba(40, 91, 214, 0.12);

    color: #65adff;

    font-size: 25px;

    text-decoration: none;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.founders-closing-link i {
    transition: transform 0.3s ease;
}

.founders-closing-link:hover {
    transform: translateY(-2px);

    border-color: #4aa2ff;

    background: #285bd6;

    color: #ffffff;
}

.founders-closing-link:hover i {
    transform: translateX(4px);
}


/* =========================================================
   20. RIGHT-SIDE FOUNDER VISUAL
========================================================= */

.founders-visual {
    position: relative;

    width: 100%;
    min-width: 0;

    min-height: 700px;

    isolation: isolate;
}


/* =========================================================
   21. FOUNDER IMAGE BACKGROUND
========================================================= */

.founders-visual::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    z-index: -2;

    border: 1px solid rgba(54, 125, 232, 0.09);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(87, 153, 255, 0.09) 0%,
            rgba(87, 153, 255, 0.045) 43%,
            transparent 72%
        );

    pointer-events: none;
}


/* =========================================================
   22. SCRIPT-STYLE FOUNDER HEADING
========================================================= */

.founders-script-title {
    position: absolute;

    top: -4px;
    right: 0;

    z-index: 1;

    color: rgba(88, 139, 224, 0.42);

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size: clamp(31px, 3.1vw, 45px);
    line-height: 0.98;

    font-weight: 400;

    font-style: italic;

    transform: rotate(-7deg);

    pointer-events: none;
}


/* =========================================================
   23. ARCHITECTURAL LINEWORK
========================================================= */

.founders-architecture {
    position: absolute;

    top: 45px;
    right: -9%;

    width: 61%;
    height: 490px;

    z-index: -1;

    color: rgba(63, 151, 255, 0.22);

    pointer-events: none;
}

.founders-architecture svg {
    display: block;

    width: 100%;
    height: 100%;

    overflow: visible;
}

.founders-architecture svg g {
    vector-effect: non-scaling-stroke;
}


/* =========================================================
   24. FOUNDER PROFILE CARD
========================================================= */

.founder-profile {
    position: absolute;

    display: flex;
    flex-direction: column;

    width: min(53%, 350px);

    min-width: 0;

    overflow: hidden;

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

    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 16px 40px rgba(17, 47, 91, 0.10),
        0 3px 10px rgba(17, 47, 91, 0.035);

    transition:
        box-shadow 0.35s ease,
        transform 0.35s ease;
}


/* =========================================================
   25. PRIMARY FOUNDER — SIRAJ
========================================================= */

.founder-profile-primary {
    top: 20px;
    left: -1%;

    z-index: 3;
}


/* =========================================================
   26. SECONDARY FOUNDER — RAYEES
========================================================= */

.founder-profile-secondary {
    top: 145px;
    right: 0;

    z-index: 4;
}


/* =========================================================
   27. PORTRAIT IMAGE CONTAINER
========================================================= */

.founder-profile-image {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #eaf0f8;
}

.founder-profile-image::after {
    content: "";

    position: absolute;

    inset: auto 0 0;

    height: 22%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(7, 30, 61, 0.07)
        );

    pointer-events: none;
}

.founder-profile-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 30%;

    transition:
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   28. PORTRAIT POSITIONING
========================================================= */

.founder-profile-primary .founder-profile-image img {
    object-position: center 30%;
}

.founder-profile-secondary .founder-profile-image img {
    object-position: center 28%;
}


/* =========================================================
   29. FOUNDER CARD DETAILS
========================================================= */

.founder-profile-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-height: 105px;

    padding: 20px 21px 17px;
}


/* =========================================================
   30. FOUNDER NAME
========================================================= */

.founder-profile-details h3 {
    width: 100%;

    margin: 0 0 7px;

    color: #08224a;

    font-size: clamp(14px, 1.15vw, 19px);
    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -0.025em;

    overflow-wrap: anywhere;
}


/* =========================================================
   31. FOUNDER ROLE
========================================================= */

.founder-profile-details p {
    margin: 0;

    color: #7185a0;

    font-size: 13px;
    line-height: 1.4;

    font-weight: 550;
}


/* =========================================================
   32. FOUNDER ACCENT LINE
========================================================= */

.founder-profile-accent {
    display: block;

    width: 38px;
    height: 2px;

    margin-top: 13px;

    background: #285bd6;
}


/* =========================================================
   33. FOUNDER CARD HOVER
========================================================= */

.founder-profile:hover {
    box-shadow:
        0 24px 54px rgba(17, 47, 91, 0.16),
        0 5px 15px rgba(17, 47, 91, 0.045);
}

.founder-profile-primary:hover {
    transform: translateY(-5px);
}

.founder-profile-secondary:hover {
    transform: translateY(-5px);
}

.founder-profile:hover .founder-profile-image img {
    transform: scale(1.035);
}


/* =========================================================
   34. LARGE LAPTOP — 1400px
========================================================= */

@media (max-width: 1400px) {

    .founders-section {
        padding: 75px 0 82px;
    }

    .founders-layout {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(0, 0.9fr);

        column-gap: 25px;
    }

    .founders-content {
        padding-top: 35px;
    }

    .founders-title {
        font-size: clamp(43px, 4.2vw, 57px);
    }

    .founders-description p {
        font-size: 14px;
    }

    .founder-principles {
        gap: 10px;
    }

    .founder-principle-card {
        gap: 11px;

        min-height: 124px;

        padding: 14px 12px;
    }

    .founder-principle-icon {
        width: 52px;
        height: 52px;

        font-size: 23px;
    }

    .founder-principle-content h3 {
        font-size: 14px;
    }

    .founder-principle-content p {
        font-size: 11px;
    }

    .founders-visual {
        min-height: 660px;
    }

    .founder-profile {
        width: min(55%, 320px);
    }

    .founder-profile-secondary {
        top: 143px;
    }

    .founder-profile-details {
        padding: 17px 16px 15px;
    }
}


/* =========================================================
   35. LAPTOP / SMALL DESKTOP — 1200px
========================================================= */

@media (max-width: 1200px) {

    .founders-section {
        padding: 65px 0 74px;
    }

    .founders-layout {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(0, 0.92fr);

        column-gap: 22px;
    }

    .founders-content {
        padding-top: 28px;
    }

    .founders-eyebrow {
        margin-bottom: 20px;

        font-size: 11px;
    }

    .founders-title {
        font-size: clamp(40px, 4.15vw, 51px);

        line-height: 1.04;
    }

    .founders-description p {
        font-size: 13px;
        line-height: 1.7;
    }

    .founders-principles {
        gap: 9px;
    }

    .founder-principle-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        min-height: 145px;

        padding: 15px;
    }

    .founder-principle-icon {
        width: 43px;
        height: 43px;

        font-size: 20px;
    }

    .founder-principle-number {
        margin-bottom: 4px;
    }

    .founder-principle-content h3 {
        font-size: 14px;
    }

    .founder-principle-content p {
        font-size: 11px;
    }

    .founders-closing-panel {
        min-height: 112px;

        padding: 21px;
    }

    .founders-closing-content > p {
        font-size: 16px;
    }

    .founders-closing-link {
        width: 49px;
        height: 49px;

        font-size: 21px;
    }

    .founders-visual {
        min-height: 600px;
    }

    .founder-profile {
        width: 57%;
    }

    .founder-profile-secondary {
        top: 130px;
    }

    .founder-profile-details {
        min-height: 100px;

        padding: 15px;
    }

    .founder-profile-details h3 {
        font-size: 14px;
    }

    .founder-profile-details p {
        font-size: 11px;
    }
}


/* =========================================================
   36. TABLET — 1024px
========================================================= */

@media (max-width: 1024px) {

    .founders-section {
        padding: 62px 0 72px;
    }

    /*
     * Content first, portraits underneath on tablet.
     * This avoids squeezing the headline and principle cards.
     */
    .founders-layout {
        grid-template-columns: 1fr;

        gap: 32px;
    }

    .founders-content {
        padding-top: 0;
    }

    .founders-title {
        max-width: 780px;

        font-size: clamp(43px, 5.3vw, 59px);
    }

    .founders-description {
        max-width: 820px;
    }

    .founders-description p {
        font-size: 14px;
    }

    .founders-principles {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 14px;
    }

    .founder-principle-card {
        display: flex;
        flex-direction: row;
        align-items: center;

        min-height: 120px;

        padding: 15px;
    }

    .founder-principle-icon {
        width: 52px;
        height: 52px;

        font-size: 22px;
    }

    .founder-principle-content h3 {
        font-size: 15px;
    }

    .founder-principle-content p {
        font-size: 12px;
    }

    .founders-closing-panel {
        min-height: 115px;

        margin-top: 20px;
    }


    /* Portraits become a two-column gallery */
    .founders-visual {
        display: grid;

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

        align-items: start;

        column-gap: 30px;

        width: 100%;

        min-height: 0;

        padding: 28px 4% 0;
    }

    .founders-visual::before {
        top: 20px;

        width: 610px;
        height: 610px;
    }

    .founders-script-title {
        top: -4px;
        right: 10%;

        font-size: 38px;
    }

    .founders-architecture {
        top: 25px;
        right: 0;

        width: 45%;
        height: 470px;
    }

    .founder-profile {
        position: relative;

        top: auto;
        right: auto;
        left: auto;

        width: 100%;
        max-width: 360px;
    }

    .founder-profile-primary {
        justify-self: end;

        margin-top: 0;
    }

    .founder-profile-secondary {
        justify-self: start;

        margin-top: 85px;
    }

    .founder-profile-image {
        aspect-ratio: 4 / 5;
    }

    .founder-profile-details {
        min-height: 108px;

        padding: 18px;
    }

    .founder-profile-details h3 {
        font-size: 16px;
    }

    .founder-profile-details p {
        font-size: 12px;
    }
}


/* =========================================================
   37. TABLET / SMALL LAPTOP — 768px
========================================================= */

@media (max-width: 768px) {

    .founders-section {
        padding: 55px 0 62px;
    }

    .founders-layout {
        gap: 28px;
    }

    .founders-eyebrow {
        margin-bottom: 17px;

        font-size: 10px;
    }

    .founders-eyebrow-line {
        width: 29px;
    }

    .founders-title {
        max-width: 680px;

        margin-bottom: 18px;

        font-size: clamp(39px, 6.4vw, 52px);
    }

    .founders-description {
        margin-bottom: 20px;
    }

    .founders-description p {
        margin-bottom: 13px;

        font-size: 13px;
        line-height: 1.7;
    }

    .founders-principles {
        gap: 10px;
    }

    .founder-principle-card {
        gap: 10px;

        min-height: 116px;

        padding: 12px;
    }

    .founder-principle-icon {
        width: 43px;
        height: 43px;

        font-size: 19px;
    }

    .founder-principle-number {
        font-size: 9px;
    }

    .founder-principle-content h3 {
        font-size: 13px;
    }

    .founder-principle-content p {
        font-size: 10px;
        line-height: 1.45;
    }

    .founders-closing-panel {
        min-height: 106px;

        padding: 19px;
    }

    .founders-closing-eyebrow {
        gap: 9px;

        margin-bottom: 9px;

        font-size: 9px;
    }

    .founders-closing-line {
        width: 27px;
    }

    .founders-closing-content > p {
        font-size: 14px;
    }

    .founders-closing-link {
        width: 43px;
        height: 43px;

        font-size: 19px;
    }

    .founders-visual {
        column-gap: 22px;

        padding-right: 2%;
        padding-left: 2%;
    }

    .founder-profile-secondary {
        margin-top: 65px;
    }

    .founder-profile-details {
        min-height: 100px;

        padding: 15px;
    }

    .founder-profile-details h3 {
        font-size: 14px;
    }

    .founder-profile-details p {
        font-size: 11px;
    }
}


/* =========================================================
   38. MOBILE — 600px
========================================================= */

@media (max-width: 600px) {

    .founders-section {
        padding: 48px 0 55px;
    }


    /* Background */
    .founders-bg-radiance {
        top: 430px;
        right: -280px;

        width: 580px;
        height: 580px;
    }

    .founders-bg-circle {
        top: 490px;
        right: -280px;

        width: 470px;
        height: 470px;
    }

    .founders-bg-dots {
        right: 8%;
        bottom: 330px;

        width: 65px;
        height: 60px;

        opacity: 0.32;
    }


    /* Overall layout */
    .founders-layout {
        grid-template-columns: 1fr;

        gap: 32px;
    }


    /* Heading */
    .founders-content {
        padding-top: 0;
    }

    .founders-eyebrow {
        gap: 9px;

        margin-bottom: 15px;

        font-size: 9px;

        letter-spacing: 0.15em;
    }

    .founders-eyebrow-line {
        width: 27px;
    }

    .founders-title {
        max-width: 440px;

        margin-bottom: 17px;

        font-size: clamp(36px, 9.5vw, 46px);

        line-height: 1.04;

        letter-spacing: -0.05em;
    }

    .founders-description {
        margin-bottom: 20px;
    }

    .founders-description p {
        margin-bottom: 13px;

        font-size: 12px;
        line-height: 1.72;
    }


    /* =====================================================
       PRINCIPLES — TWO COLUMNS ON MOBILE
    ===================================================== */

    .founders-principles {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 9px;

        margin-top: 19px;
    }

    .founder-principle-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 11px;

        min-height: 146px;

        padding: 14px;

        border-radius: 11px;
    }

    /*
     * Third card spans the row, forming a balanced layout.
     */
    .founder-principle-card:last-child {
        grid-column: 1 / -1;

        flex-direction: row;
        align-items: center;

        min-height: 100px;
    }

    .founder-principle-icon {
        width: 44px;
        height: 44px;

        font-size: 21px;
    }

    .founder-principle-number {
        margin-bottom: 5px;

        font-size: 9px;
    }

    .founder-principle-content h3 {
        margin-bottom: 4px;

        font-size: 14px;
    }

    .founder-principle-content p {
        font-size: 10px;
        line-height: 1.5;
    }


    /* =====================================================
       CLOSING PANEL
    ===================================================== */

    .founders-closing-panel {
        min-height: 0;

        margin-top: 14px;

        padding: 20px 16px;

        gap: 12px;

        border-radius: 11px;
    }

    .founders-closing-panel::before {
        width: 230px;
        height: 230px;

        top: -145px;
        right: -70px;
    }

    .founders-closing-eyebrow {
        gap: 8px;

        margin-bottom: 9px;

        font-size: 8px;

        letter-spacing: 0.11em;
    }

    .founders-closing-line {
        width: 23px;
    }

    .founders-closing-content > p {
        max-width: 300px;

        font-size: 14px;
        line-height: 1.4;
    }

    .founders-closing-link {
        width: 38px;
        height: 38px;

        font-size: 17px;
    }


    /* =====================================================
       FOUNDER VISUALS — STACKED PORTRAITS
    ===================================================== */

    .founders-visual {
        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 25px;

        min-height: 0;

        padding: 48px 0 0;
    }

    .founders-visual::before {
        top: 10px;

        left: 50%;

        width: min(115vw, 470px);
        height: min(115vw, 470px);

        transform: translateX(-50%);
    }

    .founders-script-title {
        top: -18px;
        right: 35%;

        font-size: 30px;
    }

    .founders-architecture {
        top: 40px;
        right: -9%;

        width: 55%;
        height: 570px;

        opacity: 0.55;
    }


    /* Portrait cards */
    .founder-profile,
    .founder-profile-primary,
    .founder-profile-secondary {
        position: relative;

        top: auto;
        right: auto;
        left: auto;

        width: min(100%, 365px);
        max-width: 365px;

        margin: 0;

        border-radius: 12px;
    }

    .founder-profile-primary,
    .founder-profile-secondary {
        align-self: center;
    }

    .founder-profile-image {
        aspect-ratio: 4 / 4.2;
    }

    .founder-profile-details {
        min-height: 95px;

        padding: 16px 18px;
    }

    .founder-profile-details h3 {
        margin-bottom: 6px;

        font-size: 16px;
    }

    .founder-profile-details p {
        font-size: 12px;
    }

    .founder-profile-accent {
        width: 32px;

        margin-top: 11px;
    }

}


/* =========================================================
   39. SMALL MOBILE — 390px
========================================================= */

@media (max-width: 390px) {

    .founders-section {
        padding: 42px 0 48px;
    }

    .founders-title {
        font-size: 35px;
    }

    .founders-description p {
        font-size: 11px;
    }

    .founders-principles {
        gap: 8px;
    }

    .founder-principle-card {
        min-height: 135px;

        padding: 12px;
    }

    .founder-principle-card:last-child {
        min-height: 90px;
    }

    .founder-principle-icon {
        width: 39px;
        height: 39px;

        font-size: 18px;
    }

    .founder-principle-content h3 {
        font-size: 13px;
    }

    .founder-principle-content p {
        font-size: 9px;
    }

    .founders-closing-panel {
        padding: 17px 13px;
    }

    .founders-closing-content > p {
        font-size: 12px;
    }

    .founders-closing-link {
        width: 34px;
        height: 34px;

        font-size: 15px;
    }

    .founders-script-title {
        top: -18px;
        right: 35%;
        font-size: 28px;
    }

    .founder-profile-details {
        padding: 14px;
    }

    .founder-profile-details h3 {
        font-size: 14px;
    }

    .founder-profile-details p {
        font-size: 11px;
    }
}


/* =========================================================
   40. ACCESSIBILITY — REDUCED MOTION
========================================================= */

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

    .founder-principle-card,
    .founder-principle-icon,
    .founder-profile,
    .founder-profile-image img,
    .founders-closing-link,
    .founders-closing-link i {
        transition: none;
    }

    .founder-principle-card:hover,
    .founder-profile-primary:hover,
    .founder-profile-secondary:hover,
    .founders-closing-link:hover {
        transform: none;
    }

    .founder-profile:hover .founder-profile-image img {
        transform: none;
    }

    .founders-closing-link:hover i {
        transform: none;
    }
}