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

/* ---- source <style id="mobile-photos"> ---- */
/* ===== Mobile photo system (≤760px only; desktop untouched) =====
   Two families ship in assets/: documentary shots that carry the operating
   argument, and feathered metaphor cut-outs that carry atmosphere. A phone
   has no room for atmosphere — the cut-outs read as generic stock at 340px
   and their lens-swap is invisible — so mobile keeps the documentary set
   only, promoted to full-bleed openers that break the text flow and give
   each section its colour. */
/* The openers below are injected by JS, and that JS is gated to this same
   breakpoint -- but build() latches (done = true) and there is no teardown.
   So loading the page under 760px and then widening past it (resize, device
   rotate, or a preview pane being dragged open) leaves all five .secopen
   nodes in the DOM with every one of their rules now out of scope: position
   falls back to static, .secopen__lab loses its absolute placement, and the
   two spans collapse into bare inline text -- 05 immediately followed by
   Investors & partners, with no separator, painting over the top of the
   section. Same for 01About, 02What we do, 03Who we serve, 04Projects.
   A base display:none keeps them inert wherever their styling does not
   apply; the rule inside the query below switches them back on. */
.secopen,.secbridge{display:none}
@media (max-width:760px){
  #origin .origin__fig,.origin__fig,.partnerlede__fig,.investorlede__fig,
  #investors .gapphoto,.origin__leaves{display:none !important}

  /* OPENERS OFF — the photo bands at the head of each mobile section are
     disabled. The whole system (band, label, sampled seam bridges) is left in
     place below and can be switched back on by restoring display:block here
     and setting OPENERS_ON = true in the opener script. */
  .secopen,.secbridge{display:none !important}
  .secopen--off{position:relative;margin-inline:calc(var(--gutter) * -1);
    height:clamp(190px,30vw + 120px,250px);overflow:hidden;margin-bottom:1.5rem;
    background:#20302a}
  /* first thing in the section, above its own padding */
  .page .secopen{margin-top:calc(var(--sp-4) * -1)}
  .secopen__photo{position:absolute;inset:0;background-size:cover;background-position:center;
    opacity:0;transition:opacity .6s ease}
  .secopen__photo.is-loaded{opacity:1}

  /* ----- Seam bridges -------------------------------------------------
     The band used to start and stop on a hard edge: paper, then dark photo,
     then paper again, with nothing in between. A bridge is a 90px ramp that
     runs the page's own background colour into the colour the photograph
     actually IS at that edge, so the two sides of the seam meet on the same
     value and there is no line left to see.

     --seam-top-rgb / --seam-bot-rgb are written onto the <section> by JS,
     sampled from the image's own top and bottom rows (the bottom value is
     pre-composited with the scrim, since that is what the eye meets there).
     The fallbacks below are the band's base tone, so the layout is already
     correct before — or without — sampling. --page-bg-rgb is what the ramp
     resolves TO: paper everywhere, the dark block inside #investors. */
  .secbridge{display:block;margin-inline:calc(var(--gutter) * -1);height:90px;
    transition:background .5s ease}
  .secbridge--top{background:linear-gradient(180deg,
    rgb(var(--page-bg-rgb,250,248,242)) 0%,
    rgb(var(--seam-top-rgb,32,48,42)) 100%)}
  .secbridge--bot{background:linear-gradient(180deg,
    rgb(var(--seam-bot-rgb,20,27,22)) 0%,
    rgb(var(--page-bg-rgb,250,248,242)) 100%);margin-bottom:1.5rem}
  /* the top bridge is now the section's first element, so it inherits the
     negative top margin that used to pull the band above the page padding */
  .page .secbridge--top:first-child{margin-top:calc(var(--sp-4) * -1)}
  /* a bridged band hands its bottom spacing to the bridge below it, fills
     itself with the sampled colour (so the feathered photo has something
     continuous to dissolve into), and feathers both photo edges. */
  .secopen--bridged{margin-bottom:0;background:linear-gradient(180deg,
    rgb(var(--seam-top-rgb,32,48,42)) 0%,
    rgb(var(--seam-top-rgb,32,48,42)) 45%,
    rgb(var(--seam-bot-rgb,20,27,22)) 100%)}
  .secopen--bridged .secopen__photo{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%)}
  /* grading: light hand. These are the page's colour, so they keep their own
     saturation — only enough scrim at the base to carry the label. */
  .secopen__scrim{position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(22,30,25,.18) 0%,rgba(22,30,25,.04) 38%,rgba(16,22,18,.72) 100%)}
  .secopen__lab{position:absolute;left:var(--gutter);right:var(--gutter);bottom:16px;
    display:flex;align-items:baseline;gap:12px}
  .secopen__no{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.16em;
    color:rgba(250,248,242,.75)}
  .secopen__name{font-family:'Fraunces',serif;font-size:1.7rem;font-weight:400;color:var(--paper);
    line-height:1.1}
  /* sections keep their own numbered eyebrow now that no opener carries it */
  .secopen ~ .mono.eyebrow,.secopen ~ * > .mono.eyebrow:first-child{display:flex}
  #origin .origin__intro>.mono.eyebrow,#services>.wrap>.mono.eyebrow,
  #markets>.wrap>.mono.eyebrow,#projects>.wrap>.mono.eyebrow,
  #investors>.wrap>.mono.eyebrow{display:flex !important}
  /* the sections that carry a background photo of their own shouldn't run two
     images at once */
  #services .page__bg{display:none !important}
  /* remaining in-flow photos: same light grading, full width */
  #projects .pcard__media .photo{--duo:.06 !important;--sat:1 !important}
  .mb__photo .mb__duo{opacity:.08 !important}
}

/* ---- source <style id="mobile-lens-plates"> ---- */
/* One documentary photo each for the partner and investor lenses on mobile.
   Both lenses lose every in-flow figure at this breakpoint (the feathered
   cut-outs above), which leaves them as unbroken text. These reuse shots
   already earning their place elsewhere in the site — bulk storage from
   Services, the Kericho site from Projects — as a full-bleed band that
   breaks the column and gives the argument something to stand on. */
.mob-plate{display:none}
@media (max-width:760px){
  /* Matches the safety-photo treatment further down the page: sits on the
     content gutter (same left/right edges as the text and the client cards),
     letterboxed rather than tall, no caption, no frame. No bleed, so nothing
     fights the .reveal transform. */
  .mob-plate{display:block !important;width:100% !important;max-width:100% !important;
    margin:var(--sp-3) 0 !important;
    grid-column:1 / -1 !important;justify-self:stretch !important;align-self:start !important;
    flex:0 0 100% !important}
  .mob-plate__ph{aspect-ratio:16/7;min-height:140px;background-size:cover;background-position:center;
    background-color:#20302a}
  .mob-plate__ph[data-mphoto]{background-color:#20302a}
}