/* ==========================================================================
   Call Us lead-capture modal
   Fields deliberately carry the quote form's classes, so everything inside
   .qf__grid is styled by forms.css already. Only the shell, the two steps and
   the reveal are defined here.
   ========================================================================== */

.callmodal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  transition:opacity .18s ease;
}
.callmodal.is-open{opacity:1}
.callmodal[hidden]{display:none}

.callmodal__scrim{
  position:absolute;
  inset:0;
  background:rgba(4,39,14,.62);
  backdrop-filter:blur(2px);
}

.callmodal__panel{
  position:relative;
  width:100%;
  max-width:480px;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--white,#fff);
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  padding:28px 26px 26px;
  transform:translateY(10px) scale(.985);
  transition:transform .2s cubic-bezier(.2,.7,.3,1);
}
.callmodal.is-open .callmodal__panel{transform:none}

/* The panel is focused on open so the dialog is announced, but it is not an
   interactive control — a ring around the whole sheet would just look broken.
   Keyboard focus on the controls inside is unaffected. */
.callmodal__panel:focus{outline:none}

/* Close ------------------------------------------------------------------ */
.callmodal__x{
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--ink-3,#565d5c);
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.callmodal__x:hover{background:var(--surface-2,#f3f3f3);color:var(--ink,#1a1c1c)}
.callmodal__x svg{width:20px;height:20px;fill:none}

/* Copy ------------------------------------------------------------------- */
.callmodal__t{
  margin:0 0 6px;
  font-family:var(--font-head,inherit);
  font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--ink,#1a1c1c);
}
.callmodal__lede{
  margin:0 0 18px;
  font-size:.95rem;
  line-height:1.5;
  color:var(--ink-3,#565d5c);
}

.callmodal__formwrap,
.callmodal__form{margin:0;padding:0;background:none;box-shadow:none;border:0}

/* The drag handle could be pulled past the panel and push the submit button
   out of reach. Vertical growth is still allowed, just bounded. */
.callmodal__form textarea{resize:vertical;max-height:170px}

/* The row gap belongs to .qf__grid and stops at its edge, so the submit button
   — which sits outside the grid, after the hidden security fields — butted
   straight up against the Description box.
   Deliberately wider than the 12px gap between fields: matching it made the
   button look like a sixth field. The action should sit apart from the things
   being filled in. */
.callmodal__submit{margin-top:22px}

/* Sending state ---------------------------------------------------------- */
.callmodal__form.is-sending .qf__label{opacity:.45}
.callmodal__form.is-sending .callmodal__submit{cursor:progress}

.callmodal__status:empty{display:none}
.callmodal__status{
  margin:12px 0 0;
  font-size:.9rem;
  line-height:1.45;
  color:var(--danger,#b3261e);
}

/* Reveal ----------------------------------------------------------------- */
.callmodal__done{text-align:center;padding:6px 0 2px}

.callmodal__tick{
  width:56px;
  height:56px;
  margin:0 auto 16px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--brand-wash,#eef7f0);
  color:var(--brand-deep,#00631a);
}
.callmodal__tick svg{width:28px;height:28px}

/* ==========================================================================
   The Call Us thank-you page
   One job: get the number in front of the visitor and get them dialling.
   Everything is tuned so the number and CALL NOW clear the fold on a phone.
   ========================================================================== */

.ty--call{padding-top:clamp(24px,4vw,44px);padding-bottom:clamp(32px,5vw,56px)}

.ty__t--call{
  margin:6px 0 10px;
  font-size:clamp(1.55rem,1.2rem + 1.9vw,2.4rem);
  line-height:1.15;
}

.ty__lede--call{
  max-width:46ch;
  margin:0 auto;
  font-size:clamp(.95rem,.9rem + .2vw,1.05rem);
  line-height:1.55;
}

.tycall{
  margin:22px auto 20px;
  max-width:480px;
  padding:clamp(20px,3.5vw,28px) clamp(18px,3vw,26px);
  text-align:center;
  background:var(--brand-wash,#eef7f0);
  border:2px solid var(--brand-line,#cfe6d6);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,99,26,.09);
}

.tycall__kicker{
  margin:0 0 4px;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--brand-deep,#00631a);
}

/* On desktop the tel: link is inert, so the number has to be readable across
   a desk and dialable by hand — hence type this large, not a button label. */
.tycall__num{
  display:block;
  margin:0 0 16px;
  font-family:var(--font-head,inherit);
  font-size:clamp(2.2rem,1.5rem + 3.2vw,3.1rem);
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.05;
  color:var(--brand-ink,#04270e);
  text-decoration:none;
  overflow-wrap:anywhere;
}
.tycall__num:hover,
.tycall__num:focus-visible{color:var(--brand-deep,#00631a);text-decoration:underline}

.tycall__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:60px;
  padding:16px 22px;
  font-size:clamp(1.05rem,.95rem + .45vw,1.2rem);
  font-weight:800;
  letter-spacing:.02em;
  text-decoration:none;
}
.tycall__btn .ico{width:22px;height:22px;fill:currentColor;flex:none}

/* A pill, not a full-width row.
   As a stretched flex row the dot sat at the card's left edge while the text
   centred itself, so the two read as unrelated the moment the line wrapped.
   Shrink-wrapping them into one badge keeps the dot attached to the words at
   any width, and gives the 24/7 promise a bit of presence besides. */
.tycall__hours{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:14px auto 0;
  padding:7px 15px;
  border-radius:999px;
  background:var(--white,#fff);
  border:1px solid var(--brand-line,#cfe6d6);
  font-size:.8rem;
  font-weight:600;
  line-height:1.35;
  text-align:left;
  color:var(--ink-2,#33383a);
}

/* A live dot reads as "someone is there now" far faster than the words do. */
.tycall__dot{
  width:8px;
  height:8px;
  flex:none;
  border-radius:50%;
  background:var(--brand-bright,#0ab84e);
  box-shadow:0 0 0 3px rgba(10,184,78,.22);
}

/* Secondary routes, deliberately quieter than the call. */
.ty__actions--call{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:4px;
}
.ty__actions--call .btn{font-size:.92rem;padding:11px 18px}

@media (max-width:600px){
  .ty--call .ty__tick{transform:scale(.85)}
  .tycall{margin-top:18px}
  .ty__actions--call .btn{flex:1 1 45%}
}

/* Page behind the modal -------------------------------------------------- */
body.has-callmodal{overflow:hidden}

/* Small screens ----------------------------------------------------------
   The panel becomes a bottom sheet: a centred dialog on a short phone screen
   fights the on-screen keyboard, which is exactly when this form is used. */
@media (max-width:600px){
  .callmodal{padding:0;align-items:flex-end}

  .callmodal__panel{
    max-width:none;
    max-height:92vh;
    border-radius:18px 18px 0 0;
    padding:26px 20px calc(20px + env(safe-area-inset-bottom));
    transform:translateY(18px);
  }
}

@media (prefers-reduced-motion:reduce){
  .callmodal,
  .callmodal__panel{transition:none}
  .callmodal__panel{transform:none}
}