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

/* ---- source <style id="mobile-about-flow"> ---- */
/* ===== Mobile About — carries the hero's structure forward (≤760px only) ===== */
@media (max-width:760px){
  /* The hero now reads left-aligned; About kept the site's centred mobile
     style, so the eye reset at the section boundary. Same axis, same rhythm:
     mono eyebrow, left Fraunces head, left measure. */
  #origin .origin__intro,#origin .origin__foundation,#origin .vm{text-align:left !important}
  #origin .h2,#origin .lead,#origin .pullquote{text-align:left !important;margin-inline:0 !important}
  #origin .eyebrow{justify-content:flex-start !important}
  /* the eyebrow's rule is a flex sibling, so a two-word label wrapped under
     its own dash. Keep the label on one line and let the rule hold its width. */
  #origin .eyebrow{flex-wrap:nowrap !important;white-space:nowrap !important;align-items:center !important}
  #origin .eyebrow::before{flex:none !important}
  #origin .wrap{display:flex !important;flex-direction:column !important;gap:1.9rem !important}
  #origin .origin{display:flex !important;flex-direction:column !important;gap:1.6rem !important}
  /* Photo becomes a full-bleed band, echoing the hero's edge-to-edge photo
     rather than sitting as a floating card mid-column. */
  #origin .origin__fig{display:block !important;margin-inline:calc(var(--gutter) * -1) !important}
  #origin .origin__fig .frame{border-radius:0 !important;border-left:none !important;border-right:none !important;box-shadow:none !important}
  /* Foundation is the second beat, not a repeat: quieter type, hairline
     rule above it so the two paragraphs read as sequence, not duplication. */
  #origin .origin__foundation{border-top:1px solid var(--line) !important;padding-top:1.3rem !important}
  #origin .origin__foundation .lead{font-size:1rem !important;color:var(--ink-2) !important}
  /* Vision / Mission: same card language as the hero's doors, so the
     transition from hero to About feels continuous. */
  #origin .vm{display:flex !important;flex-direction:column !important;gap:8px !important;margin:0 !important}
  #origin .vm>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;margin:0 !important}
  #origin .vm .eyebrow{margin-bottom:.45rem !important;font-size:var(--t-label) !important}
  #origin .vm p{font-size:.95rem !important;line-height:1.55 !important;color:var(--ink-2) !important;margin:0 !important}
  /* The pullquote is the section's closing line — give it room and let it
     sit against the brown rule, left, like the hero's ledger rows. */
  #origin .pullquote--wide{margin-top:.4rem !important;border-top:2px solid var(--brown) !important;padding-top:1.1rem !important;font-size:clamp(1.35rem,5.6vw,1.75rem) !important;line-height:1.2 !important}
}