/* Sunstorm Water hero visuals (proposal, October 5 2026).
 * Reviewed candidate: six Water heroes:
 * Compare systems, Packages and prices, Warranty,
 * Service, Schedule and Articles. My Water and Assessment keep their published graphics.
 * Uses the site's own product photos and current copy. Motion is calm and
 * switches off for visitors who ask for reduced motion.
 */
:root{--wh-ink:#13243a;--wh-muted:#52657a;--wh-blue:#187fb5;--wh-sky:#eaf6ff;--wh-line:#d3e3ee;--wh-ease:cubic-bezier(.2,.7,.2,1)}

/* shared soft water light behind the hero */
.wh-hero{position:relative;isolation:isolate}
.wh-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 60% at 82% 30%,rgba(38,186,230,.16),rgba(38,186,230,0) 70%),radial-gradient(30% 45% at 64% 80%,rgba(24,127,181,.10),rgba(24,127,181,0) 70%),radial-gradient(26% 40% at 96% 88%,rgba(255,195,76,.10),rgba(255,195,76,0) 70%);
  background-size:140% 140%;animation:wh-drift 18s ease-in-out infinite alternate}
.wr-guide-intro.wh-hero::before,.water-warranty.wh-hero::before{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 82%,transparent)}
@keyframes wh-drift{from{background-position:0% 0%}to{background-position:100% 60%}}

/* two-column layout on wide screens; visual stacks below on phones */
.wh-grid{display:grid !important;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);column-gap:clamp(28px,4vw,64px);align-items:center}
.wh-grid>*{grid-column:1}
.wh-grid>.wh-visual{grid-column:2;grid-row:1 / span 8;align-self:center}
.wr-guide-intro.wh-grid{width:min(1280px,calc(100% - 96px));margin-inline:auto;padding-block:clamp(36px,5vw,64px)}
.wr-guide-intro.wh-grid>.wr-copy{max-width:none;width:auto;margin:0;padding:0}
@media (max-width:900px){.wh-grid{grid-template-columns:1fr}.wr-guide-intro.wh-grid{width:calc(100% - 40px)}.wh-grid>.wh-visual{grid-column:1;grid-row:auto;margin-top:22px}}

.wh-visual{position:relative;font-family:Montserrat,"Open Sans",Arial,sans-serif;color:var(--wh-ink)}
.wh-visual *{box-sizing:border-box}

/* ---------- Compare systems: the four systems at a glance ---------- */
.wh-lineup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.wh-tile{position:relative;display:flex;flex-direction:column;min-height:214px;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#f2f9fe,#ffffff);border:1px solid var(--wh-line);box-shadow:0 18px 36px -30px rgba(19,36,58,.55);text-decoration:none;color:var(--wh-ink);transition:transform .3s var(--wh-ease),box-shadow .3s,border-color .3s}
.wh-tile:hover,.wh-tile:focus-visible{transform:translateY(-4px);border-color:#9cc6df;box-shadow:0 24px 40px -26px rgba(19,36,58,.6)}
.wh-tile:focus-visible{outline:3px solid #096caa;outline-offset:3px}
.wh-tile .wh-img{position:relative;flex:1;min-height:132px;overflow:hidden}
.wh-tile .wh-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--wh-ease)}
.wh-tile .wh-img img.wh-contain{object-fit:contain;padding:12px 10px 0;object-position:center bottom}
.wh-tile:hover .wh-img img{transform:scale(1.05)}
.wh-tile .wh-img::after{content:"";position:absolute;left:-40%;top:0;bottom:0;width:30%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:skewX(-18deg);opacity:0}
.wh-tile:hover .wh-img::after{animation:wh-shine .9s ease-out}
.wh-tile .wh-cap{padding:11px 14px 13px;background:#fff;border-top:1px solid #e6eff5}
.wh-tile b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em}
.wh-tile span{display:block;margin-top:2px;font-family:"Open Sans",Arial,sans-serif;font-size:12.5px;line-height:1.35;color:var(--wh-muted)}
.wh-tile i{position:absolute;right:12px;top:12px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 4px 10px -6px rgba(19,36,58,.5);display:grid;place-items:center;font-style:normal;color:var(--wh-blue);font-weight:800;opacity:0;transform:translateX(-6px);transition:all .3s var(--wh-ease)}
.wh-tile:hover i{opacity:1;transform:none}
.wh-tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--wh-blue)}
.wh-tag::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor}

/* ---------- Packages: everything a package includes ---------- */
.wh-pack{border-radius:22px;background:#fff;border:1px solid var(--wh-line);box-shadow:0 30px 60px -40px rgba(19,36,58,.55);overflow:hidden}
.wh-pack-top{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:10px;height:268px;padding:56px 26px 20px;background:radial-gradient(70% 90% at 50% 100%,#d9f0fb,#f3faff 70%);overflow:hidden}
.wh-pack-top::after{content:"";position:absolute;left:8%;right:8%;bottom:16px;height:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(19,36,58,.16),rgba(19,36,58,0));z-index:0}
.wh-sys{position:relative;z-index:1;height:100%;min-height:170px}
.wh-sys img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;transition:opacity .9s ease}
.wh-sys img+img{opacity:0}
.wh-pack.duo .wh-sys img{opacity:0}.wh-pack.duo .wh-sys img+img{opacity:1}
.wh-plus{position:relative;z-index:1;align-self:center;width:34px;height:34px;border-radius:50%;background:var(--wh-ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px;box-shadow:0 8px 18px -8px rgba(19,36,58,.6)}
.wh-sipcol{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;align-self:center}
.wh-sip{width:min(150px,100%);aspect-ratio:1/1;border-radius:50%;overflow:hidden;border:5px solid #fff;box-shadow:0 18px 34px -18px rgba(19,36,58,.6)}
.wh-sip img{width:100%;height:100%;object-fit:cover;object-position:28% 55%}
.wh-switch{position:absolute;left:18px;top:14px;z-index:2;display:inline-flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.9);border:1px solid var(--wh-line);font-size:12px;font-weight:800}
.wh-switch span{padding:6px 11px;border-radius:999px;color:var(--wh-muted);transition:background .4s,color .4s}
.wh-pack:not(.duo) .wh-switch span:first-child,.wh-pack.duo .wh-switch span:last-child{background:var(--wh-ink);color:#fff}
.wh-sipname{font-size:12px;font-weight:800;color:var(--wh-ink)}
.wh-pack-body{padding:18px 22px 20px}
.wh-pack-body h3{margin:0 0 12px;font-size:16px;font-weight:800}
.wh-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.wh-list li{display:flex;align-items:center;gap:11px;font-family:"Open Sans",Arial,sans-serif;font-size:14.5px;color:#26364f}
.wh-check{flex:none;width:22px;height:22px;border-radius:50%;background:var(--wh-sky);display:grid;place-items:center}
.wh-check svg{width:12px;height:12px;stroke:var(--wh-blue);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:0}

/* ---------- Free assessment: tested right at your tap ---------- */
.wh-test{position:relative;height:360px;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#f6f9fc 0 62%,#ece6dd 62% 67%,#fbfcfe 67%);border:1px solid var(--wh-line);box-shadow:0 30px 60px -40px rgba(19,36,58,.55)}
.wh-tiles{position:absolute;left:0;right:0;top:0;height:62%;background-image:linear-gradient(rgba(19,36,58,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(19,36,58,.05) 1px,transparent 1px);background-size:44px 30px}
.wh-faucet{position:absolute;left:12%;top:83px;width:120px;height:140px}
.wh-stream{position:absolute;left:23px;top:58px;width:5px;height:0;border-radius:3px;background:linear-gradient(#a6dcf3,#cdeefb)}
.wh-cup{position:absolute;left:5px;top:96px;width:40px;height:44px;border-radius:0 0 10px 10px;border:2px solid rgba(120,140,170,.55);border-top:0;background:rgba(255,255,255,.6);overflow:hidden}
.wh-cup i{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(160,215,240,.8)}
.wh-vials{position:absolute;left:40%;top:149px;display:flex;gap:58px}
.wh-test::after{content:"";position:absolute;left:0;right:0;top:67%;bottom:0;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(19,36,58,.06) 6px 7px,transparent 7px 33%);pointer-events:none}
.wh-vial{position:relative;width:26px;height:74px;border-radius:0 0 13px 13px;border:2px solid rgba(120,140,170,.55);background:rgba(255,255,255,.65)}
.wh-vial i{position:absolute;left:0;right:0;bottom:0;height:72%;border-radius:0 0 11px 11px}
.wh-vial.h i{background:#c2366b}
.wh-vial.d i{background:#eef3f6}
.wh-vlab{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:800;white-space:nowrap;color:var(--wh-muted)}
.wh-drop{position:absolute;top:-30px;left:50%;width:6px;height:9px;margin-left:-3px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#7d8aa0;opacity:0}
.wh-read{position:absolute;right:16px;bottom:16px;width:min(250px,56%);padding:14px 16px;border-radius:14px;background:#fff;box-shadow:0 18px 36px -22px rgba(19,36,58,.6);border:1px solid #e3edf4}
.wh-read h4{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px;font-size:13px;font-weight:800}
.wh-read h4 small{font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px;background:#eef3f7;color:var(--wh-muted)}
.wh-row{font-family:"Open Sans",Arial,sans-serif;font-size:12px;font-weight:600;color:var(--wh-muted);margin-top:8px}
.wh-bar{height:8px;border-radius:4px;background:#e8eff5;overflow:hidden;margin-top:5px}
.wh-bar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#26bae6,#3b6fd8)}
.wh-bar.d i{background:linear-gradient(90deg,#26bae6,#ea7fb0)}
.wh-chip{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--wh-line);font-size:12px;font-weight:800;box-shadow:0 8px 18px -12px rgba(19,36,58,.5)}
.wh-chip b{width:8px;height:8px;border-radius:50%;background:#1faa6e;box-shadow:0 0 0 0 rgba(31,170,110,.5)}

@media (prefers-reduced-motion:no-preference){
  .wh-visual{animation:wh-rise .9s var(--wh-ease) .25s both}
  .wh-tile{animation:wh-rise .7s var(--wh-ease) both}
  .wh-tile:nth-child(1){animation-delay:.3s}.wh-tile:nth-child(2){animation-delay:.42s}.wh-tile:nth-child(3){animation-delay:.54s}.wh-tile:nth-child(4){animation-delay:.66s}
  .wh-list li{animation:wh-in .5s var(--wh-ease) both}
  .wh-list li:nth-child(1){animation-delay:.7s}.wh-list li:nth-child(2){animation-delay:.9s}.wh-list li:nth-child(3){animation-delay:1.1s}.wh-list li:nth-child(4){animation-delay:1.3s}
  .wh-list li:nth-child(1) .wh-check svg{animation:wh-tick .45s ease .85s both}.wh-list li:nth-child(2) .wh-check svg{animation:wh-tick .45s ease 1.05s both}.wh-list li:nth-child(3) .wh-check svg{animation:wh-tick .45s ease 1.25s both}.wh-list li:nth-child(4) .wh-check svg{animation:wh-tick .45s ease 1.45s both}
  .wh-sip{animation:wh-pop .8s cubic-bezier(.3,1.4,.5,1) .55s both}
  .wh-chip b{animation:wh-live 2.4s ease-in-out infinite}
  /* the tap test plays as one 9 second loop */
  .wh-stream{animation:wh-stream 9s ease-in-out infinite}
  .wh-cup i{animation:wh-fill 9s ease-in-out infinite}
  .wh-vial.h i{animation:wh-hard 9s ease-in-out infinite}
  .wh-vial.d i{animation:wh-dis 9s ease-in-out infinite}
  .wh-vial.h .wh-drop{animation:wh-drop1 9s ease-in infinite}
  .wh-vial.d .wh-drop{animation:wh-drop2 9s ease-in infinite}
  .wh-bar.h i{animation:wh-barh 9s var(--wh-ease) infinite}
  .wh-bar.d i{animation:wh-bard 9s var(--wh-ease) infinite}
}
@media (prefers-reduced-motion:reduce){
  .wh-hero::before{animation:none}
  .wh-vial.h i{background:#3b6fd8}.wh-vial.d i{background:#ea7fb0}.wh-cup i{height:70%}.wh-bar.h i{width:72%}.wh-bar.d i{width:48%}
}
@keyframes wh-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes wh-in{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes wh-pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes wh-tick{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}
@keyframes wh-shine{from{left:-40%;opacity:1}to{left:120%;opacity:1}}
@keyframes wh-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)}}
@keyframes wh-stream{0%,4%{height:0;opacity:1}8%,26%{height:38px;opacity:1}30%,100%{height:38px;opacity:0}}
@keyframes wh-fill{0%,6%{height:0}28%,88%{height:70%}96%,100%{height:0}}
@keyframes wh-drop1{0%,32%{opacity:0;transform:translateY(0)}34%{opacity:1}42%{opacity:1;transform:translateY(34px)}44%,100%{opacity:0;transform:translateY(34px)}}
@keyframes wh-drop2{0%,42%{opacity:0;transform:translateY(0)}44%{opacity:1}52%{opacity:1;transform:translateY(34px)}54%,100%{opacity:0;transform:translateY(34px)}}
@keyframes wh-hard{0%,40%{background:#c2366b}56%,90%{background:#3b6fd8}97%,100%{background:#c2366b}}
@keyframes wh-dis{0%,50%{background:#eef3f6}64%,90%{background:#ea7fb0}97%,100%{background:#eef3f6}}
@keyframes wh-barh{0%,58%{width:0}74%,90%{width:72%}97%,100%{width:0}}
@keyframes wh-bard{0%,64%{width:0}80%,90%{width:48%}97%,100%{width:0}}
@media (max-width:520px){
  .wh-test{height:330px}
  .wh-faucet{left:0;top:64px;transform:scale(.86);transform-origin:left bottom}
  .wh-vials{left:47%;top:130px;gap:44px}
  .wh-vlab{font-size:9.5px}
  .wh-read{width:64%;right:12px;bottom:12px;padding:12px 14px}
  .wh-pack-top{height:230px;padding:52px 14px 16px}
  .wh-tile{min-height:190px}
}

/* ---------- Warranty: coverage timeline ---------- */
.wh-top.wh-grid{margin-bottom:8px}
@media (min-width:901px){.wh-top.wh-grid>.wh-visual{grid-row:1 / span 3}}
.wh-cover{border-radius:22px;background:#fff;border:1px solid var(--wh-line);box-shadow:0 30px 60px -40px rgba(19,36,58,.55);padding:20px 22px 18px}
.wh-cover-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.wh-cover-head h3{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em}
.wh-cover-head p{margin:2px 0 0;font-family:"Open Sans",Arial,sans-serif;font-size:12.5px;color:var(--wh-muted)}
.wh-shield{position:relative;flex:none;width:40px;height:46px;display:grid;place-items:center}
.wh-shield svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--wh-ink)}
.wh-shield b{position:relative;color:#ffc34c;font-size:15px;font-weight:800;margin-top:-3px}
.wh-years{position:relative;height:16px;margin:0 0 6px calc(42% + 10px);font-size:10.5px;font-weight:800;color:var(--wh-muted)}
.wh-years span{position:absolute;left:calc(var(--x) * 10%);transform:translateX(-50%);white-space:nowrap}
.wh-years span:first-child{transform:none}.wh-years span:last-child{transform:translateX(-100%)}
.wh-cov{display:grid;grid-template-columns:42% minmax(0,1fr);gap:10px;align-items:center;padding:7px 0;border-top:1px solid #eef3f7}
.wh-cov-l{font-family:"Open Sans",Arial,sans-serif;font-size:12.5px;font-weight:600;line-height:1.3;color:#26364f}
.wh-cov-track{position:relative;height:24px;border-radius:7px;background:repeating-linear-gradient(90deg,#f1f6fa 0 calc(10% - 1px),#e3ecf3 calc(10% - 1px) 10%)}
.wh-cov-track i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--y) * 10%);border-radius:7px;background:linear-gradient(90deg,#187fb5,#26bae6);display:flex;align-items:center;justify-content:flex-end;padding-right:8px;transform-origin:left center}
.wh-cov:last-of-type .wh-cov-track i{background:linear-gradient(90deg,#e3a521,#ffc34c)}
.wh-cov-track em{font-style:normal;font-size:11px;font-weight:800;color:#fff;white-space:nowrap}
.wh-cov:last-of-type .wh-cov-track em{color:var(--wh-ink)}
.wh-cov-track i.short{justify-content:flex-start;padding-left:8px;overflow:visible}
.wh-cov-track i.short em{position:absolute;left:calc(100% + 8px);color:var(--wh-ink)}
.wh-cover-note{margin:12px 0 0;font-family:"Open Sans",Arial,sans-serif;font-size:11.5px;line-height:1.45;color:var(--wh-muted)}

/* ---------- Service: details to have ready ---------- */
.wh-svc{display:grid;gap:14px}
.wh-svc-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wh-kind{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--wh-line);font-size:13px;font-weight:800;line-height:1.25;color:var(--wh-ink);box-shadow:0 14px 28px -24px rgba(19,36,58,.6)}
.wh-kind svg{width:34px;height:34px;padding:7px;border-radius:10px;background:var(--wh-sky);fill:none;stroke:var(--wh-blue);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wh-svc-card{border-radius:20px;background:#fff;border:1px solid var(--wh-line);box-shadow:0 30px 60px -40px rgba(19,36,58,.55);padding:18px 22px 16px}
.wh-svc-card h3{margin:0 0 12px;font-size:16px;font-weight:800}
.wh-svc-foot{display:flex;align-items:center;gap:9px;margin:14px 0 0;padding-top:12px;border-top:1px solid #eef3f7;font-family:"Open Sans",Arial,sans-serif;font-size:13px;color:var(--wh-muted)}
.wh-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#1faa6e}

/* ---------- Schedule: what happens at the visit ---------- */
.wh-visit{position:relative;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:14px;align-items:stretch}
.wh-cal{display:flex;flex-direction:column;border-radius:20px;background:#fff;border:1px solid var(--wh-line);box-shadow:0 30px 60px -40px rgba(19,36,58,.55);padding:16px}
.wh-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:13px;font-weight:800}
.wh-cal-head span{width:22px;height:22px;border-radius:50%;background:var(--wh-sky)}
.wh-cal-grid{flex:1;align-content:center;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wh-cal-grid i{aspect-ratio:1/1;border-radius:8px;background:#f1f6fa}
.wh-cal-grid i:nth-child(7n+6),.wh-cal-grid i:nth-child(7n){background:#f8fafc}
.wh-cal-grid i.pick{position:relative;background:var(--wh-blue);box-shadow:0 8px 16px -8px rgba(24,127,181,.8)}
.wh-cal-grid i.pick::after{content:"";position:absolute;left:50%;top:50%;width:38%;height:20%;border:solid #fff;border-width:0 0 2.5px 2.5px;transform:translate(-50%,-70%) rotate(-45deg)}
.wh-visit-card{border-radius:20px;background:var(--wh-ink);color:#fff;padding:18px 20px;box-shadow:0 30px 60px -36px rgba(19,36,58,.7)}
.wh-visit-card h3{margin:0 0 12px;font-size:16px;font-weight:800;color:#fff}
.wh-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wh-steps li{display:flex;align-items:center;gap:10px;font-family:"Open Sans",Arial,sans-serif;font-size:14px;line-height:1.3;color:#dce7f4}
.wh-steps span{flex:none;width:24px;height:24px;border-radius:50%;background:#ffc34c;color:var(--wh-ink);display:grid;place-items:center;font-family:Montserrat,Arial,sans-serif;font-size:12px;font-weight:800}
.wh-pill{display:inline-block;margin:14px 0 0;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.12);font-size:12px;font-weight:800;color:#fff}

/* ---------- My water: supply + household = the system that fits ---------- */
.wh-fit{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,.9fr);grid-template-rows:1fr 1fr;gap:14px 0;align-items:center;min-height:300px}
.wh-in{grid-column:1;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:16px;border-radius:18px;background:#fff;border:1px solid var(--wh-line);box-shadow:0 18px 36px -30px rgba(19,36,58,.6)}
.wh-in.a{grid-row:1}.wh-in.b{grid-row:2}
.wh-in b{font-size:14.5px;font-weight:800}
.wh-in small{grid-column:2;font-family:"Open Sans",Arial,sans-serif;font-size:12.5px;color:var(--wh-muted)}
.wh-ico{grid-row:span 2;width:42px;height:42px;border-radius:12px;background:var(--wh-sky);display:grid;place-items:center}
.wh-ico svg{width:22px;height:22px;fill:none;stroke:var(--wh-blue);stroke-width:2;stroke-linejoin:round}
.wh-flow{grid-column:2;grid-row:1 / span 2;width:100%;height:100%;overflow:visible}
.wh-flow path{fill:none;stroke:#9cc6df;stroke-width:2.5;stroke-dasharray:6 6;vector-effect:non-scaling-stroke}
.wh-out{grid-column:3;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 14px 18px;border-radius:22px;background:radial-gradient(80% 70% at 50% 85%,#d9f0fb,#ffffff 72%);border:1px solid var(--wh-line);box-shadow:0 30px 60px -40px rgba(19,36,58,.55)}
.wh-out-img{position:relative;width:100%;height:170px;margin-bottom:10px}
.wh-out-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;transition:opacity .9s ease}
.wh-out-img img+img{opacity:0}
.wh-fit.duo .wh-out-img img{opacity:0}.wh-fit.duo .wh-out-img img+img{opacity:1}
.wh-out b{font-size:14.5px;font-weight:800}
.wh-out small{font-family:"Open Sans",Arial,sans-serif;font-size:12.5px;color:var(--wh-muted)}

/* ---------- Articles: a featured guide per topic ---------- */
.wh-lib{border-radius:22px;background:#fff;border:1px solid var(--wh-line);box-shadow:0 30px 60px -40px rgba(19,36,58,.55);overflow:hidden}
.wh-lib-img{position:relative;height:230px;background:#e8f1f7;overflow:hidden}
.wh-lib-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s ease,transform 5s ease-out}
.wh-lib-img img.tall{object-position:center 38%}
.wh-lib-img img.on{opacity:1;transform:none}
.wh-lib-count{position:absolute;right:14px;top:14px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.92);font-size:12px;font-weight:800;color:var(--wh-ink)}
.wh-lib-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:14px 18px 0}
.wh-lib-tabs button{font:800 12px/1 Montserrat,Arial,sans-serif;padding:8px 12px;border-radius:999px;border:1px solid var(--wh-line);background:#fff;color:var(--wh-muted);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.wh-lib-tabs button[aria-selected="true"]{background:var(--wh-ink);border-color:var(--wh-ink);color:#fff}
.wh-lib-tabs button:focus-visible{outline:3px solid #096caa;outline-offset:2px}
.wh-lib-feat{position:relative;height:84px;margin:0 18px}
.wh-feat{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:5px;text-decoration:none;color:var(--wh-ink);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .5s ease,transform .5s var(--wh-ease)}
.wh-feat.on{opacity:1;transform:none;pointer-events:auto}
.wh-feat b{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.wh-feat span{font-family:"Open Sans",Arial,sans-serif;font-size:13px;font-weight:700;color:var(--wh-blue)}
.wh-feat:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

@media (prefers-reduced-motion:no-preference){
  .wh-cov-track i{animation:wh-grow .9s var(--wh-ease) both}
  .wh-cov:nth-of-type(1) .wh-cov-track i{animation-delay:.5s}.wh-cov:nth-of-type(2) .wh-cov-track i{animation-delay:.65s}.wh-cov:nth-of-type(3) .wh-cov-track i{animation-delay:.8s}.wh-cov:nth-of-type(4) .wh-cov-track i{animation-delay:.95s}.wh-cov:nth-of-type(5) .wh-cov-track i{animation-delay:1.1s}
  .wh-cov-track em{animation:wh-fade .4s ease 1.6s both}
  .wh-kind{animation:wh-rise .6s var(--wh-ease) both}
  .wh-kind:nth-child(1){animation-delay:.35s}.wh-kind:nth-child(2){animation-delay:.47s}.wh-kind:nth-child(3){animation-delay:.59s}
  .wh-kind svg{transition:transform .3s var(--wh-ease)}.wh-kind:hover svg{transform:translateY(-2px) scale(1.06)}
  .wh-dot{animation:wh-live 2.4s ease-in-out infinite}
  .wh-cal-grid i{animation:wh-pop .4s ease .3s both}
  .wh-cal-grid i.pick{animation:wh-pick 4.8s ease-in-out 1s infinite}
  .wh-steps li{animation:wh-in .5s var(--wh-ease) both}
  .wh-steps li:nth-child(1){animation-delay:.8s}.wh-steps li:nth-child(2){animation-delay:1s}.wh-steps li:nth-child(3){animation-delay:1.2s}
  .wh-pill{animation:wh-fade .5s ease 1.5s both}
  .wh-in.a{animation:wh-in .6s var(--wh-ease) .4s both}.wh-in.b{animation:wh-in .6s var(--wh-ease) .55s both}
  .wh-flow path{animation:wh-flow 1.4s linear infinite}
  .wh-out{animation:wh-pop .8s cubic-bezier(.3,1.4,.5,1) .8s both}
}
@keyframes wh-grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes wh-fade{from{opacity:0}to{opacity:1}}
@keyframes wh-flow{to{stroke-dashoffset:-24}}
@keyframes wh-pick{0%,70%,100%{transform:none}80%{transform:scale(1.12)}90%{transform:scale(.98)}}

@media (max-width:520px){
  .wh-cover{padding:16px 14px 14px}
  .wh-cov{grid-template-columns:38% minmax(0,1fr)}
  .wh-years{margin-left:calc(38% + 10px)}
  .wh-cov-l{font-size:11.5px}
  .wh-svc-kinds{gap:8px}.wh-kind{padding:11px;font-size:11.5px}.wh-kind svg{width:30px;height:30px;padding:6px}
  .wh-visit{grid-template-columns:1fr}
  .wh-cal-grid{grid-template-columns:repeat(7,1fr);gap:5px}.wh-cal-grid i{aspect-ratio:2.2/1}
  .wh-fit{grid-template-columns:minmax(0,1fr) 30px minmax(0,.85fr);min-height:260px}
  .wh-in{grid-template-columns:1fr;padding:12px;row-gap:6px}.wh-ico{grid-row:auto;width:34px;height:34px}.wh-in small{grid-column:1;font-size:11.5px}.wh-in b{font-size:13px}
  .wh-out-img{height:130px}.wh-out b{font-size:13px}
  .wh-lib-img{height:190px}.wh-feat b{font-size:15.5px}
}

/* Publisher integration: visitor control and complete reduced-motion behavior. */
/* Promise hero: equipment and support, leaving the detailed timeline below. */
.wh-promise-art{position:relative;overflow:hidden;padding:24px;border:1px solid var(--wh-line);border-radius:28px;background:linear-gradient(145deg,#fff 20%,#edf8fd 80%);box-shadow:0 30px 60px -40px rgba(19,36,58,.45)}
.wh-promise-stage{position:relative;isolation:isolate;display:grid;place-items:center;height:320px;margin:8px 0 16px}
.wh-promise-stage>img{position:relative;width:78%;height:100%;object-fit:contain;z-index:1;filter:drop-shadow(0 18px 14px rgba(19,36,58,.12))}
.wh-promise-orbit{position:absolute;width:84%;aspect-ratio:1;border-radius:50%;border:1px solid #bce1ef;background:radial-gradient(circle,rgba(43,186,223,.12),rgba(43,186,223,.025) 65%,transparent 66%);box-shadow:0 0 0 18px rgba(188,225,239,.10),0 0 0 36px rgba(188,225,239,.05)}
.wh-promise-shield{position:absolute;right:0;bottom:12px;z-index:2;display:grid;place-items:center;width:110px;height:124px;border-radius:24px;background:rgba(255,255,255,.94);box-shadow:0 18px 36px -18px rgba(19,36,58,.35)}
.wh-promise-shield svg{width:64px;height:74px}.wh-shield-body{fill:#267fa4;stroke:#1c6382;stroke-width:2}.wh-shield-check{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.wh-promise-caption{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-top:1px solid var(--wh-line);font-size:16px}
@media(prefers-reduced-motion:no-preference){.wh-promise-orbit{animation:wh-promise-breathe 6s ease-in-out infinite}.wh-promise-shield{animation:wh-promise-float 6s ease-in-out infinite}}
@keyframes wh-promise-breathe{50%{transform:scale(.95);opacity:.65}}
@keyframes wh-promise-float{50%{transform:translateY(-6px)}}
/* Service salt callout follows the shared content edges and service journey. */
.ss-service-page .sunstorm-salt-link{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;margin-block:0 48px;padding:32px;box-sizing:border-box;border:1px solid var(--wh-line);border-radius:24px;background:linear-gradient(120deg,#eef8fd,#fff)}
.ss-service-page .sunstorm-salt-link h2{margin:8px 0 12px}.ss-service-page .sunstorm-salt-link p:last-child{margin-bottom:0;max-width:66ch}
.ss-service-page .sunstorm-salt-link>.button{justify-self:end;max-width:100%;white-space:normal;text-align:center}
@media(max-width:700px){.ss-service-page .sunstorm-salt-link{grid-template-columns:1fr;gap:20px;padding:24px;margin-bottom:36px}.ss-service-page .sunstorm-salt-link>.button{justify-self:start}.wh-promise-art{padding:18px}.wh-promise-stage{height:260px}.wh-promise-shield{width:84px;height:96px}.wh-promise-shield svg{width:48px;height:56px}}
.wh-motion-control{display:block;margin:14px 0 0 auto;padding:7px 12px;border:1px solid var(--wh-line);border-radius:999px;background:#fff;color:var(--wh-blue);font:700 12px/1.3 "Open Sans",Arial,sans-serif;cursor:pointer}
.wh-motion-control:focus-visible{outline:3px solid #096caa;outline-offset:3px}
.wh-motion-control[hidden]{display:none}
.wh-paused::before,.wh-offscreen::before,.wh-paused .wh-visual,.wh-paused .wh-visual *,.wh-paused .wh-visual *::before,.wh-paused .wh-visual *::after,.wh-offscreen .wh-visual,.wh-offscreen .wh-visual *,.wh-offscreen .wh-visual *::before,.wh-offscreen .wh-visual *::after{animation-play-state:paused!important}
.wh-paused .wh-visual,.wh-paused .wh-visual *{transition:none!important}
.wh-lib-panel{position:absolute;inset:0}
.wh-lib-panel[hidden]{display:none}
@media(prefers-reduced-motion:reduce){
 .wh-hero::before{animation:none!important}
 .wh-hero .wh-visual,.wh-hero .wh-visual *,.wh-hero .wh-visual *::before,.wh-hero .wh-visual *::after{transition:none!important;animation:none!important}
 .wh-tile:hover,.wh-tile:focus-visible,.wh-tile:hover .wh-img img{transform:none!important}
}