/* ════════════════════════════════════════════════════════════════════
   VLAS — Public Website
   Responsive front-of-house. Standards-body identity:
   slate indigo + annotation gold on cool technical paper.
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400;1,6..72,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --paper:#F6F4ED; --paper-soft:#ECEAE0; --paper-deep:#E2DECD;
  --ink:#1A1814; --ink-soft:#36312A; --ink-mute:#6B6258; --ink-faint:#A39A8B;
  --slate:#2C3E63; --slate-deep:#1A2540; --slate-light:#4B6491;
  --slate-08:rgba(44,62,99,0.08); --slate-14:rgba(44,62,99,0.14); --slate-22:rgba(44,62,99,0.22); --slate-40:rgba(44,62,99,0.40);
  --gold:#B07A2B; --gold-soft:rgba(176,122,43,0.10); --gold-line:rgba(176,122,43,0.34);
  --night:#0E141F; --night-soft:#16203200; --night-2:#152033; --night-text:#ECEFF5; --night-mute:rgba(236,239,245,0.6); --night-rule:rgba(236,239,245,0.12);
  --rule:#D8CFB8; --rule-strong:#B8AC92;
  --cap-n:#5A8A3C; --cap-h:#C8622A; --cap-s:#9A8326; --cap-m:#5B92C9; --cap-f:#1F3A6B;
  --gate:#B23A3A; --ok:#2F7D4F; --warn:#C28A30;
  --serif:"Newsreader",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --max:1240px; --gutter:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}

/* ─── Type ───────────────────────────────────────────────────────── */
.kick{font-family:var(--mono); font-size:13px; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold); font-weight:500;}
.kick.slate{color:var(--slate);}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-0.02em; text-wrap:balance; line-height:1.02;}
.display{font-size:clamp(44px,7vw,104px); line-height:0.98;}
.display em,h1 em,h2 em,h3 em{font-style:italic; color:var(--slate); font-weight:300;}
h2{font-size:clamp(32px,4.4vw,60px); line-height:1.04;}
h3{font-size:clamp(24px,2.6vw,38px); line-height:1.1;}
h4{font-size:clamp(19px,1.5vw,24px); line-height:1.2; font-weight:500;}
p{margin:0; text-wrap:pretty;}
.lead{font-size:clamp(19px,1.7vw,26px); line-height:1.5; color:var(--ink-soft);}
.body{font-size:17px; line-height:1.62; color:var(--ink-soft);}
.body.lg{font-size:19px;} .body.sm{font-size:15px; line-height:1.6;}
.body strong{color:var(--ink); font-weight:600;}
.mute{color:var(--ink-mute);} .ac{color:var(--slate);} .goldc{color:var(--gold);}
.caps{font-family:var(--sans); font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-mute); font-weight:600;}
.caps.gold{color:var(--gold);} .caps.slate{color:var(--slate);}
.mono{font-family:var(--mono);} .serif{font-family:var(--serif);} .italic{font-style:italic;}
.anno{font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold);}

/* ─── Layout ─────────────────────────────────────────────────────── */
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter);}
section{padding:clamp(64px,9vw,128px) 0;}
.r{display:flex;} .c{display:flex; flex-direction:column;} .grid{display:grid;}
.ai-c{align-items:center;} .ai-e{align-items:flex-end;} .ai-s{align-items:flex-start;} .ai-st{align-items:stretch;}
.jc-b{justify-content:space-between;} .jc-c{justify-content:center;} .wrapf{flex-wrap:wrap;}
.g2{gap:8px;} .g3{gap:14px;} .g4{gap:20px;} .g5{gap:28px;} .g6{gap:40px;} .g7{gap:56px;} .g8{gap:72px;}
.f1{flex:1;} .grow{flex:1 1 0;}
.divider{height:1px; background:var(--rule);}

/* ─── Grid mark ──────────────────────────────────────────────────── */
.gm{display:inline-grid; grid-template-columns:repeat(3,1fr); gap:3px; width:26px;}
.gm i{background:var(--slate); aspect-ratio:1; display:block;}
.gm i.dim{opacity:0.32;}
.gm.light i{background:var(--night-text);} .gm.gold i{background:var(--gold);}
.gm.lg{width:64px; gap:5px;} .gm.xl{width:150px; gap:8px;}

/* ─── Nav ────────────────────────────────────────────────────────── */
.nav{position:sticky; top:0; z-index:60; background:rgba(246,244,237,0.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--rule);}
.nav .row{display:flex; align-items:center; justify-content:space-between; height:72px;}
.nav .brand{display:flex; align-items:center; gap:13px;}
.nav .brand .nm{font-family:var(--serif); font-size:23px; letter-spacing:-0.01em;}
.nav .brand .nm small{font-family:var(--mono); font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-mute); display:block; margin-top:-2px;}
.nav .links{display:flex; align-items:center; gap:30px;}
.nav .links a{font-size:14.5px; color:var(--ink-soft); font-weight:500; transition:color .15s;}
.nav .links a:hover{color:var(--slate);}
.nav .cta{padding:10px 20px; border:1px solid var(--slate); color:var(--slate); border-radius:2px; font-size:13px; font-weight:600; letter-spacing:0.04em; transition:.18s;}
.nav .cta:hover{background:var(--slate); color:#fff;}
.nav .burger{display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px;}
.nav .burger span{width:24px; height:2px; background:var(--slate); display:block;}
@media(max-width:920px){
  .nav .links{display:none;}
  .nav .burger{display:flex;}
  .nav .links.open{display:flex; position:absolute; top:72px; left:0; right:0; background:var(--paper); flex-direction:column; align-items:flex-start; gap:0; padding:8px var(--gutter) 20px; border-bottom:1px solid var(--rule);}
  .nav .links.open a{padding:13px 0; width:100%; border-bottom:1px solid var(--rule); font-size:17px;}
  .nav .links.open .cta{margin-top:14px; border:1px solid var(--slate);}
}

/* ─── Buttons / chips ────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; gap:12px; padding:15px 28px; font-size:14px; font-weight:600; letter-spacing:0.04em; border-radius:2px; border:1px solid var(--slate); background:var(--slate); color:#fff; cursor:pointer; transition:.18s;}
.btn:hover{background:var(--slate-deep); border-color:var(--slate-deep);}
.btn.ghost{background:transparent; color:var(--slate);}
.btn.ghost:hover{background:var(--slate); color:#fff;}
.btn.gold{background:var(--gold); border-color:var(--gold);}
.btn.gold:hover{background:#946623; border-color:#946623;}
.btn.lg{padding:18px 34px; font-size:15px;}
.chip{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border:1px solid var(--rule-strong); border-radius:2px; font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); background:var(--paper);}
.chip.slate{color:var(--slate); border-color:var(--slate-22);}
.chip.gold{color:var(--gold); border-color:var(--gold-line);}

/* ─── Cards / surfaces ───────────────────────────────────────────── */
.card{background:var(--paper); border:1px solid var(--rule-strong); border-radius:4px; padding:clamp(22px,2.4vw,34px);}
.card.soft{background:var(--paper-soft);} .card.slate{border-color:var(--slate-22);}
.card.gold{border-color:var(--gold-line); background:var(--gold-soft);}
.label-top{font-family:var(--serif); font-size:15px; color:var(--gold); margin-bottom:14px;}

/* schematic frame */
.schem{position:relative; border:1px solid var(--rule); background:var(--paper); padding:clamp(24px,3vw,40px);}
.brk::before,.brk::after{content:""; position:absolute; width:24px; height:24px; border:1.5px solid var(--slate); pointer-events:none;}
.brk::before{top:-1px; left:-1px; border-right:0; border-bottom:0;}
.brk::after{bottom:-1px; right:-1px; border-left:0; border-top:0;}

/* metadata block */
.metablk{border:1px solid var(--slate-22); border-radius:2px;}
.metablk .mrow{display:flex; border-bottom:1px solid var(--slate-08);}
.metablk .mrow:last-child{border-bottom:0;}
.metablk .k{font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); padding:11px 15px; border-right:1px solid var(--slate-08); min-width:140px;}
.metablk .v{font-family:var(--mono); font-size:12.5px; color:var(--ink); padding:11px 15px;}

/* engineering grid bg */
.egrid{position:relative;}
.egrid::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(var(--slate-08) 1px,transparent 1px),linear-gradient(90deg,var(--slate-08) 1px,transparent 1px); background-size:46px 46px;}
.egrid>*{position:relative; z-index:1;}

/* dark section */
.dark{background:var(--night); color:var(--night-text);}
.dark.egrid::before{background-image:linear-gradient(rgba(236,239,245,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(236,239,245,0.05) 1px,transparent 1px);}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--night-text);}
.dark .body,.dark .lead{color:var(--night-mute);}
.dark .card{background:var(--night-2); border-color:var(--night-rule);}
.dark .divider{background:var(--night-rule);}
.dark .mute{color:var(--night-mute);}

/* eyebrow w/ rule */
.eyebrow{display:inline-flex; align-items:center; gap:14px; margin-bottom:22px;}
.eyebrow::before{content:""; width:34px; height:1px; background:var(--gold);}

/* numbered list */
.numrow{display:flex; gap:20px; align-items:flex-start; padding:20px 0; border-top:1px solid var(--rule);}
.numrow:last-child{border-bottom:1px solid var(--rule);}
.numrow .n{font-family:var(--serif); font-size:28px; color:var(--slate); line-height:1; min-width:44px;}
.dark .numrow{border-color:var(--night-rule);}

/* capital dot */
.capdot{width:13px; height:13px; border-radius:50%; flex:none;}

/* pull quote */
.pull{font-family:var(--serif); font-style:italic; font-size:clamp(26px,3.4vw,44px); line-height:1.3; color:var(--ink); border-left:2px solid var(--gold); padding-left:30px;}
.dark .pull{color:var(--night-text);}

/* footer */
.foot{background:var(--night); color:var(--night-text); padding:72px 0 40px;}
.foot a{color:var(--night-mute); transition:color .15s;} .foot a:hover{color:var(--night-text);}
.foot .col h5{font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin:0 0 16px; font-weight:500;}
.foot .col a{display:block; padding:6px 0; font-size:14px;}

/* reveal on scroll */
.rv{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.rv.in{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){.rv{opacity:1; transform:none;}}

/* responsive grids */
.cols-2{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.4vw,32px);}
.cols-3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px);}
.cols-4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.cols-5{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px,5vw,80px); align-items:center;}
@media(max-width:900px){ .cols-3,.cols-4,.cols-5,.split{grid-template-columns:1fr;} .cols-2{grid-template-columns:1fr;} }
@media(max-width:900px) and (min-width:601px){ .cols-4{grid-template-columns:repeat(2,1fr);} .cols-5{grid-template-columns:repeat(2,1fr);} }