:root {
  --bg: #f7f3eb;
  --bg-soft: #efe9dc;
  --text: #1f1b17;
  --muted: #5f574e;
  --accent: #b5441c;        /* saturated terracotta: text-safe on bg and tint */
  --accent-bright: #d0592b; /* terracotta for borders, numerals, fills */
  --accent-tint: #f9e9df;   /* terracotta wash for pain panels */
  --rule: #ddd3c4;
  --card: #fffdf8;
  --focus: #8a3212;
  --font-head: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 1.0625rem;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-head); color: var(--text); }
a { color: var(--accent); }
a:hover { color: var(--focus); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: 38rem; margin: 0 auto; padding: 0 1.5rem; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--rule);
  box-shadow: 0 6px 16px -12px rgba(31, 27, 23, 0.45);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; }
.logo {
  font-family: var(--font-head);
  font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em;
  color: var(--text); text-decoration: none;
}
.logo:hover { color: var(--accent); }
.site-nav { display: flex; align-items: center; gap: 1.05rem; }
.site-nav a { color: var(--muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent); }
.site-nav .nav-cta {
  background: var(--accent); color: #fff; font-weight: 700;
  padding: 0.38rem 0.8rem; border-radius: 5px; line-height: 1.2;
}
.site-nav .nav-cta:hover { background: var(--focus); color: #fff; }
.nav-toggle { display: none; }
/* Keep anchor targets clear of the sticky bar */
html { scroll-padding-top: 4.5rem; }
section[id], main[id], [id$="-heading"] { scroll-margin-top: 4.5rem; }

/* Hero */
.hero { padding: 4.25rem 0 3.25rem; }
.hero h1 {
  font-size: clamp(2.3rem, 6vw, 3.1rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; margin-bottom: 1rem;
}
.hero-sub { color: var(--text); font-size: 1.1rem; }
.hero-pitch {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 3vw, 1.55rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-top: 1.75rem;
  padding-left: 1rem;
  border-left: 5px solid var(--accent-bright);
  color: var(--text);
}

/* Sections */
section { padding: 3rem 0; border-top: 1px solid var(--rule); }
section h2 {
  font-size: clamp(1.5rem, 3.4vw, 1.8rem);
  font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 1.15rem;
}
.prose p { margin-bottom: 1rem; }
.prose p:last-child { margin-bottom: 0; }
.turn {
  font-weight: 600; font-size: 1.08rem; color: var(--text);
  border-left: 4px solid var(--accent-bright); padding-left: 1rem; margin-top: 1.5rem; line-height: 1.5;
}
.bio { margin-bottom: 0; }

/* Software-purchase lead */
.lead-idea h2 {
  font-size: clamp(1.7rem, 4.2vw, 2.15rem);
  line-height: 1.15;
  margin-bottom: 1.35rem;
}
.lead-text { font-size: 1.15rem; font-weight: 400; line-height: 1.6; color: var(--text); margin-bottom: 1.1rem; }
.lead-text.lead-strong { font-weight: 600; }
.lead-pull {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.2vw, 1.55rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--accent);
  margin: 0 0 1.1rem;
}
.lead-close { font-size: 1.08rem; color: var(--text); line-height: 1.6; }

/* Figures (shared frame) */
.hero-figure,
.problem-figure,
.section-figure,
.pain-figure,
.method-figure {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}
.hero-figure { margin-top: 1.75rem; width: 100%; }
.section-figure { margin: 0.25rem 0 1.35rem; width: 100%; }
.pain-figure { margin: 0 0 1.1rem; width: 100%; }
.hero-figure picture,
.problem-figure picture,
.section-figure picture,
.pain-figure picture,
.method-figure picture {
  display: block; width: 100%; margin: 0; padding: 0; overflow: hidden; line-height: 0;
}
.hero-figure img,
.problem-figure img,
.section-figure img,
.pain-figure img,
.method-figure img {
  display: block; width: 100%; max-width: 100%; height: auto;
  margin: 0; padding: 0; border: 0; vertical-align: top;
}

/* Pain panels */
.section-label {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin-bottom: 1.5rem !important;
}
.pain {
  background: var(--accent-tint);
  border-left: 8px solid var(--accent-bright);
  border-radius: 4px 8px 8px 4px;
  padding: 1.6rem 1.5rem 1.5rem;
  margin-bottom: 1.5rem;
}
.pain-num {
  font-family: var(--font-head);
  font-weight: 700; font-size: 2.4rem; line-height: 1;
  letter-spacing: -0.01em;
  color: var(--accent-bright);
  margin-bottom: 0.4rem;
}
.pain-headline {
  font-size: clamp(1.6rem, 4.2vw, 2.05rem);
  font-weight: 700; line-height: 1.12; letter-spacing: -0.01em;
  margin-bottom: 1.1rem;
}
.pain-lines { list-style: none; margin: 0 0 1.15rem; display: grid; gap: 0.55rem; }
.pain-lines li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 1.1rem; font-weight: 600; line-height: 1.4; color: var(--text);
}
.pain-lines li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 0.55rem; height: 0.55rem; background: var(--accent-bright); border-radius: 1px;
}
.pain-fix {
  border-top: 2px solid rgba(181, 68, 28, 0.25);
  padding-top: 0.9rem;
  font-size: 1rem; line-height: 1.55; color: var(--text);
}
.pain-fix-label {
  font-weight: 600; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.82rem;
  margin-right: 0.25rem;
}
.pain-cta { margin: 2rem 0 0.5rem; }
.cta-button {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em;
  background: var(--accent); color: #fff; text-decoration: none;
  padding: 0.85rem 1.4rem; border-radius: 6px;
}
.cta-button:hover { background: var(--focus); color: #fff; }
.pitch-block { margin-top: 2.25rem; padding-top: 2rem; border-top: 1px solid var(--rule); }

/* Method */
.method-intro { color: var(--text); margin: -0.35rem 0 2rem; font-size: 1.02rem; }
.method-grid { list-style: none; display: grid; gap: 2.25rem; }
.method-step { display: grid; gap: 1rem; padding-bottom: 2rem; border-bottom: 1px solid var(--rule); }
.method-step:last-child { border-bottom: none; padding-bottom: 0; }
.method-copy { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: 0.85rem; row-gap: 0.2rem; }
.method-copy .step-num { grid-row: 1 / span 4; align-self: start; padding-top: 0.1rem; }
.method-copy .step-label,
.method-copy .step-sub,
.method-copy .step-body { grid-column: 2; margin: 0; }
.step-num { font-family: var(--font-head); color: var(--accent-bright); font-weight: 700; font-size: 1.25rem; }
.step-label { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; margin-bottom: 0.15rem; }
.step-sub { font-weight: 600; font-size: 0.98rem; color: var(--accent); margin: 0 0 0.45rem; grid-column: 2; }
.step-body { color: var(--text); font-size: 1rem; line-height: 1.65; }

/* Insights */
.insights-list { display: grid; gap: 0.85rem; }
.insight-card { background: var(--card); border: 1px solid var(--rule); padding: 1.2rem 1.3rem; border-radius: 4px; }
.insight-tag {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.55rem;
}
.insight-card h3 { font-size: 1.12rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }

/* Contact + footer */
.contact-lead { color: var(--text); margin-bottom: 1.25rem; font-size: 1.05rem; }
.contact-alt { margin: 0.85rem 0 0; font-size: 0.92rem; color: var(--muted); }
.contact-alt a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.contact-alt a:hover { color: var(--accent); }
.site-footer { border-top: 1px solid var(--rule); padding: 2rem 0 2.75rem; color: var(--muted); font-size: 0.88rem; }

@media (max-width: 520px) {
  .wrap { padding: 0 1.25rem; }
  .hero { padding: 3rem 0 2.5rem; }
  section { padding: 2.5rem 0; }
  .method-grid { gap: 1.75rem; }
  .pain { padding: 1.3rem 1.1rem 1.2rem; border-left-width: 6px; }
  .pain-lines li { font-size: 1.04rem; }
  .cta-button { display: block; text-align: center; }
}

/* Insights cards (linked) */
.insight-card--live { padding: 0; border-left: 5px solid var(--accent-bright); }
.insight-link { display: block; padding: 1.2rem 1.3rem; color: var(--text); text-decoration: none; }
.insight-link h3 { color: var(--text); }
.insight-link:hover h3 { color: var(--accent); }
.insight-link:hover { background: var(--accent-tint); }
.insight-link .insight-tag::after { content: " \2192"; }

/* Post pages */
.post { padding: 3rem 0 3.25rem; }
.post-kicker {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.75rem;
}
.post-title {
  font-size: clamp(2rem, 5.2vw, 2.7rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 1rem;
}
.post-dek {
  font-size: 1.15rem; line-height: 1.5; color: var(--text);
  border-left: 5px solid var(--accent-bright); padding-left: 1rem; margin-bottom: 2.25rem;
}
.post-body p { margin-bottom: 1.1rem; }
.post-body h2 {
  font-size: clamp(1.35rem, 3.2vw, 1.6rem);
  font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
  margin: 2.25rem 0 0.85rem;
}
.post-points { list-style: none; display: grid; gap: 0.9rem; margin: 0 0 1.25rem; }
.post-points li { position: relative; padding-left: 1.35rem; }
.post-points li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.55rem; height: 0.55rem; background: var(--accent-bright); border-radius: 1px;
}
.post-points strong { color: var(--text); }
.post-cta {
  margin-top: 2.5rem; padding: 1.5rem;
  background: var(--accent-tint); border-left: 8px solid var(--accent-bright); border-radius: 4px 8px 8px 4px;
}
.post-cta p { font-weight: 600; font-size: 1.1rem; line-height: 1.5; margin-bottom: 1rem; }
.site-footer a { color: var(--muted); }

/* Sales Wheel (John's graphic + numbered roles) */
.wheel-figure { margin: 1.5rem auto 1.5rem; max-width: 32rem; border-radius: 8px; }
.wheel-steps { list-style: none; display: grid; gap: 0.85rem; margin: 0 0 1.5rem; }
.wheel-step {
  display: grid; grid-template-columns: 2rem 1fr; column-gap: 0.75rem; row-gap: 0.1rem;
  font-size: 0.98rem; line-height: 1.5;
}
.wheel-num {
  grid-row: 1 / span 2; font-family: var(--font-head); font-weight: 700; font-size: 1.25rem;
  color: var(--accent-bright); line-height: 1.2;
}
.wheel-role { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--text); }
.wheel-desc { color: var(--text); }

@media (max-width: 520px) {
  .post { padding: 2.25rem 0 2.5rem; }
  .post-cta { padding: 1.25rem 1.1rem; border-left-width: 6px; }
}

/* Example dashboards (v15): illustrations with sample data */
.dash { margin: 1.25rem 0 0; }
.dash-screen {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 24px -14px rgba(31, 27, 23, 0.35);
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.3;
}
.dash-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  background: #2a241f; color: #fffdf8;
  padding: 0.6rem 0.9rem;
}
.dash-title { font-family: var(--font-head); font-weight: 700; font-size: 0.92rem; letter-spacing: -0.005em; }
.dash-pill {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: #f3d9c9; border: 1px solid rgba(243, 217, 201, 0.45); border-radius: 999px;
  padding: 0.12rem 0.55rem; white-space: nowrap;
}
.dash-kpis, .dash-flow {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem;
  padding: 0.8rem 0.8rem 0;
}
.dash-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi {
  display: flex; flex-direction: column; gap: 0.15rem;
  background: var(--bg); border: 1px solid var(--rule); border-radius: 7px;
  padding: 0.5rem 0.6rem; min-width: 0;
}
.kpi-label { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.kpi-val { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; }
.kpi-src { font-size: 0.64rem; color: var(--muted); }
.kpi--flag { background: var(--accent-tint); border-color: rgba(208, 89, 43, 0.45); }
.kpi--flag .kpi-val { color: var(--accent); }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; padding: 0.55rem 0.8rem 0; }
.dash-card { background: #fff; border: 1px solid var(--rule); border-radius: 7px; padding: 0.6rem 0.65rem 0.55rem; min-width: 0; }
.dash-card--table { margin: 0.55rem 0.8rem 0; padding: 0.3rem 0.4rem; overflow: hidden; }
.dash-h { font-size: 0.72rem; font-weight: 700; color: var(--text); margin: 0 0 0.5rem; }
.dash-h--sub { margin-top: 0.7rem; }
.dash-svg { display: block; width: 100%; height: auto; }
.dash-svg .axis { stroke: #b9ad9c; stroke-width: 1; }
.dash-svg .grid { stroke: #ece5d8; stroke-width: 1; stroke-dasharray: 2 2; }
.dash-svg .tick { font: 600 7px var(--font-body); fill: var(--muted); }
.dash-svg .tick-flag { font: 700 7px var(--font-body); fill: var(--accent); }
.dash-svg .ax-lbl { font: 700 7px var(--font-body); fill: var(--text); }
.dash-svg .pt { fill: #2a241f; }
.dash-svg .pt-flag { fill: var(--accent-bright); stroke: #fff; stroke-width: 1.5; }
.dash-svg .pt-lbl { font: 700 8px var(--font-body); fill: var(--text); }
.dash-svg .zone { fill: var(--accent-tint); stroke: rgba(208, 89, 43, 0.5); stroke-dasharray: 3 2; }
.dash-svg .zone-lbl { font: 700 7px var(--font-body); fill: var(--accent); }
.dash-svg .col-rev { fill: #2a241f; }
.dash-svg .col-rev-flag { fill: var(--accent-bright); }
.dash-svg .col-hrs { fill: #cfc3b1; }
.hbar { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) 2.4rem; align-items: center; gap: 0.45rem; margin-bottom: 0.4rem; }
.hbar-label { font-size: 0.72rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-track { height: 0.55rem; background: #efe8dc; border-radius: 999px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; background: #2a241f; border-radius: 999px; }
.hbar-val { font-size: 0.72rem; font-weight: 700; text-align: right; }
.hbar--flag .hbar-fill { background: var(--accent-bright); }
.hbar--flag .hbar-val { color: var(--accent); }
.dash-legend, .stack-key { font-size: 0.68rem; color: var(--muted); margin: 0.35rem 0 0; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.stack-key b { color: var(--text); margin-left: auto; }
.lg { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; }
.lg-rev { background: #2a241f; }
.lg-hrs { background: #cfc3b1; margin-left: 0.5rem; }
.lg-a { background: var(--accent); }
.lg-b { background: #e8a17f; }
.stack { display: flex; height: 0.8rem; border-radius: 999px; overflow: hidden; }
.stack-a { background: var(--accent); }
.stack-b { background: #e8a17f; }
.dash-sources { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.75rem 0.8rem 0; }
.src {
  font-size: 0.68rem; font-weight: 600; color: var(--text);
  background: var(--bg); border: 1px solid var(--rule); border-radius: 999px; padding: 0.15rem 0.6rem 0.15rem 0.5rem;
}
.src::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent-bright); margin-right: 0.35rem; vertical-align: 0.05em; }
.dash-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.74rem; }
.dash-table th { text-align: left; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 0.4rem 0.35rem; border-bottom: 1px solid var(--rule); }
.dash-table td { padding: 0.42rem 0.35rem; border-bottom: 1px solid #f0eadf; overflow-wrap: normal; word-break: normal; }
.dash-table tr:last-child td { border-bottom: 0; }
.dash-table .row-flag td { background: var(--accent-tint); }
.dash-table .row-flag td:last-child { color: var(--accent); font-weight: 700; }
.dash-alert {
  margin: 0.65rem 0.8rem 0.8rem; padding: 0.5rem 0.65rem;
  background: var(--accent-tint); border-left: 4px solid var(--accent-bright); border-radius: 4px;
  font-size: 0.78rem; font-weight: 600; line-height: 1.4;
}
.dash-flag {
  display: inline-block; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: var(--accent); border-radius: 3px; padding: 0.05rem 0.35rem; margin-right: 0.3rem;
}
.dash-caption { font-size: 0.78rem; font-style: italic; color: var(--muted); margin-top: 0.45rem; }

@media (max-width: 520px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-kpis { gap: 0.4rem; padding: 0.7rem 0.65rem 0; }
  .kpi { padding: 0.45rem 0.5rem; }
  .kpi-val { font-size: 1.05rem; }
  .kpi-label { font-size: 0.6rem; }
  .dash-grid, .dash-flow, .dash-sources { padding-left: 0.65rem; padding-right: 0.65rem; }
  .dash-card--table { margin-left: 0.65rem; margin-right: 0.65rem; }
  .dash-alert { margin-left: 0.65rem; margin-right: 0.65rem; }
  .dash-table { font-size: 0.68rem; }
  .dash-table th { font-size: 0.56rem; padding: 0.35rem 0.2rem; }
  .dash-table td { padding: 0.38rem 0.2rem; }
}

/* Logo strip in About (v17, moved into About in v18) */
.logo-strip {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem 1.25rem;
  align-items: center;
  padding: 1.5rem 0;
  margin: 1.4rem 0 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.logo-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem; min-width: 0; min-height: 3.4rem; text-align: center;
}
.logo-item img {
  display: block; width: auto; max-width: 100%;
  height: var(--logo-h, 30px);
  object-fit: contain;
  filter: grayscale(1) brightness(0);
  opacity: 0.6;
}
.logo-item--lm { --logo-h: 24px; }
.logo-item--leidos { --logo-h: 28px; }
.logo-item--schneider { --logo-h: 36px; }
.logo-item--siemens { --logo-h: 21px; }
.logo-item--chevron { --logo-h: 42px; }
.logo-item--jci { --logo-h: 38px; }
.logo-note { font-size: 0.66rem; line-height: 1.25; color: var(--muted); letter-spacing: 0.01em; }
.logo-item--more { grid-column: 1 / -1; min-height: 0; }
.logo-item--more span { font-size: 0.92rem; font-style: italic; color: var(--muted); }
.prose .logo-disclaimer { font-size: 0.78rem; line-height: 1.5; color: var(--muted); margin: 0.9rem 0 1.6rem; }

@media (max-width: 520px) {
  .logo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; padding: 1.25rem 0; }
  .logo-item--lm { --logo-h: 20px; }
  .logo-item--siemens { --logo-h: 18px; }
  .logo-item--leidos { --logo-h: 24px; }
  .logo-item--schneider { --logo-h: 32px; }
  .logo-item--chevron { --logo-h: 38px; }
  .logo-item--jci { --logo-h: 34px; }
}

/* Sticky nav: mobile menu (v19) */
@media (max-width: 640px) {
  .has-js .nav-toggle {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font: 600 0.9rem var(--font-body); color: var(--text);
    background: transparent; border: 1px solid var(--rule); border-radius: 6px;
    padding: 0.45rem 0.7rem; cursor: pointer;
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 16px; height: 2px; background: var(--text); border-radius: 1px;
    position: relative; transition: transform 0.2s ease, background 0.2s ease;
  }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -5px; }
  .nav-toggle-bars::after { top: 5px; }
  .nav-open .nav-toggle-bars { background: transparent; }
  .nav-open .nav-toggle-bars::before { transform: translateY(5px) rotate(45deg); }
  .nav-open .nav-toggle-bars::after { transform: translateY(-5px) rotate(-45deg); }
  .has-js .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--rule);
    box-shadow: 0 10px 18px -14px rgba(31, 27, 23, 0.5);
    padding: 0.25rem 1.25rem 1rem;
  }
  .has-js .nav-open .site-nav { display: flex; }
  .has-js .site-nav a { font-size: 1.02rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); color: var(--text); }
  .has-js .site-nav .nav-cta { margin-top: 0.85rem; text-align: center; border-bottom: 0; padding: 0.75rem 1rem; color: #fff; }
  .site-header .nav-inner { min-height: 3.25rem; }
  html { scroll-padding-top: 4.25rem; }
  section[id], main[id], [id$="-heading"] { scroll-margin-top: 4.25rem; }
}
@media (max-width: 640px) {
  /* no-JS fallback: links wrap under the wordmark */
  html:not(.has-js) .nav-inner { flex-wrap: wrap; padding-top: 0.6rem; padding-bottom: 0.6rem; }
  html:not(.has-js) .site-nav { flex-wrap: wrap; gap: 0.5rem 0.9rem; }
}

/* Insights index + homepage link (v19) */
.insights-more { margin-top: 1rem; font-weight: 600; }
.insights-more a { text-decoration: none; border-bottom: 2px solid var(--accent-bright); }
.insights-more a::after { content: " \2192"; }
.insights-index { padding: 3rem 0 3.25rem; }
.insight-title { font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); margin-bottom: 0.4rem; }
.insight-link:hover .insight-title { color: var(--accent); }
.insight-summary { color: var(--text); font-size: 1rem; line-height: 1.55; }
@media (max-width: 520px) { .insights-index { padding: 2.25rem 0 2.5rem; } }

/* ===== v20: wider desktop layout (960px and up only; mobile untouched) ===== */
@media (min-width: 960px) {
  .wrap { max-width: 74rem; }

  /* Reading width stays as before */
  main p, main .pain-lines, main .prose { max-width: 38rem; }
  main .dash p, main .insight-card p, main .method-step p { max-width: none; }
  section { padding: 3.5rem 0; }

  /* Hero: two columns */
  .hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 3.5rem; align-items: center; padding: 4rem 0 3.5rem;
  }
  .hero > h1, .hero-sub, .hero-pitch { grid-column: 1; }
  .hero > h1 { align-self: end; }
  .hero-sub { align-self: start; }
  .hero-figure { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }

  /* Lead idea: text left, cartoon right */
  .lead-idea {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 3.5rem; align-items: center;
  }
  .lead-idea > h2, .lead-idea > p { grid-column: 1; }
  .lead-idea > .section-figure { grid-column: 2; grid-row: 1 / span 5; margin: 0; }

  /* Problem panels (v21): text left + cartoon right, dashboard full width below */
  .pain {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-areas: "num fig" "head fig" "lines fig" "fix fig" "dash dash";
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: 2.75rem; align-items: start;
    padding: 2.25rem 2.5rem 2.25rem;
    margin-bottom: 1.75rem;
  }
  .pain-num { grid-area: num; }
  .pain-headline { grid-area: head; }
  .pain-lines { grid-area: lines; }
  .pain-fix { grid-area: fix; margin-bottom: 0; }
  .pain-figure { grid-area: fig; margin: 0; align-self: center; }
  .pain .dash { grid-area: dash; margin: 1.75rem 0 0; }
  /* Wide dashboard internals */
  .pain .dash-bar { padding: 0.7rem 1.1rem; }
  .pain .dash-kpis, .pain .dash-flow, .pain .dash-sources { padding-left: 1.1rem; padding-right: 1.1rem; }
  .pain .dash-kpis { gap: 0.75rem; padding-top: 1rem; }
  .pain .dash-flow { gap: 0.75rem; }
  .pain .kpi { flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap; padding: 0.65rem 0.9rem; }
  .pain .dash-flow .kpi { flex-direction: column; align-items: flex-start; }
  .pain .kpi-val { font-size: 1.35rem; }
  .pain .dash-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; padding: 0.75rem 1.1rem 0; }
  .pain .dash-card { padding: 0.8rem 1rem 0.75rem; }
  .pain .dash-svg { max-height: 210px; }
  .pain .dash-card--table { margin: 0.75rem 1.1rem 0; }
  .pain .dash-alert { margin: 0.8rem 1.1rem 1.1rem; }
  .pain .hbar { margin-bottom: 0.95rem; }
  .pain .hbar-track { height: 0.7rem; }
  .pain .hbar-label, .pain .hbar-val { font-size: 0.8rem; }
  .pain .dash-h { font-size: 0.8rem; margin-bottom: 0.75rem; }
  .pain .dash-table { font-size: 0.84rem; }
  .pain .dash-table th { font-size: 0.68rem; }
  .pain .dash-alert { font-size: 0.84rem; }

  /* Pitch: cartoon left, text right */
  .pitch-block {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 3rem; align-items: start;
  }
  .pitch-block > .section-figure { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .pitch-block > .prose, .pitch-block > .turn { grid-column: 2; }
  .pitch-block > .turn { align-self: start; }

  /* About: cartoon left, bio right; logo strip breaks out to full width in one row */
  #about {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 3rem; align-items: start;
  }
  #about > h2 { grid-column: 1 / -1; }
  #about > .section-figure { grid-column: 1; margin: 0; position: sticky; top: 5rem; }
  #about > .bio { grid-column: 2; }
  #about .logo-strip {
    margin-left: calc(-100% * 5 / 7 - 3rem);
    width: calc(100% * 12 / 7 + 3rem);
    max-width: none;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
  }

  /* Method: three columns */
  .method-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem; }
  .method-step { border-bottom: none; padding-bottom: 0; align-content: start; }

  /* Insights: 2x2 grid (homepage and /insights/) */
  .insights-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .insight-card--live { display: flex; }
  .insight-link { flex: 1; }

  /* Contact: text left, cartoon right */
  #contact {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 3.5rem; align-items: start;
  }
  #contact > h2 { grid-column: 1; margin-top: 2.5rem; }
  #contact > p { grid-column: 1; }
  #contact > .section-figure { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
}

/* v24 type: Plus Jakarta Sans headings, Inter 400 body at 18px on desktop */
h1, h2, h3, .lead-pull, .hero-pitch, .post-dek { text-wrap: balance; }
p, li { text-wrap: pretty; }
@media (min-width: 960px) {
  body { font-size: 1.125rem; }
}

/* v27: wider Insights on desktop (960px and up; mobile unchanged).
   Posts share the container's left edge with the header, homepage and /insights/.
   Text column 47rem; header block, Sales Wheel and any figures/dashboards run wide (64rem). */
@media (min-width: 960px) {
  .post {
    display: grid;
    grid-template-columns: [full-start text-start] minmax(0, 47rem) [text-end] minmax(0, 1fr) [full-end];
    padding-top: 3.5rem;
  }
  .post > *, .post-body > * { grid-column: text; }
  .post-body { grid-column: full; display: grid; grid-template-columns: [full-start text-start] minmax(0, 47rem) [text-end] minmax(0, 1fr) [full-end]; }
  .post p { max-width: none; }
  /* Header block: kicker, title, dek at the wide width, same left edge as body and figures */
  .post > .post-header { grid-column: full; max-width: 64rem; }
  .post-header .post-title { font-size: 3rem; line-height: 1.08; max-width: 64rem; margin-bottom: 1.1rem; }
  .post-header .post-dek { font-size: 1.2rem; max-width: 52rem; }
  .post-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
  .post-cta p { margin: 0; }
  .post-cta .cta-button { flex: none; }
  /* Sales Wheel: graphic and the six roles side by side, at the wide width */
  .post-body > .wheel-wide {
    grid-column: full; width: 100%; max-width: 64rem;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: 3rem; align-items: center; margin: 1.25rem 0 1.75rem;
  }
  .wheel-wide .wheel-figure { max-width: none; margin: 0; }
  .wheel-wide .wheel-steps { margin: 0; }
  /* Any other figures or dashboards in a post also run wide */
  .post-body > figure, .post-body > .dash { grid-column: full; width: 100%; max-width: 64rem; margin: 1.5rem 0 1.75rem; }

  /* /insights/ index: header, intro and cards share the full container and left edge */
  .insights-index { padding-top: 3.5rem; }
  .insights-index .post-header { margin-bottom: 2.25rem; }
  .insights-index .post-title { margin-bottom: 1.1rem; }
  .insights-index .post-dek { max-width: 44rem; margin-bottom: 0; }
  .insights-index .insights-list { gap: 1.25rem; }
  .insights-index .insight-link { padding: 1.5rem 1.6rem; }
  .insights-index .post-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
  .insights-index .post-cta p { margin: 0; }
  /* Homepage Insights: heading and cards share the container; same heading-to-card gap as /insights/ */
  #insights > h2 { margin-bottom: 1.5rem; }
  #insights .insights-list { gap: 1.25rem; }
}

/* v28: LinkedIn links (Contact + footer) */
.li-icon { width: 1em; height: 1em; flex: none; }
.contact-linkedin { margin-top: 0; }
.contact-linkedin a, .footer-linkedin { display: inline-flex; align-items: center; gap: 0.4em; }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; }
.site-footer p { margin: 0; }
.footer-linkedin { color: var(--muted); text-decoration: none; }
.footer-linkedin span { text-decoration: underline; text-underline-offset: 2px; }
.footer-linkedin:hover { color: var(--accent); }

/* v29: Netlify contact form */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.contact-form { margin: 0 0 1.25rem; display: grid; gap: 1rem; max-width: 38rem; }
.form-row--two { display: grid; gap: 1rem; }
.form-field { margin: 0; display: grid; gap: 0.35rem; }
.form-field label { font-weight: 600; font-size: 0.95rem; color: var(--text); }
.form-optional { font-weight: 400; color: var(--muted); }
.form-field input, .form-field textarea {
  font: inherit; font-size: 1rem; color: var(--text);
  background: var(--card); border: 1px solid #cfc4b3; border-radius: 6px;
  padding: 0.7rem 0.85rem; min-height: 44px; width: 100%;
}
.form-field textarea { resize: vertical; min-height: 8rem; line-height: 1.5; }
.form-field input:focus, .form-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.form-submit { margin: 0.25rem 0 0; }
.form-button { border: 0; cursor: pointer; min-height: 44px; font-size: 1.05rem; padding: 0.8rem 1.5rem; }
/* Thanks page */
.thanks-page .thanks { padding: 4rem 0 4.5rem; }
.thanks .post-title { margin-bottom: 1rem; }
.thanks p { font-size: 1.15rem; margin-bottom: 1.75rem; }
@media (min-width: 640px) { .form-row--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 960px) {
  #contact > .contact-form { grid-column: 1; }
}