/* =========================================================
   Northern Pixels — BRAND EXPERIMENT
   GRAPHITE & AMBER palette on the StartupTrust layout system,
   the existing northernpixels.com homepage copy.

   Off-white paper + near-black ink, single signal-red accent.
   Tokens, type scale and component treatments are lifted from
   startuptrust.io/styles.css. Components with no StartupTrust
   equivalent (logo strip, proof cards, stat band, team cards,
   testimonials, downloads) are new, built from the same primitives.

   NOT LIVE. Nothing here affects the production site.
   ========================================================= */

:root {
  /* Palette — Graphite & Amber */
  --paper:       #F8F7F4;
  --paper-2:     #EFEDE7;
  --ink:         #171614;
  --ink-soft:    #3E3B36;
  --ink-mute:    #6E6A62;
  --dark:        #171614;
  --dark-2:      #1D1B18;
  --on-dark:     #F8F7F4;
  --on-dark-mute:#A29C92;
  --line:        #E3E0D8;
  --line-dark:   rgba(255,255,255,0.14);
  --accent:      #A54D06;
  --accent-2:    #E39445;
  --accent-ink:  #7E3A05;

  /* Type — unchanged */
  --display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Layout — unchanged */
  --maxw: 1140px;
  --readw: 720px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --radius: 12px;

  /* Aliases for legacy inline styles carried over from the old stylesheets. */
  --color-primary: #A54D06;
  --color-text: #171614;
  --color-text-muted: #6E6A62;
  --color-bg: #F8F7F4;
  --color-border: #E3E0D8;

  /* Spacing scale from the old stylesheets, still referenced inline. */
  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;   --space-5: 1.25rem;
  --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;   --space-24: 6rem;

  --space-1: 0.25rem;  --space-20: 5rem;
  --text-xs: 0.75rem;  --text-sm: 0.875rem;  --text-base: 1rem;
  --text-xl: 1.25rem;  --text-2xl: 1.5rem;
  --transition-interactive: all .18s ease;
}

/* ---------- 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(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; }
p { margin: 0 0 1.1em; }
::selection { background: var(--accent); color: #fff; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1.25rem; z-index: 100;
  font-family: var(--mono); font-size: 0.8rem;
}
.skip-link:focus { left: 0; }

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding: clamp(4.5rem, 10vw, 8rem) 0; }
.read { max-width: var(--readw); }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block; }
.section--dark .eyebrow { color: var(--accent-2); }
.section--dark .eyebrow::before { background: var(--accent-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans); font-size: 0.98rem; font-weight: 600;
  letter-spacing: 0.01em; padding: 0.85rem 1.4rem;
  border-radius: 7px; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.section--dark .btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.section--dark .btn--primary:hover { background: #fff; color: var(--ink); border-color: #fff; }
.section--dark .btn--ghost { color: var(--on-dark); border-color: var(--line-dark); }
.section--dark .btn--ghost:hover { border-color: var(--on-dark); color: var(--on-dark); }

.link-arrow {
  font-weight: 600; color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.4rem;
  border-bottom: 1.5px solid transparent;
  transition: gap .15s ease, border-color .15s ease;
}
.link-arrow:hover { gap: 0.7rem; border-color: var(--accent); }
.section--dark .link-arrow { color: var(--accent-2); }
.section--dark .link-arrow:hover { border-color: var(--accent-2); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248,247,244,0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-top: 1rem; padding-bottom: 1rem;
}
.lockup { display: flex; align-items: center; gap: 0.7rem; line-height: 1.1; }
.lockup__type { display: flex; flex-direction: column; line-height: 1.1; }
.lockup__mark { flex-shrink: 0; display: block; }
.lockup__name { font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.03em; }
.nav { display: flex; align-items: center; gap: 2rem; }
.nav a { font-size: 0.92rem; color: var(--ink-soft); transition: color .15s ease; }
.nav a:hover { color: var(--accent); }
.nav .btn { padding: 0.58rem 1.1rem; font-size: 0.9rem; }
.nav a.btn--primary, .nav a.btn--primary:hover { color: #fff !important; }
.nav__links { display: flex; gap: 1.75rem; }

/* ---------- Hero ---------- */
/* No background photograph: the StartupTrust hero is typographic, and the
   existing hero-bg.jpg is built for a dark canvas. */
.hero { padding: clamp(4rem, 11vw, 8.5rem) 0 clamp(3.5rem, 8vw, 6rem); }
.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6.6vw, 5.1rem);
  font-weight: 700; letter-spacing: -0.04em; max-width: 15ch;
}
.hero h1 .accent { color: var(--accent); }
.hero__sub {
  max-width: 46ch; font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--ink-soft); margin-top: 1.8rem;
}
/* The credibility line — given the manifesto-kicker rule treatment. */
.hero__proof {
  max-width: 54ch; margin-top: 2rem;
  border-left: 3px solid var(--accent); padding-left: 1.4rem;
  font-size: 1.12rem; color: var(--ink-soft);
}
.hero__proof strong { color: var(--ink); font-weight: 700; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.6rem; }
.hero__creds { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }
.chip {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
  border: 1px solid var(--line); background: var(--paper-2);
  border-radius: 999px; padding: 0.35rem 0.8rem;
}

/* ---------- Brand strip (was the animated marquee) ---------- */
/* Rendered static: MONO CONVICTION has no animated components. */
.brandstrip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(2.8rem, 5vw, 3.6rem) 0; }
/* The claim, not a caption. Set above the names so the argument leads and the
   evidence follows — the reverse of how this block used to read. */
.brandstrip__claim {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
  max-width: 30ch;
  margin: 0 0 1.6rem;
}
.brandstrip__claim span { color: var(--accent); }

.brandstrip__partial {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute); margin: 1.4rem 0 0;
}
/* Flex list, not inline text: each name is an atomic item, so "Johnson Controls"
   and "The New York Times" can never split across a line break. */
.brandstrip__names {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.35rem 0;
}
.brandstrip__name {
  font-family: var(--display); font-size: clamp(0.95rem, 1.7vw, 1.12rem);
  font-weight: 500; letter-spacing: -0.01em; line-height: 1.8;
  color: var(--ink-soft); white-space: nowrap;
}
.brandstrip__name::after {
  content: "/"; color: var(--line); margin: 0 0.7rem; font-weight: 400;
}
.brandstrip__name:last-child::after { content: none; }

/* ---------- Section heads ---------- */
.section__head { max-width: 30ch; margin-bottom: 1.5rem; }
.section__head h2 {
  font-family: var(--display); font-size: clamp(2rem, 4.6vw, 3.3rem);
  font-weight: 700; letter-spacing: -0.035em;
}
.section__lead { max-width: 62ch; font-size: 1.18rem; color: var(--ink-soft); }
.section__lead strong { color: var(--ink); font-weight: 700; }
.section--dark .section__lead { color: var(--on-dark-mute); }
.section--dark .section__lead strong { color: var(--on-dark); }

/* ---------- Dark sections ---------- */
.section--dark { background: var(--dark); color: var(--on-dark); }
.section--dark h2, .section--dark h3 { color: var(--on-dark); }
.kicker {
  font-family: var(--display); font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  font-weight: 600; line-height: 1.28; letter-spacing: -0.03em;
  color: var(--ink); border-left: 3px solid var(--accent);
  padding-left: 1.4rem; margin: 2.6rem 0 0; max-width: 34ch;
}
.section--dark .kicker { color: #fff; }

/* ---------- Stat band ---------- */
/* Two statistics, not four — each gets half the row and a much larger figure. */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 6vw, 4.5rem); margin-top: 3.5rem; }
.stat { border-top: 2px solid var(--ink); padding-top: 1.6rem; }
.stat__num {
  font-family: var(--display); font-size: clamp(3.2rem, 7vw, 5rem);
  font-weight: 700; letter-spacing: -0.045em; color: var(--accent); line-height: 0.95;
}
.stat__label { font-size: 1.1rem; line-height: 1.55; color: var(--ink-soft); margin: 1rem 0 0; max-width: 34ch; }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr; gap: 2.5rem; } }
.stat__source {
  display: block; margin-top: 0.5rem; font-family: var(--mono);
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute);
}

/* ---------- Generic card (the .dim primitive) ---------- */
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.9rem 1.6rem; background: var(--paper-2);
}
.card__num { font-family: var(--mono); font-size: 0.75rem; color: var(--accent); letter-spacing: 0.12em; }
.card h3 {
  font-family: var(--display); font-size: 1.35rem; font-weight: 700;
  letter-spacing: -0.02em; margin: 0.8rem 0 0.6rem;
}
.card p { color: var(--ink-soft); font-size: 1rem; margin: 0; }
.section--dark .card { background: rgba(255,255,255,0.04); border-color: var(--line-dark); }
.section--dark .card p { color: var(--on-dark-mute); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 3rem; }

/* ---------- Compare pair (Traditional GTM vs Market Shaping) ---------- */
.compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 3rem; }
.compare__col { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem 1.6rem; background: var(--paper-2); }
.compare__col--good { border-color: var(--ink); background: var(--paper); }
.compare__badge {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 1rem; display: block; color: var(--ink-mute);
}
.compare__col--good .compare__badge { color: var(--accent); }
.compare__col p { margin: 0; color: var(--ink-soft); font-size: 1rem; }

/* ---------- Pull quote ---------- */
/* Label, quote and attribution are one block. The 3.5rem gap belongs to the
   label (the first element), not the quote — otherwise the label detaches and
   drifts up against whatever sits above it. All three share the same 3px
   border + 1.5rem padding so their left edges align exactly. */
.pull {
  font-family: var(--display); font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  font-weight: 600; line-height: 1.28; letter-spacing: -0.03em;
  color: var(--ink); border-left: 3px solid var(--accent);
  padding-left: 1.5rem; margin: 0; max-width: 34ch;
}
/* The a16z quote is the strongest third-party asset on the page, so the source
   is set to be read, not squinted at. */
.pull__label {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); font-weight: 500;
  border-left: 3px solid transparent; padding-left: 1.5rem;
  margin: clamp(2.8rem, 5vw, 3.5rem) 0 0.9rem;
}
.pull__attr {
  border-left: 3px solid transparent; padding-left: 1.5rem;
  margin: 1.4rem 0 0;
}
.pull__attr strong {
  display: block; font-family: var(--display); font-size: 1.15rem;
  font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
}
.pull__attr span {
  display: block; font-family: var(--sans); font-size: 0.95rem;
  font-weight: 600; color: var(--accent); margin-top: 0.2rem;
}

/* ---------- Proof cards ---------- */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3rem; }
.proof-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.9rem 1.6rem; background: var(--paper-2);
  display: flex; flex-direction: column;
}
.proof-card__logos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem;
  min-height: 34px; margin-bottom: 1.4rem;
}
/* Greyscale, not flat black. brightness(0) collapses every mark to a silhouette —
   Shell's pecten became an unrecognisable blob and AT&T's globe lost its banding.
   grayscale() removes the colour that would compete with the accent while keeping
   the tonal detail that makes a logo readable. Nine of the eleven assets are
   already monochrome; this only really acts on McKinsey and Deloitte. */
.proof-card__logo { max-height: 26px; width: auto; filter: grayscale(100%); opacity: 0.85; }
.proof-card__cat {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.8rem;
}
.proof-card__story { color: var(--ink-soft); font-size: 1rem; margin: 0; }
.proof-tagline {
  font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 700; letter-spacing: -0.035em; color: var(--ink);
  margin: 3rem 0 0; max-width: 20ch;
}

/* ---------- Pricing panel (the .invite primitive) ---------- */
.panel {
  background: var(--ink); color: var(--on-dark);
  border-radius: 16px; padding: clamp(2.5rem, 6vw, 4rem);
  margin-top: 3rem;
}
.panel .eyebrow { color: var(--accent-2); }
.panel .eyebrow::before { background: var(--accent-2); }
.panel__figure {
  font-family: var(--display); font-size: clamp(2.8rem, 7vw, 4.2rem);
  font-weight: 700; letter-spacing: -0.04em; color: #fff; line-height: 1;
}
.panel__figure small {
  font-family: var(--mono); font-size: 0.2em; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-dark-mute); margin-left: 0.6rem;
}
.panel p { color: var(--on-dark-mute); font-size: 1.1rem; max-width: 56ch; margin-top: 1.4rem; }
.panel p strong { color: #fff; font-weight: 700; }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 5vw, 3.5rem); margin-top: 3rem; }
.member__photo {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  margin-bottom: 1.4rem;
}
.member__name { font-family: var(--display); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; margin: 0; }
.member__role { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0.5rem 0 1.2rem; }
.member__bio { color: var(--ink-soft); font-size: 1.05rem; }
.member__tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.2rem; }

/* ---------- Testimonials ---------- */
.quote {
  border-left: 3px solid var(--accent-2); padding-left: 1.6rem;
  display: flex; flex-direction: column; height: 100%;
}
.grid-2 { align-items: stretch; }
.quote__badge {
  font-family: var(--mono); font-size: 1.32rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-2); display: block;
  margin-bottom: 1.4rem; line-height: 1.2; font-weight: 500;
}
@media (max-width: 640px) { .quote__badge { font-size: 1.05rem; } }
.quote__text {
  font-family: var(--display); font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 500; line-height: 1.35; letter-spacing: -0.025em; color: #fff; margin: 0;
}
.quote__author { display: flex; align-items: center; gap: 0.9rem; margin-top: auto; padding-top: 1.8rem; }
.quote__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; filter: grayscale(100%); }
.quote__who { font-size: 0.95rem; color: var(--on-dark-mute); }
.quote__who b { color: var(--on-dark); font-weight: 600; display: block; }

/* ---------- Contact ---------- */
.contact { background: var(--dark); color: var(--on-dark); }
.contact h2 {
  font-family: var(--display); font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-weight: 700; letter-spacing: -0.035em; color: #fff; max-width: 16ch;
}
.contact__intro { color: var(--on-dark-mute); font-size: 1.12rem; margin-top: 1.3rem; max-width: 48ch; }
.contact__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 2.4rem; }
.contact__email { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--on-dark-mute); margin-top: 2rem; }
.contact__email a { color: var(--accent-2); border-bottom: 1px solid transparent; }
.contact__email a:hover { border-color: var(--accent-2); }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark-2); color: var(--on-dark-mute); padding: 3.5rem 0 2.5rem; }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; align-items: center; }
.site-footer .lockup__name { color: var(--on-dark); font-size: 1.12rem; }
.site-footer .footer-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.92rem; }
.footer-nav a { color: var(--on-dark-mute); transition: color .15s ease; }
.footer-nav a:hover { color: var(--accent-2); }
.site-footer__copy {
  margin: 2.25rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line-dark);
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em; color: var(--on-dark-mute);
}


/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .proof-grid, .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nav__links { display: none; }
  .proof-grid, .grid-3, .grid-2, .compare, .team-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .nav { gap: 0.9rem; }
  .site-header__inner { gap: 0.75rem; }
  .stats { grid-template-columns: 1fr; }
}

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

/* =========================================================================
   RETHEME LAYER
   The inner pages keep their original markup; these rules map their existing
   class names onto the Graphite & Amber system. Nothing here changes content.
   ========================================================================= */

/* ---------- Shared primitives ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.container--narrow { max-width: 820px; }

.section, .ms-section, .cs-section {
  padding: clamp(4.5rem, 10vw, 8rem) 0;
  background: var(--paper);
  color: var(--ink);
}
.section--alt, .ms-section--alt, .cs-section--alt { background: var(--paper-2); }
.section--dark { background: var(--dark); color: var(--on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--on-dark); }

/* Section label -> the brand eyebrow (rule + mono caps) */
.section__label {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 1.4rem; display: inline-flex; align-items: center; gap: 0.6rem;
}
.section__label::before { content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block; }
.section--dark .section__label { color: var(--accent-2); }
.section--dark .section__label::before { background: var(--accent-2); }

.section__title {
  font-family: var(--display); font-size: clamp(2rem, 4.6vw, 3.3rem);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.04;
  color: var(--ink); margin: 0 0 1.2rem; max-width: 24ch;
}
.section--dark .section__title { color: var(--on-dark); }
.section__desc { max-width: 62ch; font-size: 1.18rem; color: var(--ink-soft); }
.section--dark .section__desc { color: var(--on-dark-mute); }

/* ---------- Buttons ---------- */
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans); font-size: 0.98rem; font-weight: 600;
  padding: 0.85rem 1.4rem; border-radius: 7px; border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary:hover, .btn-secondary:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.section--dark .btn-primary, .contact .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.section--dark .btn-primary:hover, .contact .btn-primary:hover { background: #fff; color: var(--ink); border-color: #fff; }
.section--dark .btn-secondary, .contact .btn-secondary { color: var(--on-dark); border-color: var(--line-dark); }
.section--dark .btn-secondary:hover, .contact .btn-secondary:hover { border-color: var(--on-dark); color: var(--on-dark); }

/* ---------- Header / nav ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248,247,244,0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem 0; }
.header__logo { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); }
.header__logo-text { font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.header__nav { display: flex; align-items: center; gap: 1.75rem; }
.header__nav a { font-size: 0.92rem; color: var(--ink-soft); text-decoration: none; transition: color .15s ease; }
.header__nav a:hover, .header__nav-active, .header__nav .is-active { color: var(--accent); }
.header__cta {
  background: var(--ink) !important; color: #fff !important; border: 1.5px solid var(--ink);
  padding: 0.58rem 1.1rem; border-radius: 7px; font-weight: 600; font-size: 0.9rem;
}
.header__cta:hover { background: var(--accent) !important; border-color: var(--accent); }
.theme-toggle { display: none; }        /* single-theme brand — no dark/light switch */
.mobile-menu-btn { display: none; background: none; border: 0; color: var(--ink); cursor: pointer; }

.mobile-nav {
  position: fixed; inset: 0; z-index: 100; background: var(--paper);
  display: none; flex-direction: column; align-items: flex-start;
  gap: 1.4rem; padding: 5rem var(--pad);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a { font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -0.03em; }
.mobile-nav a:hover { color: var(--accent); }
.mobile-nav__close { position: absolute; top: 1.5rem; right: var(--pad); background: none; border: 0; color: var(--ink); cursor: pointer; }

@media (max-width: 860px) {
  .header__nav { display: none; }
  .mobile-menu-btn { display: block; }
}

/* ---------- Footer ---------- */
.footer { background: var(--dark-2); color: var(--on-dark-mute); padding: 3.5rem 0 2.5rem; }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; align-items: center; }
.footer__copy { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em; color: var(--on-dark-mute); margin: 0; }
.footer__links, .footer__contact { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.92rem; }
.footer__links a, .footer__contact a { color: var(--on-dark-mute); text-decoration: none; transition: color .15s ease; }
.footer__links a:hover, .footer__contact a:hover { color: var(--accent-2); }

/* ---------- Contact block ---------- */
.contact { background: var(--dark); color: var(--on-dark); }
.contact .section__title, .contact__title { color: #fff; }
.contact .section__desc, .contact__desc { color: var(--on-dark-mute); }
.contact__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }
.contact__email { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.05em; color: var(--on-dark-mute); margin-top: 1.8rem; }
.contact__email a { color: var(--accent-2); text-decoration: none; border-bottom: 1px solid transparent; }
.contact__email a:hover { border-color: var(--accent-2); }
.contact__scarcity { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-mute); margin-top: 1.4rem; }
.ms-cta-emphasis { color: var(--accent-2) !important; font-weight: 600; }

/* ---------- Callout (8x Gartner) ---------- */
.callout { background: var(--dark); color: var(--on-dark); padding: clamp(3rem,7vw,5rem) 0; }
.callout__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; }
.callout__accent { display: none; }
.callout__stat { font-family: var(--display); font-size: clamp(3rem,8vw,5rem); font-weight: 700; color: var(--accent-2); letter-spacing: -0.04em; margin: 0; line-height: 1; }
.callout__quote { font-family: var(--display); font-size: clamp(1.2rem,2.6vw,1.8rem); font-weight: 500; color: var(--on-dark); letter-spacing: -0.025em; line-height: 1.3; margin: 0; max-width: 40ch; }
.callout__source { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-mute); margin: 0.8rem 0 0; }

/* ---------- Market Shaping page ---------- */
/* Light hero. Reversed body copy is hard work over 60 words, and harder still
   on a phone — so every hero on the site now opens on paper. */
.ms-hero { background: var(--paper); color: var(--ink); padding: clamp(5rem,11vw,9rem) 0 clamp(4rem,8vw,6rem); position: relative; border-bottom: 1px solid var(--line); }
.ms-hero__bg, .ms-hero__grid { display: none; }
.ms-hero__content { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); position: relative; }
.ms-hero__eyebrow {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1.4rem; display: inline-flex; align-items: center; gap: 0.6rem;
}
.ms-hero__eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block; }
.ms-hero__title {
  font-family: var(--display); font-size: clamp(2.4rem, 5.8vw, 4.4rem); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1.04; color: var(--ink); margin: 0 0 1.8rem; max-width: 20ch;
}
.ms-hero__subtitle { max-width: 58ch; font-size: clamp(1.05rem,1.9vw,1.25rem); color: var(--ink-soft); }
.ms-breadcrumb, .cs-breadcrumb, .article-breadcrumb {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 1.6rem;
}
.ms-breadcrumb a, .cs-breadcrumb a, .article-breadcrumb a { color: var(--ink-mute); text-decoration: none; }
.ms-breadcrumb a:hover, .cs-breadcrumb a:hover, .article-breadcrumb a:hover { color: var(--accent); }
.article-breadcrumb__sep { opacity: 0.5; margin: 0 0.4rem; }
.article-breadcrumb__current { color: var(--accent); }

.ms-questions { background: var(--paper-2); padding: clamp(3rem,7vw,5rem) 0; }
.ms-questions__lead { font-family: var(--display); font-size: clamp(1.3rem,2.6vw,1.9rem); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); max-width: var(--maxw); margin: 0 auto 2rem; padding: 0 var(--pad); }
.ms-questions__grid { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px,100%),1fr)); gap: 1.25rem; }
.ms-questions__item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 1.7rem 1.5rem; }
.ms-questions__item p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; }
.ms-questions__icon { display: none; }

.ms-body-text { max-width: 66ch; font-size: 1.12rem; color: var(--ink-soft); }
.ms-subheading { font-family: var(--display); font-size: clamp(1.3rem,2.4vw,1.7rem); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); margin: 2.5rem 0 1.5rem; }
.ms-two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px,100%),1fr)); gap: clamp(2rem,5vw,3.5rem); align-items: start; }
.ms-two-col__text p { max-width: 60ch; color: var(--ink-soft); font-size: 1.1rem; }
.ms-checklist { list-style: none; padding: 0; margin: 0; }
.ms-checklist li { position: relative; padding: 0.85rem 0 0.85rem 1.9rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 1.02rem; }
.ms-checklist li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

.ms-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px,100%),1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.ms-pillar { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 1.9rem 1.6rem; }
.ms-section--alt .ms-pillar { background: var(--paper); }
.ms-pillar__number { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 0.8rem; }
.ms-pillar__title { font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 0.6rem; }
.ms-pillar__desc { color: var(--ink-soft); font-size: 1rem; margin: 0; }

.ms-outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px,100%),1fr)); gap: clamp(1.5rem,4vw,2.5rem); margin-top: 2.5rem; }
.ms-outcome__icon { display: none; }
.ms-outcome { border-top: 2px solid var(--ink); padding-top: 1.3rem; }
.ms-outcome__title { font-family: var(--display); font-size: 1.45rem; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 0.8rem; }
.ms-outcome__desc { color: var(--ink-soft); font-size: 1.02rem; margin: 0; }

.ms-faq { display: grid; gap: 0; margin-top: 2rem; }
.ms-faq__item, .faq-item { border-bottom: 1px solid var(--line); padding: 1.6rem 0; }
.ms-faq__question, .faq-question { font-family: var(--display); font-size: clamp(1.15rem,2.2vw,1.45rem); font-weight: 700; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 0.8rem; }
.ms-faq__answer, .faq-answer { color: var(--ink-soft); font-size: 1.05rem; max-width: 70ch; margin: 0; }

/* ---------- Case study pages ---------- */
.cs-hero { background: var(--paper); color: var(--ink); padding: clamp(5rem,11vw,9rem) 0 clamp(4rem,8vw,6rem); border-bottom: 1px solid var(--line); }
.cs-hero__bg { display: none; }
.cs-hero__content { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.cs-hero__badge {
  display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(165,77,6,0.35); border-radius: 999px; padding: 0.35rem 0.85rem; margin-bottom: 1.6rem;
}
.cs-hero__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
.cs-hero__title { font-family: var(--display); font-size: clamp(2.3rem,5.4vw,4.1rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; color: var(--ink); margin: 0 0 1.6rem; max-width: 20ch; }
.cs-hero__subtitle { max-width: 58ch; font-size: clamp(1.05rem,1.9vw,1.25rem); color: var(--ink-soft); }

.cs-snapshot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px,100%),1fr)); gap: 1.5rem; margin-top: 2.5rem; }
/* This block sits inside .cs-hero, which is ink-coloured — everything here is
   set for a dark background. Styling it as light-on-light made it invisible. */
.cs-snapshot__item { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.cs-snapshot__label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.6rem; }
.cs-snapshot__value { font-family: var(--display); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.3; color: var(--ink); }

.cs-two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px,100%),1fr)); gap: clamp(2rem,5vw,3.5rem); align-items: start; margin-top: 2rem; }
.cs-col-heading { font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 1.2rem; }
.cs-list { list-style: none; padding: 0; margin: 0; }
.cs-list li { position: relative; padding: 0.8rem 0 0.8rem 1.9rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 1.02rem; }
.cs-list--challenge li::before { content: "✘"; position: absolute; left: 0; color: var(--ink-mute); }
.cs-list--strategy li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

.cs-outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px,100%),1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.cs-outcome-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 1.9rem 1.6rem; }
.cs-outcome-card__title { font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 0.6rem; }
.cs-outcome-card__desc { color: var(--ink-soft); font-size: 1rem; margin: 0; }

.cs-quote { border-left: 3px solid var(--accent); padding-left: 1.8rem; margin: 3rem 0 0; max-width: 66ch; }
.cs-quote__badge {
  font-family: var(--mono); font-size: 1.32rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); display: block; margin-bottom: 1.4rem; line-height: 1.2; font-weight: 500;
}
.cs-quote__text { font-family: var(--display); font-size: clamp(1.25rem,2.5vw,1.75rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.025em; color: var(--ink); margin: 0; }
.cs-quote__author { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.8rem; }
.cs-quote__photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cs-quote__who { display: block; }
.cs-quote__name { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--ink); display: block; letter-spacing: 0; text-transform: none; }
.cs-quote__role { font-family: var(--sans); font-size: 0.92rem; color: var(--ink-mute); display: block; margin-top: 0.15rem; letter-spacing: 0; text-transform: none; }
@media (max-width: 640px) { .cs-quote__badge { font-size: 1.05rem; } }

.cs-cross-promo {
  display: block; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-2); padding: 2rem 2.2rem; margin-top: 3.5rem;
  text-decoration: none; color: inherit;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.cs-cross-promo:hover { border-color: var(--ink); background: var(--paper); transform: translateY(-2px); }
.cs-cross-promo__label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.7rem; }
.cs-cross-promo__title {
  font-family: var(--display); font-size: clamp(1.3rem,2.6vw,1.75rem); font-weight: 700;
  letter-spacing: -0.028em; color: var(--ink); margin: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.cs-cross-promo__title span { color: var(--accent); }
.cs-cross-promo__arrow { color: var(--ink-mute); flex-shrink: 0; transition: transform .18s ease, color .18s ease; }
.cs-cross-promo:hover .cs-cross-promo__arrow { transform: translateX(5px); color: var(--accent); }

/* ---------- Perspectives index ---------- */
.persp-hero { background: var(--paper); color: var(--ink); padding: clamp(5rem,10vw,8rem) 0 clamp(3rem,6vw,4.5rem); border-bottom: 1px solid var(--line); }
.persp-hero__title { font-family: var(--display); font-size: clamp(2.4rem,5.6vw,4.2rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.04; color: var(--ink); margin: 0 0 1.4rem; }
.persp-hero__desc { max-width: 58ch; font-size: clamp(1.05rem,1.9vw,1.25rem); color: var(--ink-soft); }

.persp-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 2.5rem; }
.persp-filter-pill {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px solid var(--line); background: var(--paper);
  border-radius: 999px; padding: 0.45rem 0.95rem; cursor: pointer; transition: all .15s ease;
}
.persp-filter-pill:hover { border-color: var(--ink); color: var(--ink); }
.persp-filter-pill--active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.persp-list { padding: clamp(3.5rem,8vw,6rem) 0; background: var(--paper); }
.persp-list__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px,100%),1fr)); gap: 1.5rem; }

.persp-card {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2);
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.persp-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.persp-card--full, .persp-card--pinned { grid-column: 1 / -1; }
.persp-card__image, .persp-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; filter: grayscale(100%); }
.persp-card__body { padding: 1.7rem 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.persp-card__featured-badge {
  align-self: flex-start; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff; background: var(--accent); border-radius: 4px; padding: 0.25rem 0.6rem;
}
.persp-card__title { font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.028em; line-height: 1.18; color: var(--ink); margin: 0; }
.persp-card--full .persp-card__title, .persp-card--pinned .persp-card__title { font-size: clamp(1.6rem,3vw,2.2rem); }
.persp-card__excerpt, .persp-card__desc { color: var(--ink-soft); font-size: 1rem; margin: 0; }
.persp-card__byline, .persp-card__footer, .persp-card__meta {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.9rem;
}
.persp-card__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-mute); display: inline-block; }
.persp-card__category, .article-category {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.persp-card a, .persp-card__link { color: inherit; text-decoration: none; }
.persp-contact { background: var(--dark); color: var(--on-dark); }

/* ---------- Article pages ---------- */
.article-page { background: var(--paper); padding-top: clamp(3.5rem,8vw,6rem); }
/* Was `padding` on the <img> itself, which inflated the image box by 96px of dead
   space. Same visual gap, but as margin it belongs to the layout, not the image. */
.article-hero { background: var(--paper); margin: clamp(3.5rem,8vw,6rem) 0 0; }
.article-container { max-width: 780px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.article-header { padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); margin-bottom: 3rem; }
.article-title {
  font-family: var(--display); font-size: clamp(2.2rem,5vw,3.6rem); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1.05; color: var(--ink); margin: 1.2rem 0 1.4rem;
}
.article-byline { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.article-byline__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-mute); display: inline-block; }

.article-body { max-width: 720px; margin: 0 auto; padding-bottom: 4rem; }
.article-body p { font-size: 1.16rem; line-height: 1.72; color: var(--ink-soft); margin: 0 0 1.5rem; }
.article-body h2 { font-family: var(--display); font-size: clamp(1.6rem,3.4vw,2.3rem); font-weight: 700; letter-spacing: -0.032em; color: var(--ink); margin: 3rem 0 1.2rem; }
.article-body h3 { font-family: var(--display); font-size: clamp(1.25rem,2.4vw,1.6rem); font-weight: 700; letter-spacing: -0.028em; color: var(--ink); margin: 2.2rem 0 1rem; }
.article-body strong { color: var(--ink); font-weight: 700; }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-body ul, .article-body ol { padding-left: 0; list-style: none; margin: 0 0 1.6rem; }
.article-body li { position: relative; padding: 0.55rem 0 0.55rem 1.7rem; font-size: 1.12rem; line-height: 1.65; color: var(--ink-soft); }
.article-body ul li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.article-body ol { counter-reset: li; }
.article-body ol li::before { counter-increment: li; content: counter(li,decimal-leading-zero); position: absolute; left: 0; font-family: var(--mono); font-size: 0.8rem; color: var(--accent); }
.article-body blockquote {
  border-left: 3px solid var(--accent); padding-left: 1.6rem; margin: 2.5rem 0;
  font-family: var(--display); font-size: clamp(1.25rem,2.6vw,1.7rem); font-weight: 500;
  line-height: 1.35; letter-spacing: -0.025em; color: var(--ink);
}
.article-body img { border-radius: var(--radius); margin: 2rem 0; }
.article-body hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

.article-table-wrap { overflow-x: auto; margin: 2rem 0; }
.article-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.article-table th, .article-table td { text-align: left; padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.article-table th { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); border-bottom-color: var(--ink); }

.article-faq { margin: 3rem 0; }
.article-faq__heading { font-family: var(--display); font-size: clamp(1.6rem,3.2vw,2.2rem); font-weight: 700; letter-spacing: -0.032em; color: var(--ink); margin: 0 0 1.5rem; }

.article-bio { border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 2rem; color: var(--ink-soft); font-size: 1.02rem; }
.article-bio strong { color: var(--ink); }
.article-back, .article-footer__back {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute); text-decoration: none; display: inline-flex; gap: 0.5rem;
}
.article-back:hover, .article-footer__back:hover { color: var(--accent); }
.article-footer { border-top: 1px solid var(--line); margin-top: 3rem; padding: 2.5rem 0 4rem; }
.article-related { border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 2rem; }
.article-related__label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem; }
.article-related__link { font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.028em; color: var(--ink); text-decoration: none; }
.article-related__link:hover { color: var(--accent); }
.article-related__text { color: var(--ink-soft); font-size: 1rem; margin-top: 0.5rem; }

/* ---------- Testimonials (market-shaping page) ---------- */
.testimonials__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px,100%),1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.testimonial { border-left: 3px solid var(--accent); padding-left: 1.6rem; }
.testimonial__quote { font-family: var(--display); font-size: clamp(1.1rem,2.2vw,1.4rem); font-weight: 500; line-height: 1.38; letter-spacing: -0.025em; color: var(--ink); margin: 0; }
.testimonial__author { margin-top: 1.2rem; }
.testimonial__name { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); display: block; }
.testimonial__role { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); display: block; margin-top: 0.25rem; }
.testimonial__outcome { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); display: block; margin-top: 0.5rem; }

/* Fade-in used across inner pages */
.fade-in { opacity: 1; }

/* ---------- Remaining legacy classes (caught in coverage audit) ---------- */
.ms-two-col__list { list-style: none; padding: 0; margin: 0; }

.persp-card__img-wrap { display: block; overflow: hidden; background: var(--paper-2); }
.persp-card__img-wrap img { width: 100%; aspect-ratio: 16/9; object-fit: cover; filter: grayscale(100%); transition: filter .2s ease, transform .3s ease; }
.persp-card:hover .persp-card__img-wrap img { filter: grayscale(0%); transform: scale(1.02); }

.persp-card__teaser { color: var(--ink-soft); font-size: 1rem; margin: 0; }

.persp-card__pub-row { display: flex; align-items: center; gap: 0.6rem; }
.persp-card__pub-row img { max-height: 18px; width: auto; filter: grayscale(100%) brightness(0); opacity: 0.7; }
.persp-card__pub-name--fallback {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute);
}

.persp-card__read-link {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.3rem; transition: gap .15s ease;
}
.persp-card__read-link:hover { gap: 0.7rem; }

/* ---------- /work page ---------- */
.work-header { padding-bottom: clamp(2rem, 5vw, 3rem); }
.work-header__title {
  font-family: var(--display); font-size: clamp(2.4rem, 5.6vw, 4.2rem);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1.04; color: var(--ink);
  margin: 0; max-width: 18ch;
}
.work-case {
  display: grid; grid-template-columns: 260px 1fr; gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start; padding: clamp(2.5rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--line);
}
.work-case__index {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.4rem;
}
.work-case__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.work-case__logo { max-height: 30px; width: auto; filter: grayscale(100%); opacity: 0.85; }
.work-case__name {
  font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700;
  letter-spacing: -0.03em; color: var(--ink); margin: 0 0 1rem;
}
.work-case__story { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.7; max-width: 66ch; margin: 0; }

.work-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px,100%),1fr)); gap: 1.25rem; margin-top: 3.5rem; }
.work-link {
  border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 1.6rem 1.7rem;
  text-decoration: none; display: block; transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.work-link:hover { border-color: var(--accent-2); background: rgba(255,255,255,0.03); transform: translateY(-2px); }
.work-link__label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2); display: block; margin-bottom: 0.5rem; }
.work-link__title { font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.028em; color: var(--on-dark); display: block; }
.work-link:hover .work-link__title span { margin-left: 0.3rem; }
.work-link__title span { transition: margin-left .18s ease; display: inline-block; }

@media (max-width: 860px) { .work-case { grid-template-columns: 1fr; gap: 1.4rem; } }

/* ---------- Mobile drawer (shared) ---------- */
body.nav-open { overflow: hidden; }
.mobile-nav {
  position: fixed; inset: 0; z-index: 100; background: var(--paper);
  display: none; flex-direction: column; align-items: flex-start;
  gap: 1.4rem; padding: 6rem var(--pad) 3rem;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  font-family: var(--display); font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 700;
  color: var(--ink); text-decoration: none; letter-spacing: -0.03em;
}
.mobile-nav a:hover { color: var(--accent); }
.mobile-nav__close { position: absolute; top: 1.6rem; right: var(--pad); background: none; border: 0; color: var(--ink); cursor: pointer; padding: 0.5rem; }
.mobile-menu-btn { display: none; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 0.4rem; }
@media (max-width: 860px) {
  .nav__links { display: none; }
  .mobile-menu-btn { display: block; }

  /* Header CTA hidden once the hamburger appears — the button and the menu icon
     side by side crowded the bar on phones. The CTA still sits at the bottom of
     the drawer, and every page carries its own call to action in the body. */
  .nav .btn--primary,
  .header__cta { display: none; }
}

/* In the drawer the CTA is the primary action, so it reads as one. */
.mobile-nav a[href*="scheduler.zoom.us"] {
  color: var(--accent);
  margin-top: 0.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  width: 100%;
}

.work-case__aside { min-width: 0; }
.work-case__main  { min-width: 0; }



/* ---------- /about ---------- */
.about-header { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.about-header__title {
  font-family: var(--display); font-size: clamp(2.4rem, 5.6vw, 4.2rem);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1.04;
  color: var(--ink); margin: 0; max-width: 18ch;
}

/* Stacked full-width blocks, not side-by-side cards — cards would force both
   biographies to equal length and flatten the seniority difference.
   The photo column collapses cleanly if no image is supplied. */
.person {
  display: grid; grid-template-columns: 200px 1fr; gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start; padding: clamp(2.5rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--line);
}
.person__aside:empty { display: none; }
.person__photo { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; }
.person__name {
  font-family: var(--display); font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700;
  letter-spacing: -0.035em; color: var(--ink); margin: 0;
}
.person__role {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin: 0.6rem 0 1.6rem;
}
.person__main p { font-size: 1.12rem; line-height: 1.7; color: var(--ink-soft); max-width: 66ch; margin: 0 0 1.2rem; }
.person__main p:last-child { margin-bottom: 0; }
.person__main a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Three exits — compact entries of equal weight, no cards. */
.exit-list { margin-top: 3rem; border-top: 1px solid var(--line); }
.exit-entry { padding: clamp(1.8rem, 4vw, 2.5rem) 0; border-bottom: 1px solid var(--line); }
.exit-entry__name {
  font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700;
  letter-spacing: -0.03em; color: var(--ink); margin: 0;
}
.exit-entry__meta {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute); margin: 0.6rem 0 1rem;
}
.exit-entry__meta span { color: var(--accent); margin: 0 0.3rem; }
.exit-entry__desc { font-size: 1.08rem; line-height: 1.7; color: var(--ink-soft); max-width: 68ch; margin: 0; }

/* The constraint carries the section, so it is set larger than the price panel
   beneath it rather than reading as a caveat attached to pricing. */
.four-clients__title {
  font-family: var(--display); font-size: clamp(2.2rem, 5.4vw, 4rem); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1.05; color: var(--ink); margin: 0; max-width: 16ch;
}
.four-clients__body { max-width: 68ch; margin-top: 2.2rem; }
.four-clients__body p { font-size: 1.15rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 1.3rem; }
.four-clients__body p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .person { grid-template-columns: 1fr; gap: 1.6rem; }
  .person__photo { width: 140px; height: 140px; }
}


/* ---------- Forrester band: claim leads, figures follow ---------- */
.stats__claim {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.25;
  color: var(--ink); max-width: 30ch;
  margin: clamp(2.8rem, 5vw, 3.6rem) 0 0;
}
.stats__claim + .stats { margin-top: 2rem; }
.stats__source {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); margin: 1.6rem 0 0;
}

/* ---------- 8x, relocated under the a16z quote ---------- */
/* Kept visually separate from the quote so a Gartner figure is never read as
   something a16z said. */
.method-stat {
  display: flex; align-items: flex-start; gap: clamp(1.2rem, 3vw, 2rem);
  margin-top: 2.6rem; padding-top: 2rem;
  border-top: 1px solid var(--line);
  max-width: 62ch;
}
.method-stat__num {
  font-family: var(--display); font-size: clamp(2.6rem, 5.5vw, 3.6rem);
  font-weight: 700; letter-spacing: -0.045em; color: var(--accent);
  line-height: 0.95; flex-shrink: 0;
}
.method-stat__label { font-size: 1.05rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.method-stat__source {
  display: block; margin-top: 0.5rem; font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
}
@media (max-width: 560px) { .method-stat { flex-direction: column; gap: 0.8rem; } }


/* ---------- Brand strip on mobile ----------
   At 375px the 29 names wrap to ~11 lines — roughly 300px of undifferentiated
   text as the second thing on the page, which stalls the scroll before the
   argument starts. Below 640px only the twelve strongest show. The list is
   already labelled "A partial list", so a shorter list is the same promise
   honestly kept, not hidden content. */
@media (max-width: 640px) {
  .brandstrip__name:not(.brandstrip__name--key) { display: none; }
  .brandstrip__name { line-height: 1.75; }
  /* :last-child sits on a hidden item here, so the trailing slash is removed
     from the last *visible* name instead — the one with no key sibling after it. */
  .brandstrip__name--key:not(:has(~ .brandstrip__name--key))::after { content: none; }
}