/* =========================================================
   HILLSIDE BATTERY STORE — design tokens
   Palette: Paper (warm-neutral base) + Ink (navy-charcoal)
            + Charge (amber, primary accent) + Volt (blue, signature accent)
   Type: Space Grotesk (display) / IBM Plex Sans (body) / IBM Plex Mono (data)
========================================================= */
:root{
  --paper: #F5F5F1;
  --paper-alt: #ECEAE3;
  --ink: #12181F;
  --ink-soft: #55606B;
  --ink-faint: #8993A0;
  --charge: #F0A63D;
  --charge-dark: #D6871E;
  --charge-light: #FBE4BB;
  --volt: #2F5CE0;
  --volt-soft: #E8EDFC;
  --white: #FFFFFF;
  --border: rgba(18,24,31,0.12);
  --border-soft: rgba(18,24,31,0.08);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 24px 48px -24px rgba(18,24,31,0.35);
  --shadow-sm: 0 8px 20px -10px rgba(18,24,31,0.25);
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --header-h: 76px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2{ font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3{ font-size: 1.15rem; }
p{ margin: 0 0 1em; color: var(--ink-soft); }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor:pointer; }
input, select, textarea{ font-family: inherit; font-size: 1rem; }

.container{ max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.icon{ width:1em; height:1em; font-size:1.25em; stroke: currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.icon-lg{ font-size: 2.2rem; color: var(--charge); }
.icon-xl{ font-size: 3rem; color: var(--ink-faint); }

.skip-link{ position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--white); padding:12px 20px; z-index:200; border-radius: 0 0 8px 0; }
.skip-link:focus{ left:0; }

:focus-visible{ outline: 3px solid var(--volt); outline-offset: 2px; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight:600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charge-dark);
  margin: 0 0 0.9em;
}
.section-head{ max-width: 640px; margin: 0 0 3rem; }
.section-head.section-head-light .eyebrow{ color: var(--charge); }
.section-sub{ font-size: 1.05rem; }

/* =========== BUTTONS =========== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.55em;
  padding: 0.85em 1.5em;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.98rem;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--charge); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: var(--charge-dark); }
.btn-outline{ background: transparent; border-color: currentColor; color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-text{ background:none; padding: 0.3em 0; color: var(--volt); font-weight:600; border-radius:0; }
.btn-text:hover{ text-decoration: underline; transform:none; }
.btn-lg{ padding: 1em 1.9em; font-size: 1.05rem; }
.btn-header-call{ padding: 0.6em 1.2em; font-size: 0.92rem; }

/* =========== HEADER =========== */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(245,245,241,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
  height: var(--header-h);
  display:flex; align-items:center;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap: 1.5rem; }
.logo{ display:flex; align-items:center; gap:0.6em; font-family: var(--font-display); font-weight:700; font-size: 1.05rem; flex-shrink:0; }
.logo-mark{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; background:var(--ink); color:var(--charge); border-radius:10px; font-size: 1.3rem; }
.main-nav{ display:none; align-items:center; gap: 2rem; font-weight:500; font-size:0.95rem; }
.main-nav a{ color: var(--ink-soft); transition: color .15s ease; }
.main-nav a:hover{ color: var(--ink); }
.header-actions{ display:flex; align-items:center; gap:0.75rem; }
.nav-toggle{ display:flex; background:none; border:none; padding:8px; font-size:1.5rem; color:var(--ink); }

@media (min-width: 900px){
  .main-nav{ display:flex; }
  .nav-toggle{ display:none; }
}

.main-nav.is-open{
  display:flex; flex-direction:column; align-items:flex-start; gap: 0;
  position:absolute; top: var(--header-h); left:0; right:0;
  background: var(--paper); border-bottom:1px solid var(--border);
  padding: 0.5rem 24px 1.25rem;
}
.main-nav.is-open a{ padding: 0.75rem 0; width:100%; border-bottom:1px solid var(--border-soft); }

/* =========== HERO =========== */
.hero{ padding: 3.5rem 0 0; overflow:hidden; }
.hero-grid{ display:grid; gap: 2.5rem; align-items:center; }
.hero-copy p.hero-sub{ font-size: 1.12rem; max-width: 46ch; }
.hero-cta-row{ display:flex; flex-wrap:wrap; gap:1rem; margin: 1.75rem 0; }
.badge-row{ display:flex; flex-wrap:wrap; gap: 1.4rem 1.8rem; font-size:0.9rem; font-weight:600; color: var(--ink-soft); }
.badge-row li{ display:flex; align-items:center; gap:0.5em; }
.badge-row .icon{ color: var(--volt); font-size:1.1em; }

.hero-visual{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gauge-svg{ width: min(100%, 340px); }
.gauge-track{ fill:none; stroke: var(--paper-alt); stroke-width:22; stroke-linecap:round; }
.gauge-fill{ fill:none; stroke: var(--charge); stroke-width:22; stroke-linecap:round; filter: drop-shadow(0 0 10px rgba(240,166,61,0.5)); }
.gauge-needle{ stroke: var(--ink); stroke-width:5; stroke-linecap:round; transform-origin: 210px 180px; animation: needle-settle 1.4s cubic-bezier(.2,1.4,.4,1) 1; }
.gauge-pivot{ fill: var(--ink); }
.gauge-readout{ font-family: var(--font-mono); font-weight:600; font-size: 34px; fill: var(--ink); }
.gauge-label{ font-family: var(--font-mono); font-size: 13px; letter-spacing:0.15em; fill: var(--volt); }
@keyframes needle-settle{
  0%{ transform: rotate(-35deg); }
  60%{ transform: rotate(4deg); }
  100%{ transform: rotate(0deg); }
}
.hero-visual-caption{ margin-top:1rem; font-family: var(--font-mono); font-size:0.85rem; color: var(--ink-faint); text-align:center; }

@media (min-width: 960px){
  .hero-grid{ grid-template-columns: 1.15fr 0.85fr; gap: 3rem; }
}

/* Quick request form panel */
.quick-form-panel{
  margin-top: 3.5rem;
  background: var(--ink); color: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display:grid; gap:1.75rem;
  box-shadow: var(--shadow);
}
.quick-form-head h2{ color: var(--white); font-size:1.4rem; margin-bottom:0.3em; }
.quick-form-head p{ color: rgba(255,255,255,0.65); margin:0; }
.quick-form{ display:grid; gap:1rem; }
.form-row{ display:grid; gap:1rem; }
@media (min-width:640px){ .form-row{ grid-template-columns:1fr 1fr; } }
.form-field{ display:flex; flex-direction:column; gap:0.4rem; }
.form-field label{ font-size:0.85rem; font-weight:600; color: rgba(255,255,255,0.85); }
.form-field input, .form-field select, .form-field textarea{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-sm);
  padding: 0.75em 0.9em;
  color: var(--white);
}
.form-field input::placeholder{ color: rgba(255,255,255,0.4); }
.form-field select{ color: var(--white); }
.form-field select option{ color: var(--ink); }
.form-submit{ width:100%; }
.form-note{ font-size:0.85rem; color: rgba(255,255,255,0.55); text-align:center; margin:0; }
.form-note a{ color: var(--charge); font-weight:600; }
.hp-field{ position:absolute; left:-9999px; }
.form-success{ display:none; text-align:center; padding: 1rem 0; }
.form-success.is-visible{ display:block; }
.form-success h3{ color: var(--white); margin-top:0.5rem; }
.form-success p{ color: rgba(255,255,255,0.7); }
.form-success a{ color: var(--charge); font-weight:600; }

@media (min-width: 700px){
  .quick-form-panel{ padding: 2.75rem; }
}

.hero{ padding-bottom: 3.5rem; }

/* =========== STATS =========== */
.stats{ padding: 1rem 0 4rem; }
.stats-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; text-align:center; }
@media (min-width: 760px){ .stats-grid{ grid-template-columns: repeat(4,1fr); } }
.stat{ display:flex; flex-direction:column; gap:0.35rem; }
.stat-num{ font-family: var(--font-mono); font-weight:600; font-size: clamp(1.8rem,4vw,2.4rem); color: var(--volt); }
.stat-label{ font-size:0.88rem; color: var(--ink-soft); font-weight:500; }

/* =========== SERVICE BLOCKS =========== */
.service-block{ padding: 4.5rem 0; }
.service-block-alt{ background: var(--paper-alt); }
.service-grid{ display:grid; gap: 2.5rem; align-items:center; }
@media (min-width: 940px){
  .service-grid{ grid-template-columns: 1fr 1fr; gap: 4rem; }
  .service-grid-reverse .service-copy{ order:2; }
  .service-grid-reverse .service-media{ order:1; }
}
.service-media img{ border-radius: var(--radius-lg); box-shadow: var(--shadow); aspect-ratio: 4/3.2; object-fit:cover; width:100%; }
.check-list{ display:grid; gap:0.85rem; margin: 1.5rem 0; }
.check-list li{ display:flex; align-items:flex-start; gap:0.7em; color: var(--ink); font-weight:500; }
.check-list .icon{ color: var(--volt); margin-top:0.15em; }
.cta-row{ display:flex; flex-wrap:wrap; gap:1.25rem; align-items:center; margin-top:1.5rem; }
.cta-row-center{ justify-content:center; }

.install-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:0.8rem; margin-top:2rem; }
.install-item{ display:flex; align-items:center; gap:0.6em; background: var(--white); border:1px solid var(--border-soft); border-radius: var(--radius-sm); padding:0.9em 1em; font-weight:600; font-size:0.92rem; }
.install-item .icon{ color: var(--charge-dark); }

/* =========== WHY US =========== */
.why-us{ padding: 4.5rem 0; background: var(--paper-alt); }
.why-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1.5rem; }
.why-card{ background: var(--white); padding: 2rem 1.75rem; border-radius: var(--radius); border:1px solid var(--border-soft); transition: transform .2s ease, box-shadow .2s ease; }
.why-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.why-card h3{ margin: 0.7em 0 0.4em; }
.why-card p{ font-size:0.94rem; margin:0; }

/* =========== BRANDS =========== */
.brands{ padding: 4.5rem 0; text-align:center; }
.brands .section-head{ margin-left:auto; margin-right:auto; text-align:center; }
.brand-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:1rem; max-width: 900px; margin: 0 auto; }
@media (min-width:640px){ .brand-grid{ grid-template-columns: repeat(4,1fr); } }
.brand-chip{ background: var(--white); border:1px solid var(--border); border-radius: var(--radius-sm); padding: 1.2em 1em; font-family: var(--font-display); font-weight:600; }
.brand-note{ margin-top:2rem; font-size:0.88rem; color: var(--ink-faint); }

/* =========== HOW IT WORKS =========== */
.how-it-works{ padding: 5rem 0; background: var(--ink); color: var(--white); }
.how-it-works .section-head h2{ color: var(--white); }
.how-it-works .section-head{ margin-left:auto; margin-right:auto; text-align:center; max-width:520px; }
.steps-grid{ display:grid; gap: 2rem; }
@media (min-width: 760px){ .steps-grid{ grid-template-columns: repeat(3,1fr); } }
.step{ text-align:center; padding: 0 1rem; }
.step-num{ display:inline-block; font-family: var(--font-mono); font-weight:600; font-size:0.95rem; color: var(--ink); background: var(--charge); border-radius:100px; padding: 0.35em 0.9em; margin-bottom:1rem; }
.step h3{ color: var(--white); }
.step p{ color: rgba(255,255,255,0.65); }

/* =========== TRUST =========== */
.trust{ padding: 4.5rem 0; }
.trust-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; }
.trust-card{ text-align:center; padding: 1.5rem; }
.trust-card p{ font-size:0.92rem; }

/* =========== DECISION BOX (jump vs replace) =========== */
.decision-box{ background: var(--volt-soft); border-radius: var(--radius); padding: 1.5rem 1.75rem; margin: 1.75rem 0; }
.decision-box h4{ font-family: var(--font-body); font-size:1rem; margin-bottom:0.8em; }
.decision-box ul{ display:grid; gap:0.6rem; }
.decision-box li{ font-size:0.92rem; color: var(--ink-soft); padding-left:1.1em; position:relative; }
.decision-box li::before{ content:'—'; position:absolute; left:0; color: var(--volt); }

/* =========== COVERAGE =========== */
.coverage{ padding: 5rem 0; background: var(--ink); color:var(--white); }
.county-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-bottom:2.5rem; }
.county-card{ background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius: var(--radius); padding:1.5rem; }
.county-card h3{ color: var(--charge); margin-bottom:0.5em; }
.county-card p{ color: rgba(255,255,255,0.65); font-size:0.9rem; margin:0; }
.coverage-cta{ text-align:center; display:grid; gap:1rem; justify-items:center; }
.coverage-cta p{ color: rgba(255,255,255,0.75); margin:0; }
.coverage .btn-outline{ color: var(--white); }
.coverage .btn-outline:hover{ background: var(--white); color: var(--ink); }

/* =========== REVIEWS EMPTY STATE =========== */
.reviews{ padding: 4.5rem 0; }
.reviews-empty{ text-align:center; max-width:520px; margin:0 auto; background: var(--paper-alt); border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: 3rem 2rem; }
.reviews-empty h3{ margin: 0.75em 0 0.4em; }
.reviews-empty p{ margin:0; }

/* =========== CTA BANNER (mid page) =========== */
.cta-banner{
  position:relative; padding: 5rem 0; text-align:center; color: var(--white);
  background-image: linear-gradient(rgba(18,24,31,0.82), rgba(18,24,31,0.88)), var(--bg-img);
  background-size:cover; background-position:center;
}
.cta-banner-inner{ display:grid; gap:1.75rem; justify-items:center; }
.cta-banner h2{ color: var(--white); max-width: 16ch; }

/* =========== FAQ =========== */
.faq{ padding: 5rem 0; }
.faq-grid{ display:grid; gap: 2.5rem; }
@media (min-width: 900px){ .faq-grid{ grid-template-columns: 0.85fr 1.6fr; } }
.faq-side{ align-self:start; position:sticky; top: calc(var(--header-h) + 24px); }
.faq-card{ margin-top:1.5rem; background: var(--ink); color:var(--white); border-radius: var(--radius); padding:1.75rem; }
.faq-card h3{ color:var(--white); }
.faq-card p{ color: rgba(255,255,255,0.65); }
.faq-item{ border-bottom: 1px solid var(--border); }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  text-align:left; background:none; border:none; padding: 1.35rem 0.1rem;
  font-family: var(--font-body); font-weight:600; font-size:1.02rem; color: var(--ink);
}
.faq-q .icon{ color: var(--volt); transition: transform .2s ease; flex-shrink:0; }
.faq-item.is-open .faq-q .icon{ transform: rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.faq-item.is-open .faq-a{ max-height: 300px; }
.faq-a p{ padding: 0 0.1rem 1.35rem; margin:0; }

/* =========== FINAL CTA =========== */
.cta-final{ padding: 5rem 0; text-align:center; background: var(--charge-light); }
.cta-final-inner{ max-width:560px; margin:0 auto; display:grid; gap:1rem; justify-items:center; }
.cta-final h2{ margin-bottom:0; }

/* =========== FOOTER =========== */
.site-footer{ background: var(--ink); color: rgba(255,255,255,0.7); padding-top: 4rem; }
.footer-grid{ display:grid; gap:2.5rem; padding-bottom: 3rem; border-bottom:1px solid rgba(255,255,255,0.1); }
@media (min-width: 860px){ .footer-grid{ grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.logo-footer{ color: var(--white); margin-bottom:1rem; }
.logo-footer .logo-mark{ background: var(--charge); color: var(--ink); }
.footer-brand p{ color: rgba(255,255,255,0.6); max-width:38ch; }
.footer-contact{ display:flex; flex-direction:column; gap:0.6rem; margin-top:1.25rem; }
.footer-contact a{ display:flex; align-items:center; gap:0.6em; color: var(--white); font-weight:600; }
.footer-contact .icon{ color: var(--charge); }
.footer-col h4{ color: var(--white); font-size:0.95rem; margin-bottom:1.1em; }
.footer-col ul{ display:grid; gap:0.7rem; }
.footer-col a{ color: rgba(255,255,255,0.65); }
.footer-col a:hover{ color: var(--charge); }
.footer-chip-list{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.footer-chip-list li{ background: rgba(255,255,255,0.08); border-radius:100px; padding:0.3em 0.9em; font-size:0.82rem; }
.footer-bottom-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:0.5rem; padding: 1.5rem 24px; font-size:0.82rem; color: rgba(255,255,255,0.45); }

/* =========== MOBILE STICKY BAR =========== */
.mobile-bar{ position:fixed; bottom:0; left:0; right:0; z-index:90; display:flex; background: var(--white); border-top:1px solid var(--border); box-shadow: 0 -8px 20px -12px rgba(18,24,31,0.25); }
.mobile-bar-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:0.5em; padding:1rem 0.5rem; font-weight:700; font-size:0.92rem; background:none; border:none; }
.mobile-bar-call{ background: var(--ink); color: var(--white); }
.mobile-bar-quote{ color: var(--ink); }
@media (min-width: 900px){ .mobile-bar{ display:none; } }
body{ padding-bottom: 68px; }
@media (min-width: 900px){ body{ padding-bottom:0; } }

/* =========== MODAL =========== */
.modal-overlay{ position:fixed; inset:0; z-index:200; background: rgba(18,24,31,0.6); display:flex; align-items:center; justify-content:center; padding:1.25rem; }
.modal-overlay[hidden]{ display:none; }
.modal-box{ position:relative; background: var(--white); border-radius: var(--radius-lg); padding: 2.25rem; max-width: 460px; width:100%; max-height:90vh; overflow-y:auto; }
.modal-box h2{ margin-bottom:0.3em; }
.modal-close{ position:absolute; top:1rem; right:1rem; background: var(--paper-alt); border:none; border-radius:100px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
.modal-box .form-field input, .modal-box .form-field textarea{
  background: var(--paper); border:1px solid var(--border); color: var(--ink); border-radius: var(--radius-sm); padding:0.75em 0.9em;
}
.modal-box .form-field label{ color: var(--ink-soft); }
.modal-box .form-success h3, .modal-box .form-success p{ color: var(--ink-soft); }
.modal-box .form-success h3{ color: var(--ink); }