/* ==========================================================================
   Upper Valley Home Energy — shared stylesheet
   Brand: Dartmouth Green #00693E · Hearth Amber #E9A13B · Pine Ink #0B2B20
          Frost #C9DBD1 · Paper #FAFAF7 · Rule #DCE4DE
   Type:  Fraunces (display) · Archivo (heading + body)
   ========================================================================== */

:root{
  --green:#00693E;
  --green-md:#0E7D4C;
  --amber:#E9A13B;
  --amber-dk:#C9832A;
  --ink:#0B2B20;
  --frost:#C9DBD1;
  --paper:#FAFAF7;
  --rule:#DCE4DE;
  --muted:#4A5C54;
}

html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* Skip link ---------------------------------------------------------------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--amber); color:var(--ink);
  padding:12px 20px; font-weight:600; font-size:14px;
}
.skip-link:focus{ left:0; }

/* Focus ring --------------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
}

/* ==========================================================================
   Desktop navigation
   NOTE: .sss-nav is display:flex here, so Tailwind's `hidden` cannot beat it.
   Always wrap the desktop nav in <div class="hidden md:flex ...">.
   ========================================================================== */
.sss-nav{
  display:flex; align-items:center; gap:2px;
  list-style:none; margin:0; padding:0;
}
.sss-nav > li{ position:relative; }
.sss-nav > li > a{
  display:block;
  font-family:Archivo,system-ui,sans-serif;
  font-weight:600; font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:#fff; text-decoration:none;
  padding:16px 14px;
  border-bottom:3px solid transparent;
  transition:color .16s ease, border-color .16s ease;
  white-space:nowrap;
}
.sss-nav > li > a:hover,
.sss-nav > li.is-active > a{
  color:var(--amber);
  border-bottom-color:var(--amber);
}

/* Dropdown ----------------------------------------------------------------- */
.dropdown-menu{
  position:absolute; top:100%; left:0; z-index:60;
  min-width:262px;
  list-style:none; margin:0; padding:6px 0;
  background:#fff;
  border:1px solid var(--rule);
  border-top:3px solid var(--amber);
  box-shadow:0 18px 40px -14px rgba(11,43,32,.38);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-dropdown:hover > .dropdown-menu,
.has-dropdown:focus-within > .dropdown-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown-menu a{
  display:block;
  font-family:Archivo,system-ui,sans-serif;
  font-size:14px; line-height:1.35; color:var(--ink); text-decoration:none;
  padding:10px 18px;
  border-left:3px solid transparent;
  transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.dropdown-menu a:hover{
  background:#F1F5F2; color:var(--green); border-left-color:var(--amber);
}

/* Quote button in the nav bar ---------------------------------------------- */
.sss-quote-btn{
  display:inline-block;
  font-family:Archivo,system-ui,sans-serif;
  font-weight:700; font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  background:var(--amber); color:var(--ink); text-decoration:none;
  padding:11px 20px;
  transition:background .16s ease;
  white-space:nowrap;
}
.sss-quote-btn:hover{ background:var(--amber-dk); }

/* ==========================================================================
   Heroes
   ========================================================================== */
.home-hero{
  position:relative;
  background:
    radial-gradient(1200px 520px at 78% 12%, rgba(233,161,59,.20), transparent 62%),
    linear-gradient(158deg, #0B2B20 0%, #08402C 46%, #00693E 100%);
  overflow:hidden;
}
.home-hero::after{
  /* ridge line — the Upper Valley silhouette */
  content:""; position:absolute; left:0; right:0; bottom:0; height:190px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 190' preserveAspectRatio='none'><path d='M0,190 L0,120 L90,96 L170,128 L260,72 L340,110 L430,58 L520,104 L610,66 L700,118 L790,80 L880,124 L975,70 L1070,112 L1160,76 L1250,120 L1340,92 L1440,126 L1440,190 Z' fill='rgba(255,255,255,0.045)'/></svg>") no-repeat bottom center;
  background-size:100% 190px;
  pointer-events:none;
}
.home-hero > *{ position:relative; z-index:2; }

.inner-hero{
  position:relative;
  padding:34px 0 44px;
  background:
    radial-gradient(900px 400px at 88% 0%, rgba(233,161,59,.16), transparent 60%),
    linear-gradient(140deg, #0B2B20 0%, #084430 55%, #00693E 100%);
  border-bottom:4px solid var(--amber);
}
@media (min-width:768px){ .inner-hero{ padding:46px 0 62px; } }

.breadcrumb{
  font-family:Archivo,system-ui,sans-serif;
  font-size:12.5px; letter-spacing:.05em;
  color:rgba(255,255,255,.62);
  margin-bottom:20px;
}
.breadcrumb a{ color:rgba(255,255,255,.78); text-decoration:none; }
.breadcrumb a:hover{ color:var(--amber); text-decoration:underline; }
.breadcrumb .sep{ padding:0 8px; color:rgba(255,255,255,.38); }

/* ==========================================================================
   Rebate cards (home + rebate pages)
   ========================================================================== */
.rebate-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--rule);
  border-top:4px solid var(--green);
  padding:26px 24px 24px;
  transition:box-shadow .2s ease, transform .2s ease, border-top-color .2s ease;
}
.rebate-card:hover{
  box-shadow:0 20px 44px -22px rgba(11,43,32,.34);
  transform:translateY(-3px);
  border-top-color:var(--amber);
}
.rebate-card h3{
  font-family:Fraunces,Georgia,serif; font-weight:600;
  font-size:22px; line-height:1.22; color:var(--ink);
  margin:0 0 6px; letter-spacing:-.01em;
}
.rebate-card .lede{
  font-family:Archivo,system-ui,sans-serif;
  font-size:14.5px; color:var(--muted); margin:0 0 16px; line-height:1.55;
}
.rebate-card ul{ list-style:none; margin:0 0 22px; padding:0; flex:1; }
.rebate-card li{
  position:relative;
  font-family:Archivo,system-ui,sans-serif;
  font-size:14px; line-height:1.5; color:var(--ink);
  padding:0 0 0 26px; margin-bottom:11px;
}
.rebate-card li::before{
  content:""; position:absolute; left:0; top:3px;
  width:16px; height:16px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M3 10.5 L8 15.5 L17 5' fill='none' stroke='%2300693E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
}
.rebate-card li strong{ font-weight:700; }

/* State tag on a card */
.state-tag{
  display:inline-block;
  font-family:Archivo,system-ui,sans-serif;
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 9px; margin-bottom:12px;
}
.state-tag.nh{ background:#E4EEE8; color:var(--green); }
.state-tag.vt{ background:#FBF0DE; color:#8A5A11; }
.state-tag.both{ background:var(--ink); color:var(--frost); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-block;
  font-family:Archivo,system-ui,sans-serif;
  font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  text-align:center; text-decoration:none;
  padding:14px 26px;
  border:2px solid transparent;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
  cursor:pointer;
}
.btn-primary{ background:var(--green); color:#fff; }
.btn-primary:hover{ background:var(--ink); }
.btn-amber{ background:var(--amber); color:var(--ink); }
.btn-amber:hover{ background:var(--amber-dk); }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn-ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-outline{ background:transparent; color:var(--green); border-color:var(--green); }
.btn-outline:hover{ background:var(--green); color:#fff; }
.btn-block{ display:block; width:100%; }

/* ==========================================================================
   Prose — long-form body copy on service / town / rebate pages
   ========================================================================== */
.prose{
  font-family:Archivo,system-ui,sans-serif;
  font-size:16.5px; line-height:1.78; color:#243B32;
}
.prose > * + *{ margin-top:1.1em; }
.prose h2{
  font-family:Fraunces,Georgia,serif; font-weight:600;
  font-size:clamp(24px,2.6vw,31px); line-height:1.24; color:var(--ink);
  letter-spacing:-.012em;
  margin-top:2.1em; margin-bottom:.55em;
  padding-top:.9em; border-top:1px solid var(--rule);
}
.prose > h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.prose h3{
  font-family:Fraunces,Georgia,serif; font-weight:600;
  font-size:20px; line-height:1.3; color:var(--ink);
  margin-top:1.75em; margin-bottom:.4em;
}
.prose h4{
  font-family:Archivo,system-ui,sans-serif; font-weight:700;
  font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--green);
  margin-top:1.6em; margin-bottom:.35em;
}
.prose a{ color:var(--green); text-decoration:underline; text-underline-offset:2px; }
.prose a:hover{ color:var(--amber-dk); }
.prose strong{ color:var(--ink); font-weight:700; }
.prose ul, .prose ol{ padding-left:0; list-style:none; margin-left:0; }
.prose ul > li{
  position:relative; padding-left:24px; margin-bottom:.55em;
}
.prose ul > li::before{
  content:""; position:absolute; left:2px; top:.68em;
  width:7px; height:7px; background:var(--amber);
}
.prose ol{ counter-reset:pl; }
.prose ol > li{
  position:relative; padding-left:34px; margin-bottom:.6em; counter-increment:pl;
}
.prose ol > li::before{
  content:counter(pl);
  position:absolute; left:0; top:.16em;
  width:22px; height:22px;
  background:var(--green); color:#fff;
  font-size:12px; font-weight:700; line-height:22px; text-align:center;
}

/* Callout box inside prose */
.callout{
  background:#F1F5F2;
  border-left:4px solid var(--green);
  padding:20px 22px;
  font-size:15.5px; line-height:1.7;
}
.callout.warn{ background:#FDF5E7; border-left-color:var(--amber); }
.callout .callout-title{
  display:block;
  font-weight:700; font-size:12.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--green); margin-bottom:6px;
}
.callout.warn .callout-title{ color:#8A5A11; }
.callout > p{ margin:0; }
.callout > p + p{ margin-top:.7em; }

/* ==========================================================================
   Rebate tables
   ========================================================================== */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--rule); background:#fff; }
table.rebate-table{
  width:100%; min-width:520px; border-collapse:collapse;
  font-family:Archivo,system-ui,sans-serif; font-size:14.5px;
}
table.rebate-table th{
  background:var(--ink); color:#fff;
  text-align:left; font-weight:600; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase;
  padding:13px 16px; white-space:nowrap;
}
table.rebate-table td{
  padding:13px 16px; border-bottom:1px solid var(--rule);
  vertical-align:top; line-height:1.55; color:#243B32;
}
table.rebate-table tr:last-child td{ border-bottom:0; }
table.rebate-table tbody tr:nth-child(even){ background:#F7F9F8; }
table.rebate-table td strong{ color:var(--ink); }
.amt{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--green); white-space:nowrap; }

/* ==========================================================================
   Sidebar
   ========================================================================== */
.sidebar-card{
  background:#fff; border:1px solid var(--rule); padding:24px 22px;
}
.sidebar-card.dark{ background:var(--ink); border-color:var(--ink); color:#fff; }
.sidebar-card h3{
  font-family:Fraunces,Georgia,serif; font-weight:600;
  font-size:19px; line-height:1.28; color:var(--ink); margin:0 0 10px;
}
.sidebar-card.dark h3{ color:#fff; }
.sidebar-card p{
  font-family:Archivo,system-ui,sans-serif;
  font-size:14.5px; line-height:1.65; color:var(--muted); margin:0 0 16px;
}
.sidebar-card.dark p{ color:rgba(255,255,255,.72); }
.side-list{ list-style:none; margin:0; padding:0; }
.side-list li{ border-bottom:1px solid var(--rule); }
.side-list li:last-child{ border-bottom:0; }
.side-list a{
  display:block; padding:11px 0;
  font-family:Archivo,system-ui,sans-serif; font-size:14.5px;
  color:var(--ink); text-decoration:none;
  transition:color .14s ease, padding-left .14s ease;
}
.side-list a:hover{ color:var(--green); padding-left:6px; }
.side-label{
  display:block;
  font-family:Archivo,system-ui,sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--green); margin-bottom:14px;
  padding-bottom:10px; border-bottom:2px solid var(--amber);
}
.sidebar-card.dark .side-label{ color:var(--amber); }

/* ==========================================================================
   Step / process blocks
   ========================================================================== */
.step{ text-align:center; padding:0 8px; }
.step .step-icon{
  width:64px; height:64px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--green); border-radius:50%;
  background:#fff; color:var(--green);
}
.step h3{
  font-family:Fraunces,Georgia,serif; font-weight:600;
  font-size:19px; color:var(--ink); margin:0 0 8px;
}
.step p{
  font-family:Archivo,system-ui,sans-serif;
  font-size:14.5px; line-height:1.65; color:var(--muted); margin:0;
}
.step-num{
  display:inline-block;
  font-family:Archivo,system-ui,sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber-dk); margin-bottom:6px;
}

/* ==========================================================================
   Link cards (resources / towns / counties)
   ========================================================================== */
.link-card{
  display:block; background:#fff; border:1px solid var(--rule);
  padding:22px 22px 20px; text-decoration:none;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.link-card:hover{
  border-color:var(--green);
  box-shadow:0 16px 34px -20px rgba(11,43,32,.34);
  transform:translateY(-2px);
}
.link-card h3{
  font-family:Fraunces,Georgia,serif; font-weight:600;
  font-size:19px; line-height:1.28; color:var(--ink); margin:0 0 7px;
}
.link-card p{
  font-family:Archivo,system-ui,sans-serif;
  font-size:14px; line-height:1.6; color:var(--muted); margin:0 0 12px;
}
.link-card .more{
  font-family:Archivo,system-ui,sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green);
}
.link-card:hover .more{ color:var(--amber-dk); }

/* Compact town chip list */
.town-links{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.town-links a{
  display:inline-block;
  font-family:Archivo,system-ui,sans-serif; font-size:13.5px;
  color:var(--ink); text-decoration:none;
  background:#fff; border:1px solid var(--rule);
  padding:8px 14px;
  transition:border-color .14s ease, color .14s ease, background .14s ease;
}
.town-links a:hover{ border-color:var(--green); color:var(--green); background:#F1F5F2; }

/* ==========================================================================
   FAQ (details/summary)
   ========================================================================== */
.faq{ border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:20px 0;
  font-family:Fraunces,Georgia,serif; font-weight:600;
  font-size:18px; line-height:1.4; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  font-family:Archivo,system-ui,sans-serif; font-weight:400;
  font-size:26px; line-height:1; color:var(--green); flex-shrink:0;
  transition:transform .18s ease;
}
.faq details[open] summary::after{ content:"\2212"; }
.faq details[open] summary{ color:var(--green); }
.faq .faq-body{
  padding:0 0 22px;
  font-family:Archivo,system-ui,sans-serif;
  font-size:16px; line-height:1.75; color:#243B32;
  max-width:74ch;
}
.faq .faq-body p + p{ margin-top:.9em; }
.faq .faq-body a{ color:var(--green); text-decoration:underline; }

/* ==========================================================================
   Lead form
   ========================================================================== */
.lead-form label{
  display:block;
  font-family:Archivo,system-ui,sans-serif;
  font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink); margin-bottom:6px;
}
.lead-form input[type=text],
.lead-form input[type=email],
.lead-form input[type=tel],
.lead-form select,
.lead-form textarea{
  width:100%;
  font-family:Archivo,system-ui,sans-serif; font-size:15.5px; color:var(--ink);
  background:#fff;
  border:1px solid #C3CFC8;
  padding:12px 14px;
  transition:border-color .14s ease, box-shadow .14s ease;
  -webkit-appearance:none; appearance:none; border-radius:0;
}
.lead-form select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 8 L10 13 L15 8' fill='none' stroke='%230B2B20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px;
  padding-right:38px;
}
.lead-form textarea{ min-height:120px; resize:vertical; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(0,105,62,.14);
}
.lead-form .field{ margin-bottom:18px; }
.lead-form .hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }
.form-note{
  font-family:Archivo,system-ui,sans-serif;
  font-size:12.5px; line-height:1.6; color:var(--muted); margin-top:14px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot-head{
  font-family:Archivo,system-ui,sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber); margin:0 0 16px;
}
.foot-list{ list-style:none; margin:0; padding:0; }
.foot-list li{ margin-bottom:9px; }
.foot-list a{
  font-family:Archivo,system-ui,sans-serif;
  font-size:14px; color:rgba(255,255,255,.74); text-decoration:none;
  transition:color .14s ease;
}
.foot-list a:hover{ color:var(--amber); }

/* ==========================================================================
   Misc
   ========================================================================== */
.eyebrow{
  font-family:Archivo,system-ui,sans-serif;
  font-size:11.5px; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--amber-dk);
}
.eyebrow-light{ color:var(--amber); }
.stat-num{
  font-family:Fraunces,Georgia,serif; font-weight:600;
  font-size:clamp(30px,4vw,42px); line-height:1; color:var(--amber);
  letter-spacing:-.02em;
}
.quote-mark{
  font-family:Fraunces,Georgia,serif; font-size:56px; line-height:.6;
  color:var(--amber); opacity:.85;
}
.hr-amber{ border:0; border-top:3px solid var(--amber); width:56px; margin:0; }

@media print{
  nav, .inner-hero, footer, .sss-quote-btn{ display:none !important; }
  body{ background:#fff; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}