/* Extends design system from home page — keep in sync */
/* =========================================================
   Influence 51 — Services page
   Strict palette: #000 / #FFF / #6600FF (+ rgba alphas only).
   Type: Futura PT (Adobe Typekit) — thin (300) + bold (700).
   ========================================================= */

:root {
  /* Palette — ONLY these three + alphas */
  --ink:     #000000;
  --white:   #FFFFFF;
  --accent:  #6600FF;
  --accent-hover: #7A1AFF;

  /* Alphas on black */
  --ink-90: rgba(0,0,0,.90);
  --ink-72: rgba(0,0,0,.72);
  --ink-62: rgba(0,0,0,.62);
  --ink-55: rgba(0,0,0,.55);
  --ink-30: rgba(0,0,0,.30);
  --ink-12: rgba(0,0,0,.12);
  --ink-08: rgba(0,0,0,.08);
  --ink-06: rgba(0,0,0,.06);

  /* Alphas on white */
  --white-90: rgba(255,255,255,.90);
  --white-72: rgba(255,255,255,.72);
  --white-55: rgba(255,255,255,.55);
  --white-30: rgba(255,255,255,.30);
  --white-15: rgba(255,255,255,.15);
  --white-08: rgba(255,255,255,.08);

  /* Accent alphas */
  --accent-50: rgba(102,0,255,.50);
  --accent-35: rgba(102,0,255,.35);
  --accent-30: rgba(102,0,255,.30);
  --accent-25: rgba(102,0,255,.25);
  --accent-18: rgba(102,0,255,.18);
  --accent-15: rgba(102,0,255,.15);
  --accent-12: rgba(102,0,255,.12);
  --accent-10: rgba(102,0,255,.10);
  --accent-08: rgba(102,0,255,.08);
  --accent-06: rgba(102,0,255,.06);

  --ff: "futura-pt","Futura","Century Gothic","Avenir Next","Helvetica Neue",Arial,sans-serif;

  --content-max: 1240px;
  --gutter: 24px;
  --gutter-mobile: 20px;

  --ease: cubic-bezier(.16,1,.3,1);
  --t: 280ms var(--ease);
  --t-fast: 180ms var(--ease);

  --sec-y: clamp(80px, 10vw, 140px);
  --sec-y-thin: clamp(64px, 7vw, 96px);

  --nav-h: 72px;
}

/* =========================================================
   Base reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
body {
  min-height: 100dvh;
  font-family: var(--ff);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; transition: color var(--t), border-color var(--t), background var(--t); }
h1, h2, h3, h4 { font-family: var(--ff); line-height: 1.05; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (max-width: 640px) {
  .container { padding-inline: var(--gutter-mobile); }
}

/* =========================================================
   Typography primitives
   ========================================================= */
.display {
  font-family: var(--ff);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.02;
  font-size: clamp(2rem, 1.2rem + 3.8vw, 4rem);
  color: var(--ink);
}
.display--center { text-align: center; }
.display--xl {
  font-size: clamp(2.5rem, 1.6rem + 4.4vw, 4.5rem);
}
.display .thin { font-weight: 300; }
.display .bold { font-weight: 700; }

.eyebrow {
  display: inline-block;
  font-family: var(--ff);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.eyebrow--on-dark { color: var(--accent); }

.section-head { margin-bottom: clamp(48px, 6vw, 72px); }
.section-head.center { text-align: center; }
.section-head.center .eyebrow,
.section-head.center .chip { display: inline-flex; }
.section-intro {
  max-width: 680px;
  margin: 20px auto 0;
  color: var(--ink-72);
  font-size: 18px;
  line-height: 1.65;
}
.section-intro--on-dark { color: var(--white-72); }

.hairline {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--accent);
  margin-bottom: 24px;
}
.hairline--center { margin: 0 auto 24px; }

/* =========================================================
   Pill chip
   ========================================================= */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 6px 14px;
  line-height: 1;
  margin-bottom: 20px;
}
.chip--solid { background: var(--accent); color: var(--white); border-color: var(--accent); }
.chip--on-dark { color: var(--accent); border-color: var(--accent); }
.chip--sm { font-size: 10px; padding: 4px 10px; letter-spacing: 0.18em; }

/* Word highlight pill (softly rounded)
   r7-about: switched to display:inline + box-decoration-break:clone so the
   purple background wraps each visual line individually instead of forming
   one big rectangle around all the words. */
.hilite-pill {
  display: inline;
  background: var(--accent);
  color: var(--white);
  border-radius: 10px;
  padding: 0.04em 0.16em 0.08em;
  line-height: 1.05;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ff);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 16px 24px;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
}
@media (max-width: 420px) {
  .btn { font-size: 12px; letter-spacing: 0.12em; padding: 14px 18px; white-space: normal; }
}

.btn--primary-light { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn--primary-light:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.btn--ghost-light { background: transparent; color: var(--ink); border-color: var(--ink-30); }
.btn--ghost-light:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }

.btn--primary-dark { background: var(--accent); color: var(--white); border-color: var(--accent); }
.btn--primary-dark:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }
.btn--ghost-dark { background: transparent; color: var(--white); border-color: var(--white-30); }
.btn--ghost-dark:hover { border-color: var(--white); transform: translateY(-1px); }

.btn--full { width: 100%; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: color var(--t), border-color var(--t);
}
.arrow-link:hover { color: var(--accent-hover); border-color: var(--accent); }
.arrow-link span { transition: transform var(--t); }
.arrow-link:hover span { transform: translateX(4px); }

.center-row { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }

/* =========================================================
   Reveal
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ink);
  border-bottom: 1px solid var(--white-15);
}
.nav__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav__logo {
  font-family: var(--ff);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.14em;
  color: var(--white);
}
.nav__links {
  display: flex;
  gap: clamp(16px, 2vw, 32px);
  margin-left: auto;
}
.nav__links a {
  font-family: var(--ff);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-72);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--white); }
.nav__links a.is-active { position: relative; }
.nav__links a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -8px;
  height: 2px;
  background: var(--accent);
}
.nav__cta {
  font-family: var(--ff);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  padding: 10px 16px;
  border: 1px solid var(--white-30);
  border-radius: 2px;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.nav__cta:hover { border-color: var(--accent); color: var(--white); background: var(--accent); }

.nav__menu {
  display: none;
  width: 40px; height: 40px;
  margin-left: auto;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
.nav__menu span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  transition: transform var(--t), opacity var(--t);
}
.nav__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
  display: none;
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--ink);
  z-index: 55;
  padding: 40px var(--gutter-mobile);
}
.nav__mobile nav {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.nav__mobile a {
  font-family: var(--ff);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}
.nav__mobile a:hover, .nav__mobile a.is-active { color: var(--accent); }
.nav__mobile.is-open { display: block; }

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__menu { display: inline-flex; }
}

/* =========================================================
   HERO (dark, centered — subpage height ~680px)
   ========================================================= */
.hero-s {
  position: relative;
  background: var(--ink);
  color: var(--white);
  min-height: 680px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 0 96px;
  overflow: hidden;
}
.hero-s::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 80vw; height: 80vw;
  max-width: 900px; max-height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, var(--accent-15) 0%, transparent 60%);
  pointer-events: none;
}
.hero-s__inner {
  position: relative;
  max-width: 1040px;
  width: 100%;
  padding-inline: var(--gutter);
  text-align: center;
}
.hero-s .chip {
  color: var(--accent);
  border-color: var(--accent);
  margin-bottom: 28px;
}
.hero-s__title {
  font-family: var(--ff);
  text-transform: uppercase;
  font-size: clamp(2.25rem, 1rem + 5vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
  color: var(--white);
}
.hero-s__title .line { display: block; }
.hero-s__title .thin { font-weight: 300; }
.hero-s__title .bold { font-weight: 700; }
.hero-s__title .hilite-pill {
  padding: 0 0.16em 0.04em;
  border-radius: 0.12em;
  line-height: 0.85;
  margin: 0 0.04em;
}

.hero-s__lede {
  margin: 32px auto 0;
  max-width: 720px;
  color: var(--white-72);
  font-size: clamp(17px, 1rem + 0.25vw, 20px);
  line-height: 1.6;
  font-weight: 400;
}

.hero-s__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}

.hero-s__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.hero-s__scroll-line {
  display: block;
  width: 1px;
  height: 48px;
  background: var(--accent);
  animation: scrollBounce 2s var(--ease) infinite;
}
.hero-s__scroll-word {
  font-family: var(--ff);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (max-width: 640px) {
  .hero-s { min-height: 600px; padding: 72px 0 80px; }
  .hero-s__scroll-line { height: 36px; }
  .hero-s__scroll { bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-s__scroll-line { animation: none; }
}

/* =========================================================
   Services Grid — 2x2, white (same style as Topics Core Four)
   ========================================================= */
.services {
  padding: var(--sec-y) 0;
  background: var(--white);
}
.services__head {
  text-align: center;
  max-width: 900px;
  margin: 0 auto clamp(48px, 5vw, 64px);
}
.services__head h2 {
  font-size: clamp(2.25rem, 1.2rem + 4vw, 3.5rem);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.2vw, 28px);
  align-items: stretch;
}
@media (max-width: 900px) {
  .services__grid { grid-template-columns: 1fr; }
}

.svc-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--ink-08);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  transition: border-color var(--t), transform var(--t);
}
.svc-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.svc-card__bignum {
  position: absolute;
  top: -8px;
  right: 12px;
  font-family: var(--ff);
  font-weight: 300;
  font-size: clamp(100px, 12vw, 140px);
  line-height: 1;
  color: var(--accent-08);
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.01em;
}
.svc-card__top {
  position: relative;
  z-index: 1;
}
.svc-card__top .chip { margin-bottom: 0; }
.svc-card__title {
  font-family: var(--ff);
  text-transform: uppercase;
  font-size: clamp(1.5rem, 0.9rem + 1.1vw, 2rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--ink);
  position: relative;
  z-index: 1;
}
.svc-card__title .thin { font-weight: 300; }
.svc-card__title .bold { font-weight: 700; }
.svc-card__desc {
  font-family: var(--ff);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-72);
  position: relative;
  z-index: 1;
}
.svc-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  position: relative;
  z-index: 1;
  margin-top: 4px;
}
.svc-card__list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: flex-start;
}
.svc-card__dot {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  margin-top: 2px;
}
.svc-card__item {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-72);
}
.svc-card__foot {
  margin-top: auto;
  padding-top: 8px;
  position: relative;
  z-index: 1;
}

/* =========================================================
   Tiers — Three Paths (white, featured = filled dark)
   ========================================================= */
.tiers {
  padding: var(--sec-y) 0;
  background: var(--white);
  border-top: 1px solid var(--accent-18);
}
.tiers__head {
  text-align: center;
  max-width: 900px;
  margin: 0 auto clamp(48px, 5vw, 72px);
}
.tiers__head h2 { font-size: clamp(2.25rem, 1.2rem + 4vw, 3.5rem); }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
  align-items: stretch;
}
@media (max-width: 900px) {
  .tier-grid { grid-template-columns: 1fr; }
}

.tier {
  position: relative;
  background: var(--white);
  border: 1px solid var(--ink-08);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.tier:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.tier .chip { margin-bottom: 4px; align-self: flex-start; }
.tier__price {
  font-family: var(--ff);
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 1.8vw, 2.75rem);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.tier__price-suffix {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink-55);
  margin-left: 4px;
  text-transform: uppercase;
}
.tier__tag {
  font-family: var(--ff);
  font-size: 15px;
  color: var(--ink-72);
  line-height: 1.5;
}
.tier__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 0 0;
}
.tier__list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-72);
}
.tier__list li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  margin-top: 9px;
  justify-self: center;
}
.tier__cta { margin-top: auto; padding-top: 20px; }
.tier__cta .btn { width: 100%; }

/* Featured tier — solid dark */
.tier--featured {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
  box-shadow: 0 24px 80px -20px var(--accent-25);
  transform: translateY(-12px);
}
.tier--featured:hover {
  border-color: var(--accent);
  transform: translateY(-14px);
}
.tier--featured .chip {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.tier--featured .tier__price { color: var(--white); }
.tier--featured .tier__price-suffix { color: var(--white-55); }
.tier--featured .tier__tag { color: var(--white-72); }
.tier--featured .tier__list li { color: var(--white-72); }
.tier--featured .tier__list li::before { background: var(--accent); }

@media (max-width: 900px) {
  .tier--featured { transform: none; }
  .tier--featured:hover { transform: translateY(-2px); }
}

/* =========================================================
   Testimonial moment (white, type-only)
   ========================================================= */
.tmoment {
  position: relative;
  padding: clamp(80px, 10vw, 120px) 0;
  background: var(--white);
  overflow: hidden;
}
.tmoment__inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  text-align: center;
}
.tmoment__mark {
  position: absolute;
  top: -20px;
  left: 10px;
  font-family: var(--ff);
  font-weight: 700;
  font-size: 220px;
  line-height: 1;
  color: var(--accent-10);
  pointer-events: none;
  user-select: none;
}
.tmoment__body { position: relative; z-index: 1; }
.tmoment .hairline--center { margin: 0 auto 28px; background: var(--accent); }
.tmoment__quote {
  font-family: var(--ff);
  text-transform: uppercase;
  font-size: clamp(1.85rem, 1.2rem + 1.9vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin-bottom: 24px;
}
.tmoment__quote .thin { font-weight: 300; }
.tmoment__quote .bold { font-weight: 700; }
.tmoment__attr {
  font-family: var(--ff);
  font-size: 14px;
  color: var(--ink-62);
  line-height: 1.55;
}
@media (max-width: 640px) {
  .tmoment__mark { font-size: 140px; top: 0; left: 0; }
}

/* =========================================================
   BUILD — Configurator (DARK, framed with hairlines)
   ========================================================= */
.build {
  background: var(--ink);
  color: var(--white);
  padding: var(--sec-y) 0;
  position: relative;
}
.build__frame {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.build__hairline {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--accent-25);
}
.build__head {
  text-align: center;
  max-width: 900px;
  margin: clamp(56px, 6vw, 80px) auto clamp(48px, 5vw, 64px);
  padding-inline: var(--gutter);
}
.build__head h2 {
  font-size: clamp(2.25rem, 1.2rem + 4vw, 3.5rem);
  color: var(--white);
}
.build__head .section-intro { color: var(--white-72); }
.build__head .chip { color: var(--accent); border-color: var(--accent); background: transparent; }

.configurator {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
  max-width: var(--content-max);
  margin: 0 auto clamp(56px, 6vw, 80px);
  padding-inline: var(--gutter);
}
@media (max-width: 900px) {
  .configurator { grid-template-columns: 1fr; }
}

.configurator__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cfg-block {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--white-15);
  padding: clamp(20px, 2.2vw, 28px);
  transition: border-color var(--t), background var(--t);
}
.cfg-block:hover { border-color: var(--white-30); }
.cfg-block.is-active {
  border-color: var(--accent);
  background: var(--accent-08);
}
.cfg-block__head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}
.cfg-block__head > div:first-child { min-width: 0; }
.cfg-block__title {
  font-family: var(--ff);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 4px;
}
.cfg-block__sub {
  font-size: 14px;
  color: var(--white-72);
  line-height: 1.5;
}
.cfg-block__body {
  display: none;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--white-15);
}
.cfg-block__body.is-visible { display: block; }
.cfg-block__body .field + .field,
.cfg-block__body .mode-row + .field,
.cfg-block__body .field + .mode-row {
  margin-top: 20px;
}

/* Stepper */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.stepper__btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--white-30);
  color: var(--white);
  background: transparent;
  font-family: var(--ff);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  border-radius: 2px;
  transition: background var(--t), border-color var(--t), color var(--t);
  cursor: pointer;
}
.stepper__btn:hover { background: var(--accent); border-color: var(--accent); }
.stepper__btn:disabled { opacity: .3; cursor: not-allowed; background: transparent; border-color: var(--white-15); }
.stepper__value {
  font-family: var(--ff);
  font-weight: 700;
  font-size: 18px;
  color: var(--white);
  min-width: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Toggle (consulting on/off) */
.toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.toggle input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.toggle__track {
  width: 48px;
  height: 26px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--white-30);
  position: relative;
  transition: background var(--t), border-color var(--t);
}
.toggle__thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--white-72);
  transition: transform var(--t), background var(--t);
}
.toggle input:checked + .toggle__track { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .toggle__track .toggle__thumb { transform: translateX(22px); background: var(--white); }
.toggle input:focus-visible + .toggle__track { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Field + segmented */
.field { display: block; }
.field__label {
  display: block;
  font-family: var(--ff);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-72);
  margin-bottom: 10px;
}
.mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.mode-row .field__label { margin-bottom: 0; }

.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mode-toggle__label {
  font-family: var(--ff);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white-55);
  cursor: pointer;
  transition: color var(--t);
}
.mode-toggle__label.is-active { color: var(--white); }
.mode-toggle__switch {
  width: 48px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--white-30);
  background: transparent;
  position: relative;
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
}
.mode-toggle__switch:hover { border-color: var(--white); }
.mode-toggle__switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mode-toggle__thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--white-72);
  transition: transform var(--t), background var(--t);
  pointer-events: none;
}
.mode-toggle[data-mode-value="inperson"] .mode-toggle__switch {
  background: var(--accent);
  border-color: var(--accent);
}
.mode-toggle[data-mode-value="inperson"] .mode-toggle__thumb {
  transform: translateX(22px);
  background: var(--white);
}

.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg__btn {
  flex: 0 0 auto;
  font-family: var(--ff);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-72);
  background: transparent;
  border: 1px solid var(--white-15);
  border-radius: 2px;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t);
  text-align: left;
}
.seg__btn:hover { border-color: var(--white-30); color: var(--white); }
.seg__btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
.seg--row { flex-wrap: nowrap; }
.seg--row .seg__btn { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; padding-inline: 10px; }
@media (max-width: 520px) {
  .seg--row { flex-wrap: wrap; }
  .seg--row .seg__btn { flex: 1 1 40%; }
}

.seg--stacked { flex-direction: column; }
.seg--stacked .seg__btn {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px;
}
.seg__name { font-family: var(--ff); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: inherit; }
.seg__note { font-family: var(--ff); font-weight: 400; font-size: 12px; color: var(--white-55); letter-spacing: 0; text-transform: none; }
.seg--stacked .seg__btn.is-active .seg__note { color: var(--white-72); }

/* Quote (summary) */
.quote {
  position: relative;
}
.quote__sticky {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  padding: clamp(24px, 2.5vw, 32px);
  background: var(--accent-08);
  border: 1px solid var(--accent-25);
}
.quote .eyebrow {
  color: var(--accent);
  margin-bottom: 12px;
  font-size: 11px;
}
.quote__range {
  font-family: var(--ff);
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 1.6vw, 2.75rem);
  line-height: 1;
  color: var(--white);
  letter-spacing: 0.005em;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}
.quote__sep { opacity: .5; }
.quote__note {
  font-size: 13px;
  color: var(--white-72);
  line-height: 1.55;
  margin-bottom: 20px;
}
.quote__list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--white-15);
  padding-top: 16px;
}
.quote__list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  line-height: 1.5;
}
.quote__list li.quote__empty {
  color: var(--white-55);
  font-style: normal;
  justify-content: flex-start;
}
.quote__list li .q-line-name { color: var(--white); font-weight: 500; }
.quote__list li .q-line-price { color: var(--white-72); font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote__fine {
  font-size: 11px;
  color: var(--white-55);
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin-top: 12px;
  text-align: center;
}

/* =========================================================
   Custom (Discovery / Design / Deliver) — WHITE w/ purple glow
   ========================================================= */
.custom {
  padding: var(--sec-y) 0;
  background: var(--white);
}
.custom__head {
  text-align: center;
  max-width: 900px;
  margin: 0 auto clamp(48px, 5vw, 64px);
}
.custom__head h2 {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.25rem);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
}
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
}

.step {
  position: relative;
  background: var(--white);
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  padding: clamp(32px, 3.2vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02), 0 12px 32px -16px rgba(0, 0, 0, 0.08);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.step::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.step:hover {
  border-color: rgba(102, 0, 255, 0.28);
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(102, 0, 255, 0.04), 0 30px 64px -20px rgba(102, 0, 255, 0.22);
}
.step:hover::after { transform: scaleX(1); }
.step:hover .step__num {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.step__num {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 6px 16px;
  background: var(--accent);
  color: var(--white);
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-family: var(--ff);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.step__title {
  font-family: var(--ff);
  font-weight: 700;
  font-size: clamp(1.3rem, 1rem + 0.5vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.step p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-72);
  margin: 0;
}

/* =========================================================
   Influence for All (DARK, refined)
   ========================================================= */
.ifa {
  background: var(--ink);
  color: var(--white);
  padding: var(--sec-y) 0;
  position: relative;
  overflow: hidden;
}
.ifa::before {
  content: "";
  position: absolute;
  top: 10%;
  left: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 700px;
  max-height: 700px;
  background: radial-gradient(circle at center, var(--accent-15) 0%, transparent 60%);
  pointer-events: none;
}
.ifa__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 860px) {
  .ifa__inner { grid-template-columns: 1fr; }
}
.ifa__copy .chip { color: var(--accent); border-color: var(--accent); }
.ifa__copy h2 {
  font-family: var(--ff);
  text-transform: uppercase;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--white);
  margin-bottom: 20px;
}
.ifa__copy h2 .thin { font-weight: 300; }
.ifa__copy h2 .bold { font-weight: 700; }
.ifa__copy > p {
  color: var(--white-72);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: 52ch;
}
.ifa__list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ifa__list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.55;
  color: var(--white-72);
}
.ifa__list li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  margin-top: 8px;
  justify-self: center;
}
.ifa__list em { font-style: italic; color: var(--white); }
.ifa__card {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--accent-35);
  padding: clamp(32px, 3.5vw, 48px);
  position: relative;
}
.ifa__card-inner { display: flex; flex-direction: column; gap: 8px; }
.ifa__card-label {
  font-family: var(--ff);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.ifa__card-big {
  font-family: var(--ff);
  font-weight: 700;
  font-size: clamp(3rem, 2rem + 3vw, 4.75rem);
  line-height: 1;
  color: var(--white);
  letter-spacing: 0.005em;
  margin: 4px 0 4px;
}
.ifa__card-sub {
  font-family: var(--ff);
  font-size: 13px;
  color: var(--white-72);
  line-height: 1.5;
  margin-bottom: 16px;
}
.ifa__divider {
  height: 1px;
  background: var(--white-15);
  margin: 12px 0;
}

/* =========================================================
   Final CTA (DARK)
   ========================================================= */
.cta {
  background: var(--ink);
  color: var(--white);
  padding: 160px 0;
  text-align: center;
  border-top: 1px solid var(--white-08);
}
.cta__inner { max-width: 900px; margin: 0 auto; padding-inline: var(--gutter); }
.cta .display {
  color: var(--white);
  margin-bottom: 24px;
  font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4.5rem);
  line-height: 1.05;
}
.cta__body {
  color: var(--white-72);
  font-size: 18px;
  line-height: 1.65;
  max-width: 58ch;
  margin: 0 auto 36px;
}
.cta__btns {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

@media (max-width: 640px) {
  .cta { padding: 96px 0; }
}

/* =========================================================
   Footer (identical to home)
   ========================================================= */
.footer {
  background: var(--ink);
  color: var(--white);
  padding: 80px 0 32px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 48px;
  padding-bottom: 48px;
}
.footer__logo {
  font-family: var(--ff);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.14em;
  color: var(--white);
  margin-bottom: 12px;
}
.footer__tag {
  color: var(--white-72);
  font-size: 15px;
  line-height: 1.55;
  max-width: 36ch;
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.footer__head {
  font-family: var(--ff);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 14px;
}
.footer__cols a {
  display: block;
  font-size: 14px;
  color: var(--white-72);
  padding: 4px 0;
}
.footer__cols a:hover { color: var(--white); }
.footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--white-15);
  font-family: var(--ff);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-55);
}
.footer__social { display: inline-flex; gap: 20px; }
.footer__social a { color: var(--white-72); }
.footer__social a:hover { color: var(--white); }

@media (max-width: 860px) {
  .footer__top { grid-template-columns: 1fr; gap: 40px; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* =========================================================
   Modal (proposal)
   ========================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.modal.is-open { display: flex; }
.modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.modal__card {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--accent-35);
  padding: clamp(28px, 3.5vw, 48px);
  z-index: 1;
  margin: 40px 0;
}
.modal__x {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  color: var(--white-72);
  font-size: 24px;
  line-height: 1;
  transition: color var(--t), background var(--t);
  border-radius: 2px;
}
.modal__x:hover { color: var(--white); background: var(--white-08); }
.modal__card .eyebrow { color: var(--accent); margin-bottom: 12px; }
.modal__card h3 {
  font-family: var(--ff);
  font-weight: 700;
  font-size: clamp(1.6rem, 1rem + 1.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--white);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.modal__sub {
  color: var(--white-72);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.modal__summary {
  background: var(--accent-08);
  border: 1px solid var(--accent-25);
  padding: 20px;
  margin-bottom: 24px;
  font-size: 14px;
}
.modal__summary .sum-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--ff);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--white-15);
}
.modal__summary .sum-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--white-72);
  padding: 4px 0;
}
.modal__summary .sum-total {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--white-15);
  font-family: var(--ff);
  font-weight: 700;
  color: var(--white);
}

.modal__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal__form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal__form label span {
  font-family: var(--ff);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-72);
}
.modal__form input,
.modal__form textarea,
.modal__form select {
  font-family: var(--ff);
  font-weight: 400;
  font-size: 15px;
  color: var(--white);
  background: transparent;
  border: 1px solid var(--white-15);
  border-radius: 2px;
  padding: 12px 14px;
  transition: border-color var(--t), background var(--t);
}
.modal__form input:focus,
.modal__form textarea:focus,
.modal__form select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--accent-08);
}
.modal__form .form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 520px) {
  .modal__form .form__row { grid-template-columns: 1fr; }
}

.modal__success { text-align: center; padding: 20px 0; }
.modal__check {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  display: inline-grid;
  place-items: center;
  font-size: 28px;
  margin-bottom: 20px;
}
.modal__success h3 { color: var(--white); margin-bottom: 12px; }
.modal__success p { color: var(--white-72); font-size: 15px; line-height: 1.6; margin-bottom: 24px; }

/* =========================================================
   ========== ABOUT PAGE ==========
   Sections exclusive to /about: .who, .bio, .creds,
   .beliefs, .how (extends .custom). Reuses existing tokens.
   ========================================================= */

/* ---------- Who We Are ---------- */
.who {
  position: relative;
  background: var(--white);
  padding: 112px 0;
  overflow: hidden;
}
.who__head {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.who__head .chip { margin-bottom: 20px; }
.who__head h2 { margin-bottom: 24px; }
.who__pull {
  max-width: 820px;
  margin: 72px auto 0;
  text-align: center;
  font-family: var(--ff);
  font-weight: 300;
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
  line-height: 1.3;
  color: var(--ink);
}
.who__pull .thin { font-weight: 300; }
.who__pull .bold { font-weight: 700; }
.who__bignum {
  position: absolute;
  top: 48px;
  right: 48px;
  font-family: var(--ff);
  font-weight: 300;
  font-size: 140px;
  line-height: 1;
  color: rgba(102, 0, 255, 0.08);
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 768px) {
  .who { padding: 80px 0; }
  .who__bignum { display: none; }
  .who__pull { margin-top: 56px; }
}

/* ---------- Bio / Meet JonRobert ---------- */
.bio {
  background: var(--white);
  padding: 112px 0;
}
.bio__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 960px) {
  .bio { padding: 80px 0; }
  .bio__inner { grid-template-columns: 1fr; gap: 48px; }
}
.bio__portrait {
  position: sticky;
  top: 96px;
  align-self: start;
  max-width: 480px;
  width: 100%;
}
@media (max-width: 960px) {
  .bio__portrait { position: static; top: auto; }
}
/* Round 4: purple corner accent on the founder photo removed for a cleaner look. */
.bio__portrait::after {
  content: none;
}
.bio__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0;
}
.bio__copy .chip { margin-bottom: 20px; }
.bio__copy h2 {
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  line-height: 1.05;
  margin-bottom: 16px;
}
.bio__role {
  font-family: var(--ff);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 32px;
}
.bio__para {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-72);
  margin-bottom: 20px;
}
.bio__para:last-of-type { margin-bottom: 0; }

.bio__quote {
  position: relative;
  margin: 40px 0 0;
  padding-top: 28px;
}
.bio__quote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 1px;
  background: var(--accent);
}
.bio__quote blockquote { margin: 0; }
.bio__quote blockquote p {
  font-family: var(--ff);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}
.bio__quote blockquote p .thin { font-weight: 300; }
.bio__quote blockquote p .bold { font-weight: 700; }
.bio__qmark {
  display: inline;
  color: var(--accent);
  font-size: 1em;
  font-weight: 700;
}
.bio__qmark--open { margin-right: 4px; }
.bio__qmark--close { margin-left: 4px; }
.bio__quote figcaption {
  margin-top: 16px;
  font-family: var(--ff);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
}

/* ---------- Credentials / Depth & Reach ---------- */
.creds {
  background: var(--white);
  padding: 112px 0;
}
.creds__head {
  max-width: 760px;
  margin: 0 auto clamp(48px, 5vw, 64px);
  text-align: center;
}
.creds__head .chip { margin-bottom: 20px; }
.creds__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .creds { padding: 80px 0; }
  .creds__grid { grid-template-columns: 1fr; }
}
.cred-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--ink-08);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  transition: border-color var(--t), transform var(--t);
}
.cred-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.cred-card .chip {
  align-self: flex-start;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}
.cred-card .svc-card__title,
.cred-card .svc-card__desc,
.cred-card .svc-card__list { position: relative; z-index: 1; }

/* ---------- What We Believe ---------- */
.beliefs {
  position: relative;
  background: var(--ink);
  color: var(--white);
  padding: 112px 0;
  overflow: hidden;
}
.beliefs::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(102, 0, 255, 0.08) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.beliefs .container { position: relative; z-index: 1; }
.beliefs__head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.beliefs__head .chip {
  margin-bottom: 20px;
  color: var(--accent);
  border-color: var(--accent);
}
.beliefs__head h2 { color: var(--white); margin-bottom: 20px; }
.beliefs__head h2 .thin,
.beliefs__head h2 .bold { color: var(--white); }

.beliefs__list {
  list-style: none;
  margin: 0 auto;
  padding: 64px 0 0;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.belief {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 48px;
  align-items: start;
  padding: 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.belief:first-child { border-top: none; padding-top: 16px; }
.belief__num {
  font-family: var(--ff);
  font-weight: 300;
  font-size: 100px;
  line-height: 1;
  color: rgba(102, 0, 255, 0.48);
  letter-spacing: 0.01em;
  user-select: none;
}
.belief__copy h3 {
  font-family: var(--ff);
  font-size: clamp(1.25rem, 1rem + 0.7vw, 1.75rem);
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--white);
  letter-spacing: 0.01em;
}
.belief__copy h3 .thin { font-weight: 300; }
.belief__copy h3 .bold { font-weight: 700; }
.belief__copy p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  max-width: 56ch;
  margin: 0;
}

@media (max-width: 768px) {
  .beliefs { padding: 80px 0; }
  .belief {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 28px 0;
  }
  .belief__num { font-size: 72px; }
}

/* ---------- How We Work (extends .custom) ---------- */
/* .how inherits .custom styles — kept here for overrides if needed */
.how .custom__head { margin-bottom: clamp(48px, 5vw, 64px); }

/* =========================================================
   Pull testimonial (50/50 split — big logo left, quote right)
   Ported from home/topics pages for brand consistency
   ========================================================= */
.pull {
  padding: 88px 0 120px;
  background: var(--white);
  position: relative;
  overflow: hidden;
}
.pull__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.pull__eyebrow-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 72px;
  margin-bottom: 40px;
}
.pull__eyebrow {
  justify-self: center;
  display: inline-block;
  font-family: var(--ff);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 8px 14px;
  border: 1px solid var(--ink);
  border-radius: 999px;
}
.pull__inner::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--ink);
  margin-bottom: 44px;
}
.pull__split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 72px;
  align-items: center;
}
.pull__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
.pull__logo {
  display: block;
  max-width: 100%;
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Round 5: BBBSA logo runs visually larger than the others; scale it back
   so it matches the optical weight of McDonald's, Wallace, etc. */
.pull__logo.pull__logo--bbbsa {
  max-height: 150px;
  max-width: 78%;
}
.pull__content {
  text-align: left;
}
.pull__quote {
  font-family: var(--ff);
  font-weight: 400;
  font-size: 2.8rem;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 28px;
}
.pull__qmark {
  display: inline;
  color: var(--accent);
  font-size: 1em;
  font-weight: 700;
}
.pull__attr {
  font-family: var(--ff);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  line-height: 1.5;
  max-width: 480px;
  margin: 0;
}
@media (max-width: 900px) {
  .pull { padding: 72px 0; }
  .pull__eyebrow-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 28px; }
  .pull__eyebrow { font-size: 10px; }
  .pull__inner::before { margin-bottom: 32px; }
  .pull__split {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .pull__logo-wrap { min-height: 160px; }
  .pull__logo { max-height: 140px; }
  .pull__logo.pull__logo--bbbsa { max-height: 96px; max-width: 70%; }
  .pull__content { text-align: center; }
  .pull__quote { font-size: 2rem; }
  .pull__attr { margin-left: auto; margin-right: auto; }
}

/* =============================================================
   ABOUT ROUND 3 — Council-informed additions
   ============================================================= */

/* Hero credential strip — small scannable chips beneath lede */
.hero-s__creds {
  list-style: none;
  margin: 28px 0 40px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 0;
  font-family: futura-pt, Futura, "Century Gothic", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.hero-s__creds li {
  padding: 0 18px;
  border-right: 1px solid rgba(255,255,255,0.22);
  line-height: 1.2;
}
.hero-s__creds li:last-child { border-right: 0; }
@media (max-width: 720px) {
  .hero-s__creds { flex-direction: column; gap: 8px; }
  .hero-s__creds li { border-right: 0; padding: 0; }
}

/* Founding-story slot — subtle purple left-border pull-block inside the bio */
.bio__story {
  margin: 32px 0 32px;
  padding: 18px 0 18px 20px;
  border-left: 3px solid var(--accent);
}
.bio__story-eyebrow {
  font-family: futura-pt, Futura, "Century Gothic", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.bio__story-copy {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.65;
  color: rgba(0,0,0,0.72);
}

/* Speaker reel section (dark) */
.reel {
  background: var(--black, #000);
  color: var(--white, #fff);
  padding: 120px 0;
  position: relative;
}
.reel__head {
  text-align: center;
  margin: 0 auto 48px;
  max-width: 760px;
  padding-inline: var(--gutter);
}
.reel__head .chip { margin-bottom: 18px; }
.reel__frame {
  max-width: 1040px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.reel__ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  overflow: hidden;
}
.reel__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background:
    radial-gradient(ellipse at center, rgba(102,0,255,0.12), transparent 65%),
    #0a0a0a;
  color: var(--white, #fff);
}
.reel__play {
  display: inline-flex;
  color: var(--accent);
  opacity: 0.95;
}
.reel__note {
  margin: 0;
  font-family: futura-pt, Futura, "Century Gothic", sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}
@media (max-width: 768px) {
  .reel { padding: 80px 0; }
}

/* Who This Is / Isn't For — two-column fit test */
.fit {
  background: var(--white, #fff);
  padding: 120px 0 56px;
}
/* When How follows Fit, tighten the gap between them */
.fit + .custom.how {
  padding-top: 56px;
}
.fit__head {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 780px;
  padding-inline: var(--gutter);
}
.fit__head .chip { margin-bottom: 18px; }
.fit__grid {
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 820px) {
  .fit__grid { grid-template-columns: 1fr; gap: 20px; }
  .fit { padding: 80px 0 40px; }
  .fit + .custom.how { padding-top: 40px; }
}
.fit-card {
  padding: 40px 36px 36px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 4px;
  background: #fff;
}
.fit-card--yes {
  border-left: 4px solid var(--accent);
}
.fit-card--no {
  border-left: 4px solid rgba(0,0,0,0.35);
  background: #f7f7f7;
}
.fit-card__eyebrow {
  font-family: futura-pt, Futura, "Century Gothic", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 22px;
}
.fit-card--yes .fit-card__eyebrow { color: var(--accent); }
.fit-card--no .fit-card__eyebrow { color: rgba(0,0,0,0.6); }
.fit-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fit-card__list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(0,0,0,0.82);
}
.fit-card__list li:last-child { margin-bottom: 0; }
.fit-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 14px;
  height: 2px;
}
.fit-card--yes .fit-card__list li::before { background: var(--accent); }
.fit-card--no .fit-card__list li::before { background: rgba(0,0,0,0.45); }

/* CTA tertiary IFA line */
.cta__tertiary {
  margin: 22px 0 0;
  font-family: futura-pt, Futura, "Century Gothic", sans-serif;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
}
.cta__tertiary a {
  color: rgba(255,255,255,0.88);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cta__tertiary a:hover { color: var(--white, #fff); }

/* =============================================================
   TRUSTED BY — full-color static logo wall (replaces SMPS pull)
   ============================================================= */
.trusted {
  background: var(--white, #fff);
  padding: 120px 0 100px;
}
.trusted__head {
  text-align: center;
  margin: 0 auto 64px;
  max-width: 820px;
  padding-inline: var(--gutter);
}
.trusted__head .chip { margin-bottom: 18px; }
.trusted__grid {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px 16px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.trusted__grid > li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 16px 20px;
  background: transparent;
  box-shadow: none;
  transition: transform 220ms var(--ease, ease);
}
.trusted__grid > li:hover {
  background: transparent;
}
.trusted__grid img {
  max-width: 100%;
  max-height: 78px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  /* full color — no grayscale, no opacity dim */
  filter: none;
  opacity: 1;
  transition: transform 220ms var(--ease, ease);
}
.trusted__grid > li:hover img {
  transform: scale(1.04);
}

@media (max-width: 1100px) {
  .trusted__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 780px) {
  .trusted { padding: 80px 0 72px; }
  .trusted__grid { grid-template-columns: repeat(3, 1fr); }
  .trusted__grid > li { min-height: 110px; padding: 16px 14px; }
  .trusted__grid img { max-width: 110px; max-height: 62px; }
}
@media (max-width: 420px) {
  .trusted__grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   NAV DROPDOWN — Who We Help (added for cross-site nav unity)
   ========================================================= */
.nav__dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-72);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  transition: color var(--t);
}
.nav__dropdown-trigger:hover,
.nav__dropdown[data-open="true"] .nav__dropdown-trigger { color: var(--white); }
.nav__dropdown-trigger svg { transition: transform var(--t); }
.nav__dropdown[data-open="true"] .nav__dropdown-trigger svg { transform: rotate(180deg); }
.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 200px;
  background: var(--ink);
  border: 1px solid var(--white-15);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t), transform var(--t), visibility var(--t);
  z-index: 100;
}
.nav__dropdown[data-open="true"] .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__dropdown-menu a {
  display: block;
  padding: 10px 14px;
  font-family: var(--ff);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--white-72);
  border-radius: 8px;
  transition: background var(--t), color var(--t);
}
.nav__dropdown-menu a:hover,
.nav__dropdown-menu a.is-active {
  background: var(--accent);
  color: var(--white);
}
.nav__mobile-group {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--white-15);
  border-bottom: 1px solid var(--white-15);
  padding: 12px 0 16px;
  margin: 4px 0;
}
.nav__mobile-label {
  display: block;
  font-family: var(--ff);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 8px 24px 4px;
}
.nav__mobile-group a {
  padding: 8px 32px !important;
  font-size: 16px !important;
}

/* =========================================================
   NAV DROPDOWN — Who We Help (r2 — hardened against existing
   `.nav__links a` rules that would render menu items as inline text)
   ========================================================= */
.nav .nav__dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav .nav__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-72);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  transition: color var(--t);
}
.nav .nav__dropdown-trigger:hover,
.nav .nav__dropdown[data-open="true"] .nav__dropdown-trigger { color: var(--white); }
.nav .nav__dropdown-trigger svg { transition: transform var(--t); flex: 0 0 auto; }
.nav .nav__dropdown[data-open="true"] .nav__dropdown-trigger svg { transform: rotate(180deg); }

/* Critical: the menu MUST be absolutely positioned and hidden by default,
   regardless of any `.nav__links` rules in the existing stylesheet. */
.nav .nav__dropdown-menu {
  position: absolute !important;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 200px;
  background: var(--ink);
  border: 1px solid var(--white-15);
  border-radius: 12px;
  padding: 10px;
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t), transform var(--t), visibility var(--t);
  z-index: 100;
}
.nav .nav__dropdown[data-open="true"] .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav .nav__dropdown-menu a {
  display: block;
  padding: 10px 14px;
  font-family: var(--ff);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--white-72);
  border-radius: 8px;
  transition: background var(--t), color var(--t);
}
.nav .nav__dropdown-menu a:hover,
.nav .nav__dropdown-menu a.is-active {
  background: var(--accent);
  color: var(--white);
}
/* Suppress the inherited active underline that .nav__links a.is-active gets */
.nav .nav__dropdown-menu a.is-active::after { content: none !important; }

/* Mobile group */
.nav .nav__mobile-group {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--white-15);
  border-bottom: 1px solid var(--white-15);
  padding: 12px 0 16px;
  margin: 4px 0;
}
.nav .nav__mobile-label {
  display: block;
  font-family: var(--ff);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 8px 24px 4px;
}
.nav .nav__mobile-group a {
  padding: 8px 32px !important;
  font-size: 16px !important;
}

/* ===== r3-nav: uppercase dropdown items, match nav typography ===== */
.nav .nav__dropdown-menu a {
  font-size: 12px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
/* Keep purple hover from r2 */
.nav .nav__dropdown-menu a:hover,
.nav .nav__dropdown-menu a.is-active {
  background: var(--accent) !important;
  color: var(--white) !important;
}

/* ===== r5-about: Why Organizations Bring Us In (premium 2x2 with display numerals) ===== */
.bridge {
  padding: 128px 0 112px;
  background: var(--white);
  color: var(--black);
  position: relative;
  overflow: hidden;
}
.bridge::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 56px;
  background: var(--accent);
  opacity: 0.6;
  transform: translateX(-50%);
}
.bridge__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 80px;
  padding-inline: var(--gutter);
  position: relative;
}
.bridge__head .chip { margin-bottom: 22px; }
.bridge__head h2 { margin-bottom: 0; }

.bridge__list {
  list-style: none;
  margin: 0 auto;
  padding-inline: var(--gutter);
  max-width: 1180px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid rgba(0,0,0,0.10);
  border-left: 1px solid rgba(0,0,0,0.10);
}
.bridge__item {
  position: relative;
  padding: 56px 48px 56px 48px;
  border-right: 1px solid rgba(0,0,0,0.10);
  border-bottom: 1px solid rgba(0,0,0,0.10);
  background: var(--white);
  transition: background 280ms ease;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 280px;
}
.bridge__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bridge__item:hover {
  background: rgba(102,0,255,0.025);
}
.bridge__item:hover::after {
  width: 100%;
}
.bridge__num {
  display: block;
  font-family: futura-pt, Futura, "Century Gothic", sans-serif;
  font-weight: 300;
  font-size: clamp(56px, 5.6vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--accent);
  opacity: 0.92;
  margin: 0 0 4px;
}
.bridge__lede {
  font-family: futura-pt, Futura, "Century Gothic", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.62);
  margin: 0;
  line-height: 1.5;
}
.bridge__pull {
  font-family: futura-pt, Futura, "Century Gothic", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 1.7vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--black);
  margin: 0;
}
.bridge__hl {
  color: var(--black);
}

@media (max-width: 900px) {
  .bridge { padding: 88px 0 76px; }
  .bridge::before { height: 36px; }
  .bridge__head { margin-bottom: 56px; }
  .bridge__list {
    grid-template-columns: 1fr;
    border-left: 0;
    border-top: 1px solid rgba(0,0,0,0.10);
  }
  .bridge__item {
    padding: 40px 28px;
    min-height: 0;
    border-right: 0;
  }
  .bridge__num { font-size: 56px; }
  .bridge__pull { font-size: 22px; }
}

/* ===== r5-about: Belief #01 highlight pill on "and" ===== */
.belief__hl {
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  border-radius: 6px;
  padding: 0 0.18em 0.04em;
  line-height: 0.95;
  vertical-align: baseline;
  font-weight: 700;
}

/* ===== r5-about: Chip variant for dark backgrounds ===== */
.chip--on-dark {
  color: var(--white);
  border-color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.04);
}

/* ===== r5-about: Video Q&A grid (replaces reel placeholder) ===== */
.reel { padding: 128px 0 112px; }
.reel .reel__head { margin-bottom: 64px; }
.reel .reel__head h2,
.reel .reel__head h2 .thin,
.reel .reel__head h2 .bold { color: var(--white); }

.vqa-grid {
  list-style: none;
  margin: 0 auto;
  padding-inline: var(--gutter);
  max-width: 1280px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.vqa-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 280ms ease, transform 280ms ease, background 280ms ease;
}
.vqa-card:hover {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.05);
  transform: translateY(-3px);
}
.vqa-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0a0a0a;
  overflow: hidden;
}
.vqa-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.vqa-card__copy {
  padding: 24px 24px 28px;
}
.vqa-card__eyebrow {
  font-family: futura-pt, Futura, "Century Gothic", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
  line-height: 1;
}
.vqa-card__title {
  font-family: futura-pt, Futura, "Century Gothic", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 1.2vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--white);
  margin: 0;
}

@media (max-width: 1024px) {
  .vqa-grid { grid-template-columns: 1fr; max-width: 720px; gap: 24px; }
}
@media (max-width: 768px) {
  .reel { padding: 88px 0 76px; }
  .reel .reel__head { margin-bottom: 48px; }
  .vqa-card__copy { padding: 20px 20px 24px; }
}

/* ===== r4-about: longer hero headline needs slightly tighter type ===== */
.hero-s__inner { max-width: 1180px; }
.hero-s__title {
  font-size: clamp(2rem, 0.9rem + 4.2vw, 4rem);
  line-height: 1.06;
}
@media (max-width: 720px) {
  .hero-s__title {
    font-size: clamp(1.75rem, 1rem + 4vw, 2.5rem);
  }
}

/* ===== r6-about: hero creds — purple, more breathing room, smaller trailing 's' ===== */
.hero-s__creds {
  margin: 44px 0 56px;
  color: var(--accent);
}
.hero-s__creds li {
  border-right-color: rgba(102, 0, 255, 0.32);
}
/* Smaller trailing modifier (e.g. the 's' in '500s' or '+' in '500+') so 500s
   doesn't read as 5005. Keeps brand feel while disambiguating glyphs. */
.creds__s {
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.06em;
  vertical-align: 0.35em;
  margin-left: 0.05em;
  display: inline-block;
}

/* ===== r6-about: 'When to Consider Us.' — keep h2 a single uniform style =====
   Bridge h2 originally mixed thin + bold. With the renamed copy living in a
   single .bold span, the existing display rules already render correctly; this
   rule just guards spacing in case any inline whitespace creates a gap. */
.bridge__head h2 .bold { letter-spacing: -0.01em; }

/* ===== r7-about: When to Consider Us — uniform tile style =====
   Original tiles mixed a small uppercase eyebrow (.bridge__lede) with a bold
   display pull (.bridge__pull). Round 3 collapses each tile into one uniform
   bold sentence. Hide the legacy eyebrow class in case any markup still
   references it, and ensure each tile's pull copy fills the available height. */
.bridge__lede { display: none; }
.bridge__item { gap: 24px; }
.bridge__pull {
  font-size: clamp(20px, 1.55vw, 26px);
  line-height: 1.28;
  letter-spacing: -0.005em;
  font-weight: 700;
  color: var(--black);
  margin: 0;
}
@media (max-width: 900px) {
  .bridge__pull { font-size: 20px; }
}

/* ===== r7-about: full-width 'Why Influence 51 Exists' pull quote =====
   Removed the old .bio__quote and the inline .bio__story aside. The new
   block sits OUTSIDE .bio__inner so it spans the full container width below
   the 2-col bio grid. Large purple opening/closing quotes flank the body. */
.about-pull {
  position: relative;
  /* Round 5: was 88px — reduced so the figure sits closer to the section's top padding */
  margin: 24px auto 0;
  max-width: 1080px;
  padding: 0 clamp(24px, 4vw, 64px);
  text-align: left;
}
.about-pull__eyebrow {
  font-family: futura-pt, Futura, "Century Gothic", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 28px;
  line-height: 1;
}
.about-pull__qmark {
  font-family: futura-pt, Futura, "Century Gothic", sans-serif;
  color: var(--accent);
  font-weight: 700;
  line-height: 0.7;
  display: inline-block;
  font-size: clamp(72px, 9vw, 132px);
  vertical-align: top;
}
.about-pull__qmark--open {
  margin-bottom: -28px;
  margin-left: -10px;
}
.about-pull__qmark--close {
  display: block;
  text-align: right;
  line-height: 0;
  margin-top: -8px;
  margin-right: -6px;
}
.about-pull__quote {
  margin: 0;
  padding: 0 clamp(8px, 2vw, 28px);
}
.about-pull__quote p {
  font-family: futura-pt, Futura, "Century Gothic", sans-serif;
  font-weight: 300;
  font-size: clamp(20px, 1.6vw, 28px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--black);
  margin: 0;
}
.about-pull__cite {
  font-family: futura-pt, Futura, "Century Gothic", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 24px;
  padding: 0 clamp(8px, 2vw, 28px);
  display: block;
}
@media (max-width: 720px) {
  .about-pull { margin-top: 16px; padding: 0 20px; }
  .about-pull__quote, .about-pull__cite { padding: 0; }
  .about-pull__qmark { font-size: 64px; }
  .about-pull__qmark--open { margin-bottom: -18px; margin-left: -4px; }
  .about-pull__qmark--close { margin-top: -4px; margin-right: 0; }
}

/* ===== r7-about: video card cover + purple play button =====
   Replaces native poster/control affordance with a neutral dark cover and a
   centered purple circular play button (matches the ICP/Topics pattern).
   When .is-playing is set on .vcard__player, cover and button hide and the
   native video controls take over. */
.vcard__player { position: relative; }
.vcard__player .vqa-card__video {
  background: #050505;
}
.vcard__cover {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(102, 0, 255, 0.32) 0%, rgba(102, 0, 255, 0.10) 38%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, #060010 0%, #050505 100%);
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 1;
}
.vcard__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 14px 40px rgba(102, 0, 255, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 220ms ease, background 220ms ease, opacity 220ms ease;
  z-index: 2;
}
.vcard__play:hover,
.vcard__play:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 18px 52px rgba(102, 0, 255, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  outline: none;
}
.vcard__play-tri {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent var(--white);
  margin-left: 5px;
}
.vcard__player.is-playing .vcard__cover,
.vcard__player.is-playing .vcard__play {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 720px) {
  .vcard__play { width: 68px; height: 68px; }
  .vcard__play-tri { border-width: 11px 0 11px 18px; margin-left: 4px; }
}

/* ===== r6-about: 'In His Own Words' chip — solid purple on dark =====
   .chip--on-dark-purple wins via cascade over .chip--on-dark. */
.chip--on-dark.chip--on-dark-purple {
  color: var(--white);
  background: var(--accent);
  border-color: var(--accent);
}

/* =========================================================
   r8-about: stylistic refinements
   1) .who__pull — dial down the size, slightly tighter line.
   2) .about-pull__quote — lighter weight, smaller, more elegant;
      center the purple attribution beneath.
   3) .bridge tiles — lighter copy weight, slim 1-row layout, and
      a more rectangular feel (shorter min-height, tighter padding).
   ========================================================= */

/* (1) Who pull — Round 4: matches body paragraph size, kept as a separate final
   paragraph with normal paragraph spacing. Purple highlight pill is preserved. */
.who__pull {
  max-width: 680px;
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink);
}
@media (min-width: 720px) {
  .who__pull {
    margin-top: 24px;
  }
}

/* (2) Why Influence 51 Exists — lighter, more elegant, centered cite */
.about-pull {
  max-width: 980px;
}
.about-pull__quote p {
  font-weight: 300;
  font-size: clamp(17px, 1.05vw, 21px);
  line-height: 1.6;
  letter-spacing: 0;
  color: rgba(0, 0, 0, 0.82);
}
/* r5-about: separate paragraphs in the multi-paragraph 'Why Influence 51 Exists' quote */
.about-pull__quote p + p { margin-top: 1.1em; }
.about-pull__qmark {
  font-size: clamp(56px, 6.5vw, 96px);
  font-weight: 400;
}
.about-pull__cite {
  text-align: center;
  margin-top: 36px;
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.22em;
}
@media (max-width: 720px) {
  .about-pull__quote p { font-size: 16px; line-height: 1.55; }
  .about-pull__qmark { font-size: 52px; }
  .about-pull__cite { margin-top: 28px; }
}

/* (3) When to Consider Us — lighter copy + 4-up rectangular row */
.bridge__list {
  grid-template-columns: repeat(4, 1fr);
  max-width: 1320px;
}
.bridge__item {
  padding: 36px 28px 36px 28px;
  min-height: 0;
  gap: 16px;
}
.bridge__num {
  font-size: clamp(40px, 3.4vw, 56px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}
.bridge__pull {
  font-weight: 400;
  font-size: clamp(15px, 0.95vw, 17px);
  line-height: 1.45;
  letter-spacing: 0;
  color: rgba(0, 0, 0, 0.82);
}
@media (max-width: 1100px) {
  .bridge__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bridge__list { grid-template-columns: 1fr; }
  .bridge__item { padding: 28px 24px; }
  .bridge__num { font-size: 40px; }
  .bridge__pull { font-size: 16px; }
}

/* =========================================================
   r5-about audit: "Move People." purple pill in the hero was
   sitting too tall and visually touching the line above it.
   Add breathing room above the pill's line and slightly relax
   the pill's vertical padding so the highlight reads as a clean
   rounded box, not a block that crowds the previous line.
   ========================================================= */
.hero-s__title .line:has(.hilite-pill) {
  margin-top: 0.18em;
}
.hero-s__title .hilite-pill {
  padding: 0.04em 0.16em 0.06em;
  line-height: 1.0;
}

/* === canonical CTA pill (round 2) === */
.cta .hilite-pill {
  display: inline-block;
  padding: 0.04em 0.16em 0.06em;
  border-radius: 0.12em;
  line-height: 0.92;
  margin: 0.06em 0.04em;
  vertical-align: baseline;
}

/* r3-fix-6: dedicated section for "Why Influence 51 Exists" pull quote, placed
   directly before the final CTA on the About page. Matches the .bio surface
   so the layout is continuous and breathes against the dark CTA below. */
.about-pull-section {
  background: #fff;
  /* Round 5: further compress the gap above 'Why Influence 51 Exists' (was 28-64px top) */
  padding: clamp(8px, 1.4vw, 24px) 0 clamp(80px, 10vw, 140px);
}
/* Round 5: when How precedes the Why-Influence-51-Exists section,
   pull How's bottom padding in so the two breathe at a measured cadence rather than a chasm. */
.how + .about-pull-section,
.custom.how + .about-pull-section {
  padding-top: clamp(4px, 1vw, 16px);
}
.custom.how:has(+ .about-pull-section) {
  padding-bottom: clamp(40px, 5vw, 72px);
}
.about-pull-section .bio__inner {
  display: block;
}
.about-pull-section .about-pull {
  margin-left: auto;
  margin-right: auto;
}

/* Handwritten signature between the quote and the attribution line. */
.about-pull__signature {
  display: block;
  margin: 28px auto 8px;
  max-height: 84px;
  max-width: 280px;
  width: auto;
  height: auto;
  opacity: 0.92;
  /* signature is already pure black on transparent — leave color untouched */
}
@media (max-width: 720px) {
  .about-pull__signature { max-height: 64px; max-width: 220px; margin-top: 22px; }
}

/* r3-fix-9: footer "Move People." purple highlight pill (dark footer) */
.footer__tag .hilite-pill {
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  border-radius: 10px;
  padding: 0.18em 0.55em 0.22em;
  line-height: 1;
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* =========================================================
   r4-fix-mobile-2 (revised): Trusted-By logos on mobile — STATIC multi-row
   grid so all 18 logos are visible in a single frame. No horizontal scroll.
   The page-level vertical scroll is the only scroll users need.
   ========================================================= */
@media (max-width: 780px) {
  .trusted__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px 12px !important;
    padding-inline: var(--gutter, 20px);
    /* clear any horizontal-scroll vestiges from the previous revision */
    overflow: visible !important;
    overflow-x: visible !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 720px;
  }
  .trusted__grid > li {
    flex: unset;
    width: auto;
    min-height: 86px;
    padding: 6px 4px;
    scroll-snap-align: unset;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .trusted__grid img {
    max-width: 100%;
    max-height: 50px;
    width: auto;
    height: auto;
    object-fit: contain;
  }
}
@media (max-width: 420px) {
  .trusted__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px 10px !important;
  }
  .trusted__grid > li { min-height: 64px; }
  .trusted__grid img { max-height: 38px; }
}


/* =========================================================
   r4-fix-mobile-3 (revised): Collapsible "Who We Help" group in the mobile menu.
   The toggle row now matches the same visual weight as Home/Topics/Services/etc:
   white, 28px Futura, 700, uppercase, 0.04em letter-spacing. ICP links inside the
   panel keep their smaller 16px treatment as before.
   ========================================================= */
.nav__mobile-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0;             /* match the line-rhythm of the sibling <a> items */
  cursor: pointer;
  color: var(--white);
  font: inherit;
  text-align: left;
}
.nav__mobile-toggle .nav__mobile-label {
  /* match the other top-level mobile menu items exactly */
  display: inline-block;
  padding: 0;
  font-family: var(--ff);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}
.nav__mobile-toggle:hover .nav__mobile-label,
.nav__mobile-toggle:focus-visible .nav__mobile-label { color: var(--accent); }

.nav__mobile-toggle-chev {
  display: inline-block;
  flex: 0 0 auto;
  width: 14px;
  height: 9px;
  transition: transform 220ms var(--ease, ease);
  color: var(--white-72, rgba(255,255,255,0.72));
}
.nav__mobile-toggle[aria-expanded="true"] .nav__mobile-toggle-chev {
  transform: rotate(180deg);
}

.nav__mobile-icps {
  display: flex;
  flex-direction: column;
  padding: 4px 0 0;
  margin-top: 4px;
}
.nav__mobile-icps[hidden] { display: none; }

/* keep the ICP child links small + indented (unchanged from prior revision) */
.nav .nav__mobile-icps a {
  padding: 8px 32px !important;
  font-size: 16px !important;
}

/* and remove the prior border-rules that styled the group like a divider block */
.nav .nav__mobile-group {
  border-top: 0;
  border-bottom: 0;
  padding: 0;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .nav__mobile-toggle-chev { transition: none; }
}


/* Disable hover-color flash on touch devices and when expanded */
@media (hover: none) {
  .nav__mobile-toggle:hover .nav__mobile-label,
  .nav__mobile-toggle:focus-visible .nav__mobile-label { color: var(--white); }
}
.nav__mobile-toggle[aria-expanded="true"] .nav__mobile-label,
.nav__mobile-toggle[aria-expanded="true"]:hover .nav__mobile-label {
  color: var(--white);
}