/* =========================================================
   Home page variants: Roofix, Solova, Sonare, Solarise
   Scoped styles, additive only. Do not touch premium.css rules.
   ========================================================= */

/* ---------- shared helpers ---------- */
.hv-section { padding: 90px 0; }
.hv-eyebrow-pill {
  display:inline-flex; align-items:center; gap:6px; padding:6px 16px;
  border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}

/* =========================================================
   1) ROOFIX — bold condensed uppercase, cream bg, dark green bar
   ========================================================= */
.hv-roofix-hero {
  background:#f4efe8; padding:70px 0 60px;
}
.hv-roofix-hero .hv-badge {
  display:inline-block; background:#fff; border-radius:999px; padding:8px 18px;
  font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#12522f;
  box-shadow:0 2px 10px rgba(0,0,0,.05); margin-bottom:22px;
}
.hv-roofix-hero h1 {
  font-family: var(--font-display); font-weight:800; text-transform:uppercase;
  font-size: clamp(32px, 5.2vw, 56px); line-height:1.05; letter-spacing:-.01em; color:#12211a; margin-bottom:20px;
}
.hv-roofix-hero h1 span { color:#12522f; }
.hv-roofix-hero p.hv-lead { font-size:17px; color:#5a5a52; max-width:480px; margin-bottom:28px; }
.hv-roofix-cta-coral {
  display:inline-flex; align-items:center; gap:10px; background:#e8572c; color:#fff; font-weight:700;
  border-radius:10px; padding:15px 28px; text-decoration:none;
}
.hv-roofix-cta-coral:hover { background:#c9451e; color:#fff; }
.hv-roofix-cta-ghost {
  display:inline-flex; align-items:center; gap:8px; font-weight:700; color:#12211a; text-decoration:none; padding:15px 6px;
}
.hv-roofix-rating { display:flex; align-items:center; gap:10px; margin-top:26px; font-size:14px; color:#5a5a52; }
.hv-roofix-rating b { color:#12211a; }
.hv-roofix-photo { border-radius:20px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.12); }
.hv-roofix-photo img { width:100%; display:block; }
.hv-roofix-bar {
  background:#0e3320; color:#fff; padding:44px 0;
}
.hv-roofix-bar .hv-phone { font-size:26px; font-weight:800; color:#f4c944; }
.hv-roofix-bar .hv-phone a { color:inherit; text-decoration:none; }
.hv-roofix-feature { display:flex; gap:16px; align-items:flex-start; margin-bottom:22px; }
.hv-roofix-feature:last-child { margin-bottom:0; }
.hv-roofix-feature .ic {
  flex:none; width:40px; height:40px; border-radius:50%; background:#1c5a3a; color:#f4c944;
  display:grid; place-items:center; font-size:16px;
}
.hv-roofix-feature h5 { color:#fff; font-size:16px; margin-bottom:4px; }
.hv-roofix-feature p { color:#c9dccf; font-size:13px; margin:0; }
.hv-roofix-services .row { row-gap:24px; }
.hv-roofix-card {
  background:#f4efe8; border-radius:16px; padding:26px; height:100%;
}
.hv-roofix-card .hv-num {
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
  background:#fff; font-size:12px; font-weight:700; color:#5a5a52; margin-bottom:18px;
}
.hv-roofix-card h4 { font-size:18px; margin-bottom:10px; color:#12211a; }
.hv-roofix-card p { font-size:14px; color:#6b6b62; margin:0; }

/* =========================================================
   2) SOLOVA — bright green gradient hero, floating badges
   ========================================================= */
.hv-solova-hero {
  background: linear-gradient(180deg, #3fae53 0%, #7fd08f 55%, #ffffff 100%);
  padding: 56px 0 0;
}
.hv-solova-hero h1 { color:#fff; font-size:clamp(28px,4.4vw,42px); font-weight:800; line-height:1.15; margin-bottom:0; }
.hv-solova-hero .hv-avatars { display:flex; align-items:center; gap:10px; color:#fff; }
.hv-solova-hero .hv-avatars img { width:34px;height:34px;border-radius:50%;border:2px solid #fff; margin-left:-10px; }
.hv-solova-hero .hv-avatars .num { font-size:22px; font-weight:800; }
.hv-solova-photo-wrap { position:relative; margin-top:30px; }
.hv-solova-photo-wrap img { width:100%; border-radius:20px 20px 0 0; display:block; }
.hv-solova-float {
  position:absolute; background:#fff; border-radius:12px; padding:12px 16px; box-shadow:0 12px 30px rgba(0,0,0,.12);
  font-size:13px; display:flex; align-items:center; gap:8px;
}
.hv-solova-float.tl { top:24px; left:24px; }
.hv-solova-float.br { bottom:-20px; right:24px; }
.hv-solova-float .stars { color:#f4b400; }
.hv-solova-feat-row { background:#fff; padding:40px 0 0; }
.hv-solova-feat {
  display:flex; align-items:flex-start; gap:14px; padding:22px; border:1px solid #eef2ee; border-radius:14px; height:100%;
}
.hv-solova-feat .ic {
  flex:none; width:38px;height:38px;border-radius:9px; background:#e7f6ea; color:#2f9e46; display:grid;place-items:center;
}
.hv-solova-feat h5 { font-size:15px; margin-bottom:4px; }
.hv-solova-feat p { font-size:13px; color:#6b6b62; margin:0; }
.hv-solova-about { background:#f7faf7; }
.hv-solova-about-photo { position:relative; }
.hv-solova-about-photo img { width:100%; border-radius:16px; display:block; }
.hv-solova-stat-badge {
  position:absolute; background:#fff; border-radius:12px; padding:10px 16px; box-shadow:0 10px 26px rgba(0,0,0,.12); font-size:13px;
}
.hv-solova-stat-badge b { display:block; font-size:20px; color:#2f9e46; }
.hv-solova-service-card { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:3/4; }
.hv-solova-service-card img { width:100%; height:100%; object-fit:cover; display:block; }
.hv-solova-service-card .ic {
  position:absolute; top:14px; right:14px; width:38px;height:38px;border-radius:50%; background:#2f9e46; color:#fff;
  display:grid; place-items:center;
}
.hv-solova-service-card .cap {
  position:absolute; left:0; right:0; bottom:0; padding:16px; background:linear-gradient(0deg, rgba(0,0,0,.65), transparent);
  color:#fff;
}
.hv-solova-service-card .cap h5 { font-size:15px; margin-bottom:2px; }
.hv-solova-service-card .cap p { font-size:12px; margin:0; color:#e4f2e6; }
.hv-solova-stats-bar { background:#0e3320; padding:40px 0; }
.hv-solova-stats-bar .num { color:#7fd08f; font-size:32px; font-weight:800; font-family:var(--font-display); }
.hv-solova-stats-bar .lbl { color:#cfe6d4; font-size:13px; }

/* =========================================================
   3) SONARE — soft cream, pill orange CTAs, rounded editorial
   ========================================================= */
.hv-sonare-hero { background:#f6f5f1; padding:70px 0; }
.hv-sonare-hero .hv-eyebrow-pill { background:#fff; border:1px solid #e7e4dc; color:#6b6b62; }
.hv-sonare-hero h1 { font-size:clamp(28px,4.6vw,44px); font-weight:700; color:#16241c; line-height:1.2; margin:18px 0 14px; }
.hv-sonare-hero p.hv-lead { color:#6b6b62; max-width:420px; margin-bottom:22px; }
.hv-sonare-pill-btn {
  display:inline-flex; align-items:center; gap:8px; background:#e8572c; color:#fff; font-weight:700;
  border-radius:999px; padding:13px 24px; text-decoration:none;
}
.hv-sonare-pill-btn:hover { background:#c9451e; color:#fff; }
.hv-sonare-pill-btn.outline { background:transparent; color:#16241c; border:1px solid #d8d4c8; }
.hv-sonare-photo-offset { position:relative; }
.hv-sonare-photo-offset img { width:100%; border-radius:22px; display:block; }
.hv-sonare-stat-card {
  position:absolute; top:-18px; right:-10px; background:#fff; border-radius:14px; padding:14px 20px;
  box-shadow:0 14px 34px rgba(0,0,0,.12); font-size:13px; display:flex; align-items:center; gap:10px;
}
.hv-sonare-stat-card b { font-size:20px; display:block; color:#16241c; }
.hv-sonare-stats-row { display:flex; gap:34px; flex-wrap:wrap; margin-top:26px; }
.hv-sonare-stats-row .num { font-size:24px; font-weight:800; color:#2f9e46; font-family:var(--font-display); }
.hv-sonare-stats-row .lbl { font-size:12px; color:#6b6b62; }
.hv-sonare-dark-block { background:#0e3320; border-radius:28px; padding:56px 40px; color:#fff; }
.hv-sonare-dark-block h2 { color:#fff; }
.hv-sonare-dark-block p { color:#cfe6d4; }
.hv-sonare-service-card { border-radius:18px; overflow:hidden; position:relative; aspect-ratio:4/3.4; }
.hv-sonare-service-card img { width:100%;height:100%;object-fit:cover; display:block; }
.hv-sonare-service-card .cap {
  position:absolute; left:0; right:0; bottom:0; padding:20px; background:linear-gradient(0deg, rgba(0,0,0,.7), transparent 70%);
  color:#fff;
}
.hv-sonare-service-card .cap h5 { font-size:16px; margin-bottom:6px; }
.hv-sonare-service-card .cap p { font-size:12.5px; color:#e4f2e6; margin-bottom:12px; }

/* =========================================================
   4) SOLARISE — clover-shaped images, navy text, lime pill CTA
   ========================================================= */
.hv-solarise-hero { background:#fff; padding:74px 0; position:relative; overflow:hidden; }
.hv-solarise-hero h1 { color:#0f2438; font-size:clamp(28px,4.6vw,44px); font-weight:700; line-height:1.2; margin-bottom:16px; }
.hv-solarise-hero p.hv-lead { color:#5b6b76; max-width:420px; margin-bottom:24px; }
.hv-solarise-pill-btn {
  display:inline-flex; align-items:center; gap:8px; background:#0f2438; color:#c9f24d; font-weight:700;
  border-radius:999px; padding:13px 26px; text-decoration:none;
}
.hv-solarise-pill-btn:hover { background:#0a1a29; color:#c9f24d; }
.hv-clover {
  width:100%; aspect-ratio:1/1;
  clip-path: path('M150,0 C210,0 240,60 200,100 C240,140 210,200 150,200 C90,200 60,140 100,100 C60,60 90,0 150,0 Z');
  overflow:hidden;
}
.hv-clover img { width:100%; height:100%; object-fit:cover; display:block; }
.hv-solarise-stat-glossy {
  border-radius:16px; padding:26px 20px; color:#fff; text-align:center;
  background: linear-gradient(135deg, #1c3d54, #0f2438 60%);
}
.hv-solarise-stat-glossy .num { font-size:26px; font-weight:800; display:block; margin-bottom:4px; }
.hv-solarise-stat-glossy .lbl { font-size:12px; color:#c7d6de; }
.hv-solarise-feature-row {
  background:#f6f8f7; border-radius:14px; padding:18px 20px; margin-bottom:14px; display:flex; gap:14px; align-items:flex-start;
}
.hv-solarise-feature-row .ic {
  flex:none; width:34px;height:34px;border-radius:8px; background:#0f2438; color:#c9f24d; display:grid;place-items:center; font-size:14px;
}
.hv-solarise-feature-row h5 { font-size:15px; margin-bottom:4px; color:#0f2438; }
.hv-solarise-feature-row p { font-size:13px; color:#6b7c86; margin:0; }
.hv-solarise-service-card { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:3/3.6; }
.hv-solarise-service-card img { width:100%;height:100%;object-fit:cover; display:block; }
.hv-solarise-service-card .cap {
  position:absolute; left:0; right:0; bottom:0; padding:16px; background:linear-gradient(0deg, rgba(15,36,56,.85), transparent 75%);
  color:#fff; display:flex; align-items:center; justify-content:space-between;
}
.hv-solarise-service-card .cap span { font-weight:700; font-size:14px; }
.hv-solarise-service-card .cap i { background:#c9f24d; color:#0f2438; width:30px;height:30px;border-radius:50%; display:grid; place-items:center; }

@media (max-width: 767px) {
  .hv-section { padding:56px 0; }
  .hv-sonare-dark-block { padding:36px 22px; }
}