/* =========================================================================
   SAFE POINT INTERNATIONAL — PREMIUM LAYER
   Loaded after the Customizer design system. Motion, depth and finish.
   ========================================================================= */

:root{
  --sp-e-out: cubic-bezier(.16,1,.3,1);
  --sp-e-io : cubic-bezier(.76,0,.24,1);
  --sp-e-spr: cubic-bezier(.34,1.56,.64,1);
  --sp-rv-d : .95s;
  --sp-brass-lo:#E7C67F;
  --sp-glass: rgba(255,255,255,.055);
}

/* Smooth anchor scrolling + room for the sticky header */
html{ scroll-behavior:smooth }
[id]{ scroll-margin-top:96px }

::selection{ background:var(--sp-brass); color:#0B1C2C }

/* Refined scrollbar (WebKit) */
html::-webkit-scrollbar{ width:11px }
html::-webkit-scrollbar-track{ background:#0B1C2C }
html::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--sp-brass),var(--sp-brass-dk)); border-radius:99px; border:3px solid #0B1C2C }
html::-webkit-scrollbar-thumb:hover{ background:var(--sp-brass-lo) }

/* Visible, on-brand focus for keyboard users */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.sp-btn:focus-visible{
  outline:2px solid var(--sp-brass); outline-offset:3px; border-radius:2px
}

/* =========================================================================
   1. CROSS-DOCUMENT VIEW TRANSITIONS  (Chromium) — pages cross-dissolve
   ========================================================================= */
@view-transition{ navigation:auto }
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation:sp-vt-out .38s var(--sp-e-io) both }
  ::view-transition-new(root){ animation:sp-vt-in  .52s var(--sp-e-out) both }
}
@keyframes sp-vt-out{ to{ opacity:0; transform:scale(.992) } }
@keyframes sp-vt-in { from{ opacity:0; transform:translateY(14px) } }

/* =========================================================================
   2. FILM GRAIN + VIGNETTE — the thing that makes photography feel printed
   ========================================================================= */
body::after{
  content:""; position:fixed; inset:-120px; z-index:2147483000; 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='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change:transform;
}
@media (prefers-reduced-motion: no-preference){
  body::after{ animation:sp-grain 8s steps(10) infinite }
}
@keyframes sp-grain{
  0%,100%{transform:translate(0,0)}    10%{transform:translate(-4%,-3%)}
  20%{transform:translate(-8%,3%)}     30%{transform:translate(4%,-6%)}
  40%{transform:translate(-4%,6%)}     50%{transform:translate(-8%,3%)}
  60%{transform:translate(6%,0)}       70%{transform:translate(0,6%)}
  80%{transform:translate(3%,-3%)}     90%{transform:translate(-6%,4%)}
}

/* =========================================================================
   3. SCROLL PROGRESS — pure CSS scroll-timeline, JS fallback
   ========================================================================= */
#sp-prog{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:2147482000;
  transform-origin:0 50%; transform:scaleX(var(--sp-p,0)); pointer-events:none;
  background:linear-gradient(90deg,var(--sp-brass-dk),var(--sp-brass),var(--sp-brass-lo));
  box-shadow:0 0 14px rgba(201,154,69,.55);
}
body.admin-bar #sp-prog{ top:32px }
@supports (animation-timeline: scroll()){
  #sp-prog{ animation:sp-prog linear both; animation-timeline:scroll(root block) }
  @keyframes sp-prog{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
}

/* =========================================================================
   4. BRAND PRELOADER — shield draws, wordmark rises, curtain splits
   ========================================================================= */
#sp-load{
  position:fixed; inset:0; z-index:2147483600; display:grid; place-items:center;
  background:var(--sp-navy); opacity:0; visibility:hidden; pointer-events:none;
}
html.sp-loading{ overflow:hidden }
html.sp-loading #sp-load{ opacity:1; visibility:visible; pointer-events:auto }
#sp-load .sp-load-in{ display:flex; flex-direction:column; align-items:center; gap:20px }
#sp-load svg{ width:74px; height:auto; overflow:visible }
#sp-load svg path{
  fill:none; stroke:var(--sp-brass); stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600);
  animation:sp-draw 1.05s var(--sp-e-io) .05s forwards;
}
@keyframes sp-draw{ to{ stroke-dashoffset:0 } }
#sp-load b{
  font-family:var(--sp-display); font-weight:800; letter-spacing:.42em; text-indent:.42em;
  font-size:.78rem; color:#fff; text-transform:uppercase; overflow:hidden; display:block;
}
#sp-load b span{ display:inline-block; transform:translateY(120%); animation:sp-up .7s var(--sp-e-out) forwards }
@keyframes sp-up{ to{ transform:none } }
#sp-load .sp-load-bar{ width:150px; height:1px; background:rgba(255,255,255,.16); overflow:hidden }
#sp-load .sp-load-bar i{ display:block; height:100%; width:100%; background:var(--sp-brass); transform:scaleX(var(--lp,0)); transform-origin:0 50%; transition:transform .35s linear }
#sp-load::before,#sp-load::after{ content:""; position:absolute; left:0; right:0; height:50%; background:var(--sp-navy); transition:transform .78s var(--sp-e-io) }
#sp-load::before{ top:0 } #sp-load::after{ bottom:0 }
html.sp-lift #sp-load .sp-load-in{ opacity:0; transition:opacity .3s ease }
html.sp-lift #sp-load::before{ transform:translateY(-101%) }
html.sp-lift #sp-load::after { transform:translateY(101%) }

/* =========================================================================
   5. CUSTOM CURSOR — dot + lagging ring, grows on interactive elements
   ========================================================================= */
#sp-cur,#sp-ring{ position:fixed; top:0; left:0; z-index:2147483500; pointer-events:none; border-radius:50%;
  opacity:0; transition:opacity .3s ease, width .3s var(--sp-e-out), height .3s var(--sp-e-out), background .3s ease, border-color .3s ease }
#sp-cur{ width:6px; height:6px; background:var(--sp-brass); margin:-3px 0 0 -3px }
#sp-ring{ width:34px; height:34px; border:1px solid rgba(201,154,69,.75); margin:-17px 0 0 -17px; backdrop-filter:invert(4%) }
html.sp-cur-on #sp-cur,html.sp-cur-on #sp-ring{ opacity:1 }
html.sp-cur-on, html.sp-cur-on a, html.sp-cur-on button, html.sp-cur-on .sp-btn,
html.sp-cur-on .sp-catcard, html.sp-cur-on li.product, html.sp-cur-on .sp-card{ cursor:none }
html.sp-cur-hot #sp-ring{ width:62px; height:62px; margin:-31px 0 0 -31px; border-color:var(--sp-brass); background:rgba(201,154,69,.1) }
html.sp-cur-hot #sp-cur{ width:3px; height:3px; margin:-1.5px 0 0 -1.5px }
html.sp-cur-down #sp-ring{ width:24px; height:24px; margin:-12px 0 0 -12px }
input,textarea,select{ cursor:auto !important }

/* =========================================================================
   6. SCROLL REVEAL — the workhorse
   ========================================================================= */
[data-rv]{
  opacity:0; will-change:opacity, transform, filter;
  transition:opacity var(--sp-rv-d) var(--sp-e-out), transform var(--sp-rv-d) var(--sp-e-out), filter var(--sp-rv-d) var(--sp-e-out);
  transition-delay:calc(var(--i,0) * 85ms);
}
[data-rv="up"]   { transform:translate3d(0,34px,0); filter:blur(5px) }
[data-rv="fade"] { filter:blur(4px) }
[data-rv="left"] { transform:translate3d(-40px,0,0) }
[data-rv="right"]{ transform:translate3d(40px,0,0) }
[data-rv="zoom"] { transform:scale(.94); filter:blur(5px) }
[data-rv="clip"] { clip-path:inset(0 0 100% 0); transform:translate3d(0,24px,0) }
[data-rv].is-in{ opacity:1; transform:none; filter:none; clip-path:inset(0 0 0 0) }

/* Photographic reveal: a brass edge wipes the image open */
.sp-mask{ position:relative; overflow:hidden; display:block }
.sp-mask > img{ transform:scale(1.14); transition:transform 1.5s var(--sp-e-out) }
.sp-mask::after{
  content:""; position:absolute; inset:0; background:var(--sp-navy);
  transform-origin:0 50%; transition:transform 1.05s var(--sp-e-io);
}
.sp-mask.is-in > img{ transform:none }
.sp-mask.is-in::after{ transform:scaleX(0); transform-origin:100% 50% }

/* =========================================================================
   7. SPLIT-TEXT HEADLINES — words rise out of a mask, line by line
   ========================================================================= */
.sp-split{ display:block }
.sp-split .sp-w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em }
.sp-split .sp-w > span{
  display:inline-block; transform:translate3d(0,110%,0) rotate(3deg); opacity:.001;
  transition:transform 1.05s var(--sp-e-out), opacity .8s var(--sp-e-out);
  transition-delay:calc(var(--w,0) * 42ms);
}
.sp-split.is-in .sp-w > span{ transform:none; opacity:1 }

/* =========================================================================
   8. BUTTONS — magnetic pull, metal sheen, arrow travel
   ========================================================================= */
.sp-btn{
  position:relative; overflow:hidden; isolation:isolate;
  transform:translate3d(var(--mx,0px),var(--my,0px),0);
  transition:transform .45s var(--sp-e-out), background-color .3s ease, color .3s ease, box-shadow .4s ease, border-color .3s ease;
}
.sp-btn::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(120px circle at var(--px,50%) var(--py,50%), rgba(255,255,255,.28), transparent 65%);
  transition:opacity .35s ease;
}
.sp-btn:hover::before{ opacity:1 }
.sp-btn::after{
  content:""; position:absolute; top:0; bottom:0; left:-140%; width:55%; z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg); transition:left .85s var(--sp-e-out);
}
.sp-btn:hover::after{ left:150% }
.sp-btn:hover{ box-shadow:0 14px 34px -14px rgba(201,154,69,.65) }
.sp-btn:active{ transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(.975) }

/* Text links get a sweeping rule instead of a static underline */
.sp-page p a:not(.sp-btn), .sp-page li a:not(.sp-btn){
  background-image:linear-gradient(var(--sp-brass),var(--sp-brass));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .45s var(--sp-e-out), color .3s ease; text-decoration:none;
}
.sp-page p a:not(.sp-btn):hover, .sp-page li a:not(.sp-btn):hover{ background-size:100% 1px }

/* =========================================================================
   9. CARDS — 3D tilt, cursor spotlight, glare, gradient hairline
   ========================================================================= */
.sp-tilt{ transform-style:preserve-3d; will-change:transform }
.sp-tilt > *{ transform:translateZ(0) }
.sp-spot{ position:relative; isolation:isolate }
.sp-spot::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(340px circle at var(--px,50%) var(--py,50%), rgba(201,154,69,.16), transparent 62%);
  transition:opacity .4s ease;
}
.sp-spot:hover::before{ opacity:1 }
.sp-glare{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; border-radius:inherit;
  background:radial-gradient(260px circle at var(--px,50%) var(--py,50%), rgba(255,255,255,.22), transparent 60%);
  transition:opacity .4s ease; mix-blend-mode:soft-light;
}
.sp-tilt:hover .sp-glare{ opacity:1 }

.sp-catcard{ position:relative; transition:transform .6s var(--sp-e-out), box-shadow .6s var(--sp-e-out), border-color .4s ease }
.sp-catcard::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  padding:1px; background:linear-gradient(135deg,var(--sp-brass),transparent 42%,transparent 58%,var(--sp-brass));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .45s ease;
}
.sp-catcard:hover::after{ opacity:1 }
.sp-catcard:hover{ box-shadow:0 36px 70px -34px rgba(11,28,44,.55) }

.sp-card{ position:relative; overflow:hidden }
.sp-card .sp-num{ transition:transform .6s var(--sp-e-out), color .4s ease, opacity .4s ease }
.sp-card:hover .sp-num{ transform:translateY(-4px) scale(1.06); color:var(--sp-brass) }
.sp-band.dark .sp-card{ background-image:linear-gradient(160deg,var(--sp-glass),transparent 55%) }

/* WooCommerce tiles */
.woocommerce ul.products li.product{ position:relative; transition:transform .55s var(--sp-e-out), box-shadow .55s var(--sp-e-out), border-color .4s ease }
.woocommerce ul.products li.product::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  padding:1px; background:linear-gradient(150deg,var(--sp-brass),rgba(201,154,69,0) 45%,rgba(201,154,69,0) 55%,var(--sp-brass));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .45s ease;
}
.woocommerce ul.products li.product:hover::after{ opacity:1 }
.woocommerce ul.products li.product .button{
  position:relative; overflow:hidden;
  transform:translateY(6px); opacity:.92; transition:transform .5s var(--sp-e-out), opacity .4s ease, background-color .3s ease, color .3s ease;
}
.woocommerce ul.products li.product:hover .button{ transform:none; opacity:1 }

/* =========================================================================
   10. HEADER — condenses on scroll, retreats on the way down
   ========================================================================= */
header.elementor-location-header{
  transition:transform .55s var(--sp-e-out), background-color .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
  will-change:transform;
}
body.sp-head-solid header.elementor-location-header{
  background:rgba(11,28,44,.97); box-shadow:0 18px 40px -28px rgba(0,0,0,.9);
  backdrop-filter:saturate(1.6) blur(16px);
}
body.sp-head-hide header.elementor-location-header{ transform:translateY(-104%) }
header.elementor-location-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--sp-brass),transparent);
  opacity:0; transition:opacity .5s ease;
}
body.sp-head-solid header.elementor-location-header::after{ opacity:.85 }

/* =========================================================================
   11. HERO — aurora light, parallax layers, kinetic scroll cue
   ========================================================================= */
.sp-cine{ position:relative }
.sp-cine-bg img{ will-change:transform }
.sp-cine::before{
  content:""; position:absolute; inset:-20%; z-index:1; pointer-events:none; opacity:.5;
  background:
    radial-gradient(48% 38% at 18% 22%, rgba(201,154,69,.30), transparent 70%),
    radial-gradient(42% 34% at 82% 68%, rgba(24,56,79,.85), transparent 72%);
  filter:blur(28px);
}
@media (prefers-reduced-motion: no-preference){ .sp-cine::before{ animation:sp-aurora 18s ease-in-out infinite alternate } }
@keyframes sp-aurora{
  0%{ transform:translate3d(0,0,0) scale(1) }
  50%{ transform:translate3d(3%,-2%,0) scale(1.08) }
  100%{ transform:translate3d(-3%,2%,0) scale(1.04) }
}
.sp-cine-in{ position:relative; z-index:4 }

.sp-scrollcue{
  position:absolute; left:50%; bottom:88px; z-index:5; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px; pointer-events:none;
  font-family:var(--sp-mono); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.sp-scrollcue span{ display:block; width:1px; height:46px; background:linear-gradient(var(--sp-brass),transparent); position:relative; overflow:hidden }
.sp-scrollcue span::after{ content:""; position:absolute; inset:0; background:var(--sp-brass); animation:sp-cue 2.1s var(--sp-e-io) infinite }
@keyframes sp-cue{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }
@media (max-width:900px){ .sp-scrollcue{ display:none } }

/* Marquee reacts to scroll velocity */
.sp-marquee{ transform:skewX(var(--sk,0deg)); transition:transform .5s var(--sp-e-out) }
.sp-marquee-track b{ transition:color .3s ease, transform .5s var(--sp-e-out) }
.sp-marquee-track b:hover{ color:var(--sp-brass); transform:translateY(-2px) }

/* =========================================================================
   12. SECTION FURNITURE — eyebrow rule that draws, heading sheen
   ========================================================================= */
.sp-eyebrow{ position:relative; display:inline-flex; align-items:center; gap:.7rem }
.sp-eyebrow::before{
  content:""; width:0; height:1px; background:var(--sp-brass); transition:width .85s var(--sp-e-out) .15s;
}
.is-in > .sp-eyebrow::before, .sp-eyebrow.is-in::before{ width:38px }

.sp-band > h2, .sp-page h2{ position:relative }
.sp-band.dark h2::after, .sp-cine h1::after{ content:none }

/* A hairline that draws itself across the band */
.sp-rule-anim{ height:1px; background:var(--sp-line-soft); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.2s var(--sp-e-out) }
.sp-rule-anim.is-in{ transform:scaleX(1) }

/* =========================================================================
   13. STATS — brass numerals, count-up, ticking rule
   ========================================================================= */
.sp-stat b{
  font-variant-numeric:tabular-nums; display:inline-block;
  background:linear-gradient(180deg,#fff 12%,var(--sp-brass-lo) 55%,var(--sp-brass-dk));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sp-stats{ position:relative; overflow:hidden }
.sp-stats::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(60% 100% at 50% 0%, rgba(201,154,69,.14), transparent 70%);
}
.sp-stat{ position:relative; transition:transform .5s var(--sp-e-out) }
.sp-stat:hover{ transform:translateY(-4px) }

/* =========================================================================
   14. PROOF SHOTS — staggered parallax drift
   ========================================================================= */
.sp-proof-shots img{ will-change:transform; transition:transform .8s var(--sp-e-out), box-shadow .6s ease }
.sp-proof-shots img:hover{ box-shadow:0 40px 80px -40px rgba(11,28,44,.6) }

/* =========================================================================
   15. UNLIMITED ELEMENTS — restyled to the Safe Point palette
   ========================================================================= */
.sp-ue{ position:relative }
.sp-ue .uc-step-process-item,
.sp-ue .ue-timeline-item{ transition:transform .5s var(--sp-e-out) }
.sp-ue .uc-step-process-item:hover{ transform:translateY(-6px) }
.sp-uewrap{ max-width:1180px; margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem) }

/* =========================================================================
   16. FOOTER — slow gradient mesh + brass hairline
   ========================================================================= */
footer.elementor-location-footer{ position:relative; overflow:hidden }
footer.elementor-location-footer::before{
  content:""; position:absolute; inset:-30%; pointer-events:none; opacity:.38;
  background:
    radial-gradient(38% 46% at 12% 8%, rgba(201,154,69,.30), transparent 70%),
    radial-gradient(40% 40% at 88% 84%, rgba(24,56,79,.9), transparent 70%);
  filter:blur(34px);
}
@media (prefers-reduced-motion: no-preference){ footer.elementor-location-footer::before{ animation:sp-aurora 26s ease-in-out infinite alternate } }
footer.elementor-location-footer > *{ position:relative; z-index:1 }

/* =========================================================================
   17. BACK TO TOP — ring shows how far down you are
   ========================================================================= */
#sp-top{
  position:fixed; right:22px; bottom:22px; width:52px; height:52px; z-index:2147481000;
  display:grid; place-items:center; border:0; padding:0; border-radius:50%; cursor:pointer;
  background:rgba(11,28,44,.9); backdrop-filter:blur(8px);
  color:var(--sp-brass); opacity:0; transform:translateY(18px) scale(.85); pointer-events:none;
  transition:opacity .45s var(--sp-e-out), transform .45s var(--sp-e-out), background-color .3s ease;
  box-shadow:0 16px 34px -16px rgba(0,0,0,.8);
}
body.sp-scrolled #sp-top{ opacity:1; transform:none; pointer-events:auto }
#sp-top:hover{ background:var(--sp-brass); color:var(--sp-navy) }
#sp-top svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg) }
#sp-top circle{ fill:none; stroke-width:2 }
#sp-top .trk{ stroke:rgba(255,255,255,.14) }
#sp-top .bar{ stroke:var(--sp-brass); stroke-linecap:round; stroke-dasharray:151; stroke-dashoffset:calc(151 - 151 * var(--sp-p,0)) }
#sp-top i{ font-style:normal; font-size:16px; line-height:1; position:relative; z-index:1 }
@media (max-width:600px){ #sp-top{ right:14px; bottom:14px; width:46px; height:46px } }

/* =========================================================================
   18. MISC POLISH
   ========================================================================= */
img{ -webkit-user-drag:none }
.sp-band{ position:relative }
.sp-band.dark{ position:relative; overflow:hidden }
.sp-band.dark::before{
  content:""; position:absolute; inset:-40%; pointer-events:none; opacity:.5;
  background:radial-gradient(35% 40% at 20% 15%, rgba(201,154,69,.2), transparent 70%),
             radial-gradient(35% 40% at 85% 90%, rgba(24,56,79,.9), transparent 70%);
  filter:blur(30px);
}
@media (prefers-reduced-motion: no-preference){ .sp-band.dark::before{ animation:sp-aurora 30s ease-in-out infinite alternate } }
.sp-band.dark > *{ position:relative; z-index:1 }

/* Keeps long tables and code from forcing a horizontal page scroll */
.sp-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }

/* =========================================================================
   19. REDUCED MOTION — everything above degrades to a clean, static site
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  [data-rv]{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important }
  .sp-split .sp-w > span{ transform:none !important; opacity:1 !important }
  .sp-mask::after{ transform:scaleX(0) !important }
  .sp-mask > img{ transform:none !important }
  #sp-cur,#sp-ring,#sp-load{ display:none !important }
  body::after{ display:none }
}

/* Touch devices: no cursor, no tilt, lighter effects */
@media (hover:none){
  #sp-cur,#sp-ring{ display:none !important }
  .sp-glare{ display:none }
  body::after{ opacity:.035 }
}

/* =========================================================================
   20. COMMAND PALETTE  (⌘K / Ctrl+K)
   The whole catalogue — 29 part numbers, their specs and every page —
   searchable from the keyboard, off a pre-built JSON index. No round trip.
   ========================================================================= */
#sp-pal{
  position:fixed; inset:0; z-index:2147483200; display:none;
  font-family:var(--sp-body);
}
#sp-pal.is-open{ display:block }
#sp-pal .sp-pal-bd{
  position:absolute; inset:0; background:rgba(5,13,21,.66); backdrop-filter:blur(10px) saturate(1.2);
  animation:sp-fade-in .25s ease both;
}
#sp-pal .sp-pal-panel{
  position:relative; width:min(760px,calc(100vw - 32px)); margin:9vh auto 0; overflow:hidden;
  background:linear-gradient(180deg,rgba(24,56,79,.97),rgba(11,28,44,.99));
  border:1px solid rgba(255,255,255,.12); border-radius:16px;
  box-shadow:0 50px 120px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(201,154,69,.12);
  animation:sp-pal-in .42s var(--sp-e-out) both;
}
@keyframes sp-fade-in{ from{opacity:0} to{opacity:1} }
@keyframes sp-pal-in{ from{opacity:0; transform:translateY(-14px) scale(.975)} to{opacity:1; transform:none} }

#sp-pal .sp-pal-top{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.09) }
#sp-pal .sp-pal-top svg{ width:18px; height:18px; flex:none; stroke:var(--sp-brass); fill:none; stroke-width:2 }
#sp-pal input{
  flex:1 1 auto; min-width:0; background:transparent; border:0; outline:0; color:#fff;
  font-family:var(--sp-body); font-size:1.06rem; letter-spacing:.01em; padding:2px 0;
}
#sp-pal input::placeholder{ color:rgba(234,240,245,.45) }
#sp-pal kbd{
  font-family:var(--sp-mono); font-size:.64rem; color:var(--sp-steel); background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13); border-bottom-width:2px; border-radius:5px; padding:3px 6px; line-height:1;
}
#sp-pal .sp-pal-list{ max-height:min(56vh,520px); overflow-y:auto; overscroll-behavior:contain; padding:8px }
#sp-pal .sp-pal-list::-webkit-scrollbar{ width:8px }
#sp-pal .sp-pal-list::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:8px }
#sp-pal .sp-pal-grp{
  font-family:var(--sp-mono); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--sp-steel); padding:14px 12px 7px;
}
#sp-pal .sp-pal-row{
  display:grid; grid-template-columns:42px 1fr auto; gap:13px; align-items:center; width:100%;
  padding:9px 11px; border-radius:10px; cursor:pointer; border:1px solid transparent; text-align:left;
  background:transparent; color:inherit; font:inherit;
}
#sp-pal .sp-pal-row[aria-selected="true"]{
  background:linear-gradient(90deg,rgba(201,154,69,.20),rgba(201,154,69,.06));
  border-color:rgba(201,154,69,.38);
}
#sp-pal .sp-pal-thumb{
  width:42px; height:42px; border-radius:8px; background:#fff; overflow:hidden; display:grid; place-items:center; flex:none;
}
#sp-pal .sp-pal-thumb img{ width:100%; height:100%; object-fit:contain }
#sp-pal .sp-pal-thumb.glyph{ background:rgba(255,255,255,.07); color:var(--sp-brass); font-family:var(--sp-mono); font-size:.95rem }
#sp-pal .sp-pal-main{ min-width:0 }
#sp-pal .sp-pal-t{ display:block; color:#fff; font-weight:600; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#sp-pal .sp-pal-t mark{ background:transparent; color:var(--sp-brass-lo); font-weight:800 }
#sp-pal .sp-pal-s{ display:block; color:var(--sp-steel); font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px }
#sp-pal .sp-pal-meta{ display:flex; align-items:center; gap:9px; flex:none }
#sp-pal .sp-chip{
  font-family:var(--sp-mono); font-size:.64rem; letter-spacing:.06em; color:var(--sp-brass);
  border:1px solid rgba(201,154,69,.4); border-radius:999px; padding:3px 8px; white-space:nowrap;
}
#sp-pal .sp-price{ font-family:var(--sp-mono); font-size:.82rem; color:#fff; white-space:nowrap }
#sp-pal .sp-pal-empty{ padding:34px 18px; text-align:center; color:var(--sp-steel); font-size:.9rem }
#sp-pal .sp-pal-foot{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:11px 18px;
  border-top:1px solid rgba(255,255,255,.09); background:rgba(0,0,0,.18);
  font-size:.72rem; color:var(--sp-steel);
}
#sp-pal .sp-pal-foot span{ display:inline-flex; align-items:center; gap:6px }
@media (max-width:620px){
  #sp-pal .sp-pal-panel{ margin-top:4vh }
  #sp-pal .sp-pal-foot span:nth-child(n+3){ display:none }
}

/* The header affordance that tells people the palette exists */
#sp-k{
  position:fixed; right:22px; bottom:84px; z-index:2147481000;
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border:0; cursor:pointer;
  border-radius:999px; background:rgba(11,28,44,.9); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12); color:var(--sp-ink);
  font-family:var(--sp-mono); font-size:.8rem; letter-spacing:.08em;
  box-shadow:0 16px 34px -16px rgba(0,0,0,.8);
  transition:background-color .3s ease, color .3s ease, transform .4s var(--sp-e-out), border-color .3s ease;
}
#sp-k:hover{ background:var(--sp-brass); color:var(--sp-navy); border-color:var(--sp-brass); transform:translateY(-2px) }
#sp-k b{ font-weight:700; font-size:1.08em }
@media (max-width:600px){ #sp-k{ right:14px; bottom:72px; font-size:.82rem; padding:14px 20px; gap:10px } #sp-k b{ font-size:1.25em } }

/* =========================================================================
   21. QUICK LOOK — the spec sheet without leaving the grid
   ========================================================================= */
#sp-ql{ position:fixed; inset:0; z-index:2147483100; display:none }
#sp-ql.is-open{ display:block }
#sp-ql .sp-ql-bd{ position:absolute; inset:0; background:rgba(5,13,21,.7); backdrop-filter:blur(8px); animation:sp-fade-in .25s ease both }
#sp-ql .sp-ql-panel{
  position:relative; width:min(940px,calc(100vw - 28px)); margin:7vh auto 0; max-height:86vh; overflow:auto;
  background:var(--sp-white); border-radius:16px; box-shadow:0 60px 130px -40px rgba(0,0,0,.8);
  animation:sp-pal-in .45s var(--sp-e-out) both;
}
#sp-ql .sp-ql-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) }
#sp-ql .sp-ql-shot{ background:var(--sp-paper); display:grid; place-items:center; padding:34px; min-height:320px }
#sp-ql .sp-ql-shot img{ max-width:100%; max-height:420px; object-fit:contain }
#sp-ql .sp-ql-body{ padding:clamp(22px,3vw,36px) }
#sp-ql h3{ font-family:var(--sp-display); font-weight:800; font-size:clamp(1.35rem,2.6vw,1.9rem); line-height:1.12; margin:.2rem 0 .55rem; color:var(--sp-navy) }
#sp-ql .sp-ql-sku{ font-family:var(--sp-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sp-brass-dk) }
#sp-ql .sp-ql-price{ font-family:var(--sp-mono); font-size:1.28rem; color:var(--sp-navy); margin:.1rem 0 1rem }
#sp-ql .sp-ql-lede{ color:#4A5D6C; font-size:.96rem; line-height:1.65; margin-bottom:1.1rem }
#sp-ql table{ width:100%; border-collapse:collapse; margin-bottom:1.3rem }
#sp-ql td{ padding:9px 0; border-bottom:1px solid var(--sp-line-soft); font-size:.87rem; vertical-align:top }
#sp-ql td:first-child{ font-family:var(--sp-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sp-steel); width:42%; padding-right:16px }
#sp-ql .sp-ql-act{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
#sp-ql .sp-ql-close{
  position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(11,28,44,.88); color:#fff; font-size:18px; line-height:1; display:grid; place-items:center;
  transition:background-color .3s ease, transform .3s var(--sp-e-out); z-index:2;
}
#sp-ql .sp-ql-close:hover{ background:var(--sp-brass); color:var(--sp-navy); transform:rotate(90deg) }
@media (max-width:760px){
  #sp-ql .sp-ql-grid{ grid-template-columns:1fr }
  #sp-ql .sp-ql-shot{ min-height:0; padding:24px }
  #sp-ql .sp-ql-shot img{ max-height:240px }
}

/* The hover affordance on each product tile */
.sp-qlbtn{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%) translateY(10px); z-index:4;
  display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border:0; cursor:pointer;
  border-radius:999px; background:rgba(11,28,44,.94); color:#fff; white-space:nowrap;
  font-family:var(--sp-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  opacity:0; pointer-events:none; backdrop-filter:blur(6px);
  transition:opacity .35s ease, transform .45s var(--sp-e-out), background-color .3s ease, color .3s ease;
}
li.product:hover .sp-qlbtn{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) }
.sp-qlbtn:hover{ background:var(--sp-brass); color:var(--sp-navy) }
@media (hover:none){ .sp-qlbtn{ display:none } }

/* =========================================================================
   22. TOASTS
   ========================================================================= */
#sp-toast{
  position:fixed; left:50%; bottom:28px; z-index:2147483300; transform:translate(-50%,26px);
  display:flex; align-items:center; gap:11px; padding:13px 20px; border-radius:999px;
  background:rgba(11,28,44,.97); color:#fff; border:1px solid rgba(201,154,69,.35);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.8); opacity:0; pointer-events:none;
  font-size:.88rem; transition:opacity .35s ease, transform .45s var(--sp-e-out);
  max-width:calc(100vw - 28px);
}
#sp-toast.is-on{ opacity:1; transform:translate(-50%,0) }
#sp-toast i{ color:var(--sp-brass); font-style:normal }
#sp-toast a{ color:var(--sp-brass); text-decoration:underline; white-space:nowrap }

/* =========================================================================
   23. COMPARE TRAY — up to three parts, side by side
   ========================================================================= */
#sp-cmp{
  position:fixed; left:50%; bottom:0; z-index:2147481500; transform:translate(-50%,110%);
  display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:16px 16px 0 0;
  background:rgba(11,28,44,.97); border:1px solid rgba(255,255,255,.12); border-bottom:0;
  box-shadow:0 -20px 60px -24px rgba(0,0,0,.85); transition:transform .5s var(--sp-e-out);
  max-width:calc(100vw - 24px);
}
#sp-cmp.is-on{ transform:translate(-50%,0) }
#sp-cmp .sp-cmp-items{ display:flex; gap:8px }
#sp-cmp .sp-cmp-chip{
  display:inline-flex; align-items:center; gap:7px; padding:6px 9px 6px 6px; border-radius:9px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); color:#fff; font-size:.76rem;
}
#sp-cmp .sp-cmp-chip img{ width:26px; height:26px; object-fit:contain; background:#fff; border-radius:5px }
#sp-cmp .sp-cmp-chip button{ background:none; border:0; color:var(--sp-steel); cursor:pointer; font-size:14px; line-height:1; padding:0 2px }
#sp-cmp .sp-cmp-chip button:hover{ color:var(--sp-brass) }
#sp-cmp .sp-cmp-go{
  border:0; cursor:pointer; padding:10px 16px; border-radius:8px; background:var(--sp-brass); color:var(--sp-navy);
  font-family:var(--sp-display); font-weight:700; font-size:.82rem; white-space:nowrap;
}
#sp-cmp .sp-cmp-go[disabled]{ opacity:.4; cursor:not-allowed }
@media (max-width:620px){ #sp-cmp{ width:calc(100vw - 16px); justify-content:space-between } #sp-cmp .sp-cmp-chip span{ display:none } }

#sp-cmp-modal{ position:fixed; inset:0; z-index:2147483150; display:none }
#sp-cmp-modal.is-open{ display:block }
#sp-cmp-modal .sp-ql-bd{ position:absolute; inset:0; background:rgba(5,13,21,.72); backdrop-filter:blur(8px) }
#sp-cmp-modal .sp-cmp-panel{
  position:relative; width:min(1040px,calc(100vw - 26px)); margin:6vh auto 0; max-height:88vh; overflow:auto;
  background:#fff; border-radius:16px; padding:clamp(20px,3vw,34px);
  box-shadow:0 60px 130px -40px rgba(0,0,0,.8); animation:sp-pal-in .45s var(--sp-e-out) both;
}
#sp-cmp-modal table{ width:100%; border-collapse:collapse }
#sp-cmp-modal th,#sp-cmp-modal td{ padding:11px 12px; border-bottom:1px solid var(--sp-line-soft); text-align:left; font-size:.86rem; vertical-align:top }
#sp-cmp-modal th{ font-family:var(--sp-display); color:var(--sp-navy) }
#sp-cmp-modal tbody td:first-child,#sp-cmp-modal thead th:first-child{
  font-family:var(--sp-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sp-steel);
}
#sp-cmp-modal img{ width:64px; height:64px; object-fit:contain; display:block; margin-bottom:8px }
#sp-cmp-modal .sp-ql-close{
  position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(11,28,44,.88); color:#fff; font-size:18px; display:grid; place-items:center;
}

/* No-JS and reduced motion: none of the above ever appears unopened */
@media (prefers-reduced-motion: reduce){
  #sp-pal .sp-pal-panel,#sp-ql .sp-ql-panel,#sp-cmp-modal .sp-cmp-panel{ animation:none }
}

/* =========================================================================
   24. UNLIMITED ELEMENTS — Step Process, dressed in the Safe Point system
   ========================================================================= */
.sp-ue .elementor-widget-container{ padding:6px 0 0 }
.sp-ue .ue-step-item-title{
  font-family:var(--sp-display) !important; font-weight:700 !important;
  font-size:1.02rem !important; letter-spacing:-.005em; line-height:1.25 !important;
}
.sp-ue .ue-step-item-text{
  font-family:var(--sp-body) !important; font-size:.88rem !important; line-height:1.68 !important;
}
.sp-ue .ue-step-icon{
  box-shadow:0 18px 40px -22px rgba(11,28,44,.8), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .55s var(--sp-e-out), box-shadow .55s var(--sp-e-out), background-color .4s ease, color .4s ease;
}
.sp-ue .ue-step-item:hover .ue-step-icon{
  transform:translateY(-6px) scale(1.05);
  box-shadow:0 26px 52px -22px rgba(201,154,69,.6);
}
.sp-ue .ue-step-label{
  font-family:var(--sp-mono) !important; font-weight:700; letter-spacing:.08em;
  box-shadow:0 6px 16px -8px rgba(11,28,44,.7);
}
.sp-ue .ue-step-item-line{ opacity:.55 }
.sp-ue .ue-step-item-content{ padding-top:4px }
@media (max-width:900px){
  .sp-ue .ue-step-item-title{ font-size:1.06rem !important }
  .sp-ue .ue-step-item-text{ font-size:.92rem !important }
}

/* Step process: readable labels, left-aligned copy once it stacks */
.sp-ue .ue-step-label{
  font-size:10px !important; min-width:22px; height:22px; border-radius:999px;
  letter-spacing:.06em; padding:0 5px;
}
@media (max-width:900px){
  .sp-ue .ue-step-item-content{ text-align:left !important }
  .sp-ue .ue-step-item-text{ max-width:none }
}
#sp-k b{ letter-spacing:.02em }

/* =========================================================================
   25. BRAND SYSTEM v2 — the blue comes off the shield, the brass is the metal
   ========================================================================= */
:root{
  --sp-blue:#3155A1;          /* taken from the SP shield */
  --sp-blue-lt:#4E74C6;
  --sp-blue-dk:#22407F;
}
:root{
  --sp-blue-glow:rgba(49,85,161,.42);
  --sp-display-wide:'Archivo',var(--sp-display);
}

/* Display type: one variable family, stretched wide for headlines and
   narrowed for labels. Costs a single font file. */
h1,h2,h3,.sp-btn,.sp-eyebrow,.sp-num,.sp-stat b,
.sp-band h2,.sp-page h2,.sp-catbody strong,.sp-card h3,
.woocommerce div.product .product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--sp-display-wide) !important;
  font-variation-settings:'wdth' 112,'wght' 700;
  letter-spacing:-.016em;
}
h1,.sp-hx-head,.sp-band h2,.sp-page h2{ font-variation-settings:'wdth' 115,'wght' 760 }
.sp-eyebrow,.sp-hx-eyebrow,.sp-cert code,.sp-chip{
  font-variation-settings:'wdth' 88,'wght' 600;
}
.sp-btn{ font-variation-settings:'wdth' 104,'wght' 680; letter-spacing:.005em }

/* Buttons — brand blue is the primary action everywhere */
.sp-btn{
  background:linear-gradient(160deg,var(--sp-blue-lt),var(--sp-blue) 46%,var(--sp-blue-dk));
  color:#fff !important; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 12px 28px -16px var(--sp-blue-glow);
}
.sp-btn:hover{
  background:linear-gradient(160deg,#5A80D0,var(--sp-blue-lt) 46%,var(--sp-blue));
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 20px 44px -16px var(--sp-blue-glow);
}
.sp-btn.ghost{
  background:transparent; border:1px solid rgba(255,255,255,.5); color:#fff !important;
  box-shadow:none;
}
.sp-btn.ghost:hover{ background:rgba(255,255,255,.1); border-color:#fff; box-shadow:none }
.sp-btn.brass{
  background:linear-gradient(160deg,var(--sp-brass-lo),var(--sp-brass) 46%,var(--sp-brass-dk));
  color:var(--sp-navy) !important; border-color:rgba(0,0,0,.1);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 12px 28px -16px rgba(201,154,69,.6);
}
.sp-page .sp-btn.ghost[style]{ color:var(--sp-blue) !important; border-color:var(--sp-blue) !important }
.sp-page .sp-btn.ghost[style]:hover{ background:var(--sp-blue); color:#fff !important }

/* WooCommerce actions pick up the same blue */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.wpforms-submit,.elementor-button{
  background:linear-gradient(160deg,var(--sp-blue-lt),var(--sp-blue) 46%,var(--sp-blue-dk)) !important;
  color:#fff !important; border:1px solid rgba(255,255,255,.14) !important;
  font-family:var(--sp-display-wide) !important; font-variation-settings:'wdth' 104,'wght' 680;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset !important;
  transition:filter .3s ease, box-shadow .4s ease, transform .4s var(--sp-e-out) !important;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce ul.products li.product .button:hover,.wpforms-submit:hover,.elementor-button:hover{
  filter:brightness(1.1); box-shadow:0 18px 40px -18px var(--sp-blue-glow) !important;
}

/* Text: blue is the interactive colour, brass stays the metal detail */
.sp-page p a:not(.sp-btn),.sp-page li a:not(.sp-btn){ color:var(--sp-blue) }
.sp-page p a:not(.sp-btn),.sp-page li a:not(.sp-btn){
  background-image:linear-gradient(var(--sp-blue),var(--sp-blue));
}
.sp-band.dark a:not(.sp-btn),footer a:hover{ color:var(--sp-brass) }
.sp-card .sp-num,.sp-num{ color:var(--sp-blue) }
.sp-band.dark .sp-card .sp-num{ color:var(--sp-brass) }
.sp-proof .sp-list li::before{ color:var(--sp-blue) }
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price{ color:var(--sp-navy) }
.sp-catbody i{ color:var(--sp-blue) }
.sp-catcard:hover .sp-catbody i{ color:var(--sp-blue-dk) }
header.elementor-location-header .elementor-nav-menu a::after{ background:var(--sp-brass) }

/* =========================================================================
   26. THE HERO — a scroll-reactive blade slider
   ========================================================================= */
.sp-hx{
  --hp:0;                    /* 0 at rest, 1 when fully scrolled past */
  --mx:0px; --my:0px;        /* pointer depth */
  position:relative; isolation:isolate; z-index:1;
  width:100vw; margin-inline:calc(50% - 50vw);
  height:clamp(580px, 100svh, 1020px);
  display:flex; align-items:center;
  background:var(--sp-navy); overflow:hidden;
}
body.admin-bar .sp-hx{ height:clamp(560px, calc(100svh - 32px), 1000px) }

/* --- the image plane, which docks into a card as you scroll away --- */
.sp-hx-stage{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  transform:scale(calc(1 - .1 * var(--hp))) translate3d(0, calc(var(--hp) * -3vh), 0);
  border-radius:calc(30px * var(--hp));
  transform-origin:50% 28%;
  filter:saturate(.88) contrast(1.06);
  will-change:transform;
}
.sp-hx-slide{ position:absolute; inset:0; opacity:0; visibility:hidden }
.sp-hx-slide.is-on{ opacity:1; visibility:visible }
.sp-hx-media{
  position:absolute; inset:-3%; display:block;
  transform:translate3d(var(--mx),var(--my),0);
  transition:transform .9s var(--sp-e-out);
}
.sp-hx-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; display:block }
@media (prefers-reduced-motion: no-preference){
  .sp-hx-slide.is-on .sp-hx-media img{ animation:sp-hx-kb 11s linear both }
}
@keyframes sp-hx-kb{ from{ transform:scale(1.13) } to{ transform:scale(1.0) } }

/* Colour grade: unifies three different photographs into one house look */
.sp-hx-grade{
  position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:color;
  background:linear-gradient(120deg,#16304a 0%,#1d3d58 55%,#2a4763 100%); opacity:.42;
}
.sp-hx-veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(7,18,29,.94) 0%, rgba(7,18,29,.74) 34%, rgba(7,18,29,.18) 66%, rgba(7,18,29,.42) 100%),
    linear-gradient(0deg, rgba(7,18,29,.92) 0%, rgba(7,18,29,0) 42%);
  opacity:calc(.92 + .08 * var(--hp));
}

/* --- the blades: seven steel slats that wipe the next line in --- */
.sp-hx-blades{ position:absolute; inset:0; z-index:5; display:flex; pointer-events:none }
.sp-hx-blades i{
  flex:1 1 0; transform:scaleY(0); transform-origin:50% 100%;
  background:linear-gradient(180deg,#12293D,#0B1C2C 60%,#081521);
  box-shadow:1px 0 0 rgba(201,154,69,.32), -1px 0 0 rgba(201,154,69,.12);
}
.sp-hx-blades.go i{ animation:sp-blade 1.15s cubic-bezier(.76,0,.24,1) both; animation-delay:calc(var(--d,0) * 28ms) }
@keyframes sp-blade{
  0%  { transform:scaleY(0); transform-origin:50% 100% }
  32% { transform:scaleY(1); transform-origin:50% 100% }
  50% { transform:scaleY(1); transform-origin:50% 100% }
  51% { transform:scaleY(1); transform-origin:50% 0 }
  68% { transform:scaleY(1); transform-origin:50% 0 }
  100%{ transform:scaleY(0); transform-origin:50% 0 }
}

/* --- copy --- */
.sp-hx-in{
  position:relative; z-index:6; width:100%;
  max-width:1180px; margin-inline:auto; padding-inline:clamp(1.15rem,5vw,2.5rem);
  transform:translate3d(0, calc(var(--hp) * -70px), 0);
  opacity:calc(1 - var(--hp) * 1.25);
}
.sp-hx-copies{ position:relative; min-height:clamp(330px,46svh,440px) }
.sp-hx-copy{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  gap:.1rem; opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.sp-hx-copy.is-on{ opacity:1; pointer-events:auto }
.sp-hx-copy > *{
  opacity:0; transform:translate3d(0,30px,0); filter:blur(4px);
  transition:opacity .8s var(--sp-e-out), transform 1s var(--sp-e-out), filter .8s var(--sp-e-out);
}
.sp-hx-copy.is-on > *{ opacity:1; transform:none; filter:none }
.sp-hx-copy.is-on > *:nth-child(1){ transition-delay:.10s }
.sp-hx-copy.is-on > *:nth-child(2){ transition-delay:.18s }
.sp-hx-copy.is-on > *:nth-child(3){ transition-delay:.28s }
.sp-hx-copy.is-on > *:nth-child(4){ transition-delay:.36s }
.sp-hx-copy.is-on > *:nth-child(5){ transition-delay:.44s }

.sp-hx-eyebrow{
  display:inline-flex; align-items:center; gap:.75rem; align-self:flex-start;
  font-family:var(--sp-mono); font-size:.68rem; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(234,240,245,.82); margin-bottom:1.1rem;
}
.sp-hx-eyebrow b{ color:var(--sp-brass); font-family:var(--sp-mono); font-weight:700 }
.sp-hx-eyebrow i{ width:34px; height:1px; background:var(--sp-brass); display:block }
.sp-hx-head{
  margin:0 0 1.05rem; color:#fff; max-width:16ch;
  font-size:clamp(2.6rem,6.6vw,5.1rem); line-height:.95; letter-spacing:-.03em;
  text-wrap:balance; text-shadow:0 6px 40px rgba(0,0,0,.4);
}
.sp-hx-head em{
  font-style:normal; color:transparent;
  background:linear-gradient(100deg,var(--sp-brass-lo),var(--sp-brass) 55%,var(--sp-brass-dk));
  -webkit-background-clip:text; background-clip:text;
}
.sp-hx-lede{
  margin:0 0 1.7rem; max-width:46ch; color:rgba(234,240,245,.9);
  font-size:clamp(.98rem,1.3vw,1.12rem); line-height:1.62;
}
.sp-hx-cta{ display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:1.9rem }
.sp-hx-specs{
  list-style:none; margin:0; padding:0; display:flex; gap:0; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.16); padding-top:.9rem; max-width:44rem;
}
.sp-hx-specs li{
  font-family:var(--sp-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(234,240,245,.72); padding:0 1.15rem; border-left:1px solid rgba(255,255,255,.14);
}
.sp-hx-specs li:first-child{ padding-left:0; border-left:0 }

/* --- the index rail --- */
.sp-hx-rail{
  position:absolute; right:clamp(1rem,3vw,2.4rem); top:50%; transform:translateY(-50%);
  z-index:7; display:flex; flex-direction:column; gap:2px;
  opacity:calc(1 - var(--hp) * 1.6);
}
.sp-hx-dot{
  display:grid; grid-template-columns:auto 1fr; grid-template-areas:"n t" "b b";
  align-items:center; gap:.55rem .7rem; padding:.7rem .85rem; width:clamp(150px,15vw,206px);
  background:transparent; border:0; border-right:1px solid rgba(255,255,255,.14);
  cursor:pointer; text-align:left; color:rgba(234,240,245,.6);
  transition:color .35s ease, background-color .35s ease, border-color .35s ease;
}
.sp-hx-dot:hover{ color:#fff; background:rgba(255,255,255,.05) }
.sp-hx-dot.is-on{ color:#fff; border-right-color:var(--sp-brass) }
.sp-hx-dot .n{ grid-area:n; font-family:var(--sp-mono); font-size:.66rem; letter-spacing:.1em; color:var(--sp-brass) }
.sp-hx-dot .t{ grid-area:t; font-family:var(--sp-display-wide); font-variation-settings:'wdth' 96,'wght' 620; font-size:.8rem; letter-spacing:.005em }
.sp-hx-dot .b{ grid-area:b; height:2px; background:rgba(255,255,255,.16); overflow:hidden; border-radius:2px }
.sp-hx-dot .b i{ display:block; height:100%; width:100%; background:var(--sp-brass); transform:scaleX(0); transform-origin:0 50% }
.sp-hx-dot.is-on .b i{ animation:sp-hx-fill var(--dur,7s) linear forwards }
.sp-hx.is-held .sp-hx-dot.is-on .b i{ animation-play-state:paused }
@keyframes sp-hx-fill{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* --- arrows --- */
.sp-hx-arrows{
  position:absolute; right:clamp(1rem,3vw,2.4rem); bottom:calc(70px + clamp(1rem,3vw,2rem)); z-index:7;
  display:flex; gap:8px; opacity:calc(1 - var(--hp) * 1.6);
}
.sp-hx-arrow{
  width:46px; height:46px; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2); color:#fff;
  backdrop-filter:blur(6px); font-size:17px; line-height:1;
  transition:background-color .3s ease, border-color .3s ease, transform .45s var(--sp-e-out);
}
.sp-hx-arrow:hover{ background:var(--sp-brass); border-color:var(--sp-brass); color:var(--sp-navy) }
.sp-hx-arrow span{ display:block; transition:transform .4s var(--sp-e-out) }
.sp-hx-arrow.prev:hover span{ transform:translateX(-3px) }
.sp-hx-arrow.next:hover span{ transform:translateX(3px) }

/* --- marquee docked to the hero foot --- */
.sp-hx .sp-marquee{
  position:absolute; left:0; right:0; bottom:0; z-index:8; overflow:hidden; padding:15px 0;
  background:linear-gradient(0deg, rgba(7,18,29,.85), rgba(7,18,29,0));
  transform:translate3d(0, calc(var(--hp) * 90px), 0);
  opacity:calc(1 - var(--hp) * 1.3);
}
.sp-hx .sp-marquee-track b{
  font-family:var(--sp-display-wide); font-variation-settings:'wdth' 100,'wght' 620;
  font-size:clamp(.92rem,1.5vw,1.08rem); color:#fff; gap:.6rem; padding:8px 22px;
}
.sp-hx .sp-marquee-track b svg{ width:17px; height:17px; flex:none; fill:none; stroke:var(--sp-brass); stroke-width:1.5; stroke-linejoin:round }
.sp-hx .sp-marquee-track b:hover svg{ stroke:#fff }

/* --- scroll cue --- */
.sp-hx .sp-scrollcue{ bottom:78px; opacity:calc(1 - var(--hp) * 2) }

/* --- the seam that draws as the hero hands off to the page --- */
.sp-hx::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; z-index:9;
  background:linear-gradient(90deg,transparent,var(--sp-brass),transparent);
  transform:scaleX(var(--hp)); transform-origin:50% 50%; opacity:.9;
}

/* --- mobile --- */
@media (max-width:900px){
  .sp-hx{ height:clamp(560px, 92svh, 820px) }
  .sp-hx-stage{ transform:scale(calc(1 - .05 * var(--hp))); border-radius:calc(18px * var(--hp)) }
  .sp-hx-veil{
    background:
      linear-gradient(0deg, rgba(7,18,29,.96) 8%, rgba(7,18,29,.72) 46%, rgba(7,18,29,.42) 100%),
      linear-gradient(90deg, rgba(7,18,29,.7), rgba(7,18,29,.25));
  }
  .sp-hx-copies{ min-height:auto }
  .sp-hx-copy{ position:relative; inset:auto; display:none }
  .sp-hx-copy.is-on{ display:flex }
  .sp-hx-in{ padding-bottom:120px }
  .sp-hx-head{ max-width:14ch }
  .sp-hx-specs li{ padding:0 .8rem; font-size:.62rem }
  .sp-hx-specs li:nth-child(3){ display:none }
  .sp-hx-arrows{ display:none }
  .sp-hx-rail{
    top:auto; bottom:76px; right:auto; left:clamp(1.15rem,5vw,2.5rem);
    transform:none; flex-direction:row; gap:8px;
  }
  .sp-hx-dot{
    width:64px; padding:0; border-right:0; grid-template-columns:1fr; grid-template-areas:"n" "b";
    gap:.4rem;
  }
  .sp-hx-dot .t{ display:none }
  .sp-hx .sp-marquee{ padding:11px 0 }
  .sp-hx .sp-marquee-track b{ font-size:.85rem; padding:6px 15px }
}
@media (max-width:430px){
  .sp-hx-head{ font-size:clamp(2.3rem,11vw,3rem) }
  .sp-hx-cta{ width:100% }
  .sp-hx-cta .sp-btn{ flex:1 1 100%; text-align:center; justify-content:center }
}

@media (prefers-reduced-motion: reduce){
  .sp-hx-blades.go i{ animation:none }
  .sp-hx-copy > *{ opacity:1 !important; transform:none !important; filter:none !important }
  .sp-hx-slide.is-on .sp-hx-media img{ animation:none }
  .sp-hx-dot.is-on .b i{ animation:none; transform:scaleX(1) }
  .sp-hx-stage{ transform:none; border-radius:0 }
  .sp-hx-in{ transform:none; opacity:1 }
}

/* Hero fills the viewport minus the sticky header, measured at runtime */
.sp-hx{ height:clamp(560px, calc(100svh - var(--sp-head, 74px)), 1000px) }
body.admin-bar .sp-hx{ height:clamp(540px, calc(100svh - var(--sp-head, 106px)), 980px) }
@media (max-width:900px){
  .sp-hx{ height:clamp(540px, calc(100svh - var(--sp-head, 66px)), 860px) }
  body.admin-bar .sp-hx{ height:clamp(520px, calc(100svh - var(--sp-head, 112px)), 840px) }
}
.sp-hx-dot{ color:rgba(234,240,245,.74) }
.sp-hx-dot .t{ text-shadow:0 1px 10px rgba(0,0,0,.6) }

/* =========================================================================
   27. ONE TYPE SYSTEM EVERYWHERE
   Elementor ships its own font stack per widget; point all of it at the
   two families this site actually loads.
   ========================================================================= */
:root{
  --e-global-typography-primary-font-family:'Archivo';
  --e-global-typography-secondary-font-family:'Archivo';
  --e-global-typography-text-font-family:'IBM Plex Sans';
  --e-global-typography-accent-font-family:'Archivo';
}
body,
.elementor-widget-text-editor,.elementor-widget-icon-list,.elementor-widget-image,
footer.elementor-location-footer,header.elementor-location-header,
.woocommerce,.wpforms-container{
  font-family:var(--sp-body) !important;
}
h1,h2,h3,h4,h5,
.elementor-widget-heading .elementor-heading-title,
header.elementor-location-header .elementor-nav-menu a,
.elementor-button,.sp-btn{
  font-family:var(--sp-display-wide) !important;
}
.elementor-widget-heading .elementor-heading-title{ font-variation-settings:'wdth' 110,'wght' 720; letter-spacing:-.012em }
header.elementor-location-header .elementor-nav-menu a{ font-variation-settings:'wdth' 96,'wght' 600 }
footer.elementor-location-footer h1,footer.elementor-location-footer h2,
footer.elementor-location-footer h3,footer.elementor-location-footer h4,
footer.elementor-location-footer .elementor-heading-title{
  font-variation-settings:'wdth' 90,'wght' 680; letter-spacing:.13em; text-transform:uppercase; font-size:.76rem !important;
}

/* Header quote button matches the shield blue exactly */
header.elementor-location-header .elementor-button{
  background:linear-gradient(160deg,var(--sp-blue-lt),var(--sp-blue) 46%,var(--sp-blue-dk)) !important;
  border:1px solid rgba(255,255,255,.16) !important; color:#fff !important;
}

/* =========================================================================
   28. FOOTER SOCIAL — inline SVG, so no icon webfont is downloaded at all
   ========================================================================= */
.sp-soc{ display:flex; gap:10px }
.sp-soc-a{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.22); color:rgba(234,240,245,.85);
  transition:background-color .35s ease, border-color .35s ease, color .35s ease, transform .45s var(--sp-e-out);
}
.sp-soc-a svg{ width:17px; height:17px; fill:currentColor }
.sp-soc-a:hover{
  background:var(--sp-blue); border-color:var(--sp-blue); color:#fff; transform:translateY(-3px);
  box-shadow:0 14px 28px -14px var(--sp-blue-glow);
}

/* Step-process icons are now SVG images; keep them on the brass */
.sp-ue .ue-step-icon img{ width:34px; height:34px; object-fit:contain }

/* =========================================================================
   29. THE NINE ICONS THIS SITE ACTUALLY USES
   Font Awesome was pulling a 153 KB webfont to draw a hamburger, a cross,
   two chevrons and a plus. Those are drawn here in CSS instead, so the
   font is never requested. Scoped deliberately: any other FA icon added
   later still works and simply loads the font again.
   ========================================================================= */
.fa-bars,.fa-times,.fa-xmark,.fa-close,
.fa-angle-down,.fa-angle-up,.fa-chevron-down,.fa-chevron-up,
.fa-plus,.fa-minus{
  font-family:var(--sp-body) !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  position:relative; width:1.15em; height:1.15em; line-height:1; vertical-align:middle;
}
.fa-bars::before,.fa-times::before,.fa-xmark::before,.fa-close::before,
.fa-angle-down::before,.fa-angle-up::before,.fa-chevron-down::before,.fa-chevron-up::before,
.fa-plus::before,.fa-minus::before{ content:"" !important; display:block; position:absolute }

.fa-bars::before{
  width:1em; height:.11em; background:currentColor; border-radius:2px;
  box-shadow:0 -.33em 0 currentColor, 0 .33em 0 currentColor;
}
.fa-times::before,.fa-xmark::before,.fa-close::before{
  width:.95em; height:.11em; background:currentColor; border-radius:2px; transform:rotate(45deg);
}
.fa-times::after,.fa-xmark::after,.fa-close::after{
  content:""; position:absolute; width:.95em; height:.11em; background:currentColor; border-radius:2px; transform:rotate(-45deg);
}
.fa-angle-down::before,.fa-chevron-down::before{
  width:.42em; height:.42em; border-right:.11em solid currentColor; border-bottom:.11em solid currentColor;
  transform:translateY(-.1em) rotate(45deg);
}
.fa-angle-up::before,.fa-chevron-up::before{
  width:.42em; height:.42em; border-right:.11em solid currentColor; border-bottom:.11em solid currentColor;
  transform:translateY(.1em) rotate(-135deg);
}
.fa-plus::before{ width:.78em; height:.11em; background:currentColor; border-radius:2px }
.fa-plus::after{ content:""; position:absolute; width:.11em; height:.78em; background:currentColor; border-radius:2px }
.fa-minus::before{ width:.78em; height:.11em; background:currentColor; border-radius:2px }

/* =========================================================================
   30. MOBILE HERO CORRECTIONS
   The stacked veil was reading almost opaque on a narrow screen, which hid
   the photograph entirely. One vertical gradient, tuned so the copy still
   passes contrast over the darkest part of each image.
   ========================================================================= */
@media (max-width:900px){
  .sp-hx-veil{
    background:linear-gradient(0deg,
      rgba(7,18,29,.94) 0%,
      rgba(7,18,29,.86) 18%,
      rgba(7,18,29,.55) 46%,
      rgba(7,18,29,.30) 72%,
      rgba(7,18,29,.52) 100%) !important;
    opacity:1;
  }
  .sp-hx-grade{ opacity:.3 }
  .sp-hx-media img{ object-position:50% 38% }
  .sp-hx-in{ padding-bottom:118px; justify-content:flex-end }
  .sp-hx-copies{ display:flex; align-items:flex-end }
  .sp-hx-copy{ justify-content:flex-end }
  .sp-hx-head{ margin-bottom:.85rem }
  .sp-hx-lede{ margin-bottom:1.35rem }
  .sp-hx-cta{ margin-bottom:1.25rem }
  .sp-hx-specs{ padding-top:.8rem }
}
@media (max-width:900px){
  /* keep the mark visible on the dark bar whatever the header template */
  header.elementor-location-header img{ max-height:40px; width:auto }
}

/* =========================================================================
   31. CART & CHECKOUT — WooCommerce's "wide" block alignment pulls the
   cart 80px past each edge; on a phone that is 70px off the screen.
   ========================================================================= */
@media (max-width:1100px){
  .wp-block-woocommerce-cart,.wp-block-woocommerce-checkout,
  .wp-block-woocommerce-cart.alignwide,.wp-block-woocommerce-checkout.alignwide{
    margin-inline:0 !important; width:100% !important; max-width:100% !important;
  }
}
.wc-block-components-sidebar-layout .wc-block-components-sidebar{ padding-inline:0 }
.wc-block-cart .wc-block-components-totals-wrapper,
.wc-block-cart .wc-block-components-totals-item{ padding-inline:clamp(12px,3vw,16px) }
.wc-block-components-button:not(.is-link){
  background:linear-gradient(160deg,var(--sp-blue-lt),var(--sp-blue) 46%,var(--sp-blue-dk)) !important;
  color:#fff !important; border:0 !important; border-radius:4px !important;
  font-family:var(--sp-display-wide) !important; font-variation-settings:'wdth' 104,'wght' 680;
}
.wc-block-components-button:not(.is-link) .wc-block-components-button__text{ text-decoration:none !important }
.wc-block-components-product-name{ color:var(--sp-blue) !important; text-decoration:none !important; font-weight:600 }

/* =========================================================================
   32. COOKIE RE-CONSENT BUTTON — removed from the corner. The consent
   banner itself still appears on first visit; the "Cookie preferences"
   link in the footer reopens it.
   ========================================================================= */
button.cookieadmin_re_consent{ display:none !important }


/* =========================================================================
   33. EQUIPMENT-BY-TYPE CARDS
   The homepage category cards carry photographic scenes, so they are graded
   dark. The catalogue page uses studio-on-white product shots, which need
   the opposite treatment: paper ground, full colour, contained not cropped.
   ========================================================================= */
.sp-cat-pack .sp-catimg{ background:var(--sp-paper) !important; aspect-ratio:4/3 }
.sp-cat-pack .sp-catimg::after{
  content:''; position:absolute; inset:auto 0 0 0; height:52%;
  background:linear-gradient(180deg,rgba(11,28,44,0),rgba(11,28,44,.05)); pointer-events:none }
.sp-cat-pack .sp-catimg img{
  object-fit:contain !important; padding:7% 12% 6%;
  filter:none !important; transition:transform .75s var(--sp-e-out) }
.sp-cat-pack .sp-catcard:hover .sp-catimg img{ transform:scale(1.06) }
.sp-cat-pack .sp-catcard:hover .sp-catimg{ background:#fff !important }
@media (max-width:540px){ .sp-cat-pack .sp-catimg img{ padding:6% 10% 5% } }


/* =========================================================================
   34. HERO FRAME 01 — the rooftop photograph
   A phone crops the 16:9 frame to its middle ~30%, which would cut the
   technician out. Anchor this slide left of centre so he stays in shot.
   ========================================================================= */
@media (max-width:900px){
  .sp-hx-slide[data-i="0"] .sp-hx-media img{ object-position:18% 38% }
}


/* =========================================================================
   35. ORDERS GO THROUGH A DISTRIBUTOR
   Nothing is charged on the site, so the checkout's delivery step is really
   a distributor step: no prices against the options, and a standing note
   on the cart and checkout explaining what happens after Send order.
   ========================================================================= */
.sp-flow-note{
  max-width:none; margin:0 0 1.6rem; padding:.95rem 1.15rem;
  background:color-mix(in srgb, var(--sp-blue) 7%, #fff);
  border-left:3px solid var(--sp-blue);
  font-size:.95rem; line-height:1.55; color:var(--sp-navy) }

/* the shipping options are distributors — a price against a name reads wrong */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__secondary-label,
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__secondary-description,
.wc-block-components-shipping-rates-control .wc-block-checkout__shipping-option--free,
.wc-block-components-shipping-rates-control .wc-block-components-formatted-money-amount{
  display:none !important }
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option{
  padding-block:.85rem }
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__label{
  font-weight:600; letter-spacing:.01em }

/* the order summary's shipping line is the distributor's freight, quoted later */
.wc-block-components-totals-shipping .wc-block-components-totals-item__value{ font-size:0 }
.wc-block-components-totals-shipping .wc-block-components-totals-item__value::after{
  content:"Quoted by your distributor"; font-size:.82rem; font-weight:500; opacity:.8 }

@media (max-width:600px){ .sp-flow-note{ padding:.85rem .95rem; font-size:.92rem } }

/* the promise belongs on the cart and checkout, not on the confirmation */
body.woocommerce-order-received .sp-flow-note{ display:none }