/* ══════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════ */

/* — Hero intro paragraph, forced onto one line. Only above 820px: at
   narrower widths the sentence has no room to stay on one line without
   the text becoming illegibly small, so it wraps normally there instead. */
.page-hero .hero-oneline{max-width:none}
@media(min-width:820px){.page-hero .hero-oneline{white-space:nowrap}}

.story{display:flex;align-items:center;gap:var(--space-16)}
.story-text{flex:1}
.story-text p + p{margin-top:var(--space-4)}
.story-art{flex:1;max-width:420px}
@media(max-width:900px){.story{flex-direction:column}.story-art{max-width:320px;width:100%}}

/* Floating badges over the story art — pulled in from their desktop
   offsets on narrower screens so they stay within the viewport instead
   of bleeding past its edges once .story-art goes full-width. */
.hero-chip-top{top:4%;left:-26%}
.hero-chip-bottom{bottom:2%;right:-22%}
@media(max-width:520px){
  .hero-chip-top{left:-4%}
  .hero-chip-bottom{right:-4%}
}

/* — Bridge diagram (China · Nigeria · Worldwide) — */
.bridge{
  display:flex;align-items:center;justify-content:center;gap:var(--space-4);
  max-width:760px;margin:0 auto;flex-wrap:wrap;
}
.bridge-node{
  flex:1;min-width:150px;text-align:center;background:var(--white);
  border:1px solid var(--border-soft);border-radius:var(--radius-md);
  padding:var(--space-8) var(--space-4);box-shadow:var(--shadow-sm);
}
.bridge-node-icon{
  width:52px;height:52px;border-radius:50%;background:var(--navy-50);
  display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-4);
}
.bridge-node-icon svg{width:26px;height:26px}
.bridge-node h3{font-size:1.05rem}
.bridge-arrow{flex:0 0 auto;color:var(--gold);font-size:1.6rem}
@media(max-width:640px){.bridge-arrow{transform:rotate(90deg)}}

/* — Value cards use .card from components.css — */
.value-icon{
  width:56px;height:56px;border-radius:50%;background:var(--navy-50);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-6);
}
.value-icon svg{width:26px;height:26px}