/* =====================================================================
   SmartNova AV — light theme
   Loaded after each page's inline <style>, so selectors here mirror the
   originals and win on source order. The home video hero and the footer
   keep the original dark palette; everything else is white / soft grey.
   To roll back: remove the <link> to this file (and the .logo-dark img).
   ===================================================================== */

:root{
  --navy:#FFFFFF;
  --navy-2:#F4F8FC;
  --panel:#EEF4FA;
  --panel-2:#E8F0F8;
  --card:#FFFFFF;
  --muted-d:#5A6B7C;
  --hair-d:#E1E9F1;
  --text:#34485C;                       /* long-form body copy */
  --card-shadow:0 14px 40px rgba(13,33,46,.07);
  --card-shadow-hover:0 20px 44px rgba(13,33,46,.12);
}

/* dark islands: home video hero, header, mobile menu and footer keep the original tokens */
.hero,.nav,.menu,.foot{
  --navy:#0A1018;--navy-2:#0D1722;--panel:#111E2C;--panel-2:#16242F;--card:#16212E;
  --muted-d:#9FB0C2;--hair-d:rgba(255,255,255,.09);
}

/* ---------- buttons ---------- */
.btn-line{border-color:#CDD9E4;color:var(--ink)}
.btn-line:hover{border-color:var(--blue-2);color:var(--blue-2)}
.hero .btn-line{border-color:rgba(255,255,255,.4);color:#fff}
.hero .btn-line:hover{border-color:var(--blue);color:var(--blue)}

/* ---------- nav ----------
   Header and logo stay dark as before. Inner pages used to sit the
   transparent header on a navy page head; that head is white now, so the
   dark glass bar is shown from the top on inner pages. */
/* .97 rather than the old .9: at .9 the white page underneath turned the bar grey */
.nav.scrolled,body.sub .nav{background:rgba(10,16,24,.97);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--hair-d)}

/* ---------- shared section bits ---------- */
.dark .eyebrow,.page-head .eyebrow{color:var(--blue-2)}
.dark .eyebrow::before,.page-head .eyebrow::before{background:var(--blue-2)}
.dark .sec-head h2{color:var(--ink)}
.dark .sec-head h2 .thin{color:var(--blue-2)}

/* ============ HOME ============ */
/* hero video fades into white behind the first journey cards instead of
   ending on a hard edge. White fade is layered above the dark overlay so
   it reaches true white; .build continues the fade over the video below. */
.stage-shade{background:
  linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 78%, #fff 100%),
  linear-gradient(112deg, rgba(6,12,20,.9) 0%, rgba(6,12,20,.55) 42%, rgba(6,12,20,.3) 100%)}
.build{background:linear-gradient(to bottom, rgba(255,255,255,0) 0, rgba(255,255,255,.55) 120px, #fff 280px)}
/* journey steps: gradient-edged frame with viewfinder corner brackets */
.jstep{
  --frame:linear-gradient(120deg,var(--blue) 0%,rgba(92,184,240,.2) 32%,rgba(92,184,240,.2) 68%,var(--blue-2) 100%);
  border:1.5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--frame) border-box;
  box-shadow:0 18px 44px rgba(13,33,46,.08);
}
.jstep:nth-child(even){background:linear-gradient(#F7FAFD,#F7FAFD) padding-box,var(--frame) border-box}
.jstep:hover{border-color:transparent;box-shadow:0 22px 50px rgba(45,143,214,.18)}
.jstep::before,.jstep::after{content:"";position:absolute;width:38px;height:38px;pointer-events:none;transition:transform .25s ease}
.jstep::before{top:-9px;left:-9px;border-top:3px solid var(--blue-2);border-left:3px solid var(--blue-2);border-top-left-radius:24px}
.jstep::after{bottom:-9px;right:-9px;border-bottom:3px solid var(--blue-2);border-right:3px solid var(--blue-2);border-bottom-right-radius:24px}
.jstep:hover::before{transform:translate(-4px,-4px)}
.jstep:hover::after{transform:translate(4px,4px)}
/* the first card's top bracket pokes above the section into the video;
   section{overflow:hidden} was cutting it off. Clip sideways only. */
.build{overflow-x:clip;overflow-y:visible}
.jicon{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-2) 100%);border-color:transparent;color:#fff;box-shadow:0 8px 18px rgba(45,143,214,.32)}
.jnum,.jmore{color:var(--blue-2)}
.jtext h3{color:var(--ink)}
.jwave{filter:none;opacity:.5}

.about.dark{background:var(--paper-2)}
.about.dark .eyebrow{color:var(--blue-2)}
.about.dark .eyebrow::before{background:var(--blue-2)}
.about.dark .split-text h2{color:var(--ink)}
.about.dark .split-text h2 .thin{color:var(--blue-2)}
.about.dark .feat-list li{color:var(--ink)}
.about.dark .feat-list .ck{background:rgba(45,143,214,.12);color:var(--blue-2)}
.about.dark .btn-line-dark{border-color:#CDD9E4;color:var(--ink)}
.about.dark .btn-line-dark:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.about.dark .split-media .accent{border-color:#fff}

.services{background:var(--paper)}

.process{background:var(--paper)}
.proc-head .pnum{color:var(--blue-2)}
.proc-head h3{color:var(--ink)}

.brands{background:var(--paper-2)}
.marquee-track img{filter:brightness(0);opacity:.45}
.marquee-track img:hover{opacity:.85}

.strip a:hover{color:var(--blue-2)}
.strip a svg{color:var(--blue-2)}

.ctaband{background:var(--paper)}
.ctaband .hero-glow{opacity:.3}
.ctaband h2{color:var(--ink)}
.ctaband h2 .thin{color:var(--blue-2)}

.contact{background:var(--paper-2)}
.contact-left h2{color:var(--ink)}
.contact-left h2 .thin{color:var(--blue-2)}
.c-row .cico{background:rgba(45,143,214,.1);border-color:rgba(45,143,214,.28);color:var(--blue-2)}
.c-row a,.c-row .val{color:var(--ink)}
.c-row a:hover{color:var(--blue-2)}
.socials a{background:#fff;border-color:var(--hair-l);color:var(--blue-2)}
.socials a:hover{border-color:var(--blue-2);background:rgba(45,143,214,.08)}
.cform{background:#fff;border-color:var(--hair-l);box-shadow:var(--card-shadow)}
.cform input,.cform textarea{background:var(--paper-2);border-color:var(--hair-l);color:var(--ink)}
.cform input::placeholder,.cform textarea::placeholder{color:#7A8B9C}
.cform input:focus,.cform textarea:focus{border-color:var(--blue-2);background:#fff}

/* ============ INNER PAGES ============ */
.page-head h1{color:var(--ink)}
/* bands alternated navy / grey / navy-2 / grey; keep the rhythm as white / grey */
.pband.b-deep{background:var(--paper)}

.pj{background:#fff;border-color:var(--hair-l);box-shadow:var(--card-shadow)}
.pj:hover{border-color:rgba(45,143,214,.45);box-shadow:var(--card-shadow-hover)}
.pj-body h3{color:var(--ink)}
.svc-cards .pj .tagline{color:var(--blue-2)}

.cap{color:var(--ink)}
.cap .b{color:var(--blue-2)}

.sbrands img,
.pband.b-dark .sbrands img,.pband.b-deep .sbrands img{filter:brightness(0);opacity:.55}
.sbrands img:hover{opacity:.85}

/* service-page feature cards, steps and band titles */
.feat,.step{background:#fff;border-color:var(--hair-l);box-shadow:var(--card-shadow)}
.feat:hover{border-color:rgba(45,143,214,.45)}
.feat .fi{background:rgba(45,143,214,.1);border-color:rgba(45,143,214,.3);color:var(--blue-2)}
.feat h3,.step h3{color:var(--ink)}
.step .sn{color:var(--blue-2)}
.band-title{color:var(--ink)}
.band-title .thin{color:var(--blue-2)}

/* blog articles */
.art,.artwrap .txt,.artwrap .full{color:var(--text)}
.art h2,.artwrap .txt h2,.artwrap .full h2{color:var(--ink)}
.art .b,.artwrap .txt .b,.artwrap .full .b{color:var(--blue-deep)}
.art a,.artwrap .txt a{color:var(--blue-deep)}
.art .note{background:var(--paper-2);border-left-color:var(--blue-2);color:var(--ink)}
.art .prod{background:var(--paper-2);border-color:var(--hair-l)}
.art .prod img{border:1px solid var(--hair-l)}
.art .prod .pn,.pcard .pcname{color:var(--ink)}
.art .logorow,.diagram,.pcard img{border:1px solid var(--hair-l)}

/* partnership */
.ptn-copy p{color:var(--text)}