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

/* ---- source <style id="mobile-investors"> ---- */
/* ===== Mobile Investors & partners — same axis and card language as the
   hero, About and the services deck (≤760px only; desktop untouched) ===== */
@media (max-width:760px){
  /* 1. One axis. The section was centred while everything above it now runs
     left, so the eye reset again at this boundary. */
  #investors .h2,#investors .lead,#investors .thesis,#investors .pullquote,
  #investors .brief,#investors .brief-grid>div:first-child{text-align:left !important;margin-inline:0 !important}
  #investors .eyebrow,#investors .mono.eyebrow{justify-content:flex-start !important;flex-wrap:nowrap !important;white-space:nowrap !important}
  #investors .wrap{display:flex;flex-direction:column}
  #investors .thesis{font-size:1rem !important;line-height:1.62 !important}

  /* 2. The gap photo bleeds like About's, rather than sitting as an inset
     card in the middle of the column. */
  #investors .gapphoto,#investors .partnerlede__fig{margin-inline:calc(var(--gutter) * -1) !important;
    border-radius:0 !important;border-left:0 !important;border-right:0 !important;box-shadow:none !important}

  /* 3. Ways to partner / where capital goes: these are already numbered
     (W·01, C·01), so they read as the same indexed ledger the hero doors and
     the services deck use — not as four framed boxes with corner ticks. */
  #investors .values__grid.ways-grid{display:flex !important;flex-direction:column !important;gap:0 !important;margin-top:.9rem !important}
  #investors .ways-grid .value{display:grid !important;grid-template-columns:2.9rem 1fr;column-gap:.9rem;
    border:0 !important;border-top:1px solid var(--line) !important;border-radius:0 !important;
    padding:.95rem 0 !important;background:none !important;position:static !important}
  #investors .ways-grid .value:last-child{border-bottom:1px solid var(--line) !important}
  #investors .ways-grid .value::before,#investors .ways-grid .value::after{content:none !important}
  #investors .ways-grid .value>*{min-width:0}
  #investors .ways-grid .value__no{grid-column:1;grid-row:1/3;font-family:'IBM Plex Mono',monospace !important;
    font-size:.62rem !important;letter-spacing:.08em;color:var(--green) !important;padding-top:.28rem}
  #investors .ways-grid .value__n{grid-column:2;grid-row:1;font-family:'Fraunces',serif !important;
    font-size:1.05rem !important;line-height:1.2 !important;margin:0 !important;color:var(--ink)}
  #investors .ways-grid .value__d{grid-column:2;grid-row:2;font-size:.82rem !important;
    line-height:1.5 !important;color:var(--ink-2) !important;margin-top:.2rem !important}

  /* 4. The HSE seal is a desktop ornament; on a phone it eats a screen and
     says what the copy beside it already says. The credential reads better
     as a compact strip under the claim. */
  #investors .proof{border-top:1px solid var(--line) !important;padding-top:1.5rem !important}
  #investors .proof__seal-zone{padding:1rem 0 0 !important;justify-content:flex-start !important}
  #investors .seal{max-width:none !important;width:100% !important;border-width:1px !important}
  #investors .seal__in{padding:.85rem 1rem !important;text-align:left !important}
  #investors .seal__mark{font-size:1.15rem !important}
  #investors .seal__foot{font-size:.62rem !important;line-height:1.5}

  /* 5. Clients: card language, one per row, matching the hero doors. */
  #investors .rel-col{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}
  #investors .rel-col::before,#investors .rel-col::after{content:none !important}
  #investors .rel-card{border-radius:10px}

  /* 6. Partners: left-aligned label to match everything else. */
  #investors .partners-ticker{margin-top:2.2rem !important}
  #investors .partners-ticker__label{text-align:left !important}
  #investors .partners-ticker__mask{-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 2rem),transparent 100%) !important;
    mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 2rem),transparent 100%) !important}
  #investors .pt-item:first-child{padding-left:0}

  /* 7. Capital split: the three project cards stack as rows on one ledger
     rather than three framed boxes. */
  #investors .projects-row{display:flex !important;flex-direction:column !important;gap:0 !important}
  #investors .pjt{border:0 !important;border-top:1px solid var(--line) !important;border-radius:0 !important;
    padding:.9rem 0 !important;background:none !important}
  #investors .pjt:last-child{border-bottom:1px solid var(--line) !important}
  #investors .pjt::before,#investors .pjt::after{content:none !important}
  #investors .pool-bar{border-radius:10px}

  /* 8. Quotes close each argument on the brown rule, left, like About's. */
  #investors .pullquote,#investors .pullquote--wide{border-left:0 !important;padding-left:0 !important;
    border-top:2px solid var(--brown) !important;padding-top:1.1rem !important;
    font-size:clamp(1.3rem,5.4vw,1.7rem) !important;line-height:1.22 !important}
  /* The quote carried its light desktop card onto this dark block --
     background:var(--card), a 1px var(--line) border and a 14px radius --
     because nothing here overrode them. On #101612 that read as a bright
     white slab dropped onto near-black, and the brown left rule below was
     fighting it: the result was a card AND a margin note at the same time.
     The left rule is the intent, so let it carry the quote on its own and
     drop the fill, border and radius. */
  #investors .investorlede__quote{background:none !important;border:0 !important;
    border-left:2px solid var(--brown) !important;border-radius:0 !important;
    padding:.1rem 0 .1rem 1rem !important;margin-top:1.2rem}
  /* the opening mark was var(--green) at .35 alpha, tuned to sit on a light
     card; against #101612 it was all but invisible, and with the card gone
     it also had nothing to sit inside -- pull it clear of the new rule. */
  #investors .investorlede__quote::before{color:var(--green);opacity:.42;
    left:.85rem;top:-.28em}

  /* 9. The two section CTAs are the section's exits — full width, and given
     air rather than sitting flush against the grid above them. */
  #investors .btn--full{margin-top:1.6rem !important;padding:1rem 1.4rem !important}
  #investors .explore li{padding:.8rem 0}
}