/* ===== Click-to-Call button (bottom-left) — image + HTML number overlay ===== */
.ge-c2c {
  position: fixed !important;
  left: 18px;
  bottom: 86px;
  z-index: 99999;
  display: block !important;
  width: 300px;
  max-width: 74vw;
  aspect-ratio: 914 / 292;
  text-decoration: none !important;
  background-image: url("images/click-to-call-blank.png?v=8") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  filter: drop-shadow(0 6px 14px rgba(6,36,83,.22));
  container-type: inline-size;
}
/* the phone number, over the yellow "YOUR NUMBER" banner, matching template font */
.ge-c2c .ge-c2c-num {
  position: absolute;
  left: calc(58% + 7px);
  top: calc(68% + 5px);
  transform: translate(-50%, -50%);
  color: #111;
  font-family: "Oswald", Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 5.9cqw;
  letter-spacing: 1px;
  white-space: nowrap;
}
@media (max-width: 575px) {
  .ge-c2c { width: 250px; left: 10px; bottom: 70px; }
}

/* ===== TEXT US button, directly under the click-to-call number ============
   The call button is position:fixed. Wrapping both in .ge-c2c-stack moves
   the fixed positioning onto the wrapper, so the two sit together and the
   pair stays anchored bottom-left as one unit.
   The link is sms:+1...?&body=... — the "?&" form is what both iOS and
   Android accept for a pre-filled message. */
.ge-c2c-stack {
  position: fixed !important;
  left: 18px;
  bottom: 86px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
/* the call button is now positioned by the stack, not by itself */
.ge-c2c-stack .ge-c2c {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
}
.ge-c2c-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 300px;
  max-width: 74vw;
  box-sizing: border-box;
  justify-content: center;
  padding: 10px 14px;
  background: #062453;
  color: #FFC629 !important;
  -webkit-text-fill-color: #FFC629;
  font-family: "Oswald", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 1px;
  text-decoration: none !important;
  border: 2px solid #FFC629;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(6,36,83,.22);
  transition: background .15s ease, color .15s ease;
}
.ge-c2c-text:hover,
.ge-c2c-text:focus-visible {
  background: #FFC629;
  color: #062453 !important;
  -webkit-text-fill-color: #062453;
}
.ge-c2c-text svg { width: 19px; height: 19px; flex: 0 0 19px; fill: currentColor; }

@media (max-width: 575px) {
  .ge-c2c-stack { left: 10px; bottom: 70px; }
  .ge-c2c-text  { width: 250px; font-size: 15px; padding: 9px 12px; }
}

/* ===== Keep the call/TEXT stack clear of the pricing-tool banner =========
   The "See if you Qualify for a LOW INTEREST NEW ROOF from $99/Month" link
   (it opens Roof-Estimate-Tool.html) is the main CTA on mobile, and the fixed
   call stack was sitting on top of it. Raising the stack puts the overlay
   above that button instead of across it. */
@media (max-width: 575px) {
  .ge-c2c-stack { bottom: 196px !important; }
  .ge-c2c       { bottom: 196px !important; }
}