/* The quote pages: three questions, the price, and the price check. Loaded only on those pages,
   on top of style.css, which stays the reference file byte for byte. Colours and the string
   lights are from docs/brand_kit_festive.html: night #14213d, prairie #1f4d3a, green #4fa36f,
   amber #e6a13c, cream #f7f3ea. Phone first: one column, and every choice a full size target. */
.quote{background:#f7f3ea}
.quote-in{max-width:640px;display:flex;flex-direction:column;gap:24px}
.quote-head{display:flex;flex-direction:column;gap:12px}
.quote-head h1{font-size:clamp(32px,6vw,48px)}
.quote-card{background:#fff;border:1px solid #e2dccd;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:18px}
.garland{display:block;width:100%;height:auto}
.quote-card>.garland,.hero-card>.garland{margin:-12px 0 -6px}
.quote-found{font-size:18px;font-weight:600;color:#14213d}
.quote .field .hint,.quote .taps .hint{font-size:15px;color:#4a4a46}
.quote .field input[type=file]{min-height:56px;padding:14px 12px;border-style:dashed;font-size:16px}

.taps{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.taps legend{padding:0;font-size:18px;font-weight:800;color:#14213d;letter-spacing:-0.01em}
.tap-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tap{position:relative;display:flex}
.tap input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tap span{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;min-height:64px;padding:10px 12px;border:2px solid #c9c5bb;border-radius:10px;font-weight:800;font-size:18px;color:#14213d;background:#fff}
.tap input:checked+span{border-color:#1f4d3a;background:#1f4d3a;color:#fff}
.tap input:focus-visible+span{outline:3px solid #1f4d3a;outline-offset:2px}
@media (max-width:520px){.tap-row-3{grid-template-columns:1fr}}
@media (min-width:521px){.tap-row-3{grid-template-columns:repeat(3,1fr)}}

/* the price: night blue card, amber number */
.quote .price-box{background:#14213d;color:#fff;border-radius:12px;padding:28px;margin:20px 0 0;overflow:hidden}
.quote .price-box .garland{margin:-28px -28px 0;width:calc(100% + 56px)}
.quote .price-box .eyebrow{color:#e6a13c}
.quote .price-box b{font-size:clamp(44px,9vw,68px);font-weight:800;letter-spacing:-0.03em;line-height:1;color:#e6a13c}
.quote .price-box .muted{color:#d7dcea;font-size:17px}
.quote-card .price-box{margin:0}
.adjust{margin-top:14px;font-size:16px}
.adjust summary{cursor:pointer;color:#1f4d3a;font-weight:700;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.adjust-form{display:flex;flex-direction:column;gap:12px;margin-top:8px;max-width:360px}
.quote-note{margin:14px 0 22px;font-size:16px;color:#4a4a46;max-width:52ch}
.quote .checklist{margin-top:8px}

/* the Book button: the green accent */
.quote .btn-book{background:#1f4d3a;color:#fff}
.quote .btn-book:hover{background:#143427;color:#fff}
@media (max-width:960px){.quote .hero-card{margin-bottom:0}}
/* Ticket 38: the small box that keeps the price */
.sent-line{margin:12px 0 0;font-size:16px}
[data-fix] .btn{margin-top:8px;display:block}
.price-box .follow-up{color:#1f4d3a}
/* Ticket 40: the track choice on the town page is two taps, and a tap may carry one small line */
.tap span{flex-direction:column;gap:2px}
.tap-note{display:block;font-size:12px;font-weight:600;line-height:1.3;color:#4a4a46}
.tap input:checked+span .tap-note{color:#fff}
.hero-card .taps legend{font-size:16px}
.hero-card .tap span{min-height:56px;font-size:17px}
/* Ticket 60: the three permanent price cards, and the optional Text me my price field */
.quote .levels{display:grid;gap:10px;margin:12px 0 4px}
.quote .level{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"dot name price" "dot feet price";align-items:center;column-gap:12px;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.18);border-radius:12px;padding:12px 14px;cursor:pointer}
.quote .level input{grid-area:dot;width:20px;height:20px;accent-color:#e6a13c;margin:0}
.quote .level-name{grid-area:name;font-weight:700;color:#fff;font-size:17px}
.quote .level-feet{grid-area:feet;color:#d7dcea;font-size:15px}
.quote .level-price{grid-area:price;text-align:right;white-space:nowrap}
.quote .price-box .level b{font-size:26px;letter-spacing:-0.01em}
.quote .level .was{display:block;font-size:14px;color:#d7dcea}
.quote .level:has(input:checked){border-color:#e6a13c;background:rgba(230,161,60,.12)}
.quote .your-pick{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#14213d;background:#e6a13c;border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:2px}
.quote .text-me{margin:16px 0 0}
.quote .text-me .text-me-fine{font-size:14px;color:#4a4a46}

/* Ticket 66: the payment block, the warranty and the charges box on the final price page */
.quote-card .half-down p, .quote-card .warranty p { margin: 4px 0 0; }
.quote-card .getting { margin: 0 0 8px; }
.quote-card .agree { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.4; margin: 8px 0 12px; }
.quote-card .agree input { width: 22px; height: 22px; margin-top: 2px; flex: none; }

/* Ticket 66d: a picture of this job at the top of its final price page, labeled, full width on a phone */
.job-picture { position: relative; margin: 0 0 20px; }
.job-picture img { display: block; width: 100%; height: auto; border-radius: 12px; }
.job-picture-label { position: absolute; top: 10px; left: 10px; background: rgba(20, 33, 61, .85); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; padding: 6px 10px; border-radius: 6px; }
@media (max-width: 600px) {
  .job-picture { width: 100vw; margin-left: calc(50% - 50vw); }
  .job-picture img { border-radius: 0; }
  .job-picture-label { left: 16px; }
}

/* Ticket 67: the agreement above the box, and the approval the same link shows after */
.quote-card .agreement p { margin: 4px 0 0; }
.approved-box { margin-bottom: 20px; }
.approved-box h1 { margin: 0 0 8px; }
.approved-box p { margin: 6px 0 0; }

/* Ticket R1: the referral line under the heading, the offer pick, the regular price on a final price page */
.ref-line{font-weight:700;color:#e6a13c;margin:4px 0 0}
.offer-pick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.offer-pick p{flex-basis:100%;margin:0}
.offer-pick .btn{white-space:normal;text-align:left;min-height:48px}
.price-box .regular{display:block;font-size:16px}