/* =========================================================
   INTELLIVEST — ABOUT PAGE
   ---------------------------------------------------------
   Global source of truth:
   - colors
   - typography
   - buttons
   - container
   - spacing scale
   are inherited from main.css
========================================================= */


/* =========================================================
   1. PAGE
========================================================= */

.about-page {
    overflow: hidden;
    background: var(--bg-white);
}

.about-page img {
    display: block;
    max-width: 100%;
}


/* =========================================================
   2. SHARED ABOUT TYPOGRAPHY
========================================================= */

.about-content__title,
.about-values__header h2 {
    margin: 0 0 var(--heading-margin);
}

.about-content__title span,
.about-values__header h2 span {
    color: var(--secondary);
}

.about-content p {
    margin: 0 0 var(--paragraph-margin);
}

.about-content__subheading {
    margin:
        var(--space-2)
        0
        var(--space-1);
}

.about-list-intro {
    margin-bottom: var(--space-1) !important;
}


/* =========================================================
   3. SHARED EYEBROW
========================================================= */

.about-eyebrow {
    margin-bottom: var(--space-3);
}

.about-eyebrow__icon {
    display: block;

    width: 17px;
    height: 17px;

    flex: 0 0 17px;

    color: var(--secondary);
}


/* =========================================================
   4. SHARED TWO-COLUMN LAYOUT
========================================================= */

.about-split {
    display: grid;

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

    gap: var(--space-10);
    align-items: center;
}


/* =========================================================
   5. SHARED ARROW LIST
========================================================= */

.about-arrow-list {
    display: flex;
    flex-direction: column;

    gap: var(--space-1);

    margin:
        0
        0
        var(--space-4);

    padding: 0;

    list-style: none;
}

.about-arrow-list li {
    display: flex;
    align-items: flex-start;

    gap: var(--space-1);

    margin: 0;
}

.about-list-arrow {
    flex: 0 0 auto;

    color: var(--secondary);

    line-height: var(--lh-copy);
}


/* =========================================================
   6. SHARED BUTTON ARROW
========================================================= */

.about-arrow {
    display: inline-block;
    flex: 0 0 auto;
}


/* =========================================================
   7. FOUNDER
========================================================= */

.about-founder {
    padding-block: var(--section-padding);
}


/* Main layout */

.about-founder__grid {
    display: grid;

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

    gap: var(--space-10);

    align-items: center;
}


/* Content */

.about-founder__content {
    min-width: 0;
}

.about-founder__name {
    margin:
        0
        0
        var(--space-2);

    color: var(--heading-color);
}

.about-founder__role {
    margin:
        0
        0
        var(--space-3);

    color: var(--secondary);
}

.about-founder__bio p {
    margin:
        0
        0
        var(--paragraph-margin);
}

.about-founder__bio p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   8. FOUNDER — EXPAND / COLLAPSE
========================================================= */

.about-founder__more {
    display: grid;

    grid-template-rows: 0fr;

    opacity: 0;
    visibility: hidden;

    transition:
        grid-template-rows .45s ease,
        opacity .3s ease,
        visibility .3s ease;
}

.about-founder__more-inner {
    min-height: 0;
    overflow: hidden;
}

.about-founder__content.is-expanded
.about-founder__more {
    grid-template-rows: 1fr;

    opacity: 1;
    visibility: visible;
}


/* Toggle */

.about-founder__toggle {
    display: inline-flex;
    align-items: center;

    gap: var(--space-1);

    margin-top: var(--space-2);

    padding: 0;

    font-family: inherit;
    font-size: inherit;
    font-weight: var(--fw-medium);
    line-height: inherit;

    color: var(--secondary);

    background: transparent;
    border: 0;

    cursor: pointer;

    transition:
        color .25s ease;
}

.about-founder__toggle:hover,
.about-founder__toggle:focus-visible {
    color: var(--secondary-dark);
}

.about-founder__toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
}

.about-founder__toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    font-size: 22px;
    font-weight: var(--fw-medium);
    line-height: 1;
}


/* =========================================================
   9. FOUNDER — IMAGE
========================================================= */

.about-founder__visual {
    position: relative;

    width: 100%;
    max-width: 500px;

    margin-inline: auto;

    padding: 0;

    background: transparent;

    overflow: visible;
}


/*
 * Copper accents.
 * Same visual direction as Mission image:
 * top-left and bottom-right.
 */

.about-founder__pattern {
    position: absolute;
    z-index: 1;

    inset-block-start: -12px;
    inset-inline-start: 0;

    display: block;

    width: 58%;
    height: 52%;

    border-radius: var(--radius-md);

    background: var(--gradient-secondary);

    opacity: 1;

    pointer-events: none;
}


/* Bottom copper accent */

.about-founder__visual::after {
    content: "";

    position: absolute;
    z-index: 1;

    inset-inline-end: 0;
    inset-block-end: -10px;

    width: 58%;
    height: 52%;

    border-radius: var(--radius-md);

    background: var(--gradient-secondary);

    pointer-events: none;
}


/* Image itself */

.about-founder__image-wrap {
    position: relative;
    z-index: 2;

    width: calc(100% - var(--space-4));

    margin-inline-start: var(--space-3);

    padding: 0;

    border: 0;
    border-radius: var(--radius-md);

    background: transparent;

    overflow: hidden;
}


/* Remove old navy/copper inner frame */

.about-founder__image-wrap::after {
    display: none;
}


/* Founder photo */

.about-founder__image-wrap img {
    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    border: 0;
    border-radius: var(--radius-md);

    object-fit: cover;
    object-position: center top;
}


/* =========================================================
   10. MISSION & APPROACH
========================================================= */

.about-mission {
    padding-block: var(--section-padding);
}

.about-split--mission {
    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);
}


/* =========================================================
   11. MISSION IMAGE
========================================================= */

.about-framed-image {
    position: relative;

    width: 100%;
    max-width: 470px;

    margin-inline: auto;
}

.about-framed-image img {
    position: relative;
    z-index: 2;

    width: calc(100% - var(--space-4));

    aspect-ratio: 1 / 1.08;

    margin-inline-start: var(--space-3);

    border-radius: var(--radius-md);

    object-fit: cover;
}

.about-framed-image__accent {
    position: absolute;
    z-index: 1;

    display: block;

    width: 58%;
    height: 52%;

    border-radius: var(--radius-md);

    background: var(--gradient-secondary);
}

.about-framed-image__accent--top {
    inset-block-start: calc(var(--space-2) * -1);
    inset-inline-start: 0;
}

.about-framed-image__accent--bottom {
    inset-inline-end: 0;
    inset-block-end: calc(var(--space-1) * -1);
}


/* =========================================================
   12. INTEGRATED ADVISORY
========================================================= */

.about-advisory {
    padding-block: var(--section-padding);
}

.about-split--advisory {
    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);
}


/* Advisory image */

.about-advisory__image {
    width: 100%;

    border: 4px solid var(--secondary);

    border-radius: var(--radius-md);

    overflow: hidden;
}

.about-advisory__image img {
    width: 100%;
    aspect-ratio: 1.35 / 1;

    object-fit: cover;
}


/* =========================================================
   13. BRAND VALUES
========================================================= */

.about-values {
    padding-block: var(--section-padding);
}


/* Header */

.about-values__header {
    max-width: 760px;

    margin:
        0
        auto
        var(--section-heading-gap);

    text-align: center;
}

.about-values__header .eyebrow {
    margin-bottom: var(--space-3);
}

.about-values__header p {
    max-width: 690px;

    margin:
        0
        auto;
}


/* Cards */

.about-values__grid {
    display: grid;

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

    gap: var(--grid-gap);
}

.about-value-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 140px;

    padding: var(--card-padding);

    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);

    background: var(--bg-light);

    text-align: center;
}

.about-value-card h3 {
    margin:
        0
        0
        var(--space-1);

    color: var(--heading-color);
}

.about-value-card p {
    margin: 0;

    color: var(--body-color);
}


/* =========================================================
   14. BRAND PHILOSOPHY
========================================================= */

.about-philosophy {
    padding:
        0
        0
        var(--section-padding);
}

.about-split--philosophy {
    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);
}


/* Philosophy image */

.about-philosophy__image {
    width: 100%;
    max-width: 500px;

    border: 4px solid var(--secondary);

    border-radius: var(--radius-md);

    overflow: hidden;
}

.about-philosophy__image img {
    width: 100%;

    aspect-ratio: 1.32 / 1;

    object-fit: cover;
}


/* =========================================================
   15. RTL / FARSI
========================================================= */

[dir="rtl"] .about-page,
html[lang^="fa"] .about-page {
    font-family: var(--font-fa);
}


[dir="rtl"] .about-arrow,
[dir="rtl"] .about-list-arrow,
html[lang^="fa"] .about-arrow,
html[lang^="fa"] .about-list-arrow {
    transform: scaleX(-1);
}


[dir="rtl"] .about-founder__content,
html[lang^="fa"] .about-founder__content {
    text-align: right;
}


/* =========================================================
   16. LARGE TABLET
========================================================= */

@media (max-width: 1199px) {

    .about-split,
    .about-founder__grid {
        gap: var(--space-8);
    }

    .about-founder__visual {
        max-width: 460px;
    }

}


/* =========================================================
   17. TABLET
========================================================= */

@media (max-width: 991px) {

    .about-split,
    .about-founder__grid {
        gap: var(--space-7);
    }


    .about-founder__visual {
        max-width: 420px;
    }


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

}


/* =========================================================
   18. MOBILE / SMALL TABLET
========================================================= */

@media (max-width: 767px) {


    /* ----------------------------------------------
       Section spacing
    ---------------------------------------------- */

    .about-founder,
    .about-mission,
    .about-advisory,
    .about-values {
        padding-block: var(--section-padding-sm);
    }

    .about-philosophy {
        padding-bottom: var(--section-padding-sm);
    }


    /* ----------------------------------------------
       Founder
    ---------------------------------------------- */

    .about-founder__grid {
        grid-template-columns: 1fr;

        gap: var(--space-6);
    }

    .about-founder__content {
        order: 1;
    }

    .about-founder__visual {
        order: 2;

        width: 100%;
        max-width: 500px;

        margin-inline: auto;
    }


    /* ----------------------------------------------
       Two column sections
    ---------------------------------------------- */

    .about-split,
    .about-split--mission,
    .about-split--advisory,
    .about-split--philosophy {
        grid-template-columns: 1fr;

        gap: var(--space-6);
    }


    /* Mission: image first */

    .about-split--mission .about-framed-image {
        order: 1;
    }

    .about-split--mission .about-content {
        order: 2;
    }


    /* Advisory: content first */

    .about-split--advisory .about-content {
        order: 1;
    }

    .about-split--advisory .about-advisory__image {
        order: 2;
    }


    /* Philosophy: image first */

    .about-split--philosophy .about-philosophy__image {
        order: 1;
    }

    .about-split--philosophy .about-content {
        order: 2;
    }


    /* ----------------------------------------------
       Images
    ---------------------------------------------- */

    .about-framed-image,
    .about-philosophy__image {
        max-width: 560px;

        margin-inline: auto;
    }


    /* ----------------------------------------------
       Values
    ---------------------------------------------- */

    .about-values__header {
        margin-bottom: var(--space-6);
    }

}


/* =========================================================
   19. SMALL MOBILE
========================================================= */

@media (max-width: 575px) {


    /* ----------------------------------------------
       Main section spacing
    ---------------------------------------------- */

    .about-founder,
    .about-mission,
    .about-advisory,
    .about-values {
        padding-block: var(--space-7);
    }

    .about-philosophy {
        padding-bottom: var(--space-7);
    }


    /* ----------------------------------------------
       Founder
    ---------------------------------------------- */

    .about-founder__grid {
        gap: var(--space-5);
    }

    .about-founder__visual {
        width: calc(100% - var(--space-2));
    }

    .about-founder__image-wrap {
        width: calc(100% - var(--space-3));

        margin-inline-start: var(--space-2);
    }

    .about-founder__pattern {
        inset-block-start: -8px;
    }

    .about-founder__visual::after {
        inset-block-end: -8px;
    }


    /* ----------------------------------------------
       Images
    ---------------------------------------------- */

    .about-framed-image img {
        width: calc(100% - var(--space-3));

        margin-inline-start: var(--space-2);
    }

    .about-advisory__image,
    .about-philosophy__image {
        border-width: 3px;
    }


    /* ----------------------------------------------
       Values
    ---------------------------------------------- */

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

    .about-value-card {
        min-height: 125px;
    }

}


/* =========================================================
   20. REDUCED MOTION
========================================================= */

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

    .about-founder__more,
    .about-founder__toggle {
        transition: none;
    }

}