/* SmartHome landing page. Scoped to .shx so nothing leaks into the shop. */
.shx *{box-sizing:border-box}
.shx img{max-width:100%;display:block;height:auto}
.shx a{color:inherit;text-decoration:none}
.shx button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.shx h1,.shx h2,.shx h3,.shx h4{margin:0;font-weight:700;line-height:1.05;letter-spacing:-.03em;text-transform:none}
.shx p{margin:0}
.shx ul{margin:0;padding:0;list-style:none}
html.sh-landing,body.sh-landing{margin:0;padding:0;background:#fff}
body.sh-landing{font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;color:#0E1418}

/* ---------- tokens ---------- */
.shx{
  --blue:#38A4CC; --blue-dim:rgba(56,164,204,.16); --blue-line:rgba(56,164,204,.38);
  --ink:#0E1418; --navy:#0B1116; --navy-2:#111820; --navy-3:#18222a;
  --white:#fff; --grey:#848484; --grey-2:#e6e8ea; --grey-3:#f4f6f7;
  --shadow:0 18px 50px -22px rgba(0,0,0,.35);
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1180px;
  background:var(--white);color:var(--ink);
  font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;
}
.shx h1{font-size:clamp(2.4rem,7vw,5.2rem)}
.shx h2{font-size:clamp(1.9rem,4.4vw,3.2rem)}
.shx h3{font-size:clamp(1.1rem,2vw,1.45rem);letter-spacing:-.02em}
.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--blue)}
.muted{color:var(--grey)}
.shx :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:70;padding:.6rem 0;
  transition:background .35s var(--ease),backdrop-filter .35s var(--ease),box-shadow .35s var(--ease)}
.hdr::before{content:"";position:absolute;left:0;right:0;top:0;height:150%;z-index:1;pointer-events:none;
  background:linear-gradient(rgba(5,9,12,.62),rgba(5,9,12,.28) 55%,transparent);transition:opacity .35s var(--ease)}
.hdr.solid::before,.hdr.menuopen::before{opacity:0}
.hdr.solid{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(0,0,0,.07)}
.hdr>.wrap{display:flex;align-items:center;gap:1.25rem;position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:.6rem;margin-right:auto}
.brand img{height:96px;width:auto;transition:opacity .3s var(--ease)}
.brand .lgt{position:absolute;opacity:0}
.hdr.solid .brand .drk{opacity:0}
.hdr.solid .brand .lgt{opacity:1;position:static}
.nav{display:flex;align-items:center;gap:1.6rem;font-size:.9rem;font-weight:500}
.nav a{color:var(--white);opacity:.85;position:relative;padding:.2rem 0}
.hdr.solid .nav a{color:var(--ink);opacity:.75}
.nav a:hover{opacity:1}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--blue);transition:right .35s var(--ease)}
.nav a:hover::after{right:0}
.navlink{display:flex;align-items:center;gap:.35rem;color:var(--white);opacity:.85;font-weight:500;padding:.2rem 0;position:relative}
.hdr.solid .navlink{color:var(--ink);opacity:.75}
.navlink:hover,.navlink[aria-expanded="true"]{opacity:1}
.navlink .chev{transition:transform .3s var(--ease)}
.navlink[aria-expanded="true"] .chev{transform:rotate(180deg)}
.navcta{padding:.6rem 1.1rem;font-size:.85rem}
.mega{position:fixed;left:0;right:0;top:0;z-index:1;background:#fff;border-bottom:1px solid var(--grey-2);
  box-shadow:0 26px 50px -30px rgba(0,0,0,.45);padding:8.6rem 0 1.6rem;opacity:0;visibility:hidden;
  transform:translateY(-10px);transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .35s}
.mega.open{opacity:1;visibility:visible;transform:none}
@media(min-width:881px){
  .hdr.menuopen{background:rgba(255,255,255,.96);backdrop-filter:blur(14px)}
  .hdr.menuopen .brand .drk{opacity:0}
  .hdr.menuopen .brand .lgt{opacity:1;position:static}
  .hdr.menuopen .nav a,.hdr.menuopen .navlink{color:var(--ink);opacity:.75}
  .hdr.menuopen .cartbtn{border-color:var(--grey-2);color:var(--ink)}
}
.megaback{display:none;color:#fff;font-size:.9rem;font-weight:500;margin-bottom:1rem;opacity:.7}
.megahead{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin:.6rem 0 1rem;font-weight:600}
.megagrid{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}
.mcat{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:12px;font-size:.85rem;font-weight:500;
  border:1px solid transparent;transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.mcat:hover{background:var(--grey-3);border-color:var(--grey-2);transform:translateX(3px)}
.mcat .mi{flex:none;width:34px;height:34px;border-radius:10px;background:var(--grey-3);display:grid;place-items:center;color:var(--blue)}
.mcat:hover .mi{background:var(--blue);color:#fff}
.mcat .mi svg{width:19px;height:19px}
.megafoot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.4rem;padding-top:1.1rem;
  border-top:1px solid var(--grey-2);font-size:.83rem;color:var(--grey)}
.megafoot a{color:var(--blue);font-weight:500}
.cartbtn{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);color:var(--white)}
.hdr.solid .cartbtn{border-color:var(--grey-2);color:var(--ink)}
.burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.25);color:#fff;font-size:1.1rem}
.hdr.solid .burger{border-color:var(--grey-2);color:var(--ink)}
@media(max-width:1100px){.megagrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:880px){
  .navlink{font-size:1.25rem;color:#fff;opacity:.9}
  .hdr.solid .navlink{color:#fff}
  .navcta{margin-top:.6rem}
  .mega{background:var(--navy);border:0;color:#fff;top:0;bottom:0;overflow:auto;padding:7.4rem 0 3rem}
  .megaback{display:block}
  .megahead{color:rgba(255,255,255,.45)}
  .megagrid{grid-template-columns:1fr 1fr;gap:.5rem}
  .mcat{color:#fff;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);font-size:.8rem;padding:.6rem}
  .mcat .mi{background:rgba(255,255,255,.08);width:30px;height:30px}
  .megafoot{border-color:rgba(255,255,255,.12)}
  .nav{position:fixed;inset:0 0 auto 0;top:0;padding:7.4rem 1.6rem 2rem;background:var(--navy);flex-direction:column;
    align-items:flex-start;gap:1.1rem;font-size:1.25rem;transform:translateY(-102%);transition:transform .5s var(--ease);z-index:-1}
  .nav.open{transform:translateY(0)}
  .nav a,.hdr.solid .nav a{color:#fff;opacity:.9}
  .burger{display:grid;place-items:center}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.6rem;border-radius:999px;font-weight:600;font-size:.92rem;
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:#2d90b6}
.btn-dark{background:var(--ink);color:#fff}
.btn-ghost{border:1px solid var(--grey-2);color:var(--ink)}
.btn-wa{background:#25D366;color:#0a2e17}
.btn-block{width:100%;justify-content:center}

/* ---------- cinema ---------- */
.cinema{position:relative}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--navy)}
.plate{position:absolute;inset:-4% -4% -4% -4%;opacity:0;transition:opacity .9s linear;will-change:opacity,transform}
.plate img,.plate video{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.plate.on{opacity:1}
.shade{position:absolute;inset:0;pointer-events:none;background:rgba(0,0,0,.45)}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 40%,rgba(0,0,0,.55) 100%),
             linear-gradient(to bottom,rgba(0,0,0,.55),transparent 26%,transparent 62%,rgba(5,9,12,.8))}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}

/* time rail */
.rail{position:fixed;right:clamp(.7rem,2vw,1.6rem);top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;color:#fff;opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.rail.on{opacity:1}
.rail .clock{font-size:.7rem;font-weight:600;letter-spacing:.12em;font-variant-numeric:tabular-nums;
  writing-mode:vertical-rl;text-orientation:mixed}
.rail .track{width:2px;height:min(38vh,300px);background:rgba(255,255,255,.22);position:relative;border-radius:2px}
.rail .fill{position:absolute;inset:0 0 auto 0;height:0;background:var(--blue);border-radius:2px}
.rail .fill::after{content:"";position:absolute;left:50%;bottom:0;width:9px;height:9px;border-radius:50%;background:var(--blue);
  transform:translate(-50%,50%);box-shadow:0 0 0 5px rgba(56,164,204,.22)}
.rail .ends{font-size:.6rem;letter-spacing:.14em;opacity:.55}

/* beats */
.beats{position:relative;margin-top:-100svh;z-index:20}
.beat{min-height:100svh;display:flex;align-items:center;padding:9rem 0 6rem;color:#fff}
.beat .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:center}
.beat.right .copy{grid-column:2}
.copy{max-width:34rem}
.copy h2{margin:.9rem 0 1rem}
.copy p{color:rgba(255,255,255,.74);font-size:1.02rem}
.copy .list{margin:1.6rem 0 0;padding:0;list-style:none;display:grid;gap:.7rem}
.copy .list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.93rem;color:rgba(255,255,255,.82)}
.copy .list li svg{flex:none;margin-top:.15rem}
.rise{opacity:0;transform:translateY(20px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rise.in{opacity:1;transform:none}
.rise:nth-child(2){transition-delay:.06s}.rise:nth-child(3){transition-delay:.12s}.rise:nth-child(4){transition-delay:.18s}
@media(max-width:560px){
  .brand img{height:72px}
  .rail .ends{display:none}
  .beat .wrap{padding-right:3rem}
  .rail .track{height:26vh}
  .rail .clock{font-size:.62rem}
  .hero .wrap{padding-right:3.2rem;padding-left:1.4rem}
}
@media(max-width:880px){
  .beat .wrap{grid-template-columns:1fr}
  .beat.right .copy{grid-column:1}
  .beat{padding:6rem 0 2rem;align-items:flex-end;min-height:100svh}
  .prop{display:none}
}

/* hero */
.hero{position:relative;height:100svh;display:grid;place-items:center;text-align:center;color:#fff;z-index:21}
.hero h1{max-width:14ch;margin-inline:auto}
.hero .u{display:block;height:5px;background:var(--blue);width:0;margin:1.1rem auto 0;border-radius:3px;
  transition:width 1.1s var(--ease) .35s}
.hero.in .u{width:min(230px,42vw)}
.hero .sub{margin-top:1.4rem;color:rgba(255,255,255,.72);font-size:1rem}

/* stills over the villa */
.prop{position:absolute;z-index:22;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.prop.on{opacity:1;transform:none}
.shotcard{display:none;margin:0;position:relative;width:min(430px,34vw);border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px -26px rgba(0,0,0,.9)}
.shotcard.on{display:block;animation:popin .55s var(--ease) var(--d,0s) both}
.shotcard img{width:100%;height:100%;object-fit:cover;display:block}
.shotcard figcaption{position:absolute;left:0;right:0;bottom:0;padding:.7rem .9rem;font-size:.78rem;color:rgba(255,255,255,.88);
  background:linear-gradient(transparent,rgba(4,8,11,.8));display:flex;align-items:center;gap:.5rem}
.shotcard figcaption b{color:var(--blue);font-weight:600}
.camfeed{display:none;margin:0;position:relative;width:min(560px,44vw);aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  border:1px solid rgba(56,164,204,.45);box-shadow:0 30px 60px -26px rgba(0,0,0,.92)}
.camfeed.on{display:block;animation:popin .55s var(--ease) var(--d,0s) both}
.camfeed img{width:100%;height:100%;object-fit:cover;filter:saturate(.45) brightness(.85) contrast(1.12) hue-rotate(-8deg)}
.camfeed::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),
             radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(0,0,0,.55) 100%)}
.camfeed .br{position:absolute;width:20px;height:20px;border:2px solid var(--blue);z-index:2}
.camfeed .br:nth-of-type(1){top:12px;left:12px;border-right:0;border-bottom:0}
.camfeed .br:nth-of-type(2){top:12px;right:12px;border-left:0;border-bottom:0}
.camfeed .br:nth-of-type(3){bottom:12px;left:12px;border-right:0;border-top:0}
.camfeed .br:nth-of-type(4){bottom:12px;right:12px;border-left:0;border-top:0}
.camfeed figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:.7rem;
  padding:.65rem .9rem;font-size:.72rem;letter-spacing:.14em;color:rgba(255,255,255,.85);
  background:linear-gradient(transparent,rgba(4,8,11,.75));font-variant-numeric:tabular-nums}
.camfeed .live{display:flex;align-items:center;gap:.4rem;color:#ff6b6b;font-weight:600}
.camfeed .live i{width:8px;height:8px;border-radius:50%;background:#ff5a5a;animation:blink 1.6s steps(2,end) infinite}
.camfeed .cid{color:var(--blue)}
.camfeed .ts{margin-left:auto}
.energy{font-size:clamp(2rem,5vw,3.4rem);font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums;letter-spacing:-.04em}

/* ---------- device popups ---------- */
.hud{position:absolute;bottom:12%;z-index:23;display:flex;flex-direction:column-reverse;gap:.9rem;pointer-events:none}
.hud-l{left:6%;align-items:flex-start}
.hud-r{right:6%;align-items:flex-end}
.hud-t{left:6%;bottom:auto;top:16%;align-items:flex-start;flex-direction:column}
.pop{display:none;align-items:center;gap:1.3rem;padding:1.15rem 1.5rem;border-radius:22px;min-width:430px;color:#fff;
  background:rgba(10,16,21,.6);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(12px);
  box-shadow:0 30px 60px -26px rgba(0,0,0,.92)}
.pop.on{display:flex;animation:popin .55s var(--ease) var(--d,0s) both}
@keyframes popin{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
.pic{flex:none;width:66px;height:66px;border-radius:19px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.8)}
.pic .ic{width:40px;height:40px}
.pop.on .pic{animation:picOn .55s var(--ease) calc(var(--d,0s) + .5s) both}
.pop.on .pic.warm{animation-name:picWarm}
@keyframes picOn{to{background:rgba(56,164,204,.2);color:var(--blue);box-shadow:0 0 0 1px rgba(56,164,204,.35)}}
@keyframes picWarm{to{background:rgba(255,196,110,.18);color:#ffc37a;box-shadow:0 0 30px 4px rgba(255,183,92,.38)}}
.ptx{display:grid;gap:.18rem;line-height:1.25}
.ptx b{font-size:1.2rem;font-weight:600;letter-spacing:-.02em}
.ptx small{font-size:.92rem;color:rgba(255,255,255,.62);display:flex;align-items:center;gap:.45rem}
.tgl{flex:none;margin-left:auto;width:68px;height:36px;border-radius:18px;background:rgba(255,255,255,.18);position:relative}
.tgl i{position:absolute;top:5px;left:5px;width:26px;height:26px;border-radius:50%;background:#fff;display:block}
.pop.on .tgl{animation:swTrack .5s var(--ease) calc(var(--d,0s) + .5s) both}
.pop.on .tgl i{animation:swKnob .5s var(--ease) calc(var(--d,0s) + .5s) both}
@keyframes swTrack{to{background:var(--blue)}}
@keyframes swKnob{to{transform:translateX(32px)}}
.ic *{transform-box:fill-box;transform-origin:center}
.pop.on .rays{animation:rays .5s var(--ease) calc(var(--d,0s) + .55s) both}
@keyframes rays{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.rays{opacity:0}
.pop.on .glass{animation:glassOn .5s var(--ease) calc(var(--d,0s) + .55s) both}
@keyframes glassOn{to{fill:rgba(255,201,120,.55)}}
.pop.on .gl{animation:gateL .8s var(--ease) calc(var(--d,0s) + .5s) both}
.pop.on .gr{animation:gateR .8s var(--ease) calc(var(--d,0s) + .5s) both}
@keyframes gateL{to{transform:translateX(-4px)}}
@keyframes gateR{to{transform:translateX(4px)}}
.pop.on .cl{animation:curtL .9s var(--ease) calc(var(--d,0s) + .5s) both}
.pop.on .cr{animation:curtR .9s var(--ease) calc(var(--d,0s) + .5s) both}
@keyframes curtL{from{transform:translateX(-3px)}to{transform:translateX(4px)}}
@keyframes curtR{from{transform:translateX(3px)}to{transform:translateX(-4px)}}
.pop.on .shk.open{animation:shkOpen .55s var(--ease) calc(var(--d,0s) + .5s) both}
.pop.on .shk.close{animation:shkClose .55s var(--ease) calc(var(--d,0s) + .5s) both}
@keyframes shkOpen{to{transform:translate(3px,-4px) rotate(9deg)}}
@keyframes shkClose{from{transform:translate(3px,-4px) rotate(9deg)}to{transform:none}}
.ripple{opacity:0}
.pop.on .ripple{animation:ripple 1.6s var(--ease) calc(var(--d,0s) + .3s) 2}
@keyframes ripple{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.4)}}
.wv path{opacity:0}
.pop.on .wv path{animation:wave 2s linear calc(var(--d,0s) + .55s) infinite}
.pop.on .wv path:last-child{animation-delay:calc(var(--d,0s) + 1.2s)}
@keyframes wave{0%{opacity:0;transform:translateY(4px)}35%{opacity:1}100%{opacity:0;transform:translateY(-5px)}}
.rec-dot{width:9px;height:9px;border-radius:50%;background:#ff5a5a;display:inline-block;animation:blink 1.6s steps(2,end) infinite}
@keyframes blink{50%{opacity:.15}}
.energypop{min-width:430px}
.energypop .energy{display:flex;align-items:baseline;gap:.45rem;font-size:3rem;font-weight:700;color:var(--blue);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.energypop .unit{font-size:1.15rem;font-weight:500;color:#fff;letter-spacing:normal}
@media(max-width:1280px){
  .pop,.energypop{min-width:360px}
  .pic{width:58px;height:58px;border-radius:17px}
  .pic .ic{width:34px;height:34px}
  .ptx b{font-size:1.05rem}
  .ptx small{font-size:.84rem}
  .energypop .energy{font-size:2.4rem}
}
@media(max-width:880px){
  .hud{bottom:auto;top:8%;left:5%;right:5%;flex-direction:column;align-items:stretch;gap:.6rem}
  .hud-l,.hud-r,.hud-t{left:5%;right:5%;top:8%;align-items:stretch}
  .pop,.energypop{min-width:0;width:min(400px,100%);padding:.85rem 1rem;gap:.85rem;border-radius:18px}
  .camfeed,.shotcard{width:min(400px,100%)}
  .camfeed figcaption{font-size:.62rem;letter-spacing:.1em;padding:.5rem .7rem}
  .shotcard figcaption{font-size:.7rem}
  .pic{width:50px;height:50px;border-radius:15px}
  .pic .ic{width:29px;height:29px}
  .ptx b{font-size:.98rem}
  .ptx small{font-size:.78rem}
  .tgl{width:56px;height:30px}
  .tgl i{width:22px;height:22px}
  .energypop{display:none}
  @keyframes swKnob{to{transform:translateX(26px)}}
}

/* ---------- automation & voice cards ---------- */
.pop.auto,.pop.voice{flex-direction:column;align-items:stretch;gap:.5rem;padding:1.15rem 1.35rem}
.arow{display:flex;align-items:center;gap:1.2rem}
.link{display:block;width:2px;height:22px;margin-left:32px;background:rgba(255,255,255,.16);border-radius:2px;overflow:hidden}
.link i{display:block;width:100%;height:0;background:var(--blue)}
.pop.on .link i{animation:linkdraw .45s var(--ease) calc(var(--d,0s) + .45s) both}
@keyframes linkdraw{to{height:100%}}
.trig{margin-left:auto;flex:none;font-size:.66rem;font-weight:600;letter-spacing:.14em;color:var(--blue);
  border:1px solid var(--blue-line);border-radius:7px;padding:.25rem .55rem;opacity:0}
.pop.on .trig{animation:trig .5s var(--ease) calc(var(--d,0s) + .3s) both}
@keyframes trig{0%{opacity:0;transform:scale(.85)}40%{opacity:1;background:rgba(56,164,204,.28)}100%{opacity:1;background:transparent;transform:none}}
.arcs path{opacity:0}
.pop.on .arcs path{animation:mo 1.8s var(--ease) calc(var(--d,0s) + .35s) infinite}
.pop.on .arcs path:last-child{animation-delay:calc(var(--d,0s) + .65s)}
@keyframes mo{0%{opacity:0;transform:translateY(3px) scale(.9)}40%{opacity:1}100%{opacity:0;transform:translateY(-2px) scale(1.05)}}
.pop.auto.on .arow:first-child .pic{animation-delay:calc(var(--d,0s) + .25s)}
.pop.auto.on .arow:last-child .pic{animation-delay:calc(var(--d,0s) + .95s)}
.pop.auto.on .rays,.pop.auto.on .glass{animation-delay:calc(var(--d,0s) + 1s)}
.pop.auto.on .tgl,.pop.auto.on .tgl i{animation-delay:calc(var(--d,0s) + .95s)}
.wave{display:flex;align-items:center;gap:3px;height:30px;margin-left:auto;flex:none}
.wave i{width:3px;height:9px;border-radius:2px;background:var(--blue);display:block}
.pop.on .wave i{animation:wv 1.1s ease-in-out calc(var(--d,0s) + .3s) infinite}
.pop.on .wave i:nth-child(2){animation-delay:calc(var(--d,0s) + .40s)}
.pop.on .wave i:nth-child(3){animation-delay:calc(var(--d,0s) + .50s)}
.pop.on .wave i:nth-child(4){animation-delay:calc(var(--d,0s) + .35s)}
.pop.on .wave i:nth-child(5){animation-delay:calc(var(--d,0s) + .55s)}
.pop.on .wave i:nth-child(6){animation-delay:calc(var(--d,0s) + .45s)}
.pop.on .wave i:nth-child(7){animation-delay:calc(var(--d,0s) + .60s)}
@keyframes wv{0%,100%{height:9px;opacity:.5}50%{height:26px;opacity:1}}
.vsplit{height:1px;background:rgba(255,255,255,.12);margin:.15rem 0}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem;font-size:.9rem;color:rgba(255,255,255,.82)}
.vgrid span{display:flex;align-items:center;gap:.5rem;opacity:0}
.vgrid svg{flex:none;color:var(--blue)}
.pop.voice.on .vgrid span{animation:popin .45s var(--ease) both}
.pop.voice.on .vgrid span:nth-child(1){animation-delay:calc(var(--d,0s) + .65s)}
.pop.voice.on .vgrid span:nth-child(2){animation-delay:calc(var(--d,0s) + .8s)}
.pop.voice.on .vgrid span:nth-child(3){animation-delay:calc(var(--d,0s) + .95s)}
.pop.voice.on .vgrid span:nth-child(4){animation-delay:calc(var(--d,0s) + 1.1s)}
.said{font-style:italic}
@media(max-width:880px){
  .pop.auto,.pop.voice{padding:.85rem 1rem}
  .arow{gap:.85rem}
  .link{margin-left:24px;height:16px}
  .vgrid{font-size:.78rem;gap:.4rem .6rem}
}

/* ---------- category grid ---------- */
.catgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.cat{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;justify-items:center;align-content:start;gap:.55rem;text-align:center;
  padding:1.9rem 1rem 1.6rem;border:1px solid var(--grey-2);border-radius:20px;background:#fff;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.cat::before{content:"";position:absolute;inset:auto -30% -70% -30%;height:130%;border-radius:50%;
  background:radial-gradient(circle,rgba(56,164,204,.16),transparent 62%);opacity:0;transform:translateY(30%);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.cat:hover{transform:translateY(-7px);border-color:rgba(56,164,204,.55);box-shadow:0 26px 48px -26px rgba(11,17,22,.42)}
.cat:hover::before{opacity:1;transform:translateY(0)}
.cat-ic{grid-row:1;position:relative;width:72px;height:72px;border-radius:22px;display:grid;place-items:center;
  background:var(--grey-3);color:var(--blue);
  transition:background .4s var(--ease),color .4s var(--ease),transform .5s var(--ease),box-shadow .4s var(--ease)}
.cat-ic svg{width:38px;height:38px}
.cat:hover .cat-ic{background:var(--blue);color:#fff;transform:translateY(-4px) scale(1.06);
  box-shadow:0 16px 30px -14px rgba(56,164,204,.85)}
.cat-n{grid-row:2;position:relative;font-weight:600;font-size:.95rem;letter-spacing:-.01em;line-height:1.25}
.cat-c{grid-row:3;grid-column:1;position:relative;font-size:.72rem;color:var(--grey);transition:opacity .3s var(--ease)}
.cat-go{grid-row:3;grid-column:1;position:relative;font-size:.78rem;font-weight:600;color:var(--blue);opacity:0;transform:translateY(-6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.cat:hover .cat-go{opacity:1;transform:none}
.cat:hover .cat-c{opacity:0}
@media(max-width:1100px){.catgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:820px){
  .catgrid{grid-template-columns:repeat(3,1fr);gap:.75rem}
  .cat{padding:1.4rem .7rem 1.2rem}
  .cat-ic{width:60px;height:60px;border-radius:18px}
  .cat-ic svg{width:31px;height:31px}
  .cat-n{font-size:.86rem}
}
@media(max-width:520px){.catgrid{grid-template-columns:repeat(2,1fr)}}

/* ---------- sections, modal, footer ---------- */
.sec{padding:clamp(4rem,9vw,7.5rem) 0}
.sec.tint{background:var(--grey-3)}
.sec-head{max-width:44rem;margin-bottom:2.6rem}
.sec-head h2{margin:.8rem 0 .9rem}
.sec-head p{color:var(--grey)}
.hand{background:#fff;position:relative;z-index:22}
.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .85rem;border-radius:999px;border:1px solid var(--grey-2);
  font-size:.75rem;color:var(--grey)}
.scrim{position:fixed;inset:0;background:rgba(6,10,13,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease);z-index:80}
.scrim.on{opacity:1;pointer-events:auto}
.modal{position:fixed;inset:0;z-index:85;display:grid;place-items:center;padding:1.2rem;opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease)}
.modal.on{opacity:1;pointer-events:auto}
.modal-in{position:relative;width:min(430px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:22px;
  padding:1.8rem;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);transform:translateY(16px) scale(.97);
  transition:transform .4s var(--ease)}
.modal.on .modal-in{transform:none}
.modal-x{position:absolute;top:.9rem;right:1.1rem;font-size:1.5rem;line-height:1;color:var(--grey)}
.field{display:grid;gap:.3rem;font-size:.78rem;color:var(--grey)}
.field input,.field select{padding:.7rem .8rem;border:1px solid var(--grey-2);border-radius:10px;font:inherit;font-size:.9rem;color:var(--ink);background:#fff}
.foot{background:var(--navy);color:#fff;padding:clamp(3.5rem,7vw,6rem) 0 2.5rem}
.foot .top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2.5rem}
.foot h4{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:1rem;font-weight:600}
.foot a{color:rgba(255,255,255,.75);font-size:.9rem;display:block;padding:.22rem 0}
.foot a:hover{color:#fff}
.foot .logo{height:108px;width:auto;margin-bottom:1.2rem}
.contacts{display:grid;gap:.7rem;margin:1.4rem 0}
.contacts a{display:flex;align-items:center;gap:.7rem;font-size:.92rem;color:#fff}
.contacts svg{flex:none}
.legal{margin-top:3rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-size:.78rem;color:rgba(255,255,255,.5)}
@media(max-width:760px){.foot .top{grid-template-columns:1fr;gap:2rem}}

/* ---------- reduced motion: a real static page ---------- */
@media(prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  .stage .prop,.stage .hud{display:none}
  .rail{display:none}
  .stage{position:relative;height:70svh}
  .beats{margin-top:0}
  .beat{min-height:0;padding:3.5rem 0;background:var(--navy)}
  .beat:nth-child(odd){background:var(--navy-2)}
  .hero{height:auto;padding:8rem 0 4rem;background:var(--navy)}
  .hero .u{width:min(230px,42vw);transition:none}
  .plate{position:relative;inset:auto;transition:none}
  .plate:not(.static-keep){display:none}
  .plate.static-keep{opacity:1}
}

/* --- overrides for the parent theme's inline customizer CSS --- */
body.sh-landing{max-width:none;width:auto;margin:0}
.shx .hero h1,.shx .beat h2,.shx .beat h3,.shx .copy h2{color:#fff}
.shx .sec h2,.shx .sec-head h2{color:var(--ink)}
.shx .foot h4,.shx .foot a,.shx .contacts a{color:inherit}
.shx .foot h2,.shx .foot h3{color:#fff}
.shx .cat-n,.shx .mcat{color:var(--ink)}
@media(max-width:880px){.shx .mcat{color:#fff}}
.shx .ptx b,.shx .ptx small,.shx .vgrid span{color:inherit}
.shx .pop .ptx b{color:#fff}
.shx a{box-shadow:none}
.shx button{border-radius:999px}

/* button variants beat the .shx button reset */
.shx button.btn-blue{background:var(--blue);color:#fff}
.shx button.btn-blue:hover{background:#2d90b6}
.shx button.btn-dark{background:var(--ink);color:#fff}
.shx button.btn-wa{background:#25D366;color:#0a2e17}
.shx button.btn-ghost{border:1px solid var(--grey-2);color:var(--ink)}

.shx #videoplate{opacity:0}
.shx #videoplate video{width:100%;height:100%;object-fit:cover;display:block}

/* header alignment + flatsome leftovers */
.shx .hdr>.wrap{width:min(100% - 3rem,1400px)}
.shx .nav{margin-left:auto}
.shx .navcta{margin-left:.5rem}
body.sh-landing #main-menu,body.sh-landing .mobile-sidebar,
body.sh-landing #wrapper>.footer-wrapper,body.sh-landing .absolute-footer{display:none !important}
@media (max-width:880px){.shx .nav{margin-left:0}.shx .hdr>.wrap{width:min(100% - 2rem,1400px)}}

/* logo swap + boxed guard */
body.sh-landing .hdr,body.sh-landing header.hdr{max-width:none !important;width:auto !important}
.shx .brand .lgt{display:none;position:static;opacity:1}
.shx .hdr.solid .brand .drk,.shx .hdr.menuopen .brand .drk{display:none}
.shx .hdr.solid .brand .lgt,.shx .hdr.menuopen .brand .lgt{display:block;opacity:1;position:static}

/* nav cta stays a button, not a nav link */
.shx .nav a.navcta,.shx .hdr.solid .nav a.navcta,.shx .hdr.menuopen .nav a.navcta{color:#fff;opacity:1}
.shx .nav a.navcta::after{display:none}
.shx .nav a.navcta:hover{color:#fff;opacity:1}

/* admin bar offset */
body.admin-bar .shx .hdr{top:32px}
@media screen and (max-width:782px){body.admin-bar .shx .hdr{top:46px}}

/* menu + grid tuning */
/* the .shx button reset was stealing the nav colour, so state it on the element */
.shx button.navlink,.shx .hdr .nav button.navlink{color:#fff;opacity:.9}
.shx .hdr.solid button.navlink{color:var(--ink);opacity:.8}
.shx .hdr.menuopen button.navlink{color:var(--ink);opacity:.8}
.shx button.navlink:hover,.shx .hdr.solid button.navlink:hover{opacity:1}
/* bigger menu type */
.shx .nav{font-size:1.02rem;gap:1.9rem}
.shx .nav a,.shx .navlink{font-size:1.02rem;font-weight:500}
/* the shop-now pill has to carry the bar */
.shx .navcta,.shx .nav a.navcta{padding:1rem 2.15rem;font-size:1.05rem;font-weight:600;border-radius:999px}
/* products dropdown: bigger category type */
.shx .mcat{font-size:1rem;padding:.72rem .85rem;gap:.8rem}
.shx .mcat .mi{width:40px;height:40px;border-radius:12px}
.shx .mcat .mi svg{width:22px;height:22px}
.shx .megahead{font-size:.78rem}
/* eight categories to a row */
.shx .catgrid{grid-template-columns:repeat(8,minmax(0,1fr));gap:.6rem}
.shx .cat{padding:1.3rem .5rem 1.1rem;gap:.4rem;border-radius:16px}
.shx .cat-ic{width:54px;height:54px;border-radius:16px}
.shx .cat-ic svg{width:29px;height:29px}
.shx .cat-n{font-size:.78rem;line-height:1.2;hyphens:auto}
.shx .cat-c{font-size:.66rem}
.shx .cat-go{font-size:.68rem}
@media (max-width:1180px){.shx .catgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:900px){.shx .catgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.shx .catgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:420px){.shx .catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:880px){.shx .nav{font-size:1.25rem}.shx .nav a,.shx .navlink{font-size:1.25rem}
  .shx .navcta,.shx .nav a.navcta{font-size:1.05rem;padding:.9rem 1.9rem}
  .shx button.navlink,.shx .hdr.solid button.navlink,.shx .hdr.menuopen button.navlink{color:#fff;opacity:.9}}

/* the shade and vignette sit above every plate */
.shx .shade{z-index:5}
.shx .vignette{z-index:6}
.shx .grain{z-index:7}

/* phone mockup + bigger beat copy + wide category grid */
/* the feature copy was reading small against full-bleed imagery */
.shx .copy p{font-size:1.18rem;line-height:1.62}
.shx .copy .list li{font-size:1.05rem;line-height:1.55}
.shx .copy .list li svg{width:19px;height:19px;margin-top:.25rem}
.shx .copy .list{gap:.85rem;margin-top:1.8rem}
.shx .beat .eyebrow{font-size:.82rem;letter-spacing:.2em}
.shx .copy{max-width:38rem}
@media (max-width:880px){.shx .copy p{font-size:1.06rem}.shx .copy .list li{font-size:.98rem}}

/* phone mockup, ported from the prototype */
.shx .phonewrap{opacity:1;justify-self:center}
.shx .phone{width:min(250px,52vw);aspect-ratio:9/19;border-radius:30px;background:var(--navy-2);
  border:1px solid rgba(255,255,255,.18);box-shadow:0 40px 80px -30px rgba(0,0,0,.9);
  padding:.75rem;display:grid;gap:.5rem;align-content:stretch}
.shx .phone .bar{height:26px;border-radius:9px;background:rgba(255,255,255,.06);display:flex;
  align-items:center;padding:0 .6rem;font-size:.62rem;color:rgba(255,255,255,.6);justify-content:space-between}
.shx .phone .tiles{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.shx .phone .tile{aspect-ratio:1;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);display:grid;place-items:center;gap:.3rem;
  font-size:.58rem;line-height:1.25;color:rgba(255,255,255,.55);text-align:center;padding:.3rem}
.shx .phone .tile svg{color:rgba(255,255,255,.5)}
.shx .phone .tile.on{background:var(--blue-dim);border-color:var(--blue-line);color:#cfeaf5}
.shx .phone .tile.on svg{color:var(--blue)}
.shx .phone .scenes{display:flex;gap:.35rem;margin-top:.15rem}
.shx .phone .scene{flex:1;text-align:center;font-size:.56rem;padding:.35rem .2rem;border-radius:8px;
  color:rgba(255,255,255,.5);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.shx .phone .scene.on{background:var(--blue);border-color:var(--blue);color:#04222e;font-weight:600}
@media (max-width:880px){.shx .phonewrap{display:none}}

/* category section runs full width */
.shx .sec.hand > .wrap{width:min(100% - 4rem,1720px)}
.shx .sec.hand .sec-head{max-width:44rem}
.shx .catgrid{grid-template-columns:repeat(8,minmax(0,1fr));gap:1rem}
.shx .cat{padding:2rem 1rem 1.7rem;gap:.6rem;border-radius:20px}
.shx .cat-ic{width:76px;height:76px;border-radius:22px}
.shx .cat-ic svg{width:40px;height:40px}
.shx .cat-n{font-size:1rem;line-height:1.28}
.shx .cat-c{font-size:.78rem}
.shx .cat-go{font-size:.82rem}
@media (max-width:1500px){.shx .catgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:1100px){.shx .catgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .shx .cat-ic{width:66px;height:66px}.shx .cat-ic svg{width:34px;height:34px}}
@media (max-width:700px){.shx .catgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
  .shx .cat{padding:1.4rem .6rem 1.2rem}.shx .cat-n{font-size:.86rem}}
@media (max-width:440px){.shx .catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the copy is forced into column 2 on .right beats, so pin the phone opposite it */
.shx .beat.right .phonewrap{grid-column:1;grid-row:1}

/* phone vs voice-card collision: the HUD is absolute over column 1, so give the
   phone the inner edge of that column and trim the card to leave it room. */
.shx .hud-t .pop{min-width:0;width:min(370px,30vw)}
.shx .beat.right .phonewrap{grid-column:1;grid-row:1;justify-self:end;align-self:center}
.shx .beat.right .phone{width:min(220px,17vw)}
@media (max-width:1099px){.shx .beat.right .phonewrap{display:none}
  .shx .hud-t .pop{width:min(430px,72vw)}}

/* cart icon + tighter category section */
/* .shx a{color:inherit} out-specifies .cartbtn, so state it on the element */
.shx a.cartbtn{color:#fff}
.shx .hdr.solid a.cartbtn,.shx .hdr.menuopen a.cartbtn{color:var(--ink)}
.shx a.cartbtn svg{color:inherit}
.shx .sec.hand{padding:4rem 0 4.5rem}
.shx .sec.hand .sec-head{margin-bottom:2rem}
@media (max-width:880px){.shx .sec.hand{padding:3rem 0 3.25rem}}

/* full-width footer */
.shx .foot > .wrap,.shx .ctaband > .wrap{width:min(100% - 4rem,1720px)}
.shx .foot .top{grid-template-columns:1.7fr 1fr 1fr;gap:3.5rem}
@media (max-width:900px){.shx .foot .top{grid-template-columns:1fr 1fr;gap:2.2rem}}
@media (max-width:600px){.shx .foot .top{grid-template-columns:1fr;gap:2rem}}

/* four-column footer + social cards */
.shx .foot .top{grid-template-columns:1.35fr .85fr .85fr 1.25fr;gap:3rem}
@media (max-width:1180px){.shx .foot .top{grid-template-columns:1fr 1fr;gap:2.6rem}}
@media (max-width:640px){.shx .foot .top{grid-template-columns:1fr;gap:2.2rem}}
.shx .fcol h4{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:1rem;font-weight:600}
.shx .fcol > a{color:rgba(255,255,255,.75);font-size:.94rem;display:block;padding:.28rem 0;
  transition:color .25s var(--ease)}
.shx .fcol > a:hover{color:#fff}
.shx .fcol-brand .logo{height:104px;width:auto;margin-bottom:1.1rem}
.shx .ftag{color:#fff;font-size:1.12rem;font-weight:600;letter-spacing:-.02em;margin:0 0 .55rem}
.shx .fblurb{color:rgba(255,255,255,.62);font-size:.92rem;line-height:1.6;max-width:22rem;margin:0}

/* social cards */
.shx .fcol-social{display:flex;flex-direction:column;gap:.6rem}
.shx .fcol-social h4{margin-bottom:.35rem}
.shx a.scard{display:flex;align-items:center;gap:.9rem;padding:.72rem .85rem;border-radius:16px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);color:#fff;
  transition:background .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease)}
.shx a.scard:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.24);transform:translateY(-2px)}
.shx .sic{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff}
.shx .sic-wa{background:#25D366}
.shx .sic-ig{background:linear-gradient(45deg,#f9ce34 0%,#ee2a7b 45%,#6228d7 100%)}
.shx .sic-fb{background:#1877F2}
.shx .sic-mail{background:var(--blue)}
.shx .stx{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.shx .stx strong{font-size:1rem;font-weight:600;color:#fff;letter-spacing:-.01em}
.shx .stx em{font-style:normal;font-size:.85rem;color:rgba(255,255,255,.58);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the scroll timeline: readable, not decorative */
.shx .rail{gap:.95rem;right:clamp(.9rem,2.2vw,2rem)}
/* the chat plugin parks its bubble at middle-right, straight through the timeline.
   Move it to the corner on our templates only. */
body.sh-landing .qlwapp__container--middle-right{top:auto !important;bottom:1.5rem !important}

.shx .rail .clock{font-size:1rem;font-weight:700;letter-spacing:.1em;
  text-shadow:0 2px 10px rgba(0,0,0,.75)}
.shx .rail .track{width:4px;height:min(46vh,400px);background:rgba(255,255,255,.3);border-radius:4px;
  box-shadow:0 2px 12px rgba(0,0,0,.45)}
.shx .rail .fill{border-radius:4px}
.shx .rail .fill::after{width:13px;height:13px;box-shadow:0 0 0 6px rgba(56,164,204,.26),0 2px 10px rgba(0,0,0,.5)}
.shx .rail .ends{font-size:.78rem;font-weight:600;letter-spacing:.1em;opacity:.7;
  text-shadow:0 2px 10px rgba(0,0,0,.75)}

/* social cards: sized to sit beside the logo block */
.shx .fcol-social{gap:.45rem}
.shx a.scard{gap:.7rem;padding:.5rem .75rem;border-radius:12px}
.shx .sic{width:34px;height:34px;border-radius:10px}
.shx .sic svg{width:18px;height:18px}
.shx .stx strong{font-size:.88rem}
.shx .stx em{font-size:.76rem}

.shx a.scard{padding:.45rem .7rem}
.shx .stx{line-height:1.35;gap:0}
.shx .stx strong{line-height:1.3}
.shx .stx em{line-height:1.3}

/* menu type dialled back */
.shx .nav{font-size:.94rem;gap:1.7rem}
.shx .nav a,.shx .navlink{font-size:.94rem}
.shx .navcta,.shx .nav a.navcta{padding:.85rem 1.8rem;font-size:.94rem}
.shx .mcat{font-size:.94rem}
@media (max-width:880px){.shx .nav{font-size:1.15rem}
  .shx .nav a,.shx .navlink{font-size:1.15rem}
  .shx .navcta,.shx .nav a.navcta{font-size:.98rem;padding:.8rem 1.7rem}}

/* dark header, matching the footer. Every rule needs the element in the
   selector or the .shx a/button colour resets win. */
.shx .hdr.solid{background:rgba(11,17,22,.94);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.shx .hdr.menuopen{background:var(--navy)}
/* the reversed logo stays on, in every header state */
.shx .hdr .brand .drk,.shx .hdr.solid .brand .drk,.shx .hdr.menuopen .brand .drk{display:block;opacity:1;position:static}
.shx .hdr .brand .lgt,.shx .hdr.solid .brand .lgt,.shx .hdr.menuopen .brand .lgt{display:none}
/* nav */
.shx .hdr.solid .nav a,.shx .hdr.menuopen .nav a{color:#fff;opacity:.85}
.shx .hdr.solid .nav a:hover,.shx .hdr.menuopen .nav a:hover{opacity:1}
.shx .hdr.solid button.navlink,.shx .hdr.menuopen button.navlink{color:#fff;opacity:.85}
.shx .hdr.solid button.navlink:hover,.shx .hdr.menuopen button.navlink:hover{opacity:1}
.shx .hdr.solid .nav a.navcta,.shx .hdr.menuopen .nav a.navcta{color:#fff;opacity:1}
/* cart and burger */
.shx .hdr.solid a.cartbtn,.shx .hdr.menuopen a.cartbtn{color:#fff;border-color:rgba(255,255,255,.28)}
.shx .hdr.solid .burger,.shx .hdr.menuopen .burger{color:#fff;border-color:rgba(255,255,255,.28)}
/* products dropdown */
.shx .mega{background:var(--navy);border-top:1px solid rgba(255,255,255,.1);
  box-shadow:0 26px 50px -30px rgba(0,0,0,.85)}
.shx .megahead{color:rgba(255,255,255,.45)}
.shx a.mcat{color:#fff;border-color:transparent}
.shx a.mcat:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.shx .mcat .mi{background:rgba(255,255,255,.08);color:var(--blue)}
.shx a.mcat:hover .mi{background:var(--blue);color:#fff}
.shx .megafoot{border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.55)}
.shx .megafoot a{color:var(--blue)}
.shx .megaback{color:#fff}

/* burger: bigger, and white in every header state.
   `.shx button{color:inherit}` out-specifies a bare `.burger`, which is why the
   landing burger was rendering dark over the hero. Name the element. */
.shx button.burger{width:50px;height:50px;font-size:1.6rem;line-height:1;
  color:#fff;border-color:rgba(255,255,255,.32)}
.shx .hdr.solid button.burger,.shx .hdr.menuopen button.burger,
.shx .shophdr button.burger{color:#fff;border-color:rgba(255,255,255,.32)}
@media (max-width:880px){.shx button.burger{width:52px;height:52px;font-size:1.7rem}}

/* mobile header breathing room (landing page has no search field) */
@media (max-width:880px){
  .shx .hdr{padding:.95rem 0}
  .shx .hdr>.wrap{width:min(100% - 2.5rem,1400px)}
}

/* no CTA in the mobile panel */
@media (max-width:880px){
  .shx .nav .navcta,.shx .nav a.navcta,.shx .nav button.navcta{display:none}
}

/* the open panel needs a visible bottom edge: without the CTA it is short, and
   on the category page it ran straight into the navy tile grid below it. */
@media (max-width:880px){
  .shx .nav{border-bottom:1px solid rgba(255,255,255,.14);
    box-shadow:0 26px 44px -18px rgba(0,0,0,.85);padding-bottom:2.4rem}
}

/* no backdrop-filter on the header.
   backdrop-filter makes an element a containing block for position:fixed
   descendants, so .mega and .nav were resolving top/bottom against the header
   instead of the viewport. On mobile that left the Products panel a short strip
   tucked behind the header bar, which read as the menu vanishing.
   The header is opaque navy now, so the blur was buying nothing. */
.shx .hdr,.shx .hdr.solid,.shx .hdr.menuopen,.shx .hdr.navopen{backdrop-filter:none;-webkit-backdrop-filter:none}
.shx .hdr.solid{background:var(--navy)}

/* mega panel has to clear the header row: the header is ~172px tall on a phone
   once the logo and search row are in, and the old 7.4rem padding put the
   back link behind the logo. */
@media (max-width:880px){
  .shx .mega{padding-top:11.5rem}
  .shx .nav{padding-top:11.5rem}
}