/* ==========================================================================
   Magellan Executive Partners — site styles
   Implementation of the "Magellan website redesign" design-canvas document.
   Design tokens follow the Modernist design system, overridden for the
   Magellan brand (ink + signal red on white).
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  --ink: #32373b;
  --ink-900: #23272a;
  --slate: #6e7479;
  --brand: #e04048;
  --brand-hover: #e9575e;

  --color-bg: #ffffff;
  --color-surface: #f5f6f8;
  --color-text: #22272c;
  --color-body: #4a5157;
  --color-body-soft: #5a6167;
  --color-accent: #e04048;
  --color-accent-600: #c8353d;
  --color-accent-700: #a82b32;
  --color-divider: rgba(50, 55, 59, 0.18);

  --font-heading: "Archivo", system-ui, -apple-system, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, sans-serif;

  --wrap: 1320px;
  --gutter: 40px;
  --nav-h: 82px;
  --section-y: 130px;
}

/* --- Base --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: var(--ink);
  text-decoration: none;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

figure {
  margin: 0;
}

blockquote {
  margin: 0;
}

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

/* Sticky nav clearance for in-page anchors. */
[id] {
  scroll-margin-top: calc(var(--nav-h) + 8px);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 14px 22px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transform: translateY(-120%);
}

.skip-link:focus {
  transform: none;
}

/* --- Layout primitives -------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.section--surface {
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
}

.section--white {
  background: #fff;
}

.section--rule {
  border-top: 1px solid var(--color-divider);
}

.section--ink {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}

/* Hairline grid: 1px dividers rendered as background bleed between cells. */
.hairline-grid {
  display: grid;
  gap: 2px;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
}

.hairline-grid > * {
  background: #fff;
}

.cols-auto-330 {
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

.cols-auto-300 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Fixed 3 × 2. auto-fit resolved to four columns on wide screens, which
   left the six industries as a ragged 4 + 2 with two empty cells. */
.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Big figure inside a hairline cell — the coaching and partner stat bands. */
.stat-figure {
  margin-bottom: 12px;
  font-family: var(--font-heading);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

/* --- Type --------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 40px;
  height: 2px;
  background: var(--brand);
}

.eyebrow--light {
  color: rgba(255, 255, 255, 0.66);
}

.h-section {
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: 1.1;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}

.section--ink .h-section {
  color: #fff;
}

.lead {
  font-size: 19px;
  line-height: 1.7;
  color: var(--color-body);
  text-wrap: pretty;
}

.section--ink .lead {
  color: rgba(255, 255, 255, 0.74);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  flex-wrap: wrap;
  margin-bottom: 72px;
}

/* --- Buttons and links -------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 19px 32px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.btn svg {
  flex: none;
}

.btn--brand {
  background: var(--brand);
  color: #fff;
}

.btn--brand:hover {
  background: var(--brand-hover);
  transform: translateY(-2px);
}

.btn--dark {
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 14px 24px;
}

.btn--dark:hover {
  background: var(--slate);
}

.btn--outline {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  font-weight: 600;
}

.btn--outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

.btn--lg {
  font-size: 16px;
  padding: 22px 38px;
}

/* Underlined text link with a brand rule. */
.link-rule {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--brand);
  padding-bottom: 8px;
  transition: color 0.25s ease;
}

.link-rule:hover {
  color: var(--brand);
}

/* --- Navigation --------------------------------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--color-divider);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.site-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 34px rgba(35, 39, 42, 0.1);
}

.nav-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-logo-img {
  height: 46px;
  width: auto;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav-link {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.25s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
  border-bottom-color: var(--brand);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: none;
  border: 1px solid var(--color-divider);
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle .icon-close,
.nav-toggle[aria-expanded="true"] .icon-open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: flex-end;
  background: var(--ink);
  overflow: hidden;
}

/* Presented at native fidelity: no upscale, no grade. The earlier
   scale(1.04) resampled every pixel and the saturate/brightness filter
   flattened the film — both are gone so the plate renders exactly as
   delivered. Legibility is carried entirely by the scrims below, which
   are measured against the footage rather than guessed. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Legibility scrims. Tuned against the brightest frames of the drone plate:
   heavy where type sits (lower-left), open on the upper right so the
   skyline stays visible rather than being flattened to grey. */
.hero-scrim--bottom {
  background: linear-gradient(
    180deg,
    rgba(22, 25, 27, 0.6) 0%,
    rgba(22, 25, 27, 0.28) 28%,
    rgba(22, 25, 27, 0.52) 58%,
    rgba(22, 25, 27, 0.82) 82%,
    rgba(22, 25, 27, 0.94) 100%
  );
}

.hero-scrim--left {
  background: linear-gradient(
    90deg,
    rgba(22, 25, 27, 0.78) 0%,
    rgba(22, 25, 27, 0.46) 40%,
    rgba(22, 25, 27, 0.12) 70%,
    rgba(22, 25, 27, 0) 84%
  );
}

.hero-scrim--vignette {
  background: radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.42) 100%);
}

.hero-grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image: linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
  background-size: 120px 120px;
  -webkit-mask-image: radial-gradient(120% 80% at 70% 10%, #000 10%, transparent 70%);
  mask-image: radial-gradient(120% 80% at 70% 10%, #000 10%, transparent 70%);
}

.hero-compass {
  position: absolute;
  right: -140px;
  top: -90px;
  width: 640px;
  height: 640px;
  pointer-events: none;
  opacity: 0.22;
  animation: spin-slow 140s linear infinite;
}

.hero-body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 180px var(--gutter) 72px;
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 34px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  animation: rise 0.9s ease both;
}

.hero-kicker::before {
  content: "";
  flex: none;
  width: 56px;
  height: 2px;
  background: var(--brand);
}

.hero h1 {
  /* Sized so the headline sets to two lines at desktop rather than three —
     a wider measure with a lower cap, not just a smaller face. */
  max-width: 1180px;
  margin: 0 0 30px;
  font-size: clamp(40px, 5.1vw, 74px);
  line-height: 1.04;
  font-weight: 700;
  color: #fff;
  text-wrap: balance;
  animation: rise 1s ease 0.08s both;
}

.hero-lead {
  max-width: 660px;
  margin: 0 0 46px;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.82);
  text-wrap: pretty;
  animation: rise 1s ease 0.16s both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 88px;
  animation: rise 1s ease 0.24s both;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  animation: rise 1s ease 0.32s both;
}

.hero-stats > div {
  padding: 30px 30px 4px 0;
}

.hero-stats dt,
.stat-value {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.hero-stats dd {
  margin: 0;
}

.stat-label {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
}

/* --- Client logo strip -------------------------------------------------- */

.clients {
  border-bottom: 1px solid var(--color-divider);
  background: #fff;
}

.clients .wrap {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-block: 44px;
}

.clients-label {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a9099;
}

/* Marquee. The viewport masks its own edges so logos fade in and out
   rather than being clipped mid-mark. */
.clients-marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.clients-track {
  display: flex;
  width: max-content;
  animation: marquee-right 42s linear infinite;
  will-change: transform;
}

.clients-marquee:hover .clients-track {
  animation-play-state: paused;
}

.clients-set {
  display: flex;
  align-items: center;
  /* Wide enough that one set exceeds the viewport — otherwise both copies
     of the track are visible at once and a client appears to be listed
     twice. */
  gap: 118px;
  padding-right: 118px;
}

.clients-set img {
  width: auto;
  flex: none;
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.clients-set img:hover {
  filter: grayscale(0);
  opacity: 0.9;
}

/* Starts one full set to the left and travels right, so the loop point
   lands exactly where it began. */
@keyframes marquee-right {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

/* Bench section opener. The copy draft folds the headline into the body,
   so this paragraph carries the section on its own — display weight, but
   sized to stay readable across three sentences. */

/* --- Statement band -----------------------------------------------------
   A single line given a whole section. Used for the positioning line that
   the firm actually says out loud — it is meant to filter, so it gets the
   room to do that rather than being buried in a paragraph. */

.statement {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  padding-block: 108px;
}

.statement .wrap {
  position: relative;
}

.statement-rule {
  width: 56px;
  height: 2px;
  margin-bottom: 34px;
  background: var(--brand);
}

.statement p {
  max-width: 1000px;
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

.statement p em {
  font-style: normal;
  color: var(--brand);
}

/* Scoped to beat `.statement p` above — the sub-paragraph is a <p> too, and
   without this it inherits the full 46px headline size. */
.statement .statement-sub {
  max-width: 680px;
  margin-top: 32px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0;
  text-wrap: pretty;
  color: rgba(255, 255, 255, 0.72);
}

/* --- Refusal line -------------------------------------------------------
   The claim competitors will not make. Deliberately given its own rule and
   weight rather than being set as another body paragraph. */

.refusal {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-top: 2px;
  padding: 44px 40px;
  background: var(--ink);
  color: #fff;
}

.refusal svg {
  flex: none;
  margin-top: 4px;
}

.refusal p {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.refusal span {
  display: block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.7);
}

/* Client wordmark — stands in for a logo file we do not hold yet. */
.client-wordmark {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 2px;
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a9099;
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 0.25s ease, color 0.25s ease;
}

.clients-set:hover .client-wordmark,
.client-wordmark:hover {
  opacity: 1;
  color: var(--ink);
}

/* --- Approach ----------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 96px;
  align-items: start;
}

.split--center {
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 88px;
  align-items: center;
}

.prose p {
  margin: 0 0 22px;
  max-width: 560px;
}

.prose p:last-of-type {
  margin-bottom: 40px;
}

.stack-card {
  padding: 38px 34px;
}

.stack-card h3 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
}

.stack-card p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-body);
}

/* Outcomes lead the page, so their headings are titles rather than the
   small uppercase labels the other stack cards use. Scoped past
   `.stack-card h3`. */
.stack-card.outcome-card h3 {
  margin-bottom: 14px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--ink);
}

.outcome-card p {
  font-size: 16px;
  color: var(--color-body-soft);
}

/* --- Service cards ------------------------------------------------------ */

.service-card {
  padding: 48px 40px 44px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(35, 39, 42, 0.09);
}

.service-card h3 {
  margin: 28px 0 14px;
  font-size: 23px;
  font-weight: 700;
  color: var(--ink);
}

.service-card p {
  font-size: 16px;
  line-height: 1.68;
  color: var(--color-body-soft);
}

/* --- Numbered reason list ----------------------------------------------- */

.reasons {
  display: grid;
  border-top: 1px solid var(--color-divider);
}

.reasons > div {
  display: flex;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--color-divider);
}

.reason-num {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
  padding-top: 4px;
}

.reasons h3 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}

.reasons p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-body-soft);
}

.framed-media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--ink);
  overflow: hidden;
}

.framed-media::after {
  content: "";
  position: absolute;
  inset: 22px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.framed-media .route-mark {
  position: absolute;
  left: 22px;
  bottom: 22px;
  width: 150px;
  height: 150px;
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
}

/* --- Process ------------------------------------------------------------ */

.process-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.14;
  pointer-events: none;
}

.section--ink .wrap {
  position: relative;
}

.process-track {
  position: relative;
}

.process-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 28px;
  width: 100%;
  height: 60px;
  pointer-events: none;
}

.process-line path {
  stroke-dasharray: 1200;
  animation: route-draw 2.8s ease-out 0.3s both;
}

.process-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 32px;
}

.process-node {
  width: 14px;
  height: 14px;
  border: 2px solid var(--brand);
  background: var(--ink);
  margin-bottom: 56px;
}

.process-step-num {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.5);
}

.process-steps h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.process-steps p {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}

/* Light variant — the process now sits on a surface band rather than ink,
   so the step type has to invert with it. */
.process-track--light .process-node {
  background: var(--color-surface);
}

.process-track--light .process-step-num {
  color: var(--slate);
}

.process-track--light .process-steps h3 {
  color: var(--ink);
}

.process-track--light .process-steps p {
  color: var(--color-body-soft);
}

/* --- The bench -----------------------------------------------------------
   The Everest copy set as a pull quote on the left, against a plain column
   of figures on the right. Deliberately static: the numbers are there to be
   read, so nothing here moves, fills or responds to the pointer. */

.bench-split {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: 96px;
  align-items: start;
}

.bench-quote {
  margin: 0 0 44px;
  padding-left: 34px;
  border-left: 2px solid var(--brand);
}

.bench-quote p {
  font-family: var(--font-heading);
  font-size: clamp(23px, 2.1vw, 32px);
  line-height: 1.34;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: pretty;
}

.bench-stats {
  border-top: 1px solid var(--color-divider);
}

.bench-stat {
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--color-divider);
}

.bench-stat-figure {
  margin-bottom: 10px;
  font-family: var(--font-heading);
  font-size: clamp(38px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.bench-stat-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--slate);
}

@media (max-width: 980px) {
  .bench-split {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}

@media (max-width: 620px) {
  .bench-quote {
    padding-left: 22px;
  }
}

/* --- The engagement figure ----------------------------------------------
   Dave's whiteboard sketch drawn to scale. Two stroke treatments carry the
   idea: the run-in is dashed and stops, the loop is solid and does not. A
   marker walks the line once at reveal, then orbits indefinitely.
   Hovering either a node or its phase below links the two. */

.engagement-figure {
  margin: 0 0 74px;
  padding: 24px 0 18px;
}

/* Below ~780px the labels inside the viewBox would scale to unreadable, so
   the figure scrolls sideways at its own size rather than shrinking. */
.engagement-figure-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.engagement-svg {
  display: block;
  width: 100%;
  min-width: 720px;
  height: auto;
  overflow: visible;
}

.eng-rings {
  opacity: 0.12;
}

/* --- Nodes --- */

.eng-node {
  cursor: default;
}

/* Invisible target so the pointer picks up the node well before the ring,
   which is only 48px across in a 1200-wide viewBox. */
.eng-node-hit {
  fill: transparent;
}

.eng-node-ring {
  fill: var(--color-bg);
  stroke: var(--brand);
  stroke-width: 2.5;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), fill 0.32s ease;
}

/* The loop phases are the recurring core of the engagement, so they sit
   filled while the run-in phases stay open. */
.eng-node--loop .eng-node-ring {
  fill: var(--brand);
}

.eng-node-num {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  fill: var(--brand);
  transition: fill 0.32s ease;
  pointer-events: none;
}

.eng-node--loop .eng-node-num {
  fill: #fff;
}

.eng-name {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.012em;
  fill: var(--ink);
  transition: fill 0.32s ease;
  pointer-events: none;
}

/* --- Linked hover state, driven from either side --- */

.eng-node.is-active .eng-node-ring {
  fill: var(--brand);
  transform: scale(1.28);
}

.eng-node.is-active .eng-node-num {
  fill: #fff;
}

.eng-node.is-active .eng-name {
  fill: var(--brand);
}

.engagement-figure.is-linked .eng-node:not(.is-active) {
  opacity: 0.42;
  transition: opacity 0.32s ease;
}

/* --- The travelling marker --- */

/* A white collar keeps the marker readable where it rides directly on top of
   the loop stroke, which is the same colour. */
.eng-traveller-dot {
  fill: var(--brand);
  stroke: var(--color-bg);
  stroke-width: 3;
}

.eng-traveller-halo {
  fill: var(--brand);
  opacity: 0.18;
}

/* --- Reveal --- */

.engagement-figure .eng-loop {
  stroke-dasharray: 724;
  stroke-dashoffset: 724;
}

.engagement-figure.rv-in .eng-loop {
  transition: stroke-dashoffset 1.9s cubic-bezier(0.3, 0.7, 0.2, 1) 0.9s;
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .engagement-figure .eng-loop {
    stroke-dashoffset: 0;
  }

  .engagement-figure.rv-in .eng-loop {
    transition: none;
  }

  /* SMIL keeps running under a media query, so the marker is removed
     outright rather than paused mid-orbit. */
  .eng-traveller {
    display: none;
  }
}

/* --- The five phases ---------------------------------------------------- */

.phase-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 42px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.phase {
  position: relative;
  padding-top: 22px;
  cursor: default;
}

.phase::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--color-divider);
}

/* The bar fills left-to-right on hover — the same direction the marker
   travels, so the two halves of the section move as one. */
.phase::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 2px;
  width: 0;
  background: var(--brand);
  transition: width 0.42s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.phase.is-active::after {
  width: 100%;
}

.phase--loop::before {
  background: rgba(224, 64, 72, 0.42);
}

.phase-num {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--slate);
  transition: color 0.32s ease;
}

.phase--loop .phase-num {
  color: var(--brand);
}

.phase.is-active .phase-num {
  color: var(--brand);
}

/* A filled pip on the loop phases, hollow on the run-in — the same
   distinction the diagram makes, carried down into the list. */
.phase-num::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transition: background 0.32s ease;
}

.phase--loop .phase-num::before {
  background: var(--brand);
}

.phase.is-active .phase-num::before {
  background: var(--brand);
}

.phase h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}

.phase p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-body-soft);
}

@media (max-width: 1040px) {
  .phase-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .phase-list {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* --- Industries: the dial ------------------------------------------------
   Eighteen sectors set around a rim. A marker runs the circle continuously
   and the middle names whatever it is passing; hovering a node or a name in
   the list takes control off the marker and holds it there. The list is the
   readable form — the dial is the one that moves. */

.industries-dial {
  display: grid;
  grid-template-columns: minmax(380px, 520px) 1fr;
  gap: 72px;
  align-items: center;
}

.dial-stage {
  position: relative;
}

.dial-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.dial-rings {
  opacity: 0.14;
}

.dial-ticks {
  opacity: 0.34;
}

.dial-spokes {
  opacity: 0.08;
}

.dial-inner {
  opacity: 0.16;
}

.dial-track {
  opacity: 0.3;
}

.dial-trail {
  opacity: 0.55;
  transition: opacity 0.4s ease;
}

.industries-dial.is-held .dial-trail {
  opacity: 0;
}

/* --- Nodes --- */

/* Generous invisible target: the dots are 13px across inside a 560 viewBox,
   far too small to hit reliably at any rendered size. */
.dial-hit {
  fill: transparent;
  cursor: pointer;
}

.dial-dot {
  fill: var(--color-surface);
  stroke: var(--brand);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), fill 0.3s ease;
  pointer-events: none;
}

.dial-node.is-active .dial-dot {
  fill: var(--brand);
  transform: scale(1.75);
}

.industries-dial.is-held .dial-node:not(.is-active) .dial-dot {
  opacity: 0.5;
}

/* --- The marker --- */

.dial-ball-dot {
  fill: var(--brand);
  stroke: var(--color-surface);
  stroke-width: 3;
}

.dial-ball-halo {
  fill: var(--brand);
  opacity: 0.16;
}

/* Free-running, the marker is repositioned every frame, so it must not carry
   a transform transition — that would make it lag its own orbit. The glide
   is switched on only while a sector is held, which turns the hand-off into
   a single eased move to the node under the pointer. */
.industries-dial.is-held .dial-ball {
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* --- Centre readout --- */

.dial-readout {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 58%;
  text-align: center;
  pointer-events: none;
}

.dial-readout-num {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--brand);
}

.dial-readout-name {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(21px, 2vw, 29px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

/* Each change of sector is a short cross-fade rather than a hard cut. */
.dial-readout.is-swapping .dial-readout-num,
.dial-readout.is-swapping .dial-readout-name {
  opacity: 0;
  transform: translateY(6px);
}

.dial-readout-num,
.dial-readout-name {
  transition: opacity 0.16s ease, transform 0.16s ease;
}

/* --- The list --- */

.dial-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 44px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dial-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid var(--color-divider);
  background: none;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.25s ease, padding-left 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dial-item-num {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--slate);
  transition: color 0.25s ease;
}

.dial-item.is-active {
  padding-left: 10px;
  color: var(--brand);
}

.dial-item.is-active .dial-item-num {
  color: var(--brand);
}

.industries-dial.is-held .dial-item:not(.is-active) {
  color: var(--color-body-soft);
}

@media (prefers-reduced-motion: reduce) {
  .dial-ball {
    display: none;
  }
}

@media (max-width: 1080px) {
  .industries-dial {
    grid-template-columns: 1fr;
    gap: 56px;
    justify-items: center;
  }

  .dial-stage {
    width: 100%;
    max-width: 480px;
  }

  .dial-list {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .dial-list {
    grid-template-columns: 1fr;
  }
}

/* --- Testimonials ------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 28px;
}

.quote-card {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 48px 40px;
  background: #fff;
  border: 1px solid var(--color-divider);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.quote-card:hover {
  box-shadow: 0 18px 50px rgba(35, 39, 42, 0.1);
  transform: translateY(-3px);
}

.quote-card blockquote {
  font-size: 19px;
  line-height: 1.65;
  color: #3a4046;
  text-wrap: pretty;
}

.quote-card figcaption {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--color-divider);
  font-size: 14px;
  line-height: 1.5;
  color: #7a8189;
}

/* Attributed name sits above the role line. */
.quote-card figcaption strong {
  display: block;
  margin-bottom: 3px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

/* Two-up for longer, attributed quotes — three columns squeezes them. */
.card-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 900px) {
  .card-grid--2 {
    grid-template-columns: 1fr;
  }
}

/* --- Partners ----------------------------------------------------------- */

.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 44px 36px;
}

/* Photographs stay in colour. They were desaturated and only came back on
   hover, which left every face grey until the reader happened to point at
   it; the client asked for full colour at all times. */
.partner-portrait {
  aspect-ratio: 4 / 5;
  margin-bottom: 26px;
  background: var(--color-surface);
  overflow: hidden;
}

.partner-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.partner h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}

.partner p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-body-soft);
}

/* Scoped to beat `.partner p` above — the role is a <p> too. */
.partner .partner-role {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}

/* --- Partners page ------------------------------------------------------
   Compact ink banner instead of the home page's full-viewport video hero,
   so the roster starts near the fold. */

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  padding-block: 108px 96px;
}

.page-hero-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.14;
  pointer-events: none;
}

.page-hero-compass {
  position: absolute;
  right: -150px;
  top: -160px;
  width: 560px;
  height: 560px;
  opacity: 0.2;
  pointer-events: none;
  animation: spin-slow 160s linear infinite;
}

.page-hero .wrap {
  position: relative;
}

.crumb {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.crumb a {
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.25s ease;
}

.crumb a:hover {
  color: #fff;
}

.page-hero h1 {
  max-width: 900px;
  margin: 0 0 26px;
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.06;
  font-weight: 700;
  color: #fff;
  text-wrap: balance;
  animation: rise 0.9s ease both;
}

.page-hero-lead {
  max-width: 640px;
  margin: 0 0 64px;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.78);
  text-wrap: pretty;
  animation: rise 1s ease 0.1s both;
}

.page-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2px;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  animation: rise 1s ease 0.18s both;
}

.page-stats > div {
  padding: 30px 30px 4px 0;
}

.page-stats dt {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.page-stats dd {
  margin: 0;
}

/* Whole card is the hit area, so the portrait and name click through
   to the full profile. */
.partner-link {
  display: block;
  color: inherit;
}

.partner-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--brand);
  padding-bottom: 6px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.partner:hover .partner-more,
.partner-link:focus-visible .partner-more {
  opacity: 1;
  transform: none;
}

.partner .img-slot {
  aspect-ratio: 4 / 5;
  font-size: 12px;
}

@media (hover: none) {
  /* No hover to reveal it on touch, so keep the affordance visible. */
  .partner-more {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .page-hero {
    padding-block: 72px 64px;
  }

  .page-hero-lead {
    margin-bottom: 44px;
  }

  .page-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-stats > div {
    padding-right: 0;
  }

  .page-stats dt {
    font-size: 34px;
  }
}

/* --- Partner profile page -----------------------------------------------
   One page per executive partner. Rich Schultz is the built example; every
   other partner follows the same structure with their own content. */

.partner-hero-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: start;
}

.partner-hero-portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-900);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.partner-hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.partner-hero-grid h1 {
  margin: 0 0 10px;
  font-size: clamp(38px, 4.2vw, 60px);
  line-height: 1.05;
  font-weight: 700;
  color: #fff;
}

.partner-role-line {
  margin: 0 0 30px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
}

.partner-pullquote {
  max-width: 620px;
  margin: 0 0 32px;
  padding-left: 22px;
  border-left: 2px solid var(--brand);
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: pretty;
}

.partner-pullquote cite {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* Specialty chips */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-accent-700);
  background: #fdf0f1;
  border: 1px solid rgba(224, 64, 72, 0.22);
}

/* Article + sidebar */
.article-callout {
  margin: 30px 0;
  padding: 26px 30px;
  background: var(--color-surface);
  border-left: 3px solid var(--brand);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}

.article-callout cite {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}

.spec-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-divider);
}

.spec-list li {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-body);
}

.spec-list li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 9px;
  background: var(--brand);
}

.side-block {
  margin-bottom: 38px;
}

.side-block:last-child {
  margin-bottom: 0;
}

.side-block h3 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
}

.side-block ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.side-block li {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-body);
}

.side-block li:last-child {
  border-bottom: none;
}

.side-block p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-body-soft);
}

.side-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  background: #fdf0f1;
}

.side-block--cta {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--color-divider);
}

/* "In his own words" */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 4px;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
}

.qa-card {
  padding: 30px 28px 32px;
  background: #fff;
}

.qa-card svg {
  margin-bottom: 18px;
}

.qa-card h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.qa-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-body-soft);
}

.snap-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 4px;
}

.snap-row > * {
  aspect-ratio: 4 / 3;
}

@media (max-width: 1024px) {
  .partner-hero-grid {
    grid-template-columns: 240px 1fr;
    gap: 40px;
  }

}

@media (max-width: 640px) {
  .partner-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .partner-hero-portrait {
    max-width: 260px;
  }

  .qa-grid,
  .snap-row {
    grid-template-columns: 1fr;
  }
}

/* --- Insights ----------------------------------------------------------- */

.insight-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-divider);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.insight-card:hover {
  box-shadow: 0 18px 50px rgba(35, 39, 42, 0.1);
  transform: translateY(-3px);
}

.insight-media {
  aspect-ratio: 16 / 10;
  background: var(--ink);
  overflow: hidden;
}

.insight-body {
  padding: 34px 32px 36px;
}

.insight-kind {
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
}

.insight-card h3 {
  margin: 0 0 12px;
  font-size: 23px;
  font-weight: 700;
  color: var(--ink);
}

.insight-card p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-body-soft);
}

/* --- Contact ------------------------------------------------------------ */

.contact .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 72px;
  align-items: center;
  padding-block: 150px;
}

.contact h2 {
  margin: 0 0 24px;
  font-size: clamp(38px, 4.6vw, 72px);
  line-height: 1.05;
  font-weight: 700;
  color: #fff;
  text-wrap: balance;
}

.contact-compass {
  position: absolute;
  left: -120px;
  bottom: -200px;
  width: 560px;
  height: 560px;
  opacity: 0.2;
  pointer-events: none;
  animation: spin-slow 180s linear infinite;
}

.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}

.contact-details {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.66);
}

.contact-details a {
  color: inherit;
  transition: color 0.25s ease;
}

.contact-details a:hover {
  color: #fff;
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.62);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 56px;
  padding: 80px var(--gutter) 40px;
  max-width: var(--wrap);
  margin: 0 auto;
}

.footer-brand {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
}

.footer-logo-img {
  height: 46px;
  width: auto;
}

.footer-cols p {
  max-width: 280px;
  font-size: 15px;
  line-height: 1.7;
}

.footer-heading {
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.25s ease;
}

.footer-links a:hover {
  color: var(--brand);
}

.footer-contact {
  font-size: 15px;
  line-height: 1.8;
}

.footer-contact a {
  color: inherit;
}

.footer-contact a:hover {
  color: var(--brand);
}

.footer-legal {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 28px var(--gutter) 44px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

/* --- Image slots -------------------------------------------------------- */
/* Placeholder for artwork the design calls for but that has not been
   supplied yet. Replace the whole element with:
   <img src="..." alt="..." class="slot-img"> */

.img-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 24px;
  background: var(--color-surface);
  color: var(--slate);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.img-slot::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed currentColor;
  opacity: 0.45;
}

.img-slot--dark {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.42);
}

.slot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Cursor -------------------------------------------------------------
   A small minimalist sloop, black and white only, drawn as an SVG data URI
   at 20px. Each variant carries both black and white — one as fill, one as
   outline — so it reads on the white sections and the dark hero alike.

     default      hollow boat (white fill, ink outline)
     interactive  solid boat (ink fill, white outline)

   The weight change is the click affordance that the arrow/hand pair
   normally provides. Hotspot sits at the masthead.

   Guarded behind hover/fine pointer: touch devices have no cursor, and
   forcing one there only risks odd behaviour on hybrid devices. */

@media (hover: hover) and (pointer: fine) {
  body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%23ffffff' stroke='%2316181A' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M6 2.2 6 12.4 12.8 12.4Z'/%3E%3Cpath d='M4.7 5.8 2 12.4 4.7 12.4Z'/%3E%3Cpath d='M1.6 14.1 16.8 14.1 14.2 17.6 4.2 17.6Z'/%3E%3C/g%3E%3C/svg%3E")
        6 2,
      auto;
  }

  a,
  button,
  [role="button"],
  summary,
  label {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%2316181A' stroke='%23ffffff' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M6 2.2 6 12.4 12.8 12.4Z'/%3E%3Cpath d='M4.7 5.8 2 12.4 4.7 12.4Z'/%3E%3Cpath d='M1.6 14.1 16.8 14.1 14.2 17.6 4.2 17.6Z'/%3E%3C/g%3E%3C/svg%3E")
        6 2,
      pointer;
  }
}

/* --- Motion ------------------------------------------------------------- */

[data-reveal] {
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.rv-on [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
}

.rv-on [data-reveal].rv-in {
  opacity: 1;
  transform: none;
}

@keyframes route-draw {
  from {
    stroke-dashoffset: 1200;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes spin-slow {
  to {
    transform: rotate(360deg);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --section-y: 96px;
  }

  .split {
    gap: 64px;
  }

  .split--center {
    gap: 56px;
  }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 28px;
    background: #fff;
    border-bottom: 1px solid var(--color-divider);
    box-shadow: 0 24px 40px rgba(35, 39, 42, 0.12);
  }

  .nav-menu.is-open {
    display: flex;
  }

  .nav-menu .nav-link {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-divider);
  }

  .nav-menu .nav-link:hover,
  .nav-menu .nav-link:focus-visible {
    border-bottom-color: var(--color-divider);
    color: var(--brand);
  }

  .nav-menu .btn--dark {
    justify-content: center;
    margin-top: 20px;
  }

  .hero-body {
    padding-top: 140px;
  }

  .hero-actions {
    margin-bottom: 56px;
  }

  .clients .wrap {
    gap: 28px;
  }

  .section-head {
    margin-bottom: 48px;
  }

  .cols-3,
  .cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 24px;
    --section-y: 72px;
  }

  .hero {
    min-height: auto;
  }

  .hero-body {
    padding-top: 120px;
    padding-bottom: 56px;
  }

  /* Keep the kicker on one line so the brand rule stays optically level. */
  .hero-kicker {
    gap: 12px;
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  .hero-kicker::before {
    width: 36px;
  }

  .hero-stats > div {
    padding-right: 0;
  }

  /* Stack the label above the marquee so the track keeps full width. */
  .clients .wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }

  .clients-set {
    gap: 48px;
    padding-right: 48px;
  }

  .hero-stats dt,
  .stat-value {
    font-size: 36px;
  }

  .split,
  .split--center {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .cols-auto-330,
  .cols-auto-300,
  .cols-3,
  .cols-4,
  .card-grid,
  .partner-grid,
  .process-steps,
  .contact .wrap {
    grid-template-columns: 1fr;
  }

  .contact .wrap {
    padding-block: 88px;
  }

  .service-card,
  .quote-card {
    padding: 36px 28px;
  }


  .insight-body {
    padding: 28px 24px 30px;
  }

  .process-line {
    display: none;
  }

  .process-node {
    margin-bottom: 24px;
  }

  .btn {
    padding: 17px 26px;
  }

  .footer-cols {
    padding-top: 56px;
    gap: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .rv-on [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --- Executive Partner page ----------------------------------------------
   The credibility card is the whole first screen: min-height fills the
   viewport below the sticky nav so nothing from the next section shows at
   100% zoom. Everything under it is one column — there is no sidebar. */

.ep-top {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--nav-h));
  padding-block: 40px 56px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
}

.ep-top > .wrap {
  width: 100%;
}

.crumb--dark a,
.crumb--dark span {
  color: var(--slate);
}

.cred-card {
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
}

.cred-body {
  display: grid;
  grid-template-columns: 240px 1fr 272px;
  gap: 40px;
  padding: 42px 38px 38px;
  align-items: start;
}

/* align-items:start above stops the grid stretching this column to the row
   height; the ratio then belongs to the box, and the image simply fills it. */
.cred-portrait {
  aspect-ratio: 4 / 5;
}

.cred-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cred-eyebrow {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand);
}

.cred-main h1 {
  margin-bottom: 14px;
  font-size: clamp(36px, 3.6vw, 50px);
  line-height: 1.04;
  font-weight: 700;
  color: var(--ink);
}

.cred-roles {
  margin-bottom: 26px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-body);
}

.cred-roles span {
  margin-inline: 8px;
  color: var(--color-divider);
}

.cred-quote {
  margin-bottom: 30px;
  padding-left: 22px;
  border-left: 3px solid var(--brand);
}

.cred-quote p {
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
  text-wrap: pretty;
}

.cred-quote cite {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}

.cred-quote cite::before {
  content: "\2014\00a0";
}

.cred-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Sized to keep both actions on one line inside the card's middle column;
   the site default (15px / 32px padding) overflows it and wraps. */
.cred-actions .btn {
  padding: 15px 20px;
  font-size: 14px;
}

/* Outline button for a light ground — .btn--outline is white-on-dark and
   would vanish inside this card. */
.btn--line {
  border-color: var(--color-divider);
  color: var(--ink);
  font-weight: 600;
}

.btn--line:hover {
  border-color: var(--ink);
  background: var(--color-surface);
}

/* --- Experience -----------------------------------------------------------
   Marks are given real room — the companies a coach came from are a big
   part of why a CHRO trusts them, so they are set large and clear rather
   than as a cramped strip. Where a company has no published mark its name
   is set at matching optical weight, so a mixed block still reads as one
   deliberate list. Greyscale keeps whatever colours arrive in step. */

/* --- Experience: where the coach has actually worked -------------------- */

.cred-xp {
  align-self: start;
  padding-top: 4px;
}

/* Labelled, so the column reads as a list of employers rather than a row of
   decorative marks. The rule under it closes the label off from the list. */
.cred-xp-head {
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-divider);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-body-soft);
}

.cred-logos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* A hairline between entries, so a mark and a plain name sit in the same
   list instead of floating at different weights. No rule after the last. */
.xp-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-divider-soft, rgba(0, 0, 0, 0.07));
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-body-soft);
}

.xp-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.xp-item:first-child {
  padding-top: 0;
}

/* A definite height, not max-height: several of these marks are SVGs with
   only a viewBox and no width/height, so they have no intrinsic size and
   collapse to 0x0 inside a flex column. max-width in px, never a
   percentage, for the same reason.

   The 44px here is only the fallback. buildeps.py writes a per-mark height
   inline, computed from the artwork's aspect ratio so every logo occupies
   the same area — a wide wordmark and a square seal end up reading at the
   same size, which one fixed height cannot do. */
.xp-item img {
  height: 44px;
  width: auto;
  max-width: 250px;
  object-fit: contain;
  object-position: left center;
  filter: grayscale(1);
  opacity: 0.88;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Colour returns on hover — a quiet reward, and it confirms the mark is
   the real thing rather than a flat graphic. */
.cred-logos:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* The company the coach is best known for leads the list. It is marked by
   being first and by the slightly stronger colour — not by size. Every mark
   is set at the same height so the column reads as one even list; scaling
   one of them up made the row look accidental. */
.xp-item.is-dominant {
  color: var(--ink);
}

.xp-item.is-dominant img {
  opacity: 1;
}

@media (max-width: 1000px) {
  /* Narrow: the list turns into a wrapping row, so the per-row hairlines
     would cut through it at random. Drop them and space the items instead. */
  .cred-logos {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 30px;
  }

  .xp-item {
    width: auto;
    padding: 0;
    border-bottom: 0;
  }

  .cred-xp-head {
    margin-bottom: 14px;
  }
}

/* The stat bar. One component on all 31 coach pages, so it has to look
   identical whether a coach has four figures or the three John Carnuccio's
   source gives. `grid-auto-flow: column` divides the row evenly by however
   many cells are in it; `repeat(4, 1fr)` left a hole on the three-stat page. */
.cred-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1px;
  margin: 0;
  padding: 0 38px 38px;
}

.cred-stats > div {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--color-surface);
  /* Figures sit on one line across the row even when a caption wraps to two,
     so the row reads as a band rather than four separate boxes. */
  min-height: 118px;
}

/* A hairline in brand red over each figure — enough to mark the band as ours
   without turning the numbers themselves red. */
.cred-stats > div::before {
  content: "";
  width: 22px;
  height: 2px;
  margin-bottom: 14px;
  background: var(--brand);
  flex: none;
}

.cred-stats dt {
  margin-bottom: 7px;
  font-family: var(--font-heading);
  font-size: clamp(25px, 2.3vw, 33px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.cred-stats dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-body-soft);
  text-wrap: balance;
}

/* --- Below the fold: narrative left, glance-panel right ------------------ */

.ep-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 0;
  border: 1px solid var(--color-divider);
}

.ep-spine {
  border-right: 1px solid var(--color-divider);
}

/* Same top padding as .ep-side-block, so the first heading in each column
   sits on the same line and the two columns read as one grid. */
.ep-block {
  padding: 30px 44px 36px;
  border-bottom: 1px solid var(--color-divider);
}

.ep-block:last-child {
  border-bottom: 0;
}

.ep-block h2 {
  margin-bottom: 12px;
  font-size: 22px;
  line-height: 1.28;
  font-weight: 700;
  color: var(--ink);
}

.ep-block p {
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.68;
  color: var(--color-body-soft);
}

.ep-keynote-title {
  margin-bottom: 6px;
  font-weight: 700;
  font-style: italic;
  color: var(--ink) !important;
}

.ep-bullets {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ep-bullets li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-body-soft);
}

.ep-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--brand);
}

.ep-bullets li:last-child {
  margin-bottom: 0;
}

/* --- In his own words ----------------------------------------------------
   Stacked, one per row. Each answer gets a rule, a mark and an oversized
   opening quote, so the three read as three moments rather than a grid. */

.word-stack {
  margin-top: 26px;
}

.word-block {
  margin: 0;
  padding: 20px 0 22px;
  border-top: 1px solid var(--color-divider);
}

.word-block:first-child {
  padding-top: 4px;
  border-top: 0;
}

.word-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.word-head svg {
  flex: none;
  padding: 9px;
  background: rgba(224, 64, 72, 0.09);
  border-radius: 50%;
  box-sizing: content-box;
}

.word-head figcaption {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.word-index {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--brand);
}

/* Same size, family and colour as .ep-block p, so the answers read as body
   copy rather than as display type. */
.word-block blockquote {
  position: relative;
  max-width: 68ch;
  padding-left: 34px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.68;
  font-weight: 400;
  color: var(--color-body-soft);
  text-wrap: pretty;
}

.word-block blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.16em;
  font-family: var(--font-heading);
  font-size: 2.6em;
  line-height: 1;
  color: var(--brand);
  opacity: 0.22;
}

/* --- Right column -------------------------------------------------------- */

.ep-side {
  background: var(--color-surface);
}

.ep-side-block {
  padding: 30px 30px 34px;
  border-bottom: 1px solid var(--color-divider);
}

/* The first block in each column keeps identical top padding so the two
   headings sit on the same line. The rest of the right column takes the
   slack instead, which is what keeps the two columns finishing together. */
.ep-side-block + .ep-side-block {
  padding-top: 68px;
  padding-bottom: 70px;
}

.ep-side-block:last-child {
  border-bottom: 0;
}

.ep-side-block h2 {
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 1.28;
  font-weight: 700;
  color: var(--ink);
}

.ep-side-block p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-body-soft);
}

.ep-side-block .ep-bullets li {
  margin-bottom: 8px;
  font-size: 13.5px;
  line-height: 1.5;
}

/* --- CliftonStrengths, in the Magellan palette --- */

/* The strengths heading carries its own sub-label; there is no source
   button beside it any more. */
.ep-side-block h2 span {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}

/* --- CliftonStrengths ----------------------------------------------------
   Implemented to the CliftonStrengths component brand guide: numbered badge
   coloured by domain, name, uppercase domain label in that same colour, and
   a one-line description. Sizes are the guide's.

   The badge (.domain-*) and label (.text-*) classes are deliberately
   separate — putting background and colour on one element would make the
   label invisible against its own badge. */

.domain-executing    { background: #8752a3; }
.domain-influencing  { background: #f0902f; }
.domain-relationship { background: #0f81aa; }
.domain-strategic    { background: #4f9b47; }

/* Bound to .strength-domain as well: `.ep-side-block p` sets a muted grey at
   the same specificity and is defined earlier, so a bare .text-* class loses
   and every label renders grey. */
.strength-domain.text-executing    { color: #8752a3; }
.strength-domain.text-influencing  { color: #f0902f; }
.strength-domain.text-relationship { color: #0f81aa; }
.strength-domain.text-strategic    { color: #4f9b47; }

.strength-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.strength-row:last-child {
  margin-bottom: 0;
}

.strength-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 1px;
}

.strength-name {
  font-size: 14px !important;
  font-weight: 700;
  margin: 0;
  color: var(--ink) !important;
}

.strength-domain {
  font-size: 10.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin: 1px 0 4px;
}

.strength-desc {
  font-size: 12.5px !important;
  color: var(--color-body-soft);
  line-height: 1.5;
  margin: 0;
}

/* --- Personality type --- */

/* The four letters are a label, not a headline. Set as a restrained chip in
   ink with wide tracking — the red is kept for the one hairline beneath it,
   so the block reads as a credential rather than shouting. */
.ep-side-block--type {
  text-align: left;
}

.type-code {
  display: inline-block;
  margin-bottom: 10px;
  padding: 7px 13px 6px;
  border: 1px solid var(--color-divider);
  border-bottom: 2px solid var(--brand);
  background: var(--color-bg);
  font-family: var(--font-heading);
  font-size: 19px !important;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.1em;
  color: var(--ink) !important;
}

.type-instrument {
  margin: 0 0 8px;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate) !important;
}

.type-name {
  margin: 0 0 10px;
  font-size: 14px !important;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--slate) !important;
}

.type-blurb {
  font-size: 13.5px !important;
  line-height: 1.55;
  color: var(--color-body-soft) !important;
}

/* --- Career dial ---------------------------------------------------------
   The industries wheel at sidebar scale: nine seats on a ring, a marker that
   runs them in order, and the middle naming whichever it is on. Oldest at
   twelve o'clock, running clockwise, so the filled arc is time elapsed. */

/* In the wide column now, so it gets room and normal type sizes rather
   than the shrunken sidebar overrides it carried before. */
.career-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 46px;
  align-items: start;
  margin-top: 10px;
}

.career-dial {
  width: 300px;
  margin: 0;
}

.cd-stage {
  position: relative;
}

.cd-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.cd-rings { opacity: 0.12; }
.cd-rail { opacity: 0.2; }

/* 942.48 = 2πr at r=150; one seat is a ninth of it. */
.cd-progress {
  stroke-dasharray: 942.48;
  stroke-dashoffset: 942.48;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.25, 0.75, 0.25, 1);
}

.cd-hit {
  fill: transparent;
  cursor: pointer;
}

.cd-dot {
  fill: var(--color-bg);
  stroke: var(--brand);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), fill 0.3s ease;
  pointer-events: none;
}

.cd-node.is-active .cd-dot {
  fill: var(--brand);
  transform: scale(1.55);
}

.career-dial.is-held .cd-node:not(.is-active) .cd-dot {
  opacity: 0.5;
}

.cd-marker {
  transition: transform 0.6s cubic-bezier(0.25, 0.75, 0.25, 1);
}

.cd-marker-dot {
  fill: var(--brand);
  stroke: var(--color-bg);
  stroke-width: 3;
}

.cd-marker-halo {
  fill: var(--brand);
  opacity: 0.16;
}

.cd-readout {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 62%;
  text-align: center;
  pointer-events: none;
}

.ep-block .cd-step {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
}

.tl-index { color: var(--brand); }

.ep-block .cd-role {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.ep-block .cd-company {
  margin-top: 6px;
  font-size: 15px;
  color: var(--color-body-soft);
}

.cd-step,
.cd-role,
.cd-company {
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.cd-readout.is-swapping .cd-step,
.cd-readout.is-swapping .cd-role,
.cd-readout.is-swapping .cd-company {
  opacity: 0;
  transform: translateY(5px);
}

.ep-block .cd-note {
  margin-top: 20px;
  font-size: 15px;
  color: var(--color-body-soft);
}

/* --- The roster beside the circle --- */

.cd-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cd-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid var(--color-divider);
  background: none;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: padding-left 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cd-list li:last-child .cd-item {
  border-bottom: 0;
}

.cd-item-num {
  flex: none;
  padding-top: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--slate);
  transition: color 0.25s ease;
}

.cd-item-role {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  transition: color 0.25s ease;
}

.cd-item-co {
  display: block;
  margin-top: 1px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-body-soft);
}

.cd-item.is-active {
  padding-left: 10px;
}

.cd-item.is-active .cd-item-num,
.cd-item.is-active .cd-item-role {
  color: var(--brand);
}

.career-dial.is-held ~ * .cd-item:not(.is-active) {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cd-marker { display: none; }
  .cd-progress { stroke-dashoffset: 0; }
}

@media (max-width: 1080px) {
  .cred-body {
    grid-template-columns: 210px 1fr;
  }

  .cred-companies {
    grid-column: 1 / -1;
  }

  .cred-companies ul {
    grid-template-columns: repeat(2, 1fr);
  }

  .ep-grid {
    grid-template-columns: 1fr;
  }

  .ep-spine {
    border-right: 0;
    border-bottom: 1px solid var(--color-divider);
  }

  .career-dial {
    max-width: 420px;
    margin-inline: auto;
  }
}

@media (max-width: 860px) {
  /* The hero stops filling the screen on a phone; forcing 100vh there just
     pushes the stats off the bottom. */
  .ep-top {
    min-height: 0;
    padding-block: 34px 48px;
  }

  .cred-body {
    grid-template-columns: 1fr;
    padding: 30px 24px 26px;
    gap: 30px;
  }

  .cred-portrait {
    max-width: 220px;
  }

  .cred-stats {
    /* Two per row on a phone. The desktop rule flows in a single column, so
       that has to be turned off, not just overridden with a column count. */
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    padding: 0 24px 24px;
  }

  .cred-stats > div {
    min-height: 0;
    padding: 20px;
  }

  .cred-stats > div::before {
    margin-bottom: 11px;
  }

  .ep-block {
    padding: 28px 24px 32px;
  }

  .ep-side-block {
    padding: 22px 24px 24px;
  }
}

/* --- Team profile pages --------------------------------------------------
   The coach card, minus the parts that only exist for a coach: no stat bar,
   no experience column. Two columns instead of three, and the card does not
   have to fill the screen because there is far less below it. */

.ep-top--team {
  min-height: 0;
  padding-block: 44px 70px;
}

.cred-body--team {
  grid-template-columns: 240px 1fr;
  padding-bottom: 42px;
}

.ep-spine--solo {
  border-right: 0;
}

.ep-spine--solo .ep-block {
  padding-inline: 0;
  border-bottom: 0;
}

.ep-spine--solo .ep-block p {
  margin-bottom: 18px;
}

.ep-spine--solo .ep-block p:last-child {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .cred-body--team {
    grid-template-columns: 1fr;
  }
}

/* One-line blurb on the team cards; the coach roster has no equivalent. */
.partner-blurb {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-body-soft);
}

/* --- Based in: the locator map -------------------------------------------
   The coach's state filled in brand red, a dot at their city. Minimal on
   purpose — no labels, no borders, no legend; the line underneath already
   names the place, so the map only has to answer "roughly where". */

.ep-side-block--where .locator {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 14px;
  opacity: 0.92;
}

/* Home-page coach preview: a fixed 3 x 3, and the cards are links now so
   they lead to the coach's own page. */
.partner-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.partner--link {
  display: block;
  color: inherit;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.partner--link:hover {
  transform: translateY(-3px);
}

.partner--link:hover h3 {
  color: var(--brand);
}

.partner--link h3 {
  transition: color 0.25s ease;
}

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

@media (max-width: 680px) {
  .partner-grid--3 { grid-template-columns: 1fr; }
}

/* --- Industries word cloud -----------------------------------------------
   Term size encodes a real number: how many of the 31 coaches have that
   sector in their own expertise, industry, specialties or career history.
   Three weight tiers rather than a continuous ramp, so the cloud reads as
   a considered hierarchy instead of noise. */

.wordcloud {
  border-top: 1px solid var(--color-divider);
  padding-top: 48px;
}

.wc-terms {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 26px;
  max-width: 1040px;
  margin: 0 auto;
}

.wc-term {
  padding: 2px 4px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--s);
  line-height: 1.22;
  letter-spacing: -0.02em;
  transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wc-t1 { font-weight: 500; color: var(--slate); }
.wc-t2 { font-weight: 600; color: var(--color-body); }
.wc-t3 { font-weight: 700; color: var(--ink); }

.wc-term:hover,
.wc-term:focus-visible {
  color: var(--brand);
  transform: translateY(-2px);
}

/* Dim the rest so the one being read stands clear. */
.wordcloud.is-active .wc-term:not(:hover):not(:focus-visible) {
  opacity: 0.32;
}

.wc-readout {
  margin-top: 44px;
  text-align: center;
  font-size: 15px;
  color: var(--color-body-soft);
  min-height: 24px;
}

.wc-readout .wc-n {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--brand);
}

.wc-readout-default {
  font-style: italic;
  opacity: 0.8;
}

@media (max-width: 760px) {
  .wc-terms { gap: 4px 16px; }
  .wc-term { font-size: calc(var(--s) * 0.78); }
}

@media (prefers-reduced-motion: reduce) {
  .wc-term { transition: color 0.25s ease, opacity 0.25s ease; }
  .wc-term:hover { transform: none; }
}