/* About — page-specific styles.
   The shell (header, footer, .wrap, .eyebrow, typography) comes from ../css/styles.css, and the
   reading furniture (.page-head, .prose, .stat-row) from ../insights/insights.css. This file
   only adds what is unique to this page: the capability columns, the sector list and the
   portrait slot. */

/* ---------- lead ---------- */
.about-lead{display:grid;gap:var(--s6);padding-bottom:var(--s7);}
/* Keep the reading measure when there is no portrait to fill the other column;
   full-width prose at 1400px runs to about 120 characters a line. */
.about-lead .prose{max-width:68ch;padding-bottom:0;}

/* The portrait is optional. With no image the grid collapses to one column and the page reads
   as a typographic lead - which is the same way every other page here opens - so nothing looks
   like it is missing. */
.portrait{align-self:start;margin:0;}
.portrait img{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line);display:block;}
.portrait figcaption{margin-top:var(--s3);font:500 0.6875rem/1.4 var(--mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}

/* ---------- capabilities ---------- */
.capabilities{display:grid;gap:var(--s5);padding-bottom:var(--s7);}
.capability{border-top:3px solid var(--ink);background:var(--bg);padding:var(--s5);
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);}
.capability:nth-child(2){border-top-color:var(--accent);}
.capability:nth-child(3){border-top-color:var(--ink-3);}
.capability h3{font:700 1rem/1.3 var(--font);color:var(--ink);margin:var(--s4) 0 var(--s3);}
.capability .num{font:500 0.6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);}
.capability ul{margin:0;padding:0;}
.capability li{list-style:none;font-size:0.875rem;line-height:1.7;color:var(--ink-2);
  padding-left:1em;position:relative;}
.capability li::before{content:"";position:absolute;left:0;top:0.65em;width:5px;height:5px;
  border-radius:50%;background:var(--accent);}

/* ---------- sectors ---------- */
.sectors{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:var(--s6) 0;margin-bottom:var(--s7);}
.sectors dt{font:500 0.6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s4);}
.sector-list{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin:0;}
.sector-list span{font-family:var(--display);font-size:clamp(18px,2.4vw,26px);font-weight:600;
  letter-spacing:-0.03em;color:var(--ink);}
.sector-list span::after{content:" ·";color:var(--accent);}
.sector-list span:last-child::after{content:"";}

/* ---------- closing detail ---------- */
.about-facts{display:grid;gap:var(--s5);padding-bottom:var(--s9);}
.about-fact dt{font:500 0.6875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s2);}
.about-fact dd{margin:0;font-size:0.9375rem;line-height:1.65;color:var(--ink-2);}
.about-fact dd a{color:var(--accent-text);border-bottom:1px solid var(--line-2);}
.about-fact dd a:hover{border-bottom-color:var(--accent-text);}

@media (min-width:760px){
  .capabilities{grid-template-columns:repeat(3,1fr);}
  .about-facts{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:1000px){
  /* Only becomes two columns when there is a portrait to put in the second one. */
  .about-lead.has-portrait{grid-template-columns:1.5fr 1fr;gap:var(--s8);}
  .about-lead.has-portrait .prose{max-width:none;}
}