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

/* ---- source <style> ---- */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}
/* html{scroll-behavior:smooth} is kept as the no-JS fallback, but while
   Lenis is active it must be off: otherwise every programmatic scroll
   runs as a native smooth animation at the same time as Lenis writes
   its own position each frame, and the two overwrite each other. */
html.lenis{scroll-behavior:auto}
/* ===== MOBILE UI REFINEMENT ===== */
@media (max-width:760px){
  .lens-fab,.lens-panel{display:none !important}
  .page--hero .scrim,.page--hero .scrim--left{
    background:linear-gradient(180deg,rgba(20,22,16,.06) 0%,rgba(20,22,16,.3) 30%,rgba(18,20,15,.46) 55%,rgba(16,18,13,.54) 78%,rgba(16,18,13,.6) 100%) !important;
  }
  .page--hero .h1{font-size:clamp(2.5rem,12vw,3.6rem);line-height:.96;font-weight:560;color:var(--paper)}
  .hero-badge{display:inline-flex;align-items:center;gap:.5em;margin-top:.7rem;padding:.4em .9em;
    border-radius:999px;background:rgba(250,248,242,.14);border:1px solid rgba(250,248,242,.32);
    font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);letter-spacing:.08em;
    text-transform:uppercase;color:rgba(250,248,242,.92)}
  .hero-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green-soft)}
  .pcard__media .photo::after{opacity:.15 !important}
  .mb__photo .mb__duo{opacity:.15 !important}
  .mb__body{padding:1.2rem 1.3rem 1.3rem !important}
  .pcard__body{padding:1.2rem 1.3rem 1.3rem !important}
  .page--hero .h1 em{color:var(--green-soft) !important}
  .page--hero #heroEyebrow{color:rgba(250,248,242,.85) !important}
  .page--hero .intake__sub{color:rgba(250,248,242,.82)}
  .page--hero .doors__lab{color:rgba(250,248,242,.75)}
  .page--hero .doors__lab::before{background:rgba(250,248,242,.4)}
  .page--hero .proofstrip{border-top-color:rgba(250,248,242,.25)}
  .page--hero .proofstrip__creds span{color:rgba(250,248,242,.78)}
  .page--hero .proofstrip__creds span::before{background:rgba(250,248,242,.5)}
  .page--hero .btn{width:100%;justify-content:center;padding:1rem 1.4rem}
  .page--hero .btn--solid{background:var(--paper) !important;color:var(--ink) !important;box-shadow:0 10px 26px rgba(16,18,13,.35)}
  .svc-acc,.rel-col,.pjt,.value,.drawer,.pcard{
    border:1px solid var(--line-strong) !important;
    border-radius:0 !important;
    padding:1.1rem 1.2rem;
    position:relative;
  }
  .svc-acc::before,.svc-acc::after,.rel-col::before,.rel-col::after,
  .pjt::before,.pjt::after,.value::before,.value::after,.drawer::before,.drawer::after,
  .pcard::before,.pcard::after{
    content:"";position:absolute;width:8px;height:8px;pointer-events:none;
    border:1px solid var(--green);opacity:.55;background:none !important;
  }
  .svc-acc::before,.rel-col::before,.pjt::before,.value::before,.drawer::before,.pcard::before{
    top:-1px;left:-1px;border-right:none;border-bottom:none;
  }
  .svc-acc::after,.rel-col::after,.pjt::after,.value::after,.drawer::after,.pcard::after{
    bottom:-1px;right:-1px;border-left:none;border-top:none;
  }
  .pcard{padding:0}
  .pcard__body{padding:1.4rem 1.6rem 1.55rem}
  .mb__feature,.mb__cell{border-radius:0 !important;position:relative}
  .mb__feature::before,.mb__feature::after,.mb__cell::before,.mb__cell::after{
    content:"";position:absolute;width:8px;height:8px;pointer-events:none;
    border:1px solid var(--green);opacity:.55;background:none !important;z-index:2;
  }
  .mb__feature::before,.mb__cell::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
  .mb__feature::after,.mb__cell::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
  .rel-grid,.projects-row,.values__grid{gap:1.2rem}
  .rel-card{padding:.7rem .9rem}
  .btn,.sub,.lens-btn{min-height:44px}

  /* "who's reading" doors: compact single-row chips instead of three tall
     stacked cards — the full title/description now lives in one shared
     preview panel below that swaps on tap, so the hero keeps its air */
  .doors{display:flex !important;flex-wrap:nowrap;gap:0 !important;
    border:1px solid var(--line-strong);border-radius:12px;overflow:hidden;
    background:rgba(250,248,242,.9)}
  .door{flex:1;min-width:0;flex-direction:column !important;align-items:center;
    text-align:center;gap:.3rem;padding:.95rem .5rem !important;
    border:none !important;border-right:1px solid var(--line) !important;
    border-radius:0 !important;background:transparent !important;min-height:unset !important}
  .door:last-child{border-right:none !important}
  .door.is-lens{background:rgba(90,135,85,.14) !important}
  .door__kick{flex-direction:column;align-items:center;gap:.2rem}
  .door__body{display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;margin-top:.15rem}
  .door__t{font-size:.68rem !important;font-weight:500 !important;line-height:1.25 !important;
    letter-spacing:0 !important;display:contents}
  .door__d{display:none !important}
  .door__tag{display:none !important}
  .door__go{display:none !important}
  /* trim the hero to essentials — long lead paragraph to one line, proof
     strip to a single scrollable row — instead of a full stack of copy */
  .page--hero .intake__sub{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-bottom:.4rem !important}
  .page--hero .intake__sub{margin-bottom:1rem !important}
  .page--hero #heroCta{margin-top:.2rem !important;margin-bottom:1.4rem !important}
  .page--hero .h1 em{font-style:normal}
  .doors__lab{margin-top:0 !important;margin-bottom:1rem !important}
  .doors{margin-bottom:1.3rem !important}
  .page--hero .proofstrip{margin-top:1rem !important}
  .page--hero .proofstrip__creds{justify-content:flex-start !important;flex-wrap:nowrap !important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 1.5rem),transparent 100%);
    mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 1.5rem),transparent 100%)}
  .page--hero .proofstrip__creds::-webkit-scrollbar{display:none}
  .page--hero .proofstrip__creds span{white-space:nowrap}
  /* contact: match customer's reading order to partner/investor's —
     form first, reach-us details as the secondary/backup option right
     before the footer, in both lenses, with a consistent divider line */
  .contact{display:flex;flex-direction:column}
  .contact>.reveal:first-child{display:contents}
  .contact .card{order:2}
  .contact .reach-bar{order:3;border-top:1px solid var(--line) !important;margin-top:var(--sp-3) !important;padding-top:1.2rem !important}
  /* the ≤760 .card{margin-inline:auto} rule shrink-wraps a card to its
     content width when its grid item has auto margins — meant for the
     small-screen customer card, but it was also grabbing the briefing
     card, leaving it narrow, off-centre and overlapping the options list
     above it. Every contact-page card should fill its column instead. */
  .brief .card,.contact .card{margin-inline:0;width:100%;justify-self:stretch}
  .door__no{font-size:.72rem !important;opacity:.8}
  .door__who{font-size:.82rem !important;letter-spacing:.08em !important}
  .proofstrip__creds{flex-wrap:nowrap !important;overflow-x:auto;-webkit-overflow-scrolling:touch;
    justify-content:flex-start !important;scrollbar-width:none}
  .proofstrip__creds::-webkit-scrollbar{display:none}
  .proofstrip__creds span{white-space:nowrap}
}