:root {
  --navy:   #1E3264;
  --navy-d: #111D3C;
  --navy-m: #0D1526;
  --gold:   #B8860B;
  --orange: #E8640A;
  --cream:  #FAF8F4;
  --paper:  #F2EFE9;
  --warm:   #EDE9E1;
  --muted:  #7a7065;
  --rule:   rgba(30,50,100,.1);
  --fh:     'Instrument Serif', Georgia, serif;
  --fb:     'DM Sans', system-ui, sans-serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--fb);
  background:var(--cream);
  color:var(--navy);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── PROGRESS ── */
#prog {
  position:fixed; top:0; left:0; z-index:999;
  height:2px; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--orange));
  pointer-events:none;
}

/* ── NAV — mobile ── */
/*nav {*/
/*  position:fixed; top:0; left:0; right:0; z-index:500;*/
/*  display:flex; align-items:center; justify-content:space-between;*/
/*  padding:16px 20px;*/
/*  background:rgba(17,29,60,.97);*/
/*  backdrop-filter:blur(16px);*/
/*  border-bottom:1px solid rgba(255,255,255,.06);*/
/*}*/
/*.logo {*/
/*  font-family:var(--fb); font-size:.95rem; font-weight:700;*/
/*  color:#fff; text-decoration:none;*/
/*  display:flex; align-items:center; gap:8px;*/
/*}*/
/*.logo-dot { width:7px; height:7px; border-radius:50%; background:var(--gold); flex-shrink:0; }*/
/*.nav-cta {*/
/*  background:var(--gold); color:var(--navy-d);*/
/*  padding:8px 16px; border-radius:5px;*/
/*  font-size:.72rem; font-weight:700; text-decoration:none;*/
/*  letter-spacing:.03em;*/
/*}*/
/*.hbg {*/
/*  display:flex; flex-direction:column; gap:5px;*/
/*  background:none; border:none; cursor:pointer; padding:4px;*/
/*  -webkit-tap-highlight-color:transparent;*/
/*}*/
/*.hbg span { display:block; width:20px; height:1.5px; background:#fff; border-radius:2px; transition:all .3s; }*/
/*.hbg.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }*/
/*.hbg.open span:nth-child(2) { opacity:0; }*/
/*.hbg.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }*/
/*.mob-d {*/
/*  display:none; position:fixed; inset:0;*/
/*  background:var(--navy-d); z-index:490;*/
/*  flex-direction:column; padding:80px 24px 40px;*/
/*}*/
/*.mob-d.open { display:flex; }*/
/*.mob-d a {*/
/*  font-family:var(--fh); font-size:1.6rem; font-style:italic;*/
/*  color:rgba(255,255,255,.7); text-decoration:none;*/
/*  padding:18px 0; border-bottom:1px solid rgba(255,255,255,.08);*/
/*}*/
/*.mob-d .mc {*/
/*  margin-top:28px; background:var(--gold); color:var(--navy-d);*/
/*  border-radius:8px; text-align:center; padding:16px;*/
/*  font-weight:700; border:none; font-size:.95rem;*/
/*  font-family:var(--fb); font-style:normal;*/
/*}*/

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO — mobile first, dark navy
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero {
  background:var(--navy-d);
  padding:80px 24px 48px;
  position:relative; overflow:hidden;
  min-height:92vw;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 30%, rgba(184,134,11,.1), transparent 65%);
  pointer-events:none;
}
.hero-rule { position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold) 30%,rgba(184,134,11,.3) 70%,transparent); }

/* Avatar centred at top */
.hero-avatar {
  /*position:absolute; top:0; left:0; right:0;*/
  /*display:flex; justify-content:center; align-items:center;*/
  /*height:60%;*/
  /*pointer-events:none;*/
}
.av-wrap {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
}

/* Hero text — bottom of panel */
.hero-content { position:relative; z-index:3; }
.hero-eyebrow {
  font-size:.58rem; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:14px; display:flex; align-items:center; gap:8px;
  opacity:0; animation:fadeUp .5s .1s ease forwards;
}
.hero-eyebrow::before { content:''; width:16px; height:1px; background:var(--gold); flex-shrink:0; }

.hero-h1 {
  font-family:var(--fh);
  font-size:clamp(2.2rem,8vw,3rem);
  font-weight:400; line-height:1.08;
  letter-spacing:-.015em; color:#fff;
  margin-bottom:14px;
  opacity:0; animation:fadeUp .7s .2s ease forwards;
}
.hero-h1 em { font-style:italic; color:var(--gold); display:block; }

.hero-deck {
  font-family:var(--fh); font-size:.95rem; font-style:italic;
  color:rgba(255,255,255,.5); line-height:1.7;
  margin-bottom:24px;
  opacity:0; animation:fadeUp .6s .3s ease forwards;
}

/* Author strip */
.hero-author {
  display:flex; align-items:center; gap:14px;
  padding-top:20px; border-top:1px solid rgba(255,255,255,.1);
  opacity:0; animation:fadeUp .6s .4s ease forwards;
}
.author-name { font-family:var(--fh); font-size:.95rem; font-style:italic; color:#fff; margin-bottom:2px; }
.author-role { font-size:.62rem; color:rgba(255,255,255,.38); letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; }
.author-li {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.66rem; color:var(--gold); text-decoration:none; opacity:.75;
  -webkit-tap-highlight-color:transparent;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STATS STRIP
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stats {
  background:var(--navy);
  display:grid; grid-template-columns:1fr 1fr 1fr;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.stat {
  padding:20px 16px; text-align:center;
  border-right:1px solid rgba(255,255,255,.06);
}
.stat:last-child { border-right:none; }
.stat-num {
  font-family:var(--fb); font-size:1.6rem; font-weight:700;
  color:var(--gold); letter-spacing:-.03em; line-height:1; margin-bottom:4px;
}
.stat-label { font-size:.62rem; color:rgba(255,255,255,.38); font-weight:300; line-height:1.4; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STORY — single column
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.chapter {
  padding:44px 24px;
  border-bottom:1px solid var(--rule);
  background:var(--cream);
}
.ch-num {
  font-family:var(--fh); font-size:.7rem; font-style:italic;
  color:var(--gold); opacity:.7; letter-spacing:.1em;
  display:block; margin-bottom:10px;
}
.ch-h {
  font-family:var(--fh);
  font-size:clamp(1.4rem,5.5vw,1.8rem);
  font-weight:400; line-height:1.25;
  color:var(--navy); margin-bottom:20px;
}
.ch-h em { font-style:italic; color:var(--gold); }
.ch-p {
  font-size:.97rem; color:#4a5568;
  line-height:1.9; font-weight:300; margin-bottom:14px;
}
.ch-p:last-child { margin-bottom:0; }
.ch-p strong { color:var(--navy); font-weight:500; }

/* Pull quote — mobile */
.pq {
  margin:24px 0;
  padding:20px 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.pq-text {
  font-family:var(--fh);
  font-size:1.1rem; font-style:italic;
  color:var(--navy); line-height:1.55;
  padding-left:16px; position:relative;
}
.pq-text::before {
  content:''; position:absolute; left:0; top:4px; bottom:4px;
  width:2px; background:var(--gold);
}
.pq-attr {
  display:block; font-size:.6rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-top:10px;
  font-style:normal; font-family:var(--fb);
  padding-left:16px;
}

/* Inline number */
.num { font-family:var(--fb); font-weight:700; color:var(--navy); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BELIEFS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.beliefs {
  background:var(--paper);
  padding:44px 24px;
  border-top:2px solid var(--navy);
}
.section-label {
  font-size:.57rem; font-weight:700; letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted);
  margin-bottom:32px;
}
.belief {
  display:grid; grid-template-columns:40px 1fr; gap:14px;
  padding:20px 0; border-bottom:1px solid var(--rule);
  align-items:start;
}
.belief:first-of-type { border-top:1px solid var(--rule); }
.bn { font-family:var(--fh); font-size:1.8rem; font-style:italic; color:rgba(30,50,100,.08); line-height:1; }
.bt { font-family:var(--fh); font-size:.95rem; font-style:italic; color:var(--navy); margin-bottom:5px; line-height:1.3; }
.bb { font-size:.85rem; color:var(--muted); line-height:1.75; font-weight:300; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FAQ — accordion
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.faq-sec {
  background:var(--cream);
  padding:44px 24px;
  border-top:1px solid var(--rule);
}
.faq-h {
  font-family:var(--fh);
  font-size:clamp(1.4rem,5.5vw,1.8rem);
  font-weight:400; color:var(--navy);
  line-height:1.2; margin-bottom:32px;
}
.faq-h em { font-style:italic; color:var(--gold); }
.faq-item {
  padding:18px 0;
  border-bottom:1px solid var(--rule);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.faq-item:first-child { border-top:1px solid var(--rule); }
.faq-q {
  font-family:var(--fh);
  font-size:.97rem; font-weight:400;
  color:var(--navy); line-height:1.4;
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:14px;
}
.faq-q::after {
  content:'+'; font-family:var(--fb);
  font-size:1.2rem; font-weight:300;
  color:var(--gold); flex-shrink:0;
  transition:transform .3s ease; line-height:1;
}
.faq-item.open .faq-q::after { transform:rotate(45deg); }
.faq-a {
  font-size:.88rem; color:var(--muted);
  line-height:1.85; font-weight:300;
  max-height:0; overflow:hidden;
  transition:max-height .4s ease, padding-top .3s ease;
  padding-top:0;
}
.faq-item.open .faq-a { max-height:400px; padding-top:14px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CTA BAND
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cta-sec {
  background:linear-gradient(135deg,var(--orange),var(--gold) 55%,#9A7209);
  padding:48px 24px;
  position:relative; overflow:hidden;
}
.cta-sec::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:22px 22px; pointer-events:none;
}
.cta-h {
  font-family:var(--fh);
  font-size:clamp(1.6rem,6vw,2.2rem);
  font-weight:400; color:#fff; line-height:1.2;
  margin-bottom:10px; position:relative; z-index:2;
}
.cta-sub {
  font-size:.9rem; color:rgba(255,255,255,.7);
  font-weight:300; line-height:1.7;
  margin-bottom:28px; position:relative; z-index:2;
}
.cta-btns { display:flex; flex-direction:column; gap:12px; position:relative; z-index:2; }
.btn-w {
  background:#fff; color:var(--orange);
  padding:15px 24px; border-radius:8px;
  font-weight:700; font-size:.88rem; text-decoration:none;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 4px 20px rgba(0,0,0,.15);
  -webkit-tap-highlight-color:transparent;
}
.btn-g {
  background:rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.24);
  padding:14px 24px; border-radius:8px;
  font-size:.85rem; text-decoration:none;
  display:flex; align-items:center; justify-content:center; gap:8px;
  -webkit-tap-highlight-color:transparent;
}
.cta-note {
  font-size:.67rem; color:rgba(255,255,255,.35);
  font-style:italic; font-family:var(--fh);
  margin-top:14px; text-align:center;
  position:relative; z-index:2;
}

/* ── FOOTER ── */
footer { background:var(--navy-m); padding:44px 24px 36px; }
.ft-brand { margin-bottom:32px; }
.ft-logo {
  font-family:var(--fb); font-size:.95rem; font-weight:700;
  color:#fff; display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.ft-desc { font-size:.8rem; color:rgba(255,255,255,.28); line-height:1.8; font-weight:300; }
.ft-cols { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-bottom:32px; }
.ft-ct { font-size:.55rem; text-transform:uppercase; letter-spacing:.2em; color:var(--gold); font-weight:600; margin-bottom:12px; opacity:.75; }
.ft-col a { display:block; font-size:.8rem; color:rgba(255,255,255,.28); text-decoration:none; margin-bottom:8px; font-weight:300; }
.ft-bot {
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:20px;
  display:flex; flex-direction:column; gap:8px;
}
.ft-copy { font-size:.68rem; color:rgba(255,255,255,.14); }
.ft-pl { font-family:var(--fh); font-size:.82rem; color:var(--gold); font-style:italic; opacity:.55; }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
.reveal { opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.on { opacity:1; transform:none; }

/* ── TOUCH TARGETS ── */
.nav-cta, .btn-w, .btn-g, .faq-item { min-height:44px; }
