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

/* ---- source <style id="mobile-3b-hero"> ---- */
/* ===== Mobile hero — 3b full-photo + card doors, light theme (≤760px only; desktop untouched) ===== */
@media (max-width:760px){
  .page--hero{padding-bottom:2.2rem !important;min-height:100dvh !important;display:flex !important;flex-direction:column !important;
    padding-top:calc(4.9rem + 2vh) !important}
  #intake .page__bg .photo,#intake .page__bg .scrim{-webkit-mask-image:none !important;mask-image:none !important}
  /* Two edge-anchored plates instead of one percentage ramp.
     The old scrim placed its light bands at 26% / 82% of the hero, but the
     text does not live at a percentage — the headline is pinned to the top
     padding and the doors are pinned to the bottom. So on a taller phone the
     light band slid down past the headline and the copy ended up over the
     tanks; on a shorter one it rode up over the doors. Anchoring each plate
     to its own edge in px (clamped against vh so it still breathes) means the
     readable area is always exactly where the text actually is, at any size.
     Between the two plates the photograph is left clear — that gap is the
     middle of the frame, which never carries text. */
  .page--hero .scrim,.page--hero .scrim--left{background:
    linear-gradient(180deg,
      rgba(250,248,242,.92) 0,
      rgba(250,248,242,.80) clamp(150px,26vh,230px),
      rgba(250,248,242,.28) clamp(230px,36vh,320px),
      rgba(250,248,242,0)   clamp(320px,46vh,420px)),
    linear-gradient(0deg,
      var(--paper) 0,
      var(--paper) clamp(180px,32vh,300px),
      rgba(250,248,242,.88) clamp(250px,44vh,390px),
      rgba(250,248,242,.30) clamp(330px,56vh,480px),
      rgba(250,248,242,0)   clamp(390px,64vh,560px)) !important}
  .hero-badge{display:none !important}
  .page--hero .intake{flex:1 !important;display:flex !important;flex-direction:column !important}
  .page--hero .intake>div{flex:1 !important;display:flex !important;flex-direction:column !important;align-items:stretch !important;text-align:left !important}
  .page--hero #heroEyebrow{color:var(--green-deep) !important;text-align:left !important}
  .page--hero .h1{text-align:left !important;margin-inline:0 !important;color:var(--ink) !important}
  .page--hero .h1 em{color:var(--green-deep) !important;font-style:italic !important}
  .page--hero .intake__sub{display:none !important}
  /* the label rides the top of the doors group, so it lands inside the bottom
     plate at every height; the auto margin above it absorbs the leftover space. */
  .page--hero .doors__lab{margin-top:auto !important;padding-top:1.6rem !important;margin-bottom:.8rem !important;justify-content:flex-start !important;color:var(--ink-3) !important}
  .page--hero .doors__lab::before{background:var(--tint-dim) !important}
  .page--hero .doors{order:3 !important;width:100% !important}
  .page--hero #heroCta{order:4 !important;margin-top:1.1rem !important;margin-inline:0 !important;background:var(--green-deep) !important;color:var(--paper) !important;box-shadow:0 12px 28px rgba(63,95,60,.25) !important}
  .page--hero .proofstrip{order:5 !important;border-top:1px solid var(--line) !important}
  .page--hero .proofstrip__creds span{color:var(--ink-3) !important}
  .page--hero .proofstrip__creds span::before{background:var(--tint-dim) !important}
  .doors{display:flex !important;flex-direction:column !important;gap:8px !important;background:none !important;border:none !important;border-radius:0 !important;overflow:visible !important;box-shadow:none !important;margin-bottom:0 !important}
  .door{display:grid !important;grid-template-columns:auto 1fr auto !important;grid-template-rows:auto auto !important;column-gap:12px !important;row-gap:1px !important;align-items:center !important;text-align:left !important;background:var(--paper) !important;border:1px solid var(--line-strong) !important;border-radius:14px !important;padding:.8rem 1rem !important;min-height:0 !important;box-shadow:0 4px 14px rgba(32,48,42,.06) !important}
  .door__kick{display:contents !important}
  .door__no{grid-row:1/3;grid-column:1;font-family:'IBM Plex Mono',monospace !important;font-size:.65rem !important;letter-spacing:.08em !important;color:var(--green) !important;opacity:1 !important;min-width:auto !important}
  .door__body{display:block !important;grid-row:1;grid-column:2;margin:0 !important;overflow:visible !important}
  .door__t{display:block !important;font-family:'Fraunces',serif !important;font-size:1rem !important;color:var(--ink) !important;line-height:1.15 !important;font-weight:400 !important;letter-spacing:0 !important}
  .door__who{display:block !important;grid-row:2;grid-column:2;font-family:'Inter',system-ui,sans-serif !important;font-size:.68rem !important;color:var(--ink-3) !important;letter-spacing:.02em !important;text-transform:none !important}
  .door__d{display:none !important}
  .door__tag{display:none !important}
  .door::after{content:"\2192";grid-row:1/3;grid-column:3;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);color:var(--green-deep);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:14px}
  .door.is-lens{background:var(--green-deep) !important;border-color:var(--green-deep) !important}
  .door.is-lens .door__no{color:#a9c9a2 !important}
  .door.is-lens .door__t{color:var(--paper) !important}
  .door.is-lens .door__who{color:rgba(250,248,242,.7) !important}
  .door.is-lens::after{border-color:rgba(250,248,242,.5);color:var(--paper)}
}