/* One continuous backdrop, with content moving through it in native document flow. */
.scroll-site { background: #081b2c; color: #fff; isolation: isolate; }
.scroll-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #102a3f;
}
.scroll-backdrop-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  transform: translate3d(var(--background-x, 0px), var(--background-y, 0px), 0) scale(var(--background-scale, 1.1));
  will-change: transform;
}
.scroll-backdrop-solar { opacity: var(--solar-opacity, 0); }
.scroll-backdrop-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #081b2bd9, #0a203599 45%, #0d263659),
              linear-gradient(180deg, #0e2c4d44, #102a4315 40%, #071a2cde);
}
.scroll-backdrop-shade::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #061321;
  opacity: var(--scene-dim, 0);
}
.scroll-solar-light {
  position: absolute;
  inset: 0;
  opacity: var(--light-opacity, 0);
  background: radial-gradient(ellipse 38vw 45vh at var(--light-x, 50%) var(--light-y, 60%), #e8a73570, #d8782320 45%, transparent 75%);
  pointer-events: none;
}
.scroll-site #main, .scroll-site footer { position: relative; z-index: 1; }
.scroll-site .header {
  position: fixed;
  z-index: 30;
  transition: background .25s ease, box-shadow .25s ease;
}
.scroll-site .header.is-scrolled { background: #0b2237ed; backdrop-filter: blur(14px); box-shadow: 0 8px 30px #06132120; }
.scroll-site .header .dropdown { background: #102b42f7; color: white; border: 1px solid #ffffff1c; }
.scroll-site .header .dropdown a:hover { background: #ffffff10; }
.scroll-progress { position: absolute; inset: auto 0 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.scroll-site .hero.hero-immersive { background: transparent; }
.scroll-site .hero-background, .scroll-site .hero-overlay { visibility: hidden; }
.scroll-site #main > .scroll-scene:not(.hero) {
  min-height: 0;
  padding-block: var(--section-space);
  scroll-margin-top: 90px;
}
.scroll-site .intro { align-items: start; align-content: center; border-color: #ffffff1c; }
.scroll-site .section:not(.faq-layout) { display: flex; flex-direction: column; justify-content: center; }
.scroll-site .section-head { width: 100%; }
.scroll-site .eyebrow { color: #e0bc6b; }
.scroll-site p, .scroll-site .section-head p, .scroll-site .intro p,
.scroll-site .solution-card p, .scroll-site .resource p,
.scroll-site .step p, .scroll-site .faq-list details p,
.scroll-site .faq-layout > div > p { color: #cfdae4; }
.scroll-site .text-link { color: #f3f6f8; border-color: #ffffff40; }
.scroll-site .text-link:hover { color: var(--gold); border-color: var(--gold); }
.scroll-site .solution-card { padding: 16px; border: 1px solid #ffffff22; background: #10283db3; border-radius: 14px; }
.scroll-site .solution-card .image { aspect-ratio: 1.1; }
.scroll-site .solution-card h3 { color: #fff; }
.scroll-site .solution-card p { font-size: 13px; }
.scroll-site .planner-band { background: #0c263bc7; border: 1px solid #ffffff25; margin-block: 20px; padding-inline: clamp(24px, 4vw, 48px); }
.scroll-site .mini-planner { background: #f8fafc; color: var(--ink); box-shadow: 0 12px 40px #05142325; }
.scroll-site .mini-planner label { color: var(--ink); }
.scroll-site .mini-planner small { color: #5b6e7d; }
.scroll-site .mini-planner input { background: #f2f5f7; }
.scroll-site .step { border-color: #ffffff35; }
.scroll-site .step-num { color: #e0bc6b; }
.scroll-site .visit-banner { background: #0d2941a6; border: 1px solid #ffffff20; }
.scroll-site .visit-banner img { opacity: .16; }
.scroll-site .visit-banner::after { background: linear-gradient(90deg, #0d2941a0, transparent); }
.scroll-site .visit-banner .button.white { background: transparent; color: #fff; border-color: #ffffff70; }
.scroll-site .project-placeholder { background: #0c263bc4; border-color: #ffffff25; }
.scroll-site .project-placeholder .placeholder-art { background-color: #ffffff04; border-color: #ffffff20; }
.scroll-site .placeholder-art svg { stroke: #ddc688; }
.scroll-site .resource { background: #10283db3; border: 1px solid #ffffff25; border-radius: 12px; padding: 26px; }
.scroll-site .resource .type { color: #e0bc6b; }
.scroll-site .faq-layout { display: grid; align-items: start; align-content: center; }
.scroll-site .faq-layout > div { width: 100%; }
.scroll-site .faq-layout h2 { max-width: 100%; }
.scroll-site .faq-list { padding: 8px 28px; background: #0c263bc4; border: 1px solid #ffffff25; border-radius: 12px; }
.scroll-site .faq-list details { border-color: #ffffff20; }
.scroll-site .faq-list details:last-child { border-bottom: 0; }
.scroll-site .faq-list summary { color: #f4f7fa; }
.scroll-site .faq-list summary::after { color: #e0bc6b; }
.final-cta {
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #10283d;
  background-image: linear-gradient(90deg, #081b2bd9, #0b2237b8, #081b2bd9), url('solar-rooftop-hero.png');
  background-size: cover;
  background-position: center 65%;
  border: 1px solid #e0bc6b45;
  margin-bottom: var(--section-space);
}
.final-cta h2 { color: #fff; }
.final-cta .eyebrow { color: #e0bc6b; }
.final-cta p { color: #cfdae4; }
.final-cta .button { background: white; color: #17384e; border-color: white; }
.final-cta .button.outline { background: transparent; color: white; border-color: #ffffff60; }
.final-cta .actions { width: 100%; }
.final-cta .button:hover, .final-cta .button:focus-visible { background: #264f6d; color: #fff; border-color: #ffffff80; }
.scroll-site footer { background: #081b2cef; border-top: 1px solid #ffffff20; }
.scroll-reveal { opacity: 1; }
.scroll-site .scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity .7s ease var(--reveal-delay, 0ms), transform .8s cubic-bezier(.2,.65,.25,1) var(--reveal-delay, 0ms);
}
.scroll-site .scroll-reveal.is-visible, .scroll-site .scroll-reveal:focus-within { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .scroll-site .header nav { z-index: 1; }
  .scroll-site #main > .scroll-scene:not(.hero) { min-height: 0; padding-block: var(--section-space); }
  .scroll-site .solution-card .image { aspect-ratio: 1.3; }
  .scroll-site .resource { padding: 22px; }
}
@media (max-width: 700px) {
  .scroll-backdrop-image { object-position: 62% center; }
  .scroll-site #main > .scroll-scene:not(.hero) { min-height: 0; padding-block: var(--section-space); scroll-margin-top: 100px; }
  .scroll-site .intro { gap: 28px; }
  .scroll-site .planner-band { margin-block: 28px; }
  .scroll-site .visit-banner { padding-inline: 24px; }
  .scroll-site .final-cta { margin-bottom: var(--section-space); }
  .scroll-site .faq-list { padding: 4px 20px; }
  .scroll-site .solution-card { padding: 14px; }
  .scroll-site .scroll-reveal { transform: translate3d(0, 20px, 0); transition-duration: .55s; }
  .scroll-site .scroll-reveal.is-visible { transform: none; }
}
/* The calculator is a compact panel, rather than a full-height scroll chapter. */
.scroll-site #main > .planner-band.scroll-scene {
  min-height: 0;
  padding-block: clamp(28px, 3vw, 40px);
  margin-block: 16px;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-site .scroll-reveal { opacity: 1; transform: none; transition: none; }
  .scroll-backdrop-image { transform: none; will-change: auto; }
  .scroll-backdrop-solar { opacity: 0; }
  .scroll-solar-light { display: none; }
  .scroll-site .header { transition: none; }
}
@media print {
  .scroll-backdrop, .scroll-progress { display: none; }
  .scroll-site { background: white; color: #152f45; }
  .scroll-site .header { position: static; }
  .scroll-site .scroll-reveal { opacity: 1; transform: none; }
  .scroll-site #main > .scroll-scene { min-height: 0 !important; padding-block: 24px !important; }
  .scroll-site p, .scroll-site h1, .scroll-site h2, .scroll-site h3, .scroll-site a { color: #152f45 !important; }
  .scroll-site .solution-card, .scroll-site .planner-band, .scroll-site .visit-banner,
  .scroll-site .project-placeholder, .scroll-site .resource, .scroll-site .faq-list,
  .scroll-site .final-cta { background: white !important; border-color: #dfe5ea; }
}