/* ===========
   Tokens
   =========== */
:root{
  --navy:#0d3d8c;
  --navy-900:#082a60;
  --blue:#2162ff;
  --red:#e63434;
  --ink:#0c1424;
  --muted:#6b778c;
  --bg:#f7f9fc;
  --card:#ffffff;
  --radius:14px;
  --shadow:0 10px 30px rgba(12,20,36,.12);
  --shadow-soft:0 6px 18px rgba(12,20,36,.08);
  --focus:0 0 0 3px rgba(33,98,255,.35);

  /* header/logo knobs */
  --logo-size: clamp(180px, 26vw, 340px);
}

/* ===========
   Base
   =========== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; height:auto; display:block}
.container{max-width:980px; margin:0 auto; padding:0 20px}
h1{margin:0; font-size:clamp(2rem,4vw,3rem); line-height:1.1; font-weight:900}
:focus-visible{outline:var(--focus)}

/* Accessibility helper */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===========
   Header (brand only — no nav/menu)
   =========== */
.nav-header{
  position:sticky; top:0; z-index:100;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.nav-container{
  max-width:1200px;
  margin:0 auto;
  height:120px;                     /* space to anchor the logo overlap */
  padding:0 clamp(16px,5vw,40px);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}

/* centered logo overlapping the hero */
.brand{
  position:absolute;
  left:50%;
  bottom: calc(var(--logo-size) * -0.50); /* how far it hangs into hero */
  transform: translateX(-50%);
  display:block;
  text-decoration:none; color:inherit;
  z-index:10;
}

/* ensure no circle/badge remains */
.brand::before{ content:none !important; }

/* transparent SVG logo */
.brand img{
  width:var(--logo-size);
  height:auto;
  display:block;
  object-fit:contain;
  filter: drop-shadow(0 8px 24px rgba(12,20,36,.22));
  transform-origin:center center;
  animation: vvLogoPulse 6s ease-in-out infinite;
}
@keyframes vvLogoPulse{
  0%,100%{ transform: scale(1); opacity:1; }
  50%    { transform: scale(1.04); opacity:.97; }
}

/* optional hover glow (nice but subtle) */
.brand img{
  transition: filter .35s ease, transform .35s ease;
}
.brand:hover img{
  filter:
    drop-shadow(0 0 12px rgba(33,98,255,.45))
    drop-shadow(0 0 24px rgba(33,98,255,.25));
  transform: scale(1.05);
}

/* hide any leftover brand text + all nav/menu UI */
.brand-text, .brand-name, .brand-tagline{ display:none !important; }
.site-nav, .menu-toggle{ display:none !important; }

/* ===========
   Hero
   =========== */
.hero{
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-900) 100%);
  color:#fff;
  padding: calc(120px + var(--logo-size) * 0.35) 0 64px; /* space for overlapped logo */
}
.hero-inner{
  display:grid;
  gap:28px;
  align-items:center;
  grid-template-columns:1fr;
}
.kicker{
  display:inline-block;
  font-size:.82rem;
  letter-spacing:.8px;
  text-transform:uppercase;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  padding:6px 10px;
  border-radius:999px;
}
.hero p{margin:0; color:#e6edff; font-size:1.06rem}
@media (min-width:760px){ .hero-inner{grid-template-columns:1.1fr .9fr} }

/* ===========
   CTA Card + Form
   =========== */
.cta-card{
  margin-top:18px;
  background:var(--card);
  color:var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}
form{display:grid; gap:14px}
label{font-weight:600; font-size:.92rem}
.row{display:grid; gap:12px; grid-template-columns:1fr}
@media (min-width:760px){ .row{grid-template-columns:1fr 1fr} }

input[type="text"],input[type="email"],select,textarea{
  width:100%;
  padding:12px;
  border:1px solid #d7dfec;
  border-radius:10px;
  background:#fff;
  font-size:1rem;
  outline:none;
  box-shadow:none;
}
textarea{min-height:96px; resize:vertical}
input:focus,select:focus,textarea:focus{
  box-shadow:var(--focus);
  border-color:var(--blue);
}

.roles{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #d7dfec;
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  font-size:.95rem;
  box-shadow:var(--shadow-soft);
}
.pill input{accent-color:var(--blue)}

.fineprint{color:var(--muted); font-size:.85rem}

.btn{
  display:inline-block;
  text-align:center;
  background:var(--blue);
  color:#fff;
  padding:12px 16px;
  border-radius:10px;
  border:none;
  font-weight:700;
  cursor:pointer;
  transition:.15s transform ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{background:#14213d}
.btn[disabled]{opacity:.6; cursor:not-allowed}

/* Success banner */
.success{
  display:none;
  padding:14px;
  border-radius:10px;
  background:#e8f1ff;
  color:#0b2f83;
  border:1px solid #cfe0ff;
  font-weight:600;
}
.success.show{display:block; animation:fade-in .25s ease-out}
@keyframes fade-in{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}

/* ===========
   Sections
   =========== */
.section{padding:40px 0}
.grid-3{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
  margin-top:16px;
}
@media (min-width:760px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
}
.feature{
  background:var(--card);
  border:1px solid #e7ecf3;
  border-radius:14px;
  padding:18px;
}
.feature h3{margin:.2rem 0 .4rem}
.feature p{margin:0; color:#435068}

/* ===========
   Footer
   =========== */
footer{
  padding:30px 20px;
  color:#7a869a;
  text-align:center;
}

/* ===========
   Mobile tweaks
   =========== */
@media (max-width:420px){
  :root{
  --logo-size: clamp(220px, 32vw, 420px);
}
  .brand{ bottom: calc(var(--logo-size) * -0.55); }
}
/* === Make logo scroll with the page (not sticky) === */
.nav-header{
  position: relative !important;   /* was: sticky */
  z-index: 1 !important;           /* keep above the hero only at top */
}

/* Keep the centered/overhang behavior without pinning */
.brand{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(var(--logo-size) * -0.42) !important; /* overlap amount */
  z-index: 2 !important;
}

/* Ensure hero sits under the logo initially, then scrolls cleanly */
.hero{ 
  position: relative; 
  z-index: 0;
  padding-top: calc(120px + var(--logo-size) * 0.55) !important;
}
/* =========================
   V V  LOGO + HERO LAYOUT
   Single source of truth
   ========================= */

/* Pulse (kept external so HTML is clean) */
@keyframes vvLogoPulse{
  0%,100%{ transform: scale(1); opacity:1; }
  50%    { transform: scale(1.04); opacity:.97; }
}

/* Header shouldn’t pin; keeps logo from clipping at the top */
.nav-header{
  position: relative !important;
  z-index: 1 !important;
}

/* Space above hero to anchor the overhang */
.nav-container{
  height: 180px !important; /* tweak if you need a bit more/less */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Centered logo that overhangs into the hero */
.brand{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(var(--logo-size) * -0.70) !important;  /* LOWER logo into blue */
  z-index: 2 !important;
  text-decoration: none; color: inherit;
}
.brand::before{ content:none !important; }

.brand img{
  width: var(--logo-size);
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(12,20,36,.22));
  transform-origin: center center;
  animation: vvLogoPulse 6s ease-in-out infinite;
  transition: filter .35s ease, transform .35s ease;
}
.brand:hover img{
  filter:
    drop-shadow(0 0 12px rgba(33,98,255,.45))
    drop-shadow(0 0 24px rgba(33,98,255,.25));
  transform: scale(1.05);
}

/* Make sure hero content clears the lowered logo */
.hero{
  position: relative;
  z-index: 0;
  padding-top: calc(160px + var(--logo-size) * 0.82) !important;
}

/* Optional: mobile/medium tweaks so overlap scales nicely */
@media (max-width: 900px){
  .nav-container{ height: 160px !important; }
  .brand{ bottom: calc(var(--logo-size) * -0.64) !important; }
  .hero{  padding-top: calc(150px + var(--logo-size) * 0.76) !important; }
}

/* Hide nav UI for now */
.brand-text, .brand-name, .brand-tagline{ display:none !important; }
.site-nav, .menu-toggle{ display:none !important; }
/* === Thin white top + tighter gap to headline === */

/* 1) Make the white header shorter */
.nav-container{
  height: 110px !important;   /* was ~180px */
}

/* 2) Lower the logo into the blue a bit (overlap amount) */
.brand{
  bottom: calc(var(--logo-size) * -0.62) !important;  /* was around -0.70 */
}

/* 3) Reduce space above the headline */
.hero{
  padding-top: calc(110px + var(--logo-size) * 0.25) !important; /* was ~0.82 */
}

/* Responsive tune so it still looks right on small screens */
@media (max-width: 900px){
  .nav-container{ height: 96px !important; }
  .brand{ bottom: calc(var(--logo-size) * -0.54) !important; }
  .hero{  padding-top: calc(96px + var(--logo-size) * 0.58) !important; }
}
/* ==== Mission highlight effect ==== */
.mission-text {
  font-size: 1.05rem;
  color: #e6edff;
  line-height: 1.55;
  margin-top: 10px;
}

.fade-highlight {
  font-weight: 700;
  color: #ffffff;
  position: relative;
  animation: fadePulse 3s ease-in-out infinite alternate;
}

/* gentle fading emphasis */
@keyframes fadePulse {
  0%   { opacity: 0.65; text-shadow: 0 0 0 rgba(255,255,255,0); }
  50%  { opacity: 1; text-shadow: 0 0 12px rgba(255,255,255,0.25); }
  100% { opacity: 0.8; text-shadow: 0 0 0 rgba(255,255,255,0); }
}

/* respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .fade-highlight { animation: none; }
}
/* ===== Privacy page overrides (scoped) ===== */
body.policy .nav-header{
  background: #fff;
  box-shadow: none;
  position: relative;
  padding-top: 8px;
}
body.policy .nav-container{
  height: auto;
  padding: 12px 20px;
  justify-content: center;
}

/* kill hero/overlap/pulse just for privacy page */
body.policy .brand{
  position: static !important;
  transform: none !important;
  bottom: auto !important;
  display: inline-flex !important;
  animation: none !important;
}
body.policy .brand::before,
body.policy .brand::after{
  display: none !important;
  content: none !important;
}
body.policy .brand img{
  width: auto !important;
  height: 150px !important;
  filter: none !important;
  animation: none !important;
}

/* make sure hero fade/spacing doesn’t appear here */
body.policy .hero::before{ display:none !important; }
body.policy .hero{ padding: 0 !important; background: transparent !important; }
body.policy .hero-inner{ display:block; padding:0; }

/* policy content container polish */
body.policy .policy-wrap{
  max-width: 880px;
  margin: 0 auto;
  padding: 36px 20px 64px;
}
body.policy .policy-wrap h1{
  margin: 12px 0 8px;
  line-height: 1.15;
}
body.policy .policy-wrap .toc{
  margin: 18px 0 8px;
}

/* hide site nav/hamburger on privacy page (if any exist) */
body.policy .menu-toggle,
body.policy .site-nav{ display:none !important; }
/* Move the logo down on the Privacy Policy page */
body.policy .brand {
  display: inline-flex !important;
  justify-content: center;
  margin-top: 40px;   /* Moves logo down */
  margin-bottom: 10px;
  transform: none !important;
  position: relative !important;
}
/* ==== VV logo positioning knobs (add at END of style.css) ==== */

/* Global defaults (home page) */
:root{
  /* Horizontal nudge (positive = right, negative = left) */
  --logo-shift-x: 0px;

  /* Vertical nudge on home page overlap (positive = farther DOWN into blue) */
  --logo-shift-y: 0px; /* e.g. 12px or -12px */
}

/* Home page: keep centered, allow pixel nudges */
.brand{
  left: calc(50% + var(--logo-shift-x)) !important;
  transform: translateX(-50%) !important;
  /* was bottom: calc(var(--logo-size) * -0.62) */
  bottom: calc(var(--logo-size) * -0.62 + var(--logo-shift-y)) !important;
}

/* Privacy page specific knobs */
body.policy{
  /* Push the logo down the page (margin-top) */
  --policy-logo-top: 40px;

  /* Horizontal nudge for privacy page only */
  --policy-logo-shift-x: 0px;
}

/* Center the privacy-page logo and allow easy nudges */
body.policy .brand{
  position: relative !important;
  display: block !important;
  left: calc(50% + var(--policy-logo-shift-x)) !important;
  transform: translateX(-50%) !important;
  margin-top: var(--policy-logo-top) !important;
  margin-bottom: 10px !important;
}
/* === Privacy Page Logo Fix === */
body.policy .brand {
  display: flex !important;
  justify-content: center;
  align-items: center;
  position: relative !important;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 40px;
  margin-bottom: 10px;
  width: 100%;
}

body.policy .brand img {
  width: clamp(160px, 45vw, 260px) !important; /* scales cleanly on mobile */
  height: auto !important;
  object-fit: contain;
  filter: none !important;
  animation: none !important;
  transform: none !important;
}
/* =========================
   HOMEPAGE (default) — restore logo layout
   ========================= */
body:not(.policy) .nav-header{
  position: relative !important;
  z-index: 1 !important;
}
body:not(.policy) .nav-container{
  height: 110px !important;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
body:not(.policy) .brand{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(var(--logo-size) * -0.62) !important;
  z-index: 2 !important;
  text-decoration: none; color: inherit;
}
body:not(.policy) .brand::before{ content: none !important; }
body:not(.policy) .brand img{
  width: var(--logo-size) !important;
  height: auto !important;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(12,20,36,.22));
  transform-origin: center center;
  animation: vvLogoPulse 6s ease-in-out infinite;
}
body:not(.policy) .hero{
  position: relative; z-index: 0;
  padding-top: calc(110px + var(--logo-size) * 0.25) !important;
}
@media (max-width: 900px){
  body:not(.policy) .nav-container{ height: 96px !important; }
  body:not(.policy) .brand{ bottom: calc(var(--logo-size) * -0.54) !important; }
  body:not(.policy) .hero{  padding-top: calc(96px + var(--logo-size) * 0.58) !important; }
}

/* =========================
/* =====================================================
   PAGE-SPECIFIC OVERRIDES (put near END of style.css)
   ===================================================== */

/* ----------------------------
   HOMEPAGE (default) — KNOBS
   ---------------------------- */
:root{
  /* White header height on home */
  --home-header-height: 135px;

  /* Logo nudges (home): +right/−left, +down/−up */
  --home-logo-shift-x: 0px;
  --home-logo-shift-y: 20px;

  /* How much hero padding accounts for logo overlap */
  --home-hero-pad-factor: 0.22; /* try 0.18–0.30 */
}

/* Apply homepage knobs */
body:not(.policy) .nav-container{
  height: var(--home-header-height) !important;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
body:not(.policy) .brand{
  position: absolute !important;
  left: calc(50% + var(--home-logo-shift-x)) !important;
  transform: translateX(-50%) !important;
  bottom: calc(var(--logo-size) * -0.62 + var(--home-logo-shift-y)) !important;
  z-index: 2 !important;
  text-decoration: none; color: inherit;
}
body:not(.policy) .brand::before{ content:none !important; }
body:not(.policy) .brand img{
  width: var(--logo-size) !important; height:auto !important; object-fit:contain;
}
body:not(.policy) .hero{
  position: relative; z-index: 0;
  padding-top: calc(var(--home-header-height) + var(--logo-size) * var(--home-hero-pad-factor)) !important;
}

/* ----------------------------
   PRIVACY PAGE — KNOBS
   ---------------------------- */
body.policy{
  /* Space inside white header above the logo */
  --policy-header-top: 36px;

  /* How far the logo sits below the header (bigger = lower) */
  --policy-logo-top: 84px;

  /* Gap below logo before the H1 */
  --policy-header-gap: -10px;

  /* Optional horizontal nudge of logo */
  --policy-logo-shift-x: 0px;
}

/* Apply privacy knobs */
body.policy .nav-header{
  background:#fff; box-shadow:none; position:relative; padding-top:8px;
}
body.policy .nav-container{
  height:auto !important;
  padding: var(--policy-header-top) 20px 20px !important; /* top | sides | bottom */
  justify-content:center !important;
}
body.policy .brand{
  position:relative !important;
  left: calc(50% + var(--policy-logo-shift-x)) !important;
  transform: translateX(-50%) !important;

  display:flex !important; justify-content:center !important; align-items:center !important;
  width:100% !important; bottom:auto !important;

  margin-top: var(--policy-logo-top) !important;
  margin-bottom: var(--policy-header-gap) !important;
}
body.policy .brand::before,
body.policy .brand::after{ display:none !important; content:none !important; }
body.policy .brand img{
  width: clamp(160px, 45vw, 260px) !important;
  height:auto !important; object-fit:contain !important;
  filter:none !important; animation:none !important; transform:none !important;
}
body.policy .hero, body.policy .hero::before{
  padding:0 !important; background:transparent !important; display:none !important;
}
body.policy .policy-wrap{ max-width:880px; margin:0 auto; padding:36px 20px 64px; }

/* ---- CTA fineprint contrast (home form) ---- */
.cta-card .fineprint{ color:#2e3a59; opacity:1 !important; margin-top:10px; }
.cta-card .fineprint a{ color:#0b2f83; text-decoration:underline; font-weight:600; }
.cta-card .btn{ margin-bottom:10px; }
@media (min-width: 1024px) {
  body:not(.policy) .nav-header { position: relative !important; }
  body:not(.policy) .nav-container {
    justify-content: flex-start !important;
    height: 100px !important;
  }

  /* Top-left logo on desktop with bounded responsive size */
  body:not(.policy) .brand {
    position: absolute !important;
    top: 24px !important;
    left: 40px !important;
    transform: none !important;
    bottom: auto !important;
    width: clamp(120px, 12vw, 180px) !important; /* ✅ responsive bounds */
    z-index: 50 !important;
  }

  /* Reclaim vertical space since logo moved up/left */
  body:not(.policy) .hero { padding-top: 140px !important; }
}
/* =======================================
   Desktop logo entrance animation
   ======================================= */
@keyframes logoFadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (min-width: 1024px) {
  body:not(.policy) .brand {
    position: absolute !important;
    top: 32px !important;
    left: -60px !important;
    width: clamp(120px, 10vw, 160px) !important;
    transform: none !important;
    z-index: 50 !important;
    animation: logoFadeInLeft 0.9s ease-out 0.2s both; /* ✅ fade & slide */
  }

  body:not(.policy) .hero {