:root{
  --navy:#1f2933;
  --navy-2:#262f3a;
  --navy-3:#2c3742;
  --orange:#af733f;
  --orange-bright:#c98f57;
  --cream:#eae5df;
  --paper:#fdfdfb;
  --ink:#20262c;
  --body-gray:#5b5850;
  --gold:#c9a877;
  --line-light:rgba(32,38,44,0.13);
  --line-light-bright:rgba(32,38,44,0.3);
  --line-dark:rgba(250,248,242,0.14);
  --line-dark-bright:rgba(250,248,242,0.35);
  --text-on-navy:#f2efe7;
  --text-dim-navy:#9aa2ab;
  --ease:cubic-bezier(.2,.7,.2,1);
  --maxw:1180px;
  --serif:'Source Serif 4', Georgia, serif;
  --sans:'Inter', -apple-system, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }
body{ background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3,.serif{ font-family:var(--serif); font-weight:700; letter-spacing:-0.01em; }
em{ font-style:italic; font-family:var(--serif); font-weight:400; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--orange); color:#fff; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,28px); }

.on-navy{ background:var(--navy); color:var(--text-on-navy); }
.on-paper{ background:var(--paper); color:var(--ink); }
.on-navy h1,.on-navy h2,.on-navy h3{ color:var(--text-on-navy); }
.on-paper h1,.on-paper h2,.on-paper h3{ color:var(--ink); }
.eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; display:inline-flex; align-items:center; gap:9px; }
.on-navy .eyebrow{ color:var(--gold); }
.on-paper .eyebrow{ color:var(--orange); }
.eyebrow .idx{ opacity:0.6; font-weight:600; }
.section-num{ font-size:11px; font-weight:600; letter-spacing:0.1em; opacity:0.5; margin-bottom:6px; }

/* ---------- nav ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:100; background:var(--navy); border-bottom:1px solid var(--line-dark); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.wordmark{ font-family:var(--serif); font-weight:700; font-size:16px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-on-navy); }
.nav-links{ display:flex; gap:30px; }
.nav-links a{ font-size:13px; color:var(--text-dim-navy); font-weight:500; transition:color .2s; }
.nav-links a:hover{ color:var(--text-on-navy); }
@media (max-width:900px){ .nav-links{ display:none; } }
.btn{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; padding:12px 20px; border-radius:2px; border:1px solid var(--orange); background:var(--orange); color:#fff; transition:all .25s var(--ease); white-space:nowrap; }
.btn:hover{ background:var(--orange-bright); border-color:var(--orange-bright); }
.btn .arrow{ transition:transform .2s var(--ease); }
.btn:hover .arrow{ transform:translateX(3px); }
.btn-ghost{ background:transparent; border-color:var(--line-dark-bright); color:var(--text-on-navy); }
.btn-ghost:hover{ background:var(--line-dark); }
.on-paper .btn-ghost{ border-color:var(--line-light-bright); color:var(--ink); }
.on-paper .btn-ghost:hover{ background:var(--line-light); }
.burger{ display:none; width:36px; height:36px; border:1px solid var(--line-dark-bright); align-items:center; justify-content:center; background:transparent; }
.burger span,.burger span::before,.burger span::after{ content:''; display:block; width:15px; height:1px; background:var(--text-on-navy); position:relative; }
.burger span::before{ position:absolute; top:-5px; } .burger span::after{ position:absolute; top:5px; }
@media (max-width:900px){ .burger{ display:flex; } .nav-cta-d{ display:none; } }
.mobile-menu{ position:fixed; inset:0; z-index:150; background:var(--navy); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.mobile-menu.open{ opacity:1; pointer-events:all; }
.mobile-menu a{ font-family:var(--serif); font-size:22px; color:var(--text-on-navy); }
.mobile-close{ position:absolute; top:24px; right:24px; width:38px; height:38px; border:1px solid var(--line-dark-bright); display:flex; align-items:center; justify-content:center; color:var(--text-on-navy); }

/* ---------- hero ---------- */
.hero{ position:relative; padding:150px 0 90px; overflow:hidden; }
.hero-rings{ position:absolute; top:-120px; right:-160px; width:640px; height:640px; pointer-events:none; opacity:0.5; }
.hero-rings svg{ width:100%; height:100%; }
.hero-inner{ position:relative; z-index:2; max-width:780px; }
h1.hero-h{ font-size:clamp(30px,5vw,52px); line-height:1.22; margin:20px 0 22px; font-weight:700; }
.hero-sub{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(16px,1.6vw,19px); color:var(--text-dim-navy); max-width:600px; line-height:1.55; }
.hero-ctas{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
@media (max-width:480px){ .hero-ctas{ flex-direction:column; align-items:stretch; } .hero-ctas .btn{ justify-content:center; } }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

section{ padding:clamp(64px,9vw,110px) 0; }
.section-head{ max-width:640px; margin-bottom:44px; }
h2.section-title{ font-size:clamp(24px,3.2vw,36px); line-height:1.2; margin:14px 0 10px; }
.section-cap{ font-family:var(--serif); font-style:italic; font-size:15.5px; color:var(--body-gray); max-width:560px; }
.on-navy .section-cap{ color:var(--text-dim-navy); }
.rule{ height:1px; background:var(--line-light); }
.on-navy .rule{ background:var(--line-dark); }

.tag{ display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:4px 9px; border:1px solid var(--line-light-bright); color:var(--body-gray); }
.on-navy .tag{ border-color:var(--line-dark-bright); color:var(--text-dim-navy); }

/* ---------- problem: converge diagram ---------- */
.converge-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px; }
@media (max-width:760px){ .converge-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .converge-grid{ grid-template-columns:1fr; } }
.converge-cell{ border:1px solid var(--line-light); padding:18px 20px; background:var(--paper); }
.converge-cell .fn{ font-size:13px; font-weight:700; margin-bottom:4px; }
.converge-cell .sees{ font-size:12.5px; color:var(--body-gray); }
.converge-arrow{ display:flex; justify-content:center; margin:6px 0; color:var(--body-gray); opacity:0.5; font-size:20px; }
.converge-answer{ border:1px solid var(--orange); background:var(--orange); color:#fff; text-align:center; padding:20px; font-family:var(--serif); font-weight:700; font-size:17px; }

/* ---------- revenue tree ---------- */
.tree-root{ text-align:center; border:1px solid var(--line-dark-bright); background:var(--navy-2); padding:16px 22px; font-family:var(--serif); font-weight:700; font-size:16px; max-width:520px; margin:0 auto 30px; }
.tree-root .sub{ font-family:var(--sans); font-weight:400; font-size:12.5px; color:var(--text-dim-navy); margin-top:6px; }
.tree-branches{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media (max-width:700px){ .tree-branches{ grid-template-columns:1fr; gap:30px; } }
.branch-label{ font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; text-align:center; }
.chain{ display:flex; flex-direction:column; gap:0; }
.chain-step{ border:1px solid var(--line-dark); background:var(--navy-3); padding:11px 14px; font-size:13px; text-align:center; }
.chain-arrow{ display:flex; justify-content:center; color:var(--text-dim-navy); font-size:13px; padding:3px 0; opacity:0.6; }

/* ---------- waterfall ---------- */
.waterfall{ margin-top:8px; }
.wf-row{ display:grid; grid-template-columns:140px 1fr auto 1fr; gap:14px; align-items:center; padding:13px 0; }
.wf-label{ font-size:13.5px; font-weight:700; }
.wf-bar-track{ position:relative; height:34px; }
.wf-bar{ height:100%; background:var(--cream); display:flex; align-items:center; }
.wf-bar.final{ background:var(--orange); }
.wf-val{ font-size:13px; font-weight:700; padding-left:12px; white-space:nowrap; }
.wf-bar.final .wf-val{ color:#fff; }
.wf-loss{ font-family:var(--serif); font-style:italic; font-size:12.5px; color:var(--body-gray); text-align:right; white-space:nowrap; }
@media (max-width:640px){
  .wf-row{ grid-template-columns:1fr; gap:4px; }
  .wf-loss{ text-align:left; }
}

/* ---------- monetisation stat trio ---------- */
.mstat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); }
@media (max-width:700px){ .mstat-grid{ grid-template-columns:1fr; } }
.mstat{ background:var(--navy); padding:28px 24px; text-align:center; }
.mstat .ml{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim-navy); margin-bottom:12px; }
.mstat .mv{ font-family:var(--serif); font-size:32px; font-weight:700; }
.mstat .ms{ font-size:12px; color:var(--text-dim-navy); margin-top:6px; }
.mstat.hi .mv{ color:var(--orange-bright); }

/* ---------- retention curve ---------- */
.retention-wrap{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; }
@media (max-width:820px){ .retention-wrap{ grid-template-columns:1fr; gap:30px; } }
.curve-box{ border:1px solid var(--line-light); padding:20px; }
.curve-box svg{ width:100%; height:auto; display:block; }
.recover-stats{ display:flex; flex-direction:column; gap:0; }
.rstat{ padding:16px 0; border-top:1px solid var(--line-light); display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.rstat:last-child{ border-bottom:1px solid var(--line-light); }
.rstat .rl{ font-size:13px; color:var(--body-gray); }
.rstat .rv{ font-family:var(--serif); font-weight:700; font-size:19px; white-space:nowrap; }
.rstat.total .rv{ color:var(--orange); font-size:24px; }

/* ---------- opportunity matrix ---------- */
.matrix-wrap{ display:grid; grid-template-columns:auto 1fr; gap:8px; max-width:640px; }
.matrix-axis-y{ display:flex; flex-direction:column; justify-content:space-around; }
.matrix-axis-y span{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim-navy); text-align:center; }
.matrix-grid{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:10px; }
.matrix-cell{ border:1px solid var(--line-dark-bright); padding:20px; min-height:110px; display:flex; flex-direction:column; justify-content:space-between; }
.matrix-cell .mc-t{ font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-dim-navy); }
.matrix-cell .mc-h{ font-family:var(--serif); font-weight:700; font-size:16.5px; margin-top:8px; }
.matrix-cell.hi{ background:var(--orange); border-color:var(--orange); }
.matrix-cell.hi .mc-t{ color:rgba(255,255,255,0.75); }
.matrix-x-labels{ display:grid; grid-template-columns:1fr 1fr; margin-top:8px; }
.matrix-x-labels span{ font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim-navy); text-align:center; }
@media (max-width:560px){ .matrix-cell{ min-height:90px; padding:14px; } .matrix-cell .mc-h{ font-size:14px; } }

/* ---------- method row ---------- */
.method-row{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light); }
@media (max-width:900px){ .method-row{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .method-row{ grid-template-columns:repeat(2,1fr); } }
.method-cell{ background:var(--paper); padding:22px 16px; }
.method-cell .mn{ font-family:var(--serif); font-weight:700; font-size:20px; color:var(--orange); }
.method-cell h4{ font-size:14px; margin:10px 0 6px; font-weight:700; }
.method-cell p{ font-size:12px; color:var(--body-gray); line-height:1.5; }

/* ---------- differentiation ---------- */
.diff-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
@media (max-width:640px){ .diff-row{ grid-template-columns:1fr; } }
.diff-block{ padding:22px 24px; }
.diff-block.generic{ background:var(--navy-2); }
.diff-block.eldranis{ background:var(--orange); color:#fff; }
.diff-block .dl{ font-size:10.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; opacity:0.7; margin-bottom:10px; }
.diff-block p{ font-family:var(--serif); font-style:italic; font-size:15px; line-height:1.5; }
.diff-block.eldranis p{ font-style:normal; font-weight:700; }
.diff-block.generic p{ color:var(--text-dim-navy); }

/* ---------- exec dashboard ---------- */
.dash-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); }
@media (max-width:820px){ .dash-grid{ grid-template-columns:repeat(2,1fr); } }
.dash-cell{ background:var(--navy); padding:22px 18px; }
.dash-cell .dl{ font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-dim-navy); margin-bottom:10px; }
.dash-cell .dv{ font-family:var(--serif); font-weight:700; font-size:24px; }
.dash-cell .dv.pos{ color:var(--orange-bright); }

/* ---------- audience / trust condensed ---------- */
.aud-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:700px){ .aud-row{ grid-template-columns:1fr; } }
.aud-cell{ border-left:2px solid var(--orange); padding-left:16px; }
.aud-cell h4{ font-size:15px; margin-bottom:6px; }
.aud-cell p{ font-size:13px; color:var(--body-gray); line-height:1.5; }
.new-note{ margin-top:36px; display:flex; gap:12px; align-items:flex-start; padding-top:24px; border-top:1px solid var(--line-light); }
.new-note p{ font-size:13px; color:var(--body-gray); line-height:1.6; max-width:640px; }

/* ---------- final cta ---------- */
.final-cta{ text-align:center; }
.final-cta h2{ font-size:clamp(26px,4vw,44px); max-width:720px; margin:0 auto 14px; }
.final-cta .sup{ font-family:var(--serif); font-style:italic; color:var(--text-dim-navy); font-size:16px; margin-bottom:30px; }
.final-cta .fine{ margin-top:20px; font-size:12px; color:var(--text-dim-navy); }

/* ---------- footer ---------- */
/* ---------- shared: page-link cards (About / How We Work cross-links) ---------- */
.pagelink-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:700px){ .pagelink-row{ grid-template-columns:1fr; } }
.pagelink-card{ border:1px solid var(--line-light-bright); padding:26px 26px; display:block; transition:all .25s var(--ease); }
.on-navy .pagelink-card{ border-color:var(--line-dark-bright); }
.pagelink-card:hover{ background:var(--orange); border-color:var(--orange); }
.pagelink-card:hover *{ color:#fff !important; }
.pagelink-card .pl-eyebrow{ font-size:10.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--orange); margin-bottom:8px; }
.pagelink-card h4{ font-family:var(--serif); font-size:19px; margin-bottom:8px; }
.pagelink-card p{ font-size:13.5px; color:var(--body-gray); }
.on-navy .pagelink-card p{ color:var(--text-dim-navy); }
.pagelink-card .pl-arrow{ margin-top:14px; font-weight:700; font-size:13px; }

/* ---------- shared: simple flow row (operating model) ---------- */
.flow-row{ display:flex; align-items:center; flex-wrap:wrap; gap:0; }
.flow-step{ border:1px solid var(--line-dark-bright); background:var(--navy-2); padding:12px 16px; font-size:12.5px; text-align:center; white-space:nowrap; }
.flow-step.client{ background:var(--orange); border-color:var(--orange); color:#fff; font-weight:700; }
.flow-arrow{ padding:0 8px; color:var(--text-dim-navy); font-size:14px; }
@media (max-width:760px){ .flow-row{ flex-direction:column; align-items:stretch; } .flow-arrow{ text-align:center; padding:4px 0; transform:rotate(90deg); } }

/* ---------- shared: scope grid ---------- */
.scope-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light); }
@media (max-width:760px){ .scope-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .scope-grid{ grid-template-columns:1fr; } }
.scope-cell{ background:var(--paper); padding:22px 20px; }
.scope-cell .sc-n{ font-family:var(--serif); font-weight:700; color:var(--orange); font-size:13px; }
.scope-cell h4{ font-size:15px; margin:8px 0 6px; }
.scope-cell p{ font-size:12.5px; color:var(--body-gray); line-height:1.5; }

/* ---------- shared: depth-of-analysis ladder ---------- */
.ladder{ display:flex; flex-direction:column; gap:0; max-width:720px; }
.ladder-row{ display:grid; grid-template-columns:200px 1fr; gap:20px; padding:16px 0; border-top:1px solid var(--line-dark); align-items:baseline; }
.ladder-row:last-child{ border-bottom:1px solid var(--line-dark); }
.ladder-row .ll{ font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold); }
.ladder-row p{ font-family:var(--serif); font-style:italic; font-size:14.5px; }
@media (max-width:640px){ .ladder-row{ grid-template-columns:1fr; gap:4px; } }

/* ---------- shared: quadrant (impact vs effort) ---------- */
.quad-wrap{ display:grid; grid-template-columns:auto 1fr; gap:8px; max-width:640px; }
.quad-axis-y{ display:flex; flex-direction:column; justify-content:space-around; }
.quad-axis-y span{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--body-gray); text-align:center; }
.quad-grid{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:10px; }
.quad-cell{ border:1px solid var(--line-light-bright); padding:18px; min-height:100px; }
.quad-cell.hi{ background:var(--orange); border-color:var(--orange); color:#fff; }
.quad-cell .qt{ font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--body-gray); }
.quad-cell.hi .qt{ color:rgba(255,255,255,0.75); }
.quad-cell .qh{ font-family:var(--serif); font-weight:700; font-size:15.5px; margin-top:8px; }
.quad-x-labels{ display:grid; grid-template-columns:1fr 1fr; margin-top:8px; }
.quad-x-labels span{ font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--body-gray); text-align:center; }

/* ---------- shared: symptom chain ---------- */
.symptom-chain{ display:flex; flex-direction:column; max-width:720px; }
.symptom-row{ display:grid; grid-template-columns:170px 1fr; gap:20px; padding:15px 0; border-top:1px solid var(--line-light); }
.symptom-row:last-child{ border-bottom:1px solid var(--line-light); }
.symptom-row .sl{ font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--orange); }
.symptom-row p{ font-size:14px; }
@media (max-width:640px){ .symptom-row{ grid-template-columns:1fr; gap:4px; } }

footer{ padding:50px 0 30px; background:var(--navy); color:var(--text-on-navy); border-top:1px solid var(--line-dark); }
.foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.foot-links{ display:flex; gap:24px; flex-wrap:wrap; }
.foot-links a{ font-size:13px; color:var(--text-dim-navy); }
.foot-links a:hover{ color:var(--text-on-navy); }
.foot-bottom{ margin-top:30px; padding-top:20px; border-top:1px solid var(--line-dark); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:11.5px; color:var(--text-dim-navy); }
