/* ============================================================
   home.css — lead-capture homepage (loaded only on /)
   All classes namespaced q* to avoid colliding with styles.css.
   Reuses Sora (headings) + Figtree (body) already loaded in head.
   ============================================================ */
:root{
  --q-navy:#0c1f3d; --q-navy-2:#132d54; --q-navy-3:#1e3f6e;
  --q-accent:#e8a838; --q-accent-d:#c78a2a; --q-accent-l:#f5deb3;
  --q-cta:#2563eb; --q-cta-h:#1d4ed8; --q-verified:#16a34a; --q-verified-bg:#dcfce7;
  --q-text:#1e293b; --q-text-mid:#475569; --q-text-muted:#64748b; --q-border:#e2e8f0;
  --q-r:10px; --q-r-lg:16px;
  --q-sh-md:0 8px 24px rgba(12,31,61,.10); --q-sh-lg:0 24px 56px -16px rgba(12,31,61,.22);
}
.q-serif{font-family:'Sora',sans-serif}

/* HERO — photo-as-hero: darkened roof photo, dark-left so text stays crisp */
.qhero{
  background:
    linear-gradient(100deg, rgba(8,21,43,.64) 0%, rgba(10,25,50,.30) 32%, rgba(12,31,61,.06) 64%, rgba(12,31,61,0) 100%),
    url('/images/hero-roof.jpg') center / cover no-repeat;
  position:relative;overflow:hidden;padding:clamp(2.5rem,5vw,4.5rem) 1.5rem clamp(3rem,6vw,5rem)}
.qhero::before{content:"";position:absolute;inset:0;background:radial-gradient(at 80% 0%,rgba(232,168,56,.18) 0%,transparent 50%);pointer-events:none}
@media(max-width:959px){.qhero{background:linear-gradient(180deg, rgba(8,21,43,.93) 0%, rgba(12,31,61,.88) 100%), url('/images/hero-roof.jpg') center / cover no-repeat}}
.qhero__in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:2.5rem;position:relative}
@media(min-width:960px){.qhero__in{grid-template-columns:1.15fr .85fr;align-items:start;gap:3.5rem}}
.qhero__pill{display:inline-flex;align-items:center;gap:.5rem;background:rgba(232,168,56,.14);color:var(--q-accent-l);border:1px solid rgba(232,168,56,.3);padding:.4rem .9rem;border-radius:999px;font-size:.78rem;font-weight:600;margin-bottom:1.4rem}
.qhero__pill svg{width:14px;height:14px;stroke:var(--q-accent);stroke-width:2.2;fill:none}
.qhero h1{font-family:'Sora';font-weight:800;font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.05;letter-spacing:-.03em;color:#fff;margin:0 0 1.1rem;max-width:14ch;text-shadow:0 2px 22px rgba(8,21,43,.7),0 1px 3px rgba(8,21,43,.5)}
.qhero h1 span{color:var(--q-accent)}
.qhero__lede{font-size:clamp(1.05rem,1.4vw,1.2rem);color:#e8eef5;margin-bottom:1.8rem;max-width:46ch;text-shadow:0 1px 12px rgba(8,21,43,.65)}
.qhero__attrs{display:grid;grid-template-columns:1fr 1fr;gap:.85rem 1.25rem;max-width:480px;margin-bottom:2rem;list-style:none;padding:0}
.qhero__attr{display:flex;align-items:flex-start;gap:.6rem;font-size:.92rem;color:#e2e8f0;font-weight:500;text-shadow:0 1px 12px rgba(8,21,43,.65)}
.qhero__attr svg{width:20px;height:20px;stroke:#4ade80;stroke-width:2.6;fill:none;flex-shrink:0;margin-top:1px}
.qhero__trust{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.18)}
.qhero__trust-item{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#cbd5e1;text-shadow:0 1px 10px rgba(8,21,43,.6)}
.qhero__trust-item strong{color:#fff;font-family:'Sora';font-weight:700;font-size:1.05rem}

/* LEAD FORM CARD */
.qlead{background:#fff;border-radius:var(--q-r-lg);box-shadow:var(--q-sh-lg);overflow:hidden;position:relative}
.qlead::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--q-accent),var(--q-cta))}
.qlead__head{padding:1.5rem 1.6rem 1.1rem;border-bottom:1px solid var(--q-border)}
.qlead__badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--q-verified-bg);color:#15803d;font-size:.72rem;font-weight:700;padding:.25rem .6rem;border-radius:999px;margin-bottom:.7rem;text-transform:uppercase;letter-spacing:.03em}
.qlead__badge svg{width:11px;height:11px;stroke:#15803d;stroke-width:3;fill:none}
.qlead__title{font-family:'Sora';font-weight:700;font-size:1.4rem;color:var(--q-navy);letter-spacing:-.02em;line-height:1.15;margin:0}
.qlead__sub{font-size:.9rem;color:var(--q-text-muted);margin-top:.35rem}
.qlead__body{padding:1.4rem 1.6rem 1.6rem}
.qlead__row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.qlead label{display:block;font-size:.76rem;font-weight:600;color:var(--q-text);margin-bottom:.35rem}
.qlead input,.qlead select{width:100%;padding:.72rem .85rem;font-family:inherit;font-size:.92rem;border:1.5px solid var(--q-border);border-radius:var(--q-r);margin-bottom:.95rem;background:#fbfcfd;color:var(--q-text);transition:.15s}
.qlead input:focus,.qlead select:focus{outline:none;border-color:var(--q-cta);background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.qlead__submit{width:100%;background:var(--q-cta);color:#fff;padding:.95rem;border:none;border-radius:var(--q-r);font-weight:700;font-size:1rem;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;gap:.5rem}
.qlead__submit:hover{background:var(--q-cta-h)}
.qlead__submit svg{width:17px;height:17px;stroke:#fff;stroke-width:2.5;fill:none}
.qlead__fine{text-align:center;font-size:.74rem;color:var(--q-text-muted);margin-top:.7rem;line-height:1.45}
.qlead__fine svg{width:11px;height:11px;stroke:var(--q-verified);stroke-width:3;fill:none;display:inline;vertical-align:-1px;margin-right:2px}

/* GENERIC SECTION */
.qsec{padding:clamp(3rem,6vw,5rem) 1.5rem}
.qsec__in{max-width:1200px;margin:0 auto}
.qeyebrow{display:inline-flex;align-items:center;gap:.45rem;color:var(--q-accent-d);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.7rem}
.qsec h2{font-family:'Sora';font-weight:700;font-size:clamp(1.7rem,3.5vw,2.4rem);color:var(--q-navy);letter-spacing:-.025em;line-height:1.1;margin:0 0 .6rem}
.qsec__sub{font-size:1.05rem;color:var(--q-text-mid);max-width:54ch}

/* STEPS */
.qsteps{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:2.5rem}
@media(min-width:760px){.qsteps{grid-template-columns:repeat(3,1fr)}}
.qstep{background:#fff;border:1px solid var(--q-border);border-radius:var(--q-r-lg);padding:1.6rem;position:relative}
.qstep__n{width:42px;height:42px;background:var(--q-navy);color:var(--q-accent);border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:'Sora';font-weight:800;font-size:1.15rem;margin-bottom:1rem}
.qstep h3{font-family:'Sora';font-weight:700;font-size:1.15rem;color:var(--q-navy);margin:0 0 .4rem}
.qstep p{font-size:.95rem;color:var(--q-text-mid);margin:0}

/* DIRECTORY STRIP (directory demoted to a trust signal) */
.qdir{background:#fff;border-top:1px solid var(--q-border);border-bottom:1px solid var(--q-border)}
.qdir__in{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.6rem 1.5rem}
.qdir__text{font-size:.98rem;color:var(--q-text-mid)}
.qdir__text strong{color:var(--q-navy)}
.qdir__link{display:inline-flex;align-items:center;gap:.4rem;color:var(--q-cta);font-weight:600;font-size:.95rem;white-space:nowrap}
.qdir__link svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none}

/* FINAL CTA */
.qfinal{background:var(--q-navy);color:#fff;text-align:center;padding:clamp(3rem,6vw,5rem) 1.5rem}
.qfinal h2{font-family:'Sora';font-weight:800;font-size:clamp(1.8rem,4vw,2.6rem);color:#fff;margin:0 0 .8rem;letter-spacing:-.025em}
.qfinal p{color:#a8b8cc;margin:0 auto 2rem;font-size:1.05rem;max-width:60ch}
.qfinal__btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--q-accent);color:var(--q-navy);padding:1rem 2rem;border-radius:999px;font-weight:700;font-size:1.05rem}
.qfinal__btn svg{width:18px;height:18px;stroke:var(--q-navy);stroke-width:2.5;fill:none}

/* STICKY MOBILE CTA */
.qsticky{position:fixed;bottom:0;left:0;right:0;background:var(--q-accent);color:var(--q-navy);padding:.9rem;display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;z-index:100;box-shadow:0 -6px 20px rgba(0,0,0,.18)}
.qsticky svg{width:16px;height:16px;stroke:var(--q-navy);stroke-width:2.5;fill:none}
@media(min-width:760px){.qsticky{display:none}}
@media(max-width:759px){body{padding-bottom:56px}}

/* ============================================================
   Contractor-page CTA — inline quote band + claim strip
   (loaded on /contractor/* via head_extra)
   ============================================================ */
.qcta-inline{background:linear-gradient(160deg,var(--q-navy),var(--q-navy-2));border-radius:16px;padding:1.6rem;margin:1.5rem 0;color:#fff;display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:760px){.qcta-inline{grid-template-columns:1fr 1fr;align-items:center;gap:2rem;padding:2rem}}
.qcta-inline h2{font-family:'Sora';font-weight:700;font-size:1.4rem;color:#fff;margin:0 0 .5rem;border:none;padding:0}
.qcta-inline p{color:#c7d2e0;font-size:.95rem;margin:0}
.qcta-inline .qcard{background:#fff;border-radius:12px;padding:1.25rem}
.qf-field{margin-bottom:.7rem}
.qf-field label{display:block;font-size:.72rem;font-weight:600;color:var(--q-text);margin-bottom:.3rem}
.qf-field input,.qf-field select{width:100%;padding:.62rem .75rem;font-family:inherit;font-size:.9rem;border:1.5px solid var(--q-border);border-radius:9px;background:#fbfcfd;color:var(--q-text)}
.qf-field input:focus,.qf-field select:focus{outline:none;border-color:var(--q-cta);background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.qf-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.qf-btn{width:100%;background:var(--q-cta);color:#fff;border:none;padding:.85rem;border-radius:9px;font-weight:700;font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.45rem}
.qf-btn:hover{background:var(--q-cta-h)}
.qf-btn svg{width:16px;height:16px;stroke:#fff;stroke-width:2.5;fill:none}
.qf-fine{font-size:.72rem;color:#94a3b8;text-align:center;margin-top:.6rem}
/* slim 'is this your business?' claim strip (replaces old claim form) */
.claim-strip{background:#fffaf0;border:1px solid #f3dca0;border-radius:10px;padding:.75rem 1.1rem;margin:2rem 0;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.9rem;color:#7a5a12;text-align:center;flex-wrap:wrap}
.claim-strip svg{width:15px;height:15px;stroke:#b8791e;stroke-width:2.2;fill:none;flex-shrink:0}
.claim-strip a{color:var(--q-navy);font-weight:700;white-space:nowrap}
.claim-strip a:hover{text-decoration:underline}