:root {
  --paper: #f6f1e7;
  --paper-2: #efe6d5;
  --ink: #221f1a;
  --ink-soft: #6b6157;
  --ink-faint: #948a7c;
  --rule: rgba(34, 31, 26, .15);
  --rule-strong: rgba(34, 31, 26, .28);
  --accent: #a8451f;
  --accent-deep: #7c3113;
  --accent-soft: #f0dcc9;
  --panel: #221f1a;
  --panel-text: #f3ede1;
  --serif: "Fraunces", serif;
  --sans: "IBM Plex Sans", sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --rail-w: 248px;
  /* Width tiers. Reading comfort is governed by characters per line, so
     display type legitimately runs wider than prose at the same pixel cap. */
  --measure: 700px;        /* structural blocks: card rows, lists, section heads */
  --measure-text: 620px;   /* running prose */
  --measure-head: 820px;   /* display headings */
  --measure-wide: 1040px;  /* full-width artifacts */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.notecard-primary :focus-visible,
.triage :focus-visible,
footer :focus-visible { outline-color: var(--accent-soft); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.6; }
a { color: inherit; }
h1, h2, h3, p, dl, ol, ul, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ---------- Header / rail ---------- */
.header {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: var(--rail-w);
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem 1.75rem 2rem 2rem;
  border-right: 1px solid var(--rule);
  background: var(--paper);
}
.logo { display: block; color: var(--ink); font-family: var(--serif); font-weight: 500; font-size: 1.15rem; letter-spacing: -.01em; text-decoration: none; }
.menu { display: none; }
#nav { display: flex; flex-direction: column; gap: .1rem; margin-top: 3rem; flex: 1; }
#nav a {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .55rem 0;
  color: var(--ink-soft);
  font-size: .87rem;
  font-weight: 500;
  text-decoration: none;
  border-top: 1px solid var(--rule);
}
#nav .nav-section-label + a { border-top: 0; }
#nav a em { font: 500 .68rem/1 var(--mono); font-style: normal; color: var(--ink-faint); }
#nav a:hover { color: var(--ink); }
.nav-section-label {
  margin: 0 0 .3rem;
  padding-top: .4rem;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 700;
}
.nav-section-label-secondary { margin-top: 1.6rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.nav-button, .primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  padding: .9rem 1.15rem;
  font: 600 .82rem var(--sans);
  text-decoration: none;
  cursor: pointer;
  border-radius: 3px;
}
.nav-button { width: 100%; margin-top: 2rem; background: var(--accent); }
.nav-button:hover, .primary:hover { background: var(--accent-deep); }
.primary span { font-size: 1.05rem; }
.nav-alt { margin-top: .9rem; text-align: center; color: var(--ink-faint); font-size: .74rem; }
.nav-alt .line-link { font-size: .74rem; }

/* ---------- Layout ---------- */
main, footer { margin-left: var(--rail-w); }
.tract, .hero, .final { padding: clamp(3.5rem, 7vw, 6rem) clamp(1.75rem, 5vw, 4.5rem); border-bottom: 1px solid var(--rule); }
.tract-head { max-width: var(--measure); }
.tag {
  display: inline-block;
  margin-bottom: 1.4rem;
  color: var(--accent-deep);
  font: 600 .72rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tract-head h2, .final h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  max-width: var(--measure-head);
}
.tract-intro { max-width: var(--measure-text); margin-top: 1.1rem; color: var(--ink-soft); font-size: 1rem; }

/* ---------- Hero ---------- */
.hero { border-bottom: 1px solid var(--rule); }
.hero-copy { min-width: 0; }

/* Four-node engagement flow: the sequence a client actually moves through.
   Left to right on desktop, stacked on narrow screens. Order carries real
   information here, each step gates the next. */
.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.1rem;
  margin-top: 2.4rem;
  max-width: var(--measure-head);
}
.flow-node {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.05rem 1.1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
}
.flow-node:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -1.45rem;
  transform: translateY(-50%);
  color: var(--ink-faint);
  font-size: 1rem;
  line-height: 1;
}
.flow-when {
  font: 600 .6rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.flow-name { margin-top: auto; font-family: var(--serif); font-weight: 500; font-size: 1.05rem; line-height: 1.2; }
.flow-start { border-color: var(--accent); background: var(--accent-soft); }
.flow-start .flow-when { color: var(--accent-deep); }
.flow-free { background: var(--panel); border-color: var(--panel); color: var(--panel-text); }
.flow-free .flow-when { color: rgba(243, 237, 225, .6); }
.flow-paid { background: var(--accent); border-color: var(--accent); color: #fff; }
.flow-paid .flow-when { color: rgba(255, 255, 255, .78); }
.flow-end { background: var(--paper-2); }

/* Triage artifact: the narrowing the assessment actually performs.
   Each stage is tagged to the step of the engagement it happens in,
   and gets more concrete as it narrows. Indentation carries the
   funnel, so it survives greyscale and small screens. */
.triage {
  min-width: 0;
  margin: 2rem 0 0;
  max-width: var(--measure);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--panel);
  color: var(--panel-text);
  border-radius: 3px;
}
.triage-cap {
  margin-bottom: 1.5rem;
  color: var(--accent-soft);
  font: 600 .66rem var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.triage-row { padding: 1rem 0; border-top: 1px solid rgba(243, 237, 225, .18); }
.triage-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .35rem;
}
.triage-label {
  color: rgba(243, 237, 225, .95);
  font-size: .88rem;
  font-weight: 600;
}
.triage-when {
  color: rgba(243, 237, 225, .5);
  font: 600 .6rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.triage-val { color: rgba(243, 237, 225, .72); font-size: .87rem; line-height: 1.5; }
.triage-mid { margin-left: clamp(.75rem, 1.6vw, 1.5rem); }
.triage-focus {
  position: relative;
  margin-left: clamp(1.5rem, 3.2vw, 3rem);
  border-top-color: var(--accent-soft);
}
.triage-focus::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(.75rem, 1.6vw, 1.5rem));
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: var(--accent-soft);
}
.triage-focus .triage-when { color: var(--accent-soft); }
.triage-focus .triage-val { color: rgba(243, 237, 225, .92); }
.triage-note {
  margin-top: 1.4rem;
  color: rgba(243, 237, 225, .55);
  font-size: .82rem;
  line-height: 1.5;
}

/* The flow is a sequence, so it stays one row or one column, never a grid.
   Wrapping it into 2x2 would break the reading order and the arrows. */
@media (max-width: 820px) {
  .flow { grid-template-columns: 1fr; gap: 1.9rem; }
  .flow-node:not(:last-child)::after {
    content: "↓";
    top: auto;
    right: auto;
    bottom: -1.5rem;
    left: 1.1rem;
    transform: none;
  }
}

@media (max-width: 520px) {
  .triage-head { flex-direction: column; align-items: flex-start; gap: .15rem; }
}
.kicker {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--accent-deep);
  font: 600 .72rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 5.2vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  max-width: var(--measure-head);
}
.lede { max-width: var(--measure-text); margin-top: 1.6rem; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.65; color: var(--ink-soft); }
.offer-name { max-width: var(--measure-text); margin-top: 1rem; color: var(--ink-soft); font-size: .92rem; }
.offer-name strong { color: var(--ink); font-weight: 600; }
.actions { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; margin-top: 2.2rem; }
.quiet, .line-link { border: 0; background: none; padding: 0; color: var(--ink); font: 600 .85rem var(--sans); text-decoration: none; cursor: pointer; }
.quiet span, .line-link span { margin-left: .55rem; color: var(--accent); }

/* ---------- Findings list ---------- */
.findings { margin-top: 2.75rem; max-width: var(--measure); border-top: 1px solid var(--rule); }
.findings li { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
.findings span { color: var(--accent-deep); font: 600 .78rem var(--mono); padding-top: .15rem; }
.findings h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
.findings p { margin-top: .4rem; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }

.marginal {
  max-width: var(--measure-text);
  margin-top: 3rem;
  padding-left: 1.5rem;
  border-left: 3px solid var(--accent);
}
.marginal p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.4;
  letter-spacing: -.005em;
}

/* ---------- Notecards (opportunities / outcomes / resources) ---------- */
.card-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.75rem; max-width: var(--measure); }
.notecard {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.6rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
}
.notecard-top { display: flex; justify-content: space-between; margin-bottom: 1.4rem; color: var(--accent-deep); font: 600 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.notecard h3 { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; line-height: 1.2; }
.notecard > p { margin-top: .85rem; color: var(--ink-soft); font-size: .88rem; line-height: 1.55; }
.notecard .useful { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.notecard .useful b { font: 600 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); }
.notecard ul { margin-top: .8rem; display: grid; gap: .55rem; }
.notecard ul li { position: relative; padding-left: 1.1rem; color: var(--ink-soft); font-size: .84rem; line-height: 1.4; }
.notecard ul li::before { content: "\2013"; position: absolute; left: 0; color: var(--ink-faint); }
.notecard .line-link { margin-top: 1.4rem; }

.notecard-action { text-align: left; cursor: pointer; }
.notecard-action small { font: 600 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); }
.notecard-action h3 { margin-top: 1.6rem; }
.notecard-action p { margin-top: .7rem; }
.notecard-action .cta-line { margin-top: 1.4rem; display: block; font-size: .84rem; font-weight: 600; }
.notecard-action:hover { background: var(--paper-2); }

.eyebrow { display: block; margin-bottom: .8rem; color: var(--accent-deep); font: 600 .66rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.notecard-primary { background: var(--ink); border-color: var(--ink); }
.notecard-primary .eyebrow { color: #e4a487; }
.notecard-primary h3, .notecard-primary p { color: var(--panel-text); }
.notecard-primary .line-link { margin-top: 1.4rem; color: #e4a487; font-size: 1rem; }
.notecard-primary .line-link span { color: #e4a487; }

/* ---------- Selected work (case studies): proof, not a testimonial card ---------- */
/* Sizes to however many case studies actually exist, instead of a fixed
   3-column grid leaving empty columns when there's only one entry. */
.work-row { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); max-width: var(--measure); }
.work-head { margin-top: 3rem; }
.work-label { color: var(--accent-deep); font: 600 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.case-card { border-top: 3px solid var(--accent); }
.case-card .notecard-top span:first-child { color: var(--accent-deep); }
.case-card .notecard-top span:last-child { color: var(--ink-faint); font-weight: 500; }
.case-card h3 { font-size: 1.35rem; }
.notecard ul.case-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.3rem; }
.notecard ul.case-tags li { padding: .35rem .65rem; background: var(--paper-2); border-radius: 3px; color: var(--ink-soft); font-size: .74rem; font-weight: 500; }
.notecard ul.case-tags li::before { content: none; }
.case-card .line-link { margin-top: 1.4rem; display: inline-block; }

/* ---------- Ladder rail (echoes the page nav's own numbered-rail device) ---------- */
.rail-track { position: relative; display: flex; flex-direction: column; gap: 1.35rem; margin-top: 2rem; max-width: var(--measure); }
.rail-track::before { content: ""; position: absolute; left: 19px; top: 6px; bottom: 6px; width: 1px; background: var(--rule-strong); }
.rail-step { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 1.3rem; align-items: start; }
.rail-marker { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 4px; }
.rail-marker span { font: 600 .68rem var(--mono); color: var(--ink-soft); }
.rail-step-featured .rail-marker { background: var(--accent); border-color: var(--accent); }
.rail-step-featured .rail-marker span { color: var(--paper); }
.rail-body { position: relative; z-index: 1; padding: .2rem 0; }
.rail-body small { display: block; margin-bottom: .5rem; color: var(--ink-faint); font: 600 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.rail-step-featured .rail-body small { color: var(--accent-deep); }
.rail-body h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -.01em; }
.rail-body p { margin-top: .45rem; max-width: var(--measure-text); color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }
.rail-step-featured::before { content: ""; position: absolute; z-index: 0; inset: -.9rem -1.2rem; background: var(--accent-soft); border-radius: 6px; }

.rail-split { position: relative; margin: 1.5rem 0 1.25rem; max-width: var(--measure); text-align: center; }
.rail-split::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule); }
.rail-split span { position: relative; padding: 0 .9rem; background: var(--paper); color: var(--ink-faint); font: 600 .64rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.card-row-outcomes { grid-template-columns: repeat(2, 1fr); max-width: var(--measure); }
.tier-note { margin-top: 1.5rem; color: var(--ink-faint); font-size: .85rem; }
.marginal-note { max-width: var(--measure-text); margin-top: 2.75rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.marginal-note p { color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }
.marginal-note .line-link { margin-top: 1rem; }

/* ---------- Credentials ---------- */
.cred-list { margin-top: 2.75rem; max-width: var(--measure); border-top: 1px solid var(--rule); }
.cred-list article { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.cred-list span { font: 600 .78rem var(--mono); color: var(--ink); }
.cred-list p { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }
.profile-links { display: flex; flex-direction: column; gap: .85rem; margin-top: 2rem; }
.profile-link { display: inline-block; color: var(--ink); font-size: .85rem; font-weight: 600; text-decoration: none; }
.profile-link span { margin-left: .5rem; color: var(--accent); }

/* ---------- Final CTA: the one deliberate inversion ---------- */
.final { background: var(--panel); color: var(--panel-text); text-align: center; border-bottom: 0; }
.final .tag { color: #e4a487; }
.final h2 { margin: 0 auto 2.2rem; max-width: var(--measure-text); }
.final .primary { background: var(--accent); }
.final .primary:hover { background: #c25a2e; }

footer {
  padding: 1.75rem clamp(1.75rem, 5vw, 4.5rem);
  background: var(--panel);
  color: var(--ink-faint);
  font-size: .78rem;
}
.footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
footer .logo { color: var(--panel-text); font-size: 1rem; }
.footer-email { color: var(--panel-text); text-decoration: none; }
.footer-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(243, 237, 225, .16);
}
.footer-links a { color: var(--ink-faint); text-decoration: none; }
.footer-links a:hover { color: var(--panel-text); }

/* ---------- Dialogs ---------- */
dialog { border: 0; padding: 0; max-width: min(94vw, 660px); background: transparent; }
dialog::backdrop { background: rgba(20, 17, 13, .78); backdrop-filter: blur(4px); }
dialog[open] { animation: rise .2s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
dialog { background: var(--paper); color: var(--ink); padding: clamp(2rem, 5vw, 3.5rem); border-radius: 4px; }
dialog h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -.01em; line-height: 1.15; margin-top: .7rem; }
dialog > * { position: relative; }
.close { position: absolute; top: .6rem; right: .6rem; border: 0; background: none; color: var(--ink); font-size: 1.9rem; cursor: pointer; line-height: 1; z-index: 2; }
.dialog-copy { max-width: var(--measure-text); margin-top: 1.2rem; color: var(--ink-soft); }
.dialog-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 2rem 0; }
.dialog-columns p { font-size: .82rem; line-height: 1.8; border-top: 1px solid var(--rule); padding-top: .8rem; color: var(--ink-soft); }
.dialog-columns b { color: var(--ink); }
.dialog-alt { margin-top: 1.1rem; color: var(--ink-faint); font-size: .8rem; }
.dialog-alt .line-link { font-size: .8rem; }
.quiz form { margin-top: 1.8rem; }
.quiz fieldset { border: 0; padding: 0; margin: 0 0 1.6rem; }
.quiz legend { font-size: .98rem; font-weight: 600; margin-bottom: .6rem; }
.quiz label { display: block; padding: .4rem 0; font-size: .85rem; color: var(--ink-soft); cursor: pointer; }
.quiz input { accent-color: var(--accent); margin-right: .5rem; }
.result { margin-top: 1.8rem; padding: 1.3rem 1.4rem; background: var(--accent-soft); border-radius: 4px; }
.result h3 { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; letter-spacing: -.01em; margin-bottom: .5rem; }
.result p { color: var(--ink-soft); font-size: .86rem; line-height: 1.55; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .header {
    position: sticky;
    left: auto;
    top: 0;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 1.1rem clamp(1.25rem, 4vw, 2rem);
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    background: rgba(246, 241, 231, .95);
    backdrop-filter: blur(10px);
  }
  .menu { display: block; border: 0; background: none; font: 600 .8rem var(--sans); color: var(--ink); cursor: pointer; }
  #nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    padding: 1rem clamp(1.25rem, 4vw, 2rem) 1.5rem;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  #nav.open { display: flex; }
  #nav a { border-top: 1px solid var(--rule); }
  main, footer { margin-left: 0; }
  .card-row { grid-template-columns: repeat(2, 1fr); }
  .cred-list article { grid-template-columns: 1fr; gap: .5rem; }
}

@media (max-width: 700px) {
  .card-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .rail-step { grid-template-columns: 32px 1fr; gap: 1rem; }
  .rail-track::before { left: 15px; }
  .rail-marker { width: 32px; height: 32px; }
  .rail-step-featured::before { inset: -.7rem -.75rem; }
  .findings li { grid-template-columns: 32px 1fr; }
  .dialog-columns { grid-template-columns: 1fr; gap: .5rem; }
}