/* ===================== KJ Wealth — shared theme ===================== */
:root{
  --navy-950:#0a1526;
  --navy-900:#0f1b31;
  --navy-800:#16223c;
  --navy-700:#1c2c48;
  --navy-600:#2c3f60;
  --steel-500:#5b7196;
  --steel-300:#8ba0bf;
  --gold-700:#8a6a12;
  --gold-500:#b8892f;
  --gold-400:#c9a227;
  --gold-300:#d9b24c;
  --gold-200:#e8c766;
  --cream:#f8f6f1;
  --paper:#fffdf9;
  --ink:#1c2333;
  --ink-soft:#4a5266;
  --line:#e4ddc9;
  --max:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Lora','Georgia',serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.serif-display{
  font-family:'Playfair Display','Georgia',serif;
  color:var(--navy-800);
  font-weight:600;
  letter-spacing:.2px;
  margin:0 0 .5em;
}
p{margin:0 0 1.1em; color:var(--ink-soft); font-size:1.02rem;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0;}
.container{max-width:var(--max); margin:0 auto; padding:0 28px;}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:2.5px;
  font-size:.75rem;
  font-family:'Lora',serif;
  color:var(--gold-500);
  font-weight:600;
  margin-bottom:10px;
  display:inline-block;
}
.section{padding:88px 0;}
.section-tight{padding:56px 0;}
.section-alt{background:var(--cream);}
.section-navy{background:var(--navy-900); color:#fff;}
.section-navy h1,.section-navy h2,.section-navy h3{color:#fff;}
.section-navy p{color:#c7cedd;}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 28px;
  border-radius:2px;
  font-family:'Lora',serif;
  font-size:.92rem;
  letter-spacing:.5px;
  text-transform:uppercase;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .25s ease;
}
.btn-gold{background:linear-gradient(135deg,var(--gold-400),var(--gold-300)); color:var(--navy-900); font-weight:600;}
.btn-gold:hover{background:linear-gradient(135deg,var(--gold-500),var(--gold-400));}
.btn-outline{border-color:var(--gold-400); color:var(--navy-800);}
.btn-outline:hover{background:var(--gold-400); color:var(--navy-900);}
.btn-outline-light{border-color:rgba(255,255,255,.5); color:#fff;}
.btn-outline-light:hover{background:#fff; color:var(--navy-900);}

/* Header / Nav */
header.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,253,249,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 28px; max-width:var(--max); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:108px; width:auto;}
nav.main-nav ul{display:flex; gap:30px; list-style:none;}
nav.main-nav a{
  font-family:'Lora',serif;
  font-size:.86rem;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--navy-800);
  padding:6px 0;
  border-bottom:2px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
nav.main-nav a:hover, nav.main-nav a.active{border-color:var(--gold-400); color:var(--gold-700);}
.nav-cta{display:flex; align-items:center; gap:18px;}
.menu-toggle{display:none;}

/* Hero */
.hero{
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(201,162,39,.14), transparent 60%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900) 60%, var(--navy-800));
  color:#fff;
  padding:120px 0 100px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:120px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.15));
}
.hero .container{position:relative; z-index:2;}
.hero-tag{
  display:inline-block; padding:6px 14px; border:1px solid rgba(201,162,39,.5);
  border-radius:30px; color:var(--gold-200); font-size:.78rem; letter-spacing:1.5px;
  text-transform:uppercase; margin-bottom:24px;
}
.hero h1{
  font-size:clamp(2.1rem, 4.2vw, 3.4rem);
  max-width:820px;
  color:#fff;
  line-height:1.18;
}
.hero p.lead{
  color:#cfd6e4; max-width:620px; font-size:1.15rem;
}
.hero-actions{display:flex; gap:18px; margin-top:34px; flex-wrap:wrap;}
.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  margin-top:70px; padding-top:36px; border-top:1px solid rgba(255,255,255,.15);
}
.hero-stats .stat-num{font-family:'Playfair Display',serif; font-size:2rem; color:var(--gold-300);}
.hero-stats .stat-label{font-size:.82rem; color:#aab3c8; text-transform:uppercase; letter-spacing:1px;}

/* Grids / Cards */
.grid{display:grid; gap:28px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

.card{
  background:var(--paper);
  border:1px solid var(--line);
  padding:34px 30px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(15,27,49,.08); border-color:var(--gold-400);}
.card .card-index{
  font-family:'Playfair Display',serif; color:var(--gold-400); font-size:.85rem;
  letter-spacing:2px; margin-bottom:10px; display:block;
}
.card h3{font-size:1.2rem; margin-bottom:12px;}
.card a.card-link{color:var(--gold-700); font-size:.85rem; text-transform:uppercase; letter-spacing:1px; font-weight:600;}

.segment-card{
  border-left:3px solid var(--gold-400);
  padding:26px 28px;
  background:var(--cream);
}
.segment-card h4{margin-bottom:8px; font-size:1.05rem;}
.segment-card .tag{font-size:.78rem; text-transform:uppercase; letter-spacing:1px; color:var(--gold-700); font-weight:600;}

/* Section header pattern */
.section-head{max-width:680px; margin-bottom:52px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* Quote / statement block */
.statement{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.4rem,2.6vw,2.1rem);
  color:var(--navy-800);
  line-height:1.4;
  max-width:820px;
}
.statement .accent{color:var(--gold-500);}

/* Divider */
.hr-gold{height:2px; width:70px; background:linear-gradient(90deg,var(--gold-500),var(--gold-200)); margin:18px 0 26px;}

/* Table */
table.data{width:100%; border-collapse:collapse;}
table.data th, table.data td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); font-size:.95rem;}
table.data th{font-family:'Lora',serif; text-transform:uppercase; font-size:.78rem; letter-spacing:1px; color:var(--gold-700);}

/* Footer */
footer.site-footer{background:var(--navy-950); color:#c7cedd; padding-top:70px;}
footer.site-footer h5{color:#fff; font-family:'Lora',serif; text-transform:uppercase; font-size:.82rem; letter-spacing:1.5px; margin-bottom:18px;}
footer.site-footer a{color:#c7cedd; opacity:.9;}
footer.site-footer a:hover{color:var(--gold-300);}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.1);}
.footer-bottom{padding:26px 0 34px; font-size:.82rem; color:#8b94a8; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.footer-links li{margin-bottom:10px; font-size:.92rem;}
.disclosure{
  font-size:.8rem; color:#8b94a8; padding:26px 0; border-top:1px solid rgba(255,255,255,.08);
  line-height:1.7;
}
.disclosure strong{color:#c7cedd;}

/* Breadcrumb / page hero (inner pages) */
.page-hero{
  background:linear-gradient(180deg, var(--navy-950), var(--navy-800));
  color:#fff; padding:80px 0 60px;
}
.page-hero .eyebrow{color:var(--gold-300);}
.page-hero h1{color:#fff; max-width:760px;}
.page-hero p{color:#c7cedd; max-width:620px;}

/* Utility */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.text-center{text-align:center;}
.small{font-size:.85rem;}
.muted{color:var(--ink-soft);}
.pill{
  display:inline-block; padding:5px 14px; border:1px solid var(--gold-400); border-radius:20px;
  font-size:.72rem; text-transform:uppercase; letter-spacing:1px; color:var(--gold-700); font-weight:600;
}

@media (max-width: 980px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .hero-stats{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 720px){
  nav.main-nav{display:none;}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .hero{padding:90px 0 70px;}
}