/* Gas Connect Limited — extracted from Gas_Connect.html (single-file build).
   source <style> block(s) 16,17,18,19 of 19
   Load order is significant: see index.html. */

/* ---- source <style id="about-swap"> ---- */
/* About section swap: the lens cut-out (globe / root / Africa) now sits beside
   Vision + Mission, which stack in one column; the engineer portrait takes the
   figure slot next to the About copy. */
.origin__fig .frame--person{width:100%;height:100%;aspect-ratio:auto;align-self:stretch;overflow:hidden}
/* The feathered cut-outs bleed left over the text because their own alpha
   carries the margin; a real photo has hard edges, so it gets the figure
   column proper — starting where the grid column starts, ending at the gutter. */
body[data-lens="partner"] .origin__fig,
body[data-lens="investor"] .origin__fig{left:53%;right:0;top:4.6rem}
.origin__fig .frame--person .photo{--duo:0;--sat:1;background-size:cover;background-position:center 35%}
/* Customer lens (and the everything view) keeps the original Vision | Mission
   pair; only partner/investor get the figure column with the stacked text. */
.vm{grid-template-columns:1fr}
.vm .vm__text{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.vm__fig{display:none}
body[data-lens="partner"] .vm,
body[data-lens="investor"] .vm{grid-template-columns:.92fr 1.08fr;align-items:center}
body[data-lens="partner"] .vm .vm__text,
body[data-lens="investor"] .vm .vm__text{display:flex;flex-direction:column;gap:var(--sp-3)}
body[data-lens="partner"] .vm__fig,
body[data-lens="investor"] .vm__fig{position:relative;display:flex;align-items:center;justify-content:center}
.vm__fig .frame{aspect-ratio:1/1;width:78%;margin:0 auto;border:0;box-shadow:none;background:none;border-radius:0;overflow:visible}
.vm__fig .photo{--duo:0;--sat:1;background-size:contain;background-repeat:no-repeat;background-position:center}
@media (max-width:900px){
  body[data-lens="partner"] .vm,
  body[data-lens="investor"] .vm{grid-template-columns:1fr;gap:var(--sp-3)}
  .vm__fig{max-width:340px;margin-inline:auto}
}
@media (max-width:760px){
  #origin .vm__fig{display:none !important}
  #origin .vm__text{display:flex !important;flex-direction:column !important;background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;gap:8px !important}
  #origin .vm__text>div{background:var(--paper) !important;border:1px solid var(--line-strong) !important;border-radius:14px !important;padding:1rem 1.1rem !important;box-shadow:0 4px 14px rgba(32,48,42,.06) !important}
}

/* ---- source <style id="investor-lede-align"> ---- */
/* Eyebrow + claim open the block across the full measure, and the closing
   paragraph shuts it the same way; the icon cluster and the two middle
   paragraphs keep the two-column band between them. One body size throughout. */
.investorlede--contour{align-items:start}
.investorlede--contour .il-lab{grid-column:1 / -1;grid-row:1;margin-bottom:.5rem}
.investorlede--contour .il-claim{grid-column:1 / -1;grid-row:2;margin-bottom:var(--sp-3);max-width:24ch}
.investorlede--contour .il-plate{display:none}
.investorlede--contour .thesis{grid-column:1 / -1;grid-row:3}
.investorlede--contour .il-four{grid-column:1 / -1;grid-row:4;margin-top:var(--sp-3)}
.investorlede--contour .thesis em,
.investorlede--contour .il-tail em,
.investorlede--contour .il-close em{font-style:italic;color:var(--green)}
.investorlede--contour .il-tail{grid-column:1 / -1;grid-row:5}
.investorlede--contour .il-close{grid-column:1 / -1;grid-row:6;margin-top:var(--sp-2)}
.investorlede--contour .thesis,
.investorlede--contour .il-tail .lead,
.investorlede--contour .il-close{font-size:clamp(1.06rem,1.01rem + .22vw,1.18rem);line-height:1.66;
  color:var(--ink-2);max-width:68ch;text-align:left;text-wrap:pretty;hyphens:manual}
/* First paragraph carries the argument — set it a step up and in full ink so
   the eye has somewhere to land before the two supporting paragraphs. */
.investorlede--contour .thesis{font-size:clamp(1.2rem,1.1rem + .4vw,1.4rem);line-height:1.56;color:var(--ink)}
.investorlede--contour .il-tail{margin-top:0}
.investorlede--contour .il-tail .lead{margin-top:var(--sp-3)}
.investorlede--contour .il-close{margin-top:var(--sp-3)}
@media (max-width:900px){
  .investorlede--contour .il-lab,
  .investorlede--contour .il-claim,
  .investorlede--contour .il-plate,
  .investorlede--contour .thesis,
  .investorlede--contour .il-tail,
  .investorlede--contour .il-four,
  .investorlede--contour .il-close{grid-column:1;grid-row:auto}
  .investorlede--contour .il-close{text-align:left;hyphens:manual}
}

/* ---- source <style id="clients-band"> ---- */
/* Clients moved out of the proof band's right column into their own
   horizontal strip, sitting directly above the partners ticker so the two
   relationship lists read as one sequence; the safety photo takes the
   column the list vacated. */
.proof__fig{display:flex;align-items:stretch}
.proof__fig .frame{width:100%;height:100%;min-height:16rem;overflow:hidden}
.proof__fig .photo{--duo:0;--sat:1;background-size:cover;background-position:center}
.clients-band{margin-top:var(--sp-4);padding:1.1rem 0 0}
.clients-band__row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);margin-top:.4rem}
.clients-band .rel-card{background:var(--linen);border:1px solid var(--line);border-radius:10px;
  padding:.9rem 1rem .95rem 1.05rem}
@media (max-width:900px){
  .clients-band__row{grid-template-columns:1fr 1fr}
  .proof__fig .frame{min-height:13rem}
}
@media (max-width:640px){
  .clients-band__row{grid-template-columns:1fr}
}

/* ---- source <style id="quote-band"> ---- */
/* Investors section ground: the pipeline shot at low opacity under a heavy
   paper wash, so it sets tone without competing with the copy — same device
   as the hero's Mombasa background, pushed further back because this section
   carries far more text. */
#investors .page__bg .photo{opacity:.28;--duo:0;--sat:.7;--pb:.98;--pc:1.04}
#investors .investors-bg__wash{position:absolute;inset:0;
  background:linear-gradient(180deg,var(--paper) 0%,rgba(250,248,242,.9) 18%,rgba(250,248,242,.88) 82%,var(--paper) 100%)}

/* ---- reach bar: social platforms, one per line ----
   The two links sat inline separated by a middot, which read as a single
   destination ("LinkedIn · Facebook") rather than two separate platforms.
   Stacking them makes the two targets unmistakable; the middot element is
   gone from the markup, and the rule below overrides the inline-flex in
   css/03-service-rows.css, which loads earlier. */
.reach-ed__social{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.28rem;
}
.reach-ed__social a{width:max-content}
.reach-ed__social .dot{display:none}