
/* BuildBetterEstimates — 2026 visual/accessibility polish layer
   Loaded after the original page styles so the existing content remains intact. */
:root{
  --bbe-max:1240px;
  --bbe-radius:16px;
  --bbe-radius-sm:10px;
  --bbe-shadow:0 14px 40px rgba(18,26,34,.08);
  --bbe-shadow-hover:0 20px 55px rgba(18,26,34,.14);
}
html{font-size:16px}
body{overflow-x:hidden}
.wrap{max-width:var(--bbe-max)}
.skip-link{
  position:fixed;left:16px;top:10px;z-index:100;
  transform:translateY(-180%);background:#fff;color:#121A22;
  padding:10px 14px;border-radius:8px;font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.skip-link:focus{transform:none}
main{overflow:clip}
section{scroll-margin-top:92px}
::selection{background:rgba(224,98,26,.2);color:var(--ink)}
a,.btn,button{transition:color .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.btn{min-height:46px;padding:11px 18px;border-radius:9px;font-weight:700}
.btn.primary{box-shadow:0 7px 18px rgba(224,98,26,.18)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 11px 24px rgba(224,98,26,.28)}
.btn:not(.primary):hover{transform:translateY(-1px)}
.logo{letter-spacing:-.025em}
.logo .mark{filter:drop-shadow(0 2px 5px rgba(0,0,0,.16))}
header.top{backdrop-filter:saturate(140%) blur(10px)}
header.top:not(.solid){background:linear-gradient(180deg,rgba(18,26,34,.72),rgba(18,26,34,0))}
header.top.solid{background:rgba(18,26,34,.94)}
.hero{isolation:isolate}
.hero .shade{opacity:.72}
.hero .ctas{gap:12px}
.hero .ctas .btn{min-width:150px;text-align:center}
.card,.block,.post,.price,.service,.feature,.trust,.panel,.quote,.faq,.calc,.result,.sample{
  border-radius:var(--bbe-radius);
}
.card,.block,.post,.price,.service,.feature,.panel,.quote,.sample{
  box-shadow:var(--bbe-shadow);
}
.card:hover,.block:hover,.post:hover,.price:hover,.service:hover,.feature:hover,.sample:hover{
  box-shadow:var(--bbe-shadow-hover);
}
.card,.block,.post,.price,.service,.feature,.sample{transition:transform .2s ease,box-shadow .2s ease}
.card:hover,.post:hover,.service:hover,.feature:hover,.sample:hover{transform:translateY(-3px)}
.kicker{letter-spacing:.11em}
.lede{line-height:1.65}
h1,h2,h3{letter-spacing:-.015em}
h1{max-width:14ch}
h2{max-width:18ch}
table{border-collapse:separate;border-spacing:0}
th{font-weight:700}
td,th{vertical-align:top}
input,select,textarea{
  border-radius:9px!important;
  min-height:46px;
  border:1px solid var(--line)!important;
  background:var(--panel)!important;
  color:var(--ink)!important;
}
textarea{min-height:130px}
input:focus,select:focus,textarea:focus{
  outline:none!important;
  border-color:var(--orange)!important;
  box-shadow:0 0 0 3px rgba(224,98,26,.13)!important;
}
.qmsg{border-radius:10px}
.mbar{
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  backdrop-filter:blur(12px);
  background:rgba(18,26,34,.94);
}
.wa-float{box-shadow:0 12px 30px rgba(0,0,0,.2);transition:transform .2s ease,box-shadow .2s ease}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 16px 35px rgba(0,0,0,.25)}
.ddm{border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.links>a,.ddt{white-space:nowrap}
.links .btn.primary{color:#fff}
footer{border-top:1px solid rgba(255,255,255,.08)}
footer .copy{padding-bottom:max(18px,env(safe-area-inset-bottom,0px))}
img[loading="lazy"]{content-visibility:auto}
.ph img{transition:transform .45s ease}
.ph:hover img{transform:scale(1.025)}
/* Better mobile navigation */
@media (max-width:980px){
  .bar{height:68px}
  .logo{font-size:23px}
  .links{padding:18px!important}
  .links>a,.ddt{white-space:normal}
  .ddm{box-shadow:none}
  h1{max-width:17ch}
}
@media (max-width:720px){
  body{font-size:16px}
  .wrap{padding-left:18px;padding-right:18px}
  .hero{min-height:680px!important}
  .hero .ctas{display:grid;grid-template-columns:1fr;max-width:360px}
  .hero .ctas .btn{width:100%}
  .btn{min-height:48px}
  .grid,.cards,.services,.posts,.pricing,.features{grid-template-columns:1fr!important}
  .twocol,.split,.cols{grid-template-columns:1fr!important}
  .table-wrap,.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:620px}
  .wa-float{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
@media print{
  header.top,.wa-float,.mbar,.burger,.links,.no-print{display:none!important}
  body{background:#fff!important;color:#111!important}
  .wrap{max-width:none!important}
  a{color:inherit!important;text-decoration:none!important}
  .card,.block,.post,.price,.service,.feature,.panel,.quote,.sample{box-shadow:none!important}
}
