:root { --navy:#0f2a4a; --orange:#fb4f14; --orange-dark:#b8360a; --navy-light:#3b5f8f; --orange-red:#cc3300; --paper:#f7f5f0; --ink:#1d2430; --line:#d8d2c6; }
* { box-sizing:border-box; }
/* The scrollbar keeps its place on every popup, so the brand bar and the popup do not shift sideways when a taller popup opens */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-y:scroll; }
img { max-width:100%; }
body { margin:0; overflow-wrap:break-word; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:#fff; color:var(--ink); line-height:1.5; }
.site-header { background:var(--navy); color:#fff; padding:18px 24px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; border-bottom:4px solid var(--orange); }
.wordmark { display:block; line-height:1.2; font-weight:900; letter-spacing:.02em; font-size:clamp(1.15rem,5.5vw,1.4rem); }
.wordmark span { color:var(--orange); }
.tagline { margin:0; font-weight:700; color:#fff; }
main { max-width:1180px; margin:0 auto; padding:clamp(12px,4vw,24px); }
.hero { text-align:center; max-width:820px; margin:clamp(12px,4vw,24px) auto clamp(20px,5vw,32px); }
.hero h1 { font-size:clamp(1.6rem,6vw,2.9rem); text-wrap:balance; line-height:1.15; margin:0 0 12px; color:var(--navy); }
.hero-sub { font-size:1.1rem; color:#4a5568; }
.response-promise { font-weight:800; font-size:1.15rem; color:var(--navy); margin:0 0 8px; }
.flow-jobs { border:0; padding:0; margin:0; display:grid; gap:8px; min-width:0; }
.flow-jobs label { display:flex; gap:8px; align-items:flex-start; padding:6px 8px; border-radius:8px; cursor:pointer; }
.button { border:2px solid var(--navy); border-radius:999px; padding:14px 24px; font-family:inherit; font-weight:900; cursor:pointer; font-size:1.2rem; background:var(--orange); color:#fff; box-shadow:inset 0 0 0 2px #fff, 0 4px 0 var(--orange-red); transition:transform .12s ease; }
.button:active { transform:translateY(2px); box-shadow:inset 0 0 0 2px #fff, 0 2px 0 var(--orange-red); }
.button-emergency { background:var(--orange); color:#fff; font-size:clamp(1.2rem,5.5vw,1.6rem); white-space:nowrap; padding:clamp(20px,6vw,28px) 12px; width:100%; box-shadow:inset 0 0 0 2px #fff, 0 8px 0 var(--orange-red); }
.button-emergency:active { transform:translateY(4px); box-shadow:inset 0 0 0 2px #fff, 0 4px 0 var(--orange-red); }
.button-submit { margin-top:16px; padding:16px 32px; }
.form-section { background:#fff; border:1px solid var(--line); border-radius:16px; padding:clamp(16px,4vw,28px); margin-top:clamp(16px,4vw,28px); scroll-margin-top:12px; }
.selected-summary { background:#fff7ed; border:1px solid #f5c99a; border-radius:12px; padding:14px 16px; margin-bottom:16px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid label { display:grid; gap:6px; font-weight:700; font-size:.9rem; }
.form-grid .wide { grid-column:1 / -1; }
.form-grid input, .form-grid textarea, .form-grid select { width:100%; padding:12px; border:1px solid var(--line); border-radius:10px; font:inherit; font-weight:400; background:#fff; color:var(--ink); }
.form-grid [hidden] { display:none; }
.form-grid .check-group { border:0; padding:0; margin:0; display:grid; gap:8px; min-width:0; }
.form-grid .check-group legend { font-weight:700; font-size:.9rem; padding:0; margin-bottom:8px; }
.form-grid .lane-option { display:flex; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; font-weight:400; font-size:1rem; transition:border-color .12s ease, background .12s ease; }
.form-grid .lane-option input[type="checkbox"] { width:20px; height:20px; padding:0; margin:0; flex:none; }
.form-grid .lane-option:has(input:checked) { border-color:var(--orange); background:#fff3ec; }
.form-grid .lane-option:has(input:disabled) { background:#f3f4f6; color:#8a93a0; cursor:not-allowed; }
.lane-text { display:grid; gap:2px; min-width:0; }
.lane-text strong { color:var(--navy); }
.lane-option:has(input:disabled) .lane-text strong { color:#8a93a0; }
.lane-text > span { font-size:.9rem; color:#4a5568; }
.lane-option:has(input:disabled) .lane-text > span { color:#8a93a0; }
.lane-tag { font-style:normal; font-size:.72rem; font-weight:700; color:#5b6675; background:#eef1f5; border-radius:999px; padding:2px 10px; margin-left:6px; white-space:nowrap; vertical-align:middle; }
.lane-note { margin:2px 0 0; font-size:.9rem; font-weight:700; color:var(--orange-dark); }
.emergency-number a { color:var(--navy); white-space:nowrap; }
a.wordmark { color:#fff; text-decoration:none; }
.site-footer a { color:#fff; font-weight:700; }
select:focus-visible { outline:3px solid var(--navy); outline-offset:2px; }
.consent { display:flex; gap:10px; align-items:flex-start; margin-top:16px; }
.confidence { background:#eef6ff; border-left:5px solid var(--navy); border-radius:8px; padding:12px 16px; margin:16px 0 0; color:var(--navy); }
.hint, .footnote { color:#5b6675; font-size:.95rem; }
.status { font-weight:700; color:var(--orange-dark); }
.status.is-ok { color:var(--navy); }
.status:empty { display:none; }
.status a { color:var(--navy); white-space:nowrap; }
.local-leads { margin-top:24px; border-top:1px solid var(--line); padding-top:16px; }
.site-footer { background:var(--navy); color:#dbe7f3; text-align:center; padding:32px 24px; margin-top:40px; }
.site-footer p { margin:6px 0 0; }
.footer-small { font-size:.85rem; opacity:.7; }
.flow-jobs label:hover { background:#fff3ec; }
input[type="checkbox"] { accent-color:var(--orange); width:18px; height:18px; flex:none; margin-top:3px; }
.button:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid var(--navy); outline-offset:2px; }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,3vw,18px); margin-top:clamp(16px,4vw,28px); }
.step { background:#fff; border:1px solid var(--line); border-radius:16px; padding:clamp(16px,4vw,22px); }
.step h3 { margin:10px 0 4px; color:var(--navy); }
.step p { margin:0; color:#4a5568; }
.step-num { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--orange); color:#fff; font-weight:900; }
.upload-title { margin:0; color:var(--navy); font-size:1.05rem; }
.optional { font-size:.75rem; font-weight:700; color:#5b6675; background:#eef1f5; border-radius:999px; padding:2px 10px; margin-left:6px; vertical-align:middle; }
.upload-help { margin:4px 0 10px; color:#4a5568; }
.form-grid .dropzone { display:grid; gap:4px; justify-items:center; text-align:center; padding:24px 16px; border:2px dashed var(--line); border-radius:10px; background:var(--paper); cursor:pointer; font-weight:400; font-size:.95rem; color:#4a5568; transition:border-color .12s ease, background .12s ease; }
.form-grid .dropzone strong { color:var(--navy); font-size:1.05rem; }
.form-grid .dropzone:hover, .form-grid .dropzone.is-dragover { border-color:var(--orange); background:#fff3ec; }
.form-grid .dropzone:focus-within { outline:3px solid var(--navy); outline-offset:2px; }
.form-grid .dropzone input { position:absolute; width:1px; height:1px; padding:0; border:0; opacity:0; }
.upload-list { list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; }
.upload-list:empty { display:none; }
.upload-item { position:relative; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }
.upload-thumb { display:grid; place-items:center; width:100%; height:84px; object-fit:cover; background:var(--navy); color:#fff; font-weight:800; font-size:.85rem; }
.upload-name { display:block; padding:6px 8px; font-size:.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.upload-remove { position:absolute; top:4px; right:4px; width:26px; height:26px; border:0; border-radius:50%; background:rgba(15,42,74,.85); color:#fff; font-weight:800; line-height:1; cursor:pointer; }
.upload-remove:hover { background:var(--orange); }
.upload-status { margin:8px 0 0; font-size:.9rem; font-weight:700; color:var(--orange-dark); }
.upload-status:empty { display:none; }
/* Tablets and narrow windows: steps stack */
@media (max-width:820px) {
  .steps { grid-template-columns:minmax(0,1fr); }
  .site-header { justify-content:center; text-align:center; padding:14px 16px; gap:4px; }
}
/* Phones */
@media (max-width:600px) {
  .form-grid { grid-template-columns:minmax(0,1fr); }
  .form-grid .wide { grid-column:auto; }
  .flow-jobs label { min-height:44px; align-items:center; }
  .flow-jobs label input[type="checkbox"] { margin-top:0; }
  .button { width:100%; min-height:48px; }
  .consent input[type="checkbox"] { width:22px; height:22px; }
  .hero-sub { margin:8px 0 0; }
  .upload-list { grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); }
  .upload-remove { width:32px; height:32px; }
}
/* Touch screens: no hover highlight that sticks after a tap */
@media (hover:none) {
  .flow-jobs label:hover { background:transparent; }
}
.button:disabled { opacity:.6; cursor:progress; }
/* Request popups: one dialog, one numbered step on screen at a time */
.flow { width:min(100%,460px); margin:clamp(4px,2vh,32px) auto 0; border:2px solid var(--navy); border-radius:16px; background:#fff; color:var(--ink); box-shadow:0 14px 40px rgba(15,42,74,.22); }
.flow-head { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--navy); color:#fff; padding:14px 16px; border-bottom:4px solid var(--orange); border-radius:14px 14px 0 0; }
.flow-head .wordmark { margin:0; outline:0; }
.flow-body { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin:0; padding:18px 16px 0; }
.flow-step { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.flow-step > * { margin-top:0; margin-bottom:0; }
.flow-row { display:flex; gap:10px; }
.flow-row input { flex:1; min-width:0; padding:12px; border:1px solid var(--line); border-radius:10px; font:inherit; font-size:1.1rem; background:#fff; color:var(--ink); }
.flow .flow-go { flex:none; width:auto; padding:12px 26px; }
.flow-option { display:grid; gap:6px; justify-items:center; text-align:center; }
.flow-option p { margin:0; font-size:.95rem; font-weight:700; color:var(--navy); }
.flow .flow-pick { width:min(100%,300px); margin-bottom:4px; padding:11px 20px; font-size:1.05rem; background:var(--navy); box-shadow:inset 0 0 0 2px #fff, 0 4px 0 var(--navy-light); }
.flow .flow-pick:active { box-shadow:inset 0 0 0 2px #fff, 0 2px 0 var(--navy-light); }
.flow .button-emergency { margin-bottom:8px; font-size:clamp(1.5rem,7vw,1.8rem); }
.flow-call .emergency-number { display:block; margin:6px 0 4px; }
.flow-call .emergency-number a { display:inline-block; padding:10px 26px; border:2px solid var(--navy); border-radius:999px; background:var(--orange); color:#fff; font-size:1.5rem; font-weight:900; line-height:1.2; text-decoration:none; box-shadow:inset 0 0 0 2px #fff, 0 4px 0 var(--orange-red); transition:transform .12s ease; }
.flow-call .emergency-number a:active { transform:translateY(2px); box-shadow:inset 0 0 0 2px #fff, 0 2px 0 var(--orange-red); }
.flow-call .emergency-number a:focus-visible { outline:3px solid var(--navy); outline-offset:2px; }
.flow-heading { margin:0 0 4px; font-size:2rem; font-weight:900; line-height:1.1; color:var(--navy); }
.flow-call { margin:0; text-align:center; font-weight:700; color:var(--navy); }
.flow-call em { font-size:1.25rem; }
.flow-numbered { margin:0; padding:0; list-style:none; display:grid; gap:12px; font-size:1.25rem; font-weight:800; line-height:1.3; color:var(--navy); }
.flow-numbered li { display:flex; align-items:center; gap:12px; }
.flow-numbered .step-num { flex:none; font-size:1rem; }
/* A step with an example under it: the number sits level with the first line, the example in plain text */
.flow-numbered .has-note { align-items:flex-start; }
.flow-numbered .step-note { display:block; margin-top:4px; font-size:1rem; font-weight:400; color:var(--ink); }
.flow-option + .flow-option { padding-top:18px; border-top:2px solid var(--line); }
.flow-jobs legend { padding:0; margin-bottom:4px; font-weight:800; color:var(--navy); }
.flow-more { justify-self:start; padding:10px 4px; border:0; background:transparent; color:var(--navy); font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; }
.flow-more:focus-visible { outline:3px solid var(--navy); outline-offset:2px; }
.selected-summary h3 { margin:0 0 6px; font-size:1rem; color:var(--navy); }
.selected-summary ul { margin:0; padding-left:20px; }
.flow-done { font-size:1.1rem; }
.flow-lead { font-size:1.1rem; font-weight:800; color:var(--navy); }
.flow-tagline { font-size:1.2rem; font-weight:800; color:var(--orange); }
/* The customer page is only the brand bar, the popup and the footer */
.flow-page { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
.flow-page .site-footer { margin-top:32px; }
.flow-page main { flex:1; width:100%; padding-top:clamp(6px,2vh,24px); }
.flow-page .form-section { max-width:460px; margin-left:auto; margin-right:auto; }
.footer-motto { font-size:1.75rem; font-weight:400; font-style:italic; color:#fff; }
/* Footer buttons: full-size heavy lettering so white reads on orange; 500px keeps the Plumber/Handyman line on one line on desktop */
.site-footer .button { display:inline-block; width:min(100%,500px); margin-top:6px; padding:10px 22px; font-weight:900; line-height:1.3; text-decoration:none; }
.site-footer .button em { white-space:nowrap; }
.site-footer .button:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.flow-foot { display:grid; gap:10px; margin:0 -16px; padding:12px 16px 16px; border-radius:0 0 14px 14px; background:#fff; }
.flow-foot.is-sticky { position:sticky; bottom:0; }
.flow-foot .status { margin:0; color:var(--orange-dark); }
.flow-foot .status:empty { display:none; }
.flow-nav { display:flex; align-items:center; gap:12px; }
.flow .flow-next { width:auto; margin-left:auto; padding:12px 28px; }
.flow .flow-back { width:auto; padding:12px 28px; }
.flow [hidden] { display:none; }
/* Pro page: Back to the customer page, sized like the Back button in the popups */
.page-nav { margin:0; }
.button.page-back { display:inline-block; width:auto; padding:12px 28px; line-height:normal; text-decoration:none; }
/* "Where is the job?": the landlord or tenant fields that open under the service address */
.role-extra { display:grid; gap:10px; }
.role-extra .consent { margin-top:0; }
/* The three "I am a ..." tick boxes: same size and left edge as the other tick boxes on the popup */
.tick-group { border:0; padding:0; margin:0; display:grid; gap:12px; min-width:0; }
.tick-group .consent { margin-top:0; }
/* Leak popup: "I can't shut it off!" turns the button into the phone number, pulsing with an orange glow */
.flow-call.is-urgent .emergency-number a { animation:call-pulse 1s ease-in-out infinite alternate; }
@keyframes call-pulse {
  from { box-shadow:inset 0 0 0 2px #fff, 0 4px 0 var(--orange-red), 0 0 6px 2px rgba(251,79,20,.35); }
  to { box-shadow:inset 0 0 0 2px #fff, 0 4px 0 var(--orange-red), 0 0 26px 12px rgba(251,79,20,.85); }
}
/* Visitors who ask their device for less motion get the glow without the pulse */
@media (prefers-reduced-motion:reduce) {
  .flow-call.is-urgent .emergency-number a { animation:none; box-shadow:inset 0 0 0 2px #fff, 0 4px 0 var(--orange-red), 0 0 18px 8px rgba(251,79,20,.7); }
}
/* Set by app.js while a block of fields slides open or shut */
.is-sliding { overflow:hidden; transition:height .22s ease, margin-top .22s ease; }
/* A field that takes focus, such as the one an error points at, stops clear of the Back/Next bar pinned to the bottom of the screen */
.flow input, .flow textarea, .flow select { scroll-margin-bottom:160px; }
/* State fields show capitals as they are typed; the example text keeps its own case */
input[name$="State"] { text-transform:uppercase; }
input[name$="State"]::placeholder { text-transform:none; }
/* Phones: Back and the last button slim down so its label fits beside Back, in two even lines at most */
@media (max-width:600px) {
  .flow .flow-back { padding:12px 20px; }
  .flow .flow-next { padding:12px 14px; text-wrap:balance; }
}
/* The narrowest phones: slightly smaller lettering on the two, for the same reason */
@media (max-width:350px) {
  .flow .flow-back, .flow .flow-next { font-size:1rem; }
}
/* Privacy policy page, and the links to it beside the consent boxes and in the footers */
.footnote a, .policy a { color:var(--navy); font-weight:700; }
.site-footer .footer-small a { font-weight:400; }
.policy h1 { margin:0; color:var(--navy); font-size:clamp(1.5rem,6vw,2.2rem); line-height:1.15; }
.policy h2 { margin:24px 0 6px; color:var(--navy); font-size:1.15rem; }
.policy p, .policy ul { margin:8px 0 0; }
.policy ul { padding-left:22px; }
.policy li + li { margin-top:6px; }