/* VLI.GLOBAL — FINAL deploy (Same family. Different role.) */
:root{
  --white:#ffffff;
  --ink:#0A0A0A;
  --navy:#0B1F3A;
  --blue:#1F4ED8;
  --rule:rgba(11,31,58,.22);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.7;
  position:relative;
}

/* Living institutional canvas (white → blue → navy, subtle and readable) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  /*
    Keep the top of the site crisp and white, then introduce colour
    gradually so the pages feel institutional but not like a blank sheet.
  */
  background:
    radial-gradient(1200px 600px at 15% 8%, rgba(26,115,232,0.08) 0%, rgba(26,115,232,0.00) 60%),
    radial-gradient(900px 500px at 85% 10%, rgba(11,31,58,0.10) 0%, rgba(11,31,58,0.00) 60%),
    linear-gradient(180deg,
      #ffffff 0%,
      #ffffff 55%,
      #f4f8ff 70%,
      #e6efff 85%,
      #d3e1ff 100%,
      /* a slightly darker institutional blue (not full navy) */
      #173862 170%
    );
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
a[aria-current="page"]{color:var(--ink)}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.narrow{max-width:760px}
.skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:18px; top:18px; width:auto; height:auto; padding:10px 12px; background:var(--ink); color:var(--white)}

.header{
  background:rgba(255,255,255,0.92);
  border-bottom:1px solid var(--rule);
  backdrop-filter:saturate(140%) blur(10px);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 0}
.brand{display:flex; align-items:center}
.brand-logo{height:96px; width:auto; display:block}
.nav{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.nav-link{color:var(--navy); font-weight:600; font-size:14px; letter-spacing:.01em}
.nav-link:hover{color:var(--ink)}
.menu{display:none; background:transparent; border:1px solid var(--rule); color:var(--navy); padding:10px 12px; font-weight:600}
.mobile-nav{padding:0 0 18px}
.nav-mobile{flex-direction:column; align-items:flex-start; gap:10px}

.section{padding:84px 0}
.section-top{padding-top:72px}
.section-bottom{padding-bottom:96px}

h1,h2{font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif}
h1{margin:0 0 16px; font-size:46px; line-height:1.1; letter-spacing:-0.02em; color:var(--navy)}
h2{margin:56px 0 12px; font-size:26px; line-height:1.2; color:var(--navy)}
h3{margin:22px 0 8px; font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink)}
p{margin:0 0 14px}
.lede{font-size:18px}

.actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:18px}
.btn{display:inline-block; padding:12px 14px; border:1px solid var(--navy); color:var(--navy); font-weight:700; border-radius:0}
.btn:hover{border-color:var(--ink); color:var(--ink); text-decoration:none}

.list{padding-left:18px; margin:0}
.list li{margin:10px 0}
.list-ordered{padding-left:18px; margin:0}
.list-ordered li{margin:10px 0}

.split{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start}
.note{margin-top:18px; padding-top:18px; border-top:1px solid var(--rule)}

.founder{display:grid; grid-template-columns:180px 1fr; gap:22px; align-items:start; max-width:920px}
.founder-photo{width:180px; height:auto; display:block; border:1px solid var(--rule)}
.founder-text p{max-width:70ch}

.form{display:flex; flex-direction:column; gap:14px; margin-top:12px}
input, select, textarea{width:100%; padding:12px; border:1px solid var(--rule); border-radius:0; font:inherit; background:var(--white); color:var(--ink)}
input:focus, select:focus, textarea:focus{outline:2px solid var(--blue); outline-offset:2px}

.footer{border-top:1px solid var(--rule); padding:36px 0 24px; background:var(--white)}
.footer-inner{display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap}
.footer-left{display:flex; gap:14px; align-items:flex-start}
.footer-logo{height:34px; width:auto}
.footer-title{margin:0; font-weight:700; color:var(--navy)}
.footer-sub{margin:6px 0 0}
.footer-right{display:flex; flex-direction:column; gap:10px}
.footer-right a{color:var(--navy); font-weight:600; font-size:14px}
.footer-legal{margin-top:22px}
.footer-legal p{margin:0}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

@media (max-width: 980px){
  .brand-logo{height:72px}
  h1{font-size:40px}
  .nav{display:none}
  .menu{display:inline-block}
  .split{grid-template-columns:1fr; gap:26px}
  .founder{grid-template-columns:1fr; max-width:760px}
  .founder-photo{width:220px}
}