/* ============================================================
   Houston Centerless — mobile responsive layer
   The site is built entirely with inline styles (no !important),
   so author rules with !important here win over them.
   ============================================================ */

/* ---- Hamburger button (injected by mobile.js) ---- */
.hcg-burger{
  display:none;
  align-items:center; justify-content:center;
  width:46px; height:42px; padding:0;
  background:transparent; border:1px solid #D8E1E8; border-radius:8px;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.hcg-burger span{
  display:block; width:22px; height:2px; background:#15527D;
  border-radius:2px; position:relative; transition:background .2s;
}
.hcg-burger span::before,
.hcg-burger span::after{
  content:""; position:absolute; left:0; width:22px; height:2px;
  background:#15527D; border-radius:2px; transition:transform .2s;
}
.hcg-burger span::before{ top:-7px; }
.hcg-burger span::after{ top:7px; }
.hcg-burger.open span{ background:transparent; }
.hcg-burger.open span::before{ transform:translateY(7px) rotate(45deg); }
.hcg-burger.open span::after{ transform:translateY(-7px) rotate(-45deg); }

/* ---- Mobile menu panel (injected by mobile.js) ---- */
.hcg-mobile-menu{
  display:none; position:absolute; left:0; right:0; top:100%;
  background:#fff; border-bottom:1px solid #E4EAEF;
  box-shadow:0 22px 40px rgba(11,36,56,0.16);
  padding:8px 20px 20px;
  max-height:calc(100vh - 56px); overflow-y:auto;
  font-family:'IBM Plex Sans',system-ui,sans-serif;
}
.hcg-mobile-menu.open{ display:block; }
.hcg-mobile-menu a{
  display:block; padding:13px 4px; font-size:16px; font-weight:600;
  color:#26404F; text-decoration:none; border-bottom:1px solid #EEF2F5;
}
.hcg-mobile-menu .hcg-mm-label{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.08em;
  color:#15527D; padding:16px 4px 4px; text-transform:uppercase;
}
.hcg-mobile-menu .hcg-mm-sub{ padding-left:18px; font-weight:500; font-size:15px; }
.hcg-mobile-menu .hcg-mm-quote{
  margin-top:16px; background:#E8973A; color:#1B1003; text-align:center;
  font-weight:700; border-radius:8px; border-bottom:none;
}
.hcg-mobile-menu .hcg-mm-call{
  margin-top:10px; text-align:center; border:1px solid #D8E1E8;
  border-radius:8px; color:#15527D;
}

/* ============================================================
   Layout collapse — tablets & phones
   ============================================================ */
@media (max-width:860px){
  /* prevent any decorative bleed from causing sideways scroll
     (clip keeps the sticky header working, unlike overflow:hidden) */
  html, body{ overflow-x:clip !important; }

  /* hide the dark utility bar (email overflows; phone + quote live in the menu) */
  [style*="background:#0A2233"]{ display:none !important; }

  /* swap desktop header for hamburger */
  .hcg-desktop-nav{ display:none !important; }
  .hcg-desktop-cta{ display:none !important; }
  .hcg-burger{ display:flex !important; }

  /* collapse every inline multi-column grid to a single column ... */
  [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  /* ... but keep the 4-up grids (stats / industries / process / footer) as 2-up */
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:1.4fr"]{ grid-template-columns:1fr 1fr !important; }
  /* drop span-2 so collapsed forms don't spawn an implicit 2nd column */
  [style*="grid-column:span 2"]{ grid-column:auto !important; }

  /* tame side gutters on centered wrappers and padded content sections */
  [style*="max-width:1240px"],
  [style*="max-width:1080px"]{ padding-left:22px !important; padding-right:22px !important; }
  section[style*="px 32px"]{
    padding-left:22px !important; padding-right:22px !important;
    padding-top:56px !important; padding-bottom:56px !important;
  }

  /* typography */
  h1{ font-size:38px !important; line-height:1.08 !important; }
  h2{ font-size:30px !important; line-height:1.14 !important; }
  h3{ font-size:19px !important; }

  /* big hero image */
  img[style*="height:420px"]{ height:280px !important; }
}

@media (max-width:480px){
  /* footer (1.4fr ...) goes single column; stats/industries/process stay 2-up */
  [style*="grid-template-columns:1.4fr"]{ grid-template-columns:1fr !important; }

  [style*="max-width:1240px"],
  [style*="max-width:1080px"]{ padding-left:16px !important; padding-right:16px !important; }
  section[style*="px 32px"]{ padding-left:16px !important; padding-right:16px !important; }

  h1{ font-size:30px !important; }
  h2{ font-size:25px !important; }
}