/* ---------- HOME SLIDER ---------- */
.hs{--hs-dur:6.5s;--px:0;--py:0;--dot:rgba(255,255,255,.3);--dot-on:var(--yellow);
  position:relative;isolation:isolate;overflow:hidden;outline:none;touch-action:pan-y;
  /* --u is one design pixel. It shrinks with the viewport width AND height, so a whole slide always fits below the 72px navbar */
  --u:clamp(.5px,min(100vw/1400,(100vh - 72px)/645),1px)}
@supports (height:100svh){.hs{--u:clamp(.5px,min(100vw/1400,(100svh - 72px)/645),1px)}}
.hs[data-theme="light"]{--dot:rgba(34,28,134,.2);--dot-on:var(--navy)}
.hs-track{display:grid}

/* Slides share one grid cell, so the slider is always as tall as its tallest slide */
.hs-slide{grid-area:1/1;position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:calc(var(--u)*600);visibility:hidden;z-index:0}
/* Fill the rest of the screen below the navbar, so the next section never peeks in under the banner */
.hs-slide{min-height:max(calc(var(--u)*600),100vh - 72px)}
@supports (height:100svh){.hs-slide{min-height:max(calc(var(--u)*600),100svh - 72px)}}
.hs-slide.is-leaving{visibility:visible;z-index:1}
.hs-slide.is-active{visibility:visible;z-index:2}
.hs[data-dir="next"] .hs-slide.is-active{animation:hsWipeNext 1.5s cubic-bezier(.65,0,.25,1)}
.hs[data-dir="prev"] .hs-slide.is-active{animation:hsWipePrev 1.5s cubic-bezier(.65,0,.25,1)}
@keyframes hsWipeNext{from{clip-path:polygon(120% 0,120% 0,120% 100%,100% 100%)}to{clip-path:polygon(0 0,120% 0,120% 100%,-20% 100%)}}
@keyframes hsWipePrev{from{clip-path:polygon(-20% 0,0 0,-20% 100%,-20% 100%)}to{clip-path:polygon(-20% 0,120% 0,100% 100%,-20% 100%)}}

.hs-inner{position:relative;z-index:1;width:100%;max-width:1240px;margin:0 auto;padding:calc(var(--u)*52) 24px max(72px,calc(var(--u)*84));
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:calc(var(--u)*48);align-items:center}
.hs-copy{max-width:calc(var(--u)*660)}

/* Copy rises in line by line each time a slide becomes active */
.hs-slide.is-active .hs-in{animation:hsUp .7s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(.55s + var(--i,0)*.08s)}
@keyframes hsUp{from{opacity:0;transform:translateY(26px)}}

.hs-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:max(11px,calc(var(--u)*13));font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:calc(var(--u)*20)}
.hs-eyebrow svg{width:16px;height:16px}
.hs-eyebrow.pill{padding:calc(var(--u)*9) calc(var(--u)*14);border-radius:999px}
.hs-title{font-size:calc(var(--u)*58);font-weight:800;line-height:1.08;letter-spacing:-.025em}
.hs-title em{font-style:normal;color:var(--yellow)}
.hs-sub{font-size:max(13px,calc(var(--u)*19));line-height:1.6;margin-top:calc(var(--u)*20);max-width:calc(var(--u)*600)}
.hs-actions{display:flex;flex-wrap:wrap;gap:calc(var(--u)*14);margin-top:calc(var(--u)*30)}

.hs-btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--u)*12);height:calc(var(--u)*56);padding:0 calc(var(--u)*28);border-radius:10px;
  font-weight:700;font-size:max(13px,calc(var(--u)*16));white-space:nowrap;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.hs-btn svg{width:18px;height:18px;flex-shrink:0;transition:transform .2s}
.hs-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(15,12,60,.22)}
.hs-btn:hover .hs-arrow{transform:translateX(4px)}
.hs-btn:active{transform:scale(.97)}
.hs-btn.yellow{background:var(--yellow);color:var(--navy-dark)}
.hs-btn.yellow:hover{background:#ffd043}
.hs-btn.navy{background:var(--navy);color:#fff}
.hs-btn.navy:hover{background:#2e27a8}
.hs-btn.navy .hs-arrow{color:var(--yellow)}
.hs-btn.ghost{border:1.5px solid rgba(255,255,255,.45);color:#fff}
.hs-btn.ghost svg{color:var(--yellow)}
.hs-btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.hs-btn.green{background:#217a45;color:#fff}
.hs-btn.green:hover{background:#27904f}
.hs a:focus-visible,.hs button:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px var(--navy-dark)}

/* Artwork drifts a little against the pointer */
.hs-art{display:grid;place-items:center;min-width:0}
.hs-art > *{translate:calc(var(--px)*-22px) calc(var(--py)*-14px);transition:translate .5s ease-out}
.hs-art svg{display:block;width:100%;height:auto;overflow:visible}
.hs-art svg *{transform-box:fill-box;transform-origin:center}

/* ---------- SLIDE 1 · smoke detectors ---------- */
.hs-s1{background:var(--navy-dark);color:#fff}
.hs-s1::before,.hs-s1::after{content:"";position:absolute;inset:0}
.hs-s1::before{background:var(--navy);clip-path:polygon(61% 0,100% 0,100% 100%,51.5% 100%)}
.hs-s1::after{background:var(--yellow);clip-path:polygon(86% 0,100% 0,100% 100%,76.7% 100%)}
.hs-s1.is-active::before{animation:hsPanel 1s cubic-bezier(.2,.8,.2,1) backwards}
.hs-s1.is-active::after{animation:hsPanel 1s .12s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes hsPanel{from{transform:translateX(45%)}}
.hs-s1 .hs-eyebrow{background:rgba(255,255,255,.1);color:var(--yellow)}
.hs-s1 .hs-sub{color:rgba(255,255,255,.82)}
.hs-feats{list-style:none;display:flex;flex-wrap:wrap;gap:calc(var(--u)*12) calc(var(--u)*24);margin-top:calc(var(--u)*40);padding-top:calc(var(--u)*24);border-top:1px solid rgba(255,255,255,.14);
  font-size:max(12px,calc(var(--u)*14.5));font-weight:700}
.hs-feats li{display:flex;align-items:center;gap:10px}
.hs-feats svg{width:max(16px,calc(var(--u)*22));height:max(16px,calc(var(--u)*22));color:var(--yellow);flex-shrink:0}

.hs-detector{max-width:calc(var(--u)*400)}
.hs-s1.is-active .hs-float{animation:hsFloat 5s ease-in-out infinite}
.hs-s1.is-active .hs-ring{animation:hsRing 3.2s ease-out infinite}
.hs-s1.is-active .hs-ring + .hs-ring{animation-delay:1.6s}
.hs-s1.is-active .hs-led{animation:hsBlink 1.6s ease-in-out infinite}
.hs-s1.is-active .hs-led-halo{animation:hsHalo 1.6s ease-out infinite}
@keyframes hsFloat{50%{transform:translateY(-10px)}}
@keyframes hsRing{from{transform:scale(.55);opacity:0}25%{opacity:1}to{transform:scale(1.15);opacity:0}}
@keyframes hsBlink{50%{opacity:.35}}
@keyframes hsHalo{from{transform:scale(.6);opacity:.9}to{transform:scale(2.2);opacity:0}}

/* ---------- SLIDE 2 · fire alarm brands ---------- */
.hs-s2{background:var(--soft);color:var(--navy-dark);box-shadow:inset 10px 0 0 var(--yellow)}
.hs-s2 .hs-eyebrow{color:#c8401a}
.hs-s2 .hs-sub{color:#4a4780}
.hs-brands{width:100%;max-width:calc(var(--u)*620);background:var(--navy);border-radius:calc(var(--u)*28);padding:calc(var(--u)*36);box-shadow:0 30px 60px rgba(20,16,90,.22)}
.hs-brands > p{font-size:max(11px,calc(var(--u)*13));font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow);margin-bottom:calc(var(--u)*18)}
.hs-tiles{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*12)}
.hs-tiles li{display:grid}
.hs-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:100%;min-height:calc(var(--u)*96);padding:calc(var(--u)*10) 6px;
  border-radius:12px;background:#fff;color:var(--navy-dark);text-align:center;transition:transform .2s,box-shadow .2s}
.hs-tile strong{font-size:max(12px,calc(var(--u)*19));font-weight:800;line-height:1.2}
.hs-tile span{font-size:max(10px,calc(var(--u)*12));color:var(--muted)}
.hs-tile:hover{transform:translateY(-4px);box-shadow:0 0 0 3px var(--yellow),0 14px 24px rgba(0,0,0,.25)}
.hs-tile.ask{background:var(--yellow)}
.hs-tile.ask strong{font-size:max(11px,calc(var(--u)*14))}
.hs-tile.ask:hover{box-shadow:0 0 0 3px #fff,0 14px 24px rgba(0,0,0,.25)}
.hs-s2.is-active .hs-tiles li{animation:hsPop .5s cubic-bezier(.2,.9,.3,1.3) backwards;animation-delay:calc(.75s + var(--i,0)*.05s)}
@keyframes hsPop{from{opacity:0;transform:scale(.8)}}

/* ---------- SLIDE 3 · PA systems ---------- */
.hs-s3{background:var(--yellow) radial-gradient(circle calc(var(--u)*470) at calc(50% + var(--u)*530) 50%,#ffcf3d 99.6%,transparent 100%);color:var(--navy-dark)}
.hs-s3 .hs-eyebrow{background:var(--navy-dark);color:var(--yellow)}
.hs-s3 .hs-sub{color:#3a3420}
.hs-chips{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u)*10);margin-top:calc(var(--u)*22);font-size:max(12px,calc(var(--u)*14));font-weight:600}
.hs-chips a{padding:calc(var(--u)*8) calc(var(--u)*16);border-radius:8px;background:#fff;font-size:max(13px,calc(var(--u)*16));font-weight:800;transition:transform .2s,box-shadow .2s}
.hs-chips a:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(26,21,102,.2)}
.hs-note{margin-top:calc(var(--u)*22);font-size:max(12px,calc(var(--u)*14));font-weight:500;color:#3a3420}

.hs-megaphone{max-width:calc(var(--u)*440)}
.hs-s3.is-active .hs-horn{animation:hsHorn 1.8s ease-in-out infinite}
.hs-s3.is-active .hs-wave{animation:hsWave 1.8s ease-in-out infinite}
.hs-s3.is-active .hs-wave:nth-of-type(2){animation-delay:.22s}
.hs-s3.is-active .hs-wave:nth-of-type(3){animation-delay:.44s}
@keyframes hsHorn{0%,100%{transform:rotate(0)}12%{transform:rotate(-2.5deg) scale(1.02)}24%{transform:rotate(0)}}
@keyframes hsWave{0%,100%{opacity:.12;transform:translateX(-8px)}35%{opacity:1;transform:none}}

/* ---------- CONTROLS ---------- */
.hs-ui{position:absolute;z-index:3;left:0;right:0;bottom:24px;max-width:1240px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.hs-ui > *{pointer-events:auto}
.hs-dots{display:flex;align-items:center;gap:8px}
.hs-dot{position:relative;width:12px;height:20px;transition:width .4s cubic-bezier(.2,.8,.2,1)}
.hs-dot::before,.hs-dot i{content:"";position:absolute;left:0;right:0;top:8px;height:5px;border-radius:5px}
.hs-dot::before{background:var(--dot);transition:background .3s}
.hs-dot:hover::before{background:var(--dot-on)}
.hs-dot i{background:var(--dot-on);transform:scaleX(0);transform-origin:left}
.hs-dot.is-active{width:44px}
.hs-dot.is-active i{animation:hsFill var(--hs-dur) linear forwards}
@keyframes hsFill{to{transform:scaleX(1)}}

/* Autoplay is the dot's fill animation; pausing that pauses the slider */
.hs.is-paused .hs-dot i,.hs:has(:focus-visible) .hs-dot i,body:has(.qm.open) .hs-dot i{animation-play-state:paused}
.hs-nav{display:flex;align-items:center;gap:10px}
.hs-nav button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--navy-dark);color:#fff;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.22);transition:background .2s,color .2s,transform .2s}
.hs-nav button:hover{background:#fff;color:var(--navy-dark);transform:scale(1.08)}
.hs-nav button:active{transform:scale(.94)}
.hs-nav svg{width:16px;height:16px}
.hs-toggle .play,.hs.is-paused .hs-toggle .pause{display:none}
.hs.is-paused .hs-toggle .play{display:block}

@media (prefers-reduced-motion:reduce){
  .hs *,.hs *::before,.hs *::after,.hs-slide.is-active{animation:none!important;transition:none!important}
  .hs-art > *{translate:none}
  .hs-dot.is-active i{transform:scaleX(1)}
  .hs-toggle{display:none!important}
}