.elementor-40 .elementor-element.elementor-element-1549967{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}/* Start custom CSS *//* =====================================================================
   SUCCESS STORAGE SOLUTIONS - STYLE ARMOR
   Paste this at the VERY BOTTOM of
   Elementor > Site Settings > Custom CSS
   It must be the LAST thing in the box so it always wins.

   This forces colours, fonts and button states across EVERY custom
   section and page (home, about, services, racking systems, and any
   future page using an id starting with "ssx").

   The theme's Global Style Kit cannot override any of it.

   After pasting: Elementor > Tools > Regenerate CSS & Data,
   then hard refresh with Ctrl+Shift+R.
   ===================================================================== */

:root{
  --ss-blue:#193F66;
  --ss-blue-dark:#0d2440;
  --ss-blue-light:#2b5c8f;
  --ss-blue-pale:#eaf1f8;
  --ss-blue-ice:#9dc3e8;
  --ss-ink:#12212f;
  --ss-body:#4d6076;
  --ss-soft:#7b8ea3;
  --ss-line:#e3e9f0;
  --ss-bg-alt:#f6f9fc;
}


/* =====================================================================
   1. HEADINGS - always dark ink, never bleached
   ===================================================================== */
html body [id^="ssx"] h1,
html body [id^="ssx"] h2,
html body [id^="ssx"] h3,
html body [id^="ssx"] h4{
  color:var(--ss-ink) !important;
  -webkit-text-fill-color:var(--ss-ink) !important;
  font-family:'Barlow Condensed','Oswald',sans-serif !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  opacity:1 !important;
  text-shadow:none !important;
  letter-spacing:.01em !important;
}

/* ...unless they sit on a dark band, then always white */
html body [id^="ssx"] [class*="hero"] h1,
html body [id^="ssx"] [class*="hero"] h2,
html body [id^="ssx"] [class*="band"] h2,
html body [id^="ssx"] [class*="band"] h3,
html body [id^="ssx"] [class*="cta"] h2,
html body [id^="ssx"] [class*="cta"] b,
html body [id^="ssx"] [class*="stats"] b,
html body [id^="ssx"] [class*="--blue"] h3,
html body [id^="ssx"] [class*="--dark"] h3,
html body [id^="ssx"] [class*="partner"] b{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
html body [id^="ssx"] [class*="hero"] h1 em{
  color:var(--ss-blue-ice) !important;
  -webkit-text-fill-color:var(--ss-blue-ice) !important;
}


/* =====================================================================
   2. BODY TEXT
   ===================================================================== */
html body [id^="ssx"] p,
html body [id^="ssx"] li,
html body [id^="ssx"] span,
html body [id^="ssx"] td,
html body [id^="ssx"] summary{
  opacity:1 !important;
  font-family:'Inter','Roboto',sans-serif !important;
}
html body [id^="ssx"] [class*="sub"],
html body [id^="ssx"] [class*="card"] p{
  color:var(--ss-body) !important;
  -webkit-text-fill-color:var(--ss-body) !important;
}
html body [id^="ssx"] [class*="kick"]{
  color:var(--ss-blue-light) !important;
  -webkit-text-fill-color:var(--ss-blue-light) !important;
  font-family:'Barlow Condensed','Oswald',sans-serif !important;
}
/* text on dark bands */
html body [id^="ssx"] [class*="hero"] p,
html body [id^="ssx"] [class*="band"] p,
html body [id^="ssx"] [class*="band"] li,
html body [id^="ssx"] [class*="cta"] span,
html body [id^="ssx"] [class*="--blue"] p,
html body [id^="ssx"] [class*="--dark"] p{
  color:rgba(255,255,255,.84) !important;
  -webkit-text-fill-color:rgba(255,255,255,.84) !important;
}


/* =====================================================================
   3. BUTTONS - every state, on every page
   ===================================================================== */
html body [id^="ssx"] a[class*="btn"],
html body [id^="ssx"] a[class*="btn"]:link,
html body [id^="ssx"] a[class*="btn"]:visited{
  background-color:var(--ss-blue) !important;
  background-image:none !important;
  border:2px solid var(--ss-blue) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-decoration:none !important;
  border-radius:4px !important;
  opacity:1 !important;
}
html body [id^="ssx"] a[class*="btn"]:hover,
html body [id^="ssx"] a[class*="btn"]:focus,
html body [id^="ssx"] a[class*="btn"]:active{
  background-color:var(--ss-blue-dark) !important;
  border-color:var(--ss-blue-dark) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* white variants (on blue/dark backgrounds) */
html body [id^="ssx"] a[class*="--white"],
html body [id^="ssx"] a[class*="--white"]:link,
html body [id^="ssx"] a[class*="--white"]:visited,
html body [id^="ssx"] a[class*="--solid"],
html body [id^="ssx"] a[class*="--solid"]:link,
html body [id^="ssx"] a[class*="--solid"]:visited{
  background-color:#ffffff !important;
  background-image:none !important;
  border-color:#ffffff !important;
  color:var(--ss-blue) !important;
  -webkit-text-fill-color:var(--ss-blue) !important;
}
html body [id^="ssx"] a[class*="--white"]:hover,
html body [id^="ssx"] a[class*="--white"]:focus,
html body [id^="ssx"] a[class*="--solid"]:hover,
html body [id^="ssx"] a[class*="--solid"]:focus{
  background-color:var(--ss-blue-ice) !important;
  border-color:var(--ss-blue-ice) !important;
  color:var(--ss-blue-dark) !important;
  -webkit-text-fill-color:var(--ss-blue-dark) !important;
}

/* ghost variants */
html body [id^="ssx"] a[class*="--ghost"],
html body [id^="ssx"] a[class*="--ghost"]:link,
html body [id^="ssx"] a[class*="--ghost"]:visited{
  background-color:transparent !important;
  background-image:none !important;
  border-color:rgba(255,255,255,.5) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
html body [id^="ssx"] a[class*="--ghost"]:hover,
html body [id^="ssx"] a[class*="--ghost"]:focus{
  background-color:#ffffff !important;
  border-color:#ffffff !important;
  color:var(--ss-blue) !important;
  -webkit-text-fill-color:var(--ss-blue) !important;
}


/* =====================================================================
   4. LINKS AND CARDS - never inherit theme link colour
   ===================================================================== */
html body [id^="ssx"] a{
  text-decoration:none !important;
  transition:all .22s cubic-bezier(.22,1,.36,1) !important;
}
html body [id^="ssx"] a[class*="card"],
html body [id^="ssx"] a[class*="tile"],
html body [id^="ssx"] a[class*="item"]{
  color:inherit !important;
}
html body [id^="ssx"] [class*="__link"]{
  color:var(--ss-blue) !important;
  -webkit-text-fill-color:var(--ss-blue) !important;
}
html body [id^="ssx"] [class*="card"]:hover [class*="__link"]{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}


/* =====================================================================
   5. ELEMENTOR NATIVE BUTTONS - header CALL US NOW, hero buttons
   ===================================================================== */
html body .elementor-button,
html body .elementor-button:link,
html body .elementor-button:visited,
html body a.elementor-button{
  background-color:var(--ss-blue) !important;
  background-image:none !important;
  border-color:var(--ss-blue) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
html body .elementor-button:hover,
html body .elementor-button:focus,
html body .elementor-button:active{
  background-color:var(--ss-blue-dark) !important;
  border-color:var(--ss-blue-dark) !important;
  color:#ffffff !important;
}

/* no red tap flash on mobile */
html body [id^="ssx"] a,
html body [id^="ssx"] button,
html body .elementor-button{
  -webkit-tap-highlight-color:rgba(25,63,102,.18) !important;
}

/* focus ring */
html body [id^="ssx"] a:focus-visible,
html body [id^="ssx"] button:focus-visible{
  outline:3px solid var(--ss-blue-ice) !important;
  outline-offset:3px !important;
}


/* =====================================================================
   6. LAYOUT - no gaps, full bleed, sticky safe
   ===================================================================== */
.elementor-widget-html:has(.ssx-full),
.elementor-widget-container:has(.ssx-full),
.elementor-widget:has(.ssx-full),
.elementor-element:has(.ssx-full),
.e-con-inner:has(.ssx-full),
.e-con:has(.ssx-full),
.e-con-full:has(.ssx-full),
.elementor-section:has(.ssx-full),
.elementor-column:has(.ssx-full){
  padding:0 !important;
  margin:0 !important;
  --padding-top:0px !important; --padding-right:0px !important;
  --padding-bottom:0px !important; --padding-left:0px !important;
  --margin-top:0px !important; --margin-bottom:0px !important;
  --row-gap:0px !important; --column-gap:0px !important;
  max-width:none !important; width:100% !important; border:0 !important;
}
html, body{ overflow-x:clip !important; }


/* =====================================================================
   7. MOBILE
   ===================================================================== */
@media (max-width:860px){
  html body [id^="ssx"]{ max-width:100vw !important; }
  html body [id^="ssx"] img{ max-width:100% !important; height:auto !important; }
  html body [id^="ssx"] a[class*="btn"]{
    width:100% !important; justify-content:center !important; min-height:50px !important;
  }
  html body [id^="ssx"] p{ font-size:14.5px !important; line-height:1.6 !important; }
  html body [id^="ssx"] h2{ overflow-wrap:break-word !important; }
}
@media (max-width:420px){
  html body [id^="ssx"] a, html body [id^="ssx"] button{ min-height:46px !important; }
}/* End custom CSS */