/* Solent Solar homepage design pass (2026-10-05). Homepage only: linked from /index.html.
   Sections are targeted by data-hv2 hooks; colours stay on the existing palette
   (gray-950 ink, brand gold #d4a22e / #96671d, Inter). */
:root{--hv-gold:#d4a22e;--hv-gold-dk:#96671d;--hv-ink:#030712;--hv-body:#4b5563;--hv-soft:#f8fafc}

/* ---- rhythm: no stacked double padding between same-colour sections ---- */
[data-hv2]{scroll-margin-top:5rem}
[data-hv2=services]{padding-bottom:4.5rem}
[data-hv2=packages].bg-white,[data-hv2=savings].bg-white{background:var(--hv-soft)}
[data-hv2=packages]{padding-top:5rem;padding-bottom:5rem}
@media(min-width:768px){[data-hv2=pricing]{padding-bottom:5rem}[data-hv2=brands]{padding-top:5rem;padding-bottom:5rem}}
[data-hv2=sotonstats]{padding-bottom:3.5rem}
[data-hv2=reviews]{padding-top:3.5rem;border-top:1px solid rgb(255 255 255/.06)}
@media(max-width:767px){
  [data-hv2=services],[data-hv2=steps],[data-hv2=why],[data-hv2=packages]{padding-top:3.75rem;padding-bottom:3.75rem}
  [data-hv2=sotonstats]{padding-bottom:2.5rem}[data-hv2=reviews]{padding-top:2.5rem}
}

/* ---- headline-adjacent stats + trust strip ---- */
[data-hv2=stats] .text-white\/25{color:rgb(255 255 255/.62)}
[data-hv2=stats] svg{color:var(--hv-gold)}
[data-hv2=trust]{background:#0b0f17}
[data-hv2=trust] a{color:rgb(255 255 255/.78)}
[data-hv2=trust] a:hover{color:#fff}
[data-hv2=trust] a svg{color:var(--hv-gold)}
[data-hv2=trust] a span{font-size:12px}
@media(max-width:767px){[data-hv2=trust] .flex{gap:.9rem 1.5rem}}

/* ---- services: photo cards ---- */
[data-hv2=services] .text-brand-500\/70,[data-hv2=packages] .text-brand-500\/70,[data-hv2=why] .text-brand-500\/70{color:var(--hv-gold-dk)}
[data-hv2=services] .text-gray-400,[data-hv2=packages] .text-gray-400,[data-hv2=why] .text-gray-400{color:var(--hv-body)}
[data-hv2=services] .grid{gap:1.25rem;background:transparent}
[data-hv2=services] .grid>a{border:1px solid #e5e7eb;border-radius:1rem;overflow:hidden;box-shadow:0 1px 2px rgb(3 7 18/.04)}
[data-hv2=services] .grid>a:hover{box-shadow:0 18px 40px -18px rgb(3 7 18/.45)}
[data-hv2=services] .grid>a>.mb-8{display:none}
.hv2-svc-img{margin:-2rem -2rem 1.75rem;aspect-ratio:4/3;overflow:hidden;background:#e5e7eb}
.hv2-svc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease}
[data-hv2=services] .grid>a:hover .hv2-svc-img img{transform:scale(1.05)}
[data-hv2=services] .grid>a:hover p{color:rgb(255 255 255/.72)}
[data-hv2=services] .grid>a:hover .hv2-learn{color:var(--hv-gold)!important}
[data-hv2=services] .flex.flex-wrap>a{border-radius:9999px}

/* ---- how it works ---- */
[data-hv2=steps] .text-brand-400\/50,[data-hv2=sotonstats] .text-brand-400\/50,[data-hv2=reviews] .text-brand-400\/50{color:var(--hv-gold)}
[data-hv2=steps] .text-white\/\[0\.07\]{color:transparent;-webkit-text-stroke:1.5px rgb(212 162 46/.85)}
[data-hv2=steps] .text-white\/30{color:rgb(255 255 255/.68)}
[data-hv2=steps] .border-white\/10{border-color:rgb(212 162 46/.45)}
[data-hv2=steps] .grid{gap:1px;background:rgb(255 255 255/.08)}
[data-hv2=steps] .grid>div{position:relative}
[data-hv2=steps] .grid>div::before{content:"";position:absolute;left:2rem;right:2rem;top:0;height:2px;background:linear-gradient(90deg,var(--hv-gold),transparent);opacity:.55}

/* ---- calculator: brand gold instead of teal ---- */
[data-hv2=calc] .bg-coast-500\/\[0\.08\]{background:rgb(212 162 46/.12)}
[data-hv2=calc] .border-coast-500\/\[0\.1\]{border-color:rgb(212 162 46/.25)}
[data-hv2=calc] .calc-placeholder svg{color:#e5b43e}
[data-hv2=calc] .calc-placeholder .text-white\/40{color:rgb(255 255 255/.72)}
[data-hv2=calc] .calc-placeholder .text-white\/25{color:rgb(255 255 255/.5)}


/* ---- packages: three equal cards ---- */
[data-hv2=packages] .grid.grid-cols-3{gap:.75rem;background:transparent}
[data-hv2=packages] .grid.grid-cols-3>a{border:1px solid #e5e7eb;border-radius:1rem;padding:1.75rem 1rem}
[data-hv2=packages] .grid.grid-cols-3>a.bg-gray-950{border-color:var(--hv-ink);box-shadow:0 18px 40px -20px rgb(3 7 18/.6)}
[data-hv2=packages] .text-gray-300{color:#6b7280}
[data-hv2=packages] .text-brand-400\/60{color:var(--hv-gold)}
[data-hv2=packages] .text-white\/30{color:rgb(255 255 255/.6)}
@media(max-width:639px){[data-hv2=packages] .grid.grid-cols-3>a{padding:1.1rem .4rem}[data-hv2=packages] .grid.grid-cols-3 .text-xl{font-size:1.05rem}}

/* ---- why choose: list + photo column ---- */
[data-hv2=why] .space-y-px{background:transparent}
[data-hv2=why] .space-y-px>a{border-bottom:1px solid #eef0f3}
[data-hv2=why] .space-y-px>a .w-8.h-8{border-color:rgb(212 162 46/.35);background:#fdf9ee;color:var(--hv-gold-dk)}
[data-hv2=why] .space-y-px>a:hover .w-8.h-8{background:transparent}
[data-hv2=why] .space-y-px p{font-size:.84rem}
[data-hv2=why] img{border-radius:1rem}
[data-hv2=why] .bg-gray-950\/10{border-radius:1rem}
@media(min-width:1024px){[data-hv2=why] .grid>div:last-child{position:sticky;top:6.5rem}}
.hv2-why-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.hv2-why-row img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.hv2-why-cap{margin-top:.85rem;font-size:.8rem;color:#6b7280;display:flex;align-items:center;gap:.5rem}
.hv2-why-cap::before{content:"";width:1.5rem;height:2px;background:var(--hv-gold)}

/* ---- dark proof sections: legible text ---- */
[data-hv2=sotonstats] .text-white\/50{color:rgb(255 255 255/.8)}
[data-hv2=sotonstats] .text-white\/30,[data-hv2=reviews] .text-white\/30{color:rgb(255 255 255/.66)}
[data-hv2=sotonstats] .text-white\/20{color:rgb(255 255 255/.5)}
[data-hv2=sotonstats] .text-white\/25,[data-hv2=reviews] .text-white\/25{color:rgb(255 255 255/.62)}
[data-hv2=sotonstats] .text-brand-400\/40{color:var(--hv-gold)}
[data-hv2=sotonstats] svg,[data-hv2=reviews] svg{color:var(--hv-gold)}
[data-hv2=sotonstats] .border-white\/\[0\.08\]{border-color:rgb(212 162 46/.4)}
[data-hv2=reviews] .text-white\/40,[data-hv2=reviews] .text-white\/50{color:rgb(255 255 255/.82)}
[data-hv2=reviews] .text-white\/20{color:rgb(255 255 255/.5)}

/* ---- savings: on-brand accents ---- */
[data-hv2=savings] .from-ocean-400{--tw-gradient-from:#374151 var(--tw-gradient-from-position);--tw-gradient-to:rgb(55 65 81/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
[data-hv2=savings] .to-ocean-600{--tw-gradient-to:#030712 var(--tw-gradient-to-position)}
[data-hv2=savings] .text-coast-600{color:#15803d}

/* ---- guides ---- */
[data-hv2=guides] img{object-position:50% 40%}

/* ---- local links (moved above the closing CTA, restyled to the brand) ---- */
.hv2-explore{background:var(--hv-soft);padding:0 0 5rem}
.hv2-explore-in{max-width:80rem;margin:0 auto;padding:0 1rem;display:grid;gap:1.25rem}
@media(min-width:640px){.hv2-explore-in{padding:0 1.5rem}}
@media(min-width:1024px){.hv2-explore-in{padding:0 2rem;grid-template-columns:repeat(3,minmax(0,1fr))}}
.hv2-explore-in>section{max-width:none!important;margin:0!important;padding:1.4rem 1.5rem!important;background:#fff!important;border:1px solid #e5e7eb!important;border-radius:1rem!important}
.hv2-explore-in>section::before{content:"";display:block;width:1.75rem;height:2px;background:var(--hv-gold);margin-bottom:.9rem}
.hv2-explore-in h2{font-size:1.05rem!important;color:var(--hv-ink)!important;margin:0 0 .6rem!important}
.hv2-explore-in p{color:#374151!important;font-size:.92rem;line-height:1.6!important}
.hv2-explore-in a{color:var(--hv-gold-dk)!important}
.hv2-explore-in strong{color:var(--hv-ink)}
.hv2-explore-in ul{padding-left:1.1rem!important}

/* ---- closing CTA: real install photo behind a lighter tint ---- */
[data-hv2=cta]{background:#030712}
.hv2-cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hv2-cta-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgb(3 7 18/.72) 0%,rgb(3 7 18/.6) 50%,rgb(3 7 18/.8) 100%)}
.hv2-cta-icon{display:inline-flex;align-items:center;justify-content:center;width:4rem;height:4rem;border-radius:9999px;margin-bottom:2rem;border:1px solid rgb(212 162 46/.5);background:rgb(212 162 46/.14);color:var(--hv-gold)}
[data-hv2=cta] .text-white\/50{color:rgb(255 255 255/.85)}
[data-hv2=cta] .text-white\/30{color:rgb(255 255 255/.75)}
[data-hv2=cta] .bg-coast-400{background:var(--hv-gold)}
[data-hv2=cta] h2{text-shadow:0 2px 18px rgb(3 7 18/.5)}

/* the footer repeats the closing CTA on every page; on the homepage the band above already does it */
.hv2-hide{display:none}

/* ---- reviews band: point to checkable reviews (2026-10-05, ESC-#12 follow-through) ---- */
.hv2-reviews-panel{border:1px solid rgb(255 255 255/.1);border-left:3px solid var(--hv-gold);padding:2rem 2.25rem;max-width:52rem;background:rgb(255 255 255/.02)}
.hv2-rp-lead{color:#fff;font-size:1.2rem;font-weight:700;line-height:1.45;margin:0 0 .75rem}
.hv2-rp-body{color:rgb(255 255 255/.72);font-size:.95rem;line-height:1.65;margin:0 0 1.5rem;max-width:40rem}
.hv2-rp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.hv2-rp-btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--hv-gold);color:#fff;font-weight:600;font-size:.9rem;padding:.85rem 1.5rem;border-radius:2px;transition:background .3s}
.hv2-rp-btn:hover{background:#e5b43e}
.hv2-rp-link{color:rgb(255 255 255/.8);font-size:.9rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.hv2-rp-link:hover{color:#fff}
@media(max-width:639px){.hv2-reviews-panel{padding:1.5rem 1.25rem}.hv2-rp-lead{font-size:1.05rem}}

/* ---- flat roofs (client request 2026-10-05: Tom's photos + the Van der Valk kit) ---- */
.hv2-flat{background:#f8fafc;padding:4.5rem 0;border-top:1px solid #eef0f3}
.hv2-flat-grid{display:grid;gap:2.5rem;align-items:center}
@media(min-width:1024px){.hv2-flat-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:4rem}}
.hv2-flat-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#96671d;margin:0 0 1rem}
.hv2-flat-h2{font-size:1.875rem;line-height:1.15;font-weight:900;letter-spacing:-.025em;color:#030712;margin:0 0 1.25rem}
@media(min-width:768px){.hv2-flat-h2{font-size:2.25rem}}@media(min-width:1024px){.hv2-flat-h2{font-size:2.75rem}}
.hv2-flat-p{color:#4b5563;line-height:1.7;margin:0 0 1.5rem;max-width:34rem}
.hv2-flat-kit{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#030712;margin:0 0 .75rem}
.hv2-flat-ticks{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.65rem}
.hv2-flat-ticks li{display:flex;align-items:flex-start;gap:.6rem;color:#111827;font-size:.95rem;font-weight:500}
.hv2-flat-ticks svg{flex:none;margin-top:.2rem;color:#d4a22e}
.hv2-flat-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.hv2-flat-btn{display:inline-flex;align-items:center;gap:.6rem;background:#030712;color:#fff;font-weight:600;font-size:.9rem;padding:.85rem 1.5rem;border-radius:2px;transition:background .3s}
.hv2-flat-btn:hover{background:#1f2937}
.hv2-flat-link{color:#96671d;font-weight:600;font-size:.9rem;text-decoration:underline;text-underline-offset:3px}
.hv2-flat-photos{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.hv2-flat-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:1rem;display:block}
.hv2-flat-photos figcaption{grid-column:1/-1;font-size:.8rem;color:#6b7280;display:flex;align-items:center;gap:.5rem;margin-top:.25rem}
.hv2-flat-photos figcaption::before{content:"";width:1.5rem;height:2px;background:#d4a22e}
@media(max-width:767px){.hv2-flat{padding:3.5rem 0}}

/* ---- Tom's video (client request 2026-10-06) ---- */
.hv2-video{background:#f8fafc;padding:4.5rem 0;border-top:1px solid #eef0f3}
.hv2-video-grid{display:grid;gap:2.5rem;align-items:center}
@media(min-width:1024px){.hv2-video-grid{grid-template-columns:minmax(0,1fr) 340px;gap:5rem}}
.hv2-video-frame{justify-self:center;width:100%;max-width:340px;aspect-ratio:9/16;border-radius:1.25rem;overflow:hidden;background:#030712;box-shadow:0 24px 50px -24px rgb(3 7 18/.55)}
.hv2-video-frame video{width:100%;height:100%;object-fit:cover;display:block;background:#030712}
@media(max-width:767px){.hv2-video{padding:3.5rem 0}}