/* JW van Zyl Inc — shared stylesheet (legal identity, group design system) */
:root{
  --navy:#16233D; --navy-2:#1E2F4F; --burgundy:#7A2233; --burgundy-2:#5E1A28;
  --gold:#B08D57; --ink:#1B1B1B; --muted:#566072; --line:#E3E5EA;
  --bg:#FFFFFF; --bg-soft:#F6F5F2; --steel:#9AA8BE; --maxw:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter",Helvetica,Arial,sans-serif; font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;}
h1,h2,h3,.eyebrow,.serif,.wm .n{font-family:"Lora",Georgia,serif;}
a{color:var(--burgundy); text-decoration:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.narrow{max-width:760px;}
.eyebrow{font-family:"Inter",sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--burgundy); font-weight:700; margin:0 0 12px;}
h2{font-size:30px; line-height:1.18; letter-spacing:-.01em; color:var(--navy); font-weight:600; margin:0 0 14px;}
h3{font-family:"Inter",sans-serif; font-size:14px; letter-spacing:.04em; text-transform:uppercase; color:var(--navy); font-weight:700; margin:0 0 8px;}
p{margin:0 0 14px;}
.section{padding:74px 0; border-top:1px solid var(--line);}
.lead{font-size:21px; line-height:1.55; color:var(--navy);}
:focus-visible{outline:3px solid var(--burgundy); outline-offset:2px;}
.rule{width:60px; height:3px; background:var(--gold); border:0; margin:0 0 24px;}

/* Header */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.hbar{display:flex; align-items:center; justify-content:space-between; height:74px;}
.brand{display:flex; align-items:center; gap:13px;}
.brand img{height:40px; width:auto; display:block;}
.wm{display:flex; flex-direction:column; line-height:1.05;}
.wm .n{font-weight:600; font-size:19px; letter-spacing:.01em; color:var(--navy);}
.wm .s{font-family:"Inter",sans-serif; font-size:8.5px; letter-spacing:.26em; color:var(--burgundy); font-weight:600; margin-top:4px; text-transform:uppercase;}
nav.nav{display:flex; gap:26px; align-items:center; font-size:14px; font-weight:500;}
nav.nav a{color:var(--navy);}
nav.nav a:hover{color:var(--burgundy);}
.btn{display:inline-block; background:var(--navy); color:#fff; padding:12px 22px; border-radius:2px; font-family:"Inter",sans-serif; font-size:14px; font-weight:600; letter-spacing:.02em; cursor:pointer; border:0;}
.btn:hover{background:#0F1A2E;}
.btn.gold{background:var(--burgundy); color:#fff;}
.btn.gold:hover{background:var(--burgundy-2);}
.btn.lg{padding:15px 28px; font-size:15px;}
.btn.ghost{background:transparent; border:1px solid #41506C; color:#fff;}
.menu-tgl{display:none; background:none; border:0; padding:8px; cursor:pointer;}

/* Hero */
.hero{background:var(--navy); color:#fff; padding:94px 0 86px; position:relative; overflow:hidden;}
.hero.compact{padding:60px 0 52px;}
.hero .eyebrow{color:var(--gold);}
.hero h1{font-size:46px; line-height:1.1; letter-spacing:-.01em; font-weight:600; margin:0 0 20px; max-width:18ch;}
.hero.compact h1{font-size:36px;}
.hero p{font-size:20px; line-height:1.55; color:#CBD3E0; max-width:62ch;}
.hero .cta{margin-top:30px; display:flex; gap:14px; flex-wrap:wrap;}
.hero .mark-bg{position:absolute; right:-40px; top:50%; transform:translateY(-50%); height:360px; opacity:.06;}

/* Stat strip */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.stat{background:#fff; padding:24px 20px;}
.stat-n{font-family:"Inter",sans-serif; font-size:14px; font-weight:700; color:var(--burgundy); letter-spacing:.03em; margin-bottom:6px;}
.stat-d{font-size:14.5px; color:var(--muted); line-height:1.45;}

/* Grids / cards */
.grid{display:grid; gap:22px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.card{border:1px solid var(--line); border-top:3px solid var(--burgundy); padding:24px 22px; background:#fff;}
.card h3{color:var(--navy);}
.card p{font-size:15.5px; line-height:1.6; color:var(--ink); margin:0;}
.card.alt{border-top-color:var(--gold);}

/* Ecosystem */
.eco{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.eco .ent{border:1px solid var(--line); padding:26px 22px; background:var(--bg-soft);}
.eco .ent .tag{font-family:"Inter",sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--burgundy); font-weight:700;}
.eco .ent h3{font-family:"Lora",serif; text-transform:none; letter-spacing:0; font-size:19px; color:var(--navy); margin:8px 0 8px;}
.eco .ent p{font-size:14.5px; color:var(--muted); margin:0;}

/* Pillars */
.pillars{display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px;}
.pillars .row{display:grid; grid-template-columns:34px 1fr; gap:14px; padding:18px 0; border-bottom:1px solid var(--line);}
.pillars .no{font-family:"Lora",serif; font-weight:600; color:var(--gold); font-size:20px;}
.pillars .row p{font-size:15px; color:var(--muted); margin:4px 0 0;}

/* Panel */
.panel{background:var(--navy); color:#fff; padding:34px 30px;}
.panel .eyebrow{color:var(--gold);}
.panel h3{font-family:"Lora",serif; color:#fff; font-size:19px; text-transform:none; letter-spacing:0; margin-bottom:12px;}
.panel p{color:#CBD3E0; font-size:15.5px;}

/* Contact */
.contact{background:var(--bg-soft);}
.contact-card{background:var(--navy); color:#fff; padding:44px 40px; display:grid; grid-template-columns:1.2fr 1fr; gap:30px; align-items:center;}
.contact-card h2{color:#fff;}
.contact-card p{color:#CBD3E0;}
.contact-card .det{font-family:"Inter",sans-serif; font-size:15px; line-height:1.9;}
.contact-card .det a{color:#fff;}
.contact-card .det .k{color:var(--steel); display:inline-block; width:84px;}

/* Prose (legal pages) */
.prose{font-size:16.5px; color:var(--ink);}
.prose h2{font-size:22px; margin:32px 0 10px;}
.prose h3{font-family:"Inter",sans-serif; font-size:13px; margin:22px 0 6px;}
.prose ul{margin:0 0 16px; padding-left:22px;}
.prose li{margin:0 0 7px;}
.prose .meta{color:var(--muted); font-size:14px;}

/* Footer */
footer{background:#0F1A2E; color:#8A98AE; font-family:"Inter",sans-serif; font-size:12.5px; padding:34px 0;}
footer .wrap{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;}
footer a{color:#B7C2D4;}
footer .fnav{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:8px;}
footer .conf{color:#9AA8BE;}

.confbar{background:var(--navy); color:#E8E2D5; text-align:center; font-family:"Inter",sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; padding:7px; border-bottom:2px solid var(--gold);}

@media(max-width:860px){
  .g3,.g2,.eco,.pillars,.stats,.contact-card{grid-template-columns:1fr;}
  .hero h1{font-size:33px;} .hero{padding:60px 0;}
  h2{font-size:25px;}
  .menu-tgl{display:inline-flex;}
  nav.nav{position:absolute; top:74px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line); box-shadow:0 12px 24px rgba(20,33,61,.10); display:none;}
  nav.nav.open{display:flex;}
  nav.nav a{padding:16px 28px; border-top:1px solid var(--line);}
  nav.nav a.btn{margin:16px 28px; text-align:center; border-top:0;}
}