:root {
  --ink:    #0f172a;
  --text:   #2d3748;
  --muted:  #64748b;
  --light:  #94a3b8;
  --paper:  #FAF8F4;
  --tint:   #f6f3ec;
  --rule:   #e8e4d8;
  --rule-d: #d4d2cc;
  --gold:   #B8860B;
  --gold-l: #FAF6E8;
  --gold-d: #9A7209;
  --orange: #E8640A;
  --navy:   #1E3264;
  --navy-d: #111D3C;
  --fh:     'Instrument Serif', Georgia, serif;
  --fb:     'DM Sans', system-ui, sans-serif;
  --fm:     'JetBrains Mono', ui-monospace, monospace;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--fb);
  background:var(--paper);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-weight:300;
}

/* ── PROGRESS ── */
#prog { position:fixed; top:0; left:0; z-index:999; height:1px; width:0%; background:var(--gold); }

nav{
    background: #15203b;
}

@media (max-width: 768px){
  nav{
    background: #ffffff;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ARTICLE MASTHEAD
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.masthead {
  max-width:780px;
  margin:0 auto;
  padding:140px 32px 0;
}

.mast-kicker {
  font-family:var(--fb);
  font-size:.62rem; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin-bottom:80px;
  display:flex; align-items:center; justify-content:center; gap:14px;
  text-align:center;
}
.mast-kicker::before, .mast-kicker::after {
  content:''; width:48px; height:1px; background:var(--gold); opacity:.3;
}

.mast-section-num {
  font-family:var(--fh);
  font-size:.78rem; font-style:italic;
  color:var(--gold);
  letter-spacing:.04em;
  margin-bottom:16px;
  text-align:center;
}

.mast-title {
  font-family:var(--fh);
  font-size:clamp(3.2rem,6vw,5.8rem);
  font-weight:400; line-height:1.05;
  letter-spacing:-.022em; color:var(--ink);
  text-align:center;
  margin-bottom:28px;
}
.mast-title em { font-style:italic; color:var(--gold); }

.mast-deck {
  font-family:var(--fh);
  font-size:clamp(1.15rem,1.8vw,1.45rem);
  font-style:italic; color:var(--muted);
  line-height:1.6; text-align:center;
  max-width:600px; margin:0 auto 56px;
}

.mast-meta {
  display:flex; justify-content:center; gap:40px;
  padding:24px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  flex-wrap:wrap;
}
.mast-meta-item { text-align:center; }
.mast-meta-label {
  font-size:.6rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--light); margin-bottom:4px;
}
.mast-meta-value {
  font-size:.82rem; color:var(--ink);
  font-weight:400;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ARTICLE BODY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.article {
  max-width:780px;
  margin:0 auto;
  padding:80px 32px 0;
}

/* Sticky table of contents — discreet */
.toc {
  position:sticky;
  top:80px;
  margin-bottom:64px;
  padding:20px 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  background:rgba(254,254,254,.95);
  backdrop-filter:blur(8px);
  z-index:50;
}
.toc-label {
  font-size:.58rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--light); margin-bottom:10px;
}
.toc-list {
  display:flex; gap:32px; list-style:none;
  flex-wrap:wrap;
}
.toc-list a {
  font-size:.78rem; color:var(--muted);
  text-decoration:none; transition:color .2s;
  display:flex; align-items:baseline; gap:6px;
}
.toc-list a:hover, .toc-list a.active { color:var(--ink); }
.toc-list a.active { color:var(--gold); }
.toc-num {
  font-family:var(--fh); font-style:italic;
  font-size:.7rem; color:var(--gold); opacity:.7;
}

/* Section opener */
.section-open {
  margin-bottom:48px;
}
.section-roman {
  font-family:var(--fh);
  font-size:.85rem; font-style:italic;
  color:var(--gold); letter-spacing:.04em;
  margin-bottom:14px; display:block;
}
.section-h {
  font-family:var(--fh);
  font-size:clamp(1.8rem,3vw,2.6rem);
  font-weight:400; line-height:1.2;
  letter-spacing:-.012em; color:var(--ink);
  margin-bottom:24px;
}
.section-h em { font-style:italic; color:var(--gold); }

/* Lead paragraph — drop cap */
.lead {
  font-family:var(--fh);
  font-size:clamp(1.15rem,1.6vw,1.3rem);
  line-height:1.7; color:var(--text);
  margin-bottom:32px; font-style:italic;
}
.lead::first-letter {
  font-family:var(--fh);
  font-size:5.5rem;
  font-weight:400; font-style:normal;
  color:var(--gold);
  float:left; line-height:.85;
  margin:8px 12px 0 0;
}

/* Body paragraph */
.body-p {
  font-size:1.02rem;
  color:var(--text);
  line-height:1.85;
  font-weight:300;
  margin-bottom:22px;
}
.body-p strong { color:var(--ink); font-weight:500; }
.body-p em { font-style:italic; color:var(--ink); }

/* Section break */
.section-break {
  text-align:center;
  margin:64px 0;
  font-family:var(--fh);
  font-style:italic;
  color:var(--gold);
  letter-spacing:.5em;
  font-size:.9rem;
}

/* Pull quote — minimal */
.pull-q {
  margin:48px 0;
  padding:0 0 0 32px;
  border-left:1px solid var(--gold);
}
.pull-q-text {
  font-family:var(--fh);
  font-size:clamp(1.5rem,2.4vw,1.95rem);
  font-style:italic; color:var(--ink);
  line-height:1.4;
  margin-bottom:14px;
}
.pull-q-attr {
  font-size:.7rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold);
}

/* Body list */
.body-list {
  margin:24px 0; padding:0; list-style:none;
}
.body-list li {
  font-size:1.02rem; color:var(--text);
  line-height:1.85; font-weight:300;
  padding:6px 0 6px 28px;
  position:relative;
}
.body-list li::before {
  content:''; position:absolute; left:0; top:18px;
  width:6px; height:6px; border-radius:50%;
  background:var(--gold);
}
.body-list li strong { color:var(--ink); font-weight:500; }

/* Callout — sidebar style */
.callout {
  margin:40px 0;
  padding:28px 32px;
  background:#faf7f0;
  border-left:2px solid var(--gold);
}
.callout-label {
  font-family:var(--fh); font-style:italic;
  font-size:.78rem; color:var(--gold);
  letter-spacing:.04em; margin-bottom:10px;
}
.callout-text {
  font-family:var(--fh); font-size:1.08rem;
  font-style:italic; color:var(--ink);
  line-height:1.55;
}

/* Phase section divider */
.phase-divider {
  margin:96px 0 80px;
  padding-top:40px;
  border-top:1px solid var(--rule);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TIMELINE — horizontal, minimal
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.timeline-section {
  max-width:1000px;
  margin:120px auto 0;
  padding:80px 32px;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.tl-h {
  font-family:var(--fh);
  font-size:clamp(1.8rem,3vw,2.6rem);
  font-weight:400; color:var(--ink);
  text-align:center; line-height:1.2;
  margin-bottom:14px;
  letter-spacing:-.012em;
}
.tl-h em { font-style:italic; color:var(--gold); }
.tl-deck {
  font-family:var(--fh); font-style:italic;
  text-align:center; color:var(--muted);
  font-size:1.05rem; margin-bottom:64px;
}

.tl-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  position:relative;
}
.tl-grid::before {
  content:''; position:absolute;
  top:6px; left:8%; right:8%;
  height:1px; background:var(--gold); opacity:.3;
}
.tl-step {
  text-align:left;
  padding:0 16px;
  position:relative;
}
.tl-dot {
  width:13px; height:13px; border-radius:50%;
  background:var(--gold); border:3px solid var(--paper);
  margin-bottom:24px; position:relative; z-index:2;
  outline:1px solid var(--gold);
}
.tl-when {
  font-family:var(--fh); font-style:italic;
  font-size:.78rem; color:var(--gold);
  margin-bottom:8px; letter-spacing:.02em;
}
.tl-name {
  font-size:.95rem; font-weight:500;
  color:var(--ink); margin-bottom:8px;
  line-height:1.4;
}
.tl-desc {
  font-size:.85rem; color:var(--muted);
  line-height:1.7; font-weight:300;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRINCIPLES — clean grid
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.principles-sec {
  max-width:1000px;
  margin:0 auto;
  padding:96px 32px;
}
.pr-h {
  font-family:var(--fh);
  font-size:clamp(1.8rem,3vw,2.6rem);
  font-weight:400; color:var(--ink);
  text-align:center; line-height:1.2;
  margin-bottom:14px;
  letter-spacing:-.012em;
}
.pr-h em { font-style:italic; color:var(--gold); }
.pr-deck {
  font-family:var(--fh); font-style:italic;
  text-align:center; color:var(--muted);
  font-size:1.05rem; margin-bottom:64px;
}
.pr-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px 80px;
}
.pr-item { padding-top:8px; }
.pr-num {
  font-family:var(--fh); font-style:italic;
  font-size:.78rem; color:var(--gold);
  letter-spacing:.04em; margin-bottom:14px;
}
.pr-name {
  font-family:var(--fh); font-style:italic;
  font-size:1.4rem; color:var(--ink);
  line-height:1.3; margin-bottom:14px;
}
.pr-desc {
  font-size:.95rem; color:var(--muted);
  line-height:1.8; font-weight:300;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   END NOTE — McKinsey style closer
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.endnote {
  max-width:680px;
  margin:0 auto;
  padding:96px 32px 120px;
  text-align:center;
  border-top:1px solid var(--rule);
}
.en-mark {
  font-family:var(--fh); font-style:italic;
  color:var(--gold); font-size:.85rem;
  letter-spacing:.4em;
  margin-bottom:32px;
}
.en-h {
  font-family:var(--fh);
  font-size:clamp(2rem,3.5vw,3rem);
  font-weight:400; color:var(--ink);
  line-height:1.2; margin-bottom:20px;
  letter-spacing:-.012em;
}
.en-h em { font-style:italic; color:var(--gold); }
.en-p {
  font-size:1.05rem; color:var(--muted);
  line-height:1.85; font-weight:300;
  margin-bottom:36px;
}
.en-cta-row {
  display:flex; gap:24px; justify-content:center;
  flex-wrap:wrap; align-items:center;
}
.en-primary {
  font-family:var(--fb);
  font-size:.82rem; font-weight:500;
  color:var(--ink); text-decoration:none;
  border-bottom:2px solid var(--gold);
  padding:6px 2px;
  letter-spacing:.02em;
  transition:color .2s, border-color .2s;
}
.en-primary:hover { color:var(--gold); }
.en-secondary {
  font-size:.78rem; color:var(--light);
  text-decoration:none;
  padding:6px 0;
  transition:color .2s;
}
.en-secondary:hover { color:var(--ink); }


/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(12px); transition:opacity .8s ease, transform .8s ease; }
.reveal.on { opacity:1; transform:none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:900px) {
  nav { padding:18px 32px; }
  .nav-links { display:none; }
  .hbg { display:flex; }
  .masthead { padding:120px 24px 0; }
  .article { padding:64px 24px 0; }
  .toc { display:none; }
  .timeline-section { padding:64px 24px; margin-top:80px; }
  .tl-grid { grid-template-columns:1fr; gap:32px; }
  .tl-grid::before { left:5px; right:auto; top:0; bottom:0; width:1px; height:auto; }
  .tl-step { padding:0 0 0 24px; position:relative; }
  .tl-dot { position:absolute; left:0; top:0; }
  .principles-sec { padding:64px 24px; }
  .pr-grid { grid-template-columns:1fr; gap:48px; }
  .endnote { padding:80px 24px 96px; }
  footer { padding:56px 32px 36px; }
  .ft-top { grid-template-columns:1fr 1fr; gap:36px; }
}
@media(max-width:540px) {
  .mast-meta { gap:24px; }
  .mast-meta-item { min-width:100px; }
  .lead::first-letter { font-size:4rem; margin:6px 8px 0 0; }
  footer { padding:48px 24px 32px; }
  .ft-top { grid-template-columns:1fr; gap:28px; }
  .ft-bot { flex-direction:column; align-items:flex-start; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   VISUAL — INTEGRATION DIAGRAM
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.viz-wrap {
  margin:64px -40px;
  padding:48px 40px;
  background:#fafaf6;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.viz-caption {
  display:block;
  text-align:center;
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:6px;
}
.viz-title {
  font-family:var(--fh);
  font-size:1.15rem;
  font-style:italic;
  color:var(--ink);
  text-align:center;
  margin-bottom:32px;
  line-height:1.4;
}
.viz-figure-label {
  font-family:var(--fh);
  font-size:.72rem;
  font-style:italic;
  color:var(--light);
  text-align:center;
  margin-top:24px;
  letter-spacing:.04em;
}

.diag-split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}
.diag-side {}
.diag-side-label {
  font-family:var(--fb);
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:14px;
  text-align:center;
}
.diag-side.before .diag-side-label { color:var(--light); }
.diag-side.after .diag-side-label { color:var(--gold); }
.diag-side-h {
  font-family:var(--fh);
  font-style:italic;
  font-size:.95rem;
  color:var(--muted);
  text-align:center;
  margin-bottom:24px;
  line-height:1.4;
}
.diag-side.after .diag-side-h { color:var(--ink); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   VISUAL — DATA LAYER FLOW
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.flow-wrap {
  margin:48px 0;
  padding:40px 0;
  text-align:center;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   VISUAL — GROWTH CURVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.growth-wrap {
  max-width:1000px;
  margin:0 auto;
  padding:80px 32px;
  border-top:1px solid var(--rule);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOUNDER QUOTE BLOCK
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.founder-quote {
  margin:80px -40px;
  padding:64px 80px;
  background:#1a1a1a;
  color:#fff;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.founder-quote::before {
  content:'"';
  position:absolute;
  top:-40px; left:50%;
  transform:translateX(-50%);
  font-family:var(--fh);
  font-style:italic;
  font-size:14rem;
  color:rgba(184,134,11,.12);
  line-height:1;
  pointer-events:none;
}
.fq-avatar {
  width:64px; height:64px;
  border-radius:50%;
  margin:0 auto 24px;
  border:1.5px solid rgba(184,134,11,.4);
  background:linear-gradient(135deg, #2a2a2a, #1a1a1a);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
}
.fq-text {
  font-family:var(--fh);
  font-size:clamp(1.4rem,2.4vw,1.9rem);
  font-style:italic;
  color:#fff;
  line-height:1.5;
  max-width:680px;
  margin:0 auto 28px;
  position:relative;
  z-index:2;
}
.fq-text em { color:var(--gold); }
.fq-attr {
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  position:relative;
  z-index:2;
}
.fq-name {
  font-family:var(--fh);
  font-size:1rem;
  font-style:italic;
  color:#fff;
  margin-bottom:4px;
  position:relative;
  z-index:2;
}
.fq-role {
  font-size:.65rem;
  color:rgba(255,255,255,.4);
  letter-spacing:.16em;
  text-transform:uppercase;
  position:relative;
  z-index:2;
}

@media(max-width:900px){
  .viz-wrap { margin:48px -24px; padding:36px 24px; }
  .diag-split { grid-template-columns:1fr; gap:48px; }
  .founder-quote { margin:64px -24px; padding:56px 32px; }
  .founder-quote::before { font-size:9rem; top:-20px; }
}