/* Two motion cues: content arrivals and restrained scene depth.
   All content is visible by default; JS opts into motion only when allowed. */
:root { --ease-out: cubic-bezier(.16,1,.3,1); }
h1,h2 { text-wrap: balance; }
.header {
  position: fixed;
  inset: 0 0 auto;
  background: var(--cream);
  color: var(--ink);
  border-color: #0b5cff33;
  transition: background .35s, box-shadow .35s;
}
.header.is-scrolled,.header:has(.menu-toggle[aria-expanded="true"]) {
  background: var(--cream);
  box-shadow: 0 8px 28px #071d4818;
}
.brand img { width: 145px; }
.hero {
  height: 100svh;
  min-height: 720px;
  max-height: 1150px;
  padding: 120px 0 115px;
  background: var(--ink) url('/assets/solar-hero-poster.jpg') center/cover;
}
.hero-content { min-width: 0; margin-top: 0; width: min(940px,calc(100% - 48px)); }
.hero .eyebrow { margin-bottom: 24px; }
.hero h1 { font-size: clamp(92px,10.1vw,145px); line-height: .96; }
.hero h1>span { display: block; }
.hero h1>span:last-child { margin-top: 5px; }
.hero-description { font-size: 17px; max-width: 580px; margin: 26px auto 28px; }
.hero-shade { background: linear-gradient(180deg,#05112585 0%,#07142678 40%,#07101e85 68%,#070f1bd9 100%); }
.hero-note { color: #ffffffe8; margin-top: 14px; }
.hero-zip { width: min(452px,100%); max-width: 100%; box-shadow: 0 10px 35px #0002; }
.hero-zip .button { min-height: 51px; padding-inline: 27px; }
.advisor { top: calc(var(--header) + 22px); right: 34px; width: 241px; background: #f9f4edf5; border-radius: 5px; }
.advisor summary { padding: 11px 14px; }
.advisor summary img { width: 30px; height: 30px; }
.advisor summary small { font-size: 8px; }
.advisor summary strong { font-size: 13px; }
.explore { bottom: 39px; gap: 12px; }
.explore:before { content: ''; width: 1px; height: 29px; margin: auto; background: #ffffff70; }
.explore span { display: none; }
.film-scene { position: relative; isolation: isolate; overflow: hidden; }
.scene-video {
  position: absolute;
  inset: -5% 0;
  height: 110%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
  transform: translate3d(0,var(--media-drift,0px),0);
}
.video-toggle {
  position: absolute;
  right: 34px;
  bottom: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: auto;
  min-width: 108px;
  height: 42px;
  padding: 0 16px;
  border-radius: 30px;
  border-color: #ffffff70;
  background: #0c14233d;
  color: #fff;
  font-size: 11px;
  letter-spacing: .02em;
}
.video-toggle:hover { background: #ffffff25; }
.playback-icon { font-size: 14px; }
.video-toggle.is-unavailable { opacity: .55; }
.section { padding-block: 128px; }
.products,.choice-section {
  position: relative;
  margin-top: -26px;
  border-radius: 26px 26px 0 0;
  padding-top: 115px;
  padding-bottom: 100px;
  min-height: 0;
  background: var(--cream);
  z-index: 1;
}
.product-grid { gap: 64px; }
.product-copy h2 { font-size: clamp(48px,5.05vw,74px); }
.product-art-disc {
  background: #e9effa;
  border: 1px solid #d8e4f6;
  top: 1%;
  width: 94%;
}
.product-art-disc:after { content: ''; position: absolute; inset: 8%; border: 1px solid #ccd9ed; border-radius: 50%; }
.product-art img { position: relative; height: 470px; translate: 0 var(--object-drift,0px); }
.product-art .art-caption { margin-top: 20px; font-size: 12px; }
.carousel-controls { margin-top: 21px; gap: 20px; }
.specs { gap: 20px; }
.specs h3 { font-size: 11px; letter-spacing: .04em; }
.specs p { font-size: 12px; }
.prosper-section { padding-block: 110px 88px; }
.prosper-section .section-intro { max-width: 890px; }
.prosper-section .lead { max-width: 670px; }
.brand-watermark { width: 830px; right: -130px; top: 15px; opacity: .06; filter: none; transform: rotate(-10deg); }
.service-grid { margin-top: 64px; }
.service-grid>div { padding-top: 30px; min-width: 0; }
.service-icon svg,.step-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.service-grid p { font-size: 13px; }
.savings .section-intro h2 { max-width: 1120px; font-size: clamp(44px,5.15vw,74px); }
.savings .section-intro .lead { max-width: 565px; }
.calculator { margin-top: 64px; }
.bill-range { appearance: none; -webkit-appearance: none; background: transparent; height: 32px; width: 67%; margin-top: 6px; }
.bill-range::-webkit-slider-runnable-track { height: 3px; border-radius: 5px; background: #c9d1dc; }
.bill-range::-moz-range-track { height: 3px; border-radius: 5px; background: #c9d1dc; }
.bill-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; height: 18px; width: 18px; margin-top: -7.5px; background: var(--blue); border: 4px solid var(--cream); box-shadow: 0 0 0 1px var(--blue); border-radius: 50%; }
.bill-range::-moz-range-thumb { height: 10px; width: 10px; background: var(--blue); border: 4px solid var(--cream); box-shadow: 0 0 0 1px var(--blue); border-radius: 50%; }
.range-labels { width: 67%; }
.savings-highlight { border-radius: 5px; padding: 28px 32px; }
.vision-grid { gap: 84px; }
.proposal-stack { translate: 0 var(--object-drift,0px); }
.proposal-card { box-shadow: 0 30px 60px #18244117; }
.proposal-stack:after { background: #e9effa; }
.feature-list { gap: 28px; }
.feature-list>div>span { border: 1px solid #e2dfd7; background: transparent; }
.phone { translate: 0 var(--object-drift,0px); box-shadow: 15px 30px 50px #17274126; }
.phone-scene:before { inset: 13% -6% 12%; }
.experience-grid { gap: 115px; }
.journey { padding-block: 120px 105px; }
.journey-shade { background: linear-gradient(180deg,#081a2bbd,#0b1f33ad 45%,#081725e0); }
.journey-cards { gap: 14px; overflow: auto; }
.journey-cards article { background: #07182c5e; backdrop-filter: blur(7px); border-radius: 4px; border-color: #ffffff42; flex-basis: calc((100% - 56px)/5); padding-inline: 22px; }
.step-icon { margin-top: 27px; }
.journey-cards h3 { font-size: 18px; }
.journey-cards p { font-size: 12px; }
.stories { padding-block: 116px 122px; }
.story-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; }
.story-card { height: 415px; border-radius: 4px; }
.story-card:nth-child(2) { margin-top: 36px; }
.story-card:nth-child(3) { margin-top: 72px; }
.story-overlay { background: linear-gradient(180deg,#0005,#0000 30%,#000c); }
.closing {
  min-height: 760px;
  height: 91svh;
  max-height: 1060px;
  display: grid;
  align-items: center;
  padding: 120px 0 135px;
  background: var(--blue) url('/assets/solar-closing-poster.jpg') center/cover;
}
.closing-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,#0715216b,#061a2b69 56%,#0b5cff 100%); }
.closing h2 { font-size: clamp(64px,7.6vw,110px); line-height: 1.02; }
.closing .lead { text-wrap: balance; font-size: 17px; }
.closing .video-toggle { bottom: 55px; }
.footer { padding-top: 24px; border-top: 0; }
.footer-main { border-top: 1px solid #ffffff4d; padding-top: 36px; }
.button span,.text-link span { transition: transform .25s var(--ease-out); }
.button:hover span,.text-link:hover span { transform: translate(2px,-2px); }

/* The observer only applies hidden states when motion is enabled. */
.reveal-item { transition: opacity .8s var(--ease-out), translate .8s var(--ease-out); transition-delay: var(--reveal-delay,0ms); }
.reveal-pending { opacity: 0; translate: 0 28px; }
.reveal-pending:focus-within { opacity: 1; translate: none; }
@media (prefers-reduced-motion:no-preference) {
  .motion-ready .hero-content>* { animation: hero-arrive .95s var(--ease-out) both; }
  .motion-ready .hero-content>:nth-child(2) { animation-delay: .08s; }
  .motion-ready .hero-content>:nth-child(3) { animation-delay: .18s; }
  .motion-ready .hero-content>:nth-child(4) { animation-delay: .25s; }
  .motion-ready .hero-content>:nth-child(5) { animation-delay: .32s; }
  @keyframes hero-arrive { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width:1240px) {
  .product-grid { gap: 32px; }
  .product-art img { height: 420px; }
  .vision-grid { gap: 50px; }
  .experience-grid { gap: 65px; }
  .journey-cards article { flex-basis: calc((100% - 28px)/3); }
  .journey-controls { display: flex; }
  .story-card { height: 370px; }
}
@media (max-width:960px) {
  .section { padding-block: 88px; }
  .hero { min-height: 720px; padding-top: 130px; }
  .hero h1 { font-size: 110px; }
  .hero-content { margin-top: 0; }
  .advisor { right: 25px; }
  .products { padding-top: 86px; }
  .product-copy h2 { font-size: 49px; }
  .product-art img { height: 345px; }
  .specs { gap: 13px; }
  .specs h3 { font-size: 9px; }
  .specs p { font-size: 11px; }
  .service-grid p { font-size: 11px; }
  .vision-grid { gap: 42px; }
  .phone-scene:before { inset: 13% -7% 12%; }
  .experience-grid { gap: 40px; }
  .story-card:first-child { height: 340px; }
  .story-card:nth-child(2),.story-card:nth-child(3) { margin-top: 0; }
  .story-grid { grid-template-columns: 1fr 1fr; }
  .closing { min-height: 720px; }
  .footer { padding-top: 10px; }
}
@media (max-width:640px) {
  .section { padding-block: 72px; }
  .header { padding-inline: 20px; }
  .brand img { width: 124px; }
  .hero { min-height: 720px; max-height: 940px; padding: 143px 0 123px; }
  .hero-content { width: calc(100% - 40px); }
  .hero .eyebrow { font-size: 9px; margin-bottom: 22px; letter-spacing: .17em; }
  .hero h1 { font-size: clamp(80px,22vw,104px); line-height: .97; }
  .hero h1 .hero-first { font-size: .78em; }
  .hero h1>span:last-child { margin-top: 9px; }
  .hero-description { font-size: 15px; line-height: 1.7; margin: 25px auto 25px; max-width: 340px; }
  .hero-zip .button { padding: 12px 18px; min-height: 49px; gap: 12px; font-size: 12px; }
  .hero-zip input { padding-left: 14px; font-size: 12px; }
  .hero-note { font-size: 10px; margin-top: 14px; }
  .advisor { top: 83px; right: 20px; width: 207px; }
  .advisor summary { padding: 8px 11px; gap: 9px; }
  .advisor summary img { width: 26px; height: 26px; }
  .advisor summary small { font-size: 7px; }
  .advisor summary strong { font-size: 12px; }
  .advisor-contact { padding-left: 46px; }
  .explore { left: 21px; transform: none; bottom: 42px; padding: 0; flex-direction: row; align-items: center; font-size: 8px; gap: 10px; }
  .explore:before { height: 22px; }
  .video-toggle { right: 20px; bottom: 34px; min-width: 100px; height: 40px; padding-inline: 13px; font-size: 10px; }
  .products { margin-top: -18px; border-radius: 18px 18px 0 0; padding-top: 68px; padding-bottom: 56px; }
  .product-grid { display: flex; flex-direction: column; gap: 28px; }
  .product-copy { display: contents; }
  .product-intro { order: 0; width: 100%; }
  .product-copy h2 { font-size: clamp(42px,12.5vw,53px); }
  .product-copy .lead { max-width: none; }
  .product-art { order: 1; max-width: 375px; }
  .product-art img { height: 300px; translate: none; }
  .product-art img.photo-product { height: 275px; }
  .product-art-disc { width: 86%; top: 0; }
  .product-art .art-caption { margin-top: 8px; font-size: 11px; }
  .carousel-controls { margin-top: 13px; }
  .specs { order: 2; width: 100%; margin-top: 0; padding-top: 24px; gap: 15px; }
  .specs strong { font-size: 35px; }
  .specs small { font-size: 14px; }
  .specs h3 { font-size: 11px; line-height: 1.5; }
  .specs p { font-size: 12px; line-height: 1.6; margin-top: 6px; }
  .product-copy .text-link { order: 3; align-self: flex-start; font-size: 11px; margin-top: -15px; }
  .prosper-section h2 { font-size: clamp(42px,12.5vw,52px); }
  .service-grid { margin-top: 35px; }
  .brand-watermark { width: 530px; max-width: none; right: -180px; top: 160px; opacity: .055; }
  .service-grid p { font-size: 12px; }
  .service-grid h3 { font-family: Geist,sans-serif; font-size: 20px; font-weight: 600; }
  .service-grid>div { padding-top: 24px; }
  .service-icon svg { width: 29px; height: 29px; }
  .savings .section-intro h2 { font-size: clamp(40px,11.2vw,48px); }
  .calculator { margin-top: 39px; }
  .savings-highlight { padding: 25px; }
  .vision-grid,.experience-grid { display: flex; flex-direction: column; gap: 34px; }
  .vision-copy,.experience-copy { display: contents; }
  .vision-intro,.experience-intro { order: 0; width: 100%; }
  .proposal-stack,.phone-scene { order: 1; translate: none; }
  .feature-list,.experience-features { order: 2; margin-top: 0; gap: 23px; width: 100%; }
  .experience-copy>.text-link { order: 3; align-self: flex-start; margin-top: -18px; }
  .vision h2,.experience h2 { font-size: clamp(31px,9.2vw,39px); }
  .proposal-stack { padding-top: 8px; padding-bottom: 15px; }
  .phone { translate: none; }
  .phone-scene { margin: 12px 0 4px; }
  .phone-scene:before { inset: 13% 0 12%; }
  .phone-caption { margin-top: 31px; }
  .journey-cards { margin-top: 34px; }
  .journey-cards article { flex-basis: 84%; padding: 26px; }
  .journey-cards h3 { font-size: 25px; }
  .journey-cards p { font-size: 14px; }
  .step-icon svg { width: 37px; height: 37px; }
  .stories-heading h2 { font-size: 49px; }
  .story-grid { gap: 20px; }
  .story-card,.story-card:first-child { height: 365px; }
  .story-card:nth-child(2) { width: calc(100% - 25px); align-self: flex-end; }
  .story-card:nth-child(3) { width: calc(100% - 25px); }
  .closing { min-height: 710px; height: 90svh; max-height: 850px; padding: 105px 0 140px; }
  .closing h2 { font-size: clamp(47px,13.7vw,62px); }
  .closing .lead { font-size: 15px; max-width: 335px; line-height: 1.7; }
  .closing .centered-form { margin-top: 28px; }
  .closing .video-toggle { bottom: 44px; }
  .footer { padding-top: 0; }
  .footer-main { padding-top: 30px; }
  .reveal-pending { translate: 0 20px; }
}
@media (max-width:360px) {
  .hero { min-height: 720px; }
  .hero h1 { font-size: clamp(70px,22vw,78px); }
  .hero h1 .hero-first { font-size: .74em; }
  .hero-description { font-size: 14px; }
  .hero-zip .button { font-size: 11px; padding-inline: 13px; gap: 8px; }
  .hero-zip input { padding-left: 10px; font-size: 11px; }
  .specs { grid-template-columns: 1fr; gap: 19px; }
  .specs>div { display: grid; grid-template-columns: 108px 1fr; gap: 0 13px; }
  .specs strong { grid-row: 1/3; font-size: 38px; align-self: center; }
  .specs h3 { font-size: 11px; margin: 0; }
  .specs p { font-size: 12px; }
  .closing h2 { font-size: 45px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .reveal-pending { opacity: 1; translate: none; }
  .scene-video { transform: none; }
  .product-art img,.proposal-stack,.phone { translate: none; }
  .video-toggle { display: flex; }
}