/* ==========================================================================
   S P Alectricals — shared layout (header + footer)
   Loaded first, before sp-core.css and the page stylesheet.

   Type direction follows the chosen reference (Indosolar / Waaree): Poppins,
   with LIGHT weights on large text — a 40px heading at weight 300 is the single
   biggest thing that makes those sites read as premium rather than loud.
   ========================================================================== */
:root{
  --sp-navy:#181860; --sp-navy-deep:#0B0F2A; --sp-navy-mid:#24248C;
  --sp-ink-deep:#060E22;
  /* Deep forest greens. The homepage is mint-led, so a navy footer read as a
     different site; these keep every dark surface in the same family.
     --sp-fst-lt is the lightest stop, so it is the one contrast is measured
     against. */
  --sp-fst-deep:#082514; --sp-fst:#0C3520; --sp-fst-lt:#0F3F29;
  --sp-fst-tint:#114730;
  --sp-on-fst:#A9C6B2;   /* 6.46:1 on --sp-fst-lt */
  /* measured against the LIGHTEST painted point — the green bloom corner,
     rgb(24,86,47) — not the base tone, which is a full stop darker */
  --sp-on-fst-dim:#ADC8B6; /* 4.86:1 there */
  /* --sp-green is the brand accent for DECORATION. White text on it is only
     2.69:1, so any green surface carrying text uses --sp-green-cta (5.09:1). */
  --sp-green:#3CB448; --sp-green-lt:#5BD16A;
  --sp-green-cta:#297E32; --sp-green-cta-h:#22682A;
  --sp-ink:#0F1524; --sp-body:#4A5169; --sp-muted:#7A82A0;
  --sp-line:#E6E9F0; --sp-line-soft:#F0F2F7;
  --sp-font:'Poppins','Segoe UI',system-ui,-apple-system,sans-serif;
  --sp-body-font:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --sp-ease:cubic-bezier(.22,.8,.28,1);
  --sp-wrap:1240px;
}

/* ------------------------------------------------------------- base reset --
   The pages no longer load Bootstrap, so the browser's default
   body{margin:8px} would show as a white gutter beside full-bleed sections. */
html{margin:0; padding:0}
body{margin:0; padding:0}

/* --------------------------------------------------- responsive safety --
   Several legacy content images carry fixed pixel widths. Layout images opt
   out via .sp-logo / .sp-f-logo, which set their own height. */
img{max-width:100%; height:auto}
.sp-logo img, .sp-f-logo img{max-width:none}
table{max-width:100%}
@media(max-width:767px){ iframe{max-width:100%} body{overflow-x:hidden} }

/* Skip link — first tab stop, visible only when focused */
.sp-skip{position:absolute; left:-9999px; top:0; z-index:1200;
  background:var(--sp-fst); color:#fff; padding:12px 22px; border-radius:0 0 12px 0;
  font-family:var(--sp-font); font-size:14px; font-weight:600; text-decoration:none}
.sp-skip:focus{left:0; outline:3px solid var(--sp-green); outline-offset:-3px; color:#fff}

/* ============================================================== HEADER === */
/* At rest the bar carries the SAME colour as the top of the page beneath it,
      so there is no seam between header and hero. It cannot simply be
      transparent: position:sticky + z-index makes the header its own stacking
      context, which isolates the logo's mix-blend-mode from the body behind.
      Painting the colour on the header itself is what lets the blend work. */
header.sp-header{
  position:sticky; top:0; z-index:1000;
  background:#EFF8F1;
  border-bottom:1px solid transparent;
  font-family:var(--sp-font);
  transition:background .35s var(--sp-ease), border-color .35s var(--sp-ease),
             box-shadow .35s var(--sp-ease);
}
/* Every page's opening strip is painted this same tone (see each page's
      stylesheet), so the bar and the page below it are one continuous field. */
header.sp-header *{box-sizing:border-box}
.sp-header-in{
  max-width:var(--sp-wrap); margin:0 auto; padding:0 28px;
  display:flex; align-items:center; gap:26px; min-height:84px;
  transition:min-height .35s var(--sp-ease);
}
/* on scroll the bar tightens and gains a whisper of elevation */
/* once the page has moved the bar lifts off it: frosted, bordered, elevated */
header.sp-header.sp-scrolled{
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
          backdrop-filter:blur(22px) saturate(180%);
  border-bottom-color:rgba(15,21,36,.08);
  box-shadow:0 1px 0 rgba(15,21,36,.03), 0 14px 36px -24px rgba(15,21,36,.34);
}
header.sp-header.sp-scrolled .sp-header-in{ min-height:70px }

.sp-logo{display:block; flex:none; line-height:0;
  transition:transform .35s var(--sp-ease)}
.sp-logo:hover{transform:translateY(-1px)}
/* logo3.jpeg is 84% pure white with pure-white corners and no alpha channel.
      Multiply drops that white into whatever the bar is painted, so the mark
      floats instead of sitting in a white rectangle. */
.sp-logo img{height:54px; width:auto; display:block; mix-blend-mode:multiply;
  transition:height .35s var(--sp-ease)}
header.sp-header.sp-scrolled .sp-logo img{height:46px}

/* --- desktop nav --------------------------------------------------------- */
.sp-nav{margin-left:auto; display:flex; align-items:center; gap:2px}
.sp-nav > a, .sp-mega-t{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  padding:11px 16px; border-radius:11px;
  font-family:var(--sp-font); font-size:14.5px; font-weight:500; letter-spacing:-.005em;
  color:var(--sp-ink); text-decoration:none; background:none; border:0; cursor:pointer;
  line-height:1.2; white-space:nowrap;
  transition:color .28s var(--sp-ease), background .28s var(--sp-ease);
}
/* underline grows from the centre — a small piece of craft that reads premium */
.sp-nav > a::after, .sp-mega-t::after{
  content:""; position:absolute; left:50%; right:50%; bottom:6px; height:2px;
  background:var(--sp-green); border-radius:2px;
  transition:left .32s var(--sp-ease), right .32s var(--sp-ease);
}
.sp-nav > a:hover::after, .sp-mega:hover .sp-mega-t::after{ left:16px; right:16px }
/* the chip's own tint darkens the mint enough that --sp-green-cta lands at
   4.28:1 on it, so hover steps to the darker green (5.77:1) */
.sp-nav > a:hover, .sp-mega:hover .sp-mega-t{
  color:var(--sp-green-cta-h); background:rgba(41,126,50,.07) }
.sp-nav > a.sp-on, .sp-mega-t.sp-on{ color:var(--sp-green-cta); font-weight:600 }
.sp-nav > a.sp-on::after, .sp-mega-t.sp-on::after{ left:16px; right:16px }
.sp-mega-t svg{width:12px; height:12px; opacity:.5;
  transition:transform .32s var(--sp-ease), opacity .28s var(--sp-ease)}
.sp-mega:hover .sp-mega-t svg{transform:rotate(180deg); opacity:.9}

/* --- mega menu ----------------------------------------------------------- */
.sp-mega{position:static}
.sp-mega-panel{
  position:absolute; left:0; right:0; top:100%;
  /* fully opaque: at .985 the hero headline still ghosted through */
  background:#FCFDFF;
  -webkit-backdrop-filter:blur(26px) saturate(180%);
          backdrop-filter:blur(26px) saturate(180%);
  border-top:1px solid var(--sp-line-soft);
  border-bottom:1px solid rgba(15,21,36,.07);
  box-shadow:0 26px 60px -26px rgba(15,21,36,.34);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .3s var(--sp-ease), transform .3s var(--sp-ease), visibility .3s;
}
.sp-mega:hover .sp-mega-panel, .sp-mega:focus-within .sp-mega-panel{
  opacity:1; visibility:visible; transform:translateY(0);
}
.sp-mega-in{max-width:var(--sp-wrap); margin:0 auto; padding:26px 28px 30px;
  display:grid; gap:26px}
@media(min-width:1080px){ .sp-mega-in{grid-template-columns:1fr 300px} }
.sp-mega-grid{display:grid; gap:6px; grid-template-columns:repeat(2,1fr)}
@media(min-width:920px){ .sp-mega-grid{grid-template-columns:repeat(3,1fr)} }
.sp-mega-item{
  display:flex; align-items:center; gap:14px; padding:11px 13px; border-radius:14px;
  text-decoration:none; border:1px solid transparent;
  transition:background .26s var(--sp-ease), border-color .26s var(--sp-ease),
             transform .26s var(--sp-ease);
}
.sp-mega-item:hover{background:#fff; border-color:var(--sp-line);
  transform:translateX(3px);
  box-shadow:0 1px 2px rgba(15,21,36,.04), 0 10px 24px -14px rgba(15,21,36,.22)}
.sp-mega-thumb{
  width:52px; height:52px; flex:none; border-radius:12px; overflow:hidden;
  background:#EFF6F1; display:grid; place-items:center; padding:6px;
  border:1px solid var(--sp-line-soft);
}
.sp-mega-thumb img{max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; mix-blend-mode:multiply;
  transition:transform .32s var(--sp-ease)}
.sp-mega-item:hover .sp-mega-thumb img{transform:scale(1.08)}
.sp-mega-item b{display:block; font-family:var(--sp-font); font-size:13.5px;
  font-weight:600; color:var(--sp-ink); letter-spacing:-.005em; line-height:1.3}
/* --sp-muted is 3.80:1 at this size on the panel — one step darker clears AA
   while staying clearly secondary to the product name above it */
.sp-mega-item span{display:block; font-family:var(--sp-body-font); font-size:11.5px;
  color:#626A85; margin-top:3px; line-height:1.4}

/* promo tile beside the product grid */
.sp-mega-side{
  position:relative; overflow:hidden; border-radius:18px; padding:24px 22px;
  background:linear-gradient(155deg, var(--sp-fst-deep), var(--sp-fst) 62%, #0E3D26);
  color:#fff; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:210px; text-decoration:none;
}
/* the bloom was at .30, which lifted the tile to rgb(30,104,55) and dropped the
   body copy to 3.69:1. At .18 the darkest text on it measures 4.98:1. */
.sp-mega-side::before{content:""; position:absolute; inset:0;
  background:radial-gradient(340px 200px at 88% 8%, rgba(60,180,72,.18), transparent 66%)}
.sp-mega-side::after{content:""; position:absolute; inset:0; opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 78%);
          mask-image:linear-gradient(to bottom,#000,transparent 78%)}
.sp-mega-side > *{position:relative; z-index:2}
.sp-mega-side small{font-family:var(--sp-body-font); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:#8FE39A}
.sp-mega-side b{display:block; font-family:var(--sp-font); font-size:19px;
  font-weight:500; letter-spacing:-.02em; margin:10px 0 8px; line-height:1.2}
.sp-mega-side p{font-family:var(--sp-body-font); font-size:12.5px; color:var(--sp-on-fst);
  margin:0 0 14px; line-height:1.55}
.sp-mega-side i{display:inline-flex; align-items:center; gap:7px; font-style:normal;
  font-family:var(--sp-body-font); font-size:12.5px; font-weight:600; color:#8FE39A}
.sp-mega-side i svg{width:14px; height:14px; transition:transform .28s var(--sp-ease)}
.sp-mega-side:hover i svg{transform:translateX(4px)}

@media(max-width:1079px){ .sp-nav{display:none} }

/* --- estimate button ----------------------------------------------------- */
/* identical geometry to the page's .hp-pill — icon in its own circle — so the
      header button and the buttons in the content read as one component */
.sp-cta{
  position:relative; flex:none; display:inline-flex; align-items:center; gap:10px;
  padding:8px 22px 8px 8px; border-radius:999px; overflow:hidden;
  background:var(--sp-green-cta);
  color:#fff !important; font-family:var(--sp-body-font);
  font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap;
  box-shadow:0 8px 22px -8px rgba(41,126,50,.55);
  transition:background .3s var(--sp-ease), transform .3s var(--sp-ease), box-shadow .3s var(--sp-ease);
}
.sp-cta i{display:grid; place-items:center; width:32px; height:32px; flex:none;
  border-radius:50%; background:rgba(255,255,255,.2)}
.sp-cta i svg{width:15px; height:15px; transition:transform .28s var(--sp-ease)}
.sp-cta:hover i svg{transform:translateX(3px)}
/* a sheen that sweeps across on hover */
.sp-cta::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent);
  transform:skewX(-18deg); transition:left .6s var(--sp-ease)}
.sp-cta:hover{background:var(--sp-green-cta-h); transform:translateY(-2px);
  box-shadow:0 12px 28px -8px rgba(41,126,50,.62)}
.sp-cta:hover::after{left:120%}
.sp-cta:focus-visible{outline:3px solid var(--sp-green); outline-offset:3px}
@media(max-width:560px){ .sp-cta{display:none} }

/* --- burger -------------------------------------------------------------- */
.sp-burger{display:none; place-items:center; flex:none;
  width:46px; height:46px; border-radius:999px;
  border:1px solid rgba(41,126,50,.22); background:rgba(41,126,50,.07); cursor:pointer; padding:0;
  transition:background .26s var(--sp-ease), border-color .26s var(--sp-ease)}
.sp-burger:hover{background:rgba(41,126,50,.13); border-color:rgba(41,126,50,.4)}
/* 4.28:1 on its own tinted chip — clears the 3:1 rule for icons, but the
   darker green (5.7:1) is stronger and matches the nav hover */
.sp-burger svg{width:21px; height:21px; color:var(--sp-green-cta-h)}
@media(max-width:1079px){ .sp-burger{display:grid; margin-left:auto} }

/* --- mobile panel -------------------------------------------------------- */
.sp-mob{display:none; border-top:1px solid var(--sp-line-soft);
  background:rgba(255,255,255,.98);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  max-height:calc(100vh - 84px); overflow-y:auto}
.sp-mob.sp-open{display:block; animation:sp-slide .34s var(--sp-ease)}
@keyframes sp-slide{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
@media(min-width:1080px){ .sp-mob.sp-open{display:none !important} }
.sp-mob a{display:block; padding:15px 28px; font-family:var(--sp-font);
  font-size:15px; font-weight:500; color:var(--sp-ink); text-decoration:none;
  border-bottom:1px solid var(--sp-line-soft)}
.sp-mob a:hover{background:#F1F8F3}
.sp-mob .sp-mob-h{padding:18px 28px 9px; font-family:var(--sp-body-font);
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sp-muted); background:#F1F8F3; border-bottom:1px solid var(--sp-line-soft)}
.sp-mob .sp-sub{display:flex; align-items:center; gap:13px; font-size:14px; font-weight:500}
.sp-mob .sp-sub img{width:34px; height:34px; object-fit:contain; flex:none;
  background:#EFF6F1; border-radius:9px; padding:4px; mix-blend-mode:multiply}
.sp-mob-cta{padding:20px 28px 26px}
.sp-mob-cta a{display:block; text-align:center; border:0; border-radius:999px; padding:15px;
  background:linear-gradient(135deg, var(--sp-green-cta), #2E9139); color:#fff !important;
  font-weight:600; box-shadow:0 10px 24px -10px rgba(41,126,50,.6)}

/* ============================================================== FOOTER === */
footer.sp-footer{
  position:relative; overflow:hidden;
  background:var(--sp-fst-deep); color:var(--sp-on-fst);
  font-family:var(--sp-body-font); font-size:14.5px; line-height:1.7;
  padding:0 0 0; margin:0;
}
footer.sp-footer *{box-sizing:border-box}
footer.sp-footer::before{content:""; position:absolute; inset:0;
  background:
    radial-gradient(760px 420px at 88% 0%, rgba(60,180,72,.20), transparent 62%),
    radial-gradient(620px 400px at 6% 100%, rgba(18,74,44,.55), transparent 68%),
    linear-gradient(168deg, var(--sp-fst-deep), var(--sp-fst) 58%, var(--sp-fst-lt))}
footer.sp-footer::after{content:""; position:absolute; inset:0; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 62%);
          mask-image:linear-gradient(to bottom,#000,transparent 62%)}
footer.sp-footer > *{position:relative; z-index:2}

/* a glass strip across the top of the footer */
/* The card used to be pulled 34px above the footer so it looked lifted off the
   boundary. On every page except home (where the strip is hidden) that left a
   white notch either side of its top corners, which read as a rendering fault.
   It now sits fully inside the footer, with the footer opening far enough that
   the card still has air above it. */
.sp-f-strip{max-width:var(--sp-wrap); margin:0 auto;
  padding:clamp(40px,4.2vw,58px) 28px 0}
/* The homepage closes on its own enquiry panel, so the strip would put the same
   ask twice within 200px. Every other page still needs it. */
body.home .sp-f-strip{display:none}
/* The card overhangs the top of the footer by 34px, so part of it sits on
   whatever section came before — which is light on most pages. It therefore
   carries its own dark base rather than relying on the footer showing through;
   the translucent white layer on top keeps the glass reading. */
.sp-f-strip-in{
  margin-bottom:clamp(40px,4vw,54px);
  background:
    linear-gradient(rgba(255,255,255,.09), rgba(255,255,255,.03)),
    linear-gradient(135deg, var(--sp-fst-lt), var(--sp-fst) 62%, var(--sp-fst-tint));
  -webkit-backdrop-filter:blur(20px) saturate(160%);
          backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.16); border-radius:20px;
  box-shadow:0 24px 56px -26px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.14);
  padding:26px 30px; display:grid; gap:20px; align-items:center;
}
@media(min-width:860px){ .sp-f-strip-in{grid-template-columns:1fr auto} }
.sp-f-strip b{display:block; font-family:var(--sp-font); font-size:clamp(19px,2.2vw,24px);
  font-weight:500; letter-spacing:-.02em; color:#fff; line-height:1.28}
.sp-f-strip p{margin:7px 0 0; font-size:14px; color:var(--sp-on-fst); max-width:52ch}
.sp-f-strip-acts{display:flex; gap:11px; flex-wrap:wrap}
.sp-f-btn{display:inline-flex; align-items:center; gap:9px; padding:13px 24px;
  border-radius:999px; font-family:var(--sp-font); font-size:14px; font-weight:600;
  text-decoration:none; white-space:nowrap; transition:transform .28s var(--sp-ease), background .28s var(--sp-ease)}
.sp-f-btn--g{background:linear-gradient(135deg,var(--sp-green-cta),#2E9139); color:#fff;
  box-shadow:0 10px 26px -10px rgba(41,126,50,.62)}
.sp-f-btn--o{border:1px solid rgba(255,255,255,.26); color:#fff}
.sp-f-btn--o:hover{background:rgba(255,255,255,.09)}
.sp-f-btn:hover{transform:translateY(-2px)}
.sp-f-btn svg{width:16px; height:16px}

.sp-footer-in{
  max-width:var(--sp-wrap); margin:0 auto; padding:0 28px;
  display:grid; gap:40px; grid-template-columns:1fr;
}
@media(min-width:640px){ .sp-footer-in{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .sp-footer-in{grid-template-columns:1.5fr 1fr 1fr 1.4fr} }

.sp-f-logo{background:#fff; border-radius:14px; padding:13px 17px;
  display:inline-block; margin-bottom:20px; line-height:0;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}
.sp-f-logo img{height:52px; width:auto; display:block}
.sp-f-about{max-width:330px; color:var(--sp-on-fst); font-size:14px}
.sp-f-tag{display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  background:rgba(60,180,72,.14); border:1px solid rgba(60,180,72,.26);
  color:#8FE39A; padding:7px 15px; border-radius:999px;
  font-family:var(--sp-font); font-size:12.5px; font-weight:500; letter-spacing:.01em}
.sp-f-tag i{width:6px; height:6px; border-radius:50%; background:var(--sp-green-lt);
  box-shadow:0 0 8px var(--sp-green-lt)}

footer.sp-footer h4{
  color:#fff; font-family:var(--sp-font); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em; margin:0 0 20px; padding:0;
}
.sp-f-links{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.sp-f-links li{margin:0; padding:0}
.sp-f-links a{position:relative; color:var(--sp-on-fst); text-decoration:none; font-size:14px;
  padding-left:0; transition:color .26s var(--sp-ease), padding-left .26s var(--sp-ease)}
.sp-f-links a::before{content:""; position:absolute; left:-12px; top:50%; width:5px; height:1.5px;
  background:var(--sp-green-lt); opacity:0; transform:translateY(-50%);
  transition:opacity .26s var(--sp-ease)}
.sp-f-links a:hover{color:#fff; padding-left:11px}
.sp-f-links a:hover::before{opacity:1; left:0}

.sp-f-row{display:flex; gap:13px; align-items:flex-start; margin-bottom:17px}
.sp-f-row svg{width:16px; height:16px; color:var(--sp-green-lt); flex:none; margin-top:5px}
.sp-f-row a, .sp-f-row span{color:var(--sp-on-fst); text-decoration:none; font-size:14px}
.sp-f-row a:hover{color:#fff}

.sp-f-social{display:flex; gap:10px; margin-top:24px}
.sp-f-social a{width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  color:var(--sp-on-fst); transition:background .26s var(--sp-ease), color .26s var(--sp-ease),
  transform .26s var(--sp-ease), border-color .26s var(--sp-ease)}
.sp-f-social a:hover{background:var(--sp-green-cta); border-color:var(--sp-green-cta);
  color:#fff; transform:translateY(-3px)}
.sp-f-social svg{width:17px; height:17px}

.sp-footer-bot{
  max-width:var(--sp-wrap); margin:56px auto 0; padding:24px 28px;
  border-top:1px solid rgba(255,255,255,.09);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:13.5px; color:var(--sp-on-fst-dim);
}
.sp-footer-bot a{color:var(--sp-on-fst-dim); text-decoration:none}
.sp-footer-bot a:hover{color:var(--sp-green-lt)}

/* ------------------------------------------------- floating whatsapp ---- */
.sp-wa{
  position:fixed; right:22px; bottom:22px; z-index:900;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:grid; place-items:center;
  box-shadow:0 2px 6px rgba(37,211,102,.4), 0 14px 34px -10px rgba(37,211,102,.7);
  transition:transform .3s var(--sp-ease), box-shadow .3s var(--sp-ease);
}
.sp-wa::before{content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(37,211,102,.5); animation:sp-ping 2.6s var(--sp-ease) infinite}
@keyframes sp-ping{0%{transform:scale(1);opacity:.7} 70%,100%{transform:scale(1.5);opacity:0}}
.sp-wa:hover{transform:scale(1.08);
  box-shadow:0 2px 6px rgba(37,211,102,.45), 0 18px 42px -10px rgba(37,211,102,.85)}
.sp-wa svg{width:29px; height:29px; color:#fff; position:relative; z-index:2}
/* At 1280px the footer's content column ends 28px from the right edge while
   the button occupies 37-95px, so it sat directly on the address block. It
   steps aside once the footer is in view — the footer carries the same
   phone number and estimate button, so nothing is lost. */
.sp-wa.sp-wa-off{opacity:0; visibility:hidden; pointer-events:none;
  transform:scale(.82) translateY(12px)}

@media(prefers-reduced-motion:reduce){
  header.sp-header, .sp-header-in, .sp-logo img, .sp-cta, .sp-cta::after,
  .sp-mega-panel, .sp-mega-item, .sp-f-btn, .sp-f-social a, .sp-f-links a, .sp-wa{
    transition:none !important;
  }
  .sp-wa::before, .sp-mob.sp-open{ animation:none !important }
}