/* ==========================================================================
   Taber Builders - estimate funnel + site-wide lead capture
   Loaded on every page (the CTA blocks) and on get-estimate.php (the funnel).
   Colours picked from the existing theme: #042768 navy, #F4BC16 gold.
   ========================================================================== */

.tb-funnel-wrap { max-width: 760px; margin: 0 auto; padding: 10px 0 40px; }

/* ---- progress ---------------------------------------------------------- */
.tb-progress { margin: 0 0 12px; }
.tb-bar { height: 6px; border-radius: 4px; background: #dfe2e6; overflow: hidden; }
.tb-bar-fill { height: 100%; width: 20%; background: #042768; border-radius: 4px;
  transition: width .32s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion: reduce) { .tb-bar-fill { transition: none; } }

.tb-rail { display: flex; list-style: none; padding: 0; margin: 9px 0 0; gap: 4px; }
.tb-dot { flex: 1 1 0; text-align: center; font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; color: #a8aeb6; font-weight: 700; white-space: nowrap;
  padding-top: 2px; transition: color .25s; }
.tb-dot.on { color: #042768; }
.tb-dot.done { color: #6E7681; }
.tb-dot.done::before { content: "\2713\00a0"; color: #2F6B4F; }
@media (max-width: 560px) {
  .tb-rail { gap: 2px; }
  .tb-dot { font-size: 9.5px; letter-spacing: 0; }
  .tb-dot.done::before { content: "\2713"; }
}

.tb-stepcount { text-align: center; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: #8a9099; margin: 12px 0 26px; }
.tb-time { color: #a8aeb6; letter-spacing: .04em; }

/* ---- steps ------------------------------------------------------------- */
.tb-step { display: none; }
.tb-step.on { display: block; animation: tbIn .28s ease; }
@keyframes tbIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tb-step.on { animation: none; } }

.tb-q { font-size: 25px; line-height: 1.25; color: #042768; margin: 0 0 6px; font-weight: 700; }
.tb-sub { font-size: 17px; color: #042768; margin: 30px 0 6px; font-weight: 700; }
.tb-hint { font-size: 14px; color: #6E7681; margin: 0 0 18px; line-height: 1.5; }

/* ---- choice cards ------------------------------------------------------ */
.tb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 11px; margin-bottom: 4px; }
.tb-card { position: relative; display: block; cursor: pointer; background: #fff;
  border: 2px solid #dfe2e6; border-radius: 5px; padding: 15px 16px; transition: border-color .15s, box-shadow .15s; }
.tb-card:hover { border-color: #042768; box-shadow: 0 3px 12px -4px rgba(4,39,104,.3); }
.tb-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.tb-card-t { display: block; font-weight: 700; font-size: 15.5px; color: #1a1d21; line-height: 1.3; }
.tb-card-d { display: block; font-size: 13px; color: #6E7681; margin-top: 4px; line-height: 1.45; }
.tb-card input:checked ~ .tb-card-t { color: #042768; }
.tb-card:has(input:checked) { border-color: #042768; background: #f2f6fd; box-shadow: inset 0 0 0 1px #042768; }
.tb-card input:focus-visible ~ .tb-card-t { outline: 2px solid #042768; outline-offset: 3px; }
.tb-cards.tb-bad .tb-card { border-color: #c0392b; }

/* ---- fields ------------------------------------------------------------ */
.tb-field { margin-bottom: 16px; }
.tb-field label { display: block; font-size: 13.5px; font-weight: 700; color: #1a1d21; margin-bottom: 5px; }
.tb-opt { font-weight: 400; color: #8a9099; font-size: 12.5px; }
.tb-field input, .tb-field select, .tb-field textarea {
  width: 100%; padding: 12px 13px; border: 2px solid #dfe2e6; border-radius: 5px;
  font-size: 15.5px; font-family: inherit; color: #1a1d21; background: #fff; }
.tb-field input:focus, .tb-field select:focus, .tb-field textarea:focus {
  outline: none; border-color: #042768; }
.tb-field .tb-bad, .tb-field input.tb-bad, .tb-field select.tb-bad, .tb-field textarea.tb-bad { border-color: #c0392b; }
.tb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .tb-grid2 { grid-template-columns: 1fr; gap: 0; } }

/* ---- honeypot: off-screen, not display:none (bots skip display:none) ---- */
.tb-hp { position: absolute !important; left: -9999px !important; top: -9999px !important;
  width: 1px; height: 1px; overflow: hidden; }

/* ---- nav / buttons ----------------------------------------------------- */
.tb-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; }
.tb-btn { display: inline-block; border: 0; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 700; letter-spacing: .02em; padding: 14px 30px;
  border-radius: 4px; background: #042768; color: #fff; transition: background .15s; }
.tb-btn:hover { background: #063a96; }
.tb-btn.ghost { background: none; color: #6E7681; padding-left: 4px; padding-right: 4px; }
.tb-btn.ghost:hover { color: #042768; background: none; text-decoration: underline; }
.tb-btn.go { background: #F4BC16; color: #1a1d21; font-size: 16.5px; padding: 16px 34px; }
.tb-btn.go:hover { background: #ffc927; }
.tb-btn:focus-visible { outline: 2px solid #042768; outline-offset: 3px; }

.tb-reassure { text-align: center; font-size: 14px; color: #6E7681; margin: 18px 0 0; }
.tb-reassure a { color: #042768; font-weight: 700; }
.tb-error { background: #fdecea; border-left: 4px solid #c0392b; color: #7d241a;
  padding: 13px 16px; border-radius: 4px; margin-bottom: 22px; font-size: 14.5px; }
.cf-turnstile { margin: 18px 0 4px; }

/* ==========================================================================
   SITE-WIDE LEAD CAPTURE  (appears on every page)
   ========================================================================== */

/* ---- inline "start the funnel" block ----------------------------------- */
.tb-cta-block { background: #042768; color: #fff; padding: 40px 0; }
.tb-cta-inner { max-width: 1100px; margin: 0 auto; padding: 0 22px; text-align: center; }
.tb-cta-block h2 { color: #fff; font-size: 25px; margin: 0 0 8px; font-weight: 700; }
.tb-cta-block p.tb-cta-sub { color: #b9c6e0; font-size: 15.5px; margin: 0 0 22px; line-height: 1.55; }
.tb-cta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 10px; max-width: 900px; margin: 0 auto 20px; }
.tb-cta-grid a { display: block; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22);
  border-radius: 5px; padding: 15px 12px; color: #fff; text-decoration: none;
  font-weight: 700; font-size: 14.5px; line-height: 1.3; transition: background .15s, border-color .15s; }
.tb-cta-grid a:hover { background: #F4BC16; border-color: #F4BC16; color: #1a1d21; }
.tb-cta-foot { font-size: 14px; color: #b9c6e0; margin: 0; }
.tb-cta-foot a { color: #F4BC16; font-weight: 700; }

/* ---- sticky button ----------------------------------------------------- */
.tb-sticky { position: fixed; right: 0; top: 50%; transform: translateY(-50%) rotate(-90deg);
  transform-origin: 100% 50%; z-index: 9000; background: #F4BC16; color: #1a1d21;
  font-weight: 700; font-size: 14px; letter-spacing: .04em; padding: 12px 22px;
  border-radius: 4px 4px 0 0; text-decoration: none; box-shadow: 0 -2px 14px rgba(0,0,0,.22); }
.tb-sticky:hover { background: #ffc927; color: #1a1d21; }

/* On phones a side tab is unusable - become a bottom action bar instead,
   with Call and Estimate side by side. */
@media (max-width: 767px) {
  .tb-sticky { position: fixed; right: 0; left: 0; top: auto; bottom: 0;
    transform: none; border-radius: 0; text-align: center; padding: 15px 10px;
    font-size: 15.5px; box-shadow: 0 -3px 16px rgba(0,0,0,.25);
    width: 50%; left: 50%; }
  .tb-sticky-call { display: block; position: fixed; left: 0; bottom: 0; width: 50%;
    background: #042768; color: #fff; text-align: center; padding: 15px 10px;
    font-weight: 700; font-size: 15.5px; text-decoration: none; z-index: 9000;
    box-shadow: 0 -3px 16px rgba(0,0,0,.25); }
  .tb-sticky-call:hover { color: #fff; }
  body { padding-bottom: 54px; }
}
@media (min-width: 768px) { .tb-sticky-call { display: none; } }

/* ---- slim top bar ------------------------------------------------------ */
.tb-topbar { background: #042768; color: #fff; font-size: 13.5px; text-align: center; padding: 9px 14px; }
.tb-topbar a { color: #F4BC16; font-weight: 700; text-decoration: none; }
.tb-topbar a:hover { text-decoration: underline; }
.tb-topbar .tb-sep { color: rgba(255,255,255,.35); margin: 0 10px; }
@media (max-width: 520px) { .tb-topbar .tb-hide-sm { display: none; } }

/* ---- thank-you page ---------------------------------------------------- */
.tb-ty { max-width: 640px; margin: 0 auto; text-align: center; padding: 20px 0 40px; }
.tb-ty-tick { width: 62px; height: 62px; border-radius: 50%; background: #e1efe7;
  color: #2F6B4F; font-size: 33px; line-height: 62px; margin: 0 auto 20px; }
.tb-ty h1 { font-size: 29px; color: #042768; margin: 0 0 12px; }
.tb-ty p { font-size: 16px; color: #454D57; line-height: 1.65; margin: 0 0 14px; }
.tb-ty .tb-ty-next { background: #f3f4f6; border-radius: 5px; padding: 20px 24px;
  text-align: left; margin: 26px 0; }
.tb-ty .tb-ty-next h2 { font-size: 16px; color: #042768; margin: 0 0 10px; }
.tb-ty .tb-ty-next li { font-size: 14.5px; color: #454D57; margin-bottom: 7px; line-height: 1.55; }