/* Pages customers open from a link (booking, estimate approval). Light and dark. */
:root { --bg:#f3f4f5; --surface:#fff; --ink:#182028; --muted:#5a6670; --line:#d6dce0; --soft:#eef1f3; --accent:#1565d8; --ok:#23774a; --bad:#b42318; color-scheme: light;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif; --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 var(--body); }
header { background:var(--surface); border-bottom:4px solid var(--accent); }
.in { max-width:720px; margin:0 auto; padding:18px max(16px, env(safe-area-inset-right,0px)) 18px max(16px, env(safe-area-inset-left,0px)); }
.co { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.co img { max-height:60px; max-width:200px; }
.co b { font-family:var(--display); font-size:24px; display:block; line-height:1.1; }
.co span { color:var(--muted); font-size:14px; }
h1 { font-family:var(--display); font-size:34px; line-height:1.05; margin:18px 0 6px; text-wrap:balance; }
h2 { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:22px 0 8px; }
.sub { color:var(--muted); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; }
.stack { display:flex; flex-direction:column; gap:12px; }
label.f { display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:700; color:var(--muted); }
input, select, textarea { font:16px var(--body); color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:11px 12px; width:100%; min-width:0; }
textarea { resize:vertical; }
input[type=date] { -webkit-appearance:none; appearance:none; min-height:46px; text-align:left; }
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.g3 { display:grid; grid-template-columns:2fr 1fr 1fr; gap:10px; }
@media (max-width:480px) { .g3 { grid-template-columns:1fr 1fr; } .g3 > :first-child { grid-column:1 / -1; } }
.pick { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); cursor:pointer; }
.pick input { width:22px; height:22px; margin:2px 0 0; flex:none; accent-color:var(--accent); }
.pick b { display:block; }
.pick small { color:var(--muted); font-size:14px; }
.pick:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:12px 20px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:700 16px var(--body); cursor:pointer; text-decoration:none; }
.btn.pri { background:var(--accent); border-color:var(--accent); color:#fff; width:100%; }
.btn:disabled { opacity:.6; }
.msg { text-align:center; padding:60px 16px; color:var(--muted); }
.err { color:var(--bad); font-weight:600; }
.ok { color:var(--ok); }
.done { text-align:center; padding:40px 16px; }
.done .big { font-size:48px; }
.hp { position:absolute; left:-9999px; }
footer { color:var(--muted); font-size:12.5px; text-align:center; padding:24px 16px 40px; }
table { width:100%; border-collapse:collapse; }
td, th { padding:9px 6px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
td.r, th.r { text-align:right; white-space:nowrap; }
.tot td { border:0; padding:4px 6px; }
.tot .grand td { font-size:18px; font-weight:800; border-top:2px solid var(--line); padding-top:8px; }
.opt { padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface); cursor:pointer; display:block; }
.opt:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; }
.opt input { accent-color:var(--accent); width:20px; height:20px; vertical-align:middle; margin-right:6px; }
.opt .price { float:right; font-weight:800; font-size:18px; }
.sig { width:100%; height:180px; border:1px dashed var(--muted); border-radius:12px; background:#fff; touch-action:none; display:block; }
.linkbtn { background:none; border:0; color:var(--accent); font:600 15px var(--body); cursor:pointer; padding:4px 0; }
.status { display:inline-block; padding:4px 10px; border-radius:999px; font-weight:700; font-size:14px; }
.status.okk { background:rgba(35,119,74,.12); color:var(--ok); }
.status.no { background:rgba(180,35,24,.1); color:var(--bad); }
/* quote form */
.seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: -4px; }
.pick.sm { padding: 8px 10px; justify-content: center; }
.pick.consent small { font-size: 12.5px; line-height: 1.45; }
[hidden] { display: none !important; }

.idesc-pub { font-size: 13px; margin-top: 2px; } .idesc-pub ol, .idesc-pub ul { margin: 2px 0; padding-left: 20px; }
/* appointment page (link in the confirmation text) */
.apcard { gap:0; padding:4px 16px; }
.aprow { display:grid; grid-template-columns:84px 1fr; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); }
.aprow:last-child { border-bottom:0; }
.aplab { color:var(--muted); font-size:14px; padding-top:1px; }
.apday { font-size:18px; }
.apsvc { display:flex; flex-direction:column; gap:6px; }
.apline { display:flex; justify-content:space-between; gap:12px; }
.apline span { white-space:nowrap; }
.aptot { border-top:1px solid var(--line); padding-top:8px; margin-top:2px; font-size:17px; }
.apact { margin-top:18px; }
.apgo { min-height:58px; font-size:18px; }
.apdone { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; background:#e7f5ec; border:1px solid #bfe3cc; border-radius:14px; padding:20px 16px; color:var(--ok); }
.apdone b { font-size:20px; } .apdone span { color:var(--ink); }
.apcheck { width:48px; height:48px; border-radius:50%; background:#2e9e5b; color:#fff; font:800 26px/48px var(--body); }
.apnote { color:var(--ink); }
.apcall { text-align:center; margin-top:16px; } .apcall a { color:var(--accent); font-weight:700; }
.card.expired { border-color:#f1c2bd; background:#fdf0ef; color:var(--ink); margin-top:20px; } .card.expired b { color:var(--bad); display:block; margin-bottom:4px; } .card.expired a { color:var(--accent); font-weight:700; }
/* "How did we do?" page */
.rvpage h1 { margin-top:24px; }
.rvthumbs { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
.rvthumb { display:flex; flex-direction:column; align-items:center; gap:6px; padding:26px 10px; border-radius:18px; border:2px solid var(--line); background:var(--surface); font-size:56px; line-height:1; cursor:pointer; }
.rvthumb span { font:700 17px var(--body); color:var(--ink); }
.rvthumb.up:hover, .rvthumb.up:focus-visible { border-color:#2e9e5b; background:#e7f5ec; }
.rvthumb.down:hover, .rvthumb.down:focus-visible { border-color:var(--bad); background:#fdf0ef; }
.rvsites { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.rvsite { justify-content:flex-start; gap:12px; width:100%; }
.rvico { width:30px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font:800 16px var(--body); color:#fff; background:#5a6670; flex:none; }
.rv-google { background:#4285f4; } .rv-nextdoor { background:#8ed500; color:#123; } .rv-yelp { background:#d32323; } .rv-facebook { background:#1877f2; } .rv-angi { background:#ff6153; } .rv-bbb { background:#005a78; } .rv-houzz { background:#4dbc15; } .rv-thumbtack { background:#009fd9; }
.rvback { text-align:center; margin-top:12px; }
/* report page */
.docfile { display:flex; gap:14px; align-items:center; margin-top:14px; }
.docfile b { display:block; } .docfile .sub { font-size:14px; word-break:break-all; }
.docico { width:48px; height:58px; border-radius:8px; background:#fdecea; color:#b42318; display:flex; align-items:center; justify-content:center; font:800 13px var(--body); flex:none; }
.docbtns { margin-top:18px; } .docbtns .btn { width:100%; }
.apdesc { font-size:14px; color:var(--muted); line-height:1.45; margin:2px 0 8px; } .apdesc ol, .apdesc ul { margin:4px 0; padding-left:20px; } .apdesc b, .apdesc strong { color:var(--ink); }
/* Pay online: deposit on an approved estimate, or an invoice's balance */
.paybox { margin-top: 16px; border: 2px solid var(--accent, #1565d8); }
.paybox .btn { width: 100%; }
.card.paid { margin-top: 16px; background: #eaf6ee; border-color: #b7dfc4; color: #1e5a33; }
table.tot tr.dep td { font-weight: 700; }
/* Proposal (estimate link with the company's proposal sections) */
.ptop { position:sticky; top:0; z-index:5; background:var(--accent); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.ptin { max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:10px; padding:8px max(12px, env(safe-area-inset-right,0px)) 8px max(12px, env(safe-area-inset-left,0px)); }
.ptt { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.ptt b { font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ptt span { font-size:12.5px; opacity:.9; }
.ptb { display:flex; gap:6px; align-items:center; flex:none; }
.btn.sm { min-height:38px; padding:6px 14px; font-size:14px; border-radius:10px; }
.ptop .btn { width:auto; }
.ptop .btn.pri { background:#fff; color:var(--accent); border-color:#fff; }
.ptop .btn:not(.pri) { background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.ptop .status { background:#fff; }
.coaddr { display:block; }
.pwrap { max-width:1100px; margin:0 auto; padding:0 max(16px, env(safe-area-inset-right,0px)) 0 max(16px, env(safe-area-inset-left,0px)); }
.pnav { display:flex; gap:6px; overflow-x:auto; padding:12px 0 4px; scrollbar-width:none; position:sticky; top:52px; z-index:4; background:var(--bg); }
.pnav::-webkit-scrollbar { display:none; }
.pnav a { flex:none; padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none; font-size:14px; font-weight:600; white-space:nowrap; }
.pnav a.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.pmain { min-width:0; padding-bottom:10px; }
.psec { scroll-margin-top:110px; }
.ph { font-family:var(--display); font-size:26px; text-transform:none; letter-spacing:0; color:var(--ink); margin:26px 0 10px; }
.prich { line-height:1.6; } .prich p { margin:0 0 12px; } .prich p:last-child { margin-bottom:0; } .prich a { color:var(--accent); font-weight:600; }
.prich ol, .prich ul { padding-left:22px; }
.pimg { display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--line); margin-top:12px; background:#fff; }
.pdoc { display:flex; gap:12px; align-items:center; margin-top:12px; padding:10px; border:1px solid var(--line); border-radius:12px; color:var(--ink); text-decoration:none; }
.pdoc b { display:block; } .pdoc .sub { font-size:13px; }
.pfor { display:grid; grid-template-columns:1fr; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:12px; }
.pfor .lab { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }
@media (min-width:640px) { .pfor { grid-template-columns:1fr 1fr 1fr; } }
.agree { display:flex; gap:10px; align-items:flex-start; font-weight:600; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--soft); cursor:pointer; }
.agree input { width:22px; height:22px; margin:1px 0 0; flex:none; accent-color:var(--accent); }
.agree a { color:var(--accent); }
.small { font-size:13px; }
@media (min-width:900px) {
  .pwrap { display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:start; }
  .pnav { flex-direction:column; overflow:visible; top:70px; padding:20px 0; background:transparent; }
  .pnav a { border-radius:10px; white-space:normal; }
  .psec { scroll-margin-top:70px; }
}
@media print {
  .ptop .ptb, .pnav, #sign .linkbtn, #ok, #no, .agree input { display:none !important; }
  .ptop { position:static; background:none; color:#000; box-shadow:none; }
  body { background:#fff; } .card { break-inside:avoid; } .pwrap { display:block; }
  .pimg { max-height:9in; object-fit:contain; }
}
.co.pwide { max-width:1100px; }
.pprint2 { text-align:center; margin:22px 0 0; }
@media (max-width:599px) { .ptop .pprint { display:none; } }
@media print { .pprint2 { display:none; } }
@media print { .psec > .card, #sign { break-inside:auto; } .ph { break-after:avoid; } .pimg, .pdoc, .pfor, tr { break-inside:avoid; } }