.elementor-kit-11{--e-global-color-primary:#00A9FC;--e-global-color-secondary:#074DA0;--e-global-color-text:#7A7A7A;--e-global-color-accent:#9ED4FD;--e-global-color-a955872:#DDDADA;--e-global-color-92d6565:#DFC06B;--e-global-color-d83107b:#16406E;--e-global-typography-primary-font-family:"Alexandria";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Alexandria";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Alexandria";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;color:var( --e-global-color-a955872 );font-family:"Alexandria", Sans-serif;}.elementor-kit-11 e-page-transition{background-color:#FFBC7D;}.elementor-kit-11 h1{font-family:"Alexandria", Sans-serif;}.elementor-kit-11 h2{font-family:"Alexandria", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1190px;}.e-con{--container-max-width:1190px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ---- 1. Elementor global colour variables (light mode) ---- */
html.light-mode body.elementor-kit-11 {
  --e-global-color-primary:   #0998D5; /* unchanged — brand blue works on both */
  --e-global-color-secondary: #074DA0; /* unchanged — reads fine on white */
  --e-global-color-text:      #456b92; /* was #7A7A7A grey — swapped for hero's text-dim */
  --e-global-color-accent:    #1d6fc0; /* was #9ED4FD pale blue — fails contrast on white, darkened */
  --e-global-color-a955872:   #26364a; /* was #DDDADA light grey (body text) — dark navy for light bg */
  --e-global-color-92d6565:   #b8944a; /* was #DFC06B gold — slightly deepened for contrast on white */
  --e-global-color-d83107b:   #16406E; /* unchanged — dark button still reads well on white */
  --e-global-color-d83107b: #c6dfea;
}

/* ---- 2. Literal / hardcoded overrides (light mode) ---- */

/* Page background + default text colour */
html.light-mode body {
  background: #ffffff !important;
  color: #2a3f52 !important;
}

/* Card / section panels that are currently near-black (#030C18) */
html.light-mode .e-con,
html.light-mode .e-flex,
html.light-mode .elementor-widget-wrap {
  background-color: transparent;
}
html.light-mode [style*="background-color: rgb(3, 12, 24)"],
html.light-mode [style*="background-color:#030C18"],
html.light-mode [style*="background-color: #030C18"] {
  background-color: #f5f8fc !important;
}

/* Footer */
html.light-mode footer,
html.light-mode .elementor-location-footer {
  background: #eaf2f9 !important;
  color: #2a3f52 !important;
}
html.light-mode .elementor-location-footer a {
  color: #074DA0 !important;
}

/* Header / nav */
html.light-mode header,
html.light-mode .elementor-location-header {
  color: #2a3f52 !important;
}
html.light-mode .elementor-location-header a,
html.light-mode .elementor-location-header .ab-item {
  color: #0a1f3c !important;
}

html.light-mode .elementor-location-header a:hover,
html.light-mode .elementor-location-header .current_page_item a{
  color: #0998d5 !important;
}

/* Headings and body copy that were set with literal (non-global) colours */
html.light-mode h1, html.light-mode h2, html.light-mode h3,
html.light-mode h4, html.light-mode h5, html.light-mode h6 {
  color: #0a1f3c !important;
}
html.light-mode p, html.light-mode li, html.light-mode span {
  color: inherit;
}

/* Buttons using the default (non-global-color) Elementor style */
html.light-mode .elementor-button {
  background-color: #16406E !important;
  color: #ffffff !important;
}

/* Links */
html.light-mode a {
  color: #0998D5;
}
html.light-mode a:hover {
  color: #1d6fc0;
}

/* CTA */
html.light-mode .cta-sec {
    background-image: none;
  border: 1px solid #0998D5;

}

html.light-mode .elementor-130 .elementor-element.elementor-element-83268f5 .elementor-icon-list-item {
    background: #fff;
}

html.light-mode .elementor-130 .elementor-element.elementor-element-83268f5 .elementor-icon-list-text {
    color: #0998D5 !important;
}

html.light-mode #hero-who {
  background: #f5f8fc;
background: linear-gradient(90deg,rgba(245, 248, 252, 1) 57%, rgba(9, 152, 213, 0.07) 100%);
height: 110%;
}

@media (max-width: 481px) {
  html.light-mode #hero-who {
  display: none;
}  
}

html.light-mode .elementor-39 .elementor-element.elementor-element-ac0ea43 .elementor-nav-menu--dropdown {
    background: #fff;
}

html.light-mode .elementor-39 .elementor-element.elementor-element-ac0ea43 .elementor-nav-menu--dropdown .current-menu-item a {
    background: #efefef;
}

html.light-mode .elementor-location-footer a.elementor-button  {
    color: #fff !important;
}

/* ---- 3. Toggle switch appearance (used in header, see snippet 3) ---- */
.ih-site-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: rgba(255,255,255,0.08);
  border: 1px solid #2f7bc0;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 12px;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #9bc0e4;
  user-select: none;
  transition: border-color .2s, color .2s;
}
.ih-site-toggle:hover { border-color: #5ec2ff; color: #5ec2ff; }
.ih-site-toggle .ih-site-toggle-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #0998D5; box-shadow: 0 0 8px #0998D5; flex-shrink: 0;
}
html.light-mode .ih-site-toggle {
  background: rgba(9,152,213,0.06);
  border-color: #5a97cf;
  color: #456b92;
}
html.light-mode .ih-site-toggle:hover { border-color: #1d6fc0; color: #1d6fc0; }

html.light-mode .elementor-sticky--active {
    background: #fff !important;
}

/* ============================================================
   InsurStack Secondary Hero Graphics — Light Mode
   Paste into: Elementor > Site Settings > Custom CSS
   (add this AFTER the CSS from 1-elementor-custom-css.css —
   order doesn't actually matter since nothing here conflicts,
   but keeping them in sequence makes the panel easier to read)

   WHAT THIS FIXES
   -----------------
   Your homepage hero (#is-hero) already has a full light-mode
   palette built in. Four other pages have their own bespoke
   circuit-board/hardware graphics that were built dark-only,
   with no light variant at all — so when the page background
   goes white, these panels stayed dark, creating a jarring
   half-light/half-dark split with unreadable dark-on-dark text:

     #wwd-hero      — Services / "What We Do"
     #wim-hero      — Why It Matters
     #abu-hero      — About Us
     #is-hero-mini  — Who We Help

   Each one recolours the same way your homepage hero does in
   light mode: white/pale-blue board panels, light component
   bodies, the brand blue (#0998D5) for accents and active dots.
   #is-hero-mini reuses the exact same CSS classes as your
   homepage hero (metal-base, comp-body, etc.), so its block below
   is a direct copy of your homepage hero's own light-mode CSS,
   just re-scoped. The other three use their own class prefixes
   (wd-, w-, ab-) but the same underlying component types, so the
   same colour choices are reused for consistency across pages.

   All of this was tested live on your staging site (each page,
   toggled between light and dark) before being finalised here.
   ============================================================ */

/* ---- Services / What We Do (#wwd-hero) ---- */
html.light-mode #wwd-hero {
  --wd-board-1: #ffffff; --wd-board-2: #f5f8fc; --wd-board-3: #eaf2f9;
  --wd-copper: #9bbdd8; --wd-cur: #0998D5; --wd-glow: rgba(9,152,213,0.45);
}
html.light-mode .wd-pcb { fill:#ccdde9; stroke:#8ab0cc; }
html.light-mode .wd-metal { fill:#d8e6f0; stroke:#b0c8de; }
html.light-mode .wd-fin { fill:#c8d8e8; }
html.light-mode .wd-fin-hi { fill:rgba(255,255,255,0.6); }
html.light-mode .wd-fan-housing { fill:#ccdde9; stroke:#8ab0cc; }
html.light-mode .wd-blade { fill:#b8ccd8; }
html.light-mode .wd-hub { fill:#ddeaf5; stroke:#6f97bb; }
html.light-mode .wd-hub-dot { fill:#0998D5; }
html.light-mode .wd-via { fill:#ffffff; }
html.light-mode .wd-comp { fill:#ddeaf5; stroke:#6f97bb; }
html.light-mode .wd-comp-top { fill:rgba(9,152,213,0.15); }
html.light-mode .wd-screw-out { fill:#ddeaf5; stroke:#8ab0cc; }
html.light-mode .wd-screw-in { fill:#eef5fb; stroke:#6f97bb; }
html.light-mode .wd-screw-slot { stroke:#6f97bb; }

/* ---- Why It Matters (#wim-hero) ---- */
html.light-mode #wim-hero {
  --w-board-1: #ffffff; --w-board-2: #f5f8fc; --w-board-3: #eaf2f9;
  --w-copper: #9bbdd8; --w-cur: #0998D5; --w-glow: rgba(9,152,213,0.45);
}
html.light-mode .w-metal { fill:#d8e6f0; stroke:#b0c8de; }
html.light-mode .w-fin { fill:#c8d8e8; }
html.light-mode .w-fin-hi { fill:rgba(255,255,255,0.6); }
html.light-mode .w-shimmer { stroke: rgba(9,152,213,0.18); }
html.light-mode .w-via { fill:#ffffff; }
html.light-mode .w-ic { fill:#ddeaf5; stroke:#6f97bb; }
html.light-mode .w-ic-dot { fill:#0998D5; }
html.light-mode .w-comp { fill:#ddeaf5; stroke:#6f97bb; }
html.light-mode .w-comp-top { fill:rgba(9,152,213,0.15); }
html.light-mode .w-screw-out { fill:#ddeaf5; stroke:#8ab0cc; }
html.light-mode .w-screw-in { fill:#eef5fb; stroke:#6f97bb; }
html.light-mode .w-screw-slot { stroke:#6f97bb; }

/* ---- About Us (#abu-hero) ---- */
html.light-mode #abu-hero {
  --ab-board-1: #ffffff; --ab-board-2: #f5f8fc; --ab-board-3: #eaf2f9;
  --ab-copper: #9bbdd8; --ab-cur: #0998D5; --ab-glow: rgba(9,152,213,0.45);
}
html.light-mode .ab-ram, html.light-mode .ab-ram-hi { fill:#ddeaf5; stroke:#5a8cba; }
html.light-mode .ab-ram-label, html.light-mode .ab-ram-label-hi { fill:rgba(9,152,213,0.12); }
html.light-mode .ab-scan { stroke: rgba(9,152,213,0.18); }
html.light-mode .ab-act { fill:#0998D5; }
html.light-mode .ab-ic { fill:#ddeaf5; stroke:#6f97bb; }
html.light-mode .ab-ic-dot { fill:#0998D5; }
html.light-mode .ab-cap { fill:#9bbdd8; stroke:#6fa3c8; }
html.light-mode .ab-cap-top { fill:#b8d0e4; stroke:#8ab8d4; }
html.light-mode .ab-screw-out { fill:#ddeaf5; stroke:#8ab0cc; }
html.light-mode .ab-screw-in { fill:#eef5fb; stroke:#6f97bb; }
html.light-mode .ab-screw-slot { stroke:#6f97bb; }
html.light-mode .ab-via { fill:#ffffff; }

/* ---- Who We Help (#is-hero-mini) ----
   This one reuses the exact class names your homepage hero uses,
   so this block is a direct copy of your homepage hero's own
   light-mode CSS, just re-scoped to #is-hero-mini and driven by
   the sitewide html.light-mode class instead of a local toggle. */
html.light-mode #is-hero-mini .metal-base { fill:#d8e6f0; stroke:#b0c8de; }
html.light-mode #is-hero-mini .fin { fill:#c8d8e8; }
html.light-mode #is-hero-mini .fin-hi { fill:rgba(255,255,255,0.6); }
html.light-mode #is-hero-mini .ic-body { fill:#ddeaf5; stroke:#6f97bb; }
html.light-mode #is-hero-mini .ic-text { fill:#1d5a8c; }
html.light-mode #is-hero-mini .ic-dot { fill:#0998D5; }
html.light-mode #is-hero-mini .ram-stick { fill:#ddeaf5; stroke:#5a8cba; }
html.light-mode #is-hero-mini .ram-label { fill:rgba(9,152,213,0.12); }
html.light-mode #is-hero-mini .conn-body,
html.light-mode #is-hero-mini .card-pcb,
html.light-mode #is-hero-mini .fan-housing { fill:#ccdde9; }
html.light-mode #is-hero-mini .blade { fill:#b8ccd8; }
html.light-mode #is-hero-mini .fan-hub { fill:#ddeaf5; }
html.light-mode #is-hero-mini .cap-body { fill:#9bbdd8; stroke:#6fa3c8; }
html.light-mode #is-hero-mini .cap-top { fill:#b8d0e4; stroke:#8ab8d4; }
html.light-mode #is-hero-mini .screw-out { fill:#ddeaf5; stroke:#8ab0cc; }
html.light-mode #is-hero-mini .screw-in { fill:#eef5fb; stroke:#6f97bb; }
html.light-mode #is-hero-mini .screw-slot { stroke:#6f97bb; }
html.light-mode #is-hero-mini .comp-body { fill:#ddeaf5; stroke:#6f97bb; }
html.light-mode #is-hero-mini .comp-top { fill:rgba(9,152,213,0.15); }
html.light-mode #is-hero-mini .pad { fill:#5a97cf; }
html.light-mode #is-hero-mini .via { fill:#ffffff; }
html.light-mode #is-hero-mini .cpu-body { fill:#ddeaf5; stroke:#5a97cf; }
html.light-mode #is-hero-mini .cpu-inner { fill:#eef5fb; stroke:#9bbdd8; }
html.light-mode #is-hero-mini .cpu-die { fill:#c8dced; stroke:#5a97cf; }
html.light-mode #is-hero-mini .cpu-pin { fill:#8ab0cc; }
html.light-mode #is-hero-mini .cpu-dot { fill:#0998D5; }
html.light-mode #is-hero-mini {
  --ih-board-1: #ffffff; --ih-board-2: #f5f8fc; --ih-board-3: #eaf2f9;
  --ih-copper: #9bbdd8; --ih-cur: #0998D5; --ih-glow: rgba(9,152,213,0.45);
}

html.light-mode .cta-sec {
  background: linear-gradient(160deg, #ffffff 0%, #eaf5fc 100%);
  border-color: #0998D5;
  border-width: 1.5px;
  box-shadow:
    0 0 0 1px rgba(9,152,213,0.12) inset,
    0 18px 45px rgba(9,152,213,0.16),
    0 0 60px 10px rgba(9,152,213,0.10);
}
html.light-mode .cta-acc-base { stroke: #6fa3c8; }
html.light-mode .cta-acc-pad { fill: #ddeaf5; stroke: #5a97cf; }
html.light-mode .cta-acc-via { fill: #ffffff; stroke: #5a97cf; }
html.light-mode .cta-acc-dot { fill: #0998D5; opacity: 1; }
html.light-mode .cta-acc-cur { stroke: #0998D5; }

/* ============================================================
   A NOTE ON "hero-who"
   ============================================================
   While testing Who We Help, I found an existing rule already in
   your site for `html.light-mode #hero-who` (a plain background
   gradient, not a graphic). That's a different, empty element on
   that page — unrelated to #is-hero-mini above — and I've left it
   exactly as it was. If you added that yourself, no action needed;
   if you're not sure where it came from, it's worth a quick check
   in Elementor's per-element Custom CSS for that page.
   ============================================================ */

.is-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #00ff41;
  /*text-shadow: 0 0 8px rgba(0, 255, 65, 0.8);*/
  margin-bottom: 12px;
}

.light-mode .is-eyebrow {
    color: #08da3e;
}

.is-eyebrow::before {
  content: ">";
  font-size: 16px;
  animation: is-cur-blink 1.2s step-end infinite;
}

.is-eyebrow::after {
  content: "_";
  animation: is-cur-blink 1.2s step-end infinite;
  animation-delay: 1s;
}

@keyframes is-cur-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.ci-wrap{display:inline-block;width:80px;height:80px}
.ci-wrap svg{display:block}
.ci-board{fill:#071a33;stroke:#1d4d6e;stroke-width:1.5}
.ci-trace{fill:none;stroke:#16406e;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ci-trace-hi{fill:none;stroke:#3a86c8;stroke-width:0.7;stroke-linecap:round;stroke-linejoin:round;opacity:0.6}
.ci-pad{fill:#16406e;stroke:#3a86c8;stroke-width:0.8}
.ci-via{fill:#04101f;stroke:#3a86c8;stroke-width:1}
.ci-cur{fill:none;stroke:#8fe0ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(120,210,255,0.8));stroke-dasharray:10 calc(var(--len)*1px);animation:ci-flow linear infinite;animation-duration:var(--dur)}
@keyframes ci-flow{from{stroke-dashoffset:calc(var(--len)*1px)}to{stroke-dashoffset:0}}
.ci-chip{fill:#0a1e38;stroke:#3a86c8;stroke-width:1}
.ci-chip-inner{fill:#061428;stroke:#2a6090;stroke-width:0.5}
.ci-pin{fill:#c7d8ec}
.ci-dot{fill:#8fe0ff;opacity:0.9}
.ci-glyph{fill:none;stroke:#5ec2ff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ci-glyph-fill{fill:#5ec2ff}

/* ---- Divider trace ---- */
.ci-divider{width:100%;display:block}
.ci-div-base{stroke:#1d4d6e;stroke-width:1.5;fill:none}
.ci-div-cur{stroke:#8fe0ff;stroke-width:2;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(120,210,255,0.8));stroke-dasharray:24 600;animation:ci-div-flow 5s linear infinite}
@keyframes ci-div-flow{from{stroke-dashoffset:624}to{stroke-dashoffset:0}}
.ci-div-pad{fill:#16406e;stroke:#3a86c8;stroke-width:0.8}/* End custom CSS */