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

/* ---- source <style id="mobile-rhythm"> ---- */
/* ===== Mobile scroll rhythm (≤760px only; desktop untouched) =====
   Three beats instead of one repeated beat: photo-led sections, statement
   sections that start on paper, and one dark section as the climax. */
@media (max-width:760px){
  /* BEAT 2 — statement sections. Services and Markets already carry their own
     photography (the deck, the bento), so a photo band above them made three
     images in a row. They start on type instead, with the index kept as a
     small mono line. */
  #services .secopen,#markets .secopen,
  #services .secbridge,#markets .secbridge{display:none !important}
  #services>.wrap>.mono.eyebrow,#markets>.wrap>.mono.eyebrow{display:flex !important}

  /* BEAT 3 — Investors is the one dark block: the most serious argument, and
     the punctuation the scroll was missing before Contact. */
  body[data-mobile-dark] #investors{background:#101612 !important;--page-bg-rgb:16,22,18}
  body[data-mobile-dark] #investors .page__bg{display:none !important}
  body[data-mobile-dark] #investors .secopen{margin-bottom:1.7rem}
  body[data-mobile-dark] #investors .secopen__scrim{background:linear-gradient(180deg,rgba(16,22,18,.35) 0%,rgba(16,22,18,.1) 40%,rgba(16,22,18,.95) 100%)}
  body[data-mobile-dark] #investors .h2,body[data-mobile-dark] #investors .h2 *{color:var(--paper) !important}
  body[data-mobile-dark] #investors .h2 em{color:#a9c9a2 !important}
  body[data-mobile-dark] #investors .thesis,body[data-mobile-dark] #investors .lead,body[data-mobile-dark] #investors .explore .v,body[data-mobile-dark] #investors .block__body{color:rgba(250,248,242,.82) !important}
  body[data-mobile-dark] #investors .thesis .hl,body[data-mobile-dark] #investors .lead .hl{background:rgba(169,201,162,.18) !important;color:#a9c9a2 !important}
  body[data-mobile-dark] #investors .mono.eyebrow,body[data-mobile-dark] #investors .eyebrow{color:#a9c9a2 !important}
  body[data-mobile-dark] #investors .eyebrow::before{background:#a9c9a2 !important}
  body[data-mobile-dark] #investors .pullquote,body[data-mobile-dark] #investors .pullquote--wide,body[data-mobile-dark] #investors .investorlede__quote{color:#a9c9a2 !important}
  body[data-mobile-dark] #investors .ways-grid .value{border-top-color:rgba(250,248,242,.22) !important}
  body[data-mobile-dark] #investors .ways-grid .value:last-child{border-bottom-color:rgba(250,248,242,.22) !important}
  body[data-mobile-dark] #investors .ways-grid .value__n{color:var(--paper) !important}
  body[data-mobile-dark] #investors .ways-grid .value__d{color:rgba(250,248,242,.6) !important}
  body[data-mobile-dark] #investors .ways-grid .value__no{color:#a9c9a2 !important}
  body[data-mobile-dark] #investors .explore li{border-bottom-color:rgba(250,248,242,.22) !important}
  body[data-mobile-dark] #investors .explore .k{color:#a9c9a2 !important}
  body[data-mobile-dark] #investors .explore b{color:var(--paper) !important}
  body[data-mobile-dark] #investors .proof{border-top-color:rgba(250,248,242,.22) !important}
  body[data-mobile-dark] #investors .proof__text .lead{color:rgba(250,248,242,.75) !important}
  body[data-mobile-dark] #investors .seal{border-color:rgba(169,201,162,.5) !important}
  body[data-mobile-dark] #investors .seal__in{border-color:rgba(169,201,162,.35) !important;color:#a9c9a2 !important}
  body[data-mobile-dark] #investors .seal__top,body[data-mobile-dark] #investors .seal__mark,body[data-mobile-dark] #investors .seal__sub,body[data-mobile-dark] #investors .seal__foot{color:#a9c9a2 !important}
  body[data-mobile-dark] #investors .rel-col{background:rgba(250,248,242,.06) !important;border-color:rgba(250,248,242,.22) !important;box-shadow:none !important}
  body[data-mobile-dark] #investors .rel-col__label,body[data-mobile-dark] #investors .rel-card__name{color:var(--paper) !important}
  body[data-mobile-dark] #investors .rel-card{background:rgba(250,248,242,.06) !important;border-color:rgba(250,248,242,.18) !important}
  body[data-mobile-dark] #investors .rel-card__tag,body[data-mobile-dark] #investors .rel-col__count{color:rgba(250,248,242,.55) !important}
  body[data-mobile-dark] #investors .partners-ticker__label{color:rgba(250,248,242,.55) !important}
  body[data-mobile-dark] #investors .pt-item b{color:var(--paper) !important}
  body[data-mobile-dark] #investors .pt-item i,body[data-mobile-dark] #investors .pt-sep{color:rgba(250,248,242,.5) !important}
  body[data-mobile-dark] #investors .pjt{border-top-color:rgba(250,248,242,.22) !important}
  body[data-mobile-dark] #investors .pjt:last-child{border-bottom-color:rgba(250,248,242,.22) !important}
  body[data-mobile-dark] #investors .pjt__h{color:var(--paper) !important}
  body[data-mobile-dark] #investors .pjt__legend,body[data-mobile-dark] #investors .cap-note,body[data-mobile-dark] #investors .pool-lab{color:rgba(250,248,242,.6) !important}
  body[data-mobile-dark] #investors .cap-sec{border-top-color:rgba(250,248,242,.22) !important}
  body[data-mobile-dark] #investors .pool-bar{border-color:rgba(250,248,242,.22) !important}
  body[data-mobile-dark] #investors .expander__btn{color:var(--paper) !important;border-color:rgba(250,248,242,.28) !important}
  body[data-mobile-dark] #investors .btn--ghost{border-color:rgba(250,248,242,.4) !important;color:var(--paper) !important}
  body[data-mobile-dark] #investors .brief{border-color:rgba(250,248,242,.22) !important}
  /* the section hands off to Contact on paper, so close it on the brown CTA */
  body[data-mobile-dark] #investors .btn--brown{box-shadow:0 12px 28px rgba(0,0,0,.4) !important}

  /* HAND-OFFS — each section names what comes next instead of stopping dead.
     The site's own section-bridge markup becomes a full-width row. */
  .section-bridge{display:flex !important;flex-direction:column !important;align-items:stretch !important;
    gap:.6rem !important;border-top:1px solid var(--line);margin-top:2.2rem !important;padding-top:1.1rem}
  .section-bridge>span{font-family:'IBM Plex Mono',monospace !important;font-size:.6rem !important;
    letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3) !important}
  .section-bridge .btn{width:100%;justify-content:space-between !important;padding:.95rem 1.1rem !important;
    border-radius:14px !important;font-family:'Fraunces',serif !important;font-size:1.05rem !important;
    font-weight:400 !important;border:1px solid var(--line-strong) !important;background:var(--paper) !important;
    color:var(--ink) !important;box-shadow:0 4px 14px rgba(32,48,42,.06) !important}
  body[data-mobile-dark] #investors .section-bridge{border-top-color:rgba(250,248,242,.22)}
  body[data-mobile-dark] #investors .section-bridge>span{color:rgba(250,248,242,.55) !important}
  body[data-mobile-dark] #investors .section-bridge .btn{background:rgba(250,248,242,.08) !important;color:var(--paper) !important;
    border-color:rgba(250,248,242,.28) !important;box-shadow:none !important}

  /* TEXT — no block runs longer than the eye wants on a phone. */
  #origin .origin__intro .lead,#origin .origin__foundation .lead,
  #markets .mb__desc{font-size:.95rem !important;line-height:1.6 !important}

  /* INVESTORS — light theme.
     The section used to invert to #101612 as the scroll's one dark beat, but
     that beat was carried by the photo band above it, and the bands are gone.
     Two things also broke inside it: .il-claim keeps color:var(--ink) (it was
     never in the inversion list), so the section's biggest line was dark ink
     on a dark ground — barely legible — and .il-lab sat at the shared label
     size, too quiet to introduce it. On paper both read correctly again.
     The inversion itself is not deleted: every rule of it is still in this
     file, now scoped to body[data-mobile-dark], so adding that attribute to
     <body> brings the dark block straight back. */
  /* the section's own background photograph, kept on mobile. It sits well
     back \u2014 low opacity plus the paper wash \u2014 because this section is almost
     entirely body copy and the photo is atmosphere, not subject. Fixed to the
     section, cover-cropped, so it fills however tall the stacked column grows. */
  #investors .page__bg{display:block !important}
  #investors .page__bg .photo{opacity:.34 !important;--duo:0 !important;--sat:.85 !important;
    background-size:cover !important;background-position:center 60% !important}
  #investors .investors-bg__wash{background:linear-gradient(180deg,
    var(--paper) 0%,
    rgba(250,248,242,.90) 12%,
    rgba(250,248,242,.86) 80%,
    var(--paper) 100%) !important}
  /* the label that introduces the claim — up a step, and given its own air */
  #investors .il-lab{font-size:.78rem !important;letter-spacing:.14em !important;
    color:var(--green-deep) !important;margin:0 0 .6rem !important}
  /* the claim itself: the largest line in the section, so it should read as
     the argument rather than as an oversized paragraph */
  #investors .il-claim{font-size:clamp(2.15rem,1.4rem + 3.4vw,2.75rem) !important;
    line-height:1.08 !important;letter-spacing:-.015em !important;color:var(--ink) !important;
    max-width:15ch !important;margin:0 0 1.4rem !important}

  /* PARAGRAPH RHYTHM — one spacing value for body copy across the section.
     Paragraphs were inheriting a mix of margin-top from .lead/.thesis and
     grid gaps from their containers, so the gap between two paragraphs was
     wider in some blocks than the gap between a heading and its own copy.
     One bottom margin, no top margin, last child flush. */
  #investors .thesis,#investors .lead,#investors .block__body,#investors .il-tail{
    font-size:.95rem !important;line-height:1.62 !important;margin:0 0 1.15rem !important}
  #investors .thesis:last-child,#investors .lead:last-child,
  #investors .block__body:last-child,#investors .il-tail:last-child{margin-bottom:0 !important}
  #investors .investorlede__quote{margin:1.5rem 0 !important}


  /* CONTACT — full-bleed background to the bottom. #contact's photo is set
     to background-size:100% auto (width-stretch, height auto) so the photo
     was never cropped on desktop. But on mobile the two-column layout
     collapses into one long stacked column (brief + form + footer), making
     the section far taller than the image's own aspect ratio can reach —
     the photo would run out partway down and expose the plain paper scrim
     underneath for the rest of the section. Restoring cover here (mobile
     only; desktop keeps its uncropped treatment) makes the photo scale to
     fill the section's actual height, however tall it grows. */
  #contact .photo{background-size:cover !important}
}

/* ---- source <style> ---- */
.cls-1{fill:#618e5a;}.cls-2{fill:#754c28;}

/* ---- source <style> ---- */
.icls-1{fill:#618e5a;}.icls-2{fill:#754c28;}