/* The "big jobs" pages (/piano-moving/, /hot-tub-removal/, /mobile-home-moving/ ...).
   Loaded AFTER town.css, which supplies the header, type, tables and footer. Kept as its
   own file so changing these pages never forces a new town.css version across the 600+
   town and service pages. */

:root{ --ok:#12805C; --ok-soft:#F0FBF6; --ok-line:#BFE6D5; --err:#B3261E; --err-soft:#FDF3F2;
       --err-line:#F2CFCB; --warn-soft:#FFF8EC; --warn-line:#F3DCB0; --orange-soft:#FFF3EB }

/* Every tap target on these pages is at least 44px tall. */
.cta{min-height:44px}
.near a{min-height:44px; display:inline-flex; align-items:center}
.crumb a{display:inline-flex; align-items:center; min-height:44px}
.bar .ph{display:inline-flex; align-items:center; min-height:44px}
.bar .logo{display:flex; align-items:center; min-height:44px}
footer a{display:inline-flex; align-items:center; min-height:44px}

.lede strong{color:var(--orange-dk)}
.cta.ghost{background:#fff; color:var(--ink); border:1.5px solid var(--line)}
.cta.ghost:hover{background:var(--paper); border-color:#CFD4DC}

/* Plain-language callouts: what we do / what we don't. */
.box{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin:18px 0}
.box h2,.box h3{margin-top:4px}
.box.key{border-left:5px solid var(--orange)}
.box.ok{background:var(--ok-soft); border-color:var(--ok-line)}
.box.warn{background:var(--warn-soft); border-color:var(--warn-line)}
.box ul{margin:6px 0; padding-left:22px}
.box li{margin:4px 0}

/* Numbered steps. */
.steps{counter-reset:s; list-style:none; padding:0; margin:12px 0}
.steps li{position:relative; padding:4px 0 10px 44px}
.steps li::before{counter-increment:s; content:counter(s); position:absolute; left:0; top:2px;
  width:30px; height:30px; border-radius:50%; background:var(--orange-soft); color:var(--orange-dk);
  display:grid; place-items:center; font-weight:800}

/* Fact tables (escorts, cost guides). Same look as the price table, never wider than the
   screen: long cells wrap instead of pushing the page sideways. */
.facts{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line);
       border-radius:12px; overflow:hidden; margin:10px 0}
.facts th,.facts td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left;
                    vertical-align:top; overflow-wrap:anywhere}
.facts th{font-size:13px; color:var(--muted); font-weight:600}
.facts tr:last-child td{border-bottom:0}
.facts td.p{font-weight:700; color:var(--orange-dk); white-space:nowrap}
@media(max-width:520px){
  .facts thead{display:none}
  .facts tr{display:block; border-bottom:1px solid var(--line); padding:6px 0}
  .facts tr:last-child{border-bottom:0}
  .facts td{display:block; border-bottom:0; padding:3px 12px}
}

.cite{white-space:nowrap}
.sources{padding-left:20px; font-size:14px; color:var(--muted)}
.sources li{margin:6px 0}
.sources a{color:var(--ink)}
.sources .kind{font-weight:600}

/* ------------------------------------------------------------------ forms -- */
.req{background:#fff; border:1.5px solid var(--orange); border-radius:16px; padding:6px 18px 18px; margin:28px 0}
.req h2{margin-top:14px}
.lead .q{margin:16px 0}
.lead .lbl,.lead label{display:block; font-weight:650; font-size:15px; margin:0 0 6px}
.lead .hint{color:var(--muted); font-size:14px; margin:-2px 0 8px; font-weight:400}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font:inherit; font-size:15px; min-height:44px; padding:9px 14px; border-radius:12px;
      border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; text-align:left}
.chip:hover{border-color:#CFD4DC}
.chip[aria-pressed="true"]{border-color:var(--orange); background:var(--orange-soft);
      box-shadow:0 0 0 3px rgba(242,111,34,.12); font-weight:650}
.lead .row{display:flex; gap:12px; flex-wrap:wrap}
.lead .field{flex:1 1 200px; margin:10px 0; min-width:0}
.lead .field.narrow{flex:0 1 150px}
.lead input[type=text],.lead input[type=tel],.lead input[type=email],.lead textarea{
  font:inherit; width:100%; min-height:44px; padding:11px 13px; border:1.5px solid var(--line);
  border-radius:12px; background:#fff; color:var(--ink)}
.lead textarea{min-height:96px; resize:vertical}
.lead input:focus,.lead textarea:focus{border-color:var(--orange); outline:none;
  box-shadow:0 0 0 3px rgba(242,111,34,.13)}
.lead [aria-invalid="true"]{border-color:var(--err)}
.chips[aria-invalid="true"] .chip{border-color:var(--err-line)}
.lead .chk{display:flex; gap:10px; align-items:center; min-height:44px; font-weight:400; font-size:15px; margin:4px 0}
.lead .chk input{width:20px; height:20px; accent-color:var(--orange)}
.lead button[type=submit]{border:0; cursor:pointer; font:inherit; font-weight:700; font-size:17px}
.lead button[disabled]{opacity:.55; cursor:default}
.btn2{font:inherit; font-weight:650; min-height:44px; padding:9px 16px; border-radius:12px;
      border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer}
.formerr:empty{display:none}
.formerr{background:var(--err-soft); border:1px solid var(--err-line); color:var(--err);
         border-radius:12px; padding:11px 13px; margin:12px 0; font-size:15px}
.done{background:var(--ok-soft); border:1px solid var(--ok-line); border-radius:12px; padding:12px 16px; margin:14px 0}
.done h3{margin:4px 0 6px}
/* The honeypot: off-screen, not display:none, so simple bots still see and fill it. */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

.thumbs{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.thumb{position:relative; width:84px; height:84px; border-radius:10px; overflow:hidden; border:1px solid var(--line)}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb button{position:absolute; top:3px; right:3px; width:30px; height:30px; border:0; border-radius:50%;
  background:rgba(0,0,0,.65); color:#fff; font-size:17px; line-height:1; cursor:pointer}

/* Other big jobs, as a compact list. */
.jobs{list-style:none; padding:0; margin:10px 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px}
.jobs a{display:block; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 14px;
        text-decoration:none; color:var(--ink); min-height:44px}
.jobs a:hover{border-color:var(--orange)}
.jobs small{display:block; color:var(--muted); font-size:13px}