/* Goode Design & Consulting
   Light ground. The charcoal/cream/gold family was within a few hex points of
   the m kirk author site, so GDC is inverted: paper ground, charcoal type,
   gold as a fill and a darker gold as a rule. Only the fills stay bright.
   The house move survives the inversion: small-caps eyebrow, then a statement
   where the accent colour carries the claim and everything else stays neutral. */

:root {
  --paper:      #FBFAF7;   /* ground */
  --paper-alt:  #F1EFE9;   /* alternating band, one step down */
  --paper-3:    #E7E4DC;   /* panel fill inside an alt band */
  --rule:       #DDDAD1;   /* hairlines and card edges */
  --rule-2:     #C6C2B6;   /* the heavier rule */

  --ink:        #242427;   /* display and headings */
  --body:       #4B4B50;   /* body text */
  --muted:      #71706C;   /* meta, captions, fine print */

  --gold:       #C4A26A;   /* fills and buttons only */
  --gold-hi:    #D3B37E;   /* button hover */
  --gold-ink:   #856521;   /* gold as text or rule on paper */

  --green:      #146B4C;   /* the claim, as text */
  --green-rule: #1F7A5A;   /* the claim, as a rule */

  --burgundy:   #8B2C3A;   /* reserved: the problem colour, used sparingly */

  --maxw: 1120px;
  --gut: clamp(20px, 5vw, 56px);
  font-synthesis-weight: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; z-index: 50; }

/* ---------- nav ---------- */

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 22px var(--gut);
  max-width: var(--maxw); margin: 0 auto;
  border-bottom: 1px solid var(--rule);
}
.brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink);
  font-weight: 800; font-size: 15px; letter-spacing: .08em;
  text-transform: uppercase;
}
.brand em { font-style: normal; font-weight: 500; color: var(--muted); }
.nav nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.nav nav a {
  text-decoration: none; color: var(--body);
  font-size: 14px; font-weight: 600; letter-spacing: .04em;
}
.nav nav a:hover { color: var(--ink); }
.nav nav a[aria-current="page"] { color: var(--ink); border-bottom: 2px solid var(--gold); padding-bottom: 3px; }
.nav nav a.btn[aria-current="page"] { border-bottom: 1px solid var(--gold); padding-bottom: 10px; }

/* ---------- shared ---------- */

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--green);
  margin: 0 0 18px;
}
.section-h {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800; line-height: 1.18; letter-spacing: -.015em;
  color: var(--ink); text-wrap: balance;
  margin: 0 0 22px; max-width: 20ch;
}
.section-h.big { max-width: 24ch; }
.lede { max-width: 62ch; font-size: 19px; }
.lede.center { margin-inline: auto; text-align: center; }
.accent { color: var(--green); }

.btn {
  display: inline-block; text-decoration: none;
  background: var(--gold); color: var(--ink);
  font-weight: 800; font-size: 14px; letter-spacing: .08em;
  text-transform: uppercase;
  padding: 15px 28px; border: 1px solid var(--gold);
}
.btn:hover { background: var(--gold-hi); border-color: var(--gold-hi); }
.btn-sm { padding: 10px 18px; font-size: 12px; }
.btn-lg { padding: 19px 40px; font-size: 15px; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn-ghost:hover { background: transparent; border-color: var(--gold-ink); color: var(--gold-ink); }

.link-arrow {
  text-decoration: none; color: var(--body);
  font-weight: 600; font-size: 15px;
  border-bottom: 1px solid var(--rule-2); padding-bottom: 2px;
}
.link-arrow::after { content: " \2192"; color: var(--gold-ink); }
.link-arrow:hover { color: var(--ink); border-color: var(--gold-ink); }

.cta-row {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  margin: 34px 0 0;
}
.cta-row.center { justify-content: center; }

/* ---------- hero ---------- */

.hero {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(64px, 10vw, 128px) var(--gut) clamp(56px, 8vw, 104px);
}
.hero h1 {
  font-size: clamp(38px, 6.6vw, 76px);
  font-weight: 800; line-height: 1.05; letter-spacing: -.028em;
  color: var(--ink); margin: 0 0 28px; text-wrap: balance;
}

/* ---------- bands ---------- */

.band { padding: clamp(56px, 8vw, 96px) var(--gut); }
.band > * { max-width: var(--maxw); margin-inline: auto; }
.band.alt { background: var(--paper-alt); }

.grid-3 {
  display: grid; gap: 34px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  margin-top: 12px;
}

.signal .num {
  font-size: 13px; font-weight: 800; letter-spacing: .18em;
  color: var(--gold-ink); margin: 0 0 12px;
}
.signal h3, .track h3 {
  font-size: 20px; font-weight: 700; line-height: 1.3;
  color: var(--ink); margin: 0 0 10px;
}
.signal p:last-child, .track p { margin: 0 0 12px; font-size: 16px; }

.tracks .track {
  border-top: 2px solid var(--green-rule);
  padding-top: 22px;
}
.track .meta {
  font-size: 13px; color: var(--muted); letter-spacing: .02em;
  margin: 16px 0 0;
}

/* ---------- credibility ---------- */

.cred-wrap {
  display: grid; gap: clamp(32px, 5vw, 64px);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 780px) {
  .cred-wrap { grid-template-columns: 1fr; }
  .cred-photo { order: -1; max-width: 320px; }
}
.creds {
  list-style: none; padding: 0; margin: 26px 0 28px;
  display: grid; gap: 10px;
}
.creds li {
  font-size: 15px; color: var(--ink);
  padding-left: 20px; position: relative;
}
.creds li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; background: var(--gold);
  transform: rotate(45deg);
}
.gallup { opacity: .92; }
.cred-photo { margin: 0; }
.cred-photo img { border: 1px solid var(--rule); }

/* ---------- books ---------- */

.book-wrap {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 780px) { .book-wrap { grid-template-columns: 1fr; } }
.book-wrap p { max-width: 56ch; }
.pullquote {
  border-left: 2px solid var(--gold);
  padding: 4px 0 4px 22px;
}
.pullquote blockquote {
  margin: 0; font-size: 21px; line-height: 1.4; font-weight: 700;
  color: var(--ink); letter-spacing: -.01em;
}
.attrib { font-size: 13px; color: var(--muted); margin: 14px 0 0; letter-spacing: .04em; }

.titles {
  list-style: none; padding: 0;
  margin: clamp(44px, 6vw, 72px) auto 0;
  display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
}
.titles li { border-top: 1px solid var(--rule-2); padding-top: 20px; }
.titles h3 {
  font-size: 19px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink); margin: 0 0 10px;
}
.titles p { font-size: 15px; margin: 0; }
.status {
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 8px;
}
.status.out { color: var(--green); }

/* ---------- booking ---------- */

.book-call { text-align: center; }
.book-call .eyebrow,
.book-call .section-h { margin-inline: auto; }
.book-call .section-h { text-align: center; }
.fineprint { font-size: 14px; color: var(--muted); margin: 26px 0 0; }
.fineprint a { color: var(--body); }

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--rule);
  padding: 52px var(--gut) 40px;
  background: var(--paper-alt);
}
.foot-in {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; justify-content: space-between; gap: 36px; flex-wrap: wrap;
}
.foot-name {
  font-weight: 800; font-size: 14px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); margin: 14px 0 6px;
}
.foot-meta { font-size: 13px; color: var(--muted); margin: 0; }
.foot nav { display: grid; gap: 10px; }
.foot nav a {
  text-decoration: none; color: var(--body);
  font-size: 14px; font-weight: 600;
}
.foot nav a:hover { color: var(--gold-ink); }
.foot-legal {
  max-width: var(--maxw); margin: 40px auto 0;
  padding-top: 22px; border-top: 1px solid var(--rule);
  font-size: 12px; line-height: 1.7; color: var(--muted);
}

/* ---------- subpage hero ---------- */

.hero-sub { padding-bottom: clamp(40px, 6vw, 72px); }
.hero-sub h1 { font-size: clamp(34px, 5.4vw, 62px); }

/* ---------- spec panel ---------- */

.spec {
  border: 1px solid var(--rule-2);
  background: var(--paper);
  padding: 26px 26px 22px;
}
.band.alt .spec { background: var(--paper); }
.spec h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-ink);
  margin: 0 0 16px;
}
.spec ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.spec li {
  font-size: 15px; color: var(--ink);
  padding-left: 18px; position: relative;
}
.spec li::before {
  content: ""; position: absolute; left: 0; top: .66em;
  width: 7px; height: 1px; background: var(--green-rule);
}
.spec-meta {
  font-size: 13px; color: var(--muted); margin: 0;
  padding-top: 16px; border-top: 1px solid var(--rule);
}

.keynotes .track { border-top-color: var(--gold); }

/* ---------- rate card ---------- */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.rates .rate-card {
  width: 100%; border-collapse: collapse;
  margin-top: 34px;
  font-variant-numeric: tabular-nums;
}
.rate-card th {
  text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  padding: 0 16px 12px 0; border-bottom: 1px solid var(--gold-ink);
}
.rate-card th:last-child, .rate-card td:last-child { text-align: right; padding-right: 0; }
.rate-card td {
  padding: 20px 16px 20px 0;
  border-bottom: 1px solid var(--rule-2);
  vertical-align: top;
  font-size: 16px; font-weight: 600; color: var(--ink);
}
.rate-card td span {
  display: block; margin-top: 5px;
  font-size: 13px; font-weight: 400; color: var(--body);
  max-width: 46ch;
}
.rate-card td:nth-child(2) {
  font-size: 13px; font-weight: 500; color: var(--muted);
  letter-spacing: .04em; white-space: nowrap;
}
.rate-card .rate {
  font-size: 22px; font-weight: 800; color: var(--gold-ink);
  letter-spacing: -.01em; white-space: nowrap;
}
@media (max-width: 660px) {
  .rate-card thead { display: none; }
  .rate-card tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
                  padding: 20px 0; border-bottom: 1px solid var(--rule-2); }
  .rate-card td { border: 0; padding: 0; }
  .rate-card td:nth-child(2) { grid-column: 1; white-space: normal; }
  .rate-card .rate { grid-row: 1 / span 2; grid-column: 2; align-self: start; }
}
.rate-note {
  margin: 30px 0 0; max-width: 70ch;
  font-size: 15px; color: var(--body);
  border-left: 2px solid var(--green-rule); padding-left: 20px;
}
.rate-note strong { color: var(--ink); font-weight: 700; }

/* ---------- embedded forms ---------- */

.embed-wrap {
  border: 1px solid var(--rule-2);
  background: #fff;
  padding: 4px;
}
.embed-wrap iframe {
  display: block; width: 100%;
  min-height: 620px; border: 0;
}

.signup-wrap {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 780px) { .signup-wrap { grid-template-columns: 1fr; } }
.signup-wrap p { max-width: 52ch; }
.signup-form {
  border: 1px solid var(--rule-2);
  background: var(--paper);
  padding: 28px;
  min-height: 150px;
  display: flex; align-items: center; justify-content: center;
}
.placeholder-note {
  margin: 0; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); text-align: center;
}

/* ---------- framework blocks ---------- */

/* Grid, not flex. On flex the label and the name shared a line for the short
   framework names and wrapped for the long ones, so DELEGATE and CREATE sat
   beside their kicker while the 6C Compass sat under it. */
.fw-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px; row-gap: 4px; align-items: center;
  padding-bottom: 18px; border-bottom: 2px solid var(--gold);
  margin-bottom: 34px;
}
.fw-head .fw-icon { grid-row: 1 / span 2; }
.fw-head .fw-label { grid-column: 2; align-self: end; }
.fw-head .fw-name  { grid-column: 2; align-self: start; }
@media (max-width: 560px) {
  .fw-head { column-gap: 14px; }
}
.fw-label {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--green);
}
.fw-name {
  margin: 0; color: var(--ink);
  font-size: clamp(30px, 4.4vw, 48px); font-weight: 800;
  letter-spacing: .02em; line-height: 1;
}
.fw-body {
  display: grid; gap: clamp(30px, 4vw, 60px);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 820px) { .fw-body { grid-template-columns: 1fr; } }
.fw-body .lede { font-size: 18px; margin-top: 0; }
.fw-body p + p { margin-bottom: 0; }

.parts {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
/* One column at every width. Two columns made people read across when the
   lists are ordered sequences, and the letters spell the framework. */
.parts.six { grid-template-columns: 1fr; }
.parts.eight { grid-template-columns: 1fr; }
.parts li {
  background: var(--paper);
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.band.alt .parts { background: var(--rule-2); border-color: var(--rule-2); }
.band.alt .parts li { background: var(--paper); }
.parts li span {
  flex: 0 0 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font-size: 12px; font-weight: 800; letter-spacing: 0;
}

/* ---------- split callout ---------- */

.split {
  display: grid; gap: 1px; background: var(--rule-2);
  border: 1px solid var(--rule-2);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 8px;
}
.split.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .split.three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .split.three { grid-template-columns: 1fr; } }
.half { background: var(--paper); padding: 26px; }
.half h3 {
  margin: 0 0 10px; font-size: 13px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink);
}
.half p { margin: 0; font-size: 16px; }

/* ---------- testimonial rotator ---------- */

.quote-stage { position: relative; margin-top: 8px; }
.quote-stage .q {
  margin: 0;
  display: none;
  border-left: 2px solid var(--gold);
  padding: 6px 0 6px 26px;
  max-width: 60ch;
}
.quote-stage .q.is-live { display: block; }
.quote-stage blockquote {
  margin: 0;
  font-size: clamp(20px, 2.5vw, 27px);
  line-height: 1.38; font-weight: 700;
  color: var(--ink); letter-spacing: -.012em;
  text-wrap: pretty;
}
.quote-stage blockquote::before { content: "\201C"; }
.quote-stage blockquote::after  { content: "\201D"; }
.quote-stage figcaption { margin-top: 20px; }
.q-name {
  display: block; font-size: 15px; font-weight: 800;
  color: var(--ink); letter-spacing: .02em;
}
.q-role {
  display: block; margin-top: 3px;
  font-size: 13px; color: var(--muted); letter-spacing: .05em;
}
.q-nav {
  display: flex; align-items: center; gap: 18px;
  margin-top: 34px; padding-left: 28px;
}
.q-arrow {
  background: transparent; border: 1px solid var(--rule-2);
  color: var(--body); cursor: pointer;
  width: 38px; height: 38px; font-size: 15px; line-height: 1;
}
.q-arrow:hover { border-color: var(--gold-ink); color: var(--gold-ink); }
.q-dots { display: flex; gap: 9px; }
.q-dot {
  width: 9px; height: 9px; padding: 0; cursor: pointer;
  background: var(--rule-2); border: 0; transform: rotate(45deg);
}
.q-dot.on { background: var(--gold-ink); }
.q-dot:hover { background: var(--muted); }

/* ---------- lineage list ---------- */

.lineage {
  list-style: none; padding: 0; margin: 30px 0 0;
  display: grid; gap: 0;
  border-top: 1px solid var(--rule);
  max-width: 78ch;
}
.lineage li {
  padding: 15px 0; border-bottom: 1px solid var(--rule);
  font-size: 16px;
}
.lineage strong { color: var(--ink); font-weight: 700; }

/* ---------- client resource lists ---------- */

.res-list {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: grid; gap: 22px;
}
.res-list.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.res-list.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .res-list.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .res-list.four { grid-template-columns: 1fr; } }
.res-list .res-meta .link-arrow { display: inline-block; margin-top: 12px; }
.res-list li {
  border: 1px solid var(--rule-2);
  background: var(--paper);
  padding: 24px;
}
.res-kind {
  margin: 0 0 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink);
}
.res-list h3 {
  margin: 0 0 10px; font-size: 19px; font-weight: 700; color: var(--ink);
}
.res-list p { margin: 0; font-size: 15px; }
.res-meta {
  margin-top: 16px !important; padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--muted); letter-spacing: .04em;
}

/* ---------- book page ---------- */

.cover-wrap {
  display: grid; gap: clamp(32px, 5vw, 68px);
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 780px) {
  .cover-wrap { grid-template-columns: 1fr; }
  .cover-wrap .cover { max-width: 260px; }
}
.cover { margin: 0; }
.cover img { border: 1px solid var(--rule-2); box-shadow: 0 18px 40px rgba(36,36,39,.14); }

.buy-row {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin: 30px 0 0;
}
.buy-row .btn { padding: 14px 24px; }

.fmt-note {
  margin: 18px 0 0; font-size: 14px; color: var(--muted);
}

.chapters {
  list-style: none; padding: 0; margin: 30px 0 0;
  display: grid; gap: 0;
  border-top: 1px solid var(--rule);
  counter-reset: ch;
}
.chapters li {
  display: flex; gap: 18px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
  font-size: 16px; color: var(--ink);
}
.chapters li::before {
  counter-increment: ch; content: counter(ch, decimal-leading-zero);
  flex: 0 0 auto; font-size: 12px; font-weight: 800;
  letter-spacing: .12em; color: var(--gold-ink);
}
.chapters em { font-style: normal; color: var(--muted); font-size: 14px; }

.bulk-panel {
  border: 1px solid var(--rule-2);
  background: var(--paper);
  padding: clamp(26px, 4vw, 40px);
  margin-top: 8px;
}

/* ---------- crossover note ---------- */

.crossover {
  border-left: 2px solid var(--rule-2);
  padding: 4px 0 4px 20px;
  margin: 34px 0 0;
  font-size: 15px; color: var(--muted); max-width: 64ch;
}
.crossover a { color: var(--body); }

/* ---------- framework accents ----------
   Colours taken from the CLUTCH visual system already in use on the
   m kirk site, darkened where they have to carry text on paper. */

.fw-create   { --fw: #2C7355; }
.fw-voices   { --fw: #2F5A8F; }
.fw-sixc     { --fw: #6B3F93; }
.fw-delegate { --fw: #8D3E40; }

.fw[class*="fw-"] .fw-head  { border-bottom-color: var(--fw); }
.fw[class*="fw-"] .fw-label { color: var(--fw); }
.fw[class*="fw-"] .parts li span { background: var(--fw); color: #fff; }

/* ---------- Kit (ConvertKit) form overrides ----------
   Kit ships its own stylesheet with the embed, so every rule here needs
   !important. The button label itself is set in Kit's editor, not in CSS.
   The <span> inside .formkit-submit needs display:block for the right
   button height. Do not remove the data-options attribute from the form. */

.signup-form .formkit-form { width: 100% !important; }
.signup-form .formkit-form[data-uid] {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif !important;
}
.signup-form .formkit-fields {
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
}
.signup-form .formkit-field { margin: 0 !important; }
.signup-form .formkit-input {
  width: 100% !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule-2) !important;
  border-radius: 0 !important;
  padding: 15px 16px !important;
  font-size: 16px !important;
  font-family: inherit !important;
}
.signup-form .formkit-input::placeholder { color: var(--muted) !important; }
.signup-form .formkit-input:focus {
  outline: 2px solid var(--gold-ink) !important;
  outline-offset: 2px !important;
  border-color: var(--gold-ink) !important;
}
.signup-form .formkit-submit {
  width: 100% !important;
  background: var(--gold) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}
.signup-form .formkit-submit:hover {
  background: var(--gold-hi) !important;
  border-color: var(--gold-hi) !important;
}
.signup-form .formkit-submit > span {
  display: block !important;
  padding: 15px 24px !important;
  color: var(--ink) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.signup-form .formkit-powered-by-convertkit-container { display: none !important; }
.signup-form .formkit-form[data-uid="32f9f4ea8f"] .formkit-powered-by-convertkit-container { display: none !important; }
.signup-form .formkit-form[data-uid="76ac03c943"] .formkit-powered-by-convertkit-container { display: none !important; }
.signup-form .formkit-alert {
  margin: 0 0 10px !important;
  font-size: 14px !important;
  color: var(--burgundy) !important;
}

/* ---------- social row ---------- */

.socials {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 22px 0 0; padding: 0; list-style: none;
}
.socials a { display: block; line-height: 0; }
.socials img { height: 34px; width: auto; }
.socials a:hover img { opacity: .78; }
.socials a:focus-visible { outline-offset: 4px; }

/* ---------- certification badges ---------- */

.badge-row {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  margin: 28px 0 0;
}
.badge-row img { height: 104px; width: auto; }
.spec .badge-in-panel {
  margin: 0 auto 18px; height: 132px; width: auto;
}

/* ---------- book index cards ---------- */

.shelf {
  list-style: none; padding: 0; margin: 44px 0 0;
  display: grid; gap: clamp(34px, 4vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.shelf li { display: flex; flex-direction: column; }
.shelf img {
  border: 1px solid var(--rule-2);
  box-shadow: 0 14px 32px rgba(36,36,39,.12);
  margin-bottom: 24px;
}
.shelf h3 {
  margin: 0 0 10px; font-size: 21px; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; color: var(--ink);
}
.shelf p { margin: 0 0 14px; font-size: 15px; }
.shelf .cta-row { margin-top: auto; padding-top: 8px; gap: 18px; }

/* ---------- sticky nav ----------
   The booking CTA is the page's one job, so it travels with the reader instead
   of living at the top and the bottom. Full-bleed ground behind a constrained
   inner row, so the bar spans the viewport while the content stays on the grid. */

.nav {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 0;
}
.nav::before {
  content: ""; position: absolute; inset: 0;
  margin-inline: calc(50% - 50vw);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  z-index: -1;
}
.nav.is-stuck::before { box-shadow: 0 6px 20px rgba(36,36,39,.07); }

/* ---------- signals, as a self-diagnostic ----------
   Three engine lights. The reader picks the ones that are theirs and the page
   answers, which is a shorter route to the call than scrolling to the bottom. */

.signals { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .signals { grid-template-columns: 1fr; } }

button.signal {
  appearance: none; -webkit-appearance: none;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  /* Cream cards on a cream band read as one flat surface, so the cards sit on
     the alt tone and lift on hover. */
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--rule-2);
  padding: 24px 22px 20px;
  display: flex; flex-direction: column;
  transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
}
button.signal:hover {
  border-color: var(--rule-2); background: var(--paper-3);
  box-shadow: 0 6px 18px rgba(36,36,39,.06); transform: translateY(-2px);
}
button.signal:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
button.signal[aria-pressed="true"] {
  border-color: var(--gold); border-top-color: var(--gold);
  background: rgba(196,162,106,.09);
}
button.signal .num { transition: color .18s; }
button.signal[aria-pressed="true"] .num { color: var(--gold-ink); }

.signal-pick {
  margin-top: auto; padding-top: 18px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 9px;
}
.signal-pick::before {
  content: ""; width: 13px; height: 13px;
  border: 1px solid var(--rule-2); transform: rotate(45deg);
  flex: 0 0 auto; transition: background .18s, border-color .18s;
}
button.signal[aria-pressed="true"] .signal-pick { color: var(--gold-ink); }
button.signal[aria-pressed="true"] .signal-pick::before {
  background: var(--gold); border-color: var(--gold);
}

/* display:flex would otherwise beat the browser's own [hidden] rule, so the
   box renders empty before anything is picked. */
.signal-verdict[hidden] { display: none; }
.signal-verdict {
  margin: 34px 0 0; padding: clamp(24px,3vw,34px);
  border: 1px solid var(--rule-2);
  border-left: 4px solid var(--green-rule);
  background: var(--paper-alt);
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 26px clamp(26px,4vw,52px); align-items: center;
}
@media (max-width: 820px) {
  .signal-verdict { grid-template-columns: 1fr; }
}
.signal-verdict p { margin: 0; }
.signal-verdict .sv-count {
  font-size: clamp(19px,2.3vw,24px); font-weight: 700; line-height: 1.25;
  color: var(--ink); letter-spacing: -.01em;
}
.signal-verdict .sv-line {
  margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--body);
  max-width: 58ch;
}
.signal-verdict .sv-next {
  margin-top: 12px; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  color: var(--green);
}
.signal-verdict .sv-actions {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.signal-verdict strong { font-weight: 800; }

/* ---------- practice lanes, as a selector ----------
   A different shape from the three-up grid above it: pick a lane, the panel
   answers. The services that were set as small grey meta are promoted to the
   thing a buyer actually scans for. */

.lane-picker {
  display: flex; gap: 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule-2);
  margin-top: 8px;
}
.lane-tab {
  appearance: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 700;
  color: var(--muted); letter-spacing: -.01em;
  border: 0; border-bottom: 3px solid transparent;
  padding: 14px 26px 15px; margin-bottom: -1px;
  transition: color .18s, border-color .18s;
}
.lane-tab:hover { color: var(--ink); }
.lane-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--green-rule); }
@media (max-width: 640px) {
  .lane-picker { flex-direction: column; border-bottom: 0; }
  .lane-tab { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--rule);
              border-left: 3px solid transparent; padding-left: 14px; margin-bottom: 0; }
  .lane-tab[aria-selected="true"] { border-bottom-color: var(--rule); border-left-color: var(--green-rule); }
}

.lane-panel { padding-top: clamp(30px, 4vw, 46px); }
.lane-panel[hidden] { display: none; }
.lane-body {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 820px) { .lane-body { grid-template-columns: 1fr; } }
.lane-body > div > p {
  font-size: 19px; line-height: 1.6; color: var(--body); max-width: 56ch; margin: 0;
}
.lane-services { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lane-services li {
  font-size: 16px; font-weight: 600; color: var(--ink);
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
}

/* ---------- dark band ----------
   The page ran eight sections across two grounds four hex points apart, which
   reads as one undifferentiated scroll. This is the landmark. It works by
   redefining the tokens locally, so every component inside inherits the dark
   treatment without a single component-level override. */

.band.dark {
  --paper:      #242427;
  --paper-alt:  #2C2C2E;
  --paper-3:    #313134;
  --rule:       #3A3A3E;
  --rule-2:     #4E4E54;
  --ink:        #FBFAF7;
  --body:       #C7C4BC;
  --muted:      #8E8B84;
  --gold-ink:   #C4A26A;   /* gold carries text on charcoal, so the light-ground
                              darkened gold is wrong here */
  --green:      #4FB089;
  --green-rule: #3E9C76;
  background: #242427;
  color: var(--body);
}

/* ---------- reader quotes ----------
   Sits with the books, because these are readers rather than clients and the
   distinction is the whole reason the client band is separate. */

.reader-quotes { display: grid; gap: 22px; }
.reader-quotes figure {
  margin: 0;
  border-left: 2px solid var(--gold);
  padding: 2px 0 2px 20px;
}
.reader-quotes blockquote {
  margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600;
  color: var(--ink); letter-spacing: -.005em; text-wrap: pretty;
}
.reader-quotes figcaption {
  margin-top: 10px; font-size: 12px; color: var(--muted); letter-spacing: .04em;
}

/* --- Service accordion -----------------------------------------------------
   Native details/summary. No JS, keyboard navigation and screen-reader
   semantics come free, and it degrades to plain open sections if anything
   about the page fails to load. Six labels scannable in two seconds, the full
   copy one click deep. Used on /schools/.
--------------------------------------------------------------------------- */
.svc{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--rule-2)}
.svc > li{border-bottom:1px solid var(--rule)}
.svc summary{
  display:flex;align-items:baseline;gap:16px;cursor:pointer;list-style:none;
  padding:22px 2px;
}
.svc summary::-webkit-details-marker{display:none}
.svc summary h3{
  margin:0;flex:1 1 auto;
  font-size:clamp(18px,2.1vw,22px);font-weight:600;letter-spacing:-.01em;
  color:var(--ink);transition:color .15s ease;
}
/* Two fixed slots on every row, in the same order: who it is for, then what
   it runs on. Mixing axes row to row (a framework here, a duration there) made
   the column unreadable at a glance. */
.svc .svc-meta{
  flex:0 0 auto;display:flex;align-items:baseline;gap:9px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
/* Three slots, same order every row: who it is for, what it runs on, and how
   it is delivered. */
.svc .svc-for{color:var(--muted)}
.svc .svc-on{color:var(--gold-ink);font-weight:600}
.svc .svc-how{color:var(--muted)}
.svc .svc-on::before,
.svc .svc-how::before{
  content:"\00B7";margin-right:9px;color:var(--rule-2);font-weight:400;
}
@media (max-width:1080px){
  .svc .svc-how{display:none}
}
.svc summary::after{
  content:"+";flex:0 0 auto;width:16px;text-align:center;
  font-size:22px;line-height:1;color:var(--gold-ink);
}
.svc details[open] > summary::after{content:"\2013"}
.svc summary:hover h3{color:var(--gold-ink)}
.svc summary:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.svc-body{padding:0 2px 28px;max-width:74ch}
.svc-body p{margin:0 0 14px;color:var(--body)}
.svc-body p:last-child{margin-bottom:0}
.svc-body ul{margin:0 0 14px;padding:0;list-style:none}
.svc-body ul li{position:relative;padding-left:20px;margin-bottom:7px;color:var(--body)}
.svc-body ul li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--gold);
}
@media (max-width:700px){
  .svc .svc-meta{display:none}
}

/* --- Engagements list ------------------------------------------------------
   Dated, association-first. The proof that carries in this market.
--------------------------------------------------------------------------- */
.engagements{list-style:none;margin:32px 0 0;padding:0;max-width:80ch}
.engagements li{
  display:grid;grid-template-columns:130px 1fr;gap:8px 24px;
  padding:16px 0;border-bottom:1px solid var(--rule);
}
.engagements .when{
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  padding-top:3px;
}
.engagements .what strong{display:block;color:var(--ink);font-weight:600}
.engagements .what span{display:block;color:var(--body);font-size:15px;margin-top:2px}
@media (max-width:640px){
  .engagements li{grid-template-columns:1fr;gap:4px}
}

/* Portrait inside a spec panel. Head and tie stay in frame at every width. */
.spec .spec-photo{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  object-position:50% 14%;border-radius:3px;margin:0 0 18px;
  border:1px solid var(--rule);
}
.spec .spec-photo + h3{margin-top:0}

/* --- Hero with a portrait alongside ----------------------------------------
   Used on /schools/. The text column stays the measure it was; the photograph
   takes the space that was empty to its right and stacks above the text on a
   phone, where a wide portrait beside four lines of prose does not work.
--------------------------------------------------------------------------- */
.hero-split{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.75fr);
  gap:clamp(28px,5vw,64px);align-items:start;
}
.hero-split > div{min-width:0}
.hero-figure{margin:0}
.hero-figure img{
  display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  object-position:50% 28%;border-radius:3px;border:1px solid var(--rule);
}
.hero-figure figcaption{
  margin-top:12px;font-size:13px;line-height:1.5;color:var(--muted);
  max-width:34ch;
}
@media (max-width:820px){
  .hero-split{grid-template-columns:1fr}
  .hero-figure{order:-1;max-width:420px}
}

/* --- The four systems, at a glance ------------------------------------------
   Borrowed from the CLUTCH page's "Four Systems" module so the two read as one
   family: a dark ground, a coloured top rule per framework, the icon, a roman
   numeral, the kicker and the name. The framework colours are the same --fw
   tokens the detail sections below already use.
--------------------------------------------------------------------------- */
.fw-cards{
  list-style:none;margin:40px 0 0;padding:0;
  display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:940px){.fw-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fw-cards{grid-template-columns:1fr}}
.fw-card{
  background:var(--paper-alt);border:1px solid var(--rule);
  border-top:3px solid var(--fw,var(--gold));
  padding:22px 20px 24px;display:flex;flex-direction:column;gap:10px;
}
.fw-card img{width:38px;height:38px;display:block;margin-bottom:2px}
.fw-card .fw-num{
  margin:0;font-size:11px;letter-spacing:.2em;color:var(--muted);
}
.fw-card .fw-kicker{
  margin:0;font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fw,var(--gold-ink));
}
.fw-card h3{
  margin:0;font-size:clamp(19px,2.1vw,23px);font-weight:800;letter-spacing:.02em;
  line-height:1.1;color:var(--ink);
}
.fw-card p{margin:0;font-size:15px;line-height:1.5;color:var(--body)}
.fw-card a{
  margin-top:auto;padding-top:6px;font-size:13px;font-weight:600;
  color:var(--gold-ink);text-decoration:none;
}
.fw-card a:hover{text-decoration:underline}
/* On the dark band the icon discs sit on near-matching ground, exactly as they
   do on the CLUTCH page, so what reads is the glyph. The four framework hues
   are lifted here: the light-ground values are 1.8:1 to 2.4:1 on this card and
   the kicker is 11px, so they have to clear 4.5:1 to be readable at all. */
.band.dark .fw-card{
  background:var(--paper-alt);border-color:var(--rule);
  border-top-color:var(--fw,var(--gold));
}
.band.dark .fw-create   { --fw: #4FB089; }
.band.dark .fw-voices   { --fw: #6AA0D8; }
.band.dark .fw-sixc     { --fw: #B79CE0; }
.band.dark .fw-delegate { --fw: #E0908F; }

/* The icon badge beside each framework name in the detail sections. */
.fw-head .fw-icon{
  width:44px;height:44px;flex:0 0 auto;align-self:center;display:block;
}

/* --- Emotional intelligence callout ----------------------------------------
   The CLUTCH page gives EQ its own bordered panel rather than another band of
   prose, because it is the part that holds the other four together.
--------------------------------------------------------------------------- */
.eq-panel{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:24px;
  align-items:start;margin-top:30px;
  border:1px solid var(--rule-2);border-left:4px solid var(--gold);
  background:var(--paper-alt);padding:clamp(22px,3vw,34px);
}
.eq-panel img{width:56px;height:56px;display:block}
.eq-panel p{margin:0 0 14px}
.eq-panel p:last-child{margin-bottom:0}
@media (max-width:640px){
  .eq-panel{grid-template-columns:1fr;gap:16px}
}

/* --- Symptom to framework --------------------------------------------------
   People arrive knowing what hurts, not which framework treats it.
--------------------------------------------------------------------------- */
.stuck{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:0;
  border-top:1px solid var(--rule)}
.stuck li{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(18px,3vw,42px);align-items:start;
  padding:24px 0;border-bottom:1px solid var(--rule);
}
.stuck .stuck-sym{margin:0;font-size:17px;line-height:1.45;color:var(--ink);font-weight:500}
.stuck .stuck-fix{margin:0;color:var(--body)}
.stuck .stuck-fix strong{color:var(--ink)}
.stuck .stuck-fix .link-arrow{display:inline-block;margin-top:8px}
@media (max-width:760px){
  .stuck li{grid-template-columns:1fr;gap:10px}
}


/* --- Diagnostic prompt inside a framework section ---------------------------
   One question per framework, answerable in your head, placed where the
   explanation stops being abstract.
--------------------------------------------------------------------------- */
.fw-ask{
  margin:26px 0 0;padding:20px 22px;
  border-left:3px solid var(--fw,var(--gold));background:var(--paper-alt);
}
.band.alt .fw-ask{background:var(--paper)}
.fw-ask p{margin:0}
.fw-ask .fw-ask-label{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fw,var(--gold-ink));margin-bottom:8px;
}
.fw-ask .fw-ask-q{font-size:17px;line-height:1.45;color:var(--ink);font-weight:500}
.fw-ask .fw-ask-note{margin-top:10px;font-size:15px;color:var(--body)}

/* Full-width photograph heading a band. */
.obd-figure{margin:0 0 34px}
.obd-figure img{
  display:block;width:100%;height:auto;max-height:360px;object-fit:cover;
  object-position:50% 55%;border:1px solid var(--rule);border-radius:3px;
}
.obd-figure figcaption{
  margin-top:10px;font-size:14px;line-height:1.5;color:var(--muted);max-width:60ch;
}

/* Icon at the head of a track card. Fixed height rather than fixed width, so a
   portrait book cover and a square logo sit on the same baseline. */
.track .track-icon{
  height:52px;width:auto;display:block;margin:0 0 14px;
  border-radius:2px;
}
.track .track-kind{
  margin:-4px 0 10px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);
}


/* The OBD connector badge sits in a spec panel next to type, so it is sized to
   the type rather than to the panel the way the certification badge was. */
.spec .obd-badge{width:76px;height:76px;margin-bottom:16px}