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

/* ---- source <style id="mobile-svc-deck"> ---- */
/* ===== Mobile "What we do" — photo deck (≤760px only; desktop untouched) ===== */
@media (max-width:760px){
  #services .wrap{display:flex;flex-direction:column}
  #services .mono.eyebrow{justify-content:flex-start !important;flex-wrap:nowrap !important;white-space:nowrap !important}
  #services .h2{text-align:left !important;margin-inline:0 !important}
  #svcExplore{text-align:left !important;margin-top:1.4rem !important;width:100%}
  #svcExplore>.mono.eyebrow{display:none !important}
  /* deck: horizontal, edge-to-edge, with a peek of the next card */
  .svcdeck{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    /* bleeds past the page gutter but stops a little short of the screen
       edge, so the strip breathes instead of running off the glass */
    margin-inline:calc(var(--gutter) * -1);
    padding:.2rem calc(var(--gutter) + .55rem) .6rem;
    scroll-padding-inline:calc(var(--gutter) + .55rem)}
  .svcdeck::-webkit-scrollbar{display:none}
  .svcdeck__card{flex:none;width:206px;height:290px;scroll-snap-align:start;position:relative;
    border-radius:18px;overflow:hidden;background:var(--green-deep);border:0;padding:0;cursor:pointer;
    box-shadow:0 12px 30px rgba(32,48,42,.18);text-align:left;font-family:inherit}
  .svcdeck__photo{position:absolute;inset:0;background-size:cover;background-position:center;
    background-color:#3d4a40}
  .svcdeck__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,30,25,.2),rgba(16,22,18,.88))}
  .svcdeck__in{position:absolute;inset:0;padding:17px 16px 16px;display:flex;flex-direction:column;color:var(--paper)}
  .svcdeck__ct{font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:rgba(250,248,242,.7)}
  .svcdeck__foot{margin-top:auto}
  .svcdeck__tag{font-family:'IBM Plex Mono',monospace;font-size:.56rem;letter-spacing:.16em;color:#a9c9a2;display:block}
  .svcdeck__name{font-family:'Fraunces',serif;font-size:1.18rem;line-height:1.15;margin-top:.35rem;display:block}
  .svcdeck__open{display:none;align-items:center;gap:7px;margin-top:.75rem;border:1px solid rgba(250,248,242,.5);
    border-radius:999px;padding:7px 13px;font-size:.75rem}
  .svcdeck__card.is-on{box-shadow:0 0 0 2px var(--green-deep),0 12px 30px rgba(32,48,42,.28)}
  .svcdeck__card.is-on .svcdeck__open{display:inline-flex}
  .svcdeck__dots{display:flex;gap:5px;padding:.1rem 0 .9rem;justify-content:center}
  .svcdeck__dots i{height:3px;width:14px;border-radius:2px;background:var(--line-strong);transition:width .3s var(--ease),background .3s}
  .svcdeck__dots i.on{width:26px;background:var(--green-deep)}
  /* the accordion becomes the deck's detail pane: heads hidden, only the
     selected line's panel shows */
  #svcAcc{border-top:1px solid var(--line);padding-top:.2rem}
  #svcAcc .svc-acc__item{border:0 !important}
  #svcAcc .svc-acc__head{display:none !important}
  #svcAcc .svc-acc__item:not(.is-open){display:none !important}
  #svcAcc .svc-acc__lede{padding-top:.9rem}
  .svcdeck__sel{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.18em;
    color:var(--ink-3);padding-top:.9rem;display:block}
  #svcAcc .svc-acc__subs li{border-top:1px solid var(--line)}
  /* The site frames .svc-acc as a bordered card with corner ticks and 1.2rem
     of padding at this width. In the deck that frame becomes a second, inset
     column — the detail no longer lines up with the heading above it or the
     deck's first card. Strip it so everything shares one left edge. */
  #svcAcc.svc-acc{border:0 !important;padding:0 !important;border-radius:0 !important}
  #svcAcc.svc-acc::before,#svcAcc.svc-acc::after{display:none !important}
  /* one vertical rhythm: heading → deck → dots → label → detail */
  #svcExplore{display:flex;flex-direction:column}
  .svcdeck{padding-bottom:.75rem}
  .svcdeck__dots{padding:0 0 .85rem}
  .svcdeck__sel{padding-top:0;padding-bottom:.15rem}
  #svcAcc{border-top:1px solid var(--line);padding-top:0 !important;margin-top:.55rem}
  #svcAcc .svc-acc__lede{padding-top:1rem;max-width:none}
  /* the sub-service list shares the body's left edge rather than indenting
     again inside the (now removed) frame */
  #svcAcc .svc-acc__subs{padding-bottom:1.15rem}
  #svcAcc .svc-acc__subs li{grid-template-columns:2.4rem 1fr;column-gap:.5rem;padding:.75rem 0}
  #svcAcc .svc-acc__panel .btn{margin-bottom:.4rem}
  /* Card feet were bottom-anchored, so the selected card's extra "Open" pill
     pushed its tag and title up out of line with its neighbours. Reserve the
     pill's space on every card and the titles sit on one baseline. */
  .svcdeck__open{display:inline-flex !important;visibility:hidden}
  .svcdeck__card.is-on .svcdeck__open{visibility:visible}
  /* .svc-explore's 760px centring leaves the deck's detail inset from the
     heading on wider phones and small tablets — the deck bleeds full width,
     so its detail should too. */
  #svcExplore{max-width:none !important;margin-inline:0 !important}
  /* Titles run one to three lines across the five lines; bottom-anchored feet
     then start at different heights. Two lines for every card keeps the deck
     an even grid, and the full title is in the detail below anyway. */
  .svcdeck__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7rem}
}
@media (min-width:761px){ .svcdeck,.svcdeck__dots,.svcdeck__sel{display:none !important} }