/* ===========================================================
   UNAMIQ - About page
   Loaded last, after tokens -> base -> layout -> components,
   so only what is genuinely unique to this page lives here:
   the intro block, the founders grid tweaks, and the
   vision / mission / purpose section.
=========================================================== */

/* The founders grid is styled entirely in components.css.
   This file used to re-declare .founder-photo, .initials and
   .founder-bio with the same tokens and different var()
   fallbacks — but About always loads tokens.css, so those
   fallbacks never fired and the rules were pure no-ops. */

/* ---------- Intro ---------- */

.about-intro{
    display:flex;
    gap:56px;
    align-items:flex-start;

    margin-bottom:110px;
}

/* The copy column: paragraph, then the call to action beneath it.
   The button sits here rather than at the bottom of the page so
   the one thing we want a visitor to do is next to the team, in
   the first screen of content. */
.about-intro-text{
    flex:1;
    max-width:520px;
}

.about-copy{
    font-size:var(--fs-md);
    line-height:1.75;
    color:var(--text-muted, rgba(0,0,0,.62));
}

/* The intro is several paragraphs now, and the reset zeroes every
   margin, so without this they run together into one block. */
.about-copy + .about-copy{
    margin-top:18px;
}

.about-cta{
    display:inline-block;
    margin-top:32px;
}

/* Team photo — sized up from the original placeholder so it
   reads as a real presence on the page rather than a footnote
   next to the copy. */
.about-photo{
    flex:0 0 520px;
    aspect-ratio:4 / 3;

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

    background:linear-gradient(160deg, var(--bg-alt, rgba(0,0,0,.05)), transparent);
}

.about-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

@media(max-width:900px){
    .about-photo{ flex-basis:420px; }
}

@media(max-width:760px){

    .about-intro{
        flex-direction:column;
        gap:32px;
    }

    .about-photo{
        flex-basis:auto;
        width:100%;
    }

}

/* ===========================================================
   VISION / MISSION / PURPOSE
   Three columns, each keyed to a small field-instrument-style
   marker instead of a generic icon: a compass rose for Vision
   (where we're heading), a pin/target for Mission (what we do
   next), a root/growth mark for Purpose (why it matters). The
   marks are drawn in the brand accent — rust red in light, orange
   in dark — so the three abstractions carry the same colour as
   the rest of the identity rather than a second one.
=========================================================== */

.vmp-section{
    margin-top:130px;
    margin-bottom:40px;
}

.vmp-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:0;

    border-top:1px solid var(--border-color, rgba(0,0,0,.12));
}

.vmp-card{
    padding:40px 32px 8px 32px;
    border-right:1px solid var(--border-color, rgba(0,0,0,.12));
}

.vmp-card:first-child{
    padding-left:0;
}

.vmp-card:last-child{
    border-right:none;
    padding-right:0;
}

/* The field-instrument marks the section was always meant to have:
   a compass rose for Vision (where we're heading), a target for
   Mission (what we do next), a sprout above a ground line for
   Purpose (why it matters).

   Drawn in --accent-ink, the brand accent, which is the rust red
   #B23A06 in light and the vivid orange #FF6B35 in dark — one
   token, both behaviours, no theme override needed here.

   They were green (--signal) until 2026-08-31. Green sitting on
   an abstraction rather than on real crop data was reading as a
   second brand colour rather than as meaning, which is the exact
   failure ADR-0003 set out to avoid. --accent-ink rather than
   --accent because a 1.4px stroke in vivid orange measures
   2.6:1 on the light surface and disappears. */
.vmp-mark{
    display:block;
    width:26px;
    height:26px;
    margin-bottom:18px;
    color:var(--accent-ink);
}

.vmp-index{
    font-family:"Space Mono", monospace;
    font-size:var(--fs-xs);
    letter-spacing:.15em;
    color:var(--text-faint, rgba(0,0,0,.35));
    margin-bottom:14px;
}

.vmp-title{
    font-size:var(--fs-lg);
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    margin-bottom:16px;
}

.vmp-copy{
    font-size:var(--fs-md);
    line-height:1.7;
    color:var(--text-muted, rgba(0,0,0,.58));
    max-width:340px;
}

@media(max-width:900px){

    .vmp-grid{
        grid-template-columns:1fr;
        border-top:none;
    }

    .vmp-card{
        padding:32px 0;
        border-right:none;
        border-top:1px solid var(--border-color, rgba(0,0,0,.12));
    }

    .vmp-card:first-child{
        padding-left:0;
    }

    .vmp-card:last-child{
        padding-right:0;
    }

}