/* Northlight — site styles
   Depends on tokens.css (generated copy of /brand-tokens.css — do not edit that copy).
   Hand-written, no framework, no external requests. */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.18; margin: 0 0 .5em; }
h1 { font-size: var(--size-display); letter-spacing: -.015em; }
h2 { font-size: var(--size-h1); letter-spacing: -.01em; }
h3 { font-size: var(--size-h2); }
h4 { font-size: var(--size-h3); }
p  { margin: 0 0 1.05em; }
a  { color: var(--sky-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
ul, ol { margin: 0 0 1.05em; padding-left: 1.15em; }
li { margin-bottom: .38em; }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--sky-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem; border-radius: 0 0 8px 0; font-weight: 700;
}
.skip:focus { left: 0; }

/* ---------- layout ---------- */
.wrap { width: min(1180px, calc(100% - 3rem)); margin-inline: auto; }
.wrap--narrow { width: min(760px, calc(100% - 3rem)); }

section.band { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.band--paper { background: var(--paper); }
.band--soft  { background: var(--sky-soft); }
.band--tealsoft { background: var(--teal-soft); }
.band--ink   { background: var(--ink); color: var(--paper); }
.band--teal  { background: var(--teal); color: var(--white); }
.band--ink h2, .band--teal h2, .band--ink h3, .band--teal h3 { color: inherit; }
.band--ink p, .band--teal p { color: rgba(255,255,255,.86); }
.band--ink a, .band--teal a { color: var(--sky); }

.kicker {
  font-size: var(--size-kicker); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--sky-deep); margin: 0 0 .85rem;
}
.band--ink .kicker, .band--teal .kicker { color: var(--menta); }
.lede { font-size: 20px; color: var(--slate); max-width: 62ch; }
.band--ink .lede, .band--teal .lede { color: rgba(255,255,255,.82); }
.muted { color: var(--slate); }
.small { font-size: var(--size-small); }

.rule {
  width: 46px; height: 3px; background: var(--canary);
  border-radius: 2px; margin: 0 0 1.4rem;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,250,246,.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 68px;
}
.brandmark {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-head); font-weight: 700; font-size: 19px;
  color: var(--teal); text-decoration: none; letter-spacing: -.01em;
  flex: 0 0 auto;
}
.brandmark:hover { color: var(--ink); }
.brandmark svg { width: 26px; height: 26px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.nav a.navlink {
  color: var(--ink); text-decoration: none; font-size: 15.5px; font-weight: 600;
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.nav a.navlink:hover { border-bottom-color: var(--teal); }
.nav a.navlink[aria-current="page"] { border-bottom-color: var(--canary); }

.navtoggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--line); border-radius: 8px;
  padding: .5rem .6rem; cursor: pointer; color: var(--ink);
}
.navtoggle svg { width: 20px; height: 20px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-size: 16px; font-weight: 700;
  padding: .72rem 1.25rem; border-radius: var(--radius-pill);
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .16s ease-out, background .16s ease-out, color .16s ease-out;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--teal); color: var(--white); }
.btn--primary:hover { background: var(--ink); color: var(--white); }
.btn--canary { background: var(--canary); color: var(--ink); }
.btn--canary:hover { background: var(--menta); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn--ghost:hover { background: var(--teal); color: var(--white); }
.btn--ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.btn--ghost-light:hover { background: var(--white); color: var(--ink); }
.btn--sm { font-size: 14.5px; padding: .55rem 1rem; }

/* A dark band's link rule (`.band--ink a`, two selectors) out-specifies a
   single-class button rule, so buttons inside a dark band silently inherited
   Sky. The Canary CTA on How I work was rendering light blue on yellow —
   about 1.4:1, the worst pairing on the site and exactly what the contrast
   rules exist to prevent. Ghost-light buttons had it too, less visibly.
   Buttons reclaim their own colour in every band. */
.band--ink .btn--canary,      .band--teal .btn--canary      { color: var(--ink); }
.band--ink .btn--primary,     .band--teal .btn--primary     { color: var(--white); }
.band--ink .btn--ghost-light, .band--teal .btn--ghost-light { color: var(--white); }
.band--ink .btn--ghost-light:hover,
.band--teal .btn--ghost-light:hover { color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* ---------- hero ---------- */
.hero { padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem); }
.hero__grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.hero h1 { margin-bottom: .55rem; }
.hero__sub { font-size: 21px; color: var(--slate); max-width: 46ch; margin-bottom: 1.5rem; }
.hero__claim {
  font-family: var(--font-head); font-size: 19px; font-style: italic;
  color: var(--teal); border-left: 3px solid var(--canary);
  padding-left: 1rem; margin: 0 0 1.8rem; max-width: 44ch;
}

/* ---------- cards ---------- */
.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 1.5rem 1.5rem 1.35rem;
  border-top: 4px solid var(--line);
}
.band--ink .card, .band--teal .card { background: rgba(255,255,255,.06); box-shadow: none; }
.band--ink .card p, .band--teal .card p { color: rgba(255,255,255,.82); }
.card h3, .card h4 { margin-bottom: .45rem; }
.card p:last-child { margin-bottom: 0; }

.numcard__n {
  font-family: var(--font-head); font-size: 40px; font-weight: 700;
  color: var(--teal); line-height: 1; margin-bottom: .35rem;
}
.band--ink .numcard__n { color: var(--menta); }

/* ---------- Diagnose → Clarify → Prioritize ----------
   The arrow lives in the grid gap, so it only makes sense while the three
   cards are on one row. Below 960px the grid rewraps and an arrow would
   land against the container edge — so it is dropped, not repositioned. */
.arc__step { position: relative; }
.arc__step + .arc__step::before {
  content: "\2192"; position: absolute; left: -1.02rem; top: 1.62rem;
  font-size: 21px; font-weight: 700; line-height: 1;
  /* Sky Deep by default: plain Sky is 1.83:1 on Paper and fails as a glyph.
     It is only promoted to Sky on grounds where it is verified to work. */
  color: var(--sky-deep);
}
.band--ink .arc__step + .arc__step::before,
.band--teal .arc__step + .arc__step::before { color: var(--sky); }
@media (max-width: 960px) { .arc__step + .arc__step::before { content: none; } }

/* ---------- directions ---------- */
.direction { border-top-width: 5px; padding: 0; overflow: hidden; }
.direction--nb  { border-top-color: var(--direction-new-business); }
.direction--ret { border-top-color: var(--direction-retention); }
.direction--exp { border-top-color: var(--direction-expansion); }

.direction__btn {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 1.4rem 1.5rem 1.15rem; font-family: inherit; color: inherit;
  display: block;
}
.direction__btn:hover .direction__title { color: var(--sky-deep); }
/* These are <span>s. Inline elements ignore vertical margin — same trap as
   .stage__n. Everything inside a button that needs spacing must be blockified. */
.direction__eyebrow {
  display: block;
  font-size: var(--size-kicker); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--slate); margin: 0 0 .55rem; line-height: 1;
}
.direction__title {
  font-family: var(--font-head); font-size: 24px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  line-height: 1.2;
}
.direction__chev { width: 18px; height: 18px; flex: 0 0 auto; transition: transform .25s ease-out; color: var(--slate); }
.direction__btn[aria-expanded="true"] .direction__chev { transform: rotate(180deg); }
.direction__tag { display: block; font-size: var(--size-small); color: var(--slate); margin: .45rem 0 0; }
.direction__panel { padding: 0 1.5rem 1.4rem; }
.direction__panel[hidden] { display: none; }
.lever {
  border-top: 1px solid var(--line); padding: .75rem 0 .65rem;
}
.lever__name { font-weight: 700; font-size: 16px; margin-bottom: .1rem; }
.lever__q { font-size: 15px; color: var(--slate); margin-bottom: .15rem; }
.lever__m { font-size: 13.5px; color: var(--sky-deep); font-weight: 600; }

/* ---------- misdiagnosis table (hero) ----------
   "What you think it is / What it usually is." Both columns are always visible —
   the message must land without a click. The click only adds the tell. */
.mis {
  background: var(--white); border-radius: var(--radius-panel);
  box-shadow: var(--shadow-raised); overflow: hidden;
}
.mis__head {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 1rem;
  padding: .85rem 1.35rem; background: var(--teal); color: var(--white);
}
.mis__head span {
  font-size: var(--size-kicker); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.mis__head span:last-child { color: var(--menta); }
.mis__row { border-top: 1px solid var(--line); }
.mis__row:first-of-type { border-top: 0; }
.mis__btn {
  width: 100%; background: none; border: 0; cursor: pointer; font-family: inherit;
  color: var(--ink); text-align: left; padding: 1rem 1.35rem;
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 1rem; align-items: start;
  transition: background .16s ease-out;
}
.mis__btn:hover { background: var(--sky-soft); }
.mis__said {
  color: var(--slate); font-size: 16px; font-style: italic;
}
.mis__real {
  font-weight: 700; font-size: 16px; color: var(--teal);
  display: flex; gap: .45rem; align-items: baseline;
}
/* Sky Deep, not Canary. Canary on white is ~1.5:1 — as a text glyph it would be
   invisible, and it's a hard rule, not a preference. */
.mis__real::before { content: "→"; color: var(--sky-deep); font-weight: 700; flex: 0 0 auto; }
.mis__panel {
  padding: 0 1.35rem 1.1rem; font-size: 15px; color: var(--slate); background: var(--sky-soft);
}
.mis__panel[hidden] { display: none; }
.mis__panel strong { color: var(--sky-deep); }
.mis__foot {
  padding: .85rem 1.35rem; background: var(--paper);
  border-top: 1px solid var(--line); font-size: var(--size-small); color: var(--slate);
}

/* ---------- stages ---------- */
.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.stage {
  border: 0; cursor: pointer; text-align: left; font-family: inherit;
  padding: 1.05rem 1.15rem 1.25rem; border-radius: 10px; color: var(--ink);
  transition: transform .16s ease-out; min-height: 108px;
  display: flex; flex-direction: column;
}
.stage:hover { transform: translateY(-2px); }
.stage[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink) inset; }
.stage--1 { background: var(--stage-icp); }
.stage--2 { background: var(--stage-pmf); }
.stage--3 { background: var(--stage-gtm-fit); }
.stage--4 { background: var(--stage-gtm-scale); color: var(--white); }
/* Both of these are <span>. Without display:block they run together on one line —
   "STAGE 1 · GATEICP definition" — which is exactly what shipped the first time. */
.stage__n {
  display: block; font-size: var(--size-kicker); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; opacity: .72;
  margin: 0 0 .7rem; line-height: 1;
}
.stage__name {
  display: block; font-family: var(--font-head); font-size: 18px;
  font-weight: 700; line-height: 1.22; margin: 0;
}
.stage-detail {
  margin-top: 1.1rem; background: var(--white); border-radius: var(--radius-card);
  padding: 1.25rem 1.4rem; box-shadow: var(--shadow-card); border-left: 4px solid var(--teal);
}
.stage-detail p:last-child { margin-bottom: 0; }

/* ---------- timeline ---------- */
.tl { border-left: 2px solid var(--line); margin-left: .5rem; }
.tl__item { position: relative; padding: 0 0 .25rem 1.75rem; }
.tl__dot {
  position: absolute; left: -7px; top: 1.15rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--teal-mid); border: 2px solid var(--paper);
}
.tl__item--spot .tl__dot { background: var(--canary); }
.tl__btn {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: inherit; color: inherit; padding: .85rem 0 .55rem;
  display: flex; gap: .9rem; align-items: baseline;
}
.tl__wk {
  font-family: var(--font-head); font-weight: 700; color: var(--sky-deep);
  font-size: 14px; letter-spacing: .06em; text-transform: uppercase; flex: 0 0 4.5rem;
}
.tl__what { font-weight: 700; font-size: 17.5px; }
.tl__panel { padding: 0 0 1rem 5.4rem; color: var(--slate); font-size: 16px; }
.tl__panel[hidden] { display: none; }

/* ---------- tracks ---------- */
.track { border-top-width: 5px; }
.track--numbers { border-top-color: var(--track-numbers); }
.track--voices  { border-top-color: var(--track-voices); }
.track--systems { border-top-color: var(--track-systems); }
.track__label { font-size: var(--size-kicker); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }

/* ---------- callout ---------- */
.callout {
  background: var(--white); border-left: 5px solid var(--canary);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: 1.5rem 1.75rem; box-shadow: var(--shadow-card);
}
.callout--teal { border-left-color: var(--teal); }
.callout p:last-child { margin-bottom: 0; }
.band--ink .callout, .band--teal .callout { background: rgba(255,255,255,.07); box-shadow: none; }

details.disclose {
  border-top: 1px solid var(--line); padding: .85rem 0;
}
details.disclose summary {
  cursor: pointer; font-weight: 700; list-style: none;
  display: flex; align-items: center; gap: .6rem;
}
details.disclose summary::-webkit-details-marker { display: none; }
details.disclose summary::before {
  content: "+"; font-family: var(--font-head); font-size: 20px;
  color: var(--sky-deep); width: 1rem; line-height: 1;
}
details.disclose[open] summary::before { content: "\2212"; }
details.disclose > *:not(summary) { margin-top: .7rem; }

/* ---------- headshot ---------- */
.portrait { position: relative; width: 100%; max-width: 260px; }
.portrait__ring {
  border-radius: 50%; padding: 7px; background: var(--canary);
  aspect-ratio: 1; display: grid; place-items: center;
}
.portrait__ring img { border-radius: 50%; width: 100%; aspect-ratio: 1; object-fit: cover; }
.portrait--sm { max-width: 132px; }
.portrait--sm .portrait__ring { padding: 5px; }

/* ---------- posts ---------- */
.post-card { display: flex; flex-direction: column; height: 100%; }
.post-card__tag {
  font-size: var(--size-kicker); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal-mid); margin-bottom: .5rem;
}
.post-card h3 { font-size: 21px; }
.post-card__more { margin-top: auto; padding-top: .9rem; font-weight: 700; font-size: 15px; }

.article { max-width: 68ch; }
.article h2 { font-size: 28px; margin-top: 2.2rem; }
.article h3 { font-size: 21px; margin-top: 1.8rem; }
.article__meta { color: var(--slate); font-size: var(--size-small); margin-bottom: 1.5rem; }
.article blockquote {
  margin: 1.6rem 0; padding: .2rem 0 .2rem 1.25rem;
  border-left: 4px solid var(--menta); font-family: var(--font-head);
  font-size: 20px; font-style: italic; color: var(--teal);
}
.article table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: 16px; }
.article th, .article td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.article th { font-family: var(--font-head); background: var(--teal-soft); }

/* ---------- cta band ---------- */
.cta { text-align: center; }
.cta h2 { max-width: 22ch; margin-inline: auto; }
.cta .lede { margin-inline: auto; text-align: center; }
.cta .btn-row { justify-content: center; margin-top: 1.6rem; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink); color: rgba(255,255,255,.7);
  padding: 3rem 0 2.25rem; font-size: var(--size-small);
}
.site-footer a { color: var(--sky); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.site-footer h4 { color: var(--white); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .45rem; }
.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 2.25rem; padding-top: 1.25rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.site-footer .brandmark { color: var(--white); font-size: 20px; }
.site-footer .brandmark:hover { color: var(--menta); }

/* ---------- reveal ----------
   Hidden ONLY when JS is on, so a no-JS visitor sees every section. */
.js-on .reveal { opacity: 0; transform: translateY(12px); }
.js-on .reveal.is-in { opacity: 1; transform: none; transition: opacity .45s ease-out, transform .45s ease-out; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stages { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .wrap, .wrap--narrow { width: calc(100% - 2.2rem); }
  /* The hamburger only exists if JS can open it. With JS off the nav stays
     inline and wraps — ugly for one line, still fully navigable. */
  .js-on .navtoggle { display: block; }
  .js-on .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.1rem 1.1rem;
  }
  .js-on .nav.is-open { display: flex; }
  .js-off .nav { flex-wrap: wrap; gap: .9rem; margin: 0 0 .6rem; }
  .js-off .site-header__inner { flex-wrap: wrap; padding: .6rem 0; }
  .nav a.navlink { padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: .8rem; justify-content: center; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .hero__sub { font-size: 19px; }
  .tl__btn { flex-direction: column; gap: .1rem; }
  .tl__panel { padding-left: 0; }
  .site-footer__grid { grid-template-columns: 1fr; }
  /* The two columns stop being a table on a phone and become stacked pairs. */
  .mis__head { display: none; }
  .mis__btn { grid-template-columns: 1fr; gap: .35rem; padding: .95rem 1.15rem; }
  .mis__panel { padding: 0 1.15rem 1rem; }
  .stages { grid-template-columns: 1fr; }
  .stage { min-height: 0; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn:hover, .stage:hover { transform: none; }
}

/* ---------- print ---------- */
@media print {
  .site-header, .site-footer, .btn, .cta { display: none !important; }
  body { background: #fff; }
  .reveal { opacity: 1; transform: none; }
}