/* =====================================================================
   Solar Harbour: Residential solar page (residential.php)
   Loaded by residential.php. Upload to: assets/css/sh-rs.css
   Colours: navy #18457b, gold #f8bc2d and white. Every class starts with
   "sh-rs" so nothing here clashes with the theme.
   ===================================================================== */
.sh-rs {
  --sh-rs-navy: #18457b;
  --sh-rs-gold: #f8bc2d;
  --sh-rs-navy-rgb: 24, 69, 123;
  --sh-rs-gold-rgb: 248, 188, 45;
  --sh-rs-ink-2: rgba(24, 69, 123, .78);
  --sh-rs-line: rgba(24, 69, 123, .14);
  --sh-rs-head: var(--font-primary, "Exo"), system-ui, sans-serif;
  display: block; margin: 0; padding: 0; overflow-x: clip;
  font-family: var(--font-secondary, "Albert Sans"), system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.6; font-weight: 400; text-align: left; color: var(--sh-rs-navy);
}
.sh-rs *, .sh-rs *::before, .sh-rs *::after { box-sizing: border-box; }
/* keep the site's global p / ul / li / heading styles out (zero-specificity, so the rules below still win) */
:where(.sh-rs) p, :where(.sh-rs) h1, :where(.sh-rs) h2, :where(.sh-rs) h3, :where(.sh-rs) figure { margin: 0; color: inherit; }
:where(.sh-rs) ul, :where(.sh-rs) ol, :where(.sh-rs) ul li, :where(.sh-rs) ol li { margin: 0; padding: 0; list-style: none; font-size: inherit; line-height: inherit; color: inherit; }
:where(.sh-rs) a { text-decoration: none; }
:where(.sh-rs) button { font: inherit; }
.sh-rs a:focus-visible, .sh-rs button:focus-visible { outline: 3px solid var(--sh-rs-gold); outline-offset: 3px; }
.sh-rs__wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.sh-rs__section { padding: 88px 0; }
.sh-rs__h2 { font-family: var(--sh-rs-head); font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -0.01em; color: var(--sh-rs-navy); text-wrap: balance; }
.sh-rs__sub { margin-top: 12px; max-width: 62ch; font-size: 17px; line-height: 1.65; color: var(--sh-rs-ink-2); }
.sh-rs__p { margin-top: 16px; max-width: 62ch; font-size: 17px; line-height: 1.7; color: var(--sh-rs-ink-2); }

.sh-rs__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 8px; border: 2px solid transparent;
  font-family: var(--sh-rs-head); font-weight: 700; font-size: 16.5px; line-height: 1; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.sh-rs__btn svg { width: 18px; height: 18px; flex: none; }
.sh-rs__btn--gold, .sh-rs__btn--gold:visited { background: var(--sh-rs-gold); color: var(--sh-rs-navy); }
.sh-rs__btn--gold:hover, .sh-rs__btn--gold:focus-visible { background: var(--sh-rs-gold); color: var(--sh-rs-navy); transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(var(--sh-rs-gold-rgb), .9); }
.sh-rs__btn--ghost, .sh-rs__btn--ghost:visited { border-color: rgba(255, 255, 255, .7); color: #ffffff; background: transparent; }
.sh-rs__btn--ghost:hover, .sh-rs__btn--ghost:focus-visible { background: #ffffff; border-color: #ffffff; color: var(--sh-rs-navy); }

/* ===================================================================
   1. Banner: a home powering up
   =================================================================== */
.sh-rs__banner { position: relative; isolation: isolate; overflow: hidden; color: #ffffff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 60%), var(--sh-rs-navy); }
.sh-rs__banner::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg, rgba(var(--sh-rs-navy-rgb), .92) 0%, rgba(var(--sh-rs-navy-rgb), .7) 38%, rgba(var(--sh-rs-navy-rgb), .15) 75%, rgba(var(--sh-rs-navy-rgb), 0) 100%); }
.sh-rs__banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--sh-rs-gold) 0%, rgba(var(--sh-rs-gold-rgb), .6) 55%, rgba(var(--sh-rs-gold-rgb), 0) 100%); }
.sh-rs__banner-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 80px; }
.sh-rs__crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, .75); }
.sh-rs__crumbs a, .sh-rs__crumbs a:visited { color: rgba(255, 255, 255, .88); }
.sh-rs__crumbs a:hover { color: var(--sh-rs-gold); }
.sh-rs__crumbs li + li::before { content: "/"; margin-right: 8px; color: rgba(255, 255, 255, .45); }
.sh-rs__title { margin-top: 18px; font-family: var(--sh-rs-head); font-weight: 800; font-size: clamp(38px, 5.2vw, 64px); line-height: 1.04; letter-spacing: -0.025em; color: #ffffff; text-wrap: balance; }
.sh-rs__rule { display: block; width: 64px; height: 4px; margin-top: 22px; border-radius: 2px; background: var(--sh-rs-gold); }
.sh-rs__lead { margin-top: 20px; max-width: 52ch; font-size: 18.5px; line-height: 1.6; color: rgba(255, 255, 255, .9); }
.sh-rs__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.sh-rs__ticks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .92); }
.sh-rs__ticks li { display: inline-flex; align-items: center; gap: 8px; }
.sh-rs__ticks svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--sh-rs-gold); fill: none; stroke: var(--sh-rs-navy); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }

.sh-rs__sun {
  position: absolute; z-index: -1; right: 6%; bottom: -250px; width: 460px; height: 460px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--sh-rs-gold) 0 55%, rgba(var(--sh-rs-gold-rgb), .35) 56%, rgba(var(--sh-rs-gold-rgb), .12) 66%, rgba(var(--sh-rs-gold-rgb), 0) 72%);
  opacity: .9; animation: sh-rs-rise 1.6s cubic-bezier(.16, .8, .24, 1) .1s both;
}
@keyframes sh-rs-rise { from { transform: translateY(70px); opacity: 0; } to { transform: none; opacity: .9; } }
/* solar field to the horizon, with a sweep of sunlight */
.sh-rs__banner-art { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.sh-rs__panelfield {
  position: absolute; left: -25%; right: -25%; bottom: -12%; height: 70%;
  background: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22116%22 height=%22188%22 viewBox=%220 0 116 188%22 fill=%22none%22 stroke=%22%23ffffff%22%3E%3Crect x=%224%22 y=%224%22 width=%22108%22 height=%22180%22 rx=%221.5%22 stroke-width=%221.6%22/%3E%3Cg stroke-width=%22.8%22%3E%3Cpath d=%22M22 4V184%22/%3E%3Cpath d=%22M40 4V184%22/%3E%3Cpath d=%22M58 4V184%22/%3E%3Cpath d=%22M76 4V184%22/%3E%3Cpath d=%22M94 4V184%22/%3E%3Cpath d=%22M4 22H112%22/%3E%3Cpath d=%22M4 40H112%22/%3E%3Cpath d=%22M4 58H112%22/%3E%3Cpath d=%22M4 76H112%22/%3E%3Cpath d=%22M4 94H112%22/%3E%3Cpath d=%22M4 112H112%22/%3E%3Cpath d=%22M4 130H112%22/%3E%3Cpath d=%22M4 148H112%22/%3E%3Cpath d=%22M4 166H112%22/%3E%3C/g%3E%3C/svg%3E') repeat 0 0 / 116px 188px; opacity: .55;
  transform: perspective(700px) rotateX(60deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
}
.sh-rs__panelfield-lit {
  position: absolute; inset: 0; background: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22116%22 height=%22188%22 viewBox=%220 0 116 188%22 fill=%22none%22 stroke=%22%23f8bc2d%22%3E%3Crect x=%224%22 y=%224%22 width=%22108%22 height=%22180%22 rx=%221.5%22 stroke-width=%221.6%22/%3E%3Cg stroke-width=%22.8%22%3E%3Cpath d=%22M22 4V184%22/%3E%3Cpath d=%22M40 4V184%22/%3E%3Cpath d=%22M58 4V184%22/%3E%3Cpath d=%22M76 4V184%22/%3E%3Cpath d=%22M94 4V184%22/%3E%3Cpath d=%22M4 22H112%22/%3E%3Cpath d=%22M4 40H112%22/%3E%3Cpath d=%22M4 58H112%22/%3E%3Cpath d=%22M4 76H112%22/%3E%3Cpath d=%22M4 94H112%22/%3E%3Cpath d=%22M4 112H112%22/%3E%3Cpath d=%22M4 130H112%22/%3E%3Cpath d=%22M4 148H112%22/%3E%3Cpath d=%22M4 166H112%22/%3E%3C/g%3E%3C/svg%3E') repeat 0 0 / 116px 188px;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 40%, #000 50%, transparent 60%, transparent 100%);
          mask-image: linear-gradient(100deg, transparent 0%, transparent 40%, #000 50%, transparent 60%, transparent 100%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: sh-rs-sweep 8s ease-in-out 1s infinite;
}
@keyframes sh-rs-sweep { 0% { -webkit-mask-position: 0% 0; mask-position: 0% 0; } 45%, 100% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
/* little sparks of energy drift up from the field */
.sh-rs__sparks { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sh-rs__sparks i { position: absolute; left: var(--x); bottom: -20px; width: 10px; height: 10px; border-radius: 50%; background: var(--sh-rs-gold); box-shadow: 0 0 0 5px rgba(var(--sh-rs-gold-rgb), .22); opacity: 0; animation: sh-rs-spark var(--t) linear var(--d) infinite; }
@keyframes sh-rs-spark { 0% { transform: translateY(0) scale(.6); opacity: 0; } 12% { opacity: .9; } 75% { opacity: .6; } 100% { transform: translateY(-480px) scale(1); opacity: 0; } }
/* the scene */
.sh-rs__scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.sh-rs__sunrays { transform-box: fill-box; transform-origin: 50% 50%; animation: sh-rs-spin 18s linear infinite; }
@keyframes sh-rs-spin { to { transform: rotate(360deg); } }
.sh-rs__beam { animation: sh-rs-beam 1.2s linear infinite; }
@keyframes sh-rs-beam { to { stroke-dashoffset: -32; } }
.sh-rs__panels { animation: sh-rs-glow 3s ease-in-out infinite; }
@keyframes sh-rs-glow { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 8px rgba(248, 188, 45, .7)); } }
.sh-rs__win { fill: #18457b; animation: sh-rs-win 6s ease-in-out infinite; }
@keyframes sh-rs-win { 0%, 20% { fill: #18457b; } 30%, 90% { fill: #f8bc2d; } 100% { fill: #18457b; } }
.sh-rs__cell { fill: rgba(24, 69, 123, .18); animation: sh-rs-cell 6s ease-in-out infinite; animation-delay: calc(var(--i) * .7s + 1s); }
@keyframes sh-rs-cell { 0%, 10% { fill: rgba(24, 69, 123, .18); } 20%, 85% { fill: #f8bc2d; } 100% { fill: rgba(24, 69, 123, .18); } }
.sh-rs__pulse { offset-path: path("M262 150 C 330 150, 360 190, 372 214"); offset-rotate: 0deg; opacity: 0; animation: sh-rs-pulse 2s ease-in infinite; }
@keyframes sh-rs-pulse { 0% { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@supports not (offset-path: path("M0 0 L1 1")) { .sh-rs__pulse { display: none; } }

/* ===================================================================
   2. Intro: animated roof design + the story
   =================================================================== */
.sh-rs__intro { position: relative; }
.sh-rs__intro-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.sh-rs__design { position: relative; margin: 0; padding: 22px 22px 18px; border-radius: 24px; background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 55%), var(--sh-rs-navy); box-shadow: 0 44px 80px -42px rgba(var(--sh-rs-navy-rgb), .8); }
.sh-rs__design::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: var(--sh-rs-gold); }
.sh-rs__design svg { display: block; width: 100%; height: auto; overflow: visible; }
.sh-rs__design-tag { position: absolute; left: 22px; top: 22px; padding: 9px 14px; border-radius: 12px; background: #ffffff; font-size: 14px; font-weight: 600; color: var(--sh-rs-navy); box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .45); }
.sh-rs__design-tag b { display: inline-block; margin-right: 4px; padding: 1px 8px; border-radius: 6px; background: var(--sh-rs-gold); font-weight: 800; }
/* the story loops every 10s: 1 measure the roof, 2 place the panels, 3 power flows, 4 the bill comes down */
.sh-rs__cloud { animation: sh-rs-cloud 26s linear infinite; }
.sh-rs__cloud--b { animation-duration: 34s; animation-delay: -14s; }
@keyframes sh-rs-cloud { from { transform: translate(-60px, 70px); } to { transform: translate(620px, 40px); } }
.sh-rs__dsun { offset-path: path("M24 214 Q 200 -40 392 120"); offset-rotate: 0deg; animation: sh-rs-day 10s ease-in-out infinite; }
@keyframes sh-rs-day { 0% { offset-distance: 6%; } 55% { offset-distance: 52%; } 100% { offset-distance: 6%; } }
@supports not (offset-path: path("M0 0 L1 1")) { .sh-rs__dsun { transform: translate(205px, 85px); } }
.sh-rs__dglow { opacity: 0; animation: sh-rs-glowon 10s ease-in-out infinite; }
@keyframes sh-rs-glowon { 0%, 40% { opacity: 0; } 50%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
/* 1. measuring */
.sh-rs__measure { animation: sh-rs-measure 10s ease-in-out infinite; }
.sh-rs__measure path { stroke-dashoffset: 100; animation: sh-rs-draw 10s ease-out infinite; }
@keyframes sh-rs-measure { 0% { opacity: 1; } 26% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes sh-rs-draw { 0% { stroke-dashoffset: 100; } 14%, 100% { stroke-dashoffset: 0; } }
.sh-rs__measure circle { transform-box: fill-box; transform-origin: 50% 50%; animation: sh-rs-blip 1s ease-in-out infinite; }
@keyframes sh-rs-blip { 50% { transform: scale(1.5); } }
/* 2. panels drop in one by one (8 panels, 0.25s apart, starting at 1.6s) */
.sh-rs__pv { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: sh-rs-place 10s cubic-bezier(.2, 1.3, .4, 1) infinite; animation-delay: calc(1.6s + var(--i) * .25s); }
@keyframes sh-rs-place { 0% { opacity: 0; transform: translateY(-22px) scale(.8); } 5% { opacity: 1; transform: none; } 72% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: none; } }
.sh-rs__glint { stroke-opacity: 0; animation: sh-rs-glint 10s ease-in-out infinite; }
@keyframes sh-rs-glint { 0%, 38% { stroke-opacity: 0; transform: translate(0, 0); } 41% { stroke-opacity: .55; } 47%, 100% { stroke-opacity: 0; transform: translate(60px, -34px); } }
/* 3. power flows */
.sh-rs__flowing { opacity: 0; animation: sh-rs-flowing 10s ease-in-out infinite; }
@keyframes sh-rs-flowing { 0%, 44% { opacity: 0; } 48%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
.sh-rs__flowing path { animation: sh-rs-dash .8s linear infinite; }
@keyframes sh-rs-dash { to { stroke-dashoffset: -20; } }
.sh-rs__dot1 { offset-path: path("M316 328 L316 348"); animation: sh-rs-run 1.2s linear infinite; }
.sh-rs__dot2 { offset-path: path("M334.8 357.6 L388 318"); animation: sh-rs-run 1.4s linear infinite; }
@keyframes sh-rs-run { 0% { offset-distance: 0%; opacity: 0; } 15%, 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@supports not (offset-path: path("M0 0 L1 1")) { .sh-rs__dot1, .sh-rs__dot2 { display: none; } }
.sh-rs__dwin { fill: #18457b; animation: sh-rs-lights 10s ease-in-out infinite; }
@keyframes sh-rs-lights { 0%, 48% { fill: #18457b; } 52%, 88% { fill: #f8bc2d; } 94%, 100% { fill: #18457b; } }
.sh-rs__dcell { fill: rgba(255, 255, 255, .18); animation: sh-rs-charge 10s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes sh-rs-charge { 0%, 52% { fill: rgba(255, 255, 255, .18); } 56%, 86% { fill: #f8bc2d; } 92%, 100% { fill: rgba(255, 255, 255, .18); } }
/* 4. the bill comes down */
.sh-rs__bill { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .3)); }
.sh-rs__bar { fill: rgba(24, 69, 123, .22); transform-box: fill-box; transform-origin: 50% 100%; animation: sh-rs-bill 10s cubic-bezier(.3, 0, .2, 1) infinite; }
.sh-rs__bar--now { fill: #f8bc2d; }
@keyframes sh-rs-bill { 0%, 64% { transform: scaleY(1); } 74%, 90% { transform: scaleY(var(--to)); } 97%, 100% { transform: scaleY(1); } }
.sh-rs__billtag { transform-box: fill-box; transform-origin: 50% 50%; animation: sh-rs-tag 10s cubic-bezier(.2, 1.4, .4, 1) infinite; }
@keyframes sh-rs-tag { 0%, 72% { transform: scale(0); } 77%, 90% { transform: scale(1); } 95%, 100% { transform: scale(0); } }
/* the caption under the house says what's happening */
.sh-rs__say { opacity: 0; animation: 10s ease-in-out infinite; }
.sh-rs__say--1 { animation-name: sh-rs-say1; } .sh-rs__say--2 { animation-name: sh-rs-say2; } .sh-rs__say--3 { animation-name: sh-rs-say3; } .sh-rs__say--4 { animation-name: sh-rs-say4; }
@keyframes sh-rs-say1 { 0%, 14% { opacity: 1; } 16%, 100% { opacity: 0; } }
@keyframes sh-rs-say2 { 0%, 15% { opacity: 0; } 17%, 43% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes sh-rs-say3 { 0%, 44% { opacity: 0; } 46%, 63% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes sh-rs-say4 { 0%, 64% { opacity: 0; } 66%, 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
.sh-rs__progress-bar { transform-box: fill-box; transform-origin: 0 50%; animation: sh-rs-prog 10s linear infinite; }
@keyframes sh-rs-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.sh-rs__story .sh-rs__h2 { position: relative; padding-bottom: 18px; }
.sh-rs__story .sh-rs__h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 2px; background: var(--sh-rs-gold); }
.sh-rs__story-lead { margin-top: 22px; max-width: 58ch; font-size: 19px; line-height: 1.6; font-weight: 500; color: var(--sh-rs-navy); }
.sh-rs__feat { margin-top: 28px; border-radius: 18px; background: #ffffff; box-shadow: 0 26px 50px -34px rgba(var(--sh-rs-navy-rgb), .6), 0 0 0 1px rgba(var(--sh-rs-navy-rgb), .08); overflow: hidden; }
.sh-rs__feat li { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 20px; font-size: 15px; line-height: 1.5; color: var(--sh-rs-ink-2); transition: background-color .2s ease; }
.sh-rs__feat li + li { border-top: 1px solid var(--sh-rs-line); }
.sh-rs__feat li::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--sh-rs-gold); transform: scaleY(0); transition: transform .25s ease; }
.sh-rs__feat li:hover { background: rgba(var(--sh-rs-gold-rgb), .08); }
.sh-rs__feat li:hover::before { transform: scaleY(1); }
.sh-rs__feat b { display: block; margin-bottom: 1px; font-family: var(--sh-rs-head); font-size: 16.5px; font-weight: 700; color: var(--sh-rs-navy); }
.sh-rs__feat-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(var(--sh-rs-gold-rgb), .2); }
.sh-rs__feat-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--sh-rs-navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sh-rs__states { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.sh-rs__states-lbl { margin-right: 4px; font-size: 14.5px; font-weight: 600; color: var(--sh-rs-ink-2); }
.sh-rs__state { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--sh-rs-navy); font-family: var(--sh-rs-head); font-size: 13.5px; font-weight: 700; color: #ffffff; }
.sh-rs__state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sh-rs-gold); }

/* intro text kept compact so it lines up with the animation beside it */
.sh-rs__story-lead { margin-top: 20px; }
.sh-rs__feat { margin-top: 24px; }
.sh-rs__feat li { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 12px 18px; }
.sh-rs__feat b { margin: 0; font-size: 16px; }
.sh-rs__feat-ico { width: 38px; height: 38px; border-radius: 10px; }
.sh-rs__feat-ico svg { width: 20px; height: 20px; }
.sh-rs__states { margin-top: 18px; }

/* ===================================================================
   3. Why choose solar
   =================================================================== */
.sh-rs__why { position: relative; isolation: isolate; overflow: hidden; background: var(--sh-rs-navy); color: #ffffff; }
.sh-rs__why::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 50% 62%, rgba(var(--sh-rs-gold-rgb), .22) 0%, rgba(var(--sh-rs-gold-rgb), 0) 38%),
              repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 44px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 30px); }
.sh-rs__why::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, rgba(var(--sh-rs-gold-rgb), 0), var(--sh-rs-gold), rgba(var(--sh-rs-gold-rgb), 0)); }
.sh-rs__why-head { max-width: 720px; margin: 0 auto; text-align: center; }
.sh-rs__why .sh-rs__h2 { color: #ffffff; }
.sh-rs__why .sh-rs__sub { margin-left: auto; margin-right: auto; color: rgba(255, 255, 255, .82); }
.sh-rs__why-map { display: grid; grid-template-columns: minmax(0, 1fr) 380px minmax(0, 1fr); gap: 72px; align-items: center; margin-top: 36px; }
.sh-rs__why-col { display: grid; gap: 88px; }
.sh-rs__ben { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 18px; align-items: start; }
.sh-rs__why-col--l .sh-rs__ben { grid-template-columns: minmax(0, 1fr) 60px; text-align: right; }
.sh-rs__why-col--l .sh-rs__ben-ico { order: 2; }
.sh-rs__ben-ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--sh-rs-gold); box-shadow: 0 0 0 6px rgba(var(--sh-rs-gold-rgb), .18); transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), box-shadow .25s ease; }
.sh-rs__ben-ico svg { width: 28px; height: 28px; fill: none; stroke: var(--sh-rs-navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sh-rs__ben h3 { margin-top: 4px; font-family: var(--sh-rs-head); font-size: 21px; font-weight: 800; line-height: 1.25; color: #ffffff; }
.sh-rs__ben p { margin-top: 6px; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.sh-rs__ben:hover .sh-rs__ben-ico { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(var(--sh-rs-gold-rgb), .25); }
/* the hub: a home inside the sun, joined to each benefit */
.sh-rs__hub svg { display: block; width: 100%; height: auto; overflow: visible; }
.sh-rs__orbit { transform-box: view-box; transform-origin: 50% 50%; animation: sh-rs-spin 60s linear infinite; }
.sh-rs__sat { transform-box: view-box; transform-origin: 50% 50%; animation: sh-rs-spin 14s linear infinite; }
.sh-rs__hubglow { transform-box: fill-box; transform-origin: 50% 50%; animation: sh-rs-breathe 3.6s ease-in-out infinite; }
@keyframes sh-rs-breathe { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.15); opacity: 1; } }
.sh-rs__hubwin { fill: #18457b; animation: sh-rs-hublight 5s ease-in-out infinite; }
@keyframes sh-rs-hublight { 0%, 25% { fill: #18457b; } 40%, 85% { fill: #f8bc2d; } 100% { fill: #18457b; } }
.sh-rs__hubcell { fill: rgba(255, 255, 255, .25); animation: sh-rs-hubcharge 5s ease-in-out infinite; }
@keyframes sh-rs-hubcharge { 0%, 30% { fill: rgba(255, 255, 255, .25); } 45%, 85% { fill: #f8bc2d; } 100% { fill: rgba(255, 255, 255, .25); } }
.sh-rs__hubglint { stroke-opacity: 0; animation: sh-rs-hubglint 5s ease-in-out infinite; }
@keyframes sh-rs-hubglint { 0%, 10% { stroke-opacity: 0; transform: translate(0, 0); } 15% { stroke-opacity: .5; } 26%, 100% { stroke-opacity: 0; transform: translate(40px, -22px); } }

.sh-rs__hwin { fill: #18457b; animation: sh-rs-hublight 5s ease-in-out infinite; }
.sh-rs__hcell { fill: rgba(255, 255, 255, .25); animation: sh-rs-hubcharge 5s ease-in-out infinite; }
.sh-rs__hglint { stroke-opacity: 0; animation: sh-rs-hglint 5s ease-in-out infinite; }
@keyframes sh-rs-hglint { 0%, 10% { stroke-opacity: 0; transform: translate(0, 0); } 15% { stroke-opacity: .55; } 30%, 100% { stroke-opacity: 0; transform: translate(var(--gx), var(--gy)); } }

/* a dotted line from each benefit towards the home, with energy travelling along it */
.sh-rs__ben-ico { position: relative; }
.sh-rs__ben-ico::after { content: ""; position: absolute; top: 50%; width: 64px; height: 0; border-top: 2px dashed rgba(var(--sh-rs-gold-rgb), .7); }
.sh-rs__why-col--l .sh-rs__ben-ico::after { left: calc(100% + 10px); }
.sh-rs__why-col--r .sh-rs__ben-ico::after { right: calc(100% + 10px); }
.sh-rs__ben-ico::before { content: ""; position: absolute; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--sh-rs-gold); opacity: 0; }
.sh-rs__why-col--l .sh-rs__ben-ico::before { left: calc(100% + 10px); animation: sh-rs-toR 1.8s ease-in infinite; }
.sh-rs__why-col--r .sh-rs__ben-ico::before { right: calc(100% + 10px); animation: sh-rs-toL 1.8s ease-in infinite; }
.sh-rs__ben--2 .sh-rs__ben-ico::before, .sh-rs__ben--4 .sh-rs__ben-ico::before { animation-delay: .9s; }
@keyframes sh-rs-toR { 0% { transform: translateX(0); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateX(58px); opacity: 0; } }
@keyframes sh-rs-toL { 0% { transform: translateX(0); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateX(-58px); opacity: 0; } }
.sh-rs__ben:hover .sh-rs__ben-ico::after { border-top-color: var(--sh-rs-gold); border-top-style: solid; }

/* ===================================================================
   4. How solar panels work: steps + diagram
   =================================================================== */
.sh-rs__how-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 40px; }
.sh-rs__steps { display: grid; gap: 10px; }
.sh-rs__step {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; width: 100%; padding: 16px 18px; text-align: left; cursor: pointer;
  border-radius: 14px; border: 1px solid var(--sh-rs-line); background: #ffffff; color: var(--sh-rs-ink-2); font-size: 15px; line-height: 1.55;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.sh-rs__step b { display: block; margin-bottom: 2px; font-family: var(--sh-rs-head); font-size: 17px; font-weight: 700; color: var(--sh-rs-navy); }
.sh-rs__step-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--sh-rs-navy-rgb), .08); font-family: var(--sh-rs-head); font-size: 18px; font-weight: 800; color: var(--sh-rs-navy); transition: background-color .2s ease, color .2s ease; }
.sh-rs__step:hover { border-color: rgba(var(--sh-rs-navy-rgb), .35); }
.sh-rs__step[aria-selected="true"] { border-color: var(--sh-rs-gold); background: rgba(var(--sh-rs-gold-rgb), .1); box-shadow: 0 18px 36px -26px rgba(var(--sh-rs-navy-rgb), .6); }
.sh-rs__step[aria-selected="true"] .sh-rs__step-n { background: var(--sh-rs-navy); color: var(--sh-rs-gold); }

.sh-rs__diagram { position: relative; padding: 18px; border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 55%), var(--sh-rs-navy); box-shadow: 0 40px 80px -40px rgba(var(--sh-rs-navy-rgb), .75); }
.sh-rs__diagram::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: var(--sh-rs-gold); }
.sh-rs__diagram svg { display: block; width: 100%; height: auto; }
/* each step's part of the diagram dims unless it's the current step */
.sh-rs__d, .sh-rs__d-inv, .sh-rs__d-batt, .sh-rs__d-grid, .sh-rs__d-panels { transition: opacity .45s ease; }
.sh-rs__how-grid .sh-rs__d { opacity: .18; }
.sh-rs__how-grid[data-step="1"] .sh-rs__d1, .sh-rs__how-grid[data-step="2"] .sh-rs__d2,
.sh-rs__how-grid[data-step="3"] .sh-rs__d3, .sh-rs__how-grid[data-step="4"] .sh-rs__d4 { opacity: 1; }
.sh-rs__how-grid[data-step="1"] .sh-rs__d-inv, .sh-rs__how-grid[data-step="1"] .sh-rs__d-batt, .sh-rs__how-grid[data-step="1"] .sh-rs__d-grid,
.sh-rs__how-grid[data-step="2"] .sh-rs__d-batt, .sh-rs__how-grid[data-step="2"] .sh-rs__d-grid,
.sh-rs__how-grid[data-step="3"] .sh-rs__d-batt, .sh-rs__how-grid[data-step="3"] .sh-rs__d-grid,
.sh-rs__how-grid[data-step="4"] .sh-rs__d-inv { opacity: .35; }
/* the d3 group sits inside the white house, so the AC line and the appliances keep a light dim */
.sh-rs__how-grid .sh-rs__d3 { opacity: .3; }
.sh-rs__how-grid[data-step="3"] .sh-rs__d3 { opacity: 1; }
/* moving energy along the active line */
.sh-rs__d-flow { stroke-dasharray: 10 10; }
.sh-rs__how-grid[data-step="1"] .sh-rs__d1 .sh-rs__d-flow, .sh-rs__how-grid[data-step="2"] .sh-rs__d2 .sh-rs__d-flow,
.sh-rs__how-grid[data-step="3"] .sh-rs__d3 .sh-rs__d-flow, .sh-rs__how-grid[data-step="4"] .sh-rs__d4 .sh-rs__d-flow { animation: sh-rs-flow .9s linear infinite; }
@keyframes sh-rs-flow { to { stroke-dashoffset: -20; } }
.sh-rs__d-rays { transform-box: fill-box; transform-origin: 50% 50%; animation: sh-rs-spin 18s linear infinite; }
.sh-rs__how-grid[data-step="1"] .sh-rs__d-panels { filter: drop-shadow(0 0 10px rgba(248, 188, 45, .8)); }
.sh-rs__how-grid[data-step="2"] .sh-rs__d-panels { filter: drop-shadow(0 0 6px rgba(248, 188, 45, .5)); }
.sh-rs__how-grid[data-step="3"] .sh-rs__d-inv rect:first-child { filter: drop-shadow(0 0 10px rgba(248, 188, 45, .8)); }
.sh-rs__d-tv { transition: fill .3s ease; }
.sh-rs__d-cell { fill: rgba(24, 69, 123, .16); transition: fill .3s ease; }
.sh-rs__how-grid[data-step="4"] .sh-rs__d-cell { animation: sh-rs-fill 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .45s); }
@keyframes sh-rs-fill { 0%, 10% { fill: rgba(24, 69, 123, .16); } 30%, 100% { fill: #f8bc2d; } }

/* ===================================================================
   5. Rebates and finance
   =================================================================== */
.sh-rs__save { padding-top: 0; }
.sh-rs__save-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.sh-rs__save-card, .sh-rs__save-card:visited {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 20px; align-items: start;
  padding: 26px 26px 24px; border-radius: 18px; background: #ffffff; color: var(--sh-rs-ink-2); font-size: 15.5px; line-height: 1.6;
  box-shadow: 0 26px 50px -34px rgba(var(--sh-rs-navy-rgb), .6), 0 0 0 1px rgba(var(--sh-rs-navy-rgb), .08);
  transition: box-shadow .2s ease, transform .2s ease;
}
.sh-rs__save-card:hover { transform: translateY(-3px); box-shadow: 0 30px 56px -32px rgba(var(--sh-rs-navy-rgb), .7), 0 0 0 2px var(--sh-rs-gold); }
.sh-rs__save-ico { grid-row: span 2; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--sh-rs-navy); }
.sh-rs__save-ico svg { width: 40px; height: 40px; }
.sh-rs__save-body b { display: block; margin-bottom: 4px; font-family: var(--sh-rs-head); font-size: 20px; font-weight: 800; color: var(--sh-rs-navy); }
.sh-rs__save-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--sh-rs-head); font-weight: 700; color: var(--sh-rs-navy); }
.sh-rs__save-go::after { content: ""; width: 9px; height: 9px; border-top: 2.5px solid var(--sh-rs-gold); border-right: 2.5px solid var(--sh-rs-gold); transform: rotate(45deg); transition: transform .2s ease; }
.sh-rs__save-card:hover .sh-rs__save-go::after { transform: translateX(3px) rotate(45deg); }

/* ===================================================================
   6. Call to action
   =================================================================== */
.sh-rs__cta { position: relative; isolation: isolate; overflow: hidden; padding: 72px 0; background: var(--sh-rs-navy); color: #ffffff; }
.sh-rs__cta::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 44px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 30px);
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%); mask-image: linear-gradient(90deg, transparent 30%, #000 100%); }
.sh-rs__cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.sh-rs__cta-title { font-family: var(--sh-rs-head); font-weight: 800; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; color: #ffffff; }
.sh-rs__cta-text { margin-top: 12px; max-width: 54ch; font-size: 17.5px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.sh-rs__cta .sh-rs__actions { margin-top: 0; }
.sh-rs__cta-sun { position: absolute; z-index: -1; left: -140px; bottom: -220px; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--sh-rs-gold-rgb), .9) 0 50%, rgba(var(--sh-rs-gold-rgb), .25) 51%, rgba(var(--sh-rs-gold-rgb), 0) 70%); }

/* ===================================================================
   Responsive + reduced motion
   =================================================================== */
@media (max-width: 1199px) {
  .sh-rs__why-map { grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1fr); gap: 24px; }
  .sh-rs__ben-ico::after { width: 34px; }
  .sh-rs__ben-ico::before { display: none; }
  .sh-rs__why-col { gap: 56px; }
  .sh-rs__how-grid { grid-template-columns: minmax(0, 1fr); }
  .sh-rs__diagram { order: -1; max-width: 760px; }
}
@media (max-width: 991px) {
  .sh-rs__why-map { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sh-rs__hub { order: -1; width: 240px; margin: 0 auto; }
  .sh-rs__why-col { gap: 26px; }
  .sh-rs__ben-ico::after, .sh-rs__ben-ico::before { display: none; }
  .sh-rs__why-col--l .sh-rs__ben { grid-template-columns: 60px minmax(0, 1fr); text-align: left; }
  .sh-rs__why-col--l .sh-rs__ben-ico { order: 0; }
  .sh-rs__banner-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sh-rs__scene { max-width: 440px; }
  .sh-rs__sparks { display: none; }
  .sh-rs__sun { right: -120px; bottom: -280px; }
  .sh-rs__intro-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sh-rs__design { max-width: 640px; }
  .sh-rs__cta-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .sh-rs__section { padding: 60px 0; }
  .sh-rs__why-head { text-align: left; }
  .sh-rs__why .sh-rs__sub { margin-left: 0; }
  .sh-rs__hub { width: 200px; }
  .sh-rs__ben { grid-template-columns: 52px minmax(0, 1fr) !important; gap: 14px; }
  .sh-rs__ben-ico { width: 52px; height: 52px; }
  .sh-rs__ben h3 { font-size: 18.5px; }
  .sh-rs__save { padding-top: 0; }
  .sh-rs__wrap { padding: 0 16px; }
  .sh-rs__banner-grid { padding-top: 40px; padding-bottom: 48px; }
  .sh-rs__lead { font-size: 17px; }
  .sh-rs__actions .sh-rs__btn { flex: 1 1 100%; }
  .sh-rs__scene { max-width: 340px; margin: 0 auto; }
  .sh-rs__design { padding: 14px 12px 12px; border-radius: 18px; }
  .sh-rs__design-tag { left: 12px; top: 12px; font-size: 12.5px; padding: 7px 10px; }
  .sh-rs__story-lead { font-size: 17.5px; }
  .sh-rs__sun { width: 320px; height: 320px; bottom: -200px; }
  .sh-rs__ticks { gap: 10px 16px; font-size: 14.5px; }
  .sh-rs__diagram { padding: 10px; border-radius: 16px; }
  .sh-rs__step { padding: 14px; gap: 12px; grid-template-columns: 38px minmax(0, 1fr); }
  .sh-rs__step-n { width: 38px; height: 38px; font-size: 16px; }
  .sh-rs__save-grid { grid-template-columns: minmax(0, 1fr); }
  .sh-rs__save-card { grid-template-columns: 52px minmax(0, 1fr); padding: 22px 20px; }
  .sh-rs__save-ico { width: 52px; height: 52px; }
  .sh-rs__save-ico svg { width: 32px; height: 32px; }
  .sh-rs__cta { padding: 56px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-rs *, .sh-rs__sun { animation: none !important; transition: none !important; }
  .sh-rs__sparks, .sh-rs__pulse { display: none; }
  .sh-rs__win, .sh-rs__cell, .sh-rs__dwin, .sh-rs__dcell, .sh-rs__hwin, .sh-rs__hcell { fill: #f8bc2d; }
  .sh-rs__pv, .sh-rs__flowing, .sh-rs__dglow, .sh-rs__say--4 { opacity: 1; }
  .sh-rs__measure, .sh-rs__dot1, .sh-rs__dot2, .sh-rs__progress { display: none; }
  .sh-rs__bar { transform: scaleY(var(--to)); }
  .sh-rs__dsun { offset-distance: 50%; }
}

/* ---------- banner height: the same on every page (606px, as on the Incentives page) on laptops and desktops ---------- */
@media (min-width: 992px) {
  .sh-rs__banner { display: flex; align-items: center; height: 606px; }
  .sh-rs__banner > .sh-rs__banner-grid { width: 100%; padding-top: 0; padding-bottom: 12px; }
}