/* ==========================================================================
   Sticky mobile call-to-action
   Two full-bleed buttons side by side, pinned to the bottom of small screens.

   Hidden while the hero's own quote and call buttons are on screen, and slides
   up once the visitor has scrolled past them — two identical pairs of buttons
   on screen at once is noise. The inline script right after the bar's markup
   toggles .is-visible; a <noscript> rule shows it permanently when scripts are
   off, so the bar can never be lost entirely.

   Desktop is untouched: the bar does not exist above 767px.
   ========================================================================== */

.drc-sticky-cta {
  display: none;
}

@media (max-width: 767px) {

  .drc-sticky-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Above the page's own content, which runs as high as 9999 — the
       testimonial avatar letters sit at that and would otherwise paint over
       the bar. Still far below the quote popup (2147483000). */
    z-index: 10000;
    box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.18);
    font-family: Montserrat, Arial, sans-serif;

    /* Parked below the viewport until the visitor scrolls past the hero.
       visibility follows the slide with a delay, so a hidden bar is also out
       of the tab order and cannot bleed its shadow up the screen. */
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }

  .drc-sticky-cta.is-visible {
    transform: none;
    visibility: visible;
    transition: transform .25s ease, visibility 0s linear 0s;
  }

  .drc-sticky-cta a {
    position: relative;
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0;                 /* let long labels shrink instead of overflow */
    padding: 15px 8px;
    /* Each button carries the home-indicator inset itself, so its own colour
       runs to the physical bottom edge instead of leaving a white strip. */
    padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
  }

  /* Safety skirt: iOS Safari can leave a fixed bottom:0 bar a hair short of
     the true bottom while the URL bar collapses. background-color:inherit
     means each half extends in its OWN colour, so the seam never shows. */
  .drc-sticky-cta a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 70px;
    background-color: inherit;
    pointer-events: none;
  }

  .drc-sticky-cta__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }

  .drc-sticky-cta__lead {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
  }

  /* The phone number on the call side — the string dynamic number insertion
     rewrites. Kept legible rather than shrunk to a caption. */
  .drc-sticky-cta__num {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    opacity: .92;
  }

  /* Both colours are lifted from the page rather than invented: #050505 is
     what the page's own "Call Now" buttons already use, and #1F75FE is the
     primary "Get a Free Quote" CTA colour. */

  /* left — dial the office */
  .drc-sticky-cta__call {
    background: #050505;
    color: #ffffff;
  }

  /* right — opens the hosted quote form */
  .drc-sticky-cta__quote {
    background: #1F75FE;
    color: #ffffff;
  }

  /* a hairline so the two halves stay distinct where they meet */
  .drc-sticky-cta__quote {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }

  .drc-sticky-cta__quote .drc-sticky-cta__num {
    font-weight: 500;
    opacity: .85;
  }

  /* Keep the bar clear of the page's own last element. Mirrors the bar's
     height: 15 + ~40 content + 15 padding, plus the safe-area inset. */
  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
}