/* ============================================================
   Hoover Buildings — Custom Quote Landing Page (Google Ads)
   2-Step Interactive Quote Estimator.
   Aliased to the homepage's own brand tokens (css/style.css --red/
   --gold/--dark) so this page matches the rest of the site exactly.
   ============================================================ */

:root{
  --qe-red:var(--red);
  --qe-red-dark:var(--red-dark);
  --qe-gold:var(--gold);
  --qe-charcoal:var(--dark);
}

body{background:var(--white)}

/* -------- header: logo / centered BBB badge / call CTA, no nav --------
   3-column grid (1fr auto 1fr) keeps the center BBB badge perfectly centered
   regardless of how wide the logo or phone-CTA column is. */
.qe-header{background:#fff;position:sticky;top:0;z-index:60;box-shadow:0 1px 0 var(--gray-100)}
.qe-header-inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  min-height:96px;padding-top:8px;padding-bottom:8px;
}
.qe-header-logo{justify-self:start}
.qe-header .logo-img{height:62px;width:auto;display:block} /* +29% over the previous 48px */

.qe-header-bbb{justify-self:center}
.qe-header-phone{justify-self:end}

.qe-header-call{
  display:flex;align-items:center;gap:12px;background:var(--qe-red);color:#fff;
  padding:14px 30px;border-radius:999px;box-shadow:0 8px 20px rgba(227,30,36,.32);
  transition:filter .15s ease,transform .15s ease;
}
.qe-header-call:hover{filter:brightness(1.06)}
.qe-header-call:active{transform:translateY(1px)}
.qe-header-call .icon{width:22px;height:22px;flex-shrink:0}
.qe-header-call-text{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.25}
.qe-header-call-text strong{font-size:1.18rem;font-weight:800}
.qe-header-call-text small{font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.92}

/* -------- BBB A+ badge: the real BBB Accredited Business / A+ Rating
   seal (images/bbb.png), used as-is, no card/border around it. Sized to
   match the enlarged header (roughly level with the 62px logo / 118px
   header height). -------- */
.bbb-badge-link{display:flex;align-items:center;transition:transform .15s ease}
.bbb-badge-link:hover{transform:translateY(-1px)}
.bbb-seal{height:72px;width:auto;display:block}

/* -------- hero -------- */
.qe-hero{
  position:relative;color:#fff;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(8,9,11,.85) 0%,rgba(8,9,11,.55) 45%,rgba(8,9,11,.72) 100%),
    url('../images/100_0836-scaled.jpg') center / cover no-repeat;
}
.qe-hero-stack{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:52px;padding-bottom:60px}

.qe-hero-copy{max-width:1320px;margin-bottom:32px}
.qe-hero-copy h1{
  font-size:clamp(2rem,4.2vw,3.4rem);font-weight:800;line-height:1.2;margin-bottom:16px;
  text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance;
}
.qe-hero-copy h1 .accent{color:var(--qe-gold)}
.qe-hero-copy p.lead{color:#dcdde1;font-size:1rem;line-height:1.6}
.qe-hero-copy p.lead .accent{color:var(--qe-gold);font-weight:700}

/* -------- estimator card column -------- */
.qe-card-col{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;max-width:620px}
.qe-card{background:#fff;color:var(--ink);border-radius:18px;padding:26px 26px 24px;box-shadow:var(--shadow-lg);width:100%;text-align:left}

.qe-card-title{font-size:1.35rem;font-weight:800;color:var(--ink);margin-bottom:14px;text-transform:uppercase;text-align:center}

/* -------- progress bar: charcoal track, red fill, label overlaid -------- */
.qe-progress-bar{
  position:relative;height:38px;border-radius:8px;overflow:hidden;
  background:var(--qe-charcoal);margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;
}
.qe-progress-fill{position:absolute;inset:0;width:0;background:var(--qe-red);transition:width .4s ease}
.qe-progress-label{
  position:relative;z-index:1;color:#fff;
  font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}

/* -------- error banner -------- */
.qe-error{display:none;background:#fdecec;color:var(--qe-red-dark);border:1px solid #f6c6c8;border-radius:8px;padding:10px 14px;font-size:.83rem;font-weight:600;margin-bottom:16px}
.qe-error.show{display:block}

/* -------- steps -------- */
.qe-step{display:none}
.qe-step.is-active{display:block}

.qe-label{display:block;font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:12px}

/* -------- Q1: building-type radio cards -------- */
.qe-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.qe-type-card{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:14px 6px;border:1.5px solid var(--gray-100);border-radius:10px;background:var(--gray-50);
  cursor:pointer;transition:border-color .15s ease,background .15s ease;text-align:center;
}
.qe-type-card:hover{border-color:var(--gray-300)}
.qe-type-card input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.qe-type-icon{width:24px;height:24px;object-fit:contain}
.qe-type-card span{font-size:.78rem;font-weight:700;color:var(--gray-700)}

.qe-type-card:has(input:checked),
.qe-type-card.is-active{
  border-color:var(--qe-red);background:#fdecec;
}
.qe-type-card:has(input:checked) span,
.qe-type-card.is-active span{color:var(--qe-red-dark)}
.qe-type-card input:focus-visible ~ .qe-type-icon{outline:2px solid var(--qe-red);outline-offset:3px;border-radius:4px}

/* -------- inputs -------- */
.qe-field{margin-bottom:16px}
.qe-field label{display:block;font-size:.78rem;font-weight:700;color:var(--gray-700);margin-bottom:7px}
.qe-field label .req{color:var(--qe-red)}
.qe-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qe-row .qe-field{margin-bottom:16px}

.qe-input{
  width:100%;border:1.5px solid var(--gray-100);background:var(--gray-50);border-radius:10px;
  padding:13px 14px;font-size:.9rem;color:var(--ink);font-family:inherit;
  transition:border-color .15s ease,background .15s ease;
}
.qe-input:focus{outline:none;border-color:var(--qe-red);background:#fff}
.qe-input::placeholder{color:var(--gray-500)}
select.qe-input{
  cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23767981' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:32px;
}

/* zip field sits directly below the type grid, before the label margin resets */
#qeZip{margin-bottom:22px}

/* -------- CTA + micro-trust -------- */
.qe-cta{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 20px;border-radius:999px;border:none;
  background:var(--qe-red);color:#fff;font-weight:800;font-size:.92rem;font-family:inherit;
  text-transform:uppercase;letter-spacing:.02em;
  box-shadow:0 10px 26px rgba(227,30,36,.32);cursor:pointer;
  transition:filter .15s ease,transform .15s ease;
}
.qe-cta:hover{filter:brightness(1.06)}
.qe-cta:active{transform:translateY(1px)}
.qe-cta:disabled{opacity:.7;cursor:not-allowed}

.qe-microtrust{text-align:center;font-size:.76rem;color:var(--gray-500);margin-top:14px}

.qe-back{
  display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
  font-size:.82rem;font-weight:700;color:var(--gray-500);font-family:inherit;padding:0;margin-bottom:16px;
}
.qe-back:hover{color:var(--qe-red)}

.qe-consent{display:block;font-size:.72rem;color:var(--gray-500);line-height:1.5;margin:2px 0 18px}

/* -------- trust bar: white section directly beneath the hero -------- */
.qe-trust-section{background:var(--white);border-bottom:1px solid var(--gray-100)}
.qe-trust-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:14px 0;
}
.qe-trust-item{
  display:flex;align-items:center;gap:10px;justify-content:center;
  padding:0 20px;text-align:left;
  border-left:1px solid var(--gray-100);
}
.qe-trust-item:first-child{border-left:none}
.qe-trust-icon{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(180deg,#fdecec,#fbdadb);
}
.qe-trust-icon .icon{width:16px;height:16px;color:var(--qe-red);flex-shrink:0}
.qe-trust-icon .icon.icon-fill{fill:currentColor;color:var(--qe-gold)}
.qe-trust-text{display:flex;flex-direction:column;line-height:1.3}
.qe-trust-text strong{font-size:.82rem;font-weight:800;color:var(--ink);white-space:nowrap}
.qe-trust-text small{font-size:.68rem;font-weight:600;color:var(--gray-500)}

.honeypot-field{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;width:0;pointer-events:none}

/* -------- footer -------- */
.lp-footer{background:#0f1012;color:#77787e;padding:20px 0}
.lp-footer .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;font-size:.78rem;text-align:center}

/* -------- sticky mobile call bar (<768px) -------- */
.qe-mobile-call-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  align-items:center;justify-content:center;gap:12px;
  background:var(--qe-red);color:#fff;padding:12px 16px;
  box-shadow:0 -6px 20px rgba(0,0,0,.25);
}
.qe-mobile-call-bar .icon{width:20px;height:20px;flex-shrink:0}
.qe-mobile-call-bar span{display:flex;flex-direction:column;line-height:1.2}
.qe-mobile-call-bar strong{font-size:1rem;font-weight:800}
.qe-mobile-call-bar small{font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;opacity:.92}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:767px){
  /* mobile header: logo top-left + compact BBB badge top-right only —
     the phone CTA drops out of the header entirely in favor of the
     sticky bottom call bar below. */
  .qe-header-inner{display:flex;justify-content:space-between;min-height:auto;padding-top:12px;padding-bottom:12px}
  .qe-header .logo-img{height:48px}
  .qe-header-phone{display:none}

  .bbb-seal{height:56px}

  .qe-mobile-call-bar{display:flex}
  body{padding-bottom:70px} /* keep content clear of the sticky bottom bar */

  .qe-trust-grid{grid-template-columns:1fr 1fr;gap:10px 0;padding:12px 0}
  .qe-trust-item{border-left:none;justify-content:flex-start}
  .qe-trust-item:nth-child(odd){border-right:1px solid var(--gray-100)}
}
@media (max-width:560px){
  .qe-type-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .qe-header .logo-img{height:42px}
  .bbb-seal{height:50px}

  .qe-card{padding:22px 18px 20px}
  .qe-row{grid-template-columns:1fr}
  .qe-row .qe-field:first-child{margin-bottom:16px}
  .qe-type-grid{gap:8px}

  .qe-trust-grid{grid-template-columns:1fr;padding:6px 0}
  .qe-trust-item{border-right:none !important;border-left:none;padding:8px;border-bottom:1px solid var(--gray-100)}
  .qe-trust-item:last-child{border-bottom:none}
  .qe-trust-text{text-align:center}
  .qe-trust-text strong{white-space:normal}
}