/* ===== Canada Vala RJ Sahil — V2 design kit, applied over V5 content =====
   Loaded LAST in <head> so it themes every page consistently. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --night:#140a28; --cream:#fcf7f0;
  --saffron:#ff9d2e; --marigold:#ffb84d; --maple:#e3452f; --teal:#15b8a6; --violet:#7c5cff;
  --muted:#c3bcd8; --muted-ink:#6a6180; --cvline:rgba(255,255,255,.12);
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --bodyf:"Inter",ui-sans-serif,system-ui,sans-serif;
}
body{background:var(--night)!important;color:var(--cream);font-family:var(--bodyf);-webkit-font-smoothing:antialiased}
h1,h2,h3,.sec-h,.brand,.site-nav .nb{font-family:var(--display)!important;letter-spacing:-.03em}
.serif{font-family:var(--serif)!important;font-style:italic;font-weight:400;letter-spacing:0}

/* keep real content above the fixed background layers */
.site-nav,header,main,footer,.site-footer{position:relative;z-index:3}

/* background layers (nodes injected by brand.js) */
#cv-fx{position:fixed;inset:0;pointer-events:none;z-index:0}
#cv-fx .blob{position:absolute;border-radius:50%;filter:blur(72px);opacity:.5;will-change:transform}
#cv-fx .b1{width:520px;height:520px;background:radial-gradient(circle,var(--saffron),transparent 70%);top:-170px;right:-120px}
#cv-fx .b2{width:460px;height:460px;background:radial-gradient(circle,var(--violet),transparent 70%);top:42%;left:-190px}
#cv-fx .b3{width:420px;height:420px;background:radial-gradient(circle,var(--teal),transparent 70%);bottom:-170px;right:8%}
#cv-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#cv-glow{position:fixed;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(124,92,255,.16),transparent 65%);transform:translate(-50%,-50%);pointer-events:none;z-index:2;transition:opacity .3s;opacity:0}

/* nav — V2 glass (reuses the existing .site-nav chrome) */
.site-nav{background:rgba(20,10,40,.72)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--cvline)!important;box-shadow:none!important}
.site-nav .nb{color:#fff!important;font-weight:800}
.site-nav .nb .rj{color:var(--marigold)!important}
.site-nav a.nl{color:var(--muted)!important;font-weight:600;border-radius:999px;opacity:1!important}
.site-nav a.nl:hover{color:#fff!important;background:rgba(255,255,255,.08)!important}
.site-nav a.nl.on{color:#fff!important;background:linear-gradient(135deg,var(--saffron),var(--maple))!important}

/* footer */
.site-footer{background:#0d0618!important;color:var(--muted)!important;border-top:1px solid var(--cvline)}
.site-footer a{color:var(--marigold)!important}

/* buttons — primary gets the V2 gradient + lift; ghosts/alts keep remapped styles */
.btn{font-family:var(--bodyf);border-radius:999px;transition:.2s transform,.2s box-shadow}
.btn:hover{transform:translateY(-2px)}
.btn:not(.ghost):not(.alt):not(.btn-ghost):not(.btn-dark):not(.btn-skip){background:linear-gradient(135deg,var(--saffron),var(--maple))!important;color:#fff!important;box-shadow:0 10px 30px rgba(227,69,47,.32)}

/* eyebrows / kickers in marigold */
.eyebrow,.kicker{color:var(--marigold)!important}

/* scroll-reveal (class added by brand.js, so no-JS = fully visible) */
.cv-reveal{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.cv-reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.cv-reveal{opacity:1!important;transform:none!important}}

/* nicer scrollbar */
::selection{background:rgba(255,157,46,.3)}

@keyframes cvpulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,255,255,.55)}50%{opacity:.75;box-shadow:0 0 0 7px rgba(255,255,255,0)}}

/* ===== V2 feel on the inner (service) pages ===== */
/* let the fixed blob wash show through: drop opaque section backgrounds */
.section, .section.dark, .section.alt, .inquiry, .cta, .proof, header.hero, .hero{background:transparent!important;background-image:none!important}
.section.dark{background:rgba(124,92,255,.05)!important}
.section.alt{background:rgba(255,255,255,.025)!important}
.inquiry{background:rgba(255,255,255,.02)!important}
/* keep the gradient CTA box + cards solid */
.cta-box,.final,.cta-box *{background-image:unset}

/* prominent, gradient stat numbers */
.metric b,.cs b,.reach strong,.age-number{font-family:var(--display)!important;font-weight:800!important;background:linear-gradient(120deg,#fff,var(--marigold))!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.metric b,.cs b{font-size:clamp(2.3rem,4.6vw,3.1rem)!important;letter-spacing:-.03em}
.reach strong{font-size:clamp(3.2rem,7vw,5rem)!important}

/* unify info boxes as dark panels with light text (no dark-on-dark, no light-on-light) */
.order-card,.guard,.warn{background:#201a38!important;border:1px solid var(--cvline)!important;box-shadow:0 10px 30px rgba(0,0,0,.35)!important}
.order-card,.order-card *,.guard,.guard *,.warn,.warn *{color:var(--cream)!important}
.order-card .eyebrow,.guard .eyebrow,.guard b,.warn b{color:var(--marigold)!important}
.order-card .btn,.guard .btn,.warn .btn{color:#fff!important}

/* running marquee injected by brand.js on inner pages */
.cv-marquee{border-top:1px solid var(--cvline);border-bottom:1px solid var(--cvline);padding:14px 0;overflow:hidden;white-space:nowrap;background:rgba(255,255,255,.025);position:relative;z-index:3}
.cv-marquee .t{display:inline-flex;gap:38px;animation:cvscroll 30s linear infinite;font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--muted)}
.cv-marquee .t .em{background:linear-gradient(120deg,var(--saffron),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes cvscroll{to{transform:translateX(-50%)}}

/* gentle blob drift */
#cv-fx .b1{animation:cvfloat1 16s ease-in-out infinite}
#cv-fx .b2{animation:cvfloat2 20s ease-in-out infinite}
#cv-fx .b3{animation:cvfloat1 22s ease-in-out infinite}
@keyframes cvfloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(-28px,28px)}}
@keyframes cvfloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(36px,-18px)}}

/* ---- mobile safety (inner pages) ---- */
html,body{overflow-x:hidden;max-width:100%}
img{max-width:100%}
*{min-width:0}
@media(max-width:600px){
  .wrap{width:min(100% - 26px,1180px)!important}
  .hero{min-height:auto!important}
  .cv-marquee .t{font-size:.9rem;gap:28px}
  section,.section{padding:52px 0!important}
  .inquiry,.cta{padding:48px 0!important}
  .section h2,.sec-h{font-size:clamp(1.8rem,8vw,2.4rem)!important}
  h1{font-size:clamp(2.2rem,10vw,3rem)!important}
}