/* One brand blue everywhere — the hero / Creatrix Campus blue #2a2d9f (rgb 42,45,159).
   Every dark section uses it as the base; depth comes only from soft light overlays, never a different navy. */
:root{--dark:#2a2d9f;--brand:#2a2d9f;--brand-2:#5356d2;--brand-3:#9092e2;--on-brand:#fff;--on-brand-soft:#d9dbff}

#reimagine.rmg,#industries.ind,#approach.process,#security.vault,.dark-section{
  background:radial-gradient(900px 520px at 50% 62%,rgba(203,208,255,.14),rgba(203,208,255,0) 70%),#2a2d9f!important;color:#fff}
.rmg::before{background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px)}

/* accents on blue: light lavender instead of mid-blue (keeps contrast) */
.rmg .rmg-accent,.tt .tt-accent,.vault .vault-accent,.ind .muted-ind,.muted-light{color:#c9ccff!important}
.dark-section .section-heading>div>p,.ind .section-heading>div>p{color:#dfe1ff!important}
.dark-section .section-index,.ind .section-index{color:#c9ccff}

/* panels inside blue sections: glass on the same blue, not a darker navy */
.rmg-frame{background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.06));box-shadow:0 0 0 1px rgba(255,255,255,.2),0 40px 90px -40px rgba(10,12,60,.6)}
.rmg-metrics>div{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.rmg-metrics span,.rmg-note,.rmg-hint{color:#d3d6ff}
.rmg-url{background:rgba(255,255,255,.12);color:#eef0ff}
.ind-scale{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);box-shadow:none}
.ind-screen{background:radial-gradient(120% 140% at 0% 0%,rgba(255,255,255,.14),rgba(255,255,255,.05));border-color:rgba(255,255,255,.2)}
.ind-st{color:#d3d6ff}.ind-st small{color:#b9bdf5}
.tt-halo{background:radial-gradient(circle,rgba(203,208,255,.35),rgba(203,208,255,0) 65%)}
.tt-tech li{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
.tt-desc,.tt-since,.tt-node span{color:#dfe1ff}.tt-node{color:#c9ccff}
.tt-era,.tt-node.next b{color:#c9ccff}
.tt-track{background:rgba(255,255,255,.22)}
.tt-node::before{background:#2a2d9f;border-color:#c9ccff}
.tt-node.past::before{background:#fff;border-color:#fff}
.v-floor{background:linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px) 0 0/40px 40px,radial-gradient(ellipse at 60% 50%,#3438b0,#2a2d9f 70%)!important;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 100px rgba(203,208,255,.2)!important}
.vault-certs>div{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}
.vault-certs span:not(.vault-seal){color:#dfe1ff}
.vault-seal{background:radial-gradient(circle at 35% 30%,#7a7eea,#5356d2 70%)}
.process-list p,.process-note{color:#dfe1ff}

/* the office board in Global used a separate deep navy — bring it onto the brand blue */
.gl-board{background:#f5f7fa;border:1px solid #e1e4f3;box-shadow:0 24px 50px -36px rgba(15,18,51,.35)}
.gl-row{border-bottom-color:#e4e7f3}
.gl-head{color:#7a7ea3}
.gl-role{color:#0f1233}
.gl-flap i{color:#2a2d9f;background:linear-gradient(#eceef5 50%,#e3e6f0 50%);box-shadow:inset 0 0 0 1px #d8dbe8}
.gl-flap i::after{background:rgba(42,45,159,.12)}

/* ===== Section colour rhythm: Blue → White → Light grey → … (three colours only) =====
   Blue  #2a2d9f  (hero / Creatrix blue)
   White #ffffff
   Light #f5f7fa  (the soft grey-blue used in "Picture it. We'll build it." — also Creatrix's light grey) */
:root{--sec-blue:#2a2d9f;--sec-white:#ffffff;--sec-light:#f5f7fa}
body{background:var(--sec-white)}
#possibilities{background:var(--sec-white)!important}
#capabilities{background:var(--sec-light)!important}
#services{background:var(--sec-white)!important}
#one-partner{background:var(--sec-white)!important}
#creatrix{background:var(--sec-light)!important}
#data-studio{background:var(--sec-white)!important}
#clients{background:var(--sec-light)!important}
#proof{background:var(--sec-white)!important}
#global{background:var(--sec-white)!important}
#faq{background:var(--sec-white)!important}
#build{background:var(--sec-light)!important}
#contact,footer{background:var(--sec-white)!important}
/* sections that sit inside .wrap need full-bleed colour */
#capabilities,#creatrix,#proof,#contact{box-shadow:0 0 0 100vmax var(--bleed);clip-path:inset(0 -100vmax)}
#capabilities{--bleed:var(--sec-light)}#creatrix{--bleed:var(--sec-light)}#proof{--bleed:var(--sec-white)}#contact{--bleed:var(--sec-white)}

/* 10 · phone section on light grey (sits between blue Industries and white Proof) */
#ahead.tt{background:radial-gradient(800px 600px at 50% 58%,rgba(42,45,159,.08),rgba(42,45,159,0) 62%),var(--sec-light)!important;color:#0f1233}
.tt .section-heading h2{color:#0f1233}.tt .tt-accent{color:#2a2d9f!important}
.tt .section-heading>div>p{color:#4e5276!important}.tt .section-index{color:#2a2d9f}
.tt-year{background:linear-gradient(180deg,#2a2d9f 30%,#8f93e6);-webkit-background-clip:text;background-clip:text}
.tt-bar{background:rgba(42,45,159,.15)}
.tt-era{color:#2a2d9f!important}
.tt-head{color:#0f1233}
.tt-desc,.tt-since{color:#4e5276!important}
.tt-halo{background:radial-gradient(circle,rgba(83,86,210,.22),rgba(83,86,210,0) 65%)!important}
.tt-tech-h{color:#2a2d9f!important}
.tt-tech li{background:#fff!important;border-color:#dfe2f3!important;color:#0f1233;box-shadow:0 10px 24px -18px rgba(42,45,159,.5)}
.tt-tech li i{background:#2a2d9f;box-shadow:none}
.tt-track{background:rgba(42,45,159,.15)!important}
.tt-track b{background:linear-gradient(90deg,#2a2d9f,#5356d2);box-shadow:none}
.tt-dot{background:#2a2d9f;box-shadow:0 0 0 5px rgba(42,45,159,.18)}
.tt-node{color:#7a7ea3!important}.tt-node span{color:#7a7ea3!important}
.tt-node::before{background:#fff!important;border-color:#c3c7e6!important}
.tt-node.past{color:#4e5276!important}.tt-node.past::before{background:#2a2d9f!important;border-color:#2a2d9f!important}
.tt-node.on,.tt-node.on span{color:#0f1233!important}
.tt-node.next b{color:#2a2d9f!important}
.tt-phone{box-shadow:0 0 0 1.5px rgba(42,45,159,.25),inset 0 0 0 1px rgba(255,255,255,.12),0 50px 90px -30px rgba(15,18,51,.45)}
@media(min-width:1101px){
  #global>.wrap{position:relative}
  #global .gl-stats{position:absolute;right:0;top:0;margin:0;flex-direction:column;gap:10px;align-items:flex-end;text-align:right}
  #global .gl-stats div{justify-content:flex-end}
  #global .section-heading{margin-bottom:40px}
}