/* logo-ref-fix-1: top:3px measured from HEADER TOP (not mid-header box) — same as homepage */
html .a1-site-wrap {
  --header-h: 4.25rem !important;
  --a1-header-h: 4.25rem !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}
html .a1-site-header {
  height: 4.25rem !important;
  overflow: visible !important;
  position: relative !important;
}
html .a1-header-inner {
  height: 4.25rem !important;
  min-height: 4.25rem !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important; /* nav/phone stay vertically centered */
  position: relative !important;
}
/* Logo COLUMN: full header height, top-aligned — absolute top:3px is from header top */
html .a1-logo,
html body .a1-site-wrap .a1-logo,
html .a1-header-left .a1-logo {
  display: block !important;
  position: relative !important;
  z-index: 110 !important;
  flex-shrink: 0 !important;
  align-self: flex-start !important; /* NOT center — this was the bug */
  width: 5.5rem !important;
  height: 4.25rem !important; /* full header bar height */
  min-height: 4.25rem !important;
  max-height: 4.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
html body .a1-site-wrap .a1-logo img,
html body .a1-logo img,
html .a1-header-left .a1-logo img {
  position: absolute !important;
  left: 0 !important;
  top: 3px !important; /* 3px down from TOP of header — same meaning as homepage */
  height: calc(4.25rem * 1.6) !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15)) !important;
}
@media (min-width: 768px) {
  html .a1-logo,
  html body .a1-site-wrap .a1-logo {
    width: 7rem !important;
  }
  html body .a1-site-wrap .a1-logo img,
  html body .a1-logo img {
    top: 3px !important;
    height: calc(4.25rem * 1.85) !important;
  }
}
/* Room under header for action buttons */
html:has(.a1-est-landing) .a1-est-landing {
  padding-top: 1.5rem !important;
  --a1-logo-hang: 1.5rem !important;
  background: transparent !important;
  background-image: none !important;
}
/*
 * Action buttons (#a1-your-estimate): always centered on the paper column.
 * Do not reserve sidebar offset here — that pushed 5 buttons (incl. Request Invoice) off-center.
 * Small top pad so the row clears the hanging logo without jumping when a 5th button appears.
 */
html:has(.a1-est-landing) #a1-your-estimate {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 1rem 1.15rem !important;
  width: min(1000px, calc(100vw - 2rem)) !important;
  max-width: min(1000px, calc(100vw - 2rem)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0.65rem !important; /* ~10px more clearance under logo hang */
  margin-bottom: 1.5rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  box-sizing: border-box !important;
  align-self: center !important;
}
/*
 * Equal button sizes — every tile same width (no pyramid from text length).
 * Same size before sign (Have Questions) and after (Request Invoice).
 */
html:has(.a1-est-landing) #a1-your-estimate > *,
html:has(.a1-est-landing) #a1-your-estimate > button,
html:has(.a1-est-landing) #a1-your-estimate > .a1-have-q-wrap,
html:has(.a1-est-landing) #a1-your-estimate button.a1-have-q-btn {
  flex: 0 0 180px !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
html:has(.a1-est-landing) #a1-your-estimate > * > button,
html:has(.a1-est-landing) #a1-your-estimate .a1-have-q-wrap > button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 639px) {
  /* Phone: two columns equal width */
  html:has(.a1-est-landing) #a1-your-estimate > *,
  html:has(.a1-est-landing) #a1-your-estimate > button,
  html:has(.a1-est-landing) #a1-your-estimate > .a1-have-q-wrap {
    flex: 0 0 calc(50% - 0.5rem) !important;
    width: calc(50% - 0.5rem) !important;
    min-width: 0 !important;
    max-width: calc(50% - 0.5rem) !important;
  }
}
@media (min-width: 1024px) {
  html:has(.a1-est-landing) #a1-your-estimate {
    width: min(1000px, calc(100vw - 240px)) !important;
    max-width: min(1000px, calc(100vw - 240px)) !important;
  }
  html:has(.a1-signed-view) #a1-your-estimate,
  html:has(.a1-est-landing):has(.a1-signed-view) #a1-your-estimate {
    width: min(1000px, calc(100vw - 2.5rem)) !important;
    max-width: min(1000px, calc(100vw - 2.5rem)) !important;
  }
}

/*
 * HERO — EXACT homepage geometry (measured from header). Logo rules ABOVE are locked.
 * Homepage: sticky header 4.25rem, then .hero min-height:min(88vh,780px),
 *           .hero-bg absolute inset 0, cover, center right. NO ±px.
 * Filling the whole viewport under the header changes cover crop and jumps the image.
 */
html:has(.a1-est-landing) body,
html:has(.a1-est-embed) body {
  background-color: #e8eef5 !important;
  background-image: none !important; /* image only on #a1-cust-bg */
}
html:has(.a1-est-landing) #root,
html:has(.a1-est-landing) #root > div,
html:has(.a1-est-landing) .a1-est-landing,
html:has(.a1-est-landing) .min-h-screen {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
html:not(:has(.a1-est-landing)):not(:has(.a1-est-embed)) body #a1-cust-bg {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}
html:not(:has(.a1-est-landing)):not(:has(.a1-est-embed)) body,
html:not(:has(.a1-est-landing)):not(:has(.a1-est-embed)) #root {
  background: #f8fafc !important;
  background-image: none !important;
  background-color: #f8fafc !important;
}
/* Same box as homepage .hero under the header */
html:has(.a1-est-landing) body #a1-cust-bg,
html:has(.a1-est-embed) body #a1-cust-bg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  top: 4.25rem !important; /* header bottom — measured from header top */
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: auto !important;
  height: min(88vh, 780px) !important; /* EXACT homepage .hero min-height */
  inset: auto !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-color: #e8eef5 !important;
  background-image:
    linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 255, 255, 0.45) 32%,
      rgba(255, 255, 255, 0.08) 55%,
      rgba(255, 255, 255, 0) 72%
    ),
    url("https://a1painters.com/images/live_846df441d539bd4760f47167deec302a.jpg?v=paper-stable-1") !important;
  background-size: cover !important;
  background-position: center right !important; /* EXACT homepage .hero-bg */
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

/* Why Choose top-right desktop */
@media (min-width: 1024px) {
  html:has(.a1-est-landing) .a1-est-sidebar,
  html:has(.a1-est-landing) [data-a1-est-sidebar="1"],
  html:has(.a1-est-landing) aside.a1-est-sidebar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    z-index: 80 !important;
    top: 6.5rem !important;
    right: 1.25rem !important;
    left: auto !important;
    bottom: auto !important;
    width: clamp(148px, 12.5vw, 190px) !important;
    max-width: 190px !important;
    max-height: calc(100vh - 7rem) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: auto !important;
    order: unset !important;
    transform: none !important;
  }
}

/* Desktop paper: full width once — no scale, no half↔full thrash */
@media (min-width: 1024px) {
  html:has(.a1-est-landing) #estimate-document,
  html:has(.a1-est-landing) #estimate-document.estimate-document,
  html:has(.a1-est-landing) .estimate-document,
  html:has(.a1-est-landing) #estimate-document[data-a1-desk-lock="1"] {
    transform: none !important;
    -webkit-transform: none !important;
    width: 100% !important;
    max-width: 1000px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    will-change: auto !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
  }
  html:has(.a1-est-landing) .w-full.overflow-x-auto:has(#estimate-document),
  html:has(.a1-est-landing) .w-full.overflow-x-auto[data-a1-desk-lock="1"] {
    transform: none !important;
    width: min(1000px, calc(100vw - 240px)) !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: visible !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* Have a Question hover */
@media (min-width: 768px) {
  html .a1-have-q-wrap:hover {
    transform: translateY(-4px) !important;
  }
  html .a1-have-q-wrap:hover .rounded-full,
  html .a1-have-q-wrap:hover [class*="rounded-full"],
  html #a1-your-estimate > button:hover .rounded-full,
  html #a1-your-estimate > button:hover [class*="rounded-full"] {
    transform: scale(1.1) !important;
  }
}

@media (min-width: 900px) {
  html body:not(.a1-has-est-back) .a1-nav-desktop {
    display: flex !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 0 !important;
    bottom: 0 !important;
    align-items: center !important;
    margin: 0 !important;
  }
}