/*!
 * wa8-chrome.css
 * © 2026 WeActive8 LLC. All rights reserved.
 *
 * Hand-authored chrome-layer overrides for weactive8.com. Originally
 * extracted from template <style> blocks in early development; the
 * source-of-truth was retired in Wave 7c of the Webflow rip and the
 * surviving rules below are maintained as WeActive8 work-product.
 * Served at /wa8-chrome.css; layout.tsx emits the <link> tag after
 * /wa8/wa8-utilities.css so chrome overrides win the cascade.
 */
/* block 1 of 3 from template/index.html */
@media (min-width:992px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e9"] {-webkit-transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f901"] {-webkit-transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="7deb21ca-d5c6-430a-d58f-8b87da915f7e"] {-webkit-transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="347694f5-ebfd-6e06-aa39-42dd013c8a4b"] {-webkit-transform:translate3d(-42vw, 51vh, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-42vw, 51vh, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-42vw, 51vh, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-42vw, 51vh, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="347694f5-ebfd-6e06-aa39-42dd013c8a46"] {-webkit-transform:translate3d(-34vw, -37vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-34vw, -37vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-34vw, -37vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-34vw, -37vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="347694f5-ebfd-6e06-aa39-42dd013c8a50"] {-webkit-transform:translate3d(-62vw, 44vh, 0) scale3d(1.5, 1.5, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-62vw, 44vh, 0) scale3d(1.5, 1.5, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-62vw, 44vh, 0) scale3d(1.5, 1.5, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-62vw, 44vh, 0) scale3d(1.5, 1.5, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:1;}html.w-mod-js:not(.w-mod-ix) [data-w-id="347694f5-ebfd-6e06-aa39-42dd013c8a55"] {-webkit-transform:translate3d(-8vw, 59vh, 0) scale3d(0.8, 0.8, 1) rotateX(0) rotateY(0) rotateZ(0) skew(7deg, 0);-moz-transform:translate3d(-8vw, 59vh, 0) scale3d(0.8, 0.8, 1) rotateX(0) rotateY(0) rotateZ(0) skew(7deg, 0);-ms-transform:translate3d(-8vw, 59vh, 0) scale3d(0.8, 0.8, 1) rotateX(0) rotateY(0) rotateZ(0) skew(7deg, 0);transform:translate3d(-8vw, 59vh, 0) scale3d(0.8, 0.8, 1) rotateX(0) rotateY(0) rotateZ(0) skew(7deg, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="347694f5-ebfd-6e06-aa39-42dd013c8a41"] {-webkit-transform:translate3d(-8vw, -10vh, 0) scale3d(2, 2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-8vw, -10vh, 0) scale3d(2, 2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-8vw, -10vh, 0) scale3d(2, 2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-8vw, -10vh, 0) scale3d(2, 2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}}@media (max-width:991px) and (min-width:768px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"] {-webkit-transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="347694f5-ebfd-6e06-aa39-42dd013c8a4b"] {-webkit-transform:translate3d(-42vw, 51vh, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-42vw, 51vh, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-42vw, 51vh, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-42vw, 51vh, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="347694f5-ebfd-6e06-aa39-42dd013c8a46"] {-webkit-transform:translate3d(-34vw, -37vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-34vw, -37vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-34vw, -37vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-34vw, -37vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="347694f5-ebfd-6e06-aa39-42dd013c8a50"] {-webkit-transform:translate3d(-62vw, 44vh, 0) scale3d(1.5, 1.5, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-62vw, 44vh, 0) scale3d(1.5, 1.5, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-62vw, 44vh, 0) scale3d(1.5, 1.5, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-62vw, 44vh, 0) scale3d(1.5, 1.5, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:1;}html.w-mod-js:not(.w-mod-ix) [data-w-id="347694f5-ebfd-6e06-aa39-42dd013c8a55"] {-webkit-transform:translate3d(-8vw, 59vh, 0) scale3d(0.8, 0.8, 1) rotateX(0) rotateY(0) rotateZ(0) skew(7deg, 0);-moz-transform:translate3d(-8vw, 59vh, 0) scale3d(0.8, 0.8, 1) rotateX(0) rotateY(0) rotateZ(0) skew(7deg, 0);-ms-transform:translate3d(-8vw, 59vh, 0) scale3d(0.8, 0.8, 1) rotateX(0) rotateY(0) rotateZ(0) skew(7deg, 0);transform:translate3d(-8vw, 59vh, 0) scale3d(0.8, 0.8, 1) rotateX(0) rotateY(0) rotateZ(0) skew(7deg, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="347694f5-ebfd-6e06-aa39-42dd013c8a41"] {-webkit-transform:translate3d(-8vw, -10vh, 0) scale3d(2, 2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-8vw, -10vh, 0) scale3d(2, 2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-8vw, -10vh, 0) scale3d(2, 2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-8vw, -10vh, 0) scale3d(2, 2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}}@media (max-width:767px) and (min-width:480px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"] {-webkit-transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="347694f5-ebfd-6e06-aa39-42dd013c8a4b"] {-webkit-transform:translate3d(-42vw, 51vh, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-42vw, 51vh, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-42vw, 51vh, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-42vw, 51vh, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="347694f5-ebfd-6e06-aa39-42dd013c8a46"] {-webkit-transform:translate3d(-34vw, -37vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-34vw, -37vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-34vw, -37vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-34vw, -37vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="347694f5-ebfd-6e06-aa39-42dd013c8a50"] {-webkit-transform:translate3d(-62vw, 44vh, 0) scale3d(1.5, 1.5, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-62vw, 44vh, 0) scale3d(1.5, 1.5, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-62vw, 44vh, 0) scale3d(1.5, 1.5, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-62vw, 44vh, 0) scale3d(1.5, 1.5, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:1;}html.w-mod-js:not(.w-mod-ix) [data-w-id="347694f5-ebfd-6e06-aa39-42dd013c8a55"] {-webkit-transform:translate3d(-8vw, 59vh, 0) scale3d(0.8, 0.8, 1) rotateX(0) rotateY(0) rotateZ(0) skew(7deg, 0);-moz-transform:translate3d(-8vw, 59vh, 0) scale3d(0.8, 0.8, 1) rotateX(0) rotateY(0) rotateZ(0) skew(7deg, 0);-ms-transform:translate3d(-8vw, 59vh, 0) scale3d(0.8, 0.8, 1) rotateX(0) rotateY(0) rotateZ(0) skew(7deg, 0);transform:translate3d(-8vw, 59vh, 0) scale3d(0.8, 0.8, 1) rotateX(0) rotateY(0) rotateZ(0) skew(7deg, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="347694f5-ebfd-6e06-aa39-42dd013c8a41"] {-webkit-transform:translate3d(-8vw, -10vh, 0) scale3d(2, 2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-8vw, -10vh, 0) scale3d(2, 2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-8vw, -10vh, 0) scale3d(2, 2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-8vw, -10vh, 0) scale3d(2, 2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}}@media (max-width:479px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"] {-webkit-transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 24px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="347694f5-ebfd-6e06-aa39-42dd013c8a4b"] {-webkit-transform:translate3d(-42vw, 51vh, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-42vw, 51vh, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-42vw, 51vh, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-42vw, 51vh, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="347694f5-ebfd-6e06-aa39-42dd013c8a46"] {-webkit-transform:translate3d(-34vw, -37vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-34vw, -37vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-34vw, -37vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-34vw, -37vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="347694f5-ebfd-6e06-aa39-42dd013c8a50"] {-webkit-transform:translate3d(-62vw, 44vh, 0) scale3d(1.5, 1.5, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-62vw, 44vh, 0) scale3d(1.5, 1.5, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-62vw, 44vh, 0) scale3d(1.5, 1.5, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-62vw, 44vh, 0) scale3d(1.5, 1.5, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:1;}html.w-mod-js:not(.w-mod-ix) [data-w-id="347694f5-ebfd-6e06-aa39-42dd013c8a55"] {-webkit-transform:translate3d(-8vw, 59vh, 0) scale3d(0.8, 0.8, 1) rotateX(0) rotateY(0) rotateZ(0) skew(7deg, 0);-moz-transform:translate3d(-8vw, 59vh, 0) scale3d(0.8, 0.8, 1) rotateX(0) rotateY(0) rotateZ(0) skew(7deg, 0);-ms-transform:translate3d(-8vw, 59vh, 0) scale3d(0.8, 0.8, 1) rotateX(0) rotateY(0) rotateZ(0) skew(7deg, 0);transform:translate3d(-8vw, 59vh, 0) scale3d(0.8, 0.8, 1) rotateX(0) rotateY(0) rotateZ(0) skew(7deg, 0);}html.w-mod-js:not(.w-mod-ix) [data-w-id="347694f5-ebfd-6e06-aa39-42dd013c8a41"] {-webkit-transform:translate3d(-8vw, -10vh, 0) scale3d(2, 2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-8vw, -10vh, 0) scale3d(2, 2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-8vw, -10vh, 0) scale3d(2, 2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-8vw, -10vh, 0) scale3d(2, 2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);}}

/* block 2 of 3 from template/index.html */
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/* block 3 of 3 from template/index.html */
/* Lock horizontal scroll — mobile bounce fix.
   `clip` instead of `hidden` because `hidden` creates an implicit
   scroll container on the viewport, which silently disables
   `position: sticky` on every descendant (article TOC + reading
   tools sidebar). `clip` blocks the same overflow without that
   side effect. */
html, body {
  overflow-x: clip !important;
  max-width: 100vw !important;
}

/* WeActive8 Nav */

/* Brand color overrides */
:root {
  --wa8-brand-1: #2268EE !important;
  --wa8-brand-2: #88EF3E !important;
  --wa8-brand-3: #2268EE !important;
  --wa8-brand-4: #60d2ff !important;
}
.navbar-logo { filter: brightness(0) invert(1) !important; height: 28px !important; width: auto !important; }
.navbar-top-line, .navbar-notch-left, .navbar-notch-right, .w-commerce-commercecartwrapper { display: none !important; }

/* Fixed wrapper — full viewport width, transparent background */
.navbar-wrapper {
  position: fixed !important;
  top: 16px !important;
  left: 0 !important; right: 0 !important;
  z-index: 9999 !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}
.navbar-content {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Glass pill */
.navbar.w-nav {
  background: rgba(0,0,0,0.17) !important;
  backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 60px !important;
  box-shadow: none !important;
  height: auto !important;
  --globals--navbar-height: auto !important;
  box-sizing: content-box !important;
  padding: 16px 36px !important;
  position: relative !important;
  overflow: visible !important;
}

/* Navbar row */
.navbar-row {
  align-items: center !important;
  overflow: visible !important;
}

/* Nav links */
.nav-link.w-nav-link, .dropdown-toggle.w-dropdown-toggle {
  color: rgba(255,255,255,0.88) !important;
  font-size: var(--typography--h5-size) !important;
  font-family: 'Google Sans Flex', Arial, sans-serif !important;
  letter-spacing: -0.01em !important;
}
.nav-link.w-nav-link:hover { color: #fff !important; opacity: 1 !important; }
.dropdown-toggle.w-dropdown-toggle:hover { color: #fff !important; opacity: 1 !important; }
.square-small { background: #88EF3E !important; border-radius: 0 !important; }
.square-small.square-blue { background: #2268EE !important; }

/* ── Dropdown panels — dark bg, BLACK shadow, no blue ── */
.dropdown-element.w-dropdown-list {
  background: rgba(8,14,32,0.97) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 2px 12px rgba(0,0,0,0.3) !important;
}

/* Desktop chrome nav-pill is owned by <DesktopMegaNav /> on
   screens >= 992px. The chrome's navbar-wrapper is hidden by a
   media query inside that component's <style> block, so all the
   per-trigger dropdown hover/bridge rules that used to live here
   are no longer load-bearing on either viewport (mobile uses the
   wa8-slide-nav drawer, not these dropdowns). The chrome's
   9-dots launcher is mounted separately via template.dotsHtml
   and unaffected. */
.dropdown-wide-trigger > .dropdown-element.w-dropdown-list {
  display: block !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(12px) !important;
  transition: opacity 0.22s ease, transform 0.22s ease !important;
  border-color: transparent !important;
  box-shadow: none !important;
  margin-top: 18px !important;
}
.dropdown-wide-trigger:hover > .dropdown-element.w-dropdown-list {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 2px 12px rgba(0,0,0,0.3) !important;
}

/* Information dropdown — same dropdown-panel hover behavior. The
   trigger's own ::after bridge is declared above alongside
   dropdown-wide-trigger so both panels share the full-width
   bridge geometry. */
.nav-dropdown.relative > .dropdown-element.w-dropdown-list {
  display: block !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(12px) !important;
  transition: opacity 0.22s ease, transform 0.22s ease !important;
  border-color: transparent !important;
  box-shadow: none !important;
  margin-top: 18px !important;
}
.nav-dropdown.relative:hover > .dropdown-element.w-dropdown-list {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 2px 12px rgba(0,0,0,0.3) !important;
}

/* ── Dropdown content — WHITE headings, no blue ── */
.dropdown-link { color: rgba(255,255,255,0.82) !important; transition: color 0.2s ease, opacity 0.2s ease !important; }
.dropdown-link:hover { color: #88EF3E !important; opacity: 1 !important; }
.narrow-dropdown-link { color: rgba(255,255,255,0.82) !important; display: block !important; padding: 10px 16px !important; border-radius: 8px !important; background: transparent !important; opacity: 1 !important; transition: color 0.2s ease, opacity 0.2s ease !important; }
.narrow-dropdown-link:hover { background: transparent !important; color: #2268EE !important; opacity: 1 !important; }
.wa8-bold { color: #ffffff !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; font-weight: 700 !important; }
.dropdown-wide { color: rgba(255,255,255,0.85) !important; }
.dropdown-wide-bottom { border-top-color: rgba(255,255,255,0.1) !important; }
.icon-link-box { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 12px !important; transition: all 0.2s !important; }
.icon-link-box:hover { background: rgba(255,255,255,0.12) !important; }
.icon-link-box-title { color: #fff !important; }
.icon-link-box-text, .wa8-body-text { color: rgba(255,255,255,0.55) !important; }
.icon-link-text .wa8-bold { color: rgba(255,255,255,0.85) !important; font-size: inherit !important; text-transform: none !important; letter-spacing: normal !important; }
.dropdown-narrow { background-color: rgba(8,14,32,0.97) !important; padding: 12px !important; border-radius: 14px !important; top: 0 !important; font-size: var(--typography--h5-size) !important; border: 1px solid rgba(255,255,255,0.12) !important; box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 2px 12px rgba(0,0,0,0.3) !important; }

/* ── Search dropdown ─ just the input, no wrapper box ── */
.search-dropdown.w-dropdown { overflow: visible !important; }
.search-dropdown-trigger { overflow: visible !important; }
.search-dropdown-element.w-dropdown-list {
  overflow: visible !important;
  min-width: 300px !important;
  right: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  margin-top: 10px !important;
  padding: 0 !important;
}
.search-dropdown-wrapper {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.search-dropdown-form {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.search-form-input.w-input {
  background: #0a0e1a !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 12px !important;
  color: #fff !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
.search-form-input.w-input:focus {
  border-color: rgba(255,255,255,0.25) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  outline: none !important;
}
.search-form-input.w-input::placeholder { color: rgba(255,255,255,0.35) !important; }
.search-button-wrapper { display: none !important; }
.nav-controls { overflow: visible !important; }
.nav-contents { overflow: visible !important; }
.nav-menu.w-nav-menu { overflow: visible !important; }

/* ── Buy WeActive8 link ── */
.external-link { color: rgba(255,255,255,0.88) !important; }
.external-link:hover { color: #fff !important; }
.external-link-icon { filter: brightness(0) invert(1) !important; }

/* ── 3x3 Dots Menu ─ Fixed, outside nav ── */
.wa8-dots-fixed {
  position: fixed;
  top: calc(30px + 1.2vh);
  right: 32px;
  z-index: 10001;
  display: flex;
  align-items: center;
}
.wa8-dots-btn {
  cursor: pointer;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  width: 46px;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.18s, border-color 0.18s;
  padding: 0;
}
.wa8-dots-btn:hover {
  background: rgba(0,0,0,0.75);
  border-color: rgba(255,255,255,0.2);
}
.wa8-dots-btn.active {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.25);
}
.wa8-dots-grid {
  display: grid;
  grid-template-columns: repeat(3, 6px);
  gap: 4.5px;
}
.wa8-dots-grid span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  transition: background 0.18s;
}
.wa8-dots-btn:hover .wa8-dots-grid span,
.wa8-dots-btn.active .wa8-dots-grid span {
  background: #fff;
}

/* Launcher dropdown — real glass, blurs page content */
.wa8-launcher {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 260px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(52px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.35);
  z-index: 10002;
}
.wa8-launcher.open {
  display: block;
  animation: wa8LauncherIn 0.18s ease both;
}
@keyframes wa8LauncherIn {
  0% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.wa8-launcher-head {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 12px;
}
.wa8-launcher-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.wa8-launcher-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s;
  cursor: pointer;
}
.wa8-launcher-item:hover { background: rgba(255,255,255,0.08); }
.wa8-launcher-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #fff;
}
/* Product tiles render the actual product wordmark (white variant)
   inside the gradient square instead of a unicode glyph. Wordmarks
   are wide (~3:1), so we fit by width and let height auto. */
.wa8-launcher-icon--product {
  padding: 0 6px;
  box-sizing: border-box;
}
.wa8-launcher-icon--product img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70%;
  object-fit: contain;
}
.wa8-launcher-name {
  color: rgba(255,255,255,0.85);
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: -0.01em;
  line-height: 1.2;
}


/* ═══════════════════════════════════════════════════════ */
/* WA8 Featured Work Section — adapted from UXoral        */
/* ═══════════════════════════════════════════════════════ */

.wa8-featured {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.wa8-fw-section {
  position: relative;
  padding: 0;
  background: #ffffff;
  color: #000;
}

.wa8-fw-spacer {
  width: 100%;
  padding-top: 7.5rem;
}

.wa8-fw-container {
  width: 100%;
  max-width: 84rem;
  margin: 0 auto;
  padding: 0 1.5rem 7.5rem;
}

.wa8-fw-inner {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}

/* Header row */
.wa8-fw-header-row {
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  gap: 1rem;
  align-items: flex-start;
}

.wa8-fw-header-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wa8-fw-label {
  font-family: 'Google Sans Flex', Arial, sans-serif;
  font-size: 0.875rem;
  color: #666;
  line-height: 1.5;
}

.wa8-fw-accent {
  color: #ff531f;
  font-weight: 600;
}

.wa8-fw-heading {
  font-family: 'Google Sans Flex', Arial, sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.1;
  color: #000;
  margin: 0;
}

.wa8-fw-desc {
  font-family: 'Google Sans Flex', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #666;
  max-width: 29rem;
  margin: 1.5rem 0 0;
}

.wa8-fw-bold {
  color: #000;
  font-weight: 600;
}

.wa8-fw-header-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: 1rem;
}

/* CTA Button */
.wa8-fw-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.5rem;
  background: #000;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-family: 'Google Sans Flex', Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.3s ease, transform 0.2s ease;
}
.wa8-fw-cta-btn:hover {
  background: #222;
  transform: translateY(-1px);
}
.wa8-fw-cta-arrow {
  width: 16px;
  height: 16px;
}

/* Cards Grid — 3D perspective scroll */
.wa8-fw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}

.wa8-fw-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Cards start invisible + slightly below their final position.
   GSAP (orchestrated from HeroPolish) animates them in with a
   staggered fade-up after the H2 word-reveal sequence completes.
   Replaces the previous laid-back-then-straighten 3D tilt which
   was glitchy in the 2-card layout. */
.wa8-fw-card {
  opacity: 0;
}

/* Card top (avatars) */
.wa8-fw-card-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid #0000001a;
  border-radius: 1rem;
  background: #fff;
}
.wa8-fw-avatars {
  display: flex;
}
.wa8-fw-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -8px;
  object-fit: cover;
}
.wa8-fw-avatar:first-child {
  margin-left: 0;
}
.wa8-fw-brands-text {
  font-family: 'Google Sans Flex', Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #000;
}

/* Card bottom (quote + stat) */
.wa8-fw-card-bottom {
  flex: 1;
  padding: 1.5rem;
  border: 1px solid #0000001a;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  background: #fff;
}

.wa8-fw-quote {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.wa8-fw-quote-icon {
  color: #000;
  width: 24px;
  height: 24px;
  opacity: 0.2;
}
.wa8-fw-quote-text {
  font-family: 'Google Sans Flex', Arial, sans-serif;
  font-size: 1.25rem;
  line-height: 1.4;
  color: #000;
}

.wa8-fw-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.wa8-fw-counter {
  font-family: 'Google Sans Flex', Arial, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #000;
  line-height: 1;
}
.wa8-fw-stat-label {
  font-family: 'Google Sans Flex', Arial, sans-serif;
  font-size: 0.875rem;
  color: #999;
  line-height: 1.5;
}

/* Card 2: Image card */
.wa8-fw-card--image {
  gap: 0;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid #0000001a;
}
.wa8-fw-hero-img-wrap {
  flex: 1;
  overflow: hidden;
  min-height: 300px;
  position: relative;
}
.wa8-fw-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wa8-fw-awards {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: #000;
  color: #fff;
}
.wa8-fw-awards-inner {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.wa8-fw-counter--white {
  color: #fff;
}
.wa8-fw-stat-label--white {
  color: rgba(255,255,255,0.6);
}
.wa8-fw-trophy {
  color: rgba(255,255,255,0.4);
}

/* Accent number */
.wa8-fw-accent-num {
  color: #2268EE;
  font-weight: 700;
}

/* Available for work button */
.wa8-fw-available-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border: 1px solid #0000001a;
  border-radius: 1rem;
  text-decoration: none;
  background: #fff;
  transition: background 0.2s ease;
}
.wa8-fw-available-btn:hover {
  background: #f9f9f9;
}
.wa8-fw-available-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.wa8-fw-available-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #88EF3E;
  box-shadow: 0 0 8px rgba(136,239,62,0.5);
  animation: wa8FwPulse 2s ease infinite;
}
@keyframes wa8FwPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.wa8-fw-available-text {
  font-family: 'Google Sans Flex', Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #000;
}
.wa8-fw-link-arrow {
  color: #000;
  transition: transform 0.2s ease;
}
.wa8-fw-available-btn:hover .wa8-fw-link-arrow {
  transform: translate(2px, -2px);
}

/* Scroll reveal animation */
.wa8-fw-section {
  opacity: 1;
}
/* Header reveal */
.wa8-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.wa8-reveal.wa8-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Hero image parallax */
.wa8-fw-hero-img {
  transition: transform 0.15s linear;
}
/* No hover lift or shadow on the featured-work cards — founder rule
   (no translateY, no drop shadow). Smooth transitions stay declared
   for individual property changes (e.g., button bg fade) but the
   parent cards never elevate. */
.wa8-fw-card-top,
.wa8-fw-card-bottom,
.wa8-fw-card--image,
.wa8-fw-available-btn {
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Responsive */
/* ── Pre-tablet: 992–1400px — tuck dots inside nav at narrower widths ── */
@media screen and (min-width: 992px) and (max-width: 1400px) {
  .wa8-dots-fixed {
    right: 2.2vw !important;
    top: calc(28px + 1.2vh) !important;
  }
  .wa8-dots-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }
  .wa8-dots-grid {
    grid-template-columns: repeat(3, 5px) !important;
    gap: 3.5px !important;
  }
  .wa8-dots-grid span {
    width: 5px !important;
    height: 5px !important;
  }
}

@media screen and (max-width: 991px) {
  .wa8-fw-header-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .wa8-fw-header-right {
    justify-content: flex-start;
  }
  .wa8-fw-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .wa8-fw-heading {
    font-size: 2rem;
  }
  .wa8-fw-spacer {
    padding-top: 4rem;
  }
  .wa8-fw-container {
    padding-bottom: 4rem;
  }
}

@media screen and (max-width: 479px) {
  .wa8-fw-heading {
    font-size: 1.75rem;
  }
  .wa8-fw-counter {
    font-size: 2rem;
  }
  .wa8-fw-quote-text {
    font-size: 1rem;
  }
}

/* Hero section — #f3f3f5 border on top, left, right */
.wa8-section.wa8-band:first-of-type {
  padding: var(--globals--wide-section-padding) var(--globals--wide-section-padding) 0 !important;
  background-color: #f3f3f5 !important;
}

/* ── Our Services section — light theme ── */
[data-w-id="798fee0b-4c23-f6c6-82f5-bf2b47d11be0"] {
  background-color: #ffffff !important;
}
/* "Our Services" heading — black */
[data-w-id="798fee0b-4c23-f6c6-82f5-bf2b47d11be0"] .wa8-h2 {
  color: #111111 !important;
}
/* Service cards: pill-shaped hover with air around it. No border at
   idle (the upstream "card frame" is gone; cards now read as airy
   plain tiles). On hover the active card picks up the lightest
   possible brand-blue wash + a subtle border, and the siblings dim
   to 0.45 opacity. All transitions are 280ms ease so the in/out
   movement reads as smooth fades, not snaps. */
[data-w-id="798fee0b-4c23-f6c6-82f5-bf2b47d11be0"] .wa8-svctile {
  padding: 14px 18px !important;
  margin: 4px 6px !important;
  border-radius: 18px !important;
  border: 1px solid transparent !important;
  background-color: transparent !important;
  transition:
    background-color 280ms ease,
    border-color 280ms ease,
    opacity 280ms ease !important;
}
[data-w-id="798fee0b-4c23-f6c6-82f5-bf2b47d11be0"] .wa8-svctile-grid:hover .wa8-svctile {
  opacity: 0.45;
}
[data-w-id="798fee0b-4c23-f6c6-82f5-bf2b47d11be0"] .wa8-svctile:hover {
  opacity: 1 !important;
  background-color: rgba(91, 140, 255, 0.06) !important;
  border-color: rgba(91, 140, 255, 0.20) !important;
}
/* Icon box — solid dark background */
[data-w-id="798fee0b-4c23-f6c6-82f5-bf2b47d11be0"] .wa8-svctile-iconbox {
  background-color: #111111 !important;
  border-color: #222 !important;
}
/* Service titles — black */
[data-w-id="798fee0b-4c23-f6c6-82f5-bf2b47d11be0"] .wa8-svctile-text .wa8-body-text.wa8-bold {
  color: #111111 !important;
}
/* Service descriptions — dark gray */
[data-w-id="798fee0b-4c23-f6c6-82f5-bf2b47d11be0"] .wa8-svctile-text div:not(.wa8-body-text) {
  color: #555555 !important;
}
/* Arrow SVGs — brand blue via CSS filter */
[data-w-id="798fee0b-4c23-f6c6-82f5-bf2b47d11be0"] .wa8-svctile-arrow {
  filter: brightness(0) saturate(100%) invert(30%) sepia(95%) saturate(2500%) hue-rotate(212deg) brightness(95%) contrast(93%) !important;
}

/* ── Our Mission section — light theme ── */
section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) {
  background-color: #ffffff !important;
}
/* Headings */
section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .wa8-h2,
section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .wa8-h3 {
  color: #111111 !important;
}
/* Body text / descriptions */
section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .wa8-h5.wa8-body-text,
section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .wa8-body-text {
  color: #555555 !important;
}
/* Badge text ("Our Mission" label) */
section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .badge-text {
  color: #111111 !important;
}
/* Tab link text */
section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .tab-link div {
  color: #111111 !important;
}
section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .tab-link {
  opacity: 0.5;
}
section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .tab-link.w--current {
  opacity: 1;
}
/* Arrow link */
section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .arrow-link-text {
  color: #111111 !important;
}
section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .arrow-link-icon {
  filter: brightness(0) !important;
}
/* Badge square — brand green */
section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .square {
  background-color: var(--wa8-brand-2) !important;
}
/* Tab blips — brand blue */
section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .tab-blip {
  background-color: var(--wa8-brand-1) !important;
}

/* ── Customer Success section — light theme ── */
section:has([data-w-id="7deb21ca-d5c6-430a-d58f-8b87da915f69"]) {
  background-color: #ffffff !important;
}
section:has([data-w-id="7deb21ca-d5c6-430a-d58f-8b87da915f69"]) .wa8-h3 {
  color: #111111 !important;
}
section:has([data-w-id="7deb21ca-d5c6-430a-d58f-8b87da915f69"]) .wa8-body-text {
  color: #555555 !important;
}
section:has([data-w-id="7deb21ca-d5c6-430a-d58f-8b87da915f69"]) .badge-text {
  color: #111111 !important;
}
section:has([data-w-id="7deb21ca-d5c6-430a-d58f-8b87da915f69"]) .arrow-link-text {
  color: #111111 !important;
}
section:has([data-w-id="7deb21ca-d5c6-430a-d58f-8b87da915f69"]) .arrow-link-icon {
  filter: brightness(0) !important;
}
/* Badge square — brand green */
section:has([data-w-id="7deb21ca-d5c6-430a-d58f-8b87da915f69"]) .square {
  background-color: var(--wa8-brand-2) !important;
}

/* ── Our Services section — brand squares & badge ── */
[data-w-id="798fee0b-4c23-f6c6-82f5-bf2b47d11be0"] .square {
  background-color: var(--wa8-brand-2) !important;
}
[data-w-id="798fee0b-4c23-f6c6-82f5-bf2b47d11be0"] .badge-text {
  color: #111111 !important;
}

/* ── Cards section (AI Automation, Synthesis, Precision) — light theme ── */
section:has([data-w-id="725530b3-2299-3d72-1b8c-8ccdf33ac13d"]) {
  background-color: #ffffff !important;
}
/* Main heading — black */
section:has([data-w-id="725530b3-2299-3d72-1b8c-8ccdf33ac13d"]) .wa8-h2 {
  color: #111111 !important;
}
/* Faded subtitle — dark gray */
section:has([data-w-id="725530b3-2299-3d72-1b8c-8ccdf33ac13d"]) .faded-heading {
  color: #11111180 !important;
}
/* Badge squares (01, 02, coming soon) — brand green */
section:has([data-w-id="725530b3-2299-3d72-1b8c-8ccdf33ac13d"]) .square {
  background-color: var(--wa8-brand-2) !important;
}
/* Info cards stay dark — no changes to their internal text */
/* Multipurpose card (Precision) text stays as-is since card bg is dark */

/* ── Customer mini section — light theme ── */
section:has([data-w-id="215d842f-381f-c989-2ca2-5aae2f814324"]) {
  background-color: #ffffff !important;
}
/* Customer mini card stays dark-2 bg — text inside stays white */
/* Text outside the card */
section:has([data-w-id="215d842f-381f-c989-2ca2-5aae2f814324"]) > .wa8-container > .customer-mini > .customer-mini-text > div {
  color: #555555 !important;
}
/* Customer mini arrow links stay white (inside dark card) */

/* ── FAQ section — light theme ── */
section:has([data-w-id="a424921d-a3ca-f26b-d5c4-ba7bac30d5dd"]) {
  background-color: #ffffff !important;
}
/* ── FAQ — plain class selectors ──────────────────────────────
   The original Webflow-scoped selectors (`:has([data-w-id="a424921d-..."])`)
   stopped matching after Wave 4 of the Webflow rip stripped data-w-id.
   Re-scoped to `.wa8-faq-section` so the rules survive. */
.wa8-faq-section .wa8-h2 {
  color: #111111;
  margin-bottom: 28px;
}
.wa8-faq-section .wa8-faq-wrap {
  max-width: 880px;
  margin: 0 auto;
}
.wa8-faq-section .wa8-faq-item {
  border-bottom: 1px solid #e0e0e0;
}
.wa8-faq-section .wa8-faq-item:first-child {
  border-top: 1px solid #e0e0e0;
}
.wa8-faq-section .wa8-faq-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 22px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
.wa8-faq-section .wa8-faq-title-text {
  color: #111111;
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.45;
  flex: 1;
}
.wa8-faq-section .wa8-faq-icon {
  flex: none;
  color: #2268EE;
  transition: transform 220ms ease;
}
.wa8-faq-section .wa8-faq-item.is-open .wa8-faq-icon {
  transform: rotate(180deg);
}
.wa8-faq-section .wa8-faq-title:hover .wa8-faq-title-text {
  color: #2268EE;
}
.wa8-faq-section .wa8-faq-title:focus-visible {
  outline: 2px solid #2268EE;
  outline-offset: 2px;
  border-radius: 6px;
}
.wa8-faq-section .wa8-faq-body {
  padding: 0 4px 22px;
}
.wa8-faq-section .wa8-faq-text {
  color: #555555;
  font-size: 15px;
  line-height: 1.6;
  max-width: 70ch;
}

/* ── Methodology section — white bg only, text stays as-is ── */
section:has([data-w-id="39daafe6-b06b-8a52-6a92-afb80021b16a"]) {
  background-color: #ffffff !important;
}

/* ── Mid-page CTA — shrink, round, recolor blobs ── */
/* Section bg white so the rounded container floats on white */
section:has([data-w-id="f8a6d06b-73b1-6d21-43e8-0ab69ef53ba4"]) {
  background-color: #ffffff !important;
}
/* Shrink the gradient container to 60% width, centered, rounded */
section:has([data-w-id="f8a6d06b-73b1-6d21-43e8-0ab69ef53ba4"]) .wa8-band-content.mid-page-cta {
  width: 60% !important;
  margin: 0 auto !important;
  border-radius: 24px !important;
  min-height: 420px !important;
}
/* Remove purple blob — change to brand blue */
section:has([data-w-id="f8a6d06b-73b1-6d21-43e8-0ab69ef53ba4"]) .wa8-blob.page-title-blob-c {
  color: var(--wa8-brand-1) !important;
}
/* blob-a stays light blue (brand-4), blob-b stays green (brand-2) — good */

/* ── Precision card — solid dark bg ── */
.multipurpose-card {
  background-color: #111111 !important;
  opacity: 1 !important;
}

/* ── About/Contact cards + logo marquee section — light theme ── */
section:has(.wa8-marquee-wrap) {
  background-color: #ffffff !important;
}
/* Headline above the strip — promoted from Scion's tiny .wa8-body-text
   to a real section heading (founder ask 2026-05-11 PM: "make a
   mark"). Sized in clamp so it scales with viewport width but stays
   commanding on desktop. */
section:has(.wa8-marquee-wrap) .wa8-logos-strip .wa8-body-text {
  font-size: clamp(28px, 3.4vw, 52px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
  color: #0b0b12 !important;
  margin-bottom: clamp(28px, 4vw, 56px) !important;
  max-width: 22ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Default Scion rule makes the original stock client wordmarks all
   pure black via brightness(0). Our 4 product logos carry their own
   brand-gradient + lime/blue accents — we want those original colors.
   The .wa8-product-logo class (added in the TEXT_SWAP in app/v3/page.tsx)
   bumps specificity over the generic .wa8-marquee-item brightness rule. */
section:has(.wa8-marquee-wrap) .wa8-marquee-item {
  filter: brightness(0) !important;
}
section:has(.wa8-marquee-wrap) .wa8-marquee-item.wa8-product-logo {
  filter: none !important;
  height: clamp(34px, 4.2vw, 58px) !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 clamp(28px, 4vw, 56px) !important;
  opacity: 1 !important;
}

/* Marquee scrim — white fade on light bg */
section:has(.wa8-marquee-wrap) .wa8-marquee-scrim {
  background-image: linear-gradient(90deg, #ffffff, #ffffff00 25%, #ffffff00 75%, #ffffff) !important;
}

/* ── Marquee scroll animation ────────────────────────────────────
   Webflow Scion drove the strip via the IX2 interaction engine,
   which we stripped in Wave 1. With IX2 gone the .wa8-marquee-group
   had no movement rule, so the logos just sat in place. Re-implement
   the slide-loop in pure CSS: two identical groups are rendered
   side-by-side inside .wa8-marquee (display:flex). Each group is
   pushed leftward by 100% of its own width over 30s; group B
   naturally fills the gap. At the end of the cycle group A snaps
   back to 0, visually identical to where group B was, so the loop
   is seamless. Hover pause = courtesy for users who want to read
   a wordmark. */
section:has(.wa8-marquee-wrap) .wa8-marquee {
  width: max-content;
}
section:has(.wa8-marquee-wrap) .wa8-marquee-group {
  animation: wa8-marquee-scroll 30s linear infinite;
  will-change: transform;
}
section:has(.wa8-marquee-wrap) .wa8-marquee:hover .wa8-marquee-group {
  animation-play-state: paused;
}
@keyframes wa8-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  section:has(.wa8-marquee-wrap) .wa8-marquee-group {
    animation: none;
  }
}

/* Section padding — Scion's "bottom-padding-l" stacks a large gap
   below this strip and then the next section adds its own top padding,
   creating the disjointed white gulf before the "From zero to
   activated" final CTA. Tighten the bottom here so the two sections
   feel like a continuous flow. */
section:has(.wa8-marquee-wrap).bottom-padding-l {
  padding-bottom: 72px !important;
}

/* ── Mid-page CTA — remove glass box, show grid dots ── */
/* Remove glass bg/blur from boxed container */
section:has([data-w-id="f8a6d06b-73b1-6d21-43e8-0ab69ef53ba4"]) .boxed-video-cta {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  border: none !important;
}
/* Hide the video thumbnail/play button */
section:has([data-w-id="f8a6d06b-73b1-6d21-43e8-0ab69ef53ba4"]) .boxed-video-cta .video {
  display: none !important;
}
/* Show grid dots */
section:has([data-w-id="f8a6d06b-73b1-6d21-43e8-0ab69ef53ba4"]) .wa8-grid-bg {
  opacity: 0.4 !important;
  mix-blend-mode: overlay !important;
}

/* ── Footer — light theme ── */
.footer {
  background-color: #ffffff !important;
}
/* Footer text — dark */
.footer .wa8-body-text,
.footer .fine-print,
.footer .footer-fine-print,
.footer p,
.footer div {
  color: #555555 !important;
}
/* Footer — collapse all the giant Webflow gaps */
.footer .footer-wrapper {
  gap: 32px !important;
}
.footer .footer-top {
  gap: 32px !important;
}
.footer .footer-info {
  gap: 16px !important;
}
.footer .footer-info-top {
  gap: 12px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* Menu headers ("Pages", "Information") — brand blue */
.footer .wa8-bold {
  color: #2268EE !important;
}
/* Footer links */
.footer .footer-link {
  color: #333333 !important;
}
.footer .footer-link:hover {
  color: #111111 !important;
}
/* Copyright bar */
.footer .footer-copyright-text,
.footer .footer-copyright-link {
  color: #888888 !important;
}
/* Social icons — dark */
.footer .social-icon-image {
  filter: brightness(0) !important;
  opacity: 0.5 !important;
}
.footer .social-icon-link:hover .social-icon-image {
  opacity: 0.8 !important;
}
/* Footer top/bottom dividers */
.footer .footer-bottom {
  border-color: #e0e0e0 !important;
}

/* ── Footer v2 — 5-column comprehensive footer ── */
.footer.wa8-footer-v2 {
  padding: 80px 0 36px !important;
  background: #ffffff !important;
}
.wa8-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1.4fr 1fr 1.2fr 1.2fr;
  gap: 56px;
  align-items: flex-start;
  padding-bottom: 56px;
  border-bottom: 1px solid #e6e6e8;
}
@media (max-width: 1100px) {
  .wa8-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }
}
@media (max-width: 600px) {
  .wa8-footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.wa8-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 320px;
}
.wa8-footer-brand-link {
  display: inline-flex;
}
/* NB: no height/width override on .wa8-footer-brand-link .wa8-footer-logo.
   The canonical sizing (responsive clamp + max-width + margin: 0 auto 16px)
   lives on .wa8-footer-logo further down. A descendant-selector override
   here was silently winning by specificity and pinning the logo to 36px,
   defeating the responsive scaling. */
.wa8-footer-tag {
  font-size: 14px;
  line-height: 1.55;
  color: #555 !important;
  margin: 0;
  letter-spacing: -0.005em;
}
.wa8-footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 10px 16px;
  border-radius: 999px;
  background: #E9FC00;
  color: #0B0B12 !important;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background 180ms ease;
}
.wa8-footer-cta:hover { background: #DDEF00; color: #0B0B12 !important; }
.wa8-footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wa8-footer-col-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0B0B12 !important;
  margin-bottom: 4px;
}
.wa8-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #555 !important;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color 150ms ease;
}
.wa8-footer-link:hover {
  color: #0B0B12 !important;
}
.wa8-footer-beta {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(91, 140, 255, 0.14);
  color: #5B8CFF !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.wa8-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
}
.wa8-footer-bottom-left {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
}
.wa8-footer-bottom-right {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
}
.wa8-footer-copyright,
.wa8-footer-addr {
  font-size: 12px;
  color: #888 !important;
  letter-spacing: -0.005em;
}
.wa8-footer-legal-link {
  font-size: 12px;
  color: #777 !important;
  text-decoration: none;
  transition: color 150ms ease;
}
.wa8-footer-legal-link:hover { color: #0B0B12 !important; }

/* ── CTA — center content ── */
section:has([data-w-id="f8a6d06b-73b1-6d21-43e8-0ab69ef53ba4"]) .boxed-video-cta {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
section:has([data-w-id="f8a6d06b-73b1-6d21-43e8-0ab69ef53ba4"]) .boxed-cta-text {
  display: flex !important;
  justify-content: center !important;
}
section:has([data-w-id="f8a6d06b-73b1-6d21-43e8-0ab69ef53ba4"]) .boxed-video-content {
  align-items: center !important;
}

/* ── Nav — push down, non-sticky on desktop ── */
@media screen and (min-width: 992px) {
  .navbar-wrapper {
    position: absolute !important;
    top: 24px !important;
  }
}

/* ── 3x3 Dots — dark bg for visibility over white sections ── */
.wa8-dots-btn {
  background: rgba(0,0,0,0.7) !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
}
.wa8-dots-btn:hover {
  background: rgba(0,0,0,0.85) !important;
  border-color: rgba(0,0,0,0.25) !important;
}
/* Active state — solid dark */
.wa8-dots-btn.active {
  background: #111111 !important;
  border-color: #333333 !important;
}
.wa8-dots-btn.active .wa8-dots-grid span {
  background: #ffffff !important;
}
/* Launcher dropdown — dark theme */
.wa8-launcher {
  background: rgba(0,0,0,0.18) !important;
  backdrop-filter: blur(15px) saturate(1.8) !important;
  border: none !important;
  box-shadow: 0 0px 10px rgba(0,0,0,0.2) !important;
}
.wa8-launcher-head {
  color: rgba(255,255,255,0.5) !important;
}
.wa8-launcher-item:hover {
  background: rgba(255,255,255,0.1) !important;
}
.wa8-launcher-name {
  color: rgba(255,255,255,0.9) !important;
}

/* ── Bottom CTA — white bg behind gradient ── */
section[data-w-id="59826b22-f114-a1d5-18e0-be230fcbed71"] {
  background-color: #ffffff !important;
}

/* ── Launcher — use site h5 font ── */
.wa8-launcher-name {
  font-family: 'Google Sans Flex', Arial, sans-serif !important;
  font-size: 0.72rem !important;
  letter-spacing: -0.01em !important;
  font-weight: 600 !important;
}
.wa8-launcher-head {
  font-family: 'Google Sans Flex', Arial, sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

/* ── Hero blobs — no purple, use blue instead ── */
.wa8-blob.wa8-brand-3 {
  color: var(--wa8-brand-1) !important;
}

/* ── Remove purple from ALL gradient blobs globally ── */
.wa8-blob.wa8-cta-blob-c2 {
  color: var(--wa8-brand-1) !important;
}
/* Hero blobs with brand-color-3 already handled */
/* Also override the default .wa8-blob color (brand-4 light blue) for bottom CTA wrapper blobs */

/* ── Gradient sections — no purple, remap brand-3 to blue ── */
.wa8-band-content.wa8-hero,
.wa8-band-content.wa8-hero * {
  --wa8-brand-3: #2268EE !important;
}
.wa8-band-content.wa8-cta,
.wa8-band-content.wa8-cta * {
  --wa8-brand-3: #2268EE !important;
}
/* Mid-page CTA too */
.wa8-band-content.mid-page-cta,
.wa8-band-content.mid-page-cta * {
  --wa8-brand-3: #2268EE !important;
}

/* Footer bottom — horizontal row */
.footer .footer-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.footer .footer-bottom .fine-print {
  margin: 0 !important;
}

/* Legal links row */
.wa8-legal-links {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
}
.wa8-legal-links a {
  color: #888888 !important;
  text-decoration: none;
  transition: color 0.15s;
}
.wa8-legal-links a:hover {
  color: #111111 !important;
}
.wa8-legal-links span {
  color: #ccc !important;
  font-size: 0.7rem;
}

/* Footer bottom — horizontal row */
.footer .footer-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.footer .footer-bottom .fine-print {
  margin: 0 !important;
}

/* Legal links row */
.wa8-legal-links {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  margin-top: 8px;
}
.wa8-legal-links a {
  color: #888888 !important;
  text-decoration: none;
  transition: color 0.15s;
}
.wa8-legal-links a:hover {
  color: #111111 !important;
}
.wa8-legal-links span {
  color: #ccc !important;
  font-size: 0.7rem;
}

/* ── Bottom CTA blob drift animations (no IX2 on these) ── */
@keyframes wa8-blob-drift-a {
  0%, 100% { transform: rotate(64deg) translate(0, 0); }
  33% { transform: rotate(70deg) translate(5vw, -3vw); }
  66% { transform: rotate(58deg) translate(-3vw, 4vw); }
}
@keyframes wa8-blob-drift-b {
  0%, 100% { transform: rotate(83deg) translate(0, 0); }
  33% { transform: rotate(78deg) translate(-4vw, 5vw); }
  66% { transform: rotate(88deg) translate(6vw, -2vw); }
}
@keyframes wa8-blob-drift-c {
  0%, 100% { transform: rotate(15deg) translate(0, 0); }
  33% { transform: rotate(20deg) translate(-5vw, -4vw); }
  66% { transform: rotate(10deg) translate(3vw, 5vw); }
}
@keyframes wa8-blob-drift-d {
  0%, 100% { transform: rotate(-15deg) translate(0, 0); }
  33% { transform: rotate(-10deg) translate(4vw, 3vw); }
  66% { transform: rotate(-20deg) translate(-5vw, -3vw); }
}
.wa8-band-content.wa8-cta .wa8-cta-blob-wrap-a {
  animation: wa8-blob-drift-a 12s ease-in-out infinite;
}
.wa8-band-content.wa8-cta .wa8-cta-blob-wrap-b {
  animation: wa8-blob-drift-b 14s ease-in-out infinite;
}
.wa8-band-content.wa8-cta .wa8-cta-blob-wrap-c {
  animation: wa8-blob-drift-c 16s ease-in-out infinite;
}
.wa8-band-content.wa8-cta .wa8-cta-blob-wrap-d {
  animation: wa8-blob-drift-d 10s ease-in-out infinite;
}

/* ── Bottom CTA stability patch ── */
section[data-w-id="59826b22-f114-a1d5-18e0-be230fcbed71"] .wa8-band-content.wa8-cta {
  isolation: isolate !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
/* GPU-compositing hint for non-animated CTA layers. The animated blob
   wrappers are intentionally EXCLUDED — pinning their transform to
   translateZ(0) !important blocks the wa8-blob-drift-* keyframes from
   animating the transform property. With IX2 removed (Phase 2.1) the
   keyframe animations are the only thing moving these wrappers, so we
   can't have an !important transform on the same elements. */
section[data-w-id="59826b22-f114-a1d5-18e0-be230fcbed71"] .wa8-noise-bg,
section[data-w-id="59826b22-f114-a1d5-18e0-be230fcbed71"] .wa8-grid-bg,
section[data-w-id="59826b22-f114-a1d5-18e0-be230fcbed71"] .wa8-cta-content {
  will-change: transform, opacity !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
section[data-w-id="59826b22-f114-a1d5-18e0-be230fcbed71"] .wa8-cta-blob-wrap-a,
section[data-w-id="59826b22-f114-a1d5-18e0-be230fcbed71"] .wa8-cta-blob-wrap-b,
section[data-w-id="59826b22-f114-a1d5-18e0-be230fcbed71"] .wa8-cta-blob-wrap-c,
section[data-w-id="59826b22-f114-a1d5-18e0-be230fcbed71"] .wa8-cta-blob-wrap-d {
  /* Keep the compositing hint, drop the transform pin so the keyframe
     animation (defined above) can drive the transform property. */
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* ─── Homepage hero blob system ──────────────────────────────────
   Ported from the /activation-audit hero (which the founder confirmed
   reads correctly) and extended with a per-blob color cycle so each
   light pulses through light blue -> green -> brief light purple
   -> back to light blue. With ten blobs (five wrappers x two each)
   running on staggered phase delays, the four sides of the canvas
   show a different color at any given moment.

   Architecture (port from .aa-hero-blob-wrapper pattern):

   1. The chrome's existing wrappers become ZERO-SIZE anchor points.
      Their width/height collapse to 0 and their inline transform is
      reset to none — the keyframe animation drives transform during
      playback, and at the static state the wrapper sits at the
      top/left/right/bottom coords this CSS sets.

   2. The .wa8-blob child elements keep their Blobz-font glyph rendering
      but get a larger sized font-size + heavy blur tuned for the
      full-height homepage hero (the chrome's default 50vw is sized
      for a full hero — we keep it close but cap so corners stay
      anchored to their wrapper position).

   3. Five wrappers cover top-left, top-right, mid-center, bottom-
      left, bottom-right. Each carries TWO blob children — the
      second blob is translated 160px/100px so the two color tints
      overlap as one diffuse glow.

   4. Specificity > !important: the chrome's `transform: scale(N)
      translate(...)` is at one-class specificity. Our selectors
      `.wa8-band-content.wa8-hero .hero-blob-wrapper-X` are at
      two-class specificity, so `transform: none` (no !important
      needed) wins at static state. During animation, the keyframe
      transform wins by being animation-level in the cascade. No
      !important on transform — that would defeat the animation.

   5. Color cycle keyframe targets the `color` property of each blob
      (Blobz font renders glyph in the `color` value). Phase delays
      are negative seconds so animation starts at a different point
      of the cycle for each blob — gives the "color appearing here,
      disappearing there" feel without scripting. */
.wa8-band-content.wa8-hero .wa8-bg-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-a,
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-b,
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-c,
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-d,
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-e {
  position: absolute;
  width: 0;
  height: 0;
  transform: none;
  opacity: 1;
  pointer-events: none;
  will-change: transform;
}
/* Spread across the four sides of the canvas. */
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-a {
  top: 8%; left: 8%;
  animation: wa8-hero-drift-a 26s ease-in-out infinite;
}
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-b {
  top: 12%; right: 12%;
  animation: wa8-hero-drift-b 30s ease-in-out infinite;
}
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-c {
  top: 48%; left: 50%;
  animation: wa8-hero-drift-c 34s ease-in-out infinite;
}
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-d {
  bottom: 14%; left: 14%;
  animation: wa8-hero-drift-d 22s ease-in-out infinite;
}
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-e {
  bottom: 16%; right: 14%;
  animation: wa8-hero-drift-e 32s ease-in-out infinite;
}
/* Override the chrome .wa8-blob defaults inside the homepage hero.
   Sized to register at full-height hero scale, blurred heavily so
   colors read as soft glows rather than hard discs. */
.wa8-band-content.wa8-hero .wa8-bg-fx .wa8-blob {
  font-size: clamp(440px, 40vw, 760px);
  filter: blur(96px);
  opacity: 0.85;
  /* All blob characters get the color-cycle animation. Phase delays
     applied per-blob below stagger them out of sync. */
  animation: wa8-hero-color-cycle 36s ease-in-out infinite;
}
/* Second blob in each pair offset so the two color tints overlap as
   one diffuse glow instead of stacking identically. */
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-a .wa8-blob:nth-child(2),
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-b .wa8-blob:nth-child(2),
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-c .wa8-blob:nth-child(2),
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-d .wa8-blob:nth-child(2),
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-e .wa8-blob:nth-child(2) {
  transform: translate(160px, 100px);
}
/* Stagger color-cycle phase per blob. Ten blobs across a 36s cycle —
   distribute starts every ~3.6s so at any frame the four sides show
   different points of the light-blue / green / electric sweep. */
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-a .wa8-blob:nth-child(1) { animation-delay: 0s; }
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-a .wa8-blob:nth-child(2) { animation-delay: -3.6s; }
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-b .wa8-blob:nth-child(1) { animation-delay: -7.2s; }
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-b .wa8-blob:nth-child(2) { animation-delay: -10.8s; }
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-c .wa8-blob:nth-child(1) { animation-delay: -14.4s; }
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-c .wa8-blob:nth-child(2) { animation-delay: -18s; }
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-d .wa8-blob:nth-child(1) { animation-delay: -21.6s; }
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-d .wa8-blob:nth-child(2) { animation-delay: -25.2s; }
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-e .wa8-blob:nth-child(1) { animation-delay: -28.8s; }
.wa8-band-content.wa8-hero .wa8-hero-blob-wrap-e .wa8-blob:nth-child(2) { animation-delay: -32.4s; }
/* Drift keyframes — translate + rotate, ported amplitudes from
   .aa-blob-drift-* (12vw / 10vw / 8vw). No scale needed since
   wrappers are zero-sized anchors. */
@keyframes wa8-hero-drift-a {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(12vw, 6vh) rotate(35deg); }
  66% { transform: translate(-8vw, 12vh) rotate(-25deg); }
}
@keyframes wa8-hero-drift-b {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-10vw, 8vh) rotate(-40deg); }
  66% { transform: translate(8vw, -6vh) rotate(25deg); }
}
@keyframes wa8-hero-drift-c {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(10vw, -10vh) rotate(30deg); }
  66% { transform: translate(-12vw, 8vh) rotate(-35deg); }
}
@keyframes wa8-hero-drift-d {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-12vw, -8vh) rotate(-30deg); }
  66% { transform: translate(8vw, 10vh) rotate(20deg); }
}
@keyframes wa8-hero-drift-e {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(8vw, 10vh) rotate(45deg); }
  66% { transform: translate(-10vw, -12vh) rotate(-30deg); }
}
/* Color cycle, 36s. Mostly light blue. Green is a brief 3s peak
   (28-36% of cycle, ~3s); electric blue (brand #2B17FF) is a brief
   3s peak (62-70%, ~3s). The blob spends the bulk of its time in
   light blue (#60d2ff). Green appears subtly because it's both
   short-duration AND fading into/out of light blue rather than
   holding. Same for electric blue. */
@keyframes wa8-hero-color-cycle {
  0%, 100% { color: #60d2ff; }   /* light blue (base) */
  25%      { color: #60d2ff; }   /* hold light blue */
  32%      { color: #88EF3E; }   /* brief green peak */
  39%      { color: #60d2ff; }   /* fade back to light blue */
  56%      { color: #60d2ff; }   /* hold light blue */
  66%      { color: #2B17FF; }   /* brief electric blue peak */
  73%      { color: #60d2ff; }   /* fade back to light blue */
}
@media (prefers-reduced-motion: reduce) {
  .wa8-band-content.wa8-hero .wa8-hero-blob-wrap-a,
  .wa8-band-content.wa8-hero .wa8-hero-blob-wrap-b,
  .wa8-band-content.wa8-hero .wa8-hero-blob-wrap-c,
  .wa8-band-content.wa8-hero .wa8-hero-blob-wrap-d,
  .wa8-band-content.wa8-hero .wa8-hero-blob-wrap-e {
    animation: none !important;
  }
  .wa8-band-content.wa8-hero .wa8-bg-fx .wa8-blob {
    animation: none !important;
    color: #60d2ff !important;
  }
}

/* ─── Bottom-CTA blob color distribution ─────────────────────────
   Chrome ships brand-2 (green) on a1/a2/b1/b2 — four of eight
   blobs — which made green dominate the section.
   First attempt (animated wa8-hero-color-cycle) caused flicker
   because animating color on 88-96px blurred blobs forces a full
   re-blur every frame.
   Second attempt (all light blue + one electric accent) wiped the
   palette entirely; the founder wants green to still appear, just
   briefly, like on the hero.
   This pass is a static palette redistribution. a1/a2/b2 stay
   blue, b1 keeps the green accent, c1 stays light blue, c2 keeps
   the electric blue. Result: one green blob in the canvas, rest
   blue/electric — green reads as a brief accent rather than the
   dominant tint, and there's no animation so no re-blur cost. */
.wa8-band-content.wa8-cta .wa8-cta-blob-a1,
.wa8-band-content.wa8-cta .wa8-cta-blob-a2,
.wa8-band-content.wa8-cta .wa8-cta-blob-b2 {
  color: var(--wa8-brand-4) !important;
}
.wa8-band-content.wa8-cta .wa8-cta-blob-c2 {
  color: var(--wa8-brand-3) !important;
}
/* Spread reduction on the right-anchored (wrapper-c, top-right)
   and bottom-anchored (wrapper-d, bottom-right) blobs. Chrome
   ships them at scale3d(1.3, 1.8/2, 1) and scale3d(4, 1, 1)
   respectively, which makes the glow read very wide on the right
   side of the section. Pulling the X-scale way back so the spread
   stays a subtle accent and the section's gradient bg can breathe. */
.wa8-band-content.wa8-cta .wa8-cta-blob-c1,
.wa8-band-content.wa8-cta .wa8-cta-blob-c2 {
  transform: scale3d(0.7, 1.2, 1) !important;
  opacity: 0.85;
}
.wa8-band-content.wa8-cta .wa8-cta-blob-d1,
.wa8-band-content.wa8-cta .wa8-cta-blob-d2 {
  transform: scale3d(1.4, 0.7, 1) !important;
  opacity: 0.8;
}
section[data-w-id="59826b22-f114-a1d5-18e0-be230fcbed71"] .buttons .button {
  border-radius: 200px !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  will-change: background-color, transform !important;
}
section[data-w-id="59826b22-f114-a1d5-18e0-be230fcbed71"] .buttons .button-text-wrapper {
  transform: translateZ(0) !important;
  will-change: transform !important;
}

/* Footer logo — responsive signature mark.
   Height scales with viewport height (clamp lands at ~135px on a
   typical ~960px-tall window, the founder-tuned target). Width is
   left to follow the SVG's natural 847:147 aspect-ratio, capped by
   max-width so it can't overflow narrow phones. The mobile override
   below was removed in favour of this single rule. */
.wa8-footer-logo {
  /* Width-driven sizing. The wordmark SVG has an 847:147 aspect ratio
     (~5.76:1) so height-driven sizing (the previous clamp approach)
     overflowed the parent brand column at the upper end of the clamp
     — and `max-width` then clipped the image instead of scaling the
     height down. Width-first + height:auto preserves aspect-ratio
     proportionally regardless of parent width. */
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 0 0 16px;
}

/* Hide slide nav on desktop — only visible in mobile wa8-mob-open */
.wa8-slide-nav { display: none !important; }

/* ── Pre-tablet: 992–1400px — tuck dots inside nav at narrower widths ── */
@media screen and (min-width: 992px) and (max-width: 1400px) {
  .wa8-dots-fixed {
    right: 2.2vw !important;
    top: calc(28px + 1.2vh) !important;
  }
  .wa8-dots-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }
  .wa8-dots-grid {
    grid-template-columns: repeat(3, 5px) !important;
    gap: 3.5px !important;
  }
  .wa8-dots-grid span {
    width: 5px !important;
    height: 5px !important;
  }
}

@media screen and (max-width: 991px) {
  /* Nav pill — smaller, centered */
  .navbar-wrapper {
    top: 8px !important;
    left: 16px !important;
    right: 16px !important;
  }
  .navbar.w-nav {
    border-radius: 40px !important;
    padding: 6px 14px !important;
    overflow: visible !important;
  }

  /* Row layout: hamburger left, logo center, dots right */
  .navbar-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }

  /* Hamburger — far left */
  .menu-button.w-nav-button {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 6px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    display: flex !important;
  }
  .menu-button-icons {
    display: flex !important;
    width: 22px !important;
    height: 22px !important;
    position: relative !important;
  }
  .menu-icon {
    filter: brightness(0) invert(1) !important;
    width: 22px !important;
    height: 22px !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }
  /* First icon = hamburger lines, second = X */
  .menu-icon:first-child { display: block !important; }
  .menu-icon:last-child { display: none !important; }
  .menu-button.wa8-hb-open .menu-icon:first-child { display: none !important; }
  .menu-button.wa8-hb-open .menu-icon:last-child { display: block !important; }

  /* Logo — centered */
  .nav-logo-link {
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
  }
  .navbar-logo { height: 32px !important; }

  /* Hide desktop nav items */
  .nav-menu.w-nav-menu { display: none !important; }
  .search-dropdown.w-dropdown { display: none !important; }
  .external-link { display: none !important; }
  .nav-controls { position: static !important; overflow: visible !important; }

  /* Mobile menu when open */
  .nav-menu.w-nav-menu.wa8-mob-open {
    display: block !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(8,14,32,0.97) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    z-index: 9998 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    animation: wa8MobSlide 0.22s ease both !important;
  }
  @keyframes wa8MobSlide {
    0% { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* Hide nav-links-wrapper flex stuff — go vertical */
  .nav-menu.wa8-mob-open .nav-links-wrapper,
  .nav-menu.wa8-mob-open .nav-links {
    display: block !important;
    flex-direction: column !important;
  }

  /* Nav links */
  .nav-menu.wa8-mob-open .nav-link.w-nav-link {
    display: block !important;
    padding: 12px 14px !important;
    color: rgba(255,255,255,0.88) !important;
    font-size: 15px !important;
    border-radius: 8px !important;
  }
  .nav-menu.wa8-mob-open .nav-link.w-nav-link:active {
    color: #fff !important;
    background: rgba(255,255,255,0.06) !important;
  }

  /* Dropdown triggers (Pages, Information) — tappable */
  .nav-menu.wa8-mob-open .w-dropdown {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .nav-menu.wa8-mob-open .dropdown-toggle.w-dropdown-toggle {
    color: rgba(255,255,255,0.88) !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .nav-menu.wa8-mob-open .dropdown-toggle.w-dropdown-toggle:active {
    background: rgba(255,255,255,0.06) !important;
  }

  /* ── Slide Navigation for mobile ── */
  .nav-menu.wa8-mob-open .nav-links-wrapper { display: none !important; }
  .nav-menu.wa8-mob-open .w-dropdown { display: none !important; }
  .nav-menu.wa8-mob-open .dropdown-element.w-dropdown-list { display: none !important; }

  /* Mobile menu — compact, fit content */
  .nav-menu.w-nav-menu.wa8-mob-open {
    display: block !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    width: 220px !important;
    max-width: 75vw !important;
    right: auto !important;
    background: rgba(8,14,32,0.97) !important;
    border-radius: 14px !important;
    padding: 8px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    z-index: 9998 !important;
    animation: wa8MobSlide 0.22s ease both !important;
    overflow: hidden !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  /* Slide nav container — dynamic height */
  .wa8-slide-nav {
    display: none;
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .wa8-mob-open .wa8-slide-nav {
    display: block !important;
  }
  .wa8-slide-panel {
    width: 100%;
  }
  .wa8-slide-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 10px;
    color: rgba(255,255,255,0.88);
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .wa8-slide-item:active {
    background: rgba(255,255,255,0.06);
  }
  a.wa8-slide-item { color: rgba(255,255,255,0.88); }
  a.wa8-slide-item:active { color: #fff; }

  /* Green/blue dot indicators for Pages/Information on root level */
  .wa8-slide-dot {
    width: 7px;
    height: 7px;
    border-radius: 0;
    display: inline-block;
    margin-right: 8px;
    flex-shrink: 0;
  }
  .wa8-slide-dot--green { background: #88EF3E; }
  .wa8-slide-dot--blue { background: #2268EE; }

  /* Arrow for items with sub-levels */
  .wa8-slide-arrow {
    font-size: 14px;
    color: rgba(255,255,255,0.25);
    margin-left: auto;
    padding-left: 8px;
  }

  /* Small square indicator for sub-items that have children */
  .wa8-slide-sq {
    width: 5px;
    height: 5px;
    border-radius: 0;
    background: rgba(255,255,255,0.25);
    display: inline-block;
    margin-right: 8px;
    flex-shrink: 0;
  }

  /* Back button */
  .wa8-slide-back {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 10px 10px;
    color: rgba(255,255,255,0.4);
    font-size: 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 2px;
    -webkit-tap-highlight-color: transparent;
  }
  .wa8-slide-back:active { color: #fff; }
  .wa8-slide-back-arrow { font-size: 15px; }

  /* Section headers in deep levels */
  .wa8-slide-header {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25);
    padding: 10px 10px 4px;
  }
  .wa8-slide-link {
    display: block;
    padding: 10px 10px;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    border-radius: 6px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  /* Divider */
  .wa8-slide-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 6px 10px;
  }
  /* Figma widget */
  .wa8-slide-figma-widget {
    margin: 4px 0;
    padding: 2px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(168,85,247,0.5), rgba(59,130,246,0.5), rgba(16,185,129,0.5));
  }
  .wa8-figma-widget-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(8,14,32,0.92);
  }
  .wa8-figma-widget-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    opacity: 0.7;
    filter: brightness(2);
  }
  .wa8-figma-widget-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .wa8-figma-widget-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
  }
  .wa8-figma-widget-sub {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* CTA item */
  .wa8-slide-item--cta {
    font-size: 13px !important;
    color: #88EF3E !important;
    font-weight: 600;
  }
  .wa8-slide-cta-arrow {
    margin-left: auto;
    padding-left: 8px;
    font-size: 13px;
  }
  .wa8-slide-link:active {
    background: rgba(255,255,255,0.06);
    color: #fff;
  }
  /* Pages sub-panel links hover green */
  [id="wa8SlidePages"] .wa8-slide-link:active,
  [id="wa8SlidePagesHome"] .wa8-slide-link:active,
  [id="wa8SlidePagesAbout"] .wa8-slide-link:active,
  [id="wa8SlidePagesServices"] .wa8-slide-link:active,
  [id="wa8SlidePagesCompany"] .wa8-slide-link:active {
    color: #88EF3E !important;
  }
  /* Information sub-panel links hover blue */
  [id="wa8SlideInfo"] .wa8-slide-link:active {
    color: #2268EE !important;
  }

  /* 3x3 dots — show on mobile, right-aligned */
  .wa8-dots-fixed {
    display: flex !important;
    position: fixed !important;
    top: 14px !important;
    right: 28px !important;
    z-index: 10001 !important;
    height: auto !important;
  }
  .wa8-dots-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
  }
  .wa8-dots-grid {
    grid-template-columns: repeat(3, 4.5px) !important;
    gap: 3px !important;
  }
  .wa8-dots-grid span {
    width: 4.5px !important;
    height: 4.5px !important;
  }

  /* ── Mobile: Nav — more top margin ── */
  .navbar-wrapper {
    top: 16px !important;
  }

  /* ── Mobile: 3x3 dots — shrink to fit nav bar, inset from edge ── */
  .wa8-dots-fixed {
    top: 22px !important;
    right: calc(24px + 3vw) !important;
  }
  .wa8-dots-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 7px !important;
  }
  .wa8-dots-grid {
    grid-template-columns: repeat(3, 4px) !important;
    gap: 2.5px !important;
  }
  .wa8-dots-grid span {
    width: 4px !important;
    height: 4px !important;
  }

  /* ── Mobile: Mid-page CTA "Ready to get activated" — full width ── */
  section:has([data-w-id="f8a6d06b-73b1-6d21-43e8-0ab69ef53ba4"]) .wa8-band-content.mid-page-cta {
    width: 100% !important;
    border-radius: 16px !important;
  }

  /* ── Mobile: Our Mission — hide portrait image ── */
  section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .grid-portrait-image {
    display: none !important;
  }

  /* ── Mobile: Tab content area — light gray rounded bg ── */
  section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .w-tab-content {
    background: #f3f3f5 !important;
    border-radius: 12px !important;
    padding: 20px !important;
  }

  /* ── Mobile: Tabs (Strategy/Execution/Funding/Outcomes) — single line, black bg, white text ── */
  section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .tabs-menu.w-tab-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    background: #111111 !important;
    border-radius: 10px !important;
    padding: 4px !important;
    gap: 0 !important;
    overflow: hidden !important;
  }
  section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .tab-link {
    flex: 1 !important;
    justify-content: center !important;
    padding: 8px 4px !important;
    white-space: nowrap !important;
  }
  section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .tab-link div:not(.tab-blip) {
    color: #ffffff !important;
    font-size: clamp(11px, 2.8vw, 14px) !important;
  }
  section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .tab-blip {
    background-color: #ffffff !important;
  }

  /* ── Mobile: Featured Work cards — flatten on mobile (no tilt) ── */
  .wa8-fw-card:nth-child(1),
  .wa8-fw-card:nth-child(2),
  .wa8-fw-card:nth-child(3) {
    transform: rotateX(0deg) rotateY(0deg) !important;
  }

  /* ── Mobile: Methodology — hide "trusted by" logos section ── */
  section:has([data-w-id="39daafe6-b06b-8a52-6a92-afb80021b16a"]) .trusted-wrap {
    display: none !important;
  }

  /* ── Mobile: Our Mission badge square — solid brand green (fix opacity) ── */
  section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .square {
    background-color: #88EF3E !important;
    opacity: 1 !important;
  }

  /* ── Mobile: Tabs bar — full width single-line black bar ── */
  section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .tabs-menu.w-tab-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    border-radius: 0 !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
    padding: 0 !important;
    gap: 0 !important;
    background: #111111 !important;
    border-bottom: none !important;
    margin-bottom: 16px !important;
  }
  section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .tab-link {
    flex: 1 1 0 !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 12px 4px !important;
    height: auto !important;
    white-space: nowrap !important;
    opacity: 0.5 !important;
  }
  section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .tab-link.w--current {
    opacity: 1 !important;
  }
  section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .tab-link div:not(.tab-blip) {
    color: #ffffff !important;
    font-size: clamp(11px, 2.8vw, 14px) !important;
  }
  /* Tab blips — brand blue */
  section:has([data-w-id="3f11bab5-3d42-2cc8-0cb4-b0e90718f8e8"]) .tab-blip {
    background-color: #2268EE !important;
    opacity: 1 !important;
    width: 5px !important;
    height: 5px !important;
  }

  /* ── Mobile: Mid-page CTA — spread blobs for multi-color gradient ── */
  section:has([data-w-id="f8a6d06b-73b1-6d21-43e8-0ab69ef53ba4"]) .wa8-band-content.mid-page-cta {
    overflow: hidden !important;
  }
  section:has([data-w-id="f8a6d06b-73b1-6d21-43e8-0ab69ef53ba4"]) .wa8-hero-blob-wrap-a {
    left: -30vw !important;
    top: -10vw !important;
  }
  section:has([data-w-id="f8a6d06b-73b1-6d21-43e8-0ab69ef53ba4"]) .wa8-hero-blob-wrap-c {
    right: -20vw !important;
    bottom: -10vw !important;
    left: auto !important;
  }
  section:has([data-w-id="f8a6d06b-73b1-6d21-43e8-0ab69ef53ba4"]) .wa8-hero-blob-wrap-e {
    top: auto !important;
    bottom: -15vw !important;
    right: -10vw !important;
    left: auto !important;
  }
  section:has([data-w-id="f8a6d06b-73b1-6d21-43e8-0ab69ef53ba4"]) .wa8-hero-blob-wrap-b {
    top: -20vw !important;
    right: -15vw !important;
    left: auto !important;
  }
  section:has([data-w-id="f8a6d06b-73b1-6d21-43e8-0ab69ef53ba4"]) .wa8-hero-blob-wrap-d {
    left: 10vw !important;
    bottom: -20vw !important;
    top: auto !important;
  }

    /* ── Mobile: Footer — kill all spacing air ── */
  .footer .footer-wrapper {
    gap: 20px !important;
  }
  .footer .footer-top {
    gap: 0 !important;
  }
  .footer .footer-info {
    gap: 12px !important;
  }
  .footer .footer-info-top {
    gap: 8px !important;
  }
  .footer .wa8-footer-logo {
    margin-bottom: 8px !important;
  }

    /* ── Mobile: Footer — centered, no menu links ── */
  .footer .footer-menus {
    display: none !important;
  }
  .footer .footer-top {
    flex-direction: column !important;
    align-items: center !important;
  }
  .footer .footer-info {
    text-align: center !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .footer .footer-info-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .footer .wa8-footer-logo {
    /* Width/height inherited from the responsive clamp at the top
       of this stylesheet — only the bottom margin needs the mobile
       override here. */
    margin-bottom: 20px !important;
  }
  .footer .wa8-body-text {
    text-align: center !important;
  }
  .footer .fine-print.footer-fine-print {
    text-align: center !important;
  }
  .footer .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }
  .footer .footer-bottom .fine-print {
    text-align: center !important;
  }
  .footer .social-icons {
    justify-content: center !important;
  }

    /* ── Mobile: Customer Success — hide portrait, light bg ── */
  section:has([data-w-id="7deb21ca-d5c6-430a-d58f-8b87da915f69"]) .grid-portrait-image {
    display: none !important;
  }
  section:has([data-w-id="7deb21ca-d5c6-430a-d58f-8b87da915f69"]) .square {
    background-color: #88EF3E !important;
    opacity: 1 !important;
  }

}

/* ── /legal + /contact prose & form styling ── */
.wa8-prose .wa8-prose-h2 { margin: 56px 0 16px; }
.wa8-prose .wa8-prose-h3 { margin: 32px 0 8px; }
.wa8-prose .wa8-prose-hr { border: 0; border-top: 1px solid #e5e5e5; margin: 56px 0; }
.wa8-prose p.wa8-body-text { margin: 0 0 16px; }
.wa8-prose .wa8-prose-list { margin: 8px 0 16px; padding-left: 20px; }
.wa8-prose .wa8-prose-list li { margin-bottom: 6px; }
.wa8-prose code { background: #f4f4f5; padding: 2px 6px; border-radius: 4px; font-size: 0.92em; }

.wa8-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 40px; }
@media (max-width: 640px) { .wa8-contact-grid { grid-template-columns: 1fr; } }
.wa8-contact-card { display: block; padding: 24px 26px; border: 1px solid #e5e5e5; border-radius: 14px; background: #fafafa; text-decoration: none !important; color: inherit; transition: border-color .15s ease, background .15s ease; }
.wa8-contact-card:hover { border-color: #2268EE; background: #fff; }
/* ── Center .wa8-container site-wide ────────────────────────────
   The legacy chrome's .wa8-container has max-width: 1248px +
   width: 100% but NO margin: 0 auto, so on viewports >1248px the
   container sits flush-left with the empty space on the right.
   Bug shows clearly on /resources, /blog, /resources/article/*,
   any page that uses .wa8-container as its outer wrapper without
   an additional centering parent. One rule fixes every page.
   Founder ask 2026-05-15. */
.wa8-container {
  margin-left: auto !important;
  margin-right: auto !important;
}

.wa8-contact-card-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #888; font-weight: 600; margin-bottom: 8px; }

.wa8-contact-form { padding: 32px; border: 1px solid #e5e5e5; border-radius: 14px; background: #fafafa; }
.wa8-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .wa8-form-row { grid-template-columns: 1fr; } }
.wa8-form-field { margin-bottom: 18px; }
.wa8-form-label { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 6px; }
.wa8-form-input { width: 100%; padding: 11px 13px; border: 1px solid #ddd; border-radius: 8px; font: inherit; background: #fff; }
.wa8-form-input:focus { outline: none; border-color: #2268EE; }
.wa8-form-textarea { min-height: 120px; resize: vertical; }
.wa8-form-consent { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; line-height: 1.5; }
.wa8-form-consent input { margin-top: 3px; flex-shrink: 0; }
.wa8-form-submit { margin-top: 8px; }

/* ─── app/layout.tsx — brand-font override ─────────────────────── */
/* Brand-font override. All typeface CSS vars + heading hierarchy are
   redirected to Google Sans Flex so the entire site reads in one
   display family. Locked 2026-05-10. */
:root {
  --wa8-font-body: 'Google Sans Flex', Arial, sans-serif !important;
  --wa8-font-badge: 'Google Sans Flex', Arial, sans-serif !important;
  --wa8-font-serif: 'Google Sans Flex', Arial, sans-serif !important;
}
html, body {
  font-family: 'Google Sans Flex', Arial, sans-serif;
  /* opsz 'auto' lets the browser drive the font's optical-size axis
     automatically based on the rendered font-size — same font ships
     beautiful body AND display without manual tuning per element. */
  font-optical-sizing: auto;
}
body {
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.55;
}
/* Heading hierarchy (locked 2026-05-10). Every visible tagline reads
   extra-bold + tight-tracked + upright. Tightening graduates with size:
   bigger heading -> tighter tracking. */
h1, .wa8-h1, .wa8-display {
  font-family: 'Google Sans Flex', Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.04 !important;
  font-style: normal !important;
}
h2, .wa8-h2 {
  font-family: 'Google Sans Flex', Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
  font-style: normal !important;
}
h3, .wa8-h3 {
  font-family: 'Google Sans Flex', Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  font-style: normal !important;
}
h4, .wa8-h4,
h5, .wa8-h5,
h6, .wa8-h6 {
  font-family: 'Google Sans Flex', Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  font-style: normal !important;
}
/* Italic emphasis spans inside heading tags read upright + same
   weight as the parent. Founder rule: no italic emphasis. */
h1 em, h2 em, h3 em,
h1 i, h2 i, h3 i {
  font-style: normal !important;
  font-weight: inherit !important;
  font-family: inherit !important;
}
/* Hide redundant section eyebrows (small-caps badge above each H2:
   "Methodology", "Our Mission", "customer success", etc.). With H2s at
   Google Sans Flex 800, eyebrows would read as decoration. */
.badge-title,
.wa8-fw-label {
  display: none !important;
}

/* ─── app/loading.tsx — spinner keyframe ─────────────────────────── */
@keyframes wa8-spin {
  to { transform: rotate(360deg); }
}

/* ─── Body background + default text color ──────────────────────
   The legacy chrome's body rule sets BOTH `background-color:
   var(--colors-interface--dark)` AND `color:
   var(--colors-interface--white)`. Flipping only the bg leaves
   every default-color text node (FAQ headings, "Our Services"
   tile copy, LeadMagnetBar arrows, generic <p>/<span>) rendering
   white-on-white. Override both. */
html, body {
  background-color: #ffffff;
  color: #0B0B12;
}
/* Smooth in-page anchor jumps (TOC links on /legal, /gdpr,
   /privacy, the "How we activate" 4-tile row, etc.). */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ─── Floating controls (Back-to-Top + Accessibility toolbar) ────
   Component: components/v3/FloatingControls.tsx. Sitewide, mounted
   from app/layout.tsx. Bottom-right corner, stacked above the
   "Cookie settings" link (which sits flush at footer's bottom-left
   on most pages). Hidden on print routes (layout-level skip). */
.wa8-fc {
  position: fixed;
  right: clamp(16px, 2.4vw, 28px);
  bottom: clamp(16px, 2.4vw, 28px);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}
.wa8-fc-btn {
  pointer-events: auto;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(11, 11, 18, 0.10);
  background: #ffffff;
  color: #0B0B12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(20, 20, 20, 0.04),
    0 6px 18px -10px rgba(20, 20, 20, 0.18);
  transition: transform 160ms ease, background 160ms ease, opacity 200ms ease;
}
.wa8-fc-btn:hover {
  background: #f5f5f3;
  transform: translateY(-1px);
}
.wa8-fc-btn:focus-visible {
  outline: 2px solid #2268EE;
  outline-offset: 2px;
}
.wa8-fc-a11y {
  /* always visible */
}
.wa8-fc-top {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}
.wa8-fc-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.wa8-fc-popover {
  pointer-events: auto;
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: 280px;
  background: #ffffff;
  border: 1px solid rgba(11, 11, 18, 0.10);
  border-radius: 14px;
  padding: 14px;
  box-shadow:
    0 1px 0 rgba(20, 20, 20, 0.03),
    0 18px 48px -22px rgba(20, 20, 20, 0.22);
}
.wa8-fc-popover-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.wa8-fc-popover-title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #0B0B12;
}
.wa8-fc-popover-reset {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: #2268EE;
  cursor: pointer;
}
.wa8-fc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid rgba(11, 11, 18, 0.06);
  font-size: 13px;
  color: #0B0B12;
}
.wa8-fc-row:first-of-type {
  border-top: none;
}
.wa8-fc-row-label {
  font-weight: 500;
}
.wa8-fc-stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wa8-fc-stepper button {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(11, 11, 18, 0.12);
  background: #ffffff;
  color: #0B0B12;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.wa8-fc-stepper button:hover { background: #f5f5f3; }
.wa8-fc-stepper-val {
  display: inline-block;
  min-width: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: #555;
}
.wa8-fc-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #2268EE;
  cursor: pointer;
}

/* ─── A11y root-class effects (applied by FloatingControls) ────── */
:root {
  --wa8-a11y-font-scale: 1;
}
body {
  font-size: calc(1em * var(--wa8-a11y-font-scale));
}
html.wa8-a11y-contrast body,
html.wa8-a11y-contrast {
  background-color: #ffffff !important;
  color: #000000 !important;
}
html.wa8-a11y-contrast a {
  color: #1648c2 !important;
  text-decoration: underline !important;
}
html.wa8-a11y-contrast button,
html.wa8-a11y-contrast input,
html.wa8-a11y-contrast select,
html.wa8-a11y-contrast textarea {
  outline: 1px solid #000000;
}
html.wa8-a11y-underline a {
  text-decoration: underline;
}
html.wa8-a11y-reduce-motion,
html.wa8-a11y-reduce-motion * {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* ─── Default heading + body text colors on the light surround ────
   The legacy chrome's `.wa8-h1..h6` + `.wa8-body-text` set color to
   `var(--colors-interface--white)` (= "white") and
   `var(--colors-interface--body-text)` (= "#ffffffb3"). That made
   sense on the old dark theme; on our white-surround layout it
   makes every default-classed heading + body div render invisible.
   Flip them to dark by default and re-flip inside dark bands
   (.wa8-band-content.wa8-hero / .wa8-cta / .mid-page-cta etc.).

   We omit `.wa8-display` here because the hero owns its own color
   styling — clamping it to dark would override the hero white
   headline rule (which lives in HeroPolish via :has() selectors). */
.wa8-h1, .wa8-h2, .wa8-h3, .wa8-h4, .wa8-h5, .wa8-h6 {
  color: #0B0B12;
}
.wa8-body-text {
  color: #4A5568;
}
/* Re-flip back to white inside the gradient dark bands so the hero
   subtitle, final CTA copy, mid-page CTA, etc. stay legible. The
   parent selectors below match the same scopes the chrome already
   uses for `--wa8-brand-3` remap (see "Gradient sections" block). */
.wa8-band-content.wa8-hero .wa8-h1,
.wa8-band-content.wa8-hero .wa8-h2,
.wa8-band-content.wa8-hero .wa8-h3,
.wa8-band-content.wa8-hero .wa8-h4,
.wa8-band-content.wa8-hero .wa8-h5,
.wa8-band-content.wa8-hero .wa8-h6,
.wa8-band-content.wa8-hero .wa8-body-text,
.wa8-band-content.wa8-cta .wa8-h1,
.wa8-band-content.wa8-cta .wa8-h2,
.wa8-band-content.wa8-cta .wa8-h3,
.wa8-band-content.wa8-cta .wa8-h4,
.wa8-band-content.wa8-cta .wa8-h5,
.wa8-band-content.wa8-cta .wa8-h6,
.wa8-band-content.wa8-cta .wa8-body-text,
.wa8-band-content.mid-page-cta .wa8-h1,
.wa8-band-content.mid-page-cta .wa8-h2,
.wa8-band-content.mid-page-cta .wa8-h3,
.wa8-band-content.mid-page-cta .wa8-h4,
.wa8-band-content.mid-page-cta .wa8-h5,
.wa8-band-content.mid-page-cta .wa8-h6,
.wa8-band-content.mid-page-cta .wa8-body-text {
  color: #ffffff;
}

/* Service-tile colors + hover state — the existing rules were scoped
   to a stripped Webflow IX2 attribute (data-w-id="798fee0b-..."),
   so they stopped matching after Wave 4 of the rip. Replicate the
   intent with plain class selectors.

   Hover behavior (founder ask 2026-05-18: "almost a pill like but
   not round but rectanglish squarish light grey bg appearing behind
   it with subtle transition effect") — siblings dim to 0.45 on grid
   hover; the hovered tile gets a soft brand-blue wash + outline. */
.wa8-svctile-text .wa8-body-text.wa8-bold {
  color: #111111 !important;
}
.wa8-svctile-text div:not(.wa8-body-text) {
  color: #555555 !important;
}
.wa8-svctile-iconbox {
  background-color: #111111;
  border-color: #222;
}
.wa8-svctile-arrow {
  /* Tint the source SVG to brand-blue without re-exporting. */
  filter: brightness(0) saturate(100%) invert(30%) sepia(95%) saturate(2500%) hue-rotate(212deg) brightness(95%) contrast(93%);
}
.wa8-svctile {
  padding: 14px 18px;
  margin: 4px 6px;
  border-radius: 18px;
  border: 1px solid transparent;
  background-color: transparent;
  transition:
    background-color 280ms ease,
    border-color 280ms ease,
    opacity 280ms ease;
}
.wa8-svctile-grid:hover .wa8-svctile {
  opacity: 0.45;
}
.wa8-svctile-grid:hover .wa8-svctile:hover {
  opacity: 1;
  background-color: rgba(91, 140, 255, 0.06);
  border-color: rgba(91, 140, 255, 0.20);
}

/* ─── Mobile hero top padding ─────────────────────────────────
   Founder ask 2026-05-19: above-fold H1 buried under the pill nav
   on mobile (.wa8-mob-pill is fixed at top:16px and ~54px tall, so
   it occupies the 0–70px band at the top of the viewport). The H1
   was landing at y≈33px — right behind/next-to the nav. Add
   breathing room. Also nudge the audit-page + activations page +
   solutions page heroes (they use .wa8-band-content.wa8-hero too). */
@media (max-width: 700px) {
  .wa8-band-content.wa8-hero .wa8-band-inset {
    padding-top: 92px !important;
  }
}