/* ========================================================================
   Freight World, who-we-are page-scoped styles
   Inherits the LOCKED system (assets/styles.css). Adds only what this page
   needs, all under body.page-about so nothing leaks to other inner pages.
   Consumes shared tokens; never re-derives them. Mobile-first (375).
   ======================================================================== */

/* ---- HERO VARIANT (secondary to home: portrait plate + label, no slogan h1) ---- */
body.page-about .c-hero{justify-content:flex-start;gap:1.4rem}
body.page-about .c-hero__label{font-family:var(--sub);font-weight:700;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
body.page-about .c-hero__title{font-size:clamp(3rem,16vw,6.4rem)}
body.page-about .c-hero__title .yr{color:var(--ink-soft)}
body.page-about .c-hero__media img{aspect-ratio:4/5}
body.page-about .c-hero__intro{max-width:36ch}

/* ---- KINETIC VARIANT: the line carries the heritage span, plate uses about-kinetic ---- */
body.page-about .c-kinetic__caption{}

/* ---- HERITAGE strip (estd block + growth story, asymmetric) ---- */
body.page-about .c-heritage{padding-block:clamp(3rem,9vw,6rem);display:grid;gap:2.2rem}
body.page-about .c-heritage__media img{width:100%;aspect-ratio:16/10;object-fit:cover}
body.page-about .c-heritage__estd{font-family:var(--body);font-size:.78rem;letter-spacing:.05em;
  color:var(--ink-soft);line-height:1.7;text-transform:uppercase}
body.page-about .c-heritage__lead{font-size:clamp(1.6rem,6vw,2.8rem);font-weight:700;
  max-width:24ch;margin-bottom:1.4rem}
body.page-about .c-heritage__body{color:var(--ink-soft);font-size:.96rem;line-height:1.6;max-width:48ch}

/* ---- VALUES (type-only horizontal list, hairline-divided; no chips, no icons) ---- */
body.page-about .c-values{padding-block:clamp(3rem,9vw,6rem)}
body.page-about .c-values__head{margin-bottom:2.4rem}
body.page-about .c-values__intro{font-size:clamp(1.4rem,6vw,2.4rem);max-width:22ch;margin-top:1.1rem}
body.page-about .c-values__list{list-style:none;display:grid;gap:0}
body.page-about .c-val{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:baseline;
  padding-block:1.5rem;border-top:1px solid var(--line)}
body.page-about .c-val:last-child{border-bottom:1px solid var(--line)}
body.page-about .c-val__no{font-family:var(--display);color:var(--accent);font-size:1.1rem}
body.page-about .c-val__name{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.8rem,9vw,3.4rem);line-height:.9;color:var(--ink)}
body.page-about .c-val__desc{grid-column:1/-1;color:var(--ink-soft);font-size:.95rem;
  line-height:1.6;max-width:54ch}

/* ---- DIRECTORS (text-only editorial cards; real names + bios, no fabricated faces) ---- */
body.page-about .c-leaders{padding-block:clamp(3rem,9vw,6rem)}
body.page-about .c-leaders__head{margin-bottom:2.6rem}
body.page-about .c-leaders__intro{font-size:clamp(1.4rem,6vw,2.4rem);max-width:26ch;margin-top:1.1rem}
body.page-about .c-leaders__list{display:grid;gap:0}
body.page-about .c-leader{display:grid;gap:.9rem;padding-block:2.4rem;border-top:1px solid var(--line)}
body.page-about .c-leader:last-child{border-bottom:1px solid var(--line)}
body.page-about .c-leader__role{font-family:var(--sub);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--accent)}
body.page-about .c-leader__name{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(2rem,9vw,3.6rem);line-height:.92;color:var(--ink)}
body.page-about .c-leader__bio{color:var(--ink-soft);font-size:.95rem;line-height:1.65;max-width:64ch}

/* ---- DESKTOP ---- */
@media (min-width:760px){
  body.page-about .c-hero{grid-template-columns:1fr 1fr;align-items:center;gap:3.5rem}
  body.page-about .c-hero__media{grid-column:1;grid-row:1}
  body.page-about .c-hero__title{grid-column:2;font-size:clamp(3.6rem,7.5vw,6rem)}
  body.page-about .c-hero__intro{position:static;max-width:38ch}

  body.page-about .c-heritage{grid-template-columns:1.1fr 1fr;align-items:center;gap:4rem}

  body.page-about .c-values__list{grid-template-columns:1fr;}
  body.page-about .c-val{grid-template-columns:60px 1fr 1.1fr;gap:2rem;align-items:center}
  body.page-about .c-val__desc{grid-column:auto;max-width:46ch;margin:0}

  body.page-about .c-leader{grid-template-columns:1fr 1.4fr;gap:3rem;align-items:start}
  body.page-about .c-leader__head{display:grid;gap:.6rem}
}