/* /water-revision-20261004-r7/revision.css */
/* Water r7: one reading order, compact transitions and consistent navigation. */
.wr-water .wr-chapter{padding:40px 0 20px;scroll-margin-top:120px}
.wr-water .wr-chapter-tint{background:#edf6fa}
.wr-water .wr-copy{max-width:900px;margin:auto;padding:0 28px}
.wr-water .wr-copy h2{font-size:clamp(28px,3.1vw,42px);line-height:1.15;letter-spacing:-.025em;margin:0 0 20px;color:#163448}
.wr-water .wr-copy p{font-size:18px;line-height:1.7;color:#425967;margin:12px 0}
.wr-water .wr-copy .wr-note{font-size:14px;line-height:1.6;color:#526c79}
.wr-water .wr-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:24px 0 16px}
.wr-water .wr-actions a{max-width:100%;text-align:center}
.wr-water .wr-chapter+.ss-story-motion{margin-top:8px}
.wr-water .wr-motion-anchor{padding:16px 0 0;scroll-margin-top:120px}
.wr-water .wr-motion-anchor .wr-copy p{font-size:16px;max-width:780px}
.wr-water .wr-product-care{padding:38px 0}
.wr-water .wr-care-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:20px}
.wr-water .wr-care-grid h3{font-size:23px;line-height:1.3;margin:0 0 12px}
.wr-water .wr-care-grid p{font-size:16px}
.wr-water .wr-product-close{padding:30px 0;background:#edf6fa}
.wr-water .wr-product-close .wr-copy{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.wr-water .wr-product-close p{margin:0;flex:1 1 300px;font-size:16px}
.wr-water .wr-product-close .wr-actions{margin:0}
.wr-water #package-water-flow{padding:20px 0 0;background:#edf6fa;scroll-margin-top:120px}
.wr-water #package-water-flow .ss-story-motion{width:min(1260px,calc(100% - 32px))}
.wr-water .wr-catalogue{padding:42px 0}
.wr-water .wr-product-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.wr-water .wr-product-grid article{padding:24px;background:#fff;border:1px solid #d0e2eb;border-radius:16px}
.wr-water .wr-product-grid img{display:block;width:100%;height:230px;object-fit:contain;margin-bottom:18px;border-radius:10px}
.wr-water .wr-product-grid h3{margin:0 0 12px;font-size:26px}
.wr-water .wr-product-grid p{font-size:16px}
.wr-water .wr-product-grid a{font-weight:700}
.wr-water .article-hub{padding-top:20px}
.wr-water .j-guide-hero{padding-bottom:12px}
.wr-water .j-library-intro{display:none}
.wr-water .r-packages{padding-top:32px;padding-bottom:32px}
.wr-water .r-package-grid{margin-top:24px}
.wr-water .wr-guide-intro{padding:34px 0 18px}
.wr-water .wr-guide-intro h1{font-size:clamp(30px,4vw,48px);line-height:1.12;margin:0 0 18px;color:#163448}
.wr-water .wr-guide-intro .wr-copy p{font-size:17px}
.wr-water .mw-workspace{padding-top:24px;padding-bottom:30px;gap:32px}
.wr-water .mw-aside{top:115px}
.wr-water .mw-app{min-height:0}
.wr-water .mw-aside h2{font-size:27px;margin-top:0}
.wr-water .wr-guide-packages{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
.wr-water .wr-guide-packages article{border:1px solid #c9dfe9;padding:16px;border-radius:12px;background:#f5fafc}
.wr-water .wr-guide-packages img{width:100%;height:130px;object-fit:contain}
.wr-water .wr-guide-packages h3{font-size:21px;margin:10px 0 8px}
.wr-water .wr-guide-packages p{font-size:14px;line-height:1.5;margin:8px 0}
.wr-water .wr-guide-packages strong{display:block;font-size:20px;color:#163448}
.wr-water .wr-guide-packages a{font-size:14px;font-weight:700}
.wr-water .wf-nav>.wf-home{font-weight:700}
.wr-water .wr-contact-bar{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:8px 22px;padding:8px max(20px,calc((100% - 1260px)/2));background:#eef6f9;font-size:13px;line-height:1.5}
.wr-water .wr-contact-bar a{color:#245a73;text-decoration:none;font-weight:650}
.wr-water .wr-contact-bar a:hover{text-decoration:underline}
.wr-water .wr-product-close+.j-journey-nav{display:none}
@media(max-width:820px){.wr-water .wr-chapter{padding:28px 0 12px}.wr-water .wr-copy{padding:0 20px}.wr-water .wr-copy p{font-size:16px;line-height:1.65}.wr-water .wr-copy h2{margin-bottom:16px}.wr-water .wr-care-grid{grid-template-columns:1fr;gap:20px}.wr-water .wr-product-care{padding:28px 0}.wr-water .wr-product-grid{grid-template-columns:1fr}.wr-water .wr-product-grid img{height:210px}.wr-water .wr-actions{gap:10px;margin-top:18px}.wr-water .wr-actions .button{width:100%;font-size:15px}.wr-water .wr-guide-intro{padding:28px 0 10px}.wr-water .mw-workspace{padding:18px 20px 28px;display:block}.wr-water .mw-aside{display:none!important}.wr-water #package-water-flow{padding-top:14px}.wr-water .wr-guide-packages{gap:10px}.wr-water .wr-guide-packages article{padding:12px}.wr-water .wr-guide-packages img{height:105px}}
@media(prefers-reduced-motion:reduce){.wr-water *{scroll-behavior:auto!important}}
@media(max-width:760px){
 .water-guide-page.wr-water .wf-header.site-header{position:sticky;top:0}
 .water-guide-page.wr-water .mw-app{min-height:calc(100svh - 80px)}
 .water-guide-page.wr-water .mw-step{min-height:calc(100svh - 140px)}
 .water-guide-page.wr-water .mw-progress{top:79px}
 .wr-water .wr-contact-bar{justify-content:space-between;gap:4px 8px;padding:4px 16px}
 .wr-water .wr-contact-bar a{display:flex;align-items:center;min-height:44px;font-size:12px}
 .wr-water .home-family-strip{padding:4px 16px}
 .wr-water .home-family-strip nav{display:none}
 .wr-water .wr-contact-bar>a[href="/free-water-assessment/"]{display:none}
 .wr-water .wr-contact-bar{justify-content:flex-start;gap:16px}
 .wr-water[data-revenue-enhanced] .r-package:not(.is-selected){display:none}
 .wr-water .wr-guide-intro .wr-actions{flex-direction:column;align-items:stretch}
 .wr-water .wr-guide-intro .mw-btn{width:100%;min-height:52px}
 .wr-water .r-plan-reason details summary{padding:12px 0;min-height:44px;cursor:pointer}
 .wr-water .r-plan-reason .mw-link{min-height:44px;padding:10px 0}
}

/* /header-motion-20261005/sunstorm-top-motion.css?v=72336f8847bf */
/* Sunstorm top-of-page motion (proposal, October 5 2026).
 * Header, menu and hero polish for sunstorm.energy and sunstormhome.com.
 * CSS only changes how existing elements move; no copy, markup, forms or
 * links change. The small companion script only toggles classes and CSS
 * variables on <html>. Everything here switches off for visitors who ask for
 * reduced motion.
 */
:root{--ssm-ease:cubic-bezier(.2,.7,.2,1);--ssm-progress:0;--ssm-px:0px;--ssm-py:0px}

/* ---------- Smart header (needs the script: html.ssm-on / html.ssm-scrolled) ---------- */
html.ssm-on body .site-header{position:sticky;top:0;transition:box-shadow .35s,background-color .35s}
html.ssm-scrolled body .site-header{box-shadow:0 12px 30px -20px rgba(19,36,58,.5)}
html.ssm-on body .site-header::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:calc(var(--ssm-progress) * 100%);background:#ffc34c;opacity:0;transition:opacity .3s;pointer-events:none}
html.ssm-scrolled body .site-header::after{opacity:1}
/* Energy: the family row tucks away and the nav row slims down */
html.ssm-on body .site-header .family-switcher{max-height:64px;overflow:hidden;transition:max-height .35s var(--ssm-ease),opacity .25s}
html.ssm-scrolled body .site-header .family-switcher{max-height:0;opacity:0}
html.ssm-scrolled body .site-header .family-switcher details[open]{display:none}
html.ssm-on body .site-header .nav-row{transition:min-height .35s var(--ssm-ease)}
html.ssm-scrolled body .site-header .nav-row{min-height:64px}
html.ssm-on body .site-header .brand img{transition:transform .35s var(--ssm-ease);transform-origin:left center}
html.ssm-scrolled body .site-header .brand img{transform:scale(.84)}
/* Water: the header slims down; the blue line marks progress */
html.ssm-on body .wf-header::after{background:#187fb5}
html.ssm-on body .wf-header .wf-shell{transition:min-height .35s var(--ssm-ease)}
html.ssm-scrolled body .wf-header .wf-shell{min-height:66px}
html.ssm-on body .wf-header .wf-brand img{transition:transform .35s var(--ssm-ease);transform-origin:left center}
html.ssm-scrolled body .wf-header .wf-brand img{transform:scale(.84)}

@media (prefers-reduced-motion:no-preference){
  /* ---------- Menus ---------- */
  .desktop-nav>a,.desktop-nav .nav-dropdown>summary,.wf-nav>a,.wf-nav .wf-dropdown>summary{position:relative}
  .desktop-nav>a::after,.desktop-nav .nav-dropdown>summary::after,.wf-nav>a::after,.wf-nav .wf-dropdown>summary::before{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:#ffc34c;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ssm-ease);pointer-events:none}
  .wf-nav>a::after,.wf-nav .wf-dropdown>summary::before{background:#187fb5}
  .desktop-nav>a:hover::after,.desktop-nav .nav-dropdown>summary:hover::after,.desktop-nav .nav-dropdown[open]>summary::after,.wf-nav>a:hover::after,.wf-nav>a[aria-current="page"]::after,.wf-nav .wf-dropdown>summary:hover::before,.wf-nav .wf-dropdown[open]>summary::before{transform:scaleX(1)}
  .desktop-nav .nav-dropdown>summary>span{display:inline-block;transition:transform .25s var(--ssm-ease)}
  .desktop-nav .nav-dropdown[open]>summary>span{transform:rotate(180deg)}
  .nav-dropdown[open]>.nav-dropdown-panel,.wf-dropdown[open]>.wf-panel{animation:ssm-drop .24s var(--ssm-ease) both}
  .nav-dropdown[open]>.nav-dropdown-panel>a,.wf-dropdown[open]>.wf-panel>a{animation:ssm-in .32s var(--ssm-ease) both}
  .nav-dropdown[open]>.nav-dropdown-panel>a:nth-child(2),.wf-dropdown[open]>.wf-panel>a:nth-child(2){animation-delay:.03s}
  .nav-dropdown[open]>.nav-dropdown-panel>a:nth-child(3),.wf-dropdown[open]>.wf-panel>a:nth-child(3){animation-delay:.06s}
  .nav-dropdown[open]>.nav-dropdown-panel>a:nth-child(4),.wf-dropdown[open]>.wf-panel>a:nth-child(4){animation-delay:.09s}
  .nav-dropdown[open]>.nav-dropdown-panel>a:nth-child(n+5),.wf-dropdown[open]>.wf-panel>a:nth-child(n+5){animation-delay:.12s}
  /* phone menus: the panel drops in and the links follow one by one */
  .mobile-menu[open]>nav{animation:ssm-drop .26s var(--ssm-ease) both}
  .mobile-menu[open]>nav>a{animation:ssm-in .34s var(--ssm-ease) both}
  .wf-header #main-nav.is-open,.wf-header #main-nav.open{animation:ssm-drop .26s var(--ssm-ease) both}
  .wf-header #main-nav.is-open>*,.wf-header #main-nav.open>*{animation:ssm-in .34s var(--ssm-ease) both}
  .mobile-menu[open]>nav>a:nth-child(2),.wf-header #main-nav.is-open>:nth-child(2){animation-delay:.03s}
  .mobile-menu[open]>nav>a:nth-child(3),.wf-header #main-nav.is-open>:nth-child(3){animation-delay:.06s}
  .mobile-menu[open]>nav>a:nth-child(4),.wf-header #main-nav.is-open>:nth-child(4){animation-delay:.09s}
  .mobile-menu[open]>nav>a:nth-child(5),.wf-header #main-nav.is-open>:nth-child(5){animation-delay:.12s}
  .mobile-menu[open]>nav>a:nth-child(6){animation-delay:.15s}
  .mobile-menu[open]>nav>a:nth-child(7){animation-delay:.18s}
  .mobile-menu[open]>nav>a:nth-child(n+8){animation-delay:.21s}

  /* ---------- Energy homepage hero ---------- */
  .studio-home-hero{overflow:hidden}
  .studio-home-hero .studio-home-scene{animation:ssm-push 16s var(--ssm-ease) both;transform-origin:62% 45%;translate:var(--ssm-px) var(--ssm-py);transition:translate 1.4s var(--ssm-ease);will-change:transform}
  .sun-hero-message>*{animation:ssm-rise .8s var(--ssm-ease) both}
  .sun-hero-message>:nth-child(1){animation-delay:.05s}
  .sun-hero-message>:nth-child(2){animation-delay:.15s}
  .sun-hero-message>:nth-child(3){animation-delay:.3s}
  .sun-hero-message>:nth-child(4){animation-delay:.42s}
  .sun-hero-message h1>span{background:linear-gradient(100deg,#096caa 0%,#096caa 40%,#8fd6ff 50%,#096caa 60%,#096caa 100%);background-size:240% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ssm-glint 1.6s ease-in-out 1.1s 1 both}
  .calculator-hero-card{animation:ssm-float .9s var(--ssm-ease) .3s both}
  .calculator-mini-steps>li{animation:ssm-in .45s var(--ssm-ease) both}
  .calculator-mini-steps>li:nth-child(1){animation-delay:.75s}
  .calculator-mini-steps>li:nth-child(2){animation-delay:.9s}
  .calculator-mini-steps>li:nth-child(3){animation-delay:1.05s}
  .calculator-mini-steps>li>b{animation:ssm-pop .5s cubic-bezier(.3,1.6,.5,1) both}
  .calculator-mini-steps>li:nth-child(1)>b{animation-delay:.8s}
  .calculator-mini-steps>li:nth-child(2)>b{animation-delay:.95s}
  .calculator-mini-steps>li:nth-child(3)>b{animation-delay:1.1s}
  .calculator-hero-card .calculator-button{position:relative;overflow:hidden}
  .calculator-hero-card .calculator-button::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.65),rgba(255,255,255,0));transform:translateX(-120%) skewX(-18deg);animation:ssm-shine 1.1s ease-in-out 1.6s 1 both;pointer-events:none}
  .calculator-live-dot{animation:ssm-live 2.4s ease-in-out infinite}

  /* ---------- Energy inner page headers ---------- */
  .studio-hero-copy>*{animation:ssm-rise .75s var(--ssm-ease) both}
  .studio-hero-copy>:nth-child(2){animation-delay:.08s}
  .studio-hero-copy>:nth-child(3){animation-delay:.16s}
  .studio-hero-copy>:nth-child(4){animation-delay:.28s}
  .studio-hero-copy>:nth-child(n+5){animation-delay:.38s}
  .studio-hero-visual{overflow:hidden;animation:ssm-wipe 1s cubic-bezier(.6,0,.2,1) .15s both}
  .studio-hero-visual img{animation:ssm-push 14s var(--ssm-ease) both}

  /* ---------- Water homepage hero ---------- */
  .w-home-opening .w-title>*,.w-home-opening .r-hero-lede,.w-home-opening .h-journeys>a{animation:ssm-rise .8s var(--ssm-ease) both}
  .w-home-opening .w-title>:nth-child(2){animation-delay:.12s}
  .w-home-opening .r-hero-lede{animation-delay:.26s}
  .w-home-opening .h-journeys>a:nth-child(1){animation-delay:.38s}
  .w-home-opening .h-journeys>a:nth-child(2){animation-delay:.46s}
  .w-home-opening .h-journeys>a:nth-child(3){animation-delay:.54s}
  .w-home-opening .h-journeys>a{transition:transform .25s var(--ssm-ease),box-shadow .25s}
  .w-home-opening .h-journeys>a:hover{transform:translateX(4px)}
  .w-home-opening .h-journeys>a .h-path-arrow{display:inline-block;transition:transform .25s var(--ssm-ease)}
  .w-home-opening .h-journeys>a:hover .h-path-arrow{transform:translateX(4px)}
  .w-home-opening .w-title h1 em{background:linear-gradient(100deg,#19789b 0%,#19789b 40%,#9be3ff 50%,#19789b 60%,#19789b 100%);background-size:240% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ssm-glint 1.6s ease-in-out 1s 1 both}
  .w-home-opening .w-water-image{overflow:hidden;animation:ssm-float .9s var(--ssm-ease) .2s both}
  .w-home-opening .w-water-image>img{animation:ssm-push 16s var(--ssm-ease) both;translate:var(--ssm-px) var(--ssm-py);transition:translate 1.4s var(--ssm-ease)}
}

@keyframes ssm-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ssm-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ssm-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes ssm-float{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ssm-pop{from{transform:scale(.4)}to{transform:none}}
@keyframes ssm-push{from{transform:scale(1.1)}to{transform:scale(1.02)}}
@keyframes ssm-glint{from{background-position:100% 0}to{background-position:0 0}}
@keyframes ssm-shine{to{transform:translateX(320%) skewX(-18deg)}}
@keyframes ssm-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ssm-live{0%,100%{box-shadow:0 0 0 0 rgba(31,170,110,.45)}50%{box-shadow:0 0 0 6px rgba(31,170,110,0)}}

/* Publisher review: the sticky-header transitions also respect reduced motion. */
@media (prefers-reduced-motion:reduce){
 html.ssm-on body .site-header,html.ssm-on body .site-header::after,
 html.ssm-on body .site-header .family-switcher,html.ssm-on body .site-header .nav-row,
 html.ssm-on body .site-header .brand img,html.ssm-on body .wf-header .wf-shell,
 html.ssm-on body .wf-header .wf-brand img{transition:none!important}
}