/* ====================================================================
ABOUT PAGE STYLES — assets/css/about.css v2 · 2026-07
--------------------------------------------------------------------
Page-specific components for about.html ONLY. Loads AFTER
assets/css/styles.css and uses ONLY its brand tokens (read the
design-system header first). Components:
.about-hero page hero (paper, rides on .page-top)
.machine-grid narrative + roster split ("we run on our machine")
.roster/.staff the AI-staff roster panel — our REAL internal
systems with their actual jobs, no invented metrics
.cities/.city Banjul · Medina · London footprint cards
.founder-grid founder card (monogram + credentials) + copy
.sec-cta centered CTA row after a content section
Nothing here gates content visibility on JS; decorative motion is
scoped to prefers-reduced-motion:no-preference.
==================================================================== */
/* ---------- 1 · PAGE HERO ---------- */
.about-hero h1{max-width:20ch}
.about-hero .trust{margin-top:44px}
/* ---------- 2 · THE MACHINE (narrative + roster) ---------- */
.machine-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(28px,4.5vw,60px);align-items:start}
.machine-copy h3{font-size:clamp(1.4rem,2.4vw,1.8rem);line-height:1.18;max-width:24ch}
.machine-copy p{color:var(--slate);margin-top:16px;font-size:1rem;line-height:1.65;max-width:56ch}
.machine-copy p strong{color:var(--ink);font-weight:600}
/* roster panel — a white .glass card with its own internal rhythm */
.roster{padding:0;overflow:hidden}
.roster-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:15px 22px;background:var(--ink);color:var(--paper)}
.roster-head b{font-family:var(--font-d);font-size:.92rem;font-weight:700}
.roster-badge{font-family:var(--font-m);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fog);
border:1px solid var(--ink-line);border-radius:var(--r-pill);padding:4px 10px;white-space:nowrap}
.staff{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:15px 22px}
.staff+.staff{border-top:1px solid var(--line-soft)}
.staff-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--ink);
background:var(--mint);border:1px solid var(--mint-brd)}
.staff-ico svg{width:18px;height:18px}
.staff b{display:block;font-size:.92rem;font-weight:600;color:var(--ink)}
.staff p{color:var(--slate);font-size:.83rem;line-height:1.5;margin-top:2px}
.staff-status{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-m);font-size:.58rem;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:var(--current-dark);white-space:nowrap}
.staff-status i{width:7px;height:7px;border-radius:50%;background:var(--current-dark);flex:0 0 auto}
.roster-foot{padding:15px 22px;border-top:1px solid var(--line-soft);font-size:.82rem;color:var(--slate);
line-height:1.55;background:var(--tint)}
.roster-foot b{color:var(--ink)}
/* "on duty" pulse — product motion, motion-safe only */
@media(prefers-reduced-motion:no-preference){
.staff-status i{animation:onduty 2.6s ease-in-out infinite}
@keyframes onduty{0%,100%{opacity:1}50%{opacity:.35}}
}
/* ---------- 3 · FOOTPRINT CARDS ---------- */
.city .k{display:block;font-family:var(--font-m);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--current-dark);margin-bottom:10px}
.city h3{font-size:1.45rem}
.city p{color:var(--slate);margin-top:10px;font-size:.94rem}
/* ---------- 4 · FOUNDER ---------- */
.founder-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,70px);align-items:center}
.founder-card{padding:clamp(28px,3.5vw,40px)}
/* monogram tile — app-icon treatment from the brand book (ink square, 22% radius) */
.f-mono{width:86px;height:86px;border-radius:22%;background:var(--ink);display:grid;place-items:center;
font-family:var(--font-d);font-weight:700;font-size:1.9rem;color:var(--paper);letter-spacing:-.02em}
.f-name{font-family:var(--font-d);font-weight:700;font-size:1.6rem;line-height:1.08;letter-spacing:-.02em;margin-top:22px}
.f-role{color:var(--slate);font-size:.9rem;margin-top:4px}
.f-creds{list-style:none;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft);display:grid;gap:12px}
.f-creds li{display:flex;gap:11px;color:var(--body);font-size:.92rem;line-height:1.5}
.f-creds li::before{content:"";width:18px;height:18px;flex:0 0 18px;margin-top:2px;background:var(--current-dark);
-webkit-mask:url("data:image/svg+xml;utf8,") center/13px no-repeat;
mask:url("data:image/svg+xml;utf8,") center/13px no-repeat}
.founder-copy h2{font-size:clamp(1.9rem,3.8vw,2.7rem);margin-top:14px}
.founder-copy p{color:var(--body);margin-top:18px;font-size:1.02rem;line-height:1.65;max-width:58ch}
/* ---------- 5 · SECTION CTA ROW + GLOBAL NOTE ---------- */
.sec-cta{margin-top:44px}
.global-note{margin-top:20px;padding:22px 26px;background:var(--mint);border:1px solid var(--mint-brd);
border-radius:var(--r);color:var(--deep);font-size:.98rem;line-height:1.65}
/* ---------- 6 · RESPONSIVE ---------- */
@media(max-width:980px){
.machine-grid{grid-template-columns:1fr}
.founder-grid{grid-template-columns:1fr;gap:34px}
.founder-card{max-width:460px}
}
@media(max-width:560px){
/* keep "On duty" visible — it drops under the duty text */
.staff{grid-template-columns:auto 1fr}
.staff-status{grid-column:2;justify-self:start}
}