/* ==========================================================================
   Hero call button — mobile only
   A tel: button directly under the hero's "Get A FREE Cleaning Quote" button,
   so a visitor who would rather phone does not have to scroll to find the
   number. Desktop is untouched: nothing here applies above 763px.

   Every widget in the hero is absolutely positioned inside #ibi9n with its
   own fixed top, and the container has a fixed height.
   There was only 18px between the quote button and the review card below it,
   so making room means moving the card and growing the container — dropping a
   button into the gap would have painted it over the card.
   ========================================================================== */

.drc-hero-call {
  display: none;
}

@media only screen and (max-width: 763px) {

  /* Same containing block as the quote button, and the same box: 320x63, 21px
     Montserrat 700, 5px radius, the same soft shadow — measured off the quote
     button, so the pair reads as one set. No border: the 2px white border it
     used to carry made the black face look narrower than the blue one.
     The quote button ends at 450px; 10px of air, then 63px: 460–523px. */
  .drc-hero-call {
    display: flex;
    position: absolute;
    top: 28.75rem;                /* 460px */
    left: 0;
    width: 20rem;                 /* 320px, as the quote button */
    height: 3.9375rem;            /* 63px, as the quote button */
    padding: 0 8px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 0;
    border-radius: 5px;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
    /* #050505 is what the page's own "Call Now" buttons already use. */
    background: #050505;
    color: #ffffff;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    /* Deliberately low. The sticky bar sits at 10000 and the testimonial
       letters at 9999 already painted over it once; anything high here would
       do the same as this button scrolls underneath the bar. */
    z-index: 1;
  }

  /* The review card and everything drawn on it: eleven SIBLING widgets, not
     children of the card, so each has to move or the card would slide out
     from under its own text. translateY rather than margin-top because two of
     them already carry a small top margin that an override would wipe out.
     73px keeps the card's original 18px gap below the 63px button
     (card now starts at 541px: 523 + 18). */
  #En3MX4t4ctJzTTyTPhspVAop8MLmx3dZ,
  #JNKzqdVAkIOyGyznAR8r2tM3aWggAlbo,
  #rqQHTTqioXtMQsqTXBALx7scJa2Dn4uD,
  #nmdhHqlDXQrI2zsOAQ49cZZgaDVhK0Qf,
  #LfmdTQ4Nnn5cvspW1IXBs3szmo4sKekQ,
  #w3yK4PimHkH6Qeuzskd0hLt1ks3LbeVv,
  #q78CoepFc2O6i8qrMcEbXaMQmf9x093C,
  #JTTLfOKrGN2zTtT4pdhdPHRiVf4yBk9n,
  #bwA48T3TTQu5BhnhoxJTrA9gGVqE11Ns,
  #iMcyKGW0TxXbZq7X6efDFEwRnd697WkS,
  #Oot3KIw6tuov85isurZCLM5bHIs7fQqq {
    transform: translateY(73px);
  }

  /* ...and the fixed-height container grows by the same 73px, so the next
     section is pushed down rather than overlapped. 700px + 73px = 773px. */
  #yhEmQiEIkG73Ke7AC546MUP0P8xO9odK > .row .container {
    height: 48.3125rem;
  }
}