/* ============================================================
   consumer.css — homes.roofix.org
   Loaded AFTER styles.css. Overrides only: same brand, warmer feel.
   The institutional site keeps the tight, data-forward look; this
   softens type, warms the neutrals, drops the dashboard framing
   and adds homeowner conversion furniture (sticky call bar).
   ============================================================ */

:root{
  /* warm the cold blue-whites a few degrees */
  --bg-soft:#FBF8F4;
  --bg-tint:#F7F2EA;
  --line:#EAE4DC;
  --line-2:#DED6CB;
  /* a warm accent for trust/review furniture */
  --warm:#F5A623;
  --warm-soft:#FFF6E6;
  --r:20px; --r-lg:26px; --r-xl:32px;
}

/* ---------- Type: friendlier, less engineered ---------- */
body{font-size:17px;line-height:1.68}
h1,h2,h3,h4,h5{letter-spacing:-.022em;font-weight:600}
h1{line-height:1.08}
h2{line-height:1.14}
.lead{font-size:1.12rem;line-height:1.7}

/* ---------- Drop the enterprise framing ---------- */
.guides{display:none}
.grain{opacity:.35}

/* ---------- Softer surfaces ---------- */
.card,.form,.step,.cardface{border-radius:var(--r-lg)}
.card.dotted:before,.cardface.dotted:before{opacity:.45}
.pad.soft{background:var(--bg-soft)}

/* ---------- Photography gets more room ---------- */
figure.media{border-radius:var(--r-lg);overflow:hidden}
figure.media img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Trust furniture: warm, not corporate ---------- */
.badge{background:var(--warm-soft);border-color:#F2DFB8;color:#7A5A14}
.badge svg{stroke:#B9821A}
.trusted{font-size:.95rem}

/* ---------- Buttons: bigger tap targets ---------- */
.btn{border-radius:999px}
.btn-lg{padding:16px 28px;font-size:1rem}

/* ---------- Phone number in the nav ---------- */
.navtel{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:1rem;
  letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.navtel svg{width:16px;height:16px;stroke:var(--blue-600);fill:none;stroke-width:2}
.navtel:hover{color:var(--blue-700)}

/* ---------- Sticky mobile call bar ---------- */
.callbar{display:none}
@media(max-width:760px){
  .callbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;
    z-index:80;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);box-shadow:0 -8px 28px -12px rgba(10,17,32,.18)}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 10px;
    border-radius:999px;font-weight:600;font-size:.95rem;text-decoration:none}
  .callbar a svg{width:17px;height:17px;fill:none;stroke-width:2}
  .callbar .cb-call{background:var(--blue-600);color:#fff}
  .callbar .cb-call svg{stroke:#fff}
  .callbar .cb-quote{background:#fff;color:var(--ink);border:1px solid var(--line-2)}
  .callbar .cb-quote svg{stroke:var(--blue-600)}
  /* keep the bar from covering the footer's last line */
  body{padding-bottom:78px}
  .navtel{display:none}
}

/* ---------- Cross-site door back to roofix.org ---------- */
.xsite{display:flex;align-items:center;gap:24px;margin-top:18px;padding:24px 28px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(100deg,var(--bg-tint),#fff 72%);transition:.2s var(--ease)}
.xsite:hover{border-color:var(--blue-300);box-shadow:var(--shadow)}
.xsite .xic{flex:none;width:46px;height:46px;border-radius:13px;background:#fff;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.xsite .xic svg{width:23px;height:23px;stroke:var(--blue-600);fill:none;stroke-width:1.8}
.xsite .xtxt{flex:1;min-width:0}
.xsite .xtag{display:block;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--muted);margin-bottom:5px}
.xsite .xtxt b{display:block;font-size:1.02rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.xsite .xtxt p{margin:5px 0 0;font-size:.9rem;color:var(--ink-soft)}
.xsite .xgo{flex:none;display:inline-flex;align-items:center;gap:7px;font-weight:600;
  font-size:.92rem;color:var(--blue-700)}
.xsite .xgo svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;
  transition:transform .2s var(--ease)}
.xsite:hover .xgo svg{transform:translateX(3px)}
@media(max-width:760px){
  .xsite{flex-direction:column;align-items:flex-start;gap:16px;padding:22px}
}