:root {
  --ink: #111315;
  --ink-2: #1b1e21;
  --graphite: #303438;
  --steel: #70777d;
  --silver: #b7bcc0;
  --mist: #e3e5e5;
  --paper: #f3f2ee;
  --white: #fbfbf8;
  --orange: #f25a24;
  --orange-dark: #d84816;
  /* Small orange label text on light backgrounds. The bright brand orange only hits
     3.0:1 on paper, which fails WCAG AA for text under 18.66px; this clears 4.5:1. */
  --orange-label: #c2440f;
  /* --accent is the contextual orange: every orange detail on the page reads from it,
     so a section only ever shows ONE orange. Light backgrounds get the AA-safe tone;
     dark sections below reset it to the full brand orange. */
  --accent: var(--orange-label);
  --accent-hover: #9e360c;
  --serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
  --sans: Inter, Avenir Next, Avenir, Helvetica Neue, Arial, sans-serif;
  --max: 1200px;
  --pad: clamp(22px, 5vw, 72px);
  --section: clamp(76px, 9vw, 132px);
  --radius: 2px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid #ffb394; outline-offset: 4px; }
.wrap { width: min(calc(100% - 2 * var(--pad)), var(--max)); margin-inline: auto; }
/* Dark sections: the bright brand orange already clears AA here (5.3:1), so every
   orange detail inside them inherits the vivid tone from this single rule. */
.hero,
.page-hero,
.thinking,
.companies,
.final-cta,
.site-footer { --accent: var(--orange); --accent-hover: var(--orange-dark); }

.eyebrow,
.kicker {
  margin: 0 0 18px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Orange emphasis inside a headline. */
.accent { color: var(--accent); }

/* ---- Shared content primitives -------------------------------------------
   These replace what used to be repeated inline style attributes. Anything
   styled here inherits --accent and the type scale automatically. */

/* Visually hidden, still read by screen readers and search engines. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; }

/* Prose block. Works as a wrapper (<div class="body-copy"><p>…) or on a
   single paragraph (<p class="body-copy">). Colour follows the section. */
div.body-copy { margin-top: 16px; }   /* wrapper only; a standalone p.body-copy keeps normal flow */
.body-copy p, p.body-copy { max-width: 720px; margin-bottom: 18px; color: #4a4f53; }
.body-copy p:last-child, p.body-copy:last-child { margin-bottom: 0; }
.thinking .body-copy p, .thinking p.body-copy,
.companies .body-copy p, .companies p.body-copy { max-width: 760px; color: #b6bbbd; }

/* Small caps label that introduces a list or a field. */
.field-label { margin: 28px 0 0; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.category-card .field-label { margin-top: 22px; color: var(--accent); }  /* beats .category-card > p */

/* Inline link that should carry the accent colour. */
.link-accent { color: var(--accent); font-weight: 700; }

/* Caps a heading's line length without touching the global scale. */
.measure { max-width: 900px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; }
h1 { max-width: 750px; margin-bottom: 28px; font-size: clamp(55px, 6.7vw, 98px); line-height: .98; }
h2 { margin-bottom: 26px; font-size: clamp(40px, 4.5vw, 66px); line-height: 1.04; }
h3 { margin-bottom: 14px; font-size: 20px; line-height: 1.25; }
.lede { max-width: 680px; color: #50565b; font-size: clamp(19px, 2vw, 24px); line-height: 1.5; }

/* Statement line under a section headline. Wider measure than .lede (~75 characters)
   so it sits comfortably above a full-width grid instead of reading as a narrow column. */
.section-deck { max-width: 900px; margin: 0 0 26px; color: #50565b; font-size: clamp(19px, 2vw, 24px); line-height: 1.5; }
.thinking .section-deck, .companies .section-deck, .final-cta .section-deck, .page-hero .section-deck { color: #afb4b7; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 22px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .055em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-2px); }
.button.ghost { background: transparent; color: #fff; }
.button.ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.button.on-light { color: var(--ink); }
.text-link { font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.text-link:hover { color: var(--accent-hover); }

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  color: #fff;
  background: transparent;
  transition: background-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
}
/* Once the visitor scrolls off the hero, the bar gets a solid backing so it stays legible over light sections. */
.site-header.is-scrolled {
  background: rgba(12, 14, 15, .93);
  box-shadow: 0 1px 0 rgba(255,255,255,.10), 0 10px 30px rgba(0,0,0,.30);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88px;
  border-bottom: 1px solid rgba(255,255,255,.17);
  transition: min-height .28s ease, border-color .28s ease;
}
.site-header.is-scrolled .nav { min-height: 70px; border-bottom-color: transparent; }
.brand { display: flex; align-items: baseline; gap: 13px; color: #fff; text-decoration: none; }
.brand-mark { flex: none; align-self: center; }
/* Fluid, because "Mark Davidson" is three characters wider than the name that used to
   sit here and at ~1000px it collided with the nav links, which are still all visible
   until the 900px breakpoint. */
.brand strong {
  font-family: var(--serif);
  font-size: clamp(17px, 1.62vw, 21px);   /* all caps runs ~18% wider than mixed case, so the fluid range steps down to match */
  font-weight: 600;
  letter-spacing: .035em;                 /* caps need positive tracking; the old -.02em was tuned for mixed case */
  text-transform: uppercase;
}
.brand span { color: var(--silver); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: clamp(17px, 1.9vw, 28px); }
/* margin-left:auto, not justify-content, because .nav now has three children rather
   than two: brand, links, actions. space-between alone would centre the links. The
   auto margin absorbs the free space first, so the links stay packed against the
   actions on the right exactly as they did when the CTA lived inside them. */
.nav-links { margin-left: auto; }
.nav-links a { color: #e5e5e2; font-size: 12px; font-weight: 750; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.nav-links a:hover { color: #fff; }
.nav-links a.is-active { color: #fff; }
/* The CTA sits outside .nav-links so it can stay visible in the bar on a phone while
   the links collapse into the dropdown. Same gap as the links had, so the desktop
   header is pixel-identical to before. */
.nav-actions { display: flex; align-items: center; gap: 14px; margin-left: clamp(17px, 1.9vw, 28px); }
.nav-cta { padding: 11px 15px; border: 1px solid rgba(255,255,255,.52); color: #e5e5e2; font-size: 12px; font-weight: 750; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.nav-cta:hover { color: #fff; border-color: #fff; }
/* Second copy of the CTA, living inside the dropdown. Only ever shown below
   600px, where the bar copy is hidden — see that breakpoint for why. */
.nav-cta-panel { display: none; }
.nav-toggle { display: none; }

.hero {
  position: relative;
  /* The hero's height came from three stacked sources, not one: this min-height, the
     global `section { padding-block }` (130px top AND bottom), and .hero-grid's own
     830px. Together they made the hero 1089px against a 720-900px viewport, so the CTA
     and the portrait fell below the fold. All three are trimmed; see .hero-grid below. */
  min-height: 0;
  padding-block: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 37%, rgba(112,119,125,.20), transparent 26%),
    linear-gradient(116deg, #0b0d0e 0%, #15181a 56%, #282c2f 100%);
  color: #fff;
}
/* The homepage headline is a full sentence plus a question, which ran to five lines at
   the global h1 scale and pushed the hero CTA further down. One step smaller holds it to
   four. Only the homepage uses .hero; other pages have their own .page-hero h1 size. */
.hero h1 { font-size: clamp(48px, 5.6vw, 82px); }

.hero::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 64px 64px;
  content: "";
  mask-image: linear-gradient(to right, #000, transparent 72%);
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.12fr .88fr; min-height: 560px; align-items: center; padding-top: 104px; }  /* padding-top clears the 88px fixed header */
.hero-copy { z-index: 2; padding: 8px 0 24px; }
.hero-copy .eyebrow { margin-bottom: 24px; }
.hero-copy p:not(.eyebrow) { max-width: 635px; margin-bottom: 34px; color: #c9cccd; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.52; }
.portrait {
  position: relative;
  align-self: end;
  height: 560px;
  margin-left: 34px;
  isolation: isolate;
}
.portrait::after { position: absolute; right: -50%; bottom: 0; left: -20%; height: 46%; background: linear-gradient(transparent, #111416 88%); content: ""; z-index: 2; }
.portrait-placeholder {
  position: absolute;
  inset: 38px 0 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100%;
  height: calc(100% - 38px);
  object-fit: cover;
  object-position: top center;
  background:
    radial-gradient(circle at 50% 28%, #747b80 0 12%, transparent 12.4%),
    radial-gradient(ellipse at 50% 72%, #62686d 0 28%, transparent 28.4%),
    linear-gradient(145deg, #25292c, #464c50);
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%, 0 10%);
}

/* Simple dark hero band used at the top of every inner page (same treatment as the homepage hero, without the split grid/portrait) */
.page-hero { position: relative; overflow: hidden; padding: clamp(150px, 20vw, 190px) 0 clamp(64px, 8vw, 96px); background: linear-gradient(116deg, #0b0d0e 0%, #15181a 56%, #282c2f 100%); color: #fff; }
.page-hero::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 64px 64px;
  content: "";
  mask-image: linear-gradient(to right, #000, transparent 72%);
}
.page-hero .wrap { position: relative; }
.page-hero h1 { max-width: 820px; font-size: clamp(42px, 5.4vw, 74px); }
.page-hero .lede { color: #c9cccd; max-width: 720px; }
.page-hero .lede + .lede { margin-top: 16px; font-size: clamp(17px, 1.5vw, 19px); }
.page-hero .hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 32px; }
.page-hero.compact { padding-bottom: clamp(40px, 5vw, 56px); }
.page-hero.compact h1 { font-size: clamp(32px, 4.4vw, 48px); }

.proof-strip { background: var(--ink); color: #fff; }
.proof-list { display: grid; grid-template-columns: repeat(5, 1fr); margin-block: 0; padding: 0; list-style: none; }
.proof-list li { display: flex; min-height: 136px; flex-direction: column; align-items: center; justify-content: center; padding: 24px 12px; border-left: 1px solid #303336; text-align: center; }
.proof-list li:last-child { border-right: 1px solid #303336; }
.proof-list strong { font-family: var(--serif); font-size: clamp(16px, 1.25vw, 20px); font-weight: 400; line-height: 1.15; white-space: nowrap; }
.proof-list span { margin-top: 7px; color: #90969a; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

section { padding-block: var(--section); }
.section-tight { padding-block: clamp(56px, 7vw, 96px); }
.transition-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(55px, 8vw, 118px); align-items: center; }
.transition-copy p:not(.eyebrow) { max-width: 515px; color: #555b5f; font-size: 18px; }
.pyramid-panel { padding: 20px 0 0; }
.pyramid-row { display: flex; align-items: stretch; gap: 18px; }
.pyramid-growth { display: flex; flex: none; align-items: flex-start; justify-content: center; width: 34px; }
/* The arrow runs from the top of the pyramid down to the middle of the Functional
   Expertise band, which is where the growth starts. 68.7% is measured off the source
   image: the base band spans y=470-715 of an 862px-tall file, so its midpoint is y=592. */
.pyramid-growth-inner { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 68.7%; }
.pyramid-growth-label {
  display: block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--orange-dark);
}
/* Built as a fixed-size arrowhead above a stretching stem rather than an SVG marker.
   The old version scaled one SVG with preserveAspectRatio="none", which stretched the
   marker anisotropically and sheared the arrowhead over to the left. Nothing here can
   distort: the head is drawn at its natural size and only the stem flexes. */
.pyramid-growth-arrow { display: flex; flex: none; flex-direction: column; align-items: center; width: 17px; height: 100%; }
.pyramid-arrowhead { display: block; flex: none; }
.pyramid-arrow-stem { flex: 1; width: 5px; margin-top: -1px; background: var(--orange); border-radius: 0 0 2px 2px; }
.pyramid-shape-wrap { position: relative; flex: 1; width: min(100%, 440px); aspect-ratio: 1 / 1; margin-inline: auto; }
.pyramid-image-wrap { flex: 1; width: min(100%, 460px); margin-inline: auto; }
.pyramid-image { display: block; width: 100%; height: auto; }
.pyramid-shape { position: absolute; inset: 0; display: flex; flex-direction: column; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.pyramid-band-top { flex: .85; background: #dfe1e1; }
.pyramid-band-middle { flex: 1; background: #858c91; }
.pyramid-band-base { flex: 1.3; background: #262a2d; }
.pyramid-labels { position: absolute; inset: 0; display: flex; flex-direction: column; }
.tier { display: flex; align-items: flex-end; justify-content: center; padding-bottom: clamp(14px, 2.6vw, 26px); text-align: center; }
.tier > div { max-width: 88%; }
.tier strong { display: block; font-family: var(--serif); font-size: clamp(15px, 1.5vw, 23px); font-weight: 400; letter-spacing: -.02em; line-height: 1.12; }
.tier span { display: block; margin-top: 6px; font-size: 9px; font-weight: 800; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.tier-top { flex: .85; color: #141718; }
.tier-middle { flex: 1; color: #fff; }
.tier-base { flex: 1.3; color: #fff; }
.pyramid-caption { margin: 26px 0 0; color: #656b6f; font-size: 13px; line-height: 1.5; text-align: center; }

.programs { background: var(--white); }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; align-items: end; margin-bottom: 55px; }
.section-head h2 { margin-bottom: 0; }
.section-head .lede { justify-self: end; margin-bottom: 5px; }
.program-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #c8cac9; border-bottom: 1px solid #c8cac9; }
.program { position: relative; min-height: 460px; padding: clamp(32px, 4.3vw, 58px); }
.program + .program { border-left: 1px solid #c8cac9; }
.program-number { color: var(--accent); font-family: var(--serif); font-size: 18px; }
.program h3 { max-width: 440px; margin-top: 50px; font-family: var(--serif); font-size: clamp(32px, 3.2vw, 47px); font-weight: 400; letter-spacing: -.03em; }
.program p { max-width: 465px; color: #555b5f; }
.program-meta { position: absolute; right: clamp(32px, 4.3vw, 58px); bottom: 44px; left: clamp(32px, 4.3vw, 58px); display: flex; justify-content: space-between; padding-top: 19px; border-top: 1px solid #d2d4d3; color: #5b6165; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sounding-board { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 30px; padding: 28px 32px; background: #e9e8e4; }
.sounding-board h3 { margin: 0 0 3px; font-family: var(--serif); font-size: 24px; font-weight: 400; }
.sounding-board p { margin: 0; color: #5e6367; font-size: 14px; }

.thinking { background: var(--ink-2); color: #fff; }
.thinking .lede { color: #afb4b7; }   /* any lede in the section, not just inside .section-head */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #45494c; }
.principle { padding: 40px 26px 35px 0; }
.principle + .principle { padding-left: 26px; border-left: 1px solid #45494c; }
.principle .num { color: var(--accent); font-size: 14px; font-weight: 800; letter-spacing: .12em; }
.principle h3 { margin: 68px 0 20px; font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); font-weight: 400; text-wrap: balance; }
.principle h3:first-child { margin-top: 0; }   /* no 01/02/03 above it, so no reserved space */
.principle p { color: #aeb3b6; font-size: 15px; }

.why-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(60px, 9vw, 130px); }
.career-path { align-self: start; margin: 8px 0 0; padding: 0; border-top: 1px solid #c7c9c8; list-style: none; }
.career-path li { display: grid; grid-template-columns: 48px 1fr; align-items: center; min-height: 78px; border-bottom: 1px solid #c7c9c8; }
.career-path span { color: var(--accent); font-size: 14px; font-weight: 800; }
.career-path strong { font-family: var(--serif); font-size: 24px; font-weight: 400; }
.why-copy blockquote { margin: 40px 0 0; padding: 25px 0 0 26px; border-top: 1px solid #c7c9c8; border-left: 3px solid var(--accent); color: #353a3e; font-family: var(--serif); font-size: 24px; line-height: 1.45; }

/* Statement banner under the three principles, inside the dark "How I think" section. */
.intersections-banner {
  max-width: 940px;
  margin: clamp(52px, 6vw, 80px) auto 0;
  padding-top: clamp(38px, 4vw, 54px);
  border-top: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(23px, 2.5vw, 34px);
  line-height: 1.34;
  letter-spacing: -.02em;
  text-align: center;
}

.testimonials { background: var(--white); }
.section-head.solo { grid-template-columns: 1fr; }

/* Featured pull-quote above the testimonial cards. */
.featured-quote { max-width: 960px; margin: 0 auto; text-align: center; }
.featured-quote::before { display: block; margin-bottom: 6px; color: var(--accent); content: "\201C"; font-family: var(--serif); font-size: 78px; line-height: .7; }
.featured-quote blockquote { margin: 0; color: var(--ink); font-family: var(--serif); font-size: clamp(24px, 2.9vw, 38px); line-height: 1.32; letter-spacing: -.02em; }
.featured-quote figcaption { margin-top: 26px; color: #4f5559; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.featured-quote figcaption span { display: block; margin-top: 7px; color: #767c80; letter-spacing: .12em; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 54px; background: #c8cac9; border: 1px solid #c8cac9; }
.testimonial { display: flex; min-height: 370px; flex-direction: column; padding: clamp(30px, 3.5vw, 46px); background: var(--white); }
.testimonial::before { color: var(--accent); content: "\201C"; font-family: var(--serif); font-size: 66px; line-height: .7; }
.testimonial blockquote { margin: 36px 0 32px; color: #34393d; font-family: var(--serif); font-size: clamp(21px, 2vw, 27px); line-height: 1.38; }
.testimonial footer { margin-top: auto; padding-top: 20px; border-top: 1px solid #d1d3d2; color: #646a6e; font-size: 11px; font-weight: 800; letter-spacing: .1em; line-height: 1.6; text-transform: uppercase; }
.testimonial footer strong { display: block; color: var(--ink); font-size: 12px; }
.testimonial-note { margin: 22px 0 0; color: #747a7e; font-size: 13px; }

/* Testimonial pulled into a dark section (For Companies, About). Same shape as the
   homepage .why-copy blockquote, recoloured for the dark section it sits in. Dark
   sections reset --accent
   to the full brand orange, so the rule reads brighter here than it does on paper. */
.dark-quote {
  margin: 34px 0 0;
  padding: 26px 0 0 26px;
  border-top: 1px solid #343839;
  border-left: 3px solid var(--accent);
  color: #d7dadb;
  font-family: var(--serif);
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.45;
}
.dark-quote p { margin: 0; }
.dark-quote footer {
  margin-top: 20px;
  color: #9aa0a3;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.7;
  text-transform: uppercase;
}
.dark-quote footer strong { display: block; color: #fff; font-size: 12px; }

.companies { padding-block: 0; background: var(--graphite); color: #fff; }
.companies-grid { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 560px; }
.companies-copy { padding: clamp(70px, 8vw, 110px) clamp(45px, 7vw, 100px) clamp(70px, 8vw, 110px) 0; }
.companies-copy p:not(.eyebrow) { max-width: 680px; color: #c7cacc; font-size: 19px; }
.companies-copy .button { margin-top: 18px; }
.company-outcomes { display: grid; align-content: center; padding: 60px clamp(35px, 5vw, 70px); background: #e1e2e1; color: var(--ink); }
.company-outcomes h3 { margin-bottom: 30px; font-family: var(--serif); font-size: 27px; font-weight: 400; }
.company-outcomes ul { margin: 0; padding: 0; list-style: none; }
.company-outcomes li { position: relative; padding: 17px 0 17px 28px; border-top: 1px solid #bec1c1; font-weight: 700; }
.company-outcomes li::before { position: absolute; top: 26px; left: 2px; width: 9px; height: 9px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); content: ""; transform: rotate(45deg); }

.insights { background: var(--white); }
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #c8cac9; border: 1px solid #c8cac9; }
.insight { min-height: 330px; padding: 35px; background: var(--white); text-decoration: none; transition: background .2s ease, transform .3s ease, box-shadow .3s ease; }
.insight:hover { background: #ecebe7; }
.insight span { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.insight h3 { margin: 76px 0 20px; font-family: var(--serif); font-size: 27px; font-weight: 400; }
.insight p { color: #666b6f; font-size: 14px; }

.origin { background: #dedfdd; }
.origin-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(50px, 9vw, 140px); }
.tachometer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; width: min(100%, 380px); align-self: center; justify-self: center; margin-inline: auto; }
.tachometer-mark { width: 100%; max-width: 260px; height: auto; }
.tachometer-label { position: relative; z-index: 2; color: var(--graphite); font-family: var(--serif); font-size: 31px; line-height: 1; text-align: center; }
.tachometer-label small { display: block; margin-top: 11px; color: var(--accent); font-family: var(--sans); font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.origin-copy p:not(.eyebrow) { max-width: 690px; color: #4f5559; }
.origin-copy .closing { color: var(--ink); font-family: var(--serif); font-size: 25px; }

.final-cta { padding-block: clamp(90px, 12vw, 170px); background: var(--ink); color: #fff; text-align: center; }
.final-cta h2 { max-width: 850px; margin-inline: auto; }
.final-cta p { max-width: 640px; margin: 0 auto 32px; color: #b6bbbd; font-size: 19px; }
/* .final-cta p (0,2,0) was repainting the CTA eyebrow as body copy — grey and 19px
   instead of an accent label. Matching specificity, immediately after, restores it. */
.final-cta p.eyebrow { max-width: none; margin: 0 0 18px; color: var(--accent); font-size: 14px; }
.final-cta .cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; }

.contact-form { background: var(--white); }
.contact-form h2 { font-size: clamp(28px, 3vw, 40px); }
.contact-fields { display: grid; gap: 18px; max-width: 560px; margin-top: 30px; }
.form-row { display: flex; flex-direction: column; gap: 7px; }
.form-row label { color: var(--steel); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.form-row .optional { text-transform: none; font-weight: 600; letter-spacing: 0; color: #9aa0a4; }
.form-row input, .form-row textarea {
  padding: 13px 15px;
  border: 1px solid #c8cac9;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  resize: vertical;
}
.form-row input:focus, .form-row textarea:focus { border-color: var(--orange); outline: 2px solid var(--orange); outline-offset: 1px; }
.contact-fields .button { border: none; cursor: pointer; justify-self: start; }
.hp-field { position: absolute; left: -9999px; }

/* Shared components used across the inner pages */
.check-list { margin: 24px 0 0; padding: 0; list-style: none; max-width: 720px; }
.check-list li { position: relative; padding: 15px 0 15px 28px; border-top: 1px solid #cfd1d0; color: #363b3f; }
.check-list li:last-child { border-bottom: 1px solid #cfd1d0; }
.check-list li::before { position: absolute; top: 24px; left: 2px; width: 9px; height: 9px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); content: ""; transform: rotate(45deg); }
.check-list.on-dark li { border-color: #383c3f; color: #d7dadb; }

.subhead { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 36px); margin-bottom: 16px; letter-spacing: -.02em; }
.subhead.sm { font-size: clamp(22px, 2.4vw, 28px); }

/* The career arc is a sequence, not a sentence. As a plain heading it fit on one
   line only between 1280 and 1440px — by 7px at the low end — and everywhere else
   it wrapped, breaking inside "C-Suite" at the hyphen because that is the last
   available break. Flex means it can only break BETWEEN stages, never inside one. */
.career-arc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3em .5em;
  margin-bottom: 18px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.5vw, 31px);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.25;
}
.career-arc span { white-space: nowrap; }
.career-arc span + span::before {
  content: "\2192";
  margin-right: .5em;
  color: var(--accent);
  font-size: .78em;
}
@media (max-width: 600px) {
  .career-arc { gap: .22em .42em; font-size: 20px; }
}

.program-block { padding-block: clamp(48px, 6vw, 76px); border-top: 1px solid #c8cac9; }
.program-block:first-of-type { padding-top: 0; border-top: 0; }
.program-block .subhead { max-width: 780px; }
.program-block > p.lede { margin-bottom: 8px; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 720px; margin-top: 36px; padding-top: 28px; border-top: 1px solid #d2d4d3; }
.pf-grid.cols-1 { grid-template-columns: 1fr; }
.pf-grid.cols-3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; }

/* Venn figure for the "Lead at the Intersections" principle. Inherits --accent, so it
   picks up the right orange on light or dark sections automatically. */
.intersect-figure { max-width: 520px; margin: 36px 0 4px; }
.intersect-figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.intersect-figure .ring { fill: var(--accent); fill-opacity: .13; stroke: var(--accent); stroke-opacity: .55; stroke-width: 1.5; }
.intersect-figure .ring-label { fill: var(--accent); font-family: var(--sans); font-size: 17px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; text-anchor: middle; }
.pf-grid .pf-label { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 8px; display: block; }
.pf-grid p { color: #4a4f53; font-size: 15px; margin: 0; }

/* Card variant of .pf-grid. The 1px gap over a grey background paints the dividing
   rules, so the cells read as one tight block rather than three floating boxes.
   Padding is deliberately smaller than .invest-card / .category-card. */
/* margin-bottom matters: the card block now has a hard bottom edge, and the
   paragraph that follows has no top margin of its own. */
.pf-grid.as-cards { gap: 1px; margin-top: 30px; margin-bottom: 30px; padding-top: 0; border: 1px solid #c8cac9; background: #c8cac9; }
.pf-grid.as-cards > div { padding: 20px 22px; background: var(--white); }
.pf-grid.as-cards .pf-label { margin-bottom: 6px; }
.pf-grid.as-cards p { font-size: 14.5px; line-height: 1.45; }
.program-block .button { margin-top: 30px; }

.faq-list { margin-top: 30px; border-top: 1px solid #c8cac9; max-width: 780px; }
.faq-item { padding: 26px 0; border-bottom: 1px solid #c8cac9; }
.faq-item h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin-bottom: 10px; }
.faq-item p { color: #50565b; margin: 0; }
.faq-list.on-dark { border-color: #3a3e41; }
.faq-list.on-dark .faq-item { border-color: #3a3e41; }
.faq-list.on-dark .faq-item p { color: #b6bbbd; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 8vw, 110px); }

/* Body copy beside a square photo. Text takes the larger share so the prose
   keeps a readable measure and the photo stays a supporting element. */
.text-with-photo { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(40px, 5vw, 72px); align-items: start; margin-top: 16px; }
.text-with-photo .body-copy { margin-top: 0; }
.text-with-photo .body-copy p { max-width: 100%; }

/* The two-column split never stacked, so on a phone the photo column collapsed to
   about 130px — unnoticed while it held a dashed placeholder, useless with a real
   portrait in it. Below 700px stack instead, and put the photo first so a face
   arrives before five paragraphs of copy. */
@media (max-width: 700px) {
  .text-with-photo { grid-template-columns: 1fr; gap: 28px; }
  .text-with-photo .photo-square { order: -1; }
}
/* height:auto is load-bearing. The <img> carries width/height attributes so the
   browser reserves space before the file arrives, but a literal height="1200"
   also sets height:1200px, which beats aspect-ratio and rendered the photo
   480x1200 instead of square. */
.photo-square { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: #dcdedc; }
.photo-square.is-empty { display: grid; place-items: center; border: 1px dashed #b4b7b5; color: #7d8285; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.photo-square.is-empty small { display: block; margin-top: 8px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: none; color: #9aa0a3; }
/* Role/result rows for the operator record on About. Dark-section device: borders and
   body colour are set for .thinking, so don't reuse it on a light background. */
.record-list { max-width: 880px; margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid #c7c9c8; }
.record-list li { display: grid; grid-template-columns: 215px 1fr; gap: 28px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid #c7c9c8; }
.record-list strong { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .13em; line-height: 1.5; text-transform: uppercase; }
.record-list p { margin: 0; color: #4a4f53; font-size: 15.5px; }
/* Same component, darker rules and lighter body text inside a dark section (About's
   operator story). Descendant selectors rather than a second class, so the homepage
   and About share one definition. */
/* Inside the homepage's narrow Why Mark column the 215px label track left only ~240px
   for the text, wrapping every row to four lines. Stack label over text there. */
.why-grid .record-list li { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }

.thinking .record-list { border-top-color: #3a3e41; }
.thinking .record-list li { border-bottom-color: #3a3e41; }
.thinking .record-list p { color: #b6bbbd; }

/* One-line expectation-setter under a call to action. */
.cta-note { max-width: 520px; margin: 18px 0 0; color: #9aa0a3; font-size: 14px; line-height: 1.5; }
/* .hero-copy p:not(.eyebrow) is (0,2,1) and was beating the plain .cta-note class, so the
   hero note rendered at the lede's 23px. Matching specificity, later in the file, wins. */
.hero-copy p.cta-note { max-width: 520px; margin: 14px 0 0; color: #9aa0a3; font-size: 14px; line-height: 1.5; }
/* .final-cta p is (0,2,0) and outranks .cta-note, so the note inherited the CTA
   paragraph's 19px. Matching specificity with p.cta-note, later in the file, wins. */
.final-cta p.cta-note { max-width: 520px; margin: 18px auto 0; color: #9aa0a3; font-size: 14px; line-height: 1.5; }

/* Email capture. Secondary to the Calendly button above it, which is why it sits
   below a rule and uses a ghost button: the primary ask should still win the eye.
   Posts to Netlify Forms (form name "subscribe"), same mechanism as the contact
   form, and falls back to a normal page POST with no JavaScript involved. */
.signup { max-width: 430px; margin: 44px auto 0; padding-top: 34px; border-top: 1px solid #2b2f31; text-align: center; }
.signup-head { margin: 0 0 6px; color: #fff; font-family: var(--serif); font-size: 21px; }
.signup .signup-note { max-width: none; margin: 0 0 18px; color: #9aa0a3; font-size: 14px; }
.signup-row { display: flex; gap: 10px; }
.signup input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;                     /* without this a flex item refuses to shrink below its content */
  padding: 13px 14px;
  border: 1px solid #3b4042;
  border-radius: var(--radius);
  background: #15181a;
  color: #fff;
  font-family: var(--sans);
  font-size: 15px;
}
.signup input[type="email"]::placeholder { color: #71777a; }
.signup input[type="email"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.signup .button { flex: none; padding-inline: 20px; border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; }
.signup .button:hover { border-color: #fff; background: rgba(255,255,255,.08); }
@media (max-width: 520px) {
  .signup-row { flex-direction: column; }
  .signup .button { width: 100%; }
}

/* Numbered engagement steps on For Companies. */
.step-list { max-width: 780px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: step; }
.step-list li { position: relative; counter-increment: step; padding: 14px 0 14px 46px; border-top: 1px solid #c7c9c8; color: #3b4145; font-size: 15.5px; }
.step-list li:last-child { border-bottom: 1px solid #c7c9c8; }
.step-list li::before { position: absolute; left: 0; content: counter(step); color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: .1em; }

/* Belief statements on About. Set as statements rather than paragraphs so a short
   section carries enough visual weight for the page's section padding. */
.belief-list { max-width: 920px; margin: 0; padding: 0; list-style: none; border-top: 1px solid #c7c9c8; }
/* A list has no bottom margin and p.body-copy has no top margin, so prose that
   follows a list would otherwise sit flush against its last row. */
.check-list + .body-copy, .check-list + p.body-copy,
.record-list + .body-copy, .record-list + p.body-copy { margin-top: 28px; }

.belief-list li { padding: 28px 0; border-bottom: 1px solid #c7c9c8; color: #24282b; font-family: var(--serif); font-size: clamp(21px, 2.1vw, 28px); letter-spacing: -.02em; line-height: 1.35; text-wrap: pretty; }

.two-col.spaced { margin-top: 20px; }
.stat-card { border: 1px solid #c8cac9; padding: clamp(28px, 3.5vw, 40px); background: var(--white); }
.stat-list { max-width: 720px; display: grid; gap: 1px; background: #c8cac9; border: 1px solid #c8cac9; margin-top: 30px; }
.stat-list li { background: var(--white); padding: 24px 28px; color: #363b3f; }

.category-card { border: 1px solid #c8cac9; padding: clamp(28px, 3.2vw, 38px); background: var(--white); display: flex; flex-direction: column; }
.category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #c8cac9; border: 1px solid #c8cac9; margin-top: 40px; }
.category-grid .category-card { border: none; }
.category-card h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin-bottom: 10px; }
.category-card > p { color: #50565b; margin-bottom: 0; }
.article-list { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: article; }
.article-list li { counter-increment: article; display: flex; gap: 10px; padding: 12px 0; border-top: 1px solid #e3e5e3; font-size: 14.5px; color: #33383c; }
.article-list li::before { content: counter(article) "."; color: var(--accent); font-weight: 800; flex: none; }
.article-list li.is-featured { font-weight: 700; }
.insights-note, .pending-note { margin-top: 44px; padding: 22px 26px; background: #efeee9; border-left: 3px solid var(--accent); color: #4a4f53; font-size: 14.5px; max-width: 780px; }
.pending-note strong { color: #292d30; }
.pending-note.on-dark { background: #1c1f21; border-left-color: var(--accent); color: #b6bbbd; }
.pending-note.on-dark strong { color: #fff; }
blockquote.pending-note { font-style: italic; }
blockquote.pending-note strong { font-style: normal; }

.privacy-callout { margin-top: 26px; padding: 20px 24px; background: #efeee9; border-left: 3px solid var(--accent); color: #4a4f53; font-size: 14.5px; max-width: 560px; }
.privacy-callout .eyebrow { margin-bottom: 6px; }
.privacy-callout p:last-child, .pending-note p:last-child, .insights-note p:last-child { margin-bottom: 0; }

.invest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 30px; }
/* Light surface inside a dark section, so it has to reset BOTH inherited values: the
   text colour and --accent. The dark section sets --accent to the bright brand orange,
   which only reaches 3.0:1 on this card's off-white fill and would fail AA on the
   12px label. The AA-safe tone clears 4.5:1. */
.invest-card { border: 1px solid #c8cac9; padding: clamp(26px, 3vw, 34px); background: var(--white); color: var(--ink); --accent: var(--orange-label); }
.invest-card .field-label { margin: 0 0 10px; color: var(--accent); }  /* beats .invest-card p */
.invest-card h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin-bottom: 12px; }
.invest-card p { color: #4a4f53; margin: 0; }

/* Off-white surface, one step from the paper background. Used where two light sections
   sit next to each other: with no tone change at the boundary, the standard 132px
   section padding reads as a hole rather than a break. Subtle on purpose — it marks the
   seam without introducing a third colour scheme. */
.surface-alt,
.credibility { background: var(--white); }
/* Sits outside .body-copy, so it needs its own top margin rather than the
   18px paragraph rhythm — the link reads as a separate action, not a next sentence. */
.cred-link { margin-top: 26px; }


/* ---- Long-form article pages -------------------------------------------------
   Reading typography, not marketing typography: a 700px measure (~68 characters at
   19px, the comfortable band for sustained reading), looser leading than the rest of
   the site, and more air above headings than below so sections group correctly. */
.article-meta { margin: 26px 0 0; color: #9aa0a3; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.article-meta span + span::before { content: "\00b7"; margin: 0 10px; color: #6a7074; }

/* Less air above than the global 130px marketing section, because the reader is already
   mid-thought: the hero's deck is the article's first sentence in everything but markup.
   Bottom stays generous — .article-end and the CTA both follow. */
.article-section { padding-block: clamp(54px, 6vw, 86px) clamp(70px, 8vw, 110px); }

.article-body { max-width: 700px; }
.article-body > p { margin-bottom: 26px; color: #33383c; font-size: 19px; line-height: 1.75; }
.article-body > p:first-child { font-size: 21px; color: #24282b; }   /* standfirst paragraph */
.article-body h2 {
  margin: 58px 0 18px;
  font-family: var(--serif);
  font-size: clamp(25px, 2.5vw, 32px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-wrap: balance;
}
.article-body ul { margin: 0 0 26px; padding: 0; list-style: none; }
.article-body ul li { position: relative; margin-bottom: 14px; padding-left: 22px; color: #33383c; font-size: 19px; line-height: 1.7; }
.article-body ul li::before { position: absolute; left: 0; top: .08em; content: "\2014"; color: var(--accent); font-weight: 700; }
.article-body ul li strong { color: var(--ink); }

/* One pull quote per article. Hangs into the left margin on wide screens so it reads
   as a break in the column rather than another paragraph. */
.pull-quote {
  margin: 44px 0 44px -28px;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--accent);
  color: #24282b;
  font-family: var(--serif);
  font-size: clamp(23px, 2.3vw, 29px);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.38;
  text-wrap: pretty;
}
.pull-quote p { margin: 0; }

/* Byline block closing the article. */
.article-end { max-width: 700px; margin-top: 56px; padding-top: 28px; border-top: 1px solid #c7c9c8; }
.article-end p { margin: 0 0 10px; color: #4a4f53; font-size: 16px; line-height: 1.6; }
.article-end strong { color: var(--ink); }
.article-back { margin-top: 30px; font-size: 14px; }

@media (max-width: 700px) {
  .pull-quote { margin-left: 0; }
  .article-body > p, .article-body ul li { font-size: 18px; }
}

/* Insights index: published articles only, newest first. Reads as a list rather than
   a grid so a single entry does not look like a gap where three cards should be. */
.article-index { max-width: 820px; margin: 0; padding: 0; list-style: none; border-top: 1px solid #c7c9c8; }
.article-index li { padding: 34px 0; border-bottom: 1px solid #c7c9c8; }

.article-index h3 { margin: 10px 0 12px; font-family: var(--serif); font-size: clamp(24px, 2.4vw, 31px); font-weight: 400; letter-spacing: -.02em; line-height: 1.18; text-wrap: balance; }
.article-index h3 a { color: var(--ink); text-decoration: none; }
.article-index h3 a:hover { color: var(--accent); }
.article-index li > p { max-width: 700px; margin: 0; color: #4a4f53; font-size: 17px; line-height: 1.6; }
/* Both of these need `li > p.class` (0,2,1) to match `.article-index li > p`, which
   otherwise wins on source order and repaints them as body copy. */
.article-index li > p.field-label { margin: 0; color: var(--accent); font-size: 12px; }
.article-index li > p.article-index-meta { margin-top: 14px; color: #7d8285; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* Long-form legal document pages */
.legal-meta { color: var(--steel); font-size: 13px; margin-bottom: 46px; }
.legal-content { max-width: 760px; }
.legal-content h2 { font-size: clamp(24px, 2.6vw, 30px); margin-top: 52px; margin-bottom: 16px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-family: var(--sans); font-weight: 800; font-size: 15px; letter-spacing: .02em; margin-top: 34px; margin-bottom: 12px; }
.legal-content p { color: #363b3f; margin-bottom: 18px; }
.legal-content ul { margin: 0 0 18px; padding-left: 22px; color: #363b3f; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { color: var(--orange-dark); font-weight: 700; }

.site-footer { background: #090a0b; color: #fff; }
.footer-main { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; padding-block: 60px; }
.footer-brand { font-family: var(--serif); font-size: 30px; }
.footer-brand-row { display: flex; align-items: center; gap: 12px; }
.footer-mark { flex: none; }
.footer-brand span { display: block; margin-top: 8px; color: #8f9599; font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px 28px; justify-content: flex-end; }
.footer-links a { color: #c3c6c8; font-size: 12px; text-decoration: none; }
.footer-links a:hover { color: #fff; }
.footer-legal { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0 28px; border-top: 1px solid #25282a; color: #72787c; font-size: 11px; }
.footer-legal a { color: #72787c; text-decoration: none; }
.footer-legal a:hover { color: #fff; }
.footer-legal-links { display: flex; gap: 14px; }

/* ---------------------------------------------------------------------------
   Mobile navigation.

   Between ~900px and 1060px the five nav links, the brand and the CTA do not fit
   on one line: the links collided with the brand and the brand wrapped. They used
   to simply `display: none` below 1060px, which meant that on every phone and most
   tablets the header offered no route to any page — the footer links were the only
   navigation on the site.

   Below 1060px the SAME .nav-links element becomes a dropdown panel under the bar.
   One copy of the links in the DOM, so `is-active` and the markup stay as they are;
   `visibility` (not just opacity) does the hiding so the closed panel is out of the
   tab order and invisible to screen readers.
   --------------------------------------------------------------------------- */
@media (max-width: 1060px) {
  .nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* flex:none is load-bearing. As a shrinkable flex item the button gave up
       1-3px to the wordmark on narrow phones and measured 41x44 — under the
       44px minimum touch target. */
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
  }
  .nav-toggle:hover { border-color: rgba(255,255,255,.72); }
  .nav-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
  .nav-toggle span {
    display: block;
    width: 19px;
    height: 2px;
    background: #fff;
    transition: transform .22s ease, opacity .16s ease;
  }
  /* The bars fold into an X. 7px is the bar height (2) plus the gap (5). */
  [data-nav-open] .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  [data-nav-open] .nav-toggle span:nth-child(2) { opacity: 0; }
  [data-nav-open] .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-links {
    position: absolute;
    z-index: 1;
    top: 100%;                /* the panel hangs off .site-header, which is fixed */
    right: 0;
    left: 0;
    display: block;
    /* Full-bleed panel, but padded by --pad so the link text lines up with the
       wordmark: below 1344px .wrap is edge-padded by exactly --pad too. */
    margin: 0;
    padding: 2px var(--pad) 14px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    background: rgba(12,14,15,.97);
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    /* visibility gets 0s with a .2s DELAY when closing, so the panel stays
       visible for the length of the fade and only then leaves the tab order.
       Do not give it a duration instead: a transitioned visibility is still
       computed as `hidden` at progress 0, so the script's focus() call on the
       first link would be silently ignored the instant the menu opens. */
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  [data-nav-open] .nav-links {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s;
  }
  .nav-links a:not(.nav-cta-panel) {
    display: flex;
    min-height: 54px;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,.10);
    font-size: 14px;
  }
  .nav-links a:first-child { border-top: 0; }
}

@media (max-width: 900px) {
  /* The hero used to hold a fixed 900px so the absolutely-positioned portrait had
     room behind the copy. Stacked, it sizes to its contents. */
  .hero, .hero-grid { min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
  .hero-copy { padding: 26px 0 36px; }
  /* The portrait becomes a full-bleed band UNDER the copy rather than a faded
     backdrop behind it.

     It was never faded. `.portrait` carries `animation: heroFadeUp … both` further
     down this file, and `both` holds the final keyframe — opacity: 1 — permanently.
     Animation-origin values outrank normal author declarations in the cascade, so
     the `opacity: .67` that used to live here never applied at any width. The
     result on a phone was a bright, hard-edged rectangle of photograph sitting on
     top of the CTA note. Do not put an opacity back here; it will not work. If a
     wash is ever wanted, set it on .portrait-placeholder, which is not animated. */
  .portrait {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    height: clamp(340px, 88vw, 460px);
    margin-inline: calc(50% - 50vw);   /* full bleed, out past .wrap's padding */
    align-self: start;
  }
  .portrait-placeholder {
    inset: 0;
    height: 100%;
    object-position: 50% 8%;           /* keeps the face in frame at every band height */
    clip-path: none;                   /* the cut corner does not read at full bleed */
  }
  .portrait::after { right: 0; left: 0; height: 38%; }
  .portrait-note { display: none; }
  .proof-list { grid-template-columns: repeat(3, 1fr); }
  .proof-list li:nth-child(4), .proof-list li:nth-child(5) { border-top: 1px solid #303336; }
  .proof-list strong { white-space: normal; }
  .transition-grid, .why-grid, .origin-grid, .two-col { grid-template-columns: 1fr; }
  .section-head { grid-template-columns: 1fr; }
  .section-head .lede { justify-self: start; }
  .program-grid, .companies-grid, .category-grid, .pf-grid, .invest-grid { grid-template-columns: 1fr; }
  .program + .program { border-top: 1px solid #c8cac9; border-left: 0; }
  .principles, .insight-grid, .testimonial-grid { grid-template-columns: 1fr; }
  .principle { padding-left: 0 !important; border-left: 0 !important; }
  .principle + .principle { border-top: 1px solid #45494c; }
  .principle h3 { margin-top: 38px; }
  .companies-copy { padding-left: var(--pad); padding-right: var(--pad); }
  .tachometer { width: min(100%, 360px); }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  /* .pf-grid.cols-3 (0,2,0) outranks the plain .pf-grid collapse in the 900px query,
     so the three-up grid needs its own rule or it stays 3 columns on a phone. */
  .pf-grid.cols-3 { grid-template-columns: 1fr; }
  .record-list li { grid-template-columns: 1fr; gap: 8px; }
  .nav { min-height: 72px; }
  .brand span { display: none; }
  /* On the narrowest phones the caps wordmark and the CTA button were 10px apart. */
  .brand { gap: 9px; }
  .brand strong { font-size: 16px; white-space: nowrap; }
  /* Three items do not fit across a phone header. With the hamburger added, the
     wordmark AND the CTA both wrapped to two lines at 390px, and at 360px there
     was no font size that fixed it. Below 600 the bar keeps the brand and the
     hamburger; the CTA moves into the panel, where it is a full-width button —
     bigger and easier to hit than the 9px-padded one it replaces. The hero's own
     orange CTA is above the fold on every phone, so nothing is lost on arrival. */
  .nav-actions .nav-cta { display: none; }
  .nav-cta-panel {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    border: 0;
    background: var(--orange);
    color: #fff;
    font-size: 12px;
  }
  .nav-cta-panel:hover { background: var(--orange-dark); color: #fff; }
  .hero-copy { padding-top: 18px; }
  h1 { font-size: clamp(49px, 15vw, 68px); }
  .hero-copy p:not(.eyebrow) { max-width: 94%; }
  .proof-list { grid-template-columns: 1fr 1fr; }
  .proof-list li { min-height: 95px; border-top: 1px solid #303336; }
  .proof-list li:last-child { grid-column: 1 / -1; }
  .pyramid-panel { padding: 30px 18px 24px; }
  /* Below ~620px the image is short enough that the vertical label (a fixed ~270px of
     text) no longer fits inside the arrow's 68.7% span and would push it past the
     Functional Expertise band. The label is decorative and already aria-hidden, so it
     goes; the arrow alone still reads as upward growth. */
  .pyramid-growth-label { display: none; }
  .pyramid-growth { width: 22px; }
  .tier strong { font-size: 19px; }
  .tier span { max-width: 200px; margin-inline: auto; font-size: 8px; }
  .program { min-height: 500px; padding: 30px 24px; }
  .program-meta { right: 24px; bottom: 30px; left: 24px; flex-direction: column; gap: 6px; }
  .sounding-board { align-items: flex-start; flex-direction: column; }
  .insight { min-height: 280px; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
  .footer-legal { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes needleSweep {
    0% { transform: rotate(-170deg); opacity: 0; }
    10% { opacity: 1; }
    70% { transform: rotate(14deg); opacity: 1; }
    /* opacity must be restated here: without it the browser interpolates back to the
       element's underlying opacity (0) and the needle fades out as it settles. */
    100% { transform: rotate(0deg); opacity: 1; }
  }
  @keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .brand-mark .needle {
    transform-box: view-box;
    transform-origin: 50px 54px;
    animation: needleSweep 1s cubic-bezier(.22,.85,.3,1) .5s both;
  }
  .gauge-trigger .needle {
    transform-box: view-box;
    transform-origin: 50px 54px;
    opacity: 0;
    transform: rotate(-170deg);
  }
  .gauge-trigger.is-visible .needle {
    animation: needleSweep 1.1s cubic-bezier(.22,.85,.3,1) .15s both;
  }

  .hero-copy, .page-hero .wrap > * { animation: heroFadeUp .45s ease both; }
  /* No delay on either. `both` fill mode holds the 0% keyframe THROUGH a delay, so the
     old .1s/.25s delays meant a visibly empty dark hero for the first second — and the
     headline is the LCP element, so it was a scoring problem as well as a visible one. */
  .portrait { animation: heroFadeUp .55s ease .05s both; }

  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }

  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
  .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .08s; }
  .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .16s; }
  .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .24s; }
  .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .32s; }

  .program { transition: transform .3s ease, box-shadow .3s ease; }
  .program:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -22px rgba(17,19,21,.35); }

  .testimonial { transition: transform .3s ease, box-shadow .3s ease; }
  .testimonial:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -22px rgba(17,19,21,.18); }

  .insight:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -22px rgba(17,19,21,.18); }
}

@media (max-width: 380px) {
  /* Must come AFTER the 600px query: same specificity, so source order decides, and
     the earlier .brand strong rule there would otherwise win. Smallest phones still
     in use — shrink the mark and wordmark a step so the lockup clears the CTA. */
  .brand-mark { width: 26px; height: 26px; }
  .brand { gap: 7px; }
  .brand strong { font-size: 14px; letter-spacing: .02em; }
  .nav-cta { padding: 8px 9px; font-size: 11px; }
  .nav-actions { gap: 10px; }
}