/* ============================================================
   VicTree Solutions — shared site styles
   Design system: Stitch spec + brand tokens
   ============================================================ */
:root{
  --primary:#002a58; --primary-2:#004080; --primary-soft:#83aef5;
  --cyan:#2dbcfe; --cyan-deep:#00658d; --gold:#C9A14A;
  --surface:#f9f9ff; --surface-gray:#F8FAFC; --white:#ffffff;
  --ink:#0F172A; --body:#475569; --border:#E2E8F0;
  --shadow:0 4px 22px rgba(0,64,128,.07);
  --shadow-lg:0 18px 50px rgba(0,42,88,.16);
  --max:1200px; --r:16px; --r-sm:10px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--body);background:var(--surface);line-height:1.6;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Space Grotesk','Montserrat',sans-serif;color:var(--ink);line-height:1.18;letter-spacing:-.02em}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-deep)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:14px 26px;border-radius:10px;transition:.25s cubic-bezier(.2,.7,.3,1);cursor:pointer;border:none;font-family:'Inter'}
.btn-primary{background:var(--primary-2);color:#fff;box-shadow:0 8px 24px rgba(0,64,128,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,64,128,.4);background:#00498f}
.btn-cyan{background:var(--cyan);color:#012b42;box-shadow:0 8px 24px rgba(45,188,254,.32)}
.btn-cyan:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(45,188,254,.45)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.28)}
.btn-ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.btn-out{background:transparent;border:1.5px solid var(--primary-2);color:var(--primary-2)}
.btn-out:hover{background:var(--primary-2);color:#fff;transform:translateY(-2px)}
.btn-lg{padding:16px 32px;font-size:16px}
.arr{width:16px;height:16px}

/* nav */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:.35s;background:rgba(249,249,255,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(0,42,88,.08)}
/* transparent ONLY when a hero page is scrolled to the very top */
header.at-top.over-hero{background:transparent;backdrop-filter:none;box-shadow:none}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:11px}
.brand-logo{height:38px;width:auto;display:block;transition:.35s}
/* horizontal logo is dark navy; when nav is transparent over the dark hero, render it light */
header.at-top.over-hero .brand-logo{filter:brightness(0) invert(1)}
@media(max-width:560px){.brand-logo{height:32px}}
.brand .logo-svg{width:42px;height:42px;flex:none;color:var(--primary-2)}
.brand-txt b{font-family:'Montserrat',sans-serif;font-weight:800;font-size:16px;color:var(--primary);letter-spacing:-.01em;display:block;line-height:1.02;transition:.35s}
.brand-txt span{font-size:9px;letter-spacing:.24em;color:var(--cyan-deep);font-weight:600;text-transform:uppercase}
/* light nav on dark hero */
header.at-top.over-hero .nav-light .brand-txt b{color:#fff}
header.at-top.over-hero .nav-light .brand-txt span{color:var(--cyan)}
header.at-top.over-hero .nav-light .brand .logo-svg{color:#fff}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--ink);position:relative;padding:6px 0;transition:.2s}
.nav-links a.active{color:var(--cyan-deep);font-weight:600}
header.at-top.over-hero .nav-light .nav-links a{color:#dfe9ff}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--cyan);transition:.25s}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a:hover{color:var(--cyan-deep)}
header.at-top.over-hero .nav-light .nav-links a:hover{color:#fff}
.nav-cta{padding:10px 20px;font-size:14px}
.nav-cta-group{display:flex;gap:8px;align-items:center}
.nav-cta-sm{padding:9px 15px;font-size:13px}
/* outlined nav buttons — visible on the solid (light) nav by default */
.nav-btn-outline{background:transparent;border:1.5px solid var(--primary-2);color:var(--primary-2);font-weight:600}
.nav-btn-outline:hover{background:var(--primary-2);color:#fff}
/* when nav is transparent over the dark hero, switch to light outline */
header.at-top.over-hero .nav-btn-outline{border-color:rgba(255,255,255,.5);color:#fff}
header.at-top.over-hero .nav-btn-outline:hover{background:#fff;color:var(--primary)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
header.at-top.over-hero .nav-light .burger span{background:#fff}
.mobile-menu{position:fixed;inset:0;background:rgba(0,27,61,.98);backdrop-filter:blur(8px);z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transform:translateY(-100%);transition:.4s cubic-bezier(.2,.7,.3,1);opacity:0}
.mobile-menu.open{transform:none;opacity:1}
.mobile-menu a{color:#fff;font-family:'Space Grotesk','Montserrat';font-size:23px;font-weight:600;padding:11px}
.mobile-menu .x{position:absolute;top:24px;right:24px;color:#fff;font-size:30px;cursor:pointer;background:none;border:none}

/* animated brand logo */
.logo-svg .lnode{fill:var(--cyan);transform-origin:center;animation:nodePulse 4s ease-in-out infinite}
.logo-svg .lnode.n4{fill:var(--primary-soft);animation-delay:.6s}
.logo-svg .lnode.n5{fill:var(--primary-soft);animation-delay:1.2s}
.logo-svg .lnode.n6{fill:var(--primary-soft);animation-delay:1.8s}
.logo-svg .lnode.n7{animation-delay:2.4s}
.logo-svg .lnode.n8{animation-delay:3s}
.logo-svg .lnode.n9{animation-delay:1.5s}
.logo-svg .ledge{stroke:var(--cyan);stroke-width:2;opacity:.4;stroke-dasharray:70;animation:edgeDraw 4s ease-in-out infinite}
@keyframes nodePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.28);opacity:.75}}
@keyframes edgeDraw{0%{stroke-dashoffset:70;opacity:0}50%{opacity:.6}100%{stroke-dashoffset:0;opacity:.4}}

/* page hero (interior pages) */
.phero{background:linear-gradient(135deg,#001b3d 0%,#002a58 50%,#003a72 100%);color:#fff;padding:150px 0 80px;position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(45,188,254,.18),transparent 65%);top:-160px;right:-120px}
.phero .eyebrow{color:var(--cyan)}
.phero h1{color:#fff;font-size:clamp(34px,5vw,54px);font-weight:700;margin:14px 0 16px;position:relative;z-index:2}
.phero p{color:#bcd0ee;font-size:18px;max-width:600px;position:relative;z-index:2}
.crumb{font-size:13px;color:#8fa8ce;position:relative;z-index:2;margin-bottom:6px}
.crumb a:hover{color:var(--cyan)}

/* section shell */
section.blk{padding:92px 0}
.sec-head{max-width:680px;margin:0 auto 54px;text-align:center}
.sec-head h2{font-size:clamp(28px,3.6vw,42px);font-weight:700;margin:14px 0 0}
.sec-head p{margin-top:16px;font-size:17px}

/* cards / grids reused */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.svc{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:30px 26px;transition:.3s cubic-bezier(.2,.7,.3,1);position:relative;overflow:hidden}
.svc::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--cyan),var(--primary-2));transition:.4s}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.svc:hover::before{width:100%}
.svc .ic{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,rgba(45,188,254,.16),rgba(0,64,128,.1));display:flex;align-items:center;justify-content:center;color:var(--primary-2);margin-bottom:20px}
.svc h3{font-size:20px;font-weight:700;margin-bottom:10px}
.svc p{font-size:15px}
.svc .more{display:inline-flex;align-items:center;gap:6px;color:var(--cyan-deep);font-weight:600;font-size:14px;margin-top:16px}
.svc .more svg{transition:.25s}
.svc:hover .more svg{transform:translateX(4px)}

/* metric band */
.band{background:linear-gradient(120deg,#002a58,#013e7c 55%,#01529c);color:#fff;border-radius:24px;padding:54px 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.band::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(45,188,254,.25),transparent 50%)}
.band .m{position:relative;z-index:2}
.band .m .n{font-family:'Space Grotesk','Montserrat';font-weight:700;font-size:clamp(34px,4.5vw,52px);letter-spacing:-.03em}
.band .m .n .plus{color:var(--cyan)}
.band .m .l{font-size:14px;color:#a9c7ff;margin-top:6px}

/* footer */
footer{background:#001226;color:#9fb2cc;padding:64px 0 28px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px}
.foot-brand b{font-family:'Space Grotesk','Montserrat';font-weight:700;font-size:20px;color:#fff;display:block}
.foot-brand .sub{font-size:10px;letter-spacing:.24em;color:var(--cyan);text-transform:uppercase}
.foot-brand p{font-size:14px;margin:16px 0;max-width:300px}
.foot h4{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;font-family:'Space Grotesk','Montserrat'}
.foot a{display:block;font-size:14px;padding:6px 0;transition:.2s}
.foot a:hover{color:var(--cyan);padding-left:4px}
.foot .ci{display:flex;gap:10px;font-size:14px;padding:6px 0;align-items:flex-start}
.foot .ci svg{flex:none;margin-top:3px;color:var(--cyan)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;font-size:13px;flex-wrap:wrap;gap:12px}
.soc{display:flex;gap:10px;margin-top:18px}
.soc a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:#cfe0f5;transition:.25s}
.soc a:hover{background:var(--cyan);color:#012b42;transform:translateY(-3px)}

/* reveal animations */
.reveal{opacity:0;transform:translateY(34px);transition:.8s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(28px);transition:.7s cubic-bezier(.2,.7,.3,1)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(2){transition-delay:.08s}
.stagger.in>*:nth-child(3){transition-delay:.16s}
.stagger.in>*:nth-child(4){transition-delay:.24s}
.stagger.in>*:nth-child(5){transition-delay:.32s}
.stagger.in>*:nth-child(6){transition-delay:.4s}

/* responsive */
@media(max-width:980px){
  .grid-3,.grid-2{grid-template-columns:1fr 1fr}
  .band{grid-template-columns:1fr 1fr;gap:34px 20px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links,.nav-cta,.nav-cta-group{display:none}
  .burger{display:flex}
}
@media(max-width:560px){
  section.blk{padding:64px 0}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .band{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .phero{padding:130px 0 60px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,.stagger>*{opacity:1;transform:none}
  #launch{display:none!important}
}

/* client reach maps */
.maps-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:860px){.maps-grid{grid-template-columns:1fr}}
.map-card{background:linear-gradient(160deg,#ffffff,#f4f8ff);border:1px solid var(--border);border-radius:20px;padding:26px 24px;box-shadow:var(--shadow)}
.map-card h3{font-family:'Space Grotesk','Montserrat';font-size:18px;color:var(--primary);margin-bottom:14px}
.map-holder{width:100%;aspect-ratio:1/.9;display:flex;align-items:center;justify-content:center}
#worldMap.map-holder,.map-card:nth-child(2) .map-holder{aspect-ratio:16/9}
.geo-svg{width:100%;height:100%}
.map-cities{margin-top:14px;font-size:13px;color:var(--body);text-align:center;line-height:1.6}
.mk-pulse{fill:var(--cyan);opacity:.35;animation:mkPulse 2.4s ease-out infinite}
.mk-dot{fill:var(--cyan-deep)}
.mk-lbl{fill:var(--primary);font-size:15px;font-weight:600;font-family:Inter,sans-serif}
#worldMap .mk-lbl{font-size:11px}
@keyframes mkPulse{0%{transform:scale(.6);opacity:.5}70%{opacity:0}100%{transform:scale(1.8);opacity:0}}
.mk-pulse{transform-box:fill-box;transform-origin:center}

/* constrain the LinkedIn (SociableKit) widget: 3 equal cards per line, compact */
.li-embed .sk-ww-linkedin-page-post{max-width:1000px;margin:0 auto}
.li-embed .sk_f._card, .li-embed .sk-fc-card, .li-embed [class*="card"]{max-height:420px}
/* SociableKit renders its own grid; these nudge card sizing. Column count is best set in the SociableKit dashboard (Layout: Grid, Columns: 3). */