/* ExGro brand system — 17 Aug 2026
   Deep navy + cool light surfaces + cyan/violet/coral/lime signal colours. */
:root{
  --navy:#07101f!important;
  --navy-2:#0d1a30!important;
  --navy-3:#040914!important;
  --gold:#5f55d6!important;       /* legacy alias: accessible violet on light surfaces */
  --gold-2:#45d7ff!important;     /* legacy alias: cyan on dark surfaces / CTA */
  --ink:#101827!important;
  --muted:#5f6b80!important;
  --paper:#f6f8fe!important;
  --line:rgba(18,32,55,.12)!important;
  --white:#fff;
  --shadow:0 18px 54px rgba(8,20,42,.11)!important;
  --radius:20px!important;
  --exgro-bg:#07101f;
  --exgro-bg-2:#0b1629;
  --exgro-panel:#10203a;
  --exgro-cyan:#45d7ff;
  --exgro-cyan-dark:#087798;
  --exgro-violet:#8c6bff;
  --exgro-violet-dark:#5f55d6;
  --exgro-coral:#ff5a70;
  --exgro-lime:#b9ff57;
  --exgro-light:#f6f8fe;
  --exgro-surface:#fff;
  --exgro-font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html{background:var(--exgro-bg);}
body{font-family:var(--exgro-font)!important;color:var(--ink)!important;background:#fff!important;line-height:1.62!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{font-family:var(--exgro-font)!important;text-wrap:balance}
h1{font-weight:780!important;line-height:1.01!important;letter-spacing:-.052em!important}
h2{font-weight:760!important;line-height:1.045!important;letter-spacing:-.044em!important}
h3{font-weight:720!important;line-height:1.14!important;letter-spacing:-.024em!important}
p,li{color:inherit}
section{position:relative}
.eyebrow,.service-kicker,.insight-label{color:var(--exgro-violet-dark)!important;font-weight:800!important}

/* Header */
.site-header,header.site-header{background:rgba(5,11,24,.93)!important;border-bottom:1px solid rgba(255,255,255,.09)!important;box-shadow:0 8px 28px rgba(0,0,0,.12)!important}
.site-header .navlinks,.site-header .navlinks>a,.site-header .service-nav__trigger{color:#e9f0fb!important}
.site-header .navlinks>a:hover,.site-header .navlinks>a[aria-current="page"],.site-header .service-nav__trigger:hover,.site-header .service-nav__trigger.current{color:#fff!important}
.site-header .navlinks>a:after,.site-header .service-nav__trigger:after{background:linear-gradient(90deg,var(--exgro-cyan),var(--exgro-violet))!important;height:2px!important}
.site-header .service-nav__dropdown{background:#0b1629!important;border-color:rgba(255,255,255,.1)!important}
.site-header .service-nav__overview{background:rgba(69,215,255,.07)!important;border-color:rgba(69,215,255,.23)!important}
.site-header .service-nav__grid em{color:var(--exgro-cyan)!important}
.site-header .service-nav__grid small,.site-header .service-nav__overview small{color:#aebbd0!important}

/* Buttons */
.btn-primary,.header-cta,.contact-submit .btn{
  background:linear-gradient(135deg,#62e2ff 0%,#45d7ff 52%,#8c6bff 150%)!important;
  color:#06111d!important;border-color:rgba(69,215,255,.75)!important;
  box-shadow:0 12px 28px rgba(69,215,255,.16)!important;
}
.btn-primary:hover,.header-cta:hover{background:linear-gradient(135deg,#83e9ff,#58dcff 58%,#9b80ff 155%)!important;transform:translateY(-1px)!important;box-shadow:0 15px 34px rgba(69,215,255,.22)!important}
.btn-outline{border-color:rgba(255,255,255,.26)!important;background:rgba(255,255,255,.055)!important;color:#f7fbff!important}
.btn-outline:hover{background:#fff!important;color:#07101f!important}
.btn:focus-visible,button:focus-visible,a:focus-visible{outline-color:var(--exgro-cyan)!important}

/* Dark visual language: navy, cool glows and subtle 42px grid. */
.service-hero,.ms-hero,.egabout-hero,.em-hero,.insights-hero,.contact-hero,
.opportunities,.industries,.contact-location,.em-dark,.em-campaigns,.egabout-final-cta{
  color:#f7fbff!important;
  background-color:var(--exgro-bg)!important;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
    radial-gradient(circle at 82% 14%,rgba(69,215,255,.14),transparent 27%),
    radial-gradient(circle at 17% 82%,rgba(140,107,255,.12),transparent 29%),
    linear-gradient(150deg,#07101f 0%,#0b1629 64%,#050b18 100%)!important;
  background-size:42px 42px,42px 42px,auto,auto,auto!important;
}
.service-hero .eyebrow,.ms-hero .eyebrow,.egabout-hero .eyebrow,.em-hero .eyebrow,.insights-hero .eyebrow,.contact-hero .eyebrow,
.opportunities .eyebrow,.industries .eyebrow,.contact-location .eyebrow,.em-dark .eyebrow,.em-campaigns .eyebrow,.egabout-final-cta .eyebrow{color:var(--exgro-cyan)!important}
.service-hero p,.ms-hero p,.egabout-hero p,.em-hero p,.insights-hero p,.contact-hero p,
.opportunities p,.industries p,.contact-location p,.em-dark p,.em-campaigns p,.egabout-final-cta p{color:#b7c3d5!important}

/* Home hero keeps its real image, but the colour treatment follows the new brand. */
body.home-page .hero{background-color:var(--exgro-bg)!important}
body.home-page .hero-static-shade{background:linear-gradient(90deg,rgba(5,11,24,.98) 0%,rgba(7,16,31,.88) 43%,rgba(7,16,31,.53) 74%,rgba(7,16,31,.28) 100%)!important}
body.home-page .hero:after{background:linear-gradient(transparent,#07101f)!important}
body.home-page .hero h1 span{color:var(--exgro-cyan)!important;text-shadow:0 0 30px rgba(69,215,255,.12)}
body.home-page .hero .eyebrow{color:#7de8ff!important}
body.home-page .hero .lead{color:#d5dfed!important}
.proof-strip span{border-color:rgba(125,232,255,.18)!important;background:rgba(7,16,31,.46)!important;color:#edf6ff!important}

/* Light sections and surfaces */
.why,.process,.insights-listing-body,.egabout-purpose,.egabout-specialists,.egabout-belief,.em-definition,
.services-page-body,.service-page,.marketing-services-page{background-color:var(--exgro-light)}
.why-main,.ms-final-card,.egabout-founder-card,.egabout-market-visual,.service-stage-card{
  background:linear-gradient(145deg,#09172c,#10284a)!important;color:#fff!important;border:1px solid rgba(69,215,255,.12)!important
}
.why-main p,.ms-final-card p,.egabout-founder-card p,.service-stage-card p{color:#bdc9da!important}
.money-questions div{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.11)!important}
.trust-card,.why-item,.insight-card,.service-deliver-card,.service-inputs-card,.services-page-card,.egabout-purpose-card,.egabout-team-card,.contact-form-card,
.em-carousel article,.em-flow>div{background:#fff!important;border-color:rgba(18,32,55,.11)!important;box-shadow:0 12px 34px rgba(10,25,52,.055)!important}
.trust-card:hover,.insight-card:hover,.services-page-card:hover{box-shadow:0 18px 44px rgba(10,25,52,.10)!important}
.trust-card .tag,.service-deliver-card>b,.egabout-purpose-no,.egabout-years,.em-carousel small{color:var(--exgro-violet-dark)!important}
.trust-card p,.why-item span,.insight-card-copy>p:not(.insight-label),.service-deliver-card p,.service-inputs-card p,.egabout-team-card p{color:#647086!important}

/* Marquee becomes a cool signal strip rather than yellow/gold. */
.marquee{background:linear-gradient(90deg,#0d203b,#123457 50%,#172750)!important;color:#e9f7ff!important;border-color:rgba(69,215,255,.16)!important}
.marquee .track span{color:#e9f7ff!important}

/* Navigation/carousel controls */
.carousel-btn,.ms-carousel-btn,.em-controls button{background:#0c1a30!important;border-color:rgba(69,215,255,.22)!important;color:#fff!important}
.carousel-btn:hover,.ms-carousel-btn:hover,.em-controls button:hover{background:#123052!important;border-color:rgba(69,215,255,.55)!important;color:#fff!important}
.carousel-count,.swipe-note{color:#7d8ca4!important}

/* Forms */
input,select,textarea,.contact-form input,.contact-form select{color:#111827!important;background:#fff!important;border-color:#cfd8e6!important}
input:focus,select:focus,textarea:focus,.contact-form input:focus,.contact-form select:focus{border-color:#52cdec!important;box-shadow:0 0 0 3px rgba(69,215,255,.12)!important}
.contact-form label{color:#243148!important}
.contact-form .multi-select{border-color:#cfd8e6!important}
.contact-form .multi-select[open]{border-color:#52cdec!important;box-shadow:0 0 0 3px rgba(69,215,255,.12)!important}
.contact-form .multi-select summary:after{color:var(--exgro-violet-dark)!important}

/* About ExGro page: remove brown/purple-gold remnants. */
.egabout-page{--ab-dark:#07101f!important;--ab-dark2:#0b1629!important;--ab-gold:#45d7ff!important;--ab-ink:#101827!important;--ab-muted:#647086!important;--ab-paper:#f6f8fe!important;--ab-line:rgba(18,32,55,.12)!important}
.egabout-proof-grid strong,.egabout-person-meta span,.egabout-purpose-featured .egabout-purpose-no,.egabout-region-board b{color:var(--exgro-cyan)!important}
.egabout-person-mark{background:linear-gradient(135deg,var(--exgro-cyan),#8c6bff)!important;color:#06111d!important}
.egabout-mini-mark{background:#0b1629!important;color:var(--exgro-cyan)!important}
.egabout-flow-item>span,.egabout-years{color:var(--exgro-violet-dark)!important}
.egabout-globe{background:radial-gradient(circle at 42% 36%,rgba(69,215,255,.16),transparent 34%)!important}
.egabout-globe i{background:var(--exgro-cyan)!important;box-shadow:0 0 0 7px rgba(69,215,255,.12),-49px 36px 0 -1px #8c6bff,21px -35px 0 -2px #ff5a70!important}

/* Insight/editorial warm backgrounds shift to cool whites. */
.em-definition,.em-crm,.em-websites,.egabout-intro,.egabout-founder,.egabout-markets,.ms-final-section{background:#fff!important}
.em-answer{background:#fff!important;border-left-color:var(--exgro-violet)!important;box-shadow:0 16px 40px rgba(10,25,52,.07)!important}
.em-flow{background:#f6f8fe!important}
.em-channel-grid article{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.10)!important}

/* Footer */
footer{background:#050b18!important;color:#d7e2ef!important;border-top:1px solid rgba(69,215,255,.10)!important}
footer h3{color:#fff!important}
.footer-links a{color:#aebbd0!important}
.footer-links a:hover{color:#6de2ff!important}
.footer-brand-block p,.network,.copyright{color:#8797ae!important}
.footer-contact-whatsapp{color:#63ddff!important}

@media(max-width:860px){
  .site-header .navlinks{background:#07101f!important;border-top-color:rgba(69,215,255,.10)!important}
  .service-nav__dropdown{background:rgba(9,20,38,.98)!important}
  .site-header .navlinks>a:hover{background:rgba(69,215,255,.055)!important}
}
@media(max-width:620px){
  h1{font-size:clamp(2.45rem,11.5vw,3.45rem)!important}
  h2{font-size:clamp(1.95rem,9vw,2.65rem)!important}
  h3{line-height:1.18!important}
  body.home-page .hero-static-shade{background:linear-gradient(90deg,rgba(5,11,24,.98),rgba(7,16,31,.78))!important}
}