/* ==========================================================
   SHARK EXTERIOR — Service page process sections
   Photo steps (windows), soft wash pricing sheet, power wash
   driveway, gutter run, solar panel stage, holiday lights.
   Loaded after theme.css on the service pages.
   ========================================================== */

/* ==========================================================
   WINDOW CLEANING — real photo steps with a squeegee reveal
   ========================================================== */
.sx-wsteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; max-width: 1220px; margin: 0 auto 50px; counter-reset: wstep; }
.sx-wstep { position: relative; display: flex; flex-direction: column; }
.sx-wstep-photo { position: relative; margin: 0; aspect-ratio: 4 / 3.4; border-radius: 10px; overflow: hidden; background: #0A2152; box-shadow: 0 22px 40px -26px rgba(4, 20, 60, .65); }
.sx-wstep-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--sx-ease); }
.sx-wstep:hover .sx-wstep-photo img { transform: scale(1.05); }
.sx-wstep-num {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  padding: 5px 10px 4px; border-radius: 6px; background: #fff; color: var(--sx-navy);
  font-size: .78rem; font-weight: 800; letter-spacing: .12em; box-shadow: 0 6px 14px -6px rgba(4, 20, 60, .5);
}
.sx-wstep-body { padding: 18px 2px 0; }
.sx-wstep-rule { position: relative; display: block; height: 2px; margin-bottom: 16px; background: #E1E8F2; overflow: hidden; }
.sx-wstep-rule::after { content: ''; position: absolute; inset: 0; background: var(--sx-orange); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--sx-ease); transition-delay: calc(var(--d, 0ms) + .7s); }
.sx-wstep h3 { margin: 0 0 8px; color: var(--sx-navy); font-size: 1.22rem; font-weight: 800; letter-spacing: .01em; }
.sx-wstep p { margin: 0; color: var(--sx-text); font-size: .98rem; line-height: 1.6; }
.sx-wstep.is-in .sx-wstep-rule::after, .sx-wstep:not(.sx-r) .sx-wstep-rule::after { transform: scaleX(1); }

/* Squeegee pass: the photo is wiped into view left to right */
.sx-js .sx-wstep.sx-r .sx-wstep-photo img { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1), transform 1.1s var(--sx-ease); transition-delay: calc(var(--d, 0ms) + .15s), 0s; }
.sx-js .sx-wstep.sx-r.is-in .sx-wstep-photo img { clip-path: inset(0 0 0 0); }
.sx-js .sx-wstep.sx-r .sx-wstep-photo::after {
  content: ''; position: absolute; top: -4%; bottom: -4%; left: 0; width: 7px; z-index: 1; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .95), #C9D6E6 60%, rgba(4, 20, 60, .5));
  border-radius: 4px; box-shadow: -10px 0 18px rgba(255, 255, 255, .45);
}
.sx-js .sx-wstep.sx-r.is-in .sx-wstep-photo::after { animation: sx-squeegee 1.1s cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(var(--d, 0ms) + .15s); }
@keyframes sx-squeegee { 0% { left: 0; opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }

@media (max-width: 1000px) { .sx-wsteps { grid-template-columns: repeat(2, 1fr); max-width: 720px; row-gap: 34px; } }
@media (max-width: 600px) {
  .sx-wsteps { grid-template-columns: 1fr; gap: 18px; }
  .sx-wstep { display: grid; grid-template-columns: 42% 1fr; gap: 14px; align-items: start; }
  .sx-wstep-photo { aspect-ratio: 1 / 1.05; border-radius: 8px; }
  .sx-wstep-num { left: 8px; top: 8px; font-size: .68rem; padding: 4px 7px 3px; }
  .sx-wstep-body { padding: 2px 0 0; }
  .sx-wstep-rule { margin-bottom: 10px; }
  .sx-wstep h3 { font-size: 1.05rem; margin-bottom: 5px; }
  .sx-wstep p { font-size: .88rem; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-js .sx-wstep.sx-r .sx-wstep-photo img { clip-path: none !important; }
  .sx-js .sx-wstep.sx-r .sx-wstep-photo::after { display: none; }
}

/* ==========================================================
   SOFT WASHING — pricing sheet
   ========================================================== */
.sx-psheet-section { background: linear-gradient(180deg, #F6F9FD 0%, #EDF3FA 100%); }
.sx-psheet { display: grid; grid-template-columns: 1fr 1.1fr; gap: 34px; max-width: 1140px; margin: 0 auto; align-items: stretch; }
.sx-psheet-photo { position: relative; margin: 0; border-radius: 14px; overflow: hidden; min-height: 460px; background: var(--sx-navy); box-shadow: 0 30px 60px -36px rgba(4, 20, 60, .7); }
.sx-psheet-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-psheet-photo figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 14px 16px; border-radius: 10px; background: rgba(4, 20, 60, .82); color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sx-psheet-photo figcaption b { display: block; font-size: 1rem; margin-bottom: 4px; }
.sx-psheet-photo figcaption span { font-size: .85rem; color: rgba(255, 255, 255, .8); line-height: 1.5; }
.sx-psheet-card { position: relative; padding: 30px 32px 32px; border-radius: 14px; background: #fff; border: 1px solid #DDE5EF; box-shadow: 0 30px 60px -40px rgba(4, 20, 60, .45); }
/* torn "estimate" edge at the top of the sheet */
.sx-psheet-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 14px 14px 0 0; background: repeating-linear-gradient(90deg, var(--sx-navy) 0 22px, var(--sx-orange) 22px 30px); }
.sx-psheet-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 2px dashed #DDE5EF; }
.sx-psheet-tag { color: var(--sx-navy); font-size: 1.3rem; font-weight: 800; letter-spacing: .02em; }
.sx-psheet-free { padding: 6px 12px; border-radius: 999px; background: #FFF1E6; color: var(--sx-orange-600); font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sx-psheet-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: start; padding: 18px 0; border-bottom: 1px solid #EEF2F7; }
.sx-psheet-row:last-of-type { border-bottom: 0; }
.sx-psheet-k { color: var(--sx-muted); font-size: .8rem; font-weight: 800; letter-spacing: .1em; padding-top: 4px; }
.sx-psheet-row h3 { margin: 0 0 4px; color: var(--sx-navy); font-size: 1.08rem; font-weight: 800; }
.sx-psheet-row p { margin: 0; color: var(--sx-text); font-size: .95rem; line-height: 1.55; }
.sx-psheet-v { align-self: center; color: var(--sx-blue); font-size: .9rem; font-weight: 800; white-space: nowrap; }
.sx-psheet-row--bundle { grid-template-columns: 34px 1fr; }
.sx-psheet-tiers { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 12px; padding: 0; height: 132px; align-items: end; }
.sx-psheet-tiers li { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; }
.sx-psheet-bar { position: relative; display: flex; align-items: flex-start; justify-content: center; height: var(--h); padding-top: 8px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--sx-blue), #0352C7); color: #fff; transform-origin: bottom; }
.sx-psheet-tiers li:last-child .sx-psheet-bar { background: linear-gradient(180deg, var(--sx-orange-300), var(--sx-orange)); }
.sx-psheet-bar b { font-size: 1.05rem; font-weight: 800; }
.sx-psheet-tiers small { margin-top: 6px; color: var(--sx-slate-dark); font-size: .8rem; font-weight: 700; }
.sx-psheet-eg { padding: 10px 12px; border-radius: 8px; background: var(--sx-bg-soft); font-size: .9rem !important; }
.sx-psheet-eg b { color: var(--sx-navy); }
.sx-psheet-btn { margin-top: 18px; width: 100%; justify-content: center; }
.sx-js .sx-psheet-card.sx-r .sx-psheet-bar { transform: scaleY(0); transition: transform .9s cubic-bezier(.34, 1.3, .64, 1); transition-delay: calc(.6s + var(--i) * .15s); }
.sx-js .sx-psheet-card.sx-r.is-in .sx-psheet-bar { transform: none; }
@media (max-width: 900px) {
  .sx-psheet { grid-template-columns: 1fr; max-width: 620px; gap: 20px; }
  .sx-psheet-photo { min-height: 260px; }
}
@media (max-width: 520px) {
  .sx-psheet-card { padding: 24px 18px 22px; }
  .sx-psheet-row { grid-template-columns: 26px 1fr; }
  .sx-psheet-row .sx-psheet-v { display: none; }
  .sx-psheet-tiers { height: 116px; gap: 8px; }
}

/* ==========================================================
   SOFT WASHING — winding path: illustrated nodes + phone rail
   ========================================================== */
.sx-wind-node { width: 106px; height: 106px; }
.sx-wind-node .sx-ill { width: 74px; height: 74px; fill: initial; stroke: none; filter: grayscale(1); opacity: .55; transition: filter .6s, opacity .6s; }
.sx-wind-step.is-lit .sx-wind-node { background: #fff; border-color: #0FA3E0; box-shadow: 0 0 0 10px rgba(15, 163, 224, .16), 0 22px 40px -16px rgba(4, 99, 238, .6); }
.sx-wind-step.is-lit .sx-wind-node .sx-ill { filter: none; opacity: 1; }
.sx-wind-draw { transition: stroke-dashoffset .08s linear; }
.sx-wind-rail { display: none; }

/* Little loops that play once a step lights up */
.sx-ill .sx-drop { opacity: 0; }
.sx-wind-step.is-lit .sx-ill .sx-drop { animation: sx-drop 1.4s ease-in infinite; animation-delay: calc(var(--i) * .35s); }
@keyframes sx-drop { 0% { opacity: 0; transform: translateY(-4px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
.sx-ill .sx-foam circle { transform-box: fill-box; transform-origin: center; }
.sx-wind-step.is-lit .sx-ill .sx-foam circle { animation: sx-foam 1.6s ease-out infinite; animation-delay: calc(var(--i) * .25s); }
@keyframes sx-foam { 0% { transform: scale(.2); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.25) translate(2px, -3px); opacity: 0; } }
.sx-ill .sx-algae { transition: opacity 2.4s ease .4s; }
.sx-wind-step.is-lit .sx-ill .sx-algae { opacity: .25; }
.sx-ill .sx-hand { transform-origin: 48px 46px; }
.sx-wind-step.is-lit .sx-ill .sx-hand { animation: sx-spin 3s linear infinite; }
@keyframes sx-spin { to { transform: rotate(360deg); } }
.sx-ill .sx-sheet path { stroke-dasharray: 6 5; }
.sx-wind-step.is-lit .sx-ill .sx-sheet path { animation: sx-sheetflow 1s linear infinite; }
@keyframes sx-sheetflow { to { stroke-dashoffset: -22; } }
.sx-ill .sx-spark { transform-box: fill-box; transform-origin: center; }
.sx-wind-step.is-lit .sx-ill .sx-spark { animation: sx-sparkle 1.8s ease-in-out infinite; }
@keyframes sx-sparkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .5; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }

@media (max-width: 760px) {
  .sx-wind::before { display: none; }
  .sx-wind-rail { display: block; position: absolute; left: 34px; top: 20px; bottom: 20px; width: 6px; border-radius: 6px; background: rgba(4, 99, 238, .14); overflow: hidden; }
  .sx-wind-rail > span { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(#0463EE, #0FA3E0); transform: scaleY(0); transform-origin: top; }
  .sx-wind-node, .sx-wind-step:nth-child(even) .sx-wind-node { width: 74px; height: 74px; }
  .sx-wind-node .sx-ill { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-ill *, .sx-wind-step.is-lit .sx-ill * { animation: none !important; }
}

/* ==========================================================
   POWER WASHING — timeline: solid numbers, full glow, bubbles
   ========================================================== */
.sx-journey-fill { transition: transform .08s linear; overflow: hidden; }
/* water moving through the filled line */
.sx-journey-fill::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 6px 50%, rgba(255, 255, 255, .85) 0 1.6px, transparent 2.4px) 0 0 / 22px 100%,
              radial-gradient(circle at 15px 30%, rgba(255, 255, 255, .6) 0 1.1px, transparent 1.8px) 0 0 / 31px 100%;
  animation: sx-water-x 1.1s linear infinite;
}
@keyframes sx-water-x { to { background-position: 22px 0, 31px 0; } }
/* Numbers are solid discs, so the line never shows through them */
.sx-journey-section--photo .sx-journey-node { background: #0A2152; border-color: #2A4478; }
.sx-journey-section--photo .sx-journey-num { color: rgba(255, 255, 255, .75); }
/* Lit number: solid fill, a solid ring and a soft glow (no see-through gaps) */
.sx-journey-section--photo .sx-journey-step.is-lit .sx-journey-node,
.sx-journey-step.is-lit .sx-journey-node {
  --glow: 15, 163, 224;
  border: 3px solid #fff; background: linear-gradient(135deg, var(--sx-blue), #0FA3E0);
  box-shadow: 0 0 0 9px rgba(var(--glow), .38), 0 0 34px 14px rgba(var(--glow), .45);
  animation: sx-halo 2.6s ease-in-out .6s infinite;
}
.sx-journey-section--photo .sx-journey-step:last-child.is-lit .sx-journey-node,
.sx-journey-step:last-child.is-lit .sx-journey-node { --glow: 248, 106, 5; background: linear-gradient(135deg, var(--sx-orange), var(--sx-orange-300)); }
@keyframes sx-halo { 50% { box-shadow: 0 0 0 13px rgba(var(--glow), .28), 0 0 46px 20px rgba(var(--glow), .5); } }
.sx-journey-step.is-lit .sx-journey-num { color: #fff; }

/* Bubbles float up out of a number once the water reaches it */
.sx-journey-fizz { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 2; pointer-events: none; }
.sx-journey-fizz i {
  position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) / -2); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .95) 0 18%, rgba(190, 230, 255, .35) 40%, rgba(15, 163, 224, .15) 70%);
  border: 1px solid rgba(255, 255, 255, .7); opacity: 0;
}
.sx-journey-step.is-lit .sx-journey-fizz i { animation: sx-bubble var(--t) ease-out var(--dl) infinite; }
@keyframes sx-bubble {
  0% { opacity: 0; transform: translate(0, 0) scale(.3); }
  15% { opacity: 1; }
  70% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--x), -96px) scale(1.1); }
}
@media (max-width: 900px) {
  .sx-journey-fill::after { background: radial-gradient(circle at 50% 6px, rgba(255, 255, 255, .85) 0 1.6px, transparent 2.4px) 0 0 / 100% 22px; animation-name: sx-water-y; }
  @keyframes sx-water-y { to { background-position: 0 22px; } }
  @keyframes sx-bubble { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--x) * .5 + 30px), -50px) scale(.9); } }
}
@media (prefers-reduced-motion: reduce) {
  .sx-journey-fill::after, .sx-journey-step.is-lit .sx-journey-node, .sx-journey-step.is-lit .sx-journey-fizz i { animation: none !important; }
}

/* ==========================================================
   POWER WASHING — a driveway that gets cleaned as you scroll
   ========================================================== */
.sx-slab-wrap { --p: 0; max-width: 1220px; margin: 0 auto 50px; }
.sx-slab {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position: relative; height: 280px; border-radius: 12px; overflow: hidden; isolation: isolate;
  box-shadow: 0 30px 60px -36px rgba(4, 20, 60, .7), inset 0 0 0 1px rgba(4, 20, 60, .15);
}
.sx-slab-dirty, .sx-slab-clean { position: absolute; inset: 0; }
.sx-slab-dirty {
  background:
    radial-gradient(ellipse 70px 46px at 31% 60%, rgba(8, 6, 4, .75), transparent 72%),
    radial-gradient(ellipse 120px 80px at 30% 58%, rgba(20, 16, 10, .5), transparent 70%),
    radial-gradient(ellipse 50px 30px at 58% 30%, rgba(8, 6, 4, .6), transparent 72%),
    radial-gradient(ellipse 180px 80px at 70% 45%, rgba(38, 54, 18, .6), transparent 70%),
    radial-gradient(ellipse 130px 90px at 90% 72%, rgba(22, 22, 16, .6), transparent 70%),
    radial-gradient(ellipse 260px 60px at 50% 92%, rgba(46, 66, 20, .75), transparent 70%),
    radial-gradient(ellipse 260px 60px at 50% 8%, rgba(46, 66, 20, .7), transparent 70%),
    radial-gradient(ellipse 120px 100px at 10% 40%, rgba(25, 22, 18, .55), transparent 70%),
    radial-gradient(ellipse 90px 70px at 46% 76%, rgba(60, 40, 20, .45), transparent 70%),
    var(--grain), linear-gradient(90deg, #6A675E, #5F5C53 50%, #67635A);
}
/* pre-treatment foam, always just ahead of the cleaner */
.sx-slab-foam { position: absolute; left: calc(var(--p) * 100%); top: 10%; bottom: 10%; width: 24%; opacity: calc(1 - max(0, var(--p) - .9) * 10);
  -webkit-mask: linear-gradient(90deg, #000 60%, transparent); mask: linear-gradient(90deg, #000 60%, transparent);
  background:
    radial-gradient(ellipse 34px 22px at 20% 30%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(ellipse 44px 26px at 45% 70%, rgba(255, 255, 255, .5), transparent 70%),
    radial-gradient(ellipse 30px 24px at 70% 42%, rgba(255, 255, 255, .45), transparent 70%),
    radial-gradient(ellipse 26px 18px at 30% 88%, rgba(255, 255, 255, .45), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='200'%3E%3Ccircle cx='77.7' cy='30.2' r='3.0' fill='%23fff' fill-opacity='0.48'/%3E%3Ccircle cx='128.6' cy='73.1' r='1.0' fill='%23DCF0FF' fill-opacity='0.55'/%3E%3Ccircle cx='20.6' cy='83.6' r='1.3' fill='%23fff' fill-opacity='0.70'/%3E%3Ccircle cx='14.2' cy='113.1' r='1.3' fill='%23DCF0FF' fill-opacity='0.73'/%3E%3Ccircle cx='227.5' cy='115.4' r='2.0' fill='%23fff' fill-opacity='0.89'/%3E%3Ccircle cx='11.2' cy='171.7' r='1.6' fill='%23fff' fill-opacity='0.51'/%3E%3Ccircle cx='28.3' cy='61.7' r='3.6' fill='%23DCF0FF' fill-opacity='0.53'/%3E%3Ccircle cx='139.6' cy='127.8' r='1.6' fill='%23fff' fill-opacity='0.70'/%3E%3Ccircle cx='15.1' cy='11.9' r='1.3' fill='%23fff' fill-opacity='0.76'/%3E%3Ccircle cx='102.6' cy='62.8' r='2.4' fill='%23fff' fill-opacity='0.61'/%3E%3Ccircle cx='59.6' cy='36.0' r='3.6' fill='%23fff' fill-opacity='0.49'/%3E%3Ccircle cx='72.1' cy='99.0' r='1.6' fill='%23DCF0FF' fill-opacity='0.65'/%3E%3Ccircle cx='146.2' cy='14.6' r='2.4' fill='%23fff' fill-opacity='0.52'/%3E%3Ccircle cx='82.1' cy='186.7' r='2.0' fill='%23fff' fill-opacity='0.88'/%3E%3Ccircle cx='18.6' cy='111.6' r='3.6' fill='%23fff' fill-opacity='0.60'/%3E%3Ccircle cx='84.0' cy='99.3' r='3.6' fill='%23fff' fill-opacity='0.48'/%3E%3Ccircle cx='22.5' cy='54.0' r='3.0' fill='%23DCF0FF' fill-opacity='0.48'/%3E%3Ccircle cx='175.5' cy='61.9' r='2.4' fill='%23DCF0FF' fill-opacity='0.82'/%3E%3Ccircle cx='68.3' cy='77.2' r='3.0' fill='%23fff' fill-opacity='0.46'/%3E%3Ccircle cx='110.8' cy='33.6' r='1.0' fill='%23fff' fill-opacity='0.48'/%3E%3Ccircle cx='184.4' cy='25.9' r='1.3' fill='%23fff' fill-opacity='0.63'/%3E%3Ccircle cx='209.1' cy='16.1' r='2.0' fill='%23fff' fill-opacity='0.70'/%3E%3Ccircle cx='212.0' cy='163.9' r='3.6' fill='%23DCF0FF' fill-opacity='0.58'/%3E%3Ccircle cx='99.7' cy='71.8' r='2.0' fill='%23fff' fill-opacity='0.52'/%3E%3Ccircle cx='42.3' cy='46.4' r='1.3' fill='%23fff' fill-opacity='0.67'/%3E%3Ccircle cx='141.4' cy='52.5' r='1.0' fill='%23fff' fill-opacity='0.64'/%3E%3Ccircle cx='88.6' cy='113.3' r='1.3' fill='%23DCF0FF' fill-opacity='0.84'/%3E%3Ccircle cx='228.1' cy='131.0' r='3.0' fill='%23fff' fill-opacity='0.66'/%3E%3Ccircle cx='209.0' cy='190.4' r='3.0' fill='%23DCF0FF' fill-opacity='0.63'/%3E%3Ccircle cx='95.8' cy='20.7' r='3.0' fill='%23fff' fill-opacity='0.48'/%3E%3Ccircle cx='16.2' cy='41.8' r='1.3' fill='%23fff' fill-opacity='0.60'/%3E%3Ccircle cx='12.6' cy='0.0' r='1.3' fill='%23DCF0FF' fill-opacity='0.50'/%3E%3Ccircle cx='87.3' cy='5.1' r='3.6' fill='%23fff' fill-opacity='0.73'/%3E%3Ccircle cx='35.7' cy='50.5' r='1.6' fill='%23DCF0FF' fill-opacity='0.61'/%3E%3Ccircle cx='29.5' cy='169.8' r='2.0' fill='%23fff' fill-opacity='0.67'/%3E%3Ccircle cx='20.6' cy='20.4' r='1.6' fill='%23DCF0FF' fill-opacity='0.57'/%3E%3Ccircle cx='198.9' cy='32.3' r='1.0' fill='%23fff' fill-opacity='0.88'/%3E%3Ccircle cx='126.8' cy='29.3' r='2.4' fill='%23fff' fill-opacity='0.79'/%3E%3Ccircle cx='71.5' cy='128.6' r='1.0' fill='%23DCF0FF' fill-opacity='0.83'/%3E%3Ccircle cx='124.4' cy='181.7' r='1.6' fill='%23fff' fill-opacity='0.69'/%3E%3Ccircle cx='187.0' cy='65.9' r='1.3' fill='%23DCF0FF' fill-opacity='0.82'/%3E%3Ccircle cx='236.4' cy='170.5' r='3.6' fill='%23fff' fill-opacity='0.82'/%3E%3Ccircle cx='177.6' cy='45.3' r='2.4' fill='%23fff' fill-opacity='0.61'/%3E%3Ccircle cx='7.0' cy='5.6' r='1.6' fill='%23fff' fill-opacity='0.57'/%3E%3Ccircle cx='166.2' cy='191.3' r='2.0' fill='%23DCF0FF' fill-opacity='0.89'/%3E%3Ccircle cx='229.2' cy='72.9' r='1.3' fill='%23fff' fill-opacity='0.55'/%3E%3Ccircle cx='47.2' cy='40.9' r='2.4' fill='%23DCF0FF' fill-opacity='0.83'/%3E%3Ccircle cx='115.1' cy='130.6' r='3.6' fill='%23DCF0FF' fill-opacity='0.49'/%3E%3Ccircle cx='158.5' cy='182.0' r='3.6' fill='%23DCF0FF' fill-opacity='0.79'/%3E%3Ccircle cx='114.7' cy='35.7' r='3.6' fill='%23DCF0FF' fill-opacity='0.60'/%3E%3Ccircle cx='192.2' cy='194.3' r='2.0' fill='%23fff' fill-opacity='0.63'/%3E%3Ccircle cx='227.2' cy='145.0' r='1.3' fill='%23fff' fill-opacity='0.46'/%3E%3Ccircle cx='141.8' cy='93.1' r='3.0' fill='%23fff' fill-opacity='0.73'/%3E%3Ccircle cx='143.0' cy='94.9' r='1.6' fill='%23fff' fill-opacity='0.70'/%3E%3Ccircle cx='31.4' cy='2.8' r='3.0' fill='%23DCF0FF' fill-opacity='0.50'/%3E%3Ccircle cx='179.9' cy='27.9' r='3.6' fill='%23fff' fill-opacity='0.82'/%3E%3Ccircle cx='50.7' cy='50.4' r='1.6' fill='%23DCF0FF' fill-opacity='0.56'/%3E%3Ccircle cx='140.7' cy='51.9' r='2.0' fill='%23fff' fill-opacity='0.48'/%3E%3Ccircle cx='177.6' cy='179.5' r='3.0' fill='%23DCF0FF' fill-opacity='0.82'/%3E%3Ccircle cx='124.0' cy='165.4' r='2.4' fill='%23fff' fill-opacity='0.69'/%3E%3Ccircle cx='125.6' cy='3.7' r='2.0' fill='%23fff' fill-opacity='0.72'/%3E%3Ccircle cx='186.2' cy='30.0' r='1.3' fill='%23fff' fill-opacity='0.73'/%3E%3Ccircle cx='28.9' cy='12.4' r='3.0' fill='%23DCF0FF' fill-opacity='0.69'/%3E%3Ccircle cx='115.8' cy='155.3' r='2.4' fill='%23fff' fill-opacity='0.56'/%3E%3Ccircle cx='66.5' cy='154.5' r='2.4' fill='%23fff' fill-opacity='0.70'/%3E%3Ccircle cx='182.4' cy='182.5' r='2.0' fill='%23fff' fill-opacity='0.73'/%3E%3Ccircle cx='121.3' cy='102.4' r='3.0' fill='%23fff' fill-opacity='0.65'/%3E%3Ccircle cx='128.0' cy='95.6' r='1.3' fill='%23DCF0FF' fill-opacity='0.69'/%3E%3Ccircle cx='210.2' cy='185.6' r='2.4' fill='%23fff' fill-opacity='0.83'/%3E%3Ccircle cx='32.9' cy='24.3' r='2.0' fill='%23fff' fill-opacity='0.48'/%3E%3Ccircle cx='57.8' cy='14.6' r='3.0' fill='%23fff' fill-opacity='0.80'/%3E%3Ccircle cx='215.3' cy='30.9' r='3.0' fill='%23DCF0FF' fill-opacity='0.75'/%3E%3Ccircle cx='34.3' cy='176.6' r='2.0' fill='%23fff' fill-opacity='0.79'/%3E%3Ccircle cx='22.6' cy='177.0' r='1.3' fill='%23DCF0FF' fill-opacity='0.82'/%3E%3Ccircle cx='38.8' cy='86.3' r='2.4' fill='%23fff' fill-opacity='0.60'/%3E%3Ccircle cx='47.0' cy='63.7' r='3.0' fill='%23fff' fill-opacity='0.46'/%3E%3Ccircle cx='133.0' cy='88.1' r='1.0' fill='%23fff' fill-opacity='0.60'/%3E%3Ccircle cx='149.7' cy='102.5' r='1.0' fill='%23fff' fill-opacity='0.89'/%3E%3Ccircle cx='189.2' cy='194.3' r='1.0' fill='%23fff' fill-opacity='0.57'/%3E%3Ccircle cx='9.5' cy='155.8' r='1.6' fill='%23fff' fill-opacity='0.82'/%3E%3Ccircle cx='203.9' cy='135.2' r='1.6' fill='%23fff' fill-opacity='0.52'/%3E%3Ccircle cx='220.6' cy='114.1' r='3.0' fill='%23fff' fill-opacity='0.49'/%3E%3Ccircle cx='13.8' cy='137.6' r='2.0' fill='%23fff' fill-opacity='0.57'/%3E%3Ccircle cx='4.0' cy='17.7' r='1.6' fill='%23fff' fill-opacity='0.72'/%3E%3Ccircle cx='53.4' cy='52.9' r='1.0' fill='%23fff' fill-opacity='0.46'/%3E%3Ccircle cx='238.6' cy='83.6' r='1.6' fill='%23DCF0FF' fill-opacity='0.51'/%3E%3Ccircle cx='126.5' cy='47.7' r='1.0' fill='%23fff' fill-opacity='0.57'/%3E%3Ccircle cx='43.5' cy='186.4' r='3.0' fill='%23fff' fill-opacity='0.69'/%3E%3Ccircle cx='49.4' cy='89.1' r='3.0' fill='%23fff' fill-opacity='0.57'/%3E%3Ccircle cx='192.9' cy='198.9' r='1.0' fill='%23fff' fill-opacity='0.46'/%3E%3Ccircle cx='121.4' cy='195.6' r='2.4' fill='%23fff' fill-opacity='0.56'/%3E%3Ccircle cx='107.3' cy='131.7' r='3.0' fill='%23fff' fill-opacity='0.75'/%3E%3Ccircle cx='131.0' cy='177.7' r='2.4' fill='%23fff' fill-opacity='0.76'/%3E%3Ccircle cx='235.8' cy='68.5' r='3.6' fill='%23DCF0FF' fill-opacity='0.78'/%3E%3Ccircle cx='33.5' cy='197.9' r='1.0' fill='%23fff' fill-opacity='0.46'/%3E%3Ccircle cx='150.1' cy='176.0' r='2.0' fill='%23fff' fill-opacity='0.47'/%3E%3Ccircle cx='159.7' cy='76.2' r='2.4' fill='%23DCF0FF' fill-opacity='0.89'/%3E%3Ccircle cx='143.7' cy='138.5' r='1.0' fill='%23fff' fill-opacity='0.53'/%3E%3Ccircle cx='64.6' cy='0.7' r='1.6' fill='%23fff' fill-opacity='0.89'/%3E%3Ccircle cx='131.3' cy='48.9' r='1.6' fill='%23fff' fill-opacity='0.61'/%3E%3Ccircle cx='0.3' cy='76.3' r='2.0' fill='%23fff' fill-opacity='0.68'/%3E%3Ccircle cx='48.2' cy='100.9' r='1.0' fill='%23fff' fill-opacity='0.57'/%3E%3Ccircle cx='21.5' cy='79.9' r='1.0' fill='%23fff' fill-opacity='0.46'/%3E%3Ccircle cx='73.0' cy='46.6' r='2.4' fill='%23DCF0FF' fill-opacity='0.83'/%3E%3Ccircle cx='37.3' cy='178.6' r='3.6' fill='%23DCF0FF' fill-opacity='0.63'/%3E%3Ccircle cx='78.3' cy='196.9' r='1.3' fill='%23fff' fill-opacity='0.78'/%3E%3Ccircle cx='154.4' cy='8.8' r='3.6' fill='%23DCF0FF' fill-opacity='0.85'/%3E%3Ccircle cx='150.6' cy='146.8' r='3.6' fill='%23DCF0FF' fill-opacity='0.51'/%3E%3Ccircle cx='125.7' cy='100.9' r='3.6' fill='%23fff' fill-opacity='0.82'/%3E%3Ccircle cx='140.2' cy='178.6' r='3.0' fill='%23DCF0FF' fill-opacity='0.74'/%3E%3Ccircle cx='20.4' cy='8.4' r='3.0' fill='%23fff' fill-opacity='0.88'/%3E%3Ccircle cx='90.4' cy='90.3' r='1.0' fill='%23DCF0FF' fill-opacity='0.46'/%3E%3Ccircle cx='127.5' cy='48.9' r='1.6' fill='%23fff' fill-opacity='0.66'/%3E%3Ccircle cx='16.8' cy='186.5' r='2.4' fill='%23fff' fill-opacity='0.75'/%3E%3Ccircle cx='15.9' cy='147.4' r='1.6' fill='%23fff' fill-opacity='0.83'/%3E%3Ccircle cx='56.3' cy='151.3' r='1.3' fill='%23DCF0FF' fill-opacity='0.74'/%3E%3Ccircle cx='110.5' cy='169.1' r='1.0' fill='%23fff' fill-opacity='0.86'/%3E%3Ccircle cx='69.0' cy='9.3' r='3.0' fill='%23DCF0FF' fill-opacity='0.54'/%3E%3Ccircle cx='143.9' cy='66.4' r='3.0' fill='%23DCF0FF' fill-opacity='0.76'/%3E%3Ccircle cx='149.1' cy='26.7' r='2.0' fill='%23fff' fill-opacity='0.67'/%3E%3Ccircle cx='233.4' cy='19.9' r='1.3' fill='%23DCF0FF' fill-opacity='0.67'/%3E%3Ccircle cx='170.1' cy='57.1' r='2.0' fill='%23fff' fill-opacity='0.80'/%3E%3Ccircle cx='238.4' cy='109.8' r='1.6' fill='%23fff' fill-opacity='0.87'/%3E%3Ccircle cx='4.2' cy='91.8' r='3.6' fill='%23DCF0FF' fill-opacity='0.89'/%3E%3Ccircle cx='107.9' cy='53.7' r='1.3' fill='%23fff' fill-opacity='0.48'/%3E%3Ccircle cx='21.7' cy='149.5' r='1.6' fill='%23fff' fill-opacity='0.51'/%3E%3Ccircle cx='196.9' cy='101.7' r='1.0' fill='%23DCF0FF' fill-opacity='0.61'/%3E%3Ccircle cx='119.5' cy='175.2' r='2.0' fill='%23fff' fill-opacity='0.52'/%3E%3Ccircle cx='228.0' cy='136.3' r='2.0' fill='%23fff' fill-opacity='0.78'/%3E%3Ccircle cx='99.9' cy='75.2' r='1.0' fill='%23fff' fill-opacity='0.45'/%3E%3Ccircle cx='180.2' cy='167.8' r='1.0' fill='%23fff' fill-opacity='0.77'/%3E%3Ccircle cx='216.4' cy='58.0' r='1.6' fill='%23fff' fill-opacity='0.63'/%3E%3Ccircle cx='239.7' cy='117.8' r='1.6' fill='%23fff' fill-opacity='0.79'/%3E%3Ccircle cx='205.0' cy='56.1' r='1.0' fill='%23DCF0FF' fill-opacity='0.58'/%3E%3Ccircle cx='224.5' cy='49.9' r='1.6' fill='%23fff' fill-opacity='0.68'/%3E%3Ccircle cx='45.6' cy='74.7' r='2.0' fill='%23fff' fill-opacity='0.82'/%3E%3Ccircle cx='151.4' cy='182.7' r='2.4' fill='%23DCF0FF' fill-opacity='0.54'/%3E%3Ccircle cx='19.3' cy='186.7' r='2.0' fill='%23fff' fill-opacity='0.73'/%3E%3Ccircle cx='33.3' cy='173.9' r='2.0' fill='%23fff' fill-opacity='0.86'/%3E%3Ccircle cx='132.0' cy='34.2' r='2.0' fill='%23fff' fill-opacity='0.58'/%3E%3Ccircle cx='61.4' cy='147.7' r='3.0' fill='%23fff' fill-opacity='0.63'/%3E%3Ccircle cx='57.3' cy='96.6' r='3.0' fill='%23fff' fill-opacity='0.50'/%3E%3Ccircle cx='154.4' cy='15.0' r='2.4' fill='%23fff' fill-opacity='0.70'/%3E%3Ccircle cx='108.7' cy='66.6' r='3.6' fill='%23fff' fill-opacity='0.64'/%3E%3Ccircle cx='131.5' cy='48.8' r='1.3' fill='%23fff' fill-opacity='0.70'/%3E%3Ccircle cx='76.6' cy='73.7' r='3.6' fill='%23DCF0FF' fill-opacity='0.54'/%3E%3Ccircle cx='4.8' cy='174.1' r='2.0' fill='%23fff' fill-opacity='0.79'/%3E%3Ccircle cx='50.4' cy='54.0' r='3.6' fill='%23fff' fill-opacity='0.67'/%3E%3Ccircle cx='137.8' cy='72.0' r='3.0' fill='%23DCF0FF' fill-opacity='0.69'/%3E%3Ccircle cx='189.7' cy='169.7' r='1.0' fill='%23fff' fill-opacity='0.85'/%3E%3C/svg%3E") 0 0 / 240px 200px;
}
.sx-slab-clean {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .44 0 0 0 0 .42 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(180deg, #F4F3EF, #ECEAE4);
  clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0);
}
.sx-slab-clean::after { content: ''; position: absolute; top: 0; bottom: 0; right: calc(100% - var(--p) * 100%); width: 14%; background: linear-gradient(90deg, transparent, rgba(120, 130, 140, .28)); }
.sx-slab-sheen { position: absolute; inset: 0; opacity: calc(var(--p) * 1.4 - .4);
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .35) 35%, transparent 45%, transparent 60%, rgba(255, 255, 255, .25) 70%, transparent 80%); }
.sx-slab-joints { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent calc(25% - 2px), rgba(40, 36, 30, .55) calc(25% - 2px) 25%, rgba(255, 255, 255, .35) 25% calc(25% + 1px), transparent calc(25% + 1px)),
              linear-gradient(90deg, transparent calc(50% - 2px), rgba(40, 36, 30, .55) calc(50% - 2px) 50%, rgba(255, 255, 255, .35) 50% calc(50% + 1px), transparent calc(50% + 1px)),
              linear-gradient(90deg, transparent calc(75% - 2px), rgba(40, 36, 30, .55) calc(75% - 2px) 75%, rgba(255, 255, 255, .35) 75% calc(75% + 1px), transparent calc(75% + 1px)); }
.sx-slab-grass { position: absolute; left: 0; right: 0; height: 26px; z-index: 2;
  background: repeating-linear-gradient(100deg, #3F8B2F 0 3px, #4FA23A 3px 5px, #2F7424 5px 8px); }
.sx-slab-grass--top { top: 0; box-shadow: 0 4px 8px rgba(0, 0, 0, .25); border-radius: 0 0 40% 40% / 0 0 6px 6px; }
.sx-slab-grass--bottom { bottom: 0; box-shadow: 0 -4px 8px rgba(0, 0, 0, .25); border-radius: 40% 40% 0 0 / 6px 6px 0 0; }
/* the surface cleaner rides along the clean edge */
.sx-slab-cleaner { position: absolute; top: 50%; left: calc(var(--p) * 100%); z-index: 3; width: 0; height: 0; opacity: calc(1 - max(0, var(--p) - .97) * 33); }
.sx-slab-disc {
  position: absolute; left: -64px; top: -64px; width: 128px; height: 128px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #1C2B4A 0 18%, #0A2152 19% 62%, #243A66 63% 70%, #0A2152 71%);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .35), 0 0 0 16px rgba(255, 255, 255, .12), 0 18px 30px rgba(0, 0, 0, .45);
}
.sx-slab-disc::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44%; height: 38%; transform: translate(-50%, -52%); background: url('images/brand/fin-orange.svg') center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(248, 106, 5, .6)); z-index: 2; }
.sx-slab-bar { position: absolute; inset: 18px; border-radius: 50%; animation: sx-spin .45s linear infinite;
  background: linear-gradient(90deg, transparent 0 46%, rgba(255, 255, 255, .5) 46% 54%, transparent 54%); }
.sx-slab-handle { position: absolute; left: -5px; bottom: 30px; width: 10px; height: 190px; border-radius: 5px; background: linear-gradient(90deg, #56687E, #C9D3DF, #56687E); transform: rotate(-24deg); transform-origin: bottom; }
.sx-slab-handle::after { content: ''; position: absolute; left: -16px; top: -6px; width: 42px; height: 12px; border-radius: 6px; background: var(--sx-orange); }
.sx-slab-done { position: absolute; right: 18px; top: 40px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border-radius: 999px; background: #1E9E55; color: #fff; font-weight: 800; font-size: .9rem; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .5); opacity: 0; transform: scale(.6); transition: opacity .4s, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.sx-slab-done svg { width: 20px; height: 20px; }
.sx-slab-wrap.is-done .sx-slab-done { opacity: 1; transform: none; }
.sx-slab-label { position: absolute; z-index: 3; top: 40px; padding: 6px 12px; border-radius: 6px; background: rgba(4, 20, 60, .78); color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transition: opacity .3s; }
.sx-slab-label--before { right: 18px; }
.sx-slab-wrap.is-done .sx-slab-label--before { opacity: 0; }

.sx-slab-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 0; padding: 0; }
.sx-slab-step { position: relative; padding: 18px 18px 20px; border-radius: 14px; background: #fff; border: 2px solid #E1E8F2; transition: border-color .4s, box-shadow .4s, background-color .4s; }
.sx-slab-step.is-lit { border-color: #BFD6F8; }
.sx-slab-step.is-now { border-color: var(--sx-blue); background: #F3F8FF; box-shadow: 0 18px 34px -22px rgba(4, 99, 238, .6); }
.sx-slab-status { position: absolute; top: 16px; right: 14px; padding: 4px 9px; border-radius: 999px; background: #EEF2F7; color: var(--sx-slate-dark); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sx-slab-status::after { content: 'Up next'; }
.sx-slab-step.is-lit .sx-slab-status { background: #E3F6EA; color: #1E9E55; }
.sx-slab-step.is-lit .sx-slab-status::after { content: '\2713  Done'; }
.sx-slab-step.is-now .sx-slab-status { background: var(--sx-blue); color: #fff; }
.sx-slab-step.is-now .sx-slab-status::after { content: 'Happening now'; }
.sx-slab-n { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px; border-radius: 50%; background: #E6ECF3; color: var(--sx-slate-dark); font-size: .95rem; font-weight: 800; transition: background-color .4s, color .4s; }
.sx-slab-step.is-lit .sx-slab-n { background: var(--sx-blue); color: #fff; }
.sx-slab-step:last-child.is-lit .sx-slab-n { background: var(--sx-orange); }
.sx-slab-step h3 { margin: 0 0 6px; color: var(--sx-navy); font-size: 1.2rem; font-weight: 800; }
.sx-slab-step p { margin: 0; color: #2E3B4E; font-size: 1rem; line-height: 1.55; }
@media (max-width: 900px) {
  .sx-slab { height: 200px; }
  .sx-slab-disc { left: -46px; top: -46px; width: 92px; height: 92px; }
  .sx-slab-handle { height: 140px; bottom: 22px; }
  .sx-slab-grass { height: 18px; }
  .sx-slab-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .sx-slab { height: 170px; }
  .sx-slab-disc { left: -38px; top: -38px; width: 76px; height: 76px; }

  .sx-slab-handle { height: 110px; bottom: 18px; width: 8px; }
  .sx-slab-done, .sx-slab-label { top: 26px; right: 10px; font-size: .7rem; }
  .sx-slab-steps { grid-template-columns: 1fr; gap: 10px; }
  .sx-slab-step { display: grid; grid-template-columns: 38px 1fr; column-gap: 14px; padding: 14px 14px 16px; }
  .sx-slab-n { grid-row: span 2; margin: 0; }
  .sx-slab-step h3 { font-size: 1.08rem; padding-right: 96px; }
  .sx-slab-step p { font-size: .95rem; }
  .sx-slab-status { top: 14px; right: 12px; font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) { .sx-slab-bar { animation: none; } }

/* ==========================================================
   GUTTER CLEANING — a real K-style gutter run
   Water flows along it as you scroll, washing the leaves out,
   and pours from the downspout at the end.
   ========================================================== */
.sx-trough-section { overflow: clip; }
.sx-trough { --p: 0; isolation: isolate; }
/* a faint house wall the gutter is hung on: fascia board, lap siding, windows */
.sx-gut-house { position: absolute; left: -40px; right: -100px; top: 22px; bottom: -60px; z-index: -1; pointer-events: none; opacity: .6;
  background:
    linear-gradient(180deg, #FFFFFF 0 34px, rgba(4, 20, 60, .08) 34px 36px, transparent 36px),
    repeating-linear-gradient(180deg, #EEF2F7 0 20px, #F7F9FC 20px 22px, #D9E0EA 22px 23px);
  -webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent);
  border-left: 10px solid #F4F6F9; border-right: 10px solid #F4F6F9; }
.sx-gut-window { position: absolute; left: 3%; top: 120px; width: 90px; height: 130px; border: 7px solid #fff; border-radius: 2px;
  background: linear-gradient(90deg, transparent calc(50% - 2px), #fff calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)),
              linear-gradient(180deg, transparent calc(50% - 2px), #fff calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)),
              linear-gradient(160deg, #C9DDF0, #9FBAD6);
  box-shadow: 0 0 0 1px rgba(4, 20, 60, .12), 0 8px 14px -8px rgba(4, 20, 60, .3); }
.sx-gut-window--b { left: auto; right: 4%; }
.sx-gut-run { position: relative; height: 84px; margin: 0 70px 0 0; }
/* asphalt shingles + drip edge */
.sx-gut-roof { position: absolute; left: -30px; right: -90px; top: 0; height: 30px; border-radius: 4px 4px 0 0;
  background:
    linear-gradient(180deg, transparent 27px, #D7DEE7 27px 30px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(0, 0, 0, .45) 46px 48px) 0 13px / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(0, 0, 0, .45) 46px 48px) 23px 0 / 100% 13px no-repeat,
    linear-gradient(180deg, rgba(0, 0, 0, 0) 11px, rgba(0, 0, 0, .35) 12px 13px, rgba(0, 0, 0, 0) 14px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #4A505A, #353A42);
  box-shadow: 0 6px 10px -4px rgba(4, 20, 60, .45); }
.sx-gut-body { position: absolute; left: 0; right: -56px; top: 28px; height: 52px; }
/* inside of the trough: dark, dirty, then water */
.sx-gut-channel { position: absolute; left: 4px; right: 4px; top: 2px; height: 12px; border-radius: 3px; background: linear-gradient(180deg, #6B5A3E, #4E4130); }
.sx-gut-water { position: absolute; left: 0; top: 2px; bottom: 0; width: calc(var(--p) * 100%); border-radius: 3px;
  background: linear-gradient(90deg, rgba(15, 163, 224, .75), #36B6EC 80%, #9BE0FF), #0FA3E0; overflow: hidden; }
.sx-gut-water::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(100deg, transparent 0 14px, rgba(255, 255, 255, .55) 14px 17px, transparent 17px 30px); animation: sx-gut-ripple .7s linear infinite; }
@keyframes sx-gut-ripple { to { background-position: 30px 0; } }
.sx-gut-leaf { position: absolute; left: var(--x); top: -8px; width: 24px; height: 13px; border-radius: 0 100% 0 100%; background: var(--c); transform: rotate(var(--r)); box-shadow: inset -2px -1px 0 rgba(0, 0, 0, .2); }
.sx-gut-leaf::after { content: ''; position: absolute; left: 2px; right: 2px; top: 50%; height: 1px; background: rgba(0, 0, 0, .3); transform: rotate(-30deg); }
.sx-gut-leaf.is-washed { animation: sx-leaf-wash 1s cubic-bezier(.4, 0, .6, 1) forwards; }
@keyframes sx-leaf-wash { 0% { opacity: 1; } 40% { transform: translate(18px, -14px) rotate(calc(var(--r) + 140deg)); } 100% { opacity: 0; transform: translate(60px, -4px) rotate(calc(var(--r) + 300deg)); } }
/* front face: rolled lip, cove, ogee bulge, flat face */
.sx-gut-face { position: absolute; left: 0; right: 0; top: 10px; height: 42px; border-radius: 3px 3px 12px 12px;
  background: linear-gradient(180deg, #FFFFFF 0 3px, #AEB9C7 3px 4px, #F2F5F8 4px 6px, #D5DCE5 9px, #B3BECB 13px, #EEF2F6 15px, #FFFFFF 19px, #F4F7FA 24px, #DCE2EA 31px, #C4CEDA 38px, #A9B5C4 42px);
  box-shadow: 0 18px 26px -18px rgba(4, 20, 60, .6), inset 3px 0 0 #D3DBE5, inset -3px 0 0 #C3CDD9; }
/* hidden-hanger screw heads, lined up over each card */
.sx-gut-face i { position: absolute; top: 5px; left: calc((100% - 56px) * var(--x) / 100%); width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #8E9BAE); box-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.sx-gut-face i:nth-child(1) { left: calc((100% - 56px) * .125); }
.sx-gut-face i:nth-child(2) { left: calc((100% - 56px) * .375); }
.sx-gut-face i:nth-child(3) { left: calc((100% - 56px) * .625); }
.sx-gut-face i:nth-child(4) { left: calc((100% - 56px) * .875); }
/* downspout with a kick-out elbow */
.sx-gut-spout { position: absolute; right: -46px; top: 76px; width: 26px; height: 250px; border-radius: 2px;
  background:
    linear-gradient(180deg, transparent 0 14px, rgba(4, 20, 60, .12) 14px 16px, transparent 16px calc(100% - 30px), rgba(4, 20, 60, .12) calc(100% - 30px) calc(100% - 28px), transparent 0),
    linear-gradient(90deg, #C3CDD9, #FFFFFF 35%, #E4E9EF 70%, #B9C4D1);
  box-shadow: 0 16px 24px -16px rgba(4, 20, 60, .6); }
.sx-gut-spout::after { content: ''; position: absolute; left: 0; bottom: -22px; width: 44px; height: 24px; border-radius: 0 0 14px 2px; background: linear-gradient(180deg, #E4E9EF, #C3CDD9); }
.sx-gut-pour { position: absolute; left: 44px; bottom: -40px; width: 12px; height: 0; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #36B6EC, rgba(54, 182, 236, .2)); transition: height .5s ease; }
.sx-gut-splash { position: absolute; left: 36px; bottom: -86px; width: 34px; height: 8px; border-radius: 50%; background: rgba(54, 182, 236, .45); transform: scale(0); transition: transform .4s ease .35s; }
.sx-trough.is-full .sx-gut-pour { height: 44px; animation: sx-gut-pour .5s linear infinite; }
.sx-trough.is-full .sx-gut-splash { transform: scale(1); animation: sx-gut-splash 1s ease-in-out .7s infinite; }
@keyframes sx-gut-pour { 50% { width: 13px; opacity: .85; } }
@keyframes sx-gut-splash { 50% { transform: scale(1.25, .8); opacity: .7; } }

/* cards: illustrated icons, light up when the water reaches their hanger */
.sx-trough-list { margin-top: 0; }
.sx-trough-step { padding-top: 36px; }
.sx-trough-hanger { height: 38px; }
.sx-trough-card { transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), box-shadow .45s var(--sx-ease), border-color .4s; }
.sx-trough-step.is-lit .sx-trough-card { border-color: #9CCFF3; box-shadow: 0 30px 50px -30px rgba(4, 99, 238, .55); }
.sx-trough-ico--ill, .sx-trough-step:nth-child(n) .sx-trough-ico--ill { width: 78px; height: 78px; border-radius: 16px; background: #F2F6FB; border: 1px solid #E1E8F2; box-shadow: none; }
.sx-trough-ico--ill .sx-gill { width: 68px; height: 68px; fill: initial; stroke: none; overflow: visible; }
.sx-trough-step.is-lit .sx-trough-ico--ill { background: #EAF4FF; border-color: #CFE4FA; }

.sx-gill .sx-gleaf { transform-origin: 44px 13px; }
.sx-trough-step.is-lit .sx-gill .sx-gleaf { animation: sx-sway 2.6s ease-in-out infinite; }
@keyframes sx-sway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
.sx-gill .sx-garc { stroke-dasharray: 5 4; }
.sx-trough-step.is-lit .sx-gill .sx-garc { animation: sx-gut-dash .6s linear infinite; }
@keyframes sx-gut-dash { to { stroke-dashoffset: -18; } }
.sx-gill .sx-gsplash { opacity: 0; transform-box: fill-box; transform-origin: center; }
.sx-trough-step.is-lit .sx-gill .sx-gsplash { animation: sx-gsplash 1s ease-out infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes sx-gsplash { 0% { opacity: 0; transform: translateY(2px) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-7px) scale(1); } }
.sx-gill .sx-gwater { stroke-dasharray: 18; stroke-dashoffset: 18; transition: stroke-dashoffset 1.2s ease .3s; }
.sx-trough-step.is-lit .sx-gill .sx-gwater { stroke-dashoffset: 0; }
.sx-gill .sx-gpour, .sx-gill .sx-gpuddle { opacity: .25; transition: opacity .6s; }
.sx-trough-step.is-lit .sx-gill .sx-gpour { opacity: 1; animation: sx-gut-pourpulse .5s linear infinite; }
.sx-trough-step.is-lit .sx-gill .sx-gpuddle { opacity: 1; }
@keyframes sx-gut-pourpulse { 50% { opacity: .75; } }
.sx-gill .sx-gtick { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sx-trough-step.is-lit .sx-gill .sx-gtick { animation: sx-gtick 3.6s ease infinite; animation-delay: calc(var(--i) * .45s); }
@keyframes sx-gtick { 0% { stroke-dashoffset: 1; } 15%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.sx-gill .sx-gflash { opacity: 0; transform-box: fill-box; transform-origin: center; }
.sx-trough-step.is-lit .sx-gill .sx-gflash { animation: sx-gflash 3.6s ease infinite 1.4s; }
@keyframes sx-gflash { 0%, 40%, 100% { opacity: 0; transform: scale(.4); } 46% { opacity: 1; transform: scale(1.3); } 60% { opacity: 0; transform: scale(.9); } }

@media (max-width: 900px) {
  /* gutter pins under the header while the steps scroll past */
  .sx-trough::before { display: none; }
  .sx-gut-run { position: sticky; top: 84px; z-index: 4; margin: 0 0 18px; height: 70px; }
  .sx-gut-house { left: -24px; right: -24px; top: 0; opacity: .45; }
  .sx-gut-window { display: none; }
  .sx-gut-run::before { content: ''; position: absolute; left: -24px; right: -24px; top: -10px; bottom: -14px; z-index: -1; background: linear-gradient(180deg, #EEF2F7 80%, rgba(238, 242, 247, 0)); }
  .sx-gut-roof { left: -16px; right: -16px; height: 24px; }
  .sx-gut-body { right: 0; top: 22px; height: 44px; }
  .sx-gut-face { height: 36px; }
  .sx-gut-face i { display: none; }
  .sx-gut-leaf { width: 16px; height: 9px; top: -5px; }
  .sx-gut-spout { right: 6px; top: 60px; width: 18px; height: 22px; }
  .sx-gut-spout::after { display: none; }
  .sx-gut-pour { left: 3px; bottom: -30px; }
  .sx-trough.is-full .sx-gut-pour { height: 30px; }
  .sx-gut-splash { display: none; }
  .sx-trough-step { padding: 0; }
  .sx-trough-hanger { display: none; }
  .sx-trough-card { display: grid; grid-template-columns: 70px 1fr; column-gap: 14px; padding: 18px 16px; }
  .sx-trough-card .sx-trough-ico { grid-row: span 3; width: 70px; height: 70px; margin: 0; }
  .sx-trough-ico--ill .sx-gill { width: 56px; height: 56px; }
  .sx-trough-num { font-size: 2.2rem; top: 10px; right: 12px; }
  .sx-trough-card h3 { font-size: 1.08rem; margin-bottom: 4px; }
  .sx-trough-card p { font-size: .9rem; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-gut-water::after, .sx-trough.is-full .sx-gut-pour, .sx-trough.is-full .sx-gut-splash, .sx-gill * { animation: none !important; }
}

/* ==========================================================
   SOLAR PANEL CLEANING — a panel that gets cleaned as you scroll
   The panel stays pinned while the four steps scroll past it.
   ========================================================== */
.sx-solar-section { overflow: clip; }
.sx-solar { --s1: 0; --s2: 0; --s3: 0; --s4: 0; display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; max-width: 1180px; margin: 0 auto 40px; align-items: start; }
.sx-solar-stage {
  position: sticky; top: 110px; order: 2; height: min(560px, calc(100vh - 150px)); border-radius: 16px; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px 30px 24px;
  background:
    linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, .25) 62.5%, transparent 64%),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(0, 0, 0, .35) 38px 40px) 0 62% / 100% 19% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(0, 0, 0, .35) 38px 40px) 19px 81% / 100% 19% no-repeat,
    linear-gradient(180deg, transparent 81%, rgba(0, 0, 0, .3) 81.3%, transparent 82.5%),
    linear-gradient(180deg, #7EC3F2 0%, #BFE3FA 45%, #E4F3FC 61.9%, #50565F 62%, #3C4149 100%);
  box-shadow: 0 34px 70px -40px rgba(4, 20, 60, .8);
}
.sx-solar-sun { position: absolute; right: 8%; top: 7%; width: 74px; height: 74px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, #FFF7C2 0 40%, #FFD65A 60%, rgba(255, 214, 90, 0) 72%);
  box-shadow: 0 0 calc(30px + var(--s4) * 60px) calc(10px + var(--s4) * 30px) rgba(255, 220, 110, calc(.35 + var(--s4) * .4)); }
.sx-solar-panel {
  position: relative; width: 100%; max-width: 560px; aspect-ratio: 10 / 6.2; border-radius: 5px;
  border: 9px solid #C4CCD6; border-color: #E8EDF2 #A9B3BF #8E99A6 #D3DAE2;
  box-shadow: 0 30px 40px -18px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .4);
  transform: perspective(1100px) rotateX(24deg); transform-origin: 50% 80%; overflow: hidden; background: #DDE3EA;
}
/* monocrystalline cells: white backsheet gaps, silver busbars, faint fingers */
.sx-solar-cells { position: absolute; inset: 0; filter: brightness(calc(.92 + var(--s4) * .18)) saturate(calc(.9 + var(--s4) * .3));
  background:
    linear-gradient(90deg, #E3E8EE 0 2px, transparent 2px) 0 0 / 10% 16.666%,
    linear-gradient(180deg, #E3E8EE 0 2px, transparent 2px) 0 0 / 10% 16.666%,
    linear-gradient(90deg, transparent 32%, rgba(210, 220, 232, .55) 32% 33.5%, transparent 33.5% 66%, rgba(210, 220, 232, .55) 66% 67.5%, transparent 67.5%) 0 0 / 10% 16.666%,
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 4px),
    linear-gradient(155deg, #274C93 0%, #11295C 38%, #0A1B3E 62%, #173774 100%); }
.sx-solar-dirt { position: absolute; inset: 0; clip-path: inset(0 0 0 calc(var(--s2) * 100%));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='180'%3E%3Ccircle cx='71.4' cy='98.0' r='1.2' fill='%238C7A55' fill-opacity='0.75'/%3E%3Ccircle cx='19.7' cy='2.4' r='1.5' fill='%23D8C07A' fill-opacity='0.72'/%3E%3Ccircle cx='57.5' cy='129.1' r='2.0' fill='%238C7A55' fill-opacity='0.66'/%3E%3Ccircle cx='258.3' cy='41.7' r='1.0' fill='%238C7A55' fill-opacity='0.80'/%3E%3Ccircle cx='201.4' cy='11.5' r='2.0' fill='%23C9A45A' fill-opacity='0.62'/%3E%3Ccircle cx='9.3' cy='155.8' r='1.5' fill='%238C7A55' fill-opacity='0.79'/%3E%3Ccircle cx='276.3' cy='71.1' r='2.0' fill='%238C7A55' fill-opacity='0.89'/%3E%3Ccircle cx='40.2' cy='65.8' r='0.8' fill='%23B89548' fill-opacity='0.70'/%3E%3Ccircle cx='77.4' cy='121.0' r='1.2' fill='%238C7A55' fill-opacity='0.70'/%3E%3Ccircle cx='115.8' cy='63.2' r='2.0' fill='%238C7A55' fill-opacity='0.73'/%3E%3Ccircle cx='271.3' cy='122.8' r='0.8' fill='%23D8C07A' fill-opacity='0.90'/%3E%3Ccircle cx='201.4' cy='29.4' r='1.2' fill='%23C9A45A' fill-opacity='0.79'/%3E%3Ccircle cx='63.3' cy='149.7' r='2.0' fill='%23D8C07A' fill-opacity='0.61'/%3E%3Ccircle cx='19.0' cy='153.7' r='1.5' fill='%23C9A45A' fill-opacity='0.64'/%3E%3Ccircle cx='20.0' cy='161.5' r='0.8' fill='%23D8C07A' fill-opacity='0.67'/%3E%3Ccircle cx='124.6' cy='21.4' r='2.0' fill='%23C9A45A' fill-opacity='0.65'/%3E%3Ccircle cx='175.9' cy='99.2' r='1.2' fill='%23B89548' fill-opacity='0.90'/%3E%3Ccircle cx='92.9' cy='13.9' r='2.0' fill='%23C9A45A' fill-opacity='0.88'/%3E%3Ccircle cx='291.4' cy='52.5' r='1.2' fill='%23B89548' fill-opacity='0.78'/%3E%3Ccircle cx='294.0' cy='61.2' r='1.2' fill='%23B89548' fill-opacity='0.86'/%3E%3Ccircle cx='113.3' cy='82.9' r='2.0' fill='%238C7A55' fill-opacity='0.76'/%3E%3Ccircle cx='178.7' cy='100.7' r='2.0' fill='%23D8C07A' fill-opacity='0.67'/%3E%3Ccircle cx='216.1' cy='42.8' r='1.2' fill='%238C7A55' fill-opacity='0.89'/%3E%3Ccircle cx='156.3' cy='98.7' r='0.8' fill='%238C7A55' fill-opacity='0.89'/%3E%3Ccircle cx='94.5' cy='67.8' r='2.0' fill='%23B89548' fill-opacity='0.52'/%3E%3Ccircle cx='188.2' cy='83.9' r='1.2' fill='%23D8C07A' fill-opacity='0.80'/%3E%3Ccircle cx='6.7' cy='10.9' r='0.8' fill='%23D8C07A' fill-opacity='0.60'/%3E%3Ccircle cx='136.9' cy='106.7' r='1.2' fill='%23B89548' fill-opacity='0.65'/%3E%3Ccircle cx='93.8' cy='66.4' r='2.0' fill='%23D8C07A' fill-opacity='0.62'/%3E%3Ccircle cx='113.1' cy='139.0' r='0.8' fill='%23B89548' fill-opacity='0.62'/%3E%3Ccircle cx='66.8' cy='144.7' r='1.0' fill='%23D8C07A' fill-opacity='0.57'/%3E%3Ccircle cx='130.6' cy='125.7' r='0.8' fill='%23D8C07A' fill-opacity='0.88'/%3E%3Ccircle cx='202.5' cy='40.4' r='1.0' fill='%23C9A45A' fill-opacity='0.63'/%3E%3Ccircle cx='195.1' cy='159.3' r='1.5' fill='%23D8C07A' fill-opacity='0.59'/%3E%3Ccircle cx='36.3' cy='95.3' r='1.0' fill='%23D8C07A' fill-opacity='0.82'/%3E%3Ccircle cx='251.5' cy='33.0' r='1.2' fill='%23D8C07A' fill-opacity='0.82'/%3E%3Ccircle cx='192.6' cy='145.1' r='1.2' fill='%23B89548' fill-opacity='0.67'/%3E%3Ccircle cx='155.5' cy='153.0' r='1.5' fill='%23D8C07A' fill-opacity='0.75'/%3E%3Ccircle cx='87.1' cy='102.3' r='0.8' fill='%238C7A55' fill-opacity='0.56'/%3E%3Ccircle cx='1.4' cy='169.8' r='2.0' fill='%238C7A55' fill-opacity='0.72'/%3E%3Ccircle cx='295.7' cy='129.1' r='0.8' fill='%238C7A55' fill-opacity='0.83'/%3E%3Ccircle cx='198.9' cy='93.4' r='1.2' fill='%23D8C07A' fill-opacity='0.86'/%3E%3Ccircle cx='258.5' cy='154.4' r='1.2' fill='%23C9A45A' fill-opacity='0.82'/%3E%3Ccircle cx='13.5' cy='162.6' r='2.0' fill='%23B89548' fill-opacity='0.86'/%3E%3Ccircle cx='269.9' cy='103.9' r='0.8' fill='%238C7A55' fill-opacity='0.80'/%3E%3Ccircle cx='51.5' cy='54.0' r='0.8' fill='%238C7A55' fill-opacity='0.52'/%3E%3Ccircle cx='273.9' cy='20.4' r='1.0' fill='%23D8C07A' fill-opacity='0.89'/%3E%3Ccircle cx='162.3' cy='146.1' r='0.8' fill='%23D8C07A' fill-opacity='0.59'/%3E%3Ccircle cx='36.7' cy='159.8' r='0.8' fill='%23B89548' fill-opacity='0.60'/%3E%3Ccircle cx='82.1' cy='160.1' r='1.0' fill='%23C9A45A' fill-opacity='0.70'/%3E%3Ccircle cx='171.3' cy='72.0' r='1.2' fill='%23B89548' fill-opacity='0.61'/%3E%3Ccircle cx='158.2' cy='76.1' r='1.5' fill='%23D8C07A' fill-opacity='0.81'/%3E%3Ccircle cx='0.5' cy='9.9' r='1.0' fill='%23C9A45A' fill-opacity='0.55'/%3E%3Ccircle cx='20.5' cy='175.4' r='0.8' fill='%238C7A55' fill-opacity='0.63'/%3E%3Ccircle cx='94.4' cy='63.2' r='1.5' fill='%23D8C07A' fill-opacity='0.64'/%3E%3Ccircle cx='57.3' cy='59.2' r='0.8' fill='%23B89548' fill-opacity='0.72'/%3E%3Ccircle cx='214.8' cy='68.4' r='0.8' fill='%23B89548' fill-opacity='0.52'/%3E%3Ccircle cx='138.2' cy='117.0' r='2.0' fill='%238C7A55' fill-opacity='0.75'/%3E%3Ccircle cx='13.0' cy='159.6' r='0.8' fill='%23D8C07A' fill-opacity='0.75'/%3E%3Ccircle cx='228.0' cy='56.7' r='1.5' fill='%238C7A55' fill-opacity='0.51'/%3E%3Ccircle cx='65.6' cy='48.6' r='2.0' fill='%23C9A45A' fill-opacity='0.82'/%3E%3Ccircle cx='67.3' cy='23.5' r='0.8' fill='%23D8C07A' fill-opacity='0.65'/%3E%3Ccircle cx='269.4' cy='142.4' r='1.2' fill='%23C9A45A' fill-opacity='0.69'/%3E%3Ccircle cx='36.9' cy='146.4' r='2.0' fill='%238C7A55' fill-opacity='0.77'/%3E%3Ccircle cx='220.1' cy='101.5' r='0.8' fill='%23C9A45A' fill-opacity='0.69'/%3E%3Ccircle cx='70.8' cy='70.0' r='2.0' fill='%23C9A45A' fill-opacity='0.73'/%3E%3Ccircle cx='197.8' cy='67.6' r='0.8' fill='%23D8C07A' fill-opacity='0.84'/%3E%3Ccircle cx='36.4' cy='151.9' r='1.5' fill='%23D8C07A' fill-opacity='0.73'/%3E%3Ccircle cx='239.6' cy='6.5' r='2.0' fill='%23B89548' fill-opacity='0.54'/%3E%3Ccircle cx='224.7' cy='168.2' r='0.8' fill='%23D8C07A' fill-opacity='0.85'/%3E%3Ccircle cx='54.1' cy='13.9' r='1.0' fill='%23B89548' fill-opacity='0.68'/%3E%3Ccircle cx='210.0' cy='169.7' r='1.2' fill='%23D8C07A' fill-opacity='0.74'/%3E%3Ccircle cx='281.6' cy='100.2' r='0.8' fill='%238C7A55' fill-opacity='0.70'/%3E%3Ccircle cx='291.9' cy='74.3' r='1.0' fill='%238C7A55' fill-opacity='0.78'/%3E%3Ccircle cx='226.8' cy='121.3' r='2.0' fill='%238C7A55' fill-opacity='0.56'/%3E%3Ccircle cx='120.3' cy='159.8' r='1.0' fill='%23C9A45A' fill-opacity='0.70'/%3E%3Ccircle cx='145.1' cy='125.8' r='1.5' fill='%23B89548' fill-opacity='0.55'/%3E%3Ccircle cx='225.6' cy='26.4' r='2.0' fill='%23D8C07A' fill-opacity='0.87'/%3E%3Ccircle cx='255.4' cy='96.8' r='1.2' fill='%238C7A55' fill-opacity='0.74'/%3E%3Ccircle cx='175.4' cy='177.1' r='1.0' fill='%23D8C07A' fill-opacity='0.51'/%3E%3Ccircle cx='143.8' cy='68.9' r='1.0' fill='%23D8C07A' fill-opacity='0.60'/%3E%3Ccircle cx='144.8' cy='155.5' r='1.5' fill='%238C7A55' fill-opacity='0.78'/%3E%3Ccircle cx='61.7' cy='104.5' r='2.0' fill='%23C9A45A' fill-opacity='0.69'/%3E%3Ccircle cx='216.2' cy='154.2' r='1.5' fill='%23C9A45A' fill-opacity='0.69'/%3E%3Ccircle cx='68.9' cy='42.3' r='0.8' fill='%23B89548' fill-opacity='0.84'/%3E%3Ccircle cx='72.6' cy='34.1' r='1.2' fill='%23B89548' fill-opacity='0.57'/%3E%3Ccircle cx='211.4' cy='154.5' r='1.2' fill='%23B89548' fill-opacity='0.85'/%3E%3Ccircle cx='94.0' cy='76.2' r='0.8' fill='%23C9A45A' fill-opacity='0.54'/%3E%3Ccircle cx='250.2' cy='52.5' r='1.2' fill='%238C7A55' fill-opacity='0.73'/%3E%3Ccircle cx='202.7' cy='1.2' r='1.2' fill='%23D8C07A' fill-opacity='0.67'/%3E%3Ccircle cx='145.8' cy='37.8' r='2.0' fill='%238C7A55' fill-opacity='0.66'/%3E%3Ccircle cx='163.3' cy='21.5' r='1.2' fill='%23C9A45A' fill-opacity='0.77'/%3E%3Ccircle cx='33.8' cy='159.7' r='1.2' fill='%23C9A45A' fill-opacity='0.71'/%3E%3Ccircle cx='210.2' cy='122.1' r='1.2' fill='%238C7A55' fill-opacity='0.62'/%3E%3Ccircle cx='202.8' cy='117.7' r='1.2' fill='%23C9A45A' fill-opacity='0.80'/%3E%3Ccircle cx='288.4' cy='121.1' r='2.0' fill='%23C9A45A' fill-opacity='0.77'/%3E%3Ccircle cx='152.6' cy='10.7' r='1.2' fill='%23B89548' fill-opacity='0.76'/%3E%3Ccircle cx='219.1' cy='26.9' r='1.2' fill='%238C7A55' fill-opacity='0.55'/%3E%3Ccircle cx='279.6' cy='25.4' r='1.2' fill='%238C7A55' fill-opacity='0.72'/%3E%3Ccircle cx='194.2' cy='82.4' r='1.2' fill='%23B89548' fill-opacity='0.78'/%3E%3Ccircle cx='32.2' cy='32.6' r='2.0' fill='%238C7A55' fill-opacity='0.64'/%3E%3Ccircle cx='79.8' cy='69.0' r='1.0' fill='%23C9A45A' fill-opacity='0.69'/%3E%3Ccircle cx='81.4' cy='125.2' r='2.0' fill='%23D8C07A' fill-opacity='0.85'/%3E%3Ccircle cx='283.5' cy='80.7' r='0.8' fill='%23D8C07A' fill-opacity='0.70'/%3E%3Ccircle cx='298.7' cy='27.3' r='2.0' fill='%23C9A45A' fill-opacity='0.77'/%3E%3Ccircle cx='169.3' cy='163.8' r='0.8' fill='%23B89548' fill-opacity='0.78'/%3E%3Ccircle cx='170.1' cy='120.6' r='1.5' fill='%23B89548' fill-opacity='0.74'/%3E%3Ccircle cx='43.9' cy='71.7' r='1.0' fill='%23B89548' fill-opacity='0.73'/%3E%3Ccircle cx='60.6' cy='45.0' r='1.2' fill='%23C9A45A' fill-opacity='0.84'/%3E%3Ccircle cx='133.5' cy='73.3' r='1.5' fill='%23D8C07A' fill-opacity='0.72'/%3E%3Ccircle cx='174.9' cy='114.1' r='2.0' fill='%23D8C07A' fill-opacity='0.86'/%3E%3Ccircle cx='200.3' cy='5.4' r='1.0' fill='%23C9A45A' fill-opacity='0.54'/%3E%3Ccircle cx='226.8' cy='42.1' r='1.0' fill='%238C7A55' fill-opacity='0.58'/%3E%3Ccircle cx='234.6' cy='38.1' r='2.0' fill='%238C7A55' fill-opacity='0.54'/%3E%3Ccircle cx='85.0' cy='118.4' r='1.0' fill='%23B89548' fill-opacity='0.69'/%3E%3Ccircle cx='26.6' cy='166.2' r='0.8' fill='%23D8C07A' fill-opacity='0.75'/%3E%3Ccircle cx='151.8' cy='89.7' r='0.8' fill='%23D8C07A' fill-opacity='0.63'/%3E%3Ccircle cx='261.2' cy='125.0' r='1.0' fill='%23C9A45A' fill-opacity='0.84'/%3E%3Ccircle cx='180.3' cy='166.9' r='0.8' fill='%23D8C07A' fill-opacity='0.90'/%3E%3Ccircle cx='61.5' cy='11.4' r='1.0' fill='%238C7A55' fill-opacity='0.78'/%3E%3Ccircle cx='66.3' cy='56.8' r='0.8' fill='%238C7A55' fill-opacity='0.53'/%3E%3Ccircle cx='60.1' cy='28.9' r='1.5' fill='%238C7A55' fill-opacity='0.78'/%3E%3Ccircle cx='161.2' cy='76.0' r='1.5' fill='%23D8C07A' fill-opacity='0.51'/%3E%3Ccircle cx='137.3' cy='124.4' r='1.5' fill='%23B89548' fill-opacity='0.68'/%3E%3Ccircle cx='11.2' cy='46.2' r='1.2' fill='%238C7A55' fill-opacity='0.71'/%3E%3Ccircle cx='178.9' cy='40.3' r='0.8' fill='%23B89548' fill-opacity='0.60'/%3E%3Ccircle cx='110.9' cy='154.0' r='2.0' fill='%23B89548' fill-opacity='0.56'/%3E%3Ccircle cx='6.7' cy='105.2' r='2.0' fill='%23B89548' fill-opacity='0.75'/%3E%3Ccircle cx='41.8' cy='109.6' r='1.5' fill='%238C7A55' fill-opacity='0.57'/%3E%3Ccircle cx='252.5' cy='72.6' r='1.2' fill='%238C7A55' fill-opacity='0.51'/%3E%3Ccircle cx='214.2' cy='43.1' r='0.8' fill='%238C7A55' fill-opacity='0.70'/%3E%3Ccircle cx='272.7' cy='159.0' r='1.0' fill='%23C9A45A' fill-opacity='0.66'/%3E%3Ccircle cx='57.2' cy='59.9' r='0.8' fill='%23D8C07A' fill-opacity='0.87'/%3E%3Ccircle cx='178.3' cy='145.3' r='1.2' fill='%23D8C07A' fill-opacity='0.89'/%3E%3Ccircle cx='282.6' cy='142.1' r='1.2' fill='%238C7A55' fill-opacity='0.60'/%3E%3Ccircle cx='79.7' cy='146.6' r='1.2' fill='%23D8C07A' fill-opacity='0.54'/%3E%3Ccircle cx='204.7' cy='174.5' r='2.0' fill='%23C9A45A' fill-opacity='0.54'/%3E%3Ccircle cx='204.2' cy='3.4' r='2.0' fill='%23C9A45A' fill-opacity='0.69'/%3E%3Ccircle cx='56.7' cy='91.8' r='1.2' fill='%23B89548' fill-opacity='0.86'/%3E%3Ccircle cx='227.2' cy='61.2' r='1.5' fill='%23D8C07A' fill-opacity='0.88'/%3E%3Ccircle cx='10.3' cy='54.9' r='2.0' fill='%238C7A55' fill-opacity='0.54'/%3E%3Ccircle cx='88.0' cy='153.0' r='0.8' fill='%238C7A55' fill-opacity='0.72'/%3E%3Ccircle cx='161.0' cy='140.1' r='1.5' fill='%23B89548' fill-opacity='0.83'/%3E%3Ccircle cx='259.4' cy='69.5' r='2.0' fill='%23D8C07A' fill-opacity='0.87'/%3E%3Ccircle cx='108.8' cy='74.7' r='1.0' fill='%238C7A55' fill-opacity='0.81'/%3E%3Ccircle cx='144.2' cy='48.5' r='1.0' fill='%238C7A55' fill-opacity='0.88'/%3E%3Ccircle cx='12.8' cy='30.9' r='0.8' fill='%238C7A55' fill-opacity='0.54'/%3E%3Ccircle cx='207.6' cy='118.9' r='1.2' fill='%23B89548' fill-opacity='0.74'/%3E%3Ccircle cx='240.4' cy='10.2' r='2.0' fill='%23C9A45A' fill-opacity='0.68'/%3E%3Ccircle cx='269.1' cy='131.9' r='1.2' fill='%23D8C07A' fill-opacity='0.50'/%3E%3Ccircle cx='58.5' cy='141.6' r='0.8' fill='%23D8C07A' fill-opacity='0.73'/%3E%3Ccircle cx='33.0' cy='14.6' r='1.0' fill='%23B89548' fill-opacity='0.78'/%3E%3Ccircle cx='293.3' cy='168.4' r='1.0' fill='%23C9A45A' fill-opacity='0.54'/%3E%3Ccircle cx='86.3' cy='37.6' r='2.0' fill='%238C7A55' fill-opacity='0.70'/%3E%3Ccircle cx='272.2' cy='57.4' r='2.0' fill='%23B89548' fill-opacity='0.69'/%3E%3Ccircle cx='186.7' cy='7.4' r='0.8' fill='%23C9A45A' fill-opacity='0.84'/%3E%3Ccircle cx='30.4' cy='169.8' r='1.2' fill='%23C9A45A' fill-opacity='0.54'/%3E%3Ccircle cx='119.7' cy='148.6' r='2.0' fill='%23C9A45A' fill-opacity='0.76'/%3E%3Ccircle cx='228.4' cy='156.9' r='1.2' fill='%238C7A55' fill-opacity='0.74'/%3E%3Ccircle cx='133.7' cy='20.0' r='2.0' fill='%238C7A55' fill-opacity='0.83'/%3E%3Ccircle cx='61.8' cy='97.1' r='1.5' fill='%23D8C07A' fill-opacity='0.79'/%3E%3Ccircle cx='23.2' cy='62.3' r='1.5' fill='%23C9A45A' fill-opacity='0.87'/%3E%3Ccircle cx='205.9' cy='65.6' r='0.8' fill='%23B89548' fill-opacity='0.60'/%3E%3Ccircle cx='251.4' cy='11.2' r='1.0' fill='%238C7A55' fill-opacity='0.68'/%3E%3Ccircle cx='75.3' cy='58.2' r='1.0' fill='%23B89548' fill-opacity='0.85'/%3E%3Ccircle cx='296.0' cy='110.2' r='2.0' fill='%238C7A55' fill-opacity='0.65'/%3E%3Ccircle cx='57.3' cy='112.3' r='1.5' fill='%238C7A55' fill-opacity='0.86'/%3E%3Ccircle cx='294.9' cy='84.5' r='2.0' fill='%23C9A45A' fill-opacity='0.62'/%3E%3Ccircle cx='280.3' cy='33.2' r='0.8' fill='%23C9A45A' fill-opacity='0.79'/%3E%3Ccircle cx='88.3' cy='93.5' r='1.5' fill='%23C9A45A' fill-opacity='0.58'/%3E%3C/svg%3E") 0 0 / 300px 180px, linear-gradient(160deg, rgba(196, 170, 118, .55), rgba(150, 128, 86, .45)); }
.sx-solar-drop { position: absolute; left: var(--x); top: var(--y); width: 26px; height: 18px; border-radius: 55% 45% 50% 60%; transform: translate(-50%, -50%) rotate(-18deg);
  background: radial-gradient(circle at 40% 40%, #fff 0 25%, #E9E6DC 45%, #B9B19C 80%); box-shadow: 6px 4px 0 -3px #D9D4C4, -5px 5px 0 -4px #CFC9B6; }
.sx-solar-drop--lg { width: 36px; height: 24px; }
.sx-solar-leaf { position: absolute; left: var(--x); top: var(--y); width: 34px; height: 16px; border-radius: 0 100% 0 100%; background: #B8792F; transform: translate(-50%, -50%) rotate(28deg); box-shadow: inset -3px -2px 0 rgba(0, 0, 0, .2); }
/* soap left behind by the brush, cleared by the rinse from the top down */
.sx-solar-suds { position: absolute; inset: 0; clip-path: inset(calc(var(--s3) * 100%) calc(100% - var(--s2) * 100%) 0 0); opacity: .75;
  background: radial-gradient(circle, rgba(255, 255, 255, .7) 0 1.5px, transparent 2.2px) 0 0 / 19px 23px, radial-gradient(circle, rgba(255, 255, 255, .5) 0 2.5px, transparent 3.2px) 7px 11px / 31px 29px,
              repeating-linear-gradient(100deg, transparent 0 20px, rgba(255, 255, 255, .12) 20px 26px); }
/* inspection: a scan line, and rings around what it finds */
.sx-solar-scan { position: absolute; left: 0; right: 0; top: calc(var(--s1) * 100%); height: 3px; background: #FF9A4D; box-shadow: 0 0 14px 4px rgba(255, 154, 77, .7);
  opacity: calc(min(1, var(--s1) * 30) * (1 - max(0, var(--s1) - .96) * 25)); }
.sx-solar-mark { position: absolute; left: var(--x); top: var(--y); width: 54px; height: 54px; margin: -27px 0 0 -27px; border: 2.5px dashed #FF9A4D; border-radius: 50%;
  opacity: calc(clamp(0, (var(--s1) - var(--t)) * 25, 1) * (1 - var(--s2) * 3)); animation: sx-spin 6s linear infinite; }
/* soft brush on a pole sweeping left to right */
.sx-solar-brush { position: absolute; top: -4%; bottom: -4%; left: calc(var(--s2) * 100%); width: 22px; margin-left: -11px;
  opacity: calc(min(1, var(--s2) * 40) * (1 - max(0, var(--s2) - .97) * 33));
  background: linear-gradient(90deg, #0A2152 0 40%, #F86A05 40% 60%, #0A2152 60%) center / 8px 100% no-repeat,
              repeating-linear-gradient(180deg, #E8EEF6 0 2px, #9FB3CC 2px 3px);
  border-radius: 6px; box-shadow: -10px 0 18px rgba(255, 255, 255, .35); }
/* pure-water rinse sheeting down the glass */
.sx-solar-rinse { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--s3) * 100%);
  opacity: calc(min(1, var(--s3) * 40) * (1 - max(0, var(--s3) - .95) * 20));
  background: linear-gradient(180deg, rgba(120, 210, 255, .08), rgba(120, 210, 255, .22) 85%, rgba(255, 255, 255, .8) 97%, rgba(255, 255, 255, 0));
  overflow: hidden; }
.sx-solar-rinse::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(255, 255, 255, .28) 16px 18px, transparent 18px 34px); animation: sx-solar-sheet .8s linear infinite; }
@keyframes sx-solar-sheet { to { background-position: 0 34px; } }
.sx-solar-glare { position: absolute; top: -20%; bottom: -20%; width: 40%; left: calc(-45% + var(--s4) * 150%);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45) 45%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, .45) 55%, transparent); transform: skewX(-12deg);
  opacity: calc(min(1, var(--s4) * 20)); }
.sx-solar-meter { position: relative; width: 100%; max-width: 420px; margin-top: 34px; padding: 12px 16px 14px; border-radius: 12px; background: rgba(4, 20, 60, .82); color: #fff; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.sx-solar-meter span { font-size: .82rem; font-weight: 700; color: rgba(255, 255, 255, .8); }
.sx-solar-meter b { font-size: 1.2rem; font-weight: 800; color: #FFD65A; font-variant-numeric: tabular-nums; }
.sx-solar-meter i { grid-column: 1 / -1; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.sx-solar-meter em { display: block; height: 100%; width: calc(70% + var(--s2) * 12% + var(--s3) * 8% + var(--s4) * 10%); border-radius: inherit; background: linear-gradient(90deg, #F86A05, #FFD65A); }

.sx-solar-steps { list-style: none; margin: 0; padding: 12vh 0 0; order: 1; }
.sx-solar-step { min-height: 52vh; padding: 26px 26px 26px 0; opacity: .35; transition: opacity .5s; }
.sx-solar-step:last-child { min-height: 40vh; }
.sx-solar-step.is-active { opacity: 1; }
.sx-solar-n { display: inline-flex; gap: 10px; align-items: center; margin-bottom: 12px; color: var(--sx-orange); font-size: .9rem; font-weight: 800; letter-spacing: .1em; }
.sx-solar-n em { font-style: normal; padding: 4px 10px; border-radius: 999px; background: #FFF1E6; color: var(--sx-orange-600); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.sx-solar-step h3 { margin: 0 0 10px; color: var(--sx-navy); font-size: 1.9rem; font-weight: 800; line-height: 1.15; }
.sx-solar-step p { margin: 0; max-width: 420px; color: var(--sx-text); font-size: 1.05rem; line-height: 1.65; }
@media (max-width: 900px) {
  .sx-solar { grid-template-columns: 1fr; gap: 0; }
  .sx-solar-stage { order: 0; top: 80px; z-index: 3; height: 272px; padding: 16px 16px 12px; border-radius: 14px; box-shadow: 0 -60px 0 0 #fff, 0 24px 40px -24px rgba(4, 20, 60, .6); }
  .sx-solar-panel { max-width: 380px; border-width: 6px; }
  .sx-solar-sun { width: 50px; height: 50px; }
  .sx-solar-meter { margin-top: 14px; padding: 7px 12px 9px; }
  .sx-solar-meter b { font-size: 1rem; }
  .sx-solar-mark { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  .sx-solar-drop { width: 18px; height: 13px; } .sx-solar-drop--lg { width: 24px; height: 17px; } .sx-solar-leaf { width: 24px; height: 11px; }
  .sx-solar-steps { padding: 20px 0 0; }
  .sx-solar-step { min-height: 44vh; padding: 20px 4px; }
  .sx-solar-step:last-child { min-height: 30vh; }
  .sx-solar-step h3 { font-size: 1.45rem; }
  .sx-solar-step p { font-size: .98rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-solar-stage { position: relative; top: 0; }
  .sx-solar-step, .sx-solar-step:last-child { min-height: 0; opacity: 1; }
  .sx-solar-mark, .sx-solar-rinse::after { animation: none; }
}

/* ==========================================================
   HOLIDAY LIGHTING — "Everything Included" night-scene art
   ========================================================== */
.sx-incl-list--ill li { padding: 14px 18px 14px 14px; }
.sx-incl-ico--ill {
  width: 76px; height: 76px; border-radius: 14px; position: relative; overflow: hidden;
  background: radial-gradient(circle at 70% 20%, rgba(255, 255, 255, .9) 0 .6px, transparent 1.2px) 0 0 / 23px 19px,
              radial-gradient(circle at 20% 60%, rgba(255, 255, 255, .6) 0 .5px, transparent 1px) 0 0 / 17px 29px,
              linear-gradient(180deg, #0A1733, #13295A);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 20px -12px rgba(4, 20, 60, .7);
}
.sx-incl-ico--ill .sx-xill { width: 62px; height: 62px; fill: initial; stroke: none; overflow: visible; }
.sx-xill .sx-c9-glass { filter: drop-shadow(0 0 3px var(--c)) drop-shadow(0 0 7px var(--c)); }
.sx-xill--string .sx-c9, .sx-xill--tote .sx-c9 { animation: sx-c9-twinkle 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.55s); }
@keyframes sx-c9-twinkle { 0%, 100% { opacity: 1; } 45% { opacity: .55; } 55% { opacity: 1; } }
.sx-xill .sx-xdot { opacity: .2; filter: drop-shadow(0 0 2px #FFC23D); }
.sx-incl-list--ill li.is-in .sx-xdot { animation: sx-xdot 3.2s ease infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes sx-xdot { 0% { opacity: .2; } 12%, 80% { opacity: 1; } 100% { opacity: .2; } }
.sx-xill--clip .sx-c9 { transform-box: view-box; transform-origin: 0 0; }
.sx-incl-list--ill li.is-in .sx-xill--clip .sx-c9 { animation: sx-c9-swing 3s ease-in-out infinite; }
@keyframes sx-c9-swing { 0%, 100% { transform: translate(32px, 27px) rotate(-4deg) scale(1.9); } 50% { transform: translate(32px, 27px) rotate(4deg) scale(1.9); } }
@media (max-width: 520px) {
  .sx-incl-list--ill li { gap: 12px; padding: 12px; }
  .sx-incl-ico--ill { width: 64px; height: 64px; }
  .sx-incl-ico--ill .sx-xill { width: 54px; height: 54px; }
  .sx-incl-list--ill .sx-incl-check { display: none; }
}

/* ==========================================================
   HOLIDAY LIGHTING — process on a real light string
   Each step's bulb switches on as the power reaches it.
   ========================================================== */
.sx-xmas-section { background: radial-gradient(900px 500px at 50% 0%, #17336B 0%, transparent 70%), linear-gradient(180deg, #0A1733 0%, #06102A 100%); }
.sx-xmas-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background: radial-gradient(circle, rgba(255, 255, 255, .8) 0 .8px, transparent 1.4px) 0 0 / 97px 83px,
              radial-gradient(circle, rgba(255, 255, 255, .5) 0 .6px, transparent 1.2px) 31px 17px / 61px 71px; }
.sx-xmas-section .sx-title { color: #fff; }
.sx-xmas-section .sx-eyebrow { color: #FFC23D; }
.sx-xsteps { --p: 0; position: relative; max-width: 1200px; margin: 0 auto 50px; }
.sx-xwire { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 70px; overflow: visible; }
.sx-xwire path { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; }
.sx-xwire-base { stroke: #1E4D2B; }
.sx-xwire-live { stroke: #FFD980; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); filter: drop-shadow(0 0 4px rgba(255, 200, 90, .9)); }
.sx-xrail { display: none; }
.sx-xlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.sx-xstep { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 38px; }
.sx-xbulb { width: 44px; height: 62px; overflow: visible; transform-origin: 50% 0; }
.sx-xbulb .sx-c9-glass { fill: #39435A; transition: fill .4s; }
.sx-xstep.is-lit .sx-xbulb .sx-c9-glass { fill: var(--c); filter: drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 18px var(--c)); animation: sx-c9-glow 2.4s ease-in-out infinite; }
.sx-xstep.is-lit .sx-xbulb { animation: sx-c9-on .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes sx-c9-on { 0% { transform: rotate(-10deg); } 60% { transform: rotate(6deg); } 100% { transform: none; } }
@keyframes sx-c9-glow { 50% { filter: drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 12px var(--c)); } }
.sx-xcard { position: relative; width: 100%; margin-top: 18px; padding: 24px 22px; border-radius: 16px; background: rgba(12, 26, 58, .92); border: 1px solid rgba(255, 255, 255, .1); transition: border-color .5s, box-shadow .5s, background-color .5s; }
.sx-xcard::before { display: none; }
/* soft light from the bulb: a round glow that fades out before any edge */
.sx-xstep::before { content: ''; position: absolute; left: 50%; top: 10px; width: 300px; height: 300px; margin-left: -150px; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 42%, transparent) 0%, color-mix(in srgb, var(--c) 16%, transparent) 45%, transparent 100%);
  opacity: 0; transform: scale(.6); transition: opacity .8s ease, transform .9s ease; }
.sx-xstep.is-lit::before { opacity: .9; transform: scale(1); animation: sx-xglow 3.2s ease-in-out 1s infinite; }
@keyframes sx-xglow { 50% { opacity: .65; transform: scale(.94); } }
.sx-xbulb, .sx-xcard { position: relative; z-index: 1; }
.sx-xstep.is-lit .sx-xcard { border-color: color-mix(in srgb, var(--c) 50%, transparent); background: rgba(16, 32, 70, .88); box-shadow: 0 0 40px -12px color-mix(in srgb, var(--c) 55%, transparent); }
.sx-xnum { color: var(--c); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .6; transition: opacity .4s; }
.sx-xstep.is-lit .sx-xnum { opacity: 1; }
.sx-xcard h3 { margin: 8px 0 8px; color: #fff; font-size: 1.3rem; font-weight: 800; }
.sx-xcard p { margin: 0; color: rgba(255, 255, 255, .75); font-size: .96rem; line-height: 1.6; }
@media (max-width: 900px) {
  .sx-xwire { display: none; }
  .sx-xrail { display: block; position: absolute; left: 21px; top: 0; bottom: 0; width: 3px; background: #1E4D2B; border-radius: 3px; }
  .sx-xrail > span { position: absolute; inset: 0; background: #FFD980; box-shadow: 0 0 8px rgba(255, 200, 90, .9); transform: scaleY(0); transform-origin: top; }
  .sx-xlist { grid-template-columns: 1fr; gap: 16px; }
  .sx-xstep { flex-direction: row; align-items: flex-start; gap: 16px; padding-top: 0; }
  .sx-xbulb { flex: none; width: 40px; height: 56px; margin-top: 14px; }
  .sx-xcard { margin-top: 0; padding: 18px 18px; }
  .sx-xstep::before { left: 20px; top: 40px; width: 220px; height: 220px; margin: -110px 0 0 -110px; }
  .sx-xcard h3 { font-size: 1.12rem; }
  .sx-xcard p { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-xstep.is-lit::before { animation: none; }
  .sx-xill *, .sx-xbulb, .sx-xbulb * , .sx-incl-list--ill li .sx-xill * { animation: none !important; }
  .sx-xill .sx-xdot { opacity: 1; }
}

/* ---------- Drag-to-clean driveway ---------- */
[data-slab-drag] .sx-slab { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
[data-slab-drag].is-dragging .sx-slab { cursor: grabbing; }
[data-slab-drag] .sx-slab:focus-visible { box-shadow: 0 0 0 4px var(--sx-blue), 0 30px 60px -36px rgba(4, 20, 60, .7); }
[data-slab-drag] .sx-slab-cleaner { opacity: 1; }
[data-slab-drag] .sx-slab-disc::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 3px solid rgba(248, 106, 5, .9); box-shadow: 0 0 24px 6px rgb(var(--sx-orange-rgb) / .55); animation: sx-slab-pulse 1.8s ease-in-out infinite; }
[data-slab-drag].is-dragging .sx-slab-disc::before { animation: none; opacity: .5; }
@keyframes sx-slab-pulse { 0%, 100% { transform: scale(.94); opacity: .95; } 50% { transform: scale(1.08); opacity: .45; } }
.sx-slab-label--after { left: 18px; right: auto; background: #1E9E55; opacity: 0; }
[data-slab-drag] .sx-slab-label--after { opacity: calc(min(1, var(--p) * 4 - .4)); }
.sx-slab-hint { position: absolute; z-index: 4; left: calc(var(--p) * 100%); bottom: 34px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--sx-orange); color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap; box-shadow: 0 10px 22px -8px rgb(var(--sx-orange-rgb) / .9); pointer-events: none; transition: opacity .4s; }
.sx-slab-hint svg { width: 16px; height: 16px; }
[data-slab-drag].is-touched .sx-slab-hint { opacity: 0; }
[data-slab-drag] .sx-slab-done { top: auto; bottom: 36px; }
@media (prefers-reduced-motion: reduce) { [data-slab-drag] .sx-slab-disc::before { animation: none; } }
@media (max-width: 520px) { .sx-slab-hint { bottom: 22px; font-size: .7rem; padding: 5px 10px; } .sx-slab-label--after { top: 26px; left: 10px; font-size: .7rem; } }

/* Surface cleaner: branded disc (white fin on Shark Blue), no stripe across the logo */
.sx-slab-disc { background: radial-gradient(circle at 38% 32%, #3A86FF 0%, #0463EE 45%, #0352C7 70%, #033C94 100%); box-shadow: 0 0 0 5px #fff, 0 0 0 9px rgba(4, 99, 238, .35), 0 18px 30px rgba(0, 0, 0, .45); }
.sx-slab-disc::after { width: 50%; height: 44%; background-image: url('images/brand/fin-white.svg'); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.sx-slab-bar { inset: 6px; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .0) 0deg 14deg, rgba(255, 255, 255, .16) 14deg 18deg); -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); mask: radial-gradient(circle, transparent 62%, #000 63%); animation-duration: .9s; }