/* ============================================================
   Sellers Hub — site stylesheet
   Direction: "The Scoreline" (concept D, chosen 02-07-26).
   Ink black + Sellers Hub cyan. Condensed poster type.
   Khand (display) + Synonym (text). Sharp corners everywhere.

   Accent contrast rules (WCAG):
   - --acc (cyan) is a DARK-BACKGROUND accent: 9.8:1 on ink. Never
     use it as text on paper (1.8:1, fails).
   - --acc-deep is the LIGHT-BACKGROUND accent: 5.2:1 on paper as
     text, 5.6:1 with white text when used as a panel background.
   - Buttons: cyan background + ink text (9.8:1).
   ============================================================ */

@font-face { font-family: 'Khand'; src: url('/fonts/khand-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Khand'; src: url('/fonts/khand-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Khand'; src: url('/fonts/khand-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Synonym'; src: url('/fonts/synonym-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Synonym'; src: url('/fonts/synonym-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Synonym'; src: url('/fonts/synonym-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --ink: #0F1A2B;        /* deep navy, near-black (09-07 team pick) */
  --ink-2: #182740;
  --paper: #F5F6F8;
  --acc: #33CCCC;        /* SH cyan, on ink 9.8:1 */
  --acc-hot: #5DE0E0;    /* hover state */
  --acc-deep: #0F1A2B;   /* ink accent for light backgrounds; resolves to the same navy as --ink */
  --gray: #A7A9B4;       /* on ink, 8:1 */
  --gray-ink: #55565E;   /* on paper, 6.9:1 */
  --line-w: rgba(245, 246, 248, 0.16);
  --line-k: rgba(13, 13, 16, 0.16);
  --d: 'Khand', 'Arial Narrow', sans-serif;
  --t: 'Synonym', system-ui, sans-serif;
  --wrap: 1200px;
  --gut: clamp(1.25rem, 4vw, 2.5rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--t);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--paper);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
section[id] { scroll-margin-top: 5rem; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--acc); color: var(--ink); padding: 0.6rem 1rem; z-index: 100; }
.skip:focus { left: 0; }

::selection { background: var(--acc); color: var(--ink); }

/* ---------- type ---------- */
h1, h2, h3, .brand { text-wrap: balance; }

/* Sentence case: only the H1, ticker, and closing CTA shout. */
.sec-h {
  font-family: var(--d);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 0.95;
}
.sec-lede { max-width: 34rem; margin-top: 1.5rem; }
/* brand-color pass (07-07-26, final): cyan titles on dark navy; navy titles on white */
.sec-h { color: var(--acc); }
.sec-paper .sec-h, .faq .sec-h, .seller .sec-h, .markets-paper .sec-h { color: var(--ink); }

.sec-paper .sec-lede { color: var(--gray-ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  background: var(--acc);
  color: var(--ink);
  font-family: var(--t);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1;
  text-decoration: none;
  padding: 1.05rem 1.7rem;
  transition: background 0.18s ease-out, transform 0.15s ease;
}
.btn:hover { background: var(--acc-hot); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.btn-lg { padding: 1.2rem 2.1rem; }
.btn-nav {
  background: transparent;
  border: 2px solid var(--acc);
  color: var(--paper);
  font-size: 1rem;
  padding: 0.55rem 1.1rem;
}
.btn-nav:hover { background: var(--acc); color: var(--ink); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--ink);
  border-bottom: 1px solid var(--line-w);
}
.nav-row { display: flex; align-items: center; gap: 2rem; height: 4.75rem; }
.brand {
  font-family: var(--d); font-weight: 700; font-size: 2rem;
  text-transform: uppercase; letter-spacing: 0.02em;
  text-decoration: none; color: var(--paper);
}
.brand img { height: 4.2rem; width: auto; display: block; }
.foot-brand img { height: 4.2rem; width: auto; }
/* icon + wordmark lockup */
.brand { display: inline-flex; align-items: center; gap: 0.55rem; }
.brand img.brand-mark { height: 2.7rem; width: auto; }
.foot-brand img.brand-mark { height: 2.4rem; }
.nav-links { display: flex; gap: 1.75rem; margin-left: auto; }
.nav-links a { text-decoration: none; font-size: 0.95rem; color: var(--gray); transition: color 0.15s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--paper); }
.nav-burger { display: none; }
.nav-drop { position: relative; height: 100%; display: flex; align-items: center; }
.nav-drop > button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--t); font-size: 0.95rem; color: var(--gray); transition: color 0.15s;
}
.nav-drop > button::after { content: " \25BE"; font-size: 0.7em; }
.nav-drop:hover > button, .nav-drop:focus-within > button { color: var(--paper); }
.drop-panel {
  display: none; position: absolute; top: 100%; left: -1.2rem; z-index: 50;
  min-width: 16rem; background: var(--ink-2); border: 1px solid var(--line-w);
  padding: 0.5rem 0 0.8rem;
}
.nav-drop:hover .drop-panel, .nav-drop:focus-within .drop-panel, .nav-drop.open .drop-panel { display: block; }
.drop-panel a { display: block; padding: 0.4rem 1.2rem; font-size: 0.95rem; color: var(--gray); text-decoration: none; transition: color 0.15s; }
.drop-panel a:hover { color: var(--paper); }
.drop-label {
  font-family: var(--d); font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gray); opacity: 0.65; padding: 0.7rem 1.2rem 0.15rem;
}
.m-nav .m-label {
  font-family: var(--d); font-weight: 600; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gray); opacity: 0.7; margin-top: 0.6rem;
}
.m-nav { display: none; }

/* ---------- hero (home) ---------- */
.hero { position: relative; isolation: isolate; border-bottom: 1px solid var(--line-w); }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 28%;
  filter: grayscale(1) contrast(1.05) brightness(0.92);
}
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(15,26,43,0.86) 0%, rgba(15,26,43,0.7) 42%, rgba(15,26,43,0.58) 72%, rgba(15,26,43,0.82) 100%),
    linear-gradient(180deg, rgba(15,26,43,0.5) 0%, rgba(15,26,43,0.3) 38%, rgba(15,26,43,0.86) 82%, var(--ink) 100%);
}
.hero-h {
  font-family: var(--d);
  font-weight: 600;
  font-size: clamp(4rem, 10.5vw, 6rem);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.hero-h .hl { display: block; }
.hl-c { color: var(--acc); }
.hero-sub { color: var(--paper); opacity: 0.85; font-size: 1.125rem; }
.hero-cta { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; }
.hero-note { font-size: 0.9rem; color: var(--paper); opacity: 0.7; }
/* split hero (07-07): copy left, photo right */
.hero-split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.hero-copy { max-width: 44rem; padding-block: clamp(3.5rem, 9vh, 6.5rem); }
.hero-h-sm { font-size: clamp(2.6rem, 5.5vw, 4.2rem); line-height: 0.95; }
.hero-copy .hero-sub { margin-top: 1.2rem; max-width: 34rem; }
.hero-cta-row { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 1rem; }
.hero-kick {
  font-family: var(--d); font-weight: 600; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--acc); margin-bottom: 0.9rem;
}
.hero-form { max-width: 26rem; justify-self: end; width: 100%; }
.hero-form-alt { margin-top: 1rem; font-size: 0.85rem; opacity: 0.85; }
.hero-form-alt a { color: #fff; }
.assess select {
  width: 100%; margin-top: 0.35rem;
  background: #fff; color: var(--ink);
  border: 0; padding: 0.7rem 0.8rem;
  font-family: var(--t); font-size: 1rem;
  appearance: auto;
}
.assess select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.price-note { margin-top: 0.8rem; color: var(--gray-ink); }
/* taste pass 07-07: inline stat (GTS teaser), filled model card, static roles line */
.stat-inline { border-left: 3px solid var(--acc-deep); padding-left: 1.6rem; align-self: center; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--ink-2); }
.model-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 2.5rem; border: 1px solid var(--line-k); }
.model-card { padding: clamp(2rem, 4vw, 3.4rem); background: #fff; }
.model-card h3 { font-family: var(--d); font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.05; margin-top: 0.9rem; }
.model-card > p { margin-top: 1rem; color: var(--gray-ink); max-width: 46ch; }
.model-card .model-kick {
  font-family: var(--d); font-weight: 600; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--acc);
}
.checks { list-style: none; margin-top: 1.6rem; }
.checks li { padding-block: 0.45rem; padding-left: 1.8rem; position: relative; color: var(--gray-ink); }
.checks li::before { content: "\2713"; position: absolute; left: 0; font-weight: 700; color: var(--ink); }
.model-card .btn, .model-card .btn-ink { margin-top: 1.8rem; }
.model-dark { background: var(--ink); color: var(--paper); }
.model-dark .model-kick { color: var(--acc); }
.model-dark > p, .model-dark .checks li { color: var(--gray); }
.model-dark .checks li::before { color: var(--acc); }
@media (max-width: 860px) { .model-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .hero-form { justify-self: stretch; max-width: none; } }
.hero-note a { color: var(--paper); }
.mini-score {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem 2rem;
  border-top: 1px solid var(--line-w);
  padding-block: 1.7rem 2.6rem;
}
.mini-score div { display: flex; flex-direction: column-reverse; }
.mini-score dd {
  font-family: var(--d); font-weight: 700;
  font-size: clamp(2.1rem, 3vw, 2.6rem); line-height: 1;
  color: var(--acc);
}
.mini-score dt { font-size: 0.9rem; color: var(--gray); margin-top: 0.3rem; }
.hero .mini-score dt { color: var(--paper); opacity: 0.75; }

/* ---------- ticker ---------- */
.ticker {
  overflow: hidden;
  border-bottom: 1px solid var(--line-w);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker-track { display: flex; width: max-content; }
.ticker p {
  font-family: var(--d); font-weight: 500; font-size: 1.5rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap; padding-block: 0.7rem;
  color: var(--paper);
}
.js .ticker-track { animation: tick 36s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.logo-ticker p { display: flex; align-items: center; gap: 3rem; padding-inline: 1.5rem; text-transform: none; letter-spacing: 0; }
.logo-ticker .lg { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--t); font-weight: 600; font-size: 1rem; color: var(--gray); white-space: nowrap; }
.logo-ticker .lg img { opacity: 0.9; }
.js .logo-ticker .ticker-track { animation-duration: 44s; }

@media (prefers-reduced-motion: reduce) { .js .ticker-track { animation: none; } }

/* ---------- interior page head ---------- */
.page-head { border-bottom: 1px solid var(--line-w); padding-block: clamp(2.8rem, 7vh, 5rem) 0; }
.page-head.has-photo { position: relative; isolation: isolate; padding-block: clamp(3.5rem, 9vh, 6.5rem) 0; }
.page-head.has-photo .page-lede { color: var(--paper); opacity: 0.88; }
.crumb {
  font-family: var(--d); font-weight: 500; font-size: 1rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gray); margin-bottom: 1.4rem;
}
.crumb a { color: var(--gray); text-decoration: none; }
.crumb a:hover { color: var(--paper); }
.page-h {
  font-family: var(--d); font-weight: 600;
  font-size: clamp(2.9rem, 6.5vw, 4.6rem);
  line-height: 0.92; text-transform: uppercase; letter-spacing: 0.01em;
  max-width: 20ch;
}
.page-lede { margin-top: 1.4rem; max-width: 40rem; color: var(--gray); font-size: 1.125rem; }
.page-act { margin-block: 2.2rem 0; padding-bottom: clamp(2.4rem, 5vh, 3.6rem); display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.page-act p { color: var(--gray); font-size: 0.95rem; }
.page-act p a { color: var(--paper); }
.page-head .mini-score { margin-top: 0; }

/* ---------- generic sections ---------- */
.sec { padding-block: clamp(4rem, 9vh, 7rem); }
.sec-paper { background: var(--paper); color: var(--ink); }
.sec-tight { padding-block: clamp(3rem, 7vh, 5rem); }

/* two-column rule list (roles, sectors) */
.cols { list-style: none; margin-top: 3rem; columns: 2; column-gap: clamp(2rem, 5vw, 4rem); }
.cols li { break-inside: avoid; padding-block: 0.5rem; padding-left: 1.4rem; position: relative; font-weight: 500; }
.cols li::before { content: "\2192"; position: absolute; left: 0; color: var(--acc-deep); font-weight: 700; }
.sec:not(.sec-paper) .cols li::before { color: var(--acc); }
.cols-note { margin-top: 1.6rem; color: var(--gray-ink); }
.on-ink .cols li { border-color: var(--line-w); }
.on-ink .cols-note { color: var(--gray); }

/* ledger rows: heading + explanation, no cards */
.ledger { margin-top: 3.2rem; display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ledger > div {
  border-left: 3px solid var(--acc-deep);
  padding: 0.35rem 0 0.45rem 1.4rem;
}
.ledger h3 { margin-bottom: 0.35rem; }
@media (max-width: 780px) { .ledger { grid-template-columns: 1fr; } }
.ledger h3 { font-family: var(--d); font-weight: 600; font-size: 1.5rem; line-height: 1.05; }
.ledger p { color: var(--gray-ink); max-width: 58ch; }
/* ledgers and lists sitting on ink sections pick up the dark-bg grays */
.sec:not(.sec-paper) .ledger > div, .on-ink .ledger > div { border-left-color: var(--acc); }

.sec:not(.sec-paper) .ledger p, .sec:not(.sec-paper) .ledger ul li, .on-ink .ledger p { color: var(--gray); }

.sec:not(.sec-paper) .cols-note { color: var(--gray); }

.ledger ul { list-style: none; margin-top: 0.6rem; grid-column: 2; }
.ledger ul li { color: var(--gray-ink); padding-block: 0.15rem; }
.ledger p a, .cols-note a { color: inherit; }

/* pricing rows (find-talent, verticals) */
.price-rows { margin-top: 2.5rem; border-bottom: 1px solid var(--line-w); }
.price {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  padding-block: 2.2rem;
  border-top: 1px solid var(--line-w);
}
.price h3 { font-family: var(--d); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 0.98; }
.price ul { list-style: none; }
.price li { color: var(--gray); padding-block: 0.2rem; }
.price-fee { font-family: var(--d); font-weight: 500; font-size: 1.4rem; text-transform: uppercase; line-height: 1.15; justify-self: end; text-align: right; }
.price-fee span { font-family: var(--t); font-weight: 400; font-size: 0.9rem; text-transform: none; color: var(--gray); display: block; margin-top: 0.35rem; }

/* photo + text split */
.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; margin-top: 3rem; }
.split figure img { width: 100%; height: auto; filter: grayscale(1) contrast(1.05); }
.split figcaption { margin-top: 0.6rem; font-family: var(--d); font-weight: 500; font-size: 0.98rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-ink); }
.on-ink .split figcaption { color: var(--gray); }

/* ---------- record ---------- */
.record { background: var(--paper); color: var(--ink); padding-block: clamp(4rem, 9vh, 7rem); }
.score-rows { margin-top: 2.5rem; border-bottom: 1px solid var(--line-k); }
.score {
  display: grid;
  grid-template-columns: minmax(210px, 380px) 1fr;
  gap: 1.5rem;
  align-items: baseline;
  border-top: 1px solid var(--line-k);
  padding-block: 1.1rem;
}
.score em {
  font-style: normal;
  font-family: var(--d);
  font-weight: 700;
  font-size: clamp(2.8rem, 5.6vw, 4.2rem);
  line-height: 0.95;
}
.score span { color: var(--gray-ink); font-size: 1.0625rem; }

/* ---------- band ---------- */
.band { position: relative; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.band img { width: 100%; height: clamp(380px, 60vh, 620px); object-fit: cover; object-position: 50% 32%; filter: grayscale(1) contrast(1.05); }
.band figcaption {
  padding: 0.8rem var(--gut);
  font-family: var(--d); font-weight: 500; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gray);
  border-bottom: 1px solid var(--line-w);
}

/* ---------- markets ---------- */
.markets { padding-top: clamp(4rem, 9vh, 7rem); }
.mkt-list { margin-top: 3rem; border-bottom: 1px solid var(--line-w); }
.mkt {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr) minmax(0, 0.8fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 2.4rem var(--gut);
  border-top: 1px solid var(--line-w);
  text-decoration: none;
  transition: background 0.18s ease-out;
}
.mkt:hover { background: var(--ink-2); }
.mkt h3 {
  font-family: var(--d); font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 0.95;
  transition: color 0.18s ease-out;
}
.mkt:hover h3 { color: var(--acc); }
.mkt-body p { color: var(--gray); }
.mkt-roles { margin-top: 0.9rem; font-size: 0.92rem; color: var(--gray); }
.mkt-fee {
  font-family: var(--d); font-weight: 500; font-size: 1.4rem;
  text-transform: uppercase; line-height: 1.15;
  justify-self: end; text-align: right;
}
.mkt-fee span { font-family: var(--t); font-weight: 400; font-size: 0.9rem; text-transform: none; color: var(--gray); display: block; margin-top: 0.35rem; }

/* ---------- method ---------- */
.method { background: var(--ink); color: var(--paper); padding-block: clamp(4rem, 9vh, 7rem); }
.method .sec-h { color: var(--acc); }
.method .sec-lede, .method .steps p, .method .fstep span, .method .funnel-note { color: var(--gray); }
.method .method-proof { color: var(--paper); }
.method .steps li { border-top-color: var(--acc); }
.method .steps li::before { color: var(--acc); }
.method .steps h3 { color: var(--paper); }
.method .funnel { border-top: 1px solid var(--line-w); }
.method .fstep b { color: var(--paper); }
.method .farrow { color: var(--acc); }
.method-grid { display: block; }
.method-head { max-width: 46rem; }
.method-head .sec-lede { color: var(--gray); }
.method-proof { margin-top: 1.5rem; font-family: var(--d); font-weight: 600; font-size: 1.3rem; }
.steps {
  list-style: none; counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: 1.6rem;
  margin-top: 2.8rem;
}
.steps li {
  counter-increment: step;
  border-top: 3px solid var(--ink);
  padding-top: 1rem;
}
.steps li::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--d); font-weight: 700; font-size: 1.5rem; line-height: 1;
  color: var(--acc-deep);
  margin-bottom: 0.55rem;
}
.steps h3 { font-family: var(--d); font-weight: 600; font-size: 1.45rem; line-height: 1.1; }
.steps p { color: var(--gray-ink); margin-top: 0.4rem; font-size: 0.98rem; }

/* ---------- SELLER ---------- */
.seller { background: var(--paper); color: var(--ink); padding-block: clamp(4rem, 9vh, 7rem); }
.seller .sec-lede, .seller-row span, .seller .seller-note { color: var(--gray-ink); }
.seller-row li { background: #fff; border: 1px solid var(--line-k); }
.seller-row b { background: var(--ink); border: none; }
.seller-row strong { color: var(--ink); }
.seller-row {
  list-style: none;
  margin-top: 3.4rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1rem;
}
.seller-row li { padding: 1.5rem 1.2rem 1.7rem; background: rgba(255,255,255,0.045); border: 1px solid var(--line-w); }
.seller-row b {
  display: grid; place-items: center;
  width: 4.6rem; height: 4.6rem;
  border: 2px solid var(--acc);
  font-family: var(--d); font-weight: 700;
  font-size: 2.9rem;
  line-height: 0.9;
  color: var(--acc);
}
.seller-row .meter { display: flex; gap: 5px; margin-top: 0.9rem; }
.seller-row .meter u { width: 12px; height: 12px; border: 1px solid var(--line-w); }
.seller-row .meter u.on { background: var(--acc); border-color: var(--acc); }
.seller-row strong { display: block; margin-top: 0.8rem; font-weight: 600; font-size: 1.02rem; }
.seller-row span { display: block; margin-top: 0.3rem; font-size: 0.9rem; color: var(--gray); }
.seller-note { margin-top: 1.6rem; color: var(--gray); max-width: 40rem; }

/* ---------- quote + guarantee ---------- */
.quote-sec { background: var(--paper); color: var(--ink); padding-block: clamp(4rem, 9vh, 7rem); }
.quote-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.quote p {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.45;
  font-weight: 500;
  text-wrap: pretty;
}
.quote::before {
  content: "\201C";
  display: block;
  font-family: var(--d); font-weight: 700;
  font-size: 5rem; line-height: 0.5;
  color: var(--acc-deep);
  margin-bottom: 1.4rem;
}
.on-ink .quote::before { color: var(--acc); }
.quote footer { margin-top: 1.6rem; }
.quote strong { display: block; font-weight: 600; }
.quote footer span { color: var(--gray-ink); font-size: 0.95rem; }
.on-ink .quote footer span { color: var(--gray); }
.bet { background: #0E6B6B; color: #fff; padding: 2.4rem 2.2rem 2.6rem; }
.bet h3 { font-family: var(--d); font-weight: 600; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.02em; }
.bet-fig { font-family: var(--d); font-weight: 700; font-size: clamp(4rem, 7vw, 5.5rem); line-height: 1; margin-block: 0.6rem 0.8rem; }
.bet p:last-child { font-size: 1rem; }

/* ---------- bench / team ---------- */
.bench { padding-block: clamp(4rem, 9vh, 7rem) 0; }
.bench-head { margin-bottom: 2.5rem; }
.bench-head .sec-lede { color: var(--gray); }
.bench-strip {
  display: flex;
  gap: 1px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gut);
  padding-inline: var(--gut);
  padding-bottom: 3rem;
}
.bench-strip figure { flex: 0 0 200px; scroll-snap-align: start; }
.bench-strip img { width: 200px; height: 200px; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.35s ease; }
.bench-strip figure:hover img { filter: none; }
.bench-strip figcaption { padding-top: 0.7rem; font-weight: 600; font-size: 0.98rem; line-height: 1.3; }
.bench-strip figcaption span { display: block; font-weight: 400; font-size: 0.85rem; color: var(--gray); }
.bench-strip:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
/* right-edge fade: cues that the strip scrolls */
.bench-strip {
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent);
}

/* compact SELLER reference (onshore verticals; full block lives on home + GTS) */
.seller-line { border-block: 1px solid var(--line-w); padding-block: 2.2rem; }
.seller-line p { color: var(--gray); max-width: 62rem; }
.seller-line strong { color: var(--paper); font-weight: 600; }
.seller-line a { color: var(--paper); }

/* wrapped grid variant for the about page */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2rem 1.5rem;
  margin-top: 2.5rem;
}
.team-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.35s ease; }
.team-grid figure:hover img { filter: none; }
.team-grid figcaption { padding-top: 0.7rem; font-weight: 600; font-size: 0.98rem; line-height: 1.3; }
.team-grid figcaption span { display: block; font-weight: 400; font-size: 0.85rem; color: var(--gray-ink); }

/* founder story */
.founder-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; margin-top: 3rem; }
.founder-fig img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.35s ease; }
.founder-fig:hover img { filter: none; }
.founder-fig figcaption { padding-top: 0.7rem; font-weight: 600; }
.founder-fig figcaption span { display: block; font-weight: 400; font-size: 0.9rem; color: var(--gray-ink); }
.story p { margin-top: 1.1rem; max-width: 65ch; }
.story p:first-child { margin-top: 0; }
.story .story-close { font-family: var(--d); font-weight: 600; font-size: 1.3rem; }

/* case study */
.case-block { max-width: 62rem; margin-top: 3rem; }
.case-block + .case-block { margin-top: 4rem; border-top: 1px solid var(--line-k); padding-top: 3.5rem; }
.case-kick { font-family: var(--d); font-weight: 500; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--acc-deep); }
.case-block h2 { font-family: var(--d); font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 0.98; margin-top: 0.5rem; color: var(--ink); }
.case-block p { margin-top: 1.1rem; max-width: 65ch; color: var(--ink); }
.case-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem 2rem; margin-top: 2rem; border-top: 1px solid var(--line-k); padding-top: 1.5rem; }
.case-facts div { display: flex; flex-direction: column-reverse; }
.case-facts dd { font-family: var(--d); font-weight: 700; font-size: clamp(1.9rem, 2.6vw, 2.4rem); line-height: 1; }
.case-facts dt { font-size: 0.9rem; color: var(--gray-ink); margin-top: 0.3rem; }

/* ---------- clients ---------- */
.clients { background: var(--paper); color: var(--ink); padding-block: 3.5rem; }
.clients-lede { font-family: var(--d); font-weight: 500; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-ink); }
.logos { display: flex; flex-wrap: wrap; gap: 1.2rem 2.8rem; margin-top: 1.6rem; }
.client { display: inline-flex; align-items: center; gap: 0.75rem; font-weight: 600; font-size: 1.1rem; }
.client img { width: 48px; height: 48px; object-fit: contain; filter: grayscale(1) contrast(1.05); }

/* ---------- FAQ ---------- */
.faq { background: var(--paper); color: var(--ink); padding-block: clamp(4rem, 9vh, 7rem); border-top: 1px solid var(--line-k); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.faq-head .sec-lede { color: var(--gray-ink); }
.faq-list { border-bottom: 1px solid var(--line-k); }
.faq-list details { border-top: 1px solid var(--line-k); }
.faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.15rem;
  font-weight: 600; font-size: 1.1rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  font-family: var(--d); font-weight: 600; font-size: 1.6rem; line-height: 0.8;
  color: var(--acc-deep);
  transition: transform 0.18s ease-out;
  flex-shrink: 0;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding-bottom: 1.3rem; color: var(--gray-ink); max-width: 60ch; }

/* ---------- CTA ---------- */
.cta { padding-block: clamp(5rem, 13vh, 9rem); }
.cta-h {
  font-family: var(--d); font-weight: 600;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 0.92; text-transform: uppercase;
}
.cta-h span { display: block; }
.cta-act { margin-top: 2.5rem; display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.cta-act p { color: var(--gray); font-size: 0.98rem; }
.cta-act p a { color: var(--paper); }
.cta-alt { margin-top: 1.4rem; color: var(--gray); font-size: 0.98rem; max-width: 44rem; }
.cta-alt a { color: var(--paper); }

/* ---------- transcript page (/how-a-call-works/) ---------- */
.tmeta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem 2rem; border-top: 1px solid var(--line-w); padding-block: 1.5rem 2.4rem; }
.tmeta dt { font-size: 0.9rem; color: var(--gray); }
.tmeta dd { font-family: var(--d); font-weight: 500; font-size: 1.15rem; margin-top: 0.2rem; }
.call { padding-block: clamp(3rem, 7vh, 5rem); }
.turn {
  display: grid;
  grid-template-columns: 4.5rem 8.5rem minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 1.1rem;
  max-width: 58rem;
}
.turn .ts { font-family: var(--d); font-weight: 500; color: var(--gray); font-size: 1rem; }
.turn .who { font-family: var(--d); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.03em; }
.turn.you .who { color: var(--acc); }
.turn.sh .who { color: var(--paper); }
.turn .say { color: var(--gray); }
.turn.sh .say { color: var(--paper); font-weight: 500; font-size: 1.15rem; }
.exhibit {
  background: var(--ink-2);
  color: var(--paper);
  border: 1px solid var(--line-w);
  max-width: 46rem;
  margin: 1.6rem 0 2rem clamp(0rem, 12vw, 13rem);
  padding: 1.8rem 2rem 2rem;
}
.ex-tag { font-family: var(--d); font-weight: 500; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--acc); margin-bottom: 1.1rem; }
.ex-steps { list-style: none; counter-reset: exstep; }
.ex-steps li { counter-increment: exstep; display: grid; grid-template-columns: 2rem 1fr; gap: 0.8rem; padding-block: 0.55rem; border-top: 1px solid var(--line-w); }
.ex-steps li::before { content: counter(exstep); font-family: var(--d); font-weight: 700; font-size: 1.25rem; line-height: 1.2; color: var(--acc); }
.ex-steps strong { font-weight: 600; grid-column: 2; }
.ex-steps span { display: block; color: var(--paper); font-size: 0.95rem; grid-column: 2; }
.ex-score { list-style: none; }
.ex-score li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding-block: 0.5rem; border-top: 1px solid var(--line-w); }
.ex-score b { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 2px solid var(--acc); color: var(--acc); font-family: var(--d); font-weight: 700; font-size: 1.35rem; }
.ex-score i { display: flex; gap: 4px; }
.ex-score u { width: 10px; height: 10px; border: 1px solid var(--line-k); }
.ex-score u.on { background: var(--acc-deep); border-color: var(--acc-deep); }
.ex-note { margin-top: 1rem; color: var(--paper); font-size: 0.92rem; }
.ex-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 2rem; }
.ex-stats em { font-style: normal; font-family: var(--d); font-weight: 700; font-size: 2.1rem; line-height: 1; display: block; }
.ex-stats span { color: var(--paper); font-size: 0.92rem; }
.ex-bench { display: flex; gap: 1px; overflow-x: auto; padding-bottom: 0.6rem; }
.ex-bench figure { flex: 0 0 96px; }
.ex-bench img { width: 96px; height: 96px; object-fit: cover; }
.ex-bench figcaption { padding-top: 0.4rem; font-weight: 600; font-size: 0.72rem; line-height: 1.25; }
.ex-bench figcaption span { display: block; font-weight: 400; color: var(--paper); font-size: 0.68rem; }
.ex-quote p { font-size: 1.15rem; line-height: 1.5; font-weight: 500; text-wrap: pretty; }
.ex-quote footer { margin-top: 1rem; }
.ex-quote strong { display: block; font-weight: 600; }
.ex-quote footer span { color: var(--gray-ink); font-size: 0.9rem; }
.endline { display: flex; align-items: center; gap: 1.2rem; margin-top: 2.5rem; color: var(--gray); font-family: var(--d); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.95rem; }
.endline::before, .endline::after { content: ""; flex: 1; border-top: 1px solid var(--line-w); }

/* related-reading line on articles */
.article-related { margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line-k); color: var(--gray-ink); }
.article-related a { color: var(--acc-deep); }

/* 404 */
.nf { padding-block: clamp(5rem, 16vh, 10rem); }
.nf-code { font-family: var(--d); font-weight: 700; font-size: clamp(6rem, 18vw, 11rem); line-height: 0.85; color: var(--acc); }
.nf h1 { font-family: var(--d); font-weight: 600; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 0.95; text-transform: uppercase; margin-top: 1rem; }
.nf p { color: var(--gray); margin-top: 1.2rem; max-width: 40rem; }
.nf .cta-act { margin-top: 2rem; }

/* ---------- savings calculator (global talent solutions) ---------- */
.calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.calc { border: 1.5px solid var(--ink); padding: 2rem 2.2rem 2.2rem; }
.calc label { display: block; font-family: var(--d); font-weight: 600; font-size: 1.15rem; }
.calc-in { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 0.7rem; border-bottom: 2px solid var(--ink); padding-bottom: 0.4rem; }
.calc-in span { font-family: var(--d); font-weight: 700; font-size: 2rem; }
.calc-in input {
  border: 0; outline: 0; width: 100%;
  font-family: var(--d); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--ink); background: transparent;
  -moz-appearance: textfield; appearance: textfield;
}
.calc-in input::-webkit-outer-spin-button, .calc-in input::-webkit-inner-spin-button { -webkit-appearance: none; }
.calc input[type="range"] { width: 100%; margin-top: 1.2rem; accent-color: var(--acc-deep); }
.calc-out { margin-top: 1.8rem; border-top: 1px solid var(--line-k); }
.calc-out > div { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 1rem; align-items: baseline; border-bottom: 1px solid var(--line-k); padding-block: 0.85rem; }
.calc-out dt { font-size: 0.95rem; color: var(--gray-ink); }
.calc-out dd { font-family: var(--d); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1; }
.calc-out .calc-big { font-size: clamp(2rem, 3.6vw, 2.8rem); color: var(--acc-deep); }
.calc-note { margin-top: 1.4rem; color: var(--gray-ink); font-size: 0.95rem; }

/* ---------- team bios (about) ---------- */
.team-grid .bio { display: block; margin-top: 0.35rem; font-weight: 400; font-size: 0.9rem; line-height: 1.45; color: var(--gray-ink); }

/* ---------- market-assessment form (contact) ---------- */
.assess { background: var(--acc-deep); color: #fff; padding: 2.4rem 2.2rem 2.6rem; }
.assess h3 { font-family: var(--d); font-weight: 600; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.02em; }
.assess > p { margin-top: 0.8rem; }
.assess form { margin-top: 1.4rem; }
.assess label { display: block; font-weight: 600; font-size: 0.95rem; margin-top: 1rem; }
.assess input {
  width: 100%; margin-top: 0.35rem;
  background: #fff; color: var(--ink);
  border: 0; padding: 0.7rem 0.8rem;
  font-family: var(--t); font-size: 1rem;
}
.assess input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.assess .btn { margin-top: 1.4rem; width: 100%; text-align: center; }
.assess-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.assess-msg { margin-top: 1rem; font-weight: 600; display: none; }
.assess-msg.show { display: block; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; margin-top: 3rem; }
.contact-main h2 { font-family: var(--d); font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 0.98; }
.contact-main p { margin-top: 1rem; color: var(--gray); max-width: 55ch; }
.contact-main .btn { margin-top: 1.8rem; }
.contact-ways { border-top: 1px solid var(--line-w); margin-top: 2.6rem; }
.contact-ways div { border-bottom: 1px solid var(--line-w); padding-block: 1.2rem; display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 1.5rem; }
.contact-ways h3 { font-family: var(--d); font-weight: 600; font-size: 1.3rem; text-transform: uppercase; }
.contact-ways p { color: var(--gray); margin: 0; }
.contact-ways a { color: var(--paper); }

/* ---------- article prose (blog + case study) ---------- */
.article { max-width: 68ch; }
.article > p:first-of-type { font-size: 1.1875rem; }
.article p { margin-top: 1.1rem; }
.article h2 { font-family: var(--d); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.02; margin-top: 2.8rem; }
.article h3 { font-family: var(--d); font-weight: 600; font-size: 1.35rem; line-height: 1.1; margin-top: 2rem; }
.article ul, .article ol { margin-top: 1rem; padding-left: 1.25rem; }
.article li { margin-top: 0.45rem; }
.article blockquote { margin-top: 1.4rem; padding-left: 1.2rem; border-left: 1px solid var(--line-k); color: var(--gray-ink); }
.article a { color: var(--acc-deep); }
.article strong { font-weight: 600; }
.article .tbl-scroll { overflow-x: auto; margin-top: 1.4rem; }
.article table { border-collapse: collapse; min-width: 480px; width: 100%; }
.article th, .article td { text-align: left; padding: 0.65rem 1rem 0.65rem 0; border-top: 1px solid var(--line-k); vertical-align: top; }
.article th { font-weight: 600; }
.article tbody tr:last-child td { border-bottom: 1px solid var(--line-k); }
/* no uppercase here: Khand's wide tracking splits month names ("SEPT EMBER") */
.article-meta { font-family: var(--d); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.03em; color: var(--gray-ink); margin-bottom: 2rem; }

/* blog index */
.post-list { margin-top: 2.5rem; border-bottom: 1px solid var(--line-k); max-width: 60rem; }
.post-list a {
  display: grid;
  grid-template-columns: minmax(96px, 130px) 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding-block: 1.25rem;
  border-top: 1px solid var(--line-k);
  text-decoration: none;
  transition: background 0.15s ease-out;
}
.post-list a:hover { background: rgba(13, 13, 16, 0.04); }
.post-list time { font-family: var(--d); font-weight: 500; font-size: 0.98rem; text-transform: uppercase; color: var(--gray-ink); }
.post-list strong { font-weight: 600; font-size: 1.1rem; display: block; }
.post-list strong + span { display: block; margin-top: 0.25rem; color: var(--gray-ink); font-size: 0.98rem; }
@media (max-width: 560px) { .post-list a { grid-template-columns: 1fr; gap: 0.2rem; } }

/* ---------- legal prose ---------- */
.legal { max-width: 72ch; }
.legal h2 { font-family: var(--d); font-weight: 600; font-size: 1.7rem; line-height: 1; margin-top: 2.6rem; }
.legal h2:first-child { margin-top: 0; }
.legal p { margin-top: 1rem; color: var(--ink); }
.legal ul { margin-top: 0.8rem; padding-left: 1.2rem; }
.legal li { margin-top: 0.4rem; color: var(--gray-ink); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line-w); padding-block: 2.5rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 2rem; align-items: start; }
.foot-brand { font-size: 1.4rem; }
.foot-line { color: var(--gray); font-size: 0.95rem; margin-top: 0.3rem; }
.foot-nav { display: flex; flex-direction: column; gap: 0.45rem; }
.foot-nav a { text-decoration: none; color: var(--gray); font-size: 0.95rem; }
.foot-nav a:hover { color: var(--paper); }
.foot-meta { color: var(--gray); font-size: 0.9rem; text-align: right; }
.foot-meta a { color: var(--paper); text-decoration: none; }

/* ---------- reveal (enhancement only) ---------- */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-row .btn-nav { padding: 0.5rem 0.8rem; font-size: 0.85rem; }
  .nav-burger {
    display: flex; flex-direction: column; gap: 6px; justify-content: center;
    margin-left: auto; background: none; border: 0; padding: 0.5rem; cursor: pointer;
  }
  .nav-burger span { width: 26px; height: 2px; background: var(--paper); transition: transform 0.2s; }
  .nav-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .m-nav { border-top: 1px solid var(--line-w); }
  .m-nav.open { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.5rem var(--gut) 2rem; background: var(--ink); }
  .m-nav a { text-decoration: none; font-size: 1.1rem; color: var(--paper); }
  .m-nav .btn { align-self: flex-start; margin-top: 0.5rem; }

  .hero-grid { grid-template-columns: 1fr; align-items: start; min-height: 0; padding-block: 3.5rem 3rem; }
  .hero-h { font-size: clamp(3.4rem, 13.5vw, 5.2rem); }
  .mini-score { grid-template-columns: 1fr 1fr; }
  .method-grid, .quote-grid, .faq-grid, .founder-grid, .contact-grid, .calc-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .seller-row { grid-template-columns: repeat(3, 1fr); }
  .mkt, .price { grid-template-columns: 1fr; gap: 0.9rem; }
  .mkt-fee, .price-fee { justify-self: start; text-align: left; }
  .ledger > div { grid-template-columns: 1fr; gap: 0.4rem; }
  .ledger ul { grid-column: auto; }
  .case-facts { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-meta { text-align: left; }
}

@media (max-width: 640px) {
  .cols { columns: 1; }
}

@media (max-width: 560px) {
  .score { grid-template-columns: 1fr; gap: 0.15rem; }
  .cta-act { align-items: flex-start; flex-direction: column; }
  .contact-ways div { grid-template-columns: 1fr; gap: 0.3rem; }
  .brand { font-size: 1.7rem; }
}

@media (max-width: 700px) {
  .tmeta { grid-template-columns: 1fr; gap: 0.9rem; }
  .turn { grid-template-columns: 3.5rem 1fr; gap: 0.4rem 1rem; }
  .turn .say { grid-column: 1 / -1; }
  .exhibit { margin-left: 0; padding: 1.4rem 1.3rem 1.6rem; }
}

/* SELLER on small screens: a stacked list, not a cramped grid
   (Virginia, 02-07: the 2/3-column version read "smushed"). */
@media (max-width: 700px) {
  .seller-row { grid-template-columns: 1fr; }
  .seller-row li,
  .seller-row li:nth-child(n) {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    column-gap: 1.1rem;
    align-items: start;
    padding: 1.1rem 1.2rem 1.2rem;
  }
  .seller-row b { width: 3.4rem; height: 3.4rem; font-size: 2.1rem; grid-row: 1 / span 3; }
  .seller-row strong { grid-column: 2; margin-top: 0.1rem; }
  .seller-row span { grid-column: 2; margin-top: 0.2rem; }
  .seller-row .meter { grid-column: 2; grid-row: 3; margin-top: 0.65rem; }
}

/* footer columns (07-07 redesign) */
.foot-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); padding-block: 3.5rem 3rem; }
.foot-about .foot-line { margin-top: 1.2rem; max-width: 30rem; }
.foot-about .foot-meta { margin-top: 1.4rem; }
.foot-h {
  font-family: var(--d); font-weight: 600; font-size: 1rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--paper);
  margin-bottom: 0.9rem;
}
.foot-col a { display: block; padding-block: 0.3rem; font-size: 0.95rem; color: var(--gray); text-decoration: none; transition: color 0.15s; }
.foot-col a:hover { color: var(--paper); }
@media (max-width: 860px) { .foot-cols { grid-template-columns: 1fr 1fr; } .foot-about { grid-column: 1 / -1; } }

/* ============ dynamism pass (07-07): all GPU-only, reduced-motion safe ============ */
/* 3. tactile buttons */
.btn { transition: background 0.18s ease-out, transform 0.15s ease-out; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }

/* 5. market rows: title nudges on hover */
.mkt h3 { transition: color 0.15s, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.mkt:hover h3 { transform: translateX(6px); }

/* 6. nav dropdowns: fade + drop in */
.drop-panel {
  display: block; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.16s ease-out, transform 0.16s ease-out, visibility 0.16s;
}
.nav-drop:hover .drop-panel, .nav-drop:focus-within .drop-panel, .nav-drop.open .drop-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
  /* 1. hero photo slow zoom */
  .hero-bg img { animation: kenburns 22s ease-out forwards; }
  @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }

  /* 4. FAQ accordions ease open (progressive: Chrome 129+, harmless elsewhere) */
  :root { interpolate-size: allow-keywords; }
  .faq-list details::details-content {
    height: 0; overflow: clip;
    transition: height 0.3s ease, content-visibility 0.3s allow-discrete;
  }
  .faq-list details[open]::details-content { height: auto; }

}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active, .mkt:hover h3 { transform: none; }
  .drop-panel { transition: none; }
}

/* bench as auto-scrolling carousel (07-07), same rhythm as the logo ticker */
.bench-marquee { overflow: hidden; scroll-snap-type: none; padding-inline: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.bench-track { display: flex; gap: 1px; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .js .bench-track { animation: tick 60s linear infinite; }
  .bench-marquee:hover .bench-track { animation-play-state: paused; }
}

/* blog card grid (07-07 redesign) */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.post-card { display: block; background: #fff; border: 1px solid var(--line-k); text-decoration: none; color: var(--ink); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s; }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(15, 26, 43, 0.12); }
.post-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.35s ease; }
.post-card:hover img { filter: none; }
.post-card-body { padding: 1.2rem 1.3rem 1.5rem; }
.post-card time { font-size: 0.85rem; color: var(--gray-ink); }
.post-card strong { display: block; font-family: var(--d); font-weight: 600; font-size: 1.35rem; line-height: 1.1; margin-top: 0.5rem; }
.post-card span { display: block; margin-top: 0.5rem; color: var(--gray-ink); font-size: 0.95rem; }
@media (max-width: 1000px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }

/* vetting-guide question cards (07-07, from the mockup design) */
.qcard { background: #fff; border: 1px solid var(--line-k); padding: 1.8rem 2rem 2rem; margin-top: 1.6rem; max-width: none; }
.qcard .qnum { font-family: var(--d); font-weight: 700; font-size: 1.1rem; color: var(--acc); background: var(--ink); display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; }
.qcard h2 { margin-top: 0.9rem !important; }
.qcard .qwhy { color: var(--gray-ink); margin-top: 0.8rem; }
.qflags { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.3rem; }
.qflag { padding: 1rem 1.2rem; font-size: 0.95rem; }
.qflag strong { display: block; font-family: var(--d); font-weight: 600; font-size: 1.05rem; margin-bottom: 0.4rem; }
.qflag p { margin: 0 !important; }
.qgood { background: rgba(51, 204, 204, 0.12); border: 1px solid rgba(51, 204, 204, 0.45); }
.qgood strong { color: #0E6B6B; }
.qbad { background: rgba(15, 26, 43, 0.06); border: 1px solid rgba(15, 26, 43, 0.35); }
.qbad strong { color: var(--ink); }
@media (max-width: 700px) { .qflags { grid-template-columns: 1fr; } }

/* calculator cards shared sitewide (07-07: GTS embedded calc matches the ROI page) */
.out-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.out-card { background: #fff; border: 1px solid var(--line-k); padding: 1.2rem 1.4rem 1.4rem; }
.out-card dt { font-size: 0.88rem; color: var(--gray-ink); }
.out-card dd { font-family: var(--d); font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.1; color: var(--ink); margin-top: 0.2rem; }
.out-card.save { background: var(--ink); border-color: var(--ink); }
.out-card.save dt { color: var(--gray); }
.out-card.save dd { color: var(--acc); }
.calc-card { background: #fff; border: 1px solid var(--line-k); }
@media (max-width: 720px) { .out-cards { grid-template-columns: 1fr; } }

/* cyan lift (07-07): more brand color on recurring labels */
.sec:not(.sec-paper) .ledger h3 { color: var(--acc); }
.contact-ways h3 { color: var(--acc); }
.foot-h { color: var(--acc); }
.drop-label { color: var(--acc); opacity: 0.8; }
.m-nav .m-label { color: var(--acc); opacity: 0.85; }
.tmeta dd { color: var(--acc); }
.crumb { color: var(--acc); opacity: 0.85; }

/* full-bleed band variant (07-07: the Who-we-are team banner) */
.band-full { max-width: none; padding-inline: 0; }

/* role pills shared (GTS embedded calc + ROI page) */
.roles { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.role-pill {
  font-family: var(--t); font-weight: 600; font-size: 0.9rem;
  border: 1px solid var(--line-k); border-radius: 100px;
  background: #fff; color: var(--gray-ink);
  padding: 0.5rem 1rem; cursor: pointer; transition: all 0.15s;
}
.role-pill:hover { border-color: var(--ink); color: var(--ink); }
.role-pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.ticker-label {
  font-family: var(--d); font-weight: 500; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gray); text-align: center;
  margin-block: clamp(2rem, 5vh, 3.4rem) clamp(1.4rem, 3vh, 2.2rem);
  padding: 0;
}
@media (max-width: 640px) {
  .ticker-label { margin-block: 2.2rem 1.6rem; padding-inline: 1.2rem; line-height: 1.5; }
}

/* CTA + request form merged (batch 07-07) */
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.cta-grid .assess { max-width: 26rem; justify-self: end; width: 100%; }
@media (max-width: 860px) { .cta-grid { grid-template-columns: 1fr; } .cta-grid .assess { justify-self: stretch; max-width: none; } }

.case-logo img { border-radius: 6px; }
.case-logo { margin-top: 0.6rem; }

/* founder story: opening line reads as a pull-quote (batch 07-07) */
.story > p:first-of-type { font-family: var(--d); font-weight: 500; font-size: 1.45rem; line-height: 1.25; color: var(--acc); }

/* funnel strip (07-07, from the mockup): 100 -> 3-5 -> 1 */
.funnel { display: flex; align-items: center; gap: clamp(0.6rem, 1.6vw, 1.4rem); flex-wrap: nowrap; margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--line-k); }
.fstep { display: flex; align-items: baseline; gap: 0.45rem; white-space: nowrap; }
.fstep b { font-family: var(--d); font-weight: 700; font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: 1; color: var(--ink); }
.fstep span { color: var(--gray-ink); font-size: 0.88rem; }
.farrow { color: var(--acc); font-size: 1.2rem; font-weight: 700; flex-shrink: 0; }
.funnel-note { margin-top: 1.2rem; color: var(--gray-ink); }
@media (max-width: 1100px) { .funnel { flex-direction: column; align-items: flex-start; } .farrow { transform: rotate(90deg); margin-left: 0.4rem; } }

/* three-quote testimonials (07-07, from the mockup) */
.tquotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2.5rem; }
.tquote { border-top: 1px solid var(--line-k); padding-top: 1.6rem; }
.tquote p { color: var(--gray-ink); }
.tquote footer { margin-top: 1.2rem; }
.tquote footer strong { display: block; color: var(--ink); font-size: 0.98rem; }
.tquote footer span { display: block; color: var(--gray-ink); font-size: 0.9rem; }
@media (max-width: 860px) { .tquotes { grid-template-columns: 1fr; } }

/* port batch (07-07): proof logos row + founder quote */
.proof-logos { display: flex; flex-wrap: wrap; gap: 1.6rem 2.2rem; align-items: center; margin-top: 1.8rem; }
.proof-logos img { border-radius: 6px; opacity: 0.9; }
.fquote { margin-top: 1.6rem; border-left: 3px solid var(--acc); padding-left: 1.2rem; }
.fquote p { font-family: var(--d); font-weight: 500; font-size: 1.3rem; line-height: 1.25; color: var(--ink); }
.sec-paper .fquote p { color: var(--ink); }
.founder-grid .fquote p { color: var(--paper); }
.founder-grid .fquote footer { color: var(--paper); opacity: 0.8; }
.founder-grid .founder-fig figcaption span { color: var(--paper); opacity: 0.8; }
.founder-grid .story p { color: var(--paper); }
.fquote footer { margin-top: 0.5rem; font-size: 0.9rem; color: var(--gray-ink); }
.seller-line p strong { color: var(--paper); }
.checks-onpaper li::before { color: var(--ink); }

/* markets section on white (07-07, compensates for the removed record section) */
.markets-paper { background: var(--paper); color: var(--ink); padding-block: clamp(4rem, 9vh, 7rem) 0; margin-top: 0; }
.markets-paper .sec-lede { color: var(--gray-ink); }
.markets-paper .mkt, .markets-paper .mkt-list { border-color: var(--line-k); }
.markets-paper .mkt:hover { background: #fff; }
.markets-paper .mkt-body p, .markets-paper .mkt-roles { color: var(--gray-ink); }

/* ROI lead capture (calculator + GTS embed) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.roi-capture { margin-top: 1.8rem; background: var(--ink); padding: 1.5rem 1.6rem 1.6rem; }
.roi-capture-h { font-family: var(--d); font-weight: 600; font-size: 1.3rem; color: #fff; }
.roi-capture-sub { color: var(--gray); font-size: 0.95rem; margin-top: 0.3rem; }
.roi-capture-row { display: flex; gap: 0.7rem; margin-top: 1rem; flex-wrap: wrap; }
.roi-capture-row input { flex: 1 1 220px; border: 0; padding: 0.7rem 0.8rem; font-family: var(--t); font-size: 1rem; background: #fff; color: var(--ink); }
.roi-capture-row input:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.roi-capture-done { color: var(--acc); font-weight: 600; margin-top: 0.9rem; }
.roi-capture-err { color: #FFB4C6; font-weight: 600; margin-top: 0.9rem; }

/* candid photo band (who we are) */
.candids { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.candids img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.35s ease; }
.candids figure:hover img { filter: none; }
.candids figcaption { padding-top: 0.7rem; font-size: 0.9rem; color: var(--gray-ink); }
@media (max-width: 720px) { .candids { grid-template-columns: 1fr; } }

/* testimonial marquee (07-09): continuous scroll like the bench */
.tmarquee { margin-top: 3.2rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.tmarquee-track { display: flex; gap: 1.4rem; width: max-content; animation: tscroll 70s linear infinite; }
.tmarquee:hover .tmarquee-track { animation-play-state: paused; }
@keyframes tscroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 0.7rem)); } }
@media (prefers-reduced-motion: reduce) { .tmarquee-track { animation: none; } }
.tmarquee .tquote { flex: 0 0 380px; background: #fff; border: 1px solid rgba(15,26,43,0.14); padding: 1.8rem 1.9rem; display: flex; flex-direction: column; justify-content: space-between; }
.tmarquee .tquote p { font-size: 1rem; line-height: 1.55; color: var(--ink); }
.tmarquee .tquote footer { margin-top: 1.1rem; }
.tmarquee .tquote footer strong { display: block; color: var(--ink); }
.tmarquee .tquote footer span { display: block; color: var(--gray-ink); font-size: 0.88rem; }
@media (max-width: 640px) { .tmarquee .tquote { flex-basis: 300px; } }

/* logo ticker: color on hover, pause */
.logo-ticker:hover .ticker-track { animation-play-state: paused; }
.lg { position: relative; }
.lg .lg-c { display: none; background: #fff; border-radius: 6px; padding: 2px; }
.lg:hover .lg-c { display: inline-block; }
.lg:hover .lg-w { display: none; }

/* pain section quote cards (no table look, 09-07) */
.painboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; margin-top: 3.4rem; }
.painboard blockquote {
  position: relative; background: #fff;
  border: 1px solid var(--line-k); padding: 3rem 1.8rem 1.7rem;
  display: flex; flex-direction: column; justify-content: space-between;
}
.painboard blockquote::before {
  content: "\201C"; position: absolute; top: 0.5rem; left: 1.5rem;
  font-family: var(--d); font-weight: 700; font-size: 3.4rem; line-height: 1; color: #0E6B6B;
}
.painboard p { color: var(--ink); font-size: 1.05rem; line-height: 1.55; }
.painboard footer { margin-top: 1rem; font-family: var(--d); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.88rem; color: var(--acc-deep); }
@media (max-width: 900px) { .painboard { grid-template-columns: 1fr; } }

/* two-model editorial split, dark (09-07) */
.models-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); margin-top: 3.6rem; }
.mside + .mside { border-left: 1px solid var(--line-w); padding-left: clamp(2rem, 5vw, 4.5rem); }
.mside .model-kick { font-family: var(--d); font-weight: 600; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--acc); }
.mside h3 { font-family: var(--d); font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.05; margin-top: 0.9rem; color: var(--paper); }
.mside > p:not(.model-kick) { margin-top: 1rem; color: var(--gray); max-width: 46ch; }
.mside .checks li { color: var(--gray); }
.mside .checks li::before { color: var(--acc); }
.mside .btn { margin-top: 1.8rem; }
@media (max-width: 860px) {
  .models-split { grid-template-columns: 1fr; }
  .mside + .mside { border-left: none; padding-left: 0; border-top: 1px solid var(--line-w); padding-top: 2rem; }
}

/* pain pivot line */
.pain-pivot { margin: 2.8rem auto 0; max-width: 44rem; text-align: center; font-family: var(--d); font-weight: 600; font-size: 1.35rem; color: var(--ink); text-wrap: balance; }
.pain-pivot a { color: var(--acc-deep); white-space: nowrap; }

/* punchy differentiator sub-headline (09-07) */
.sec-punch {
  font-family: var(--d); font-weight: 600;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.2;
  margin-top: 1.2rem; max-width: 40ch; text-wrap: balance;
}
.sec .sec-punch, .method .sec-punch, .seller-dark .sec-punch { color: var(--paper); }
.sec-paper .sec-punch, .seller .sec-punch, .faq .sec-punch { color: #0E6B6B; }

/* dual-mode variants for the all-pages design pass (09-07) */
/* painboard on dark sections */
.sec:not(.sec-paper) .painboard blockquote { background: rgba(255,255,255,0.045); border-color: var(--line-w); }
.sec:not(.sec-paper) .painboard p { color: var(--paper); }
.sec:not(.sec-paper) .painboard blockquote::before { color: var(--acc); }
.sec:not(.sec-paper) .painboard footer { color: var(--gray); }
.sec:not(.sec-paper) .pain-pivot { color: var(--paper); }
.sec:not(.sec-paper) .pain-pivot a { color: var(--acc); }
/* cols on dark sections */

.sec:not(.sec-paper) .cols-note { color: var(--gray); }
/* pricing rows on light sections */
.sec-paper .price-rows { border-color: var(--line-k); }
.sec-paper .price { border-color: var(--line-k); }
.sec-paper .price li { color: var(--gray-ink); }
.sec-paper .price-fee span { color: var(--gray-ink); }
/* SELLER framework dark variant */
.seller.seller-dark { background: var(--ink); color: var(--paper); }
.seller-dark .sec-h { color: var(--acc); }
.seller-dark .sec-lede, .seller-dark .seller-row span, .seller-dark .seller-note { color: var(--gray); }
.seller-dark .seller-row li { background: rgba(255,255,255,0.045); border-color: var(--line-w); }
.seller-dark .seller-row b { background: rgba(255,255,255,0.06); color: var(--acc); }
.seller-dark .seller-row strong { color: var(--paper); }
/* candid band on dark */
.sec:not(.sec-paper) .candids figcaption { color: var(--gray); }

/* contact section on light background */
.sec-paper .contact-main p, .sec-paper .contact-ways p { color: var(--gray-ink); }
.sec-paper .contact-ways { border-color: var(--line-k); }
.sec-paper .contact-ways div { border-color: var(--line-k); }
.sec-paper .contact-ways a { color: var(--ink); }

/* 4-quote painboard: 2x2 instead of 3+orphan */
.painboard.painboard-4 { grid-template-columns: repeat(2, 1fr); max-width: 62rem; }

/* ---------- general polish pass (09-07, Fable) ---------- */
/* signature accent tick above section headings */
.sec-h::before { content: ""; display: block; width: 46px; height: 4px; background: var(--acc); margin-bottom: 1.6rem; }
.sec-paper .sec-h::before, .faq .sec-h::before, .seller:not(.seller-dark) .sec-h::before,
.markets-paper .sec-h::before, .quote-sec .sec-h::before { background: #0E6B6B; }

/* card micro-interactions */
.painboard blockquote, .tmarquee .tquote, .seller-row li, .mside { transition: transform 0.2s ease, border-color 0.2s ease; }
.painboard blockquote:hover, .seller-row li:hover { transform: translateY(-3px); }
.sec-paper .painboard blockquote:hover, .seller:not(.seller-dark) .seller-row li:hover { border-color: var(--acc-deep); }
.sec:not(.sec-paper) .painboard blockquote:hover, .seller-dark .seller-row li:hover { border-color: var(--acc); }

/* brand selection + anchor offset under sticky nav */
::selection { background: var(--acc); color: var(--ink); }
section[id], [id]:target { scroll-margin-top: 90px; }

/* quote cards in the marquee: subtle top accent to match the card system */
.tmarquee .tquote { border-top: 3px solid var(--acc-deep); }
.painboard blockquote { border-top: 3px solid transparent; }
.sec-paper .painboard blockquote { border-top-color: rgba(14,107,107,0.55); }
.sec:not(.sec-paper) .painboard blockquote { border-top-color: rgba(51,204,204,0.55); }

/* ============================================================
   10-07 homepage pass: constellation hero, struck pains,
   vertical journey, funnel moment, model tabs, solo CTA.
   ============================================================ */

/* hero: flat ink + constellation canvas instead of a photo */
#constellation { display: block; width: 100%; height: 100%; }
.hero .hero-bg { background: var(--ink); }
.hero .hero-bg::after {
  background:
    linear-gradient(90deg, rgba(15,26,43,0.86) 0%, rgba(15,26,43,0.7) 42%, rgba(15,26,43,0.58) 72%, rgba(15,26,43,0.82) 100%),
    linear-gradient(180deg, rgba(15,26,43,0.5) 0%, rgba(15,26,43,0.3) 38%, rgba(15,26,43,0.86) 82%, var(--ink) 100%);
}

/* pains: vertical rows, struck-out labels */
.painboard-v { display: flex; flex-direction: column; gap: 0; margin-top: 2.6rem; }
.painboard-v blockquote {
  display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
  gap: 1rem 3rem; align-items: baseline;
  padding-block: 1.9rem; margin: 0;
  border-top: 1px solid var(--line-k);
}
.painboard-v blockquote:last-child { border-bottom: 1px solid var(--line-k); }
.painboard-v blockquote::before { content: none; }
.painboard-v footer {
  margin-top: 0;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  letter-spacing: 0.02em;
  color: var(--ink);
}
.painboard-v p { max-width: 56ch; }
.strike { position: relative; display: inline-block; padding-inline: 0.08em; }
.strike::after {
  content: ""; position: absolute; left: -2%; right: -2%; top: 52%;
  height: 0.13em; background: var(--acc); border-radius: 2px;
  transform: rotate(-1.8deg) scaleX(1); transform-origin: left center;
}
.js .painboard-v .rv .strike::after { transform: rotate(-1.8deg) scaleX(0); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.65s; }
.js .painboard-v .rv.in .strike::after { transform: rotate(-1.8deg) scaleX(1); }
@media (max-width: 780px) { .painboard-v blockquote { grid-template-columns: 1fr; gap: 0.5rem; } }

/* method: vertical journey rail (unnumbered) */
.journey { list-style: none; margin-top: 3rem; max-width: 56rem; }
.j-step {
  display: grid; grid-template-columns: minmax(0, 1fr) 12rem;
  gap: 1rem 3rem;
  padding: 2rem 0 2.1rem 2rem;
  border-left: 2px solid rgba(51,204,204,0.28);
  position: relative;
}
.j-step::before {
  content: ""; position: absolute; left: -7px; top: 2.55rem;
  width: 12px; height: 12px; background: var(--ink);
  border: 2px solid var(--acc); border-radius: 50%;
}
.j-step h3 { font-family: var(--d); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.05; color: var(--paper); }
.j-step p { color: var(--gray); margin-top: 0.5rem; max-width: 52ch; }
.j-note {
  font-family: var(--d); font-weight: 600; font-size: 0.92rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--acc); justify-self: end; text-align: right; padding-top: 0.4rem;
}
@media (max-width: 780px) { .j-step { grid-template-columns: 1fr; } .j-note { justify-self: start; text-align: left; padding-top: 0; } }

/* SELLER folded into the assessment step */
.seller-inline { list-style: none; margin-top: 1.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 2rem; }
.seller-inline li { display: flex; gap: 0.85rem; align-items: flex-start; }
.seller-inline b {
  display: grid; place-items: center; flex: none;
  width: 2.3rem; height: 2.3rem;
  border: 2px solid var(--acc); color: var(--acc);
  font-family: var(--d); font-weight: 700; font-size: 1.35rem; line-height: 1;
}
.seller-inline span { font-size: 0.95rem; color: var(--gray); padding-top: 0.15rem; }
.seller-inline strong { display: block; color: var(--paper); font-weight: 600; }
@media (max-width: 680px) { .seller-inline { grid-template-columns: 1fr; } }

/* funnel: its own moment, numbers big */
.method .funnel { padding-top: 2.6rem; }
.fstep b { font-family: var(--d); font-weight: 700; font-size: clamp(3rem, 6vw, 4.8rem); line-height: 0.95; display: block; }
.fstep-one b { color: var(--acc); text-shadow: 0 0 34px rgba(51,204,204,0.35); }
.js .funnel .fstep, .js .funnel .farrow { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease-out, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.js .funnel.go .fstep, .js .funnel.go .farrow { opacity: 1; transform: none; }
.js .funnel.go .fstep:nth-child(1) { transition-delay: 0s; }
.js .funnel.go .farrow:nth-child(2) { transition-delay: 0.25s; }
.js .funnel.go .fstep:nth-child(3) { transition-delay: 0.4s; }
.js .funnel.go .farrow:nth-child(4) { transition-delay: 0.65s; }
.js .funnel.go .fstep:nth-child(5) { transition-delay: 0.8s; }
@media (prefers-reduced-motion: reduce) { .js .funnel .fstep, .js .funnel .farrow { opacity: 1; transform: none; transition: none; } }

/* model tabs (two ways, one at a time) */
.model-tabs { display: inline-flex; margin-top: 3rem; border: 1px solid var(--line-w); background: rgba(255,255,255,0.05); }
.mtab {
  appearance: none; border: 0; cursor: pointer;
  background: transparent; color: var(--gray);
  font-family: var(--d); font-weight: 600; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.85rem 1.6rem;
  transition: background 0.2s, color 0.2s;
}
.mtab.active { background: var(--paper); color: var(--ink); }
.mtab:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.mpanel { display: none; }
.mpanel.show { display: block; animation: panelin 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes panelin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mpanel.show { animation: none; } }

/* pathgrid: copy left, proof card right */
.pathgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.2rem, 5vw, 4.5rem); margin-top: 2.6rem; align-items: start; }
.p-copy h3 { font-family: var(--d); font-weight: 600; font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.02; color: var(--paper); max-width: 22ch; }
.p-lede { margin-top: 1rem; color: var(--gray); max-width: 52ch; }
.p-points { list-style: none; margin-top: 1.8rem; }
.p-points li { position: relative; padding: 0.65rem 0 0.65rem 2rem; }
.p-points li::before { content: "\2713"; position: absolute; left: 0; top: 0.7rem; font-weight: 700; color: var(--acc); }
.p-points b { display: block; color: var(--paper); font-weight: 600; }
.p-points span { display: block; color: var(--gray); font-size: 0.95rem; margin-top: 0.15rem; }
.p-cta { margin-top: 1.9rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.p-cta > span { color: var(--gray); font-size: 0.95rem; }
.p-more { margin-top: 1.1rem; font-size: 0.95rem; }
.p-more a { color: var(--acc); text-decoration: none; }
.p-more a:hover { text-decoration: underline; }
.p-proof { background: var(--ink-2); border: 1px solid var(--line-w); padding: clamp(1.8rem, 3vw, 2.6rem); }
.p-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line-w); }
.p-nums b { font-family: var(--d); font-weight: 700; font-size: clamp(2.3rem, 3.6vw, 3rem); line-height: 1; color: var(--acc); display: block; }
.p-nums span { display: block; margin-top: 0.5rem; color: var(--gray); font-size: 0.92rem; line-height: 1.45; }
.p-proof blockquote { margin: 0; }
.p-proof blockquote p { color: var(--paper); font-size: 1.1rem; line-height: 1.55; }
.p-proof footer { margin-top: 1.1rem; }
.p-proof footer strong { display: block; color: var(--paper); font-weight: 600; }
.p-proof footer span { color: var(--gray); font-size: 0.92rem; }
@media (max-width: 900px) { .pathgrid { grid-template-columns: 1fr; } .model-tabs { display: flex; } .mtab { flex: 1; text-align: center; } }

/* CTA: single column, no form */
.cta-solo { max-width: 46rem; }
.cta-sub { margin-top: 1.4rem; color: var(--gray); font-size: 1.1rem; max-width: 44ch; }


/* 10-07 round 2: bigger pivot, pinned method funnel, two-ways on paper */

.pain-pivot { font-size: clamp(1.5rem, 2.6vw, 2rem); max-width: 52rem; }

/* method funnel: static stacked by default (no JS / reduced motion) */
.mfunnel { position: relative; }
.mf-stage { padding-block: 2rem; }
.mf-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; width: 100%; }
.mf-panel { padding-block: 1.6rem; }
.mf-panel h3 { font-family: var(--d); font-weight: 600; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; color: var(--paper); }
.mf-panel > p { color: var(--gray); margin-top: 0.9rem; max-width: 46ch; font-size: 1.05rem; }
.mf-big { margin-top: 1.7rem; }
.mf-big b { font-family: var(--d); font-weight: 700; font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 1; color: var(--acc); display: block; }
.mf-big span { color: var(--gray); font-size: 0.95rem; display: block; margin-top: 0.35rem; }
.mf-panel .seller-inline { grid-template-columns: repeat(3, 1fr); gap: 0.6rem 1.2rem; margin-top: 1.5rem; max-width: 30rem; }
.mf-panel .seller-inline span { padding-top: 0.5rem; }
.mf-viz { display: flex; flex-direction: column; gap: 0.7rem; align-items: center; }
.mf-bar {
  width: var(--bw); max-width: 26rem; min-width: 9.5rem;
  border: 1px solid var(--line-w);
  padding: 0.8rem 0.6rem; text-align: center;
  color: var(--gray); font-family: var(--d); font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.85rem;
  transition: border-color 0.4s, background 0.4s, color 0.4s;
}
.mf-bar.on { background: rgba(51,204,204,0.12); border-color: var(--acc); color: var(--acc); }
.mf-bar.done { border-color: rgba(51,204,204,0.4); color: rgba(51,204,204,0.55); }

/* pinned mode (added by JS when motion is allowed) */
.js .mfunnel.pin { height: 380vh; }
.js .mfunnel.pin .mf-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; padding-block: 0; }
.js .mfunnel.pin .mf-copy { position: relative; min-height: 24rem; }
.js .mfunnel.pin .mf-panel {
  position: absolute; inset: 0; padding-block: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(28px); pointer-events: none;
  transition: opacity 0.45s ease-out, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .mfunnel.pin .mf-panel.on { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 860px) {
  .mf-grid { grid-template-columns: 1fr; gap: 2rem; }
  .mf-viz { order: -1; }
  .mf-bar { padding: 0.5rem 0.5rem; font-size: 0.72rem; }
  .js .mfunnel.pin .mf-copy { min-height: 27rem; }
}

/* two ways on paper: ATLAS panel look */
.sec-paper .model-tabs { border: 1px solid var(--line-k); background: #fff; }
.sec-paper .mtab { color: var(--gray-ink); }
.sec-paper .mtab.active { background: var(--ink); color: #fff; }
.sec-paper .p-copy h3 { color: var(--ink); }
.sec-paper .p-lede { color: var(--gray-ink); }
.sec-paper .p-points b { color: var(--ink); }
.sec-paper .p-points span { color: var(--gray-ink); }
.sec-paper .p-points li::before { color: #0E6B6B; }
.sec-paper .p-cta > span { color: var(--gray-ink); }
.sec-paper .p-more a { color: #0E6B6B; }
.sec-paper .p-proof { background: var(--ink); border: none; }


/* 10-07 round 3: evidence-backed additions */
.vert-router { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.vert-router a {
  display: flex; flex-direction: column; gap: 0.3rem;
  background: #fff; border: 1px solid var(--line-k);
  padding: 1.3rem 1.4rem; text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.vert-router a:hover { transform: translateY(-2px); border-color: var(--ink); }
.vert-router span { color: var(--gray-ink); font-size: 0.95rem; }
.vert-router b { font-family: var(--d); font-weight: 600; font-size: 1.2rem; color: var(--ink); letter-spacing: 0.01em; }
@media (max-width: 860px) { .vert-router { grid-template-columns: 1fr; } }

.cta-proof { margin-top: 0.9rem; font-size: 0.95rem; color: var(--gray); }
.cta-cal { margin-top: 2.6rem; min-height: 0; }
.cta-cal .calendly-inline-widget { min-width: 300px; height: 680px; }


/* 10-07 round 4: the living funnel canvas (concept 3) */
.mf-viz { position: relative; }
#mf-canvas { display: none; width: 100%; height: min(72vh, 580px); }
.js .mfunnel.pin #mf-canvas { display: block; }
.js .mfunnel.pin .seller-inline { display: none; } /* the canvas letter gates carry SELLER on desktop */
@media (max-width: 860px) { .mf-viz { order: 0; } #mf-canvas { display: none !important; } }


/* 13-07: photo hero, bright treatment; vertical depth section */
.hero-bg-photo img {
  filter: grayscale(1) brightness(1.06) contrast(1.02);   /* B&W for site coherence, kept bright + clear */
  object-position: 50% 32%;
}
.hero-bg-photo::after {
  /* scrim only where the copy sits + soft floor for the stats strip */
  background:
    linear-gradient(90deg, rgba(15,26,43,0.78) 0%, rgba(15,26,43,0.55) 40%, rgba(15,26,43,0.16) 68%, rgba(15,26,43,0.1) 100%),
    linear-gradient(180deg, rgba(15,26,43,0.32) 0%, rgba(15,26,43,0.06) 40%, rgba(15,26,43,0.72) 80%, var(--ink) 100%);
}
.vert-sec { border-top: 1px solid var(--line-k); }
.vert-sec .vert-router { margin-top: 2.4rem; }
.vert-open { margin-top: 1.8rem; color: var(--gray-ink); max-width: 46rem; }
.vert-open a { color: var(--acc-deep); font-weight: 600; }

/* ============ 13-07 round 5: alive rebuild ============ */

/* PAINS: big vertical rows, cyan strike draws on scroll */
.pains-v { list-style: none; margin-top: 3rem; }
.pains-v .painrow {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 1rem 3.5rem; align-items: baseline;
  padding-block: 2.2rem; border-top: 1px solid var(--line-k);
}
.pains-v .painrow:last-child { border-bottom: 1px solid var(--line-k); }
.pains-v .painrow h3 {
  font-family: var(--d); font-weight: 600;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 0.98;
  letter-spacing: 0.01em; color: var(--ink);
}
.pains-v .painrow p { color: var(--gray-ink); font-size: 1.1rem; line-height: 1.55; max-width: 46ch; }
.js .pains-v .rv .strike::after { transform: rotate(-1.8deg) scaleX(0); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s; }
.js .pains-v .rv.in .strike::after { transform: rotate(-1.8deg) scaleX(1); }
@media (max-width: 780px) { .pains-v .painrow { grid-template-columns: 1fr; gap: 0.6rem; } }

/* METHOD: vertical scroll-reveal journey */
.journey-v { list-style: none; margin-top: 3.4rem; border-top: 1px solid var(--line-w); }
.journey-v .jv { padding-block: clamp(2.6rem, 6vh, 4.4rem); border-bottom: 1px solid var(--line-w); max-width: 52rem; }
.jv-step { font-family: var(--d); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc); }
.jv-h { font-family: var(--d); font-weight: 600; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 0.98; color: var(--paper); margin-top: 0.6rem; }
.jv-p { color: var(--gray); font-size: 1.12rem; line-height: 1.6; max-width: 44ch; margin-top: 1rem; }
.jv-big { margin-top: 1.6rem; font-size: 1.05rem; color: var(--gray); }
.jv-big b { font-family: var(--d); font-weight: 700; font-size: clamp(2.6rem, 5vw, 4rem); color: var(--acc); display: inline-block; vertical-align: -0.15em; margin-right: 0.5rem; line-height: 1; }

/* SELLER letters: big, vertical, one per row, word beside */
.seller-letters { margin-top: 2rem; }
.sl-row { display: flex; align-items: center; gap: 1.6rem; padding-block: 0.85rem; border-top: 1px solid var(--line-w); }
.sl-row:first-child { border-top: none; }
.sl-row b {
  font-family: var(--d); font-weight: 700;
  font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1;
  color: var(--acc); width: 1.5em; text-align: center; flex: none;
  border: 2px solid rgba(51,204,204,0.5); border-radius: 12px;
  display: grid; place-items: center; aspect-ratio: 1;
}
.sl-row span { font-family: var(--d); font-weight: 600; font-size: clamp(1.4rem, 2.8vw, 2.1rem); color: var(--paper); letter-spacing: 0.01em; }

/* TWO WAYS: rounded, light proof card (no deep fill on white) */
.sec-paper .model-tabs { border-radius: 999px; overflow: hidden; }
.sec-paper .mtab:first-child { border-radius: 999px 0 0 999px; }
.sec-paper .mtab:last-child { border-radius: 0 999px 999px 0; }
.sec-paper .mtab.active { border-radius: 999px; }
.pathgrid .p-proof { border-radius: 18px; }
.sec-paper .p-proof {
  background: #fff; border: 1px solid var(--line-k);
  box-shadow: 0 18px 50px rgba(15,26,43,0.08);
}
.sec-paper .p-proof .p-nums { border-bottom-color: var(--line-k); }
.sec-paper .p-nums b { color: #0E6B6B; }
.sec-paper .p-nums span { color: var(--gray-ink); }
.sec-paper .p-proof blockquote p { color: var(--ink); }
.sec-paper .p-proof footer strong { color: var(--ink); }
.sec-paper .p-proof footer span { color: var(--gray-ink); }
.model-tabs { border-radius: 999px; }
.mtab { transition: background 0.2s, color 0.2s; }

/* ============ 13-07 round 6: fixes per Fernanda ============ */

/* PAINS: stacked (label on top, sentence below), Manifesto-style */
.pains-v .painrow { display: block; padding-block: 2.4rem; }
.pains-v .painrow h3 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
.pains-v .painrow p { margin-top: 0.9rem; max-width: 52ch; }

/* SELLER letters live inside the pinned funnel panel: compact + reveal one per scroll */
.mf-panel-seller .seller-letters { margin-top: 1.1rem; }
.mf-panel-seller .sl-row { gap: 1.1rem; padding-block: 0.4rem; border-top: none; }
.mf-panel-seller .sl-row b {
  font-size: clamp(1.6rem, 3vw, 2.4rem); border-width: 1.5px; border-radius: 9px;
  border-color: rgba(51,204,204,0.55);
}
.mf-panel-seller .sl-row span { font-size: clamp(1rem, 1.8vw, 1.35rem); }
/* hidden only while the section is pinned (desktop); mobile/reduced-motion shows all */
.js .mfunnel.pin .sl-row { opacity: 0; transform: translateX(-14px); transition: opacity 0.45s ease-out, transform 0.5s cubic-bezier(0.22,1,0.36,1); }
.js .mfunnel.pin .sl-row.lit { opacity: 1; transform: none; }

/* TWO WAYS: results/proof box back to dark blue (override round-5 white) */
.sec-paper .p-proof { background: var(--ink); border: none; box-shadow: 0 18px 50px rgba(15,26,43,0.14); }
.sec-paper .p-proof .p-nums { border-bottom-color: var(--line-w); }
.sec-paper .p-nums b { color: var(--acc); }
.sec-paper .p-nums span { color: var(--gray); }
.sec-paper .p-proof blockquote p { color: var(--paper); }
.sec-paper .p-proof footer strong { color: var(--paper); }
.sec-paper .p-proof footer span { color: var(--gray); }

/* MORE ALIVE: section headings scale + rise as they enter (Manifesto feel) */
.js .rv.sec-h { opacity: 0; transform: translateY(30px) scale(0.965); transform-origin: left center; transition: opacity 0.7s ease-out, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.js .rv.sec-h.in { opacity: 1; transform: none; }

/* ============ 13-07 round 7: bigger funnel copy, less dead space ============ */
.mf-panel h3 { font-size: clamp(2.8rem, 5.6vw, 4.8rem); line-height: 0.98; }
.mf-panel > p { font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.5; max-width: 34ch; margin-top: 1.2rem; }
.mf-big { margin-top: 2rem; }
.mf-big b { font-size: clamp(3.2rem, 6vw, 5.2rem); }
.mf-big span { font-size: clamp(1.05rem, 1.5vw, 1.3rem); margin-top: 0.5rem; }
/* SELLER panel: intro a touch smaller so the letters own the space, letters bigger */
.mf-panel-seller > p { font-size: clamp(1.2rem, 1.7vw, 1.55rem); max-width: 40ch; }
.mf-panel-seller .seller-letters { margin-top: 1.4rem; }
.mf-panel-seller .sl-row { padding-block: 0.5rem; gap: 1.4rem; }
.mf-panel-seller .sl-row b { font-size: clamp(2.1rem, 3.8vw, 3.1rem); }
.mf-panel-seller .sl-row span { font-size: clamp(1.25rem, 2.3vw, 1.8rem); }
/* tighten the floaty centering: give the copy column more presence, trim stage air */
.js .mfunnel.pin .mf-copy { min-height: 32rem; }
.method .method-head { margin-bottom: 0; }

/* ============ 13-07 round 8: COMMAND layout - market animation left, copy/SELLER right ============ */
.mf-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mf-viz { order: 1; }
.mf-copy { order: 2; }
#mf-canvas { height: min(78vh, 620px); }
@media (max-width: 860px) { .mf-viz { order: 0; } }

/* ============ 13-07 round 9: proof box a clear brand navy (not near-black) ============ */
.sec-paper .p-proof { background: #1B2856; }

/* ============ 13-07 round 10: remove the decorative dash above every heading ============ */
.sec-h::before { display: none !important; content: none !important; }

/* ============ 13-07 round 11: effect back on the RIGHT, copy/SELLER on the LEFT (as it was) ============ */
.mf-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.mf-copy { order: 0; }
.mf-viz { order: 0; }

/* ============ 13-07 round 12: testimonials on dark ============ */
.sec-testi-dark { background: var(--ink); color: var(--paper); }
.sec-testi-dark .sec-h { color: var(--acc); }
.sec-testi-dark .sec-lede { color: var(--gray); }
.sec-testi-dark .tmarquee .tquote { background: #1B2856; border-color: rgba(255,255,255,0.1); border-top-color: rgba(51,204,204,0.55); }
.sec-testi-dark .tmarquee .tquote p { color: var(--paper); }
.sec-testi-dark .tmarquee .tquote footer strong { color: #fff; }
.sec-testi-dark .tmarquee .tquote footer span { color: var(--gray); }

/* ============ 13-07 round 13: whole homepage dark ============ */
.home-dark .sec-paper, .home-dark .faq { background: var(--ink); color: var(--paper); border-top-color: var(--line-w); }
.home-dark .sec-paper .sec-h, .home-dark .faq .sec-h { color: var(--paper); }
.home-dark .sec-paper .sec-lede, .home-dark .faq-head .sec-lede { color: var(--gray); }
.home-dark .sec-paper .sec-punch, .home-dark .faq .sec-punch { color: var(--acc); }

/* pains */
.home-dark .pains-v .painrow { border-color: var(--line-w); }
.home-dark .pains-v .painrow h3 { color: var(--paper); }
.home-dark .pains-v .painrow p { color: var(--gray); }
.home-dark .pain-pivot { color: var(--paper); }
.home-dark .pain-pivot a { color: var(--acc); }

/* two ways */
.home-dark .sec-paper .model-tabs { border-color: var(--line-w); background: rgba(255,255,255,0.05); }
.home-dark .sec-paper .mtab { color: var(--gray); }
.home-dark .sec-paper .mtab.active { background: var(--acc); color: var(--ink); }
.home-dark .sec-paper .p-copy h3 { color: var(--paper); }
.home-dark .sec-paper .p-lede { color: var(--gray); }
.home-dark .sec-paper .p-points b { color: var(--paper); }
.home-dark .sec-paper .p-points span { color: var(--gray); }
.home-dark .sec-paper .p-points li::before { color: var(--acc); }
.home-dark .sec-paper .p-cta > span { color: var(--gray); }
.home-dark .sec-paper .p-more a { color: var(--acc); }
.home-dark .sec-paper .p-proof { background: #22315C; border: 1px solid var(--line-w); }

/* industries */
.home-dark .vert-router a { background: rgba(255,255,255,0.04); border-color: var(--line-w); }
.home-dark .vert-router a:hover { border-color: var(--acc); }
.home-dark .vert-router span { color: var(--gray); }
.home-dark .vert-router b { color: var(--paper); }
.home-dark .vert-open { color: var(--gray); }
.home-dark .vert-open a { color: var(--acc); }

/* faq */
.home-dark .faq-list, .home-dark .faq-list details { border-color: var(--line-w); }
.home-dark .faq-list summary { color: var(--paper); }
.home-dark .faq-list details p { color: var(--gray); }
.home-dark .cols-note a { color: var(--acc); }

/* ============ 13-07 round 14: bigger hero headline for impact ============ */
.hero .hero-h-sm { font-size: clamp(3rem, 7vw, 5.8rem); line-height: 0.94; }

/* ============ 13-07 round 15: proof box matches the 'where we go deepest' cards ============ */
.home-dark .sec-paper .p-proof { background: rgba(255,255,255,0.04); border: 1px solid var(--line-w); box-shadow: none; }

/* ============ 13-07 round 16: tighten pains->method transition ============ */
.method { padding-top: clamp(2.5rem, 5vh, 4rem); }

/* ============ 13-07 round 17: testimonial cards match the translucent card style ============ */
.sec-testi-dark .tmarquee .tquote { background: rgba(255,255,255,0.04); border: 1px solid var(--line-w); border-top: 3px solid rgba(51,204,204,0.55); }

/* ============ 13-07 round 18: mobile funnel sizing (desktop big type was too large on phones) ============ */
@media (max-width: 640px) {
  .mf-panel { padding-block: 1.3rem; }
  .mf-panel h3 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .mf-panel > p { font-size: 1.08rem; line-height: 1.5; max-width: none; }
  .mf-big { margin-top: 1.1rem; }
  .mf-big b { font-size: 2.6rem; }
  .mf-panel-seller > p { font-size: 1.05rem; }
  .mf-panel-seller .seller-letters { margin-top: 1rem; }
  .mf-panel-seller .sl-row { padding-block: 0.35rem; gap: 1rem; }
  .mf-panel-seller .sl-row b { font-size: 1.7rem; }
  .mf-panel-seller .sl-row span { font-size: 1.15rem; }
  /* pains a touch smaller too so each isn't a full screen */
  .pains-v .painrow h3 { font-size: clamp(2rem, 8.5vw, 2.8rem); }
  .pains-v .painrow { padding-block: 1.8rem; }
}

/* ============ 13-07 round 19: narrative bridge from pains to method ============ */
.pain-bridge {
  font-family: var(--d); font-weight: 600;
  font-size: clamp(1.3rem, 2.9vw, 2.4rem); line-height: 1.1; letter-spacing: 0.01em;
  max-width: none; white-space: nowrap; margin: clamp(2.8rem, 6vh, 4.5rem) 0 0.5rem;
}
.home-dark .pain-bridge { color: var(--paper); }
.pain-bridge .hl-c { color: var(--acc); }
/* only wrap when the viewport genuinely can't hold one line */
@media (max-width: 620px) { .pain-bridge { white-space: normal; font-size: clamp(1.7rem, 7.5vw, 2.4rem); max-width: 20ch; } }

/* ===== v23: market animation now runs on mobile (sticky visual, captions scroll past it) ===== */
@media (max-width: 860px) {
  .mfunnel .mf-grid { grid-template-columns: 1fr; gap: 0; align-items: start; }
  .mfunnel .mf-viz {
    order: -1;
    position: sticky; top: 58px; z-index: 1;
    width: 100%; height: 40vh; min-height: 240px;
    margin-bottom: 1.2rem;
  }
  #mf-canvas { display: block !important; width: 100%; height: 100%; }
  /* all step captions visible and stacked; each gets its own scroll beat under the sticky visual */
  .mfunnel .mf-copy { position: relative; }
  .mfunnel .mf-panel {
    opacity: 1 !important; transform: none !important; position: relative !important;
    min-height: 48vh; padding-block: 0;
    display: flex; flex-direction: column; justify-content: center;
  }
  .mfunnel .mf-panel:last-child { min-height: 40vh; }
}

/* ============================================================
   v25 - INTERIOR PAGES: full dark navy theme
   Applied via <body class="home-dark"> on About + the 3 verticals
   + US + Global Talent. Base body is already dark and the
   .sec:not(.sec-paper) / .on-ink rules already light up plain
   .sec sections. This layer fixes the pieces that don't:
   (1) .sec-paper sections flipped dark, (2) the standalone light
   bands (.quote-sec), (3) markers/borders drawn in near-black
   (--ink / --acc-deep) that vanish on dark.
   ============================================================ */

/* --- flipped-dark paper sections: ledger cards --- */
.home-dark .sec-paper .ledger h3 { color: var(--acc); }
.home-dark .sec-paper .ledger p,
.home-dark .sec-paper .ledger ul li { color: var(--gray); }
.home-dark .sec-paper .ledger > div { border-left-color: var(--acc); }

/* --- role/sector column lists --- */
.home-dark .cols li { color: var(--paper); }
.home-dark .cols li::before { color: var(--acc); }
.home-dark .cols-note { color: var(--gray); }
.home-dark .cols-note a { color: var(--acc); }

/* --- check lists --- */
.home-dark .checks li { color: var(--gray); }
.home-dark .checks li::before { color: var(--acc); }

/* --- numbered process steps --- */
.home-dark .steps li { border-top-color: var(--acc); }
.home-dark .steps li::before { color: var(--acc); }
.home-dark .steps h3 { color: var(--paper); }
.home-dark .steps p { color: var(--gray); }
.home-dark .method-head .sec-lede { color: var(--gray); }
.home-dark .method-proof { color: var(--acc); }

/* --- the pull-quote band: flip light -> dark --- */
.home-dark .quote-sec { background: var(--ink-2); color: var(--paper); border-top: 1px solid var(--line-w); }
.home-dark .quote p { color: var(--paper); }
.home-dark .quote::before { color: var(--acc); }
.home-dark .quote strong { color: var(--paper); }
.home-dark .quote footer span { color: var(--gray); }

/* --- team + founder + candids captions --- */
.home-dark .team-grid figcaption { color: var(--paper); }
.home-dark .team-grid figcaption span { color: var(--gray); }
.home-dark .founder-fig figcaption { color: var(--paper); }
.home-dark .founder-fig figcaption span { color: var(--gray); }
.home-dark .candids figcaption { color: var(--gray); }

/* --- founder narrative (editorial spine) --- */
.home-dark .story p { color: var(--gray); }
.home-dark .founder-grid .story p { color: var(--paper); }
.home-dark .story > p:first-of-type { color: var(--acc); }
.home-dark .story .story-close { color: var(--acc); }
.home-dark .fquote p { color: var(--paper); }
.home-dark .fquote footer { color: var(--gray); }
.home-dark .seller-line strong, .home-dark .seller-line a { color: var(--paper); }
.home-dark .seller-line p { color: var(--gray); }

/* --- About: Cancun team hero keeps the site's mono (black & white)
       treatment for consistency; only the crop is tuned to frame the
       team + water. Grayscale + scrim inherit the default .hero-bg. --- */
.about-hero .hero-bg img { object-position: 50% 46%; }
/* editorial touch: lift the opening line of the founder story */
.home-dark .founder-grid .story > p:first-of-type { color: var(--acc); font-size: 1.55rem; line-height: 1.28; }

/* ===== v28: how-a-call-works post-booking closing (the Calendly redirect
   lands people here AFTER they book, so the close preps them instead of
   asking them to book again) ===== */
.cta-lede { margin-top: 1.4rem; max-width: 54ch; color: var(--gray); font-size: 1.125rem; line-height: 1.6; }
.prep-list { list-style: none; margin: 2.2rem 0 0; display: grid; gap: 0; max-width: 62ch; }
.prep-list li {
  display: grid; grid-template-columns: minmax(6.5rem, 9rem) 1fr; gap: 0.4rem 1.6rem;
  align-items: baseline; padding-block: 1rem; border-top: 1px solid var(--line-w);
}
.prep-list li:last-child { border-bottom: 1px solid var(--line-w); }
.prep-list b { font-family: var(--d); font-weight: 600; font-size: 1.25rem; color: var(--acc); text-transform: uppercase; letter-spacing: 0.02em; }
.prep-list span { color: var(--gray); }
.cta-foot-alt { margin-top: 2rem; color: var(--gray); font-size: 0.95rem; }
.cta-foot-alt a { color: var(--acc); }
@media (max-width: 560px) { .prep-list li { grid-template-columns: 1fr; gap: 0.2rem; } }

/* ============================================================
   v29 - interior refinements
   ============================================================ */

/* cyan section headings (Meet the founder / The team) */
.sec-h-c, .home-dark .sec-paper .sec-h-c, .home-dark .sec-h-c { color: var(--acc); }

/* 3-item ledgers go 3-up so there is no lonely orphan card in a 2-col grid */
.ledger:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) { .ledger:has(> div:nth-child(3):last-child) { grid-template-columns: 1fr; } }

/* success-story client logos: one clean line, height-normalized (all sources are 260x104 = HD) */
.proof-logos { flex-wrap: nowrap; justify-content: space-between; gap: 1.4rem; }
.proof-logos img { height: 42px; width: auto; max-width: none; object-fit: contain; opacity: 0.92; }
@media (max-width: 760px) {
  .proof-logos { flex-wrap: wrap; justify-content: center; gap: 1.4rem 2rem; }
  .proof-logos img { height: 34px; }
}

/* team cards: show only name + title; the bio drops in as a panel on hover
   (photo already colorizes on hover via the team-grid rule) */
.team-grid figure { position: relative; }
.team-grid figcaption .bio {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  margin-top: 0.5rem; padding: 0.9rem 1.05rem;
  background: var(--ink-2); border: 1px solid var(--acc); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  color: var(--gray); font-size: 0.9rem; line-height: 1.45; font-weight: 400;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.team-grid figure:hover { z-index: 6; }
.team-grid figure:hover .bio { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* touch devices have no hover: keep bios inline and quiet */
@media (hover: none), (max-width: 720px) {
  .team-grid figcaption .bio {
    position: static; opacity: 1; transform: none; pointer-events: auto;
    margin-top: 0.45rem; padding: 0; background: transparent; border: none; box-shadow: none;
  }
}

/* ============================================================
   v30 - Option B: value "ledger" blocks become elevated proof cards
   (retires the flat left-border ledger look across every page).
   Converted sections add a cyan eyebrow label + checkmark proof list.
   ============================================================ */
.ledger { gap: 1.4rem; margin-top: 2.8rem; }
.ledger > div {
  border-left: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-w);
  border-radius: 16px;
  padding: 1.8rem 1.7rem;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.ledger > div:hover { border-color: var(--acc); transform: translateY(-4px); background: rgba(51,204,204,0.06); }
/* heading white inside the card; the eyebrow label carries the cyan */
.ledger h3, .home-dark .sec-paper .ledger h3, .sec:not(.sec-paper) .ledger h3 { color: var(--paper); }
.ledger h3 a { color: var(--paper); }
.ledger h3 a:hover { color: var(--acc); }
.ledger p { margin-top: 0.5rem; }

.ledger .card-label {
  display: block; font-family: var(--d); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc); margin-bottom: 0.55rem;
}
.ledger .card-checks { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.6rem; grid-column: auto; max-width: none; }
.ledger .card-checks li { position: relative; padding-left: 1.6rem; color: var(--gray); line-height: 1.42; }
.ledger .card-checks li::before { content: "\2713"; position: absolute; left: 0; color: var(--acc); font-weight: 700; }

/* ============================================================
   v31 - softer photo treatment: muted "faded color" instead of hard B&W.
   Heroes keep their navy scrim, so color reads through a veil
   (the Hunt Club effect). Hover still resolves to full color.
   ============================================================ */
.hero-bg img { filter: grayscale(0.4) brightness(0.82) contrast(1.02); }
.team-grid img, .founder-fig img, .candids img, .post-card img {
  filter: grayscale(0.5) brightness(0.97) contrast(1.0);
}
.team-grid figure:hover img, .founder-fig:hover img,
.candids figure:hover img, .post-card:hover img { filter: none; }


/* ============================================================
   v32 - (a) retire the off-brand teal "bet" card -> brand cyan/navy
          (b) process steps as a connected stepper, not big 01-04 numbers
   ============================================================ */

/* (a) results/"bet" callout card on-brand */
.bet { background: rgba(51,204,204,0.09); border: 1px solid rgba(51,204,204,0.38); color: var(--paper); }
.bet h3 { color: var(--acc); }
.bet-fig { color: var(--acc); }
.bet p:last-child { color: var(--gray); }

/* (b) connected process stepper */
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin-top: 3rem; position: relative; }
.steps li, .home-dark .sec-paper .steps li { border-top: none; padding: 2.2rem 1.7rem 0 0; position: relative; }
.steps li::before {                     /* node dot replaces the "01" number */
  content: ""; position: absolute; top: 0; left: 0; margin: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--acc); box-shadow: 0 0 0 5px rgba(51,204,204,0.14); z-index: 2;
}
.steps li::after {                       /* connecting line to the next node */
  content: ""; position: absolute; top: 7px; left: 16px; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--acc), rgba(51,204,204,0.22)); z-index: 1;
}
.steps li:last-child::after { display: none; }
.steps h3 { margin-top: 0.35rem; color: var(--paper); }
.steps p { color: var(--gray); }
@media (max-width: 760px) {
  .steps { grid-auto-flow: row; grid-auto-columns: auto; }
  .steps li, .home-dark .sec-paper .steps li { padding: 0 0 1.9rem 2rem; }
  .steps li::before { top: 3px; }
  .steps li::after { top: 19px; left: 7px; right: auto; bottom: -3px; width: 2px; height: auto; background: linear-gradient(180deg, var(--acc), rgba(51,204,204,0.22)); }
}

/* ============================================================
   v34 - card COHERENCE: no white cards on a dark page; every card
   matches the commercial-insurance dark style (translucent + cyan).
   Also: kill residual off-brand teal, red-flag callouts read red,
   team bios reveal over the photo (not over the person below).
   ============================================================ */

/* painboards inside flipped-paper sections -> cyan like the plain-dark ones */
.home-dark .sec-paper .painboard blockquote { background: rgba(255,255,255,0.045); border-color: var(--line-w); border-top-color: rgba(51,204,204,0.55); }
.home-dark .sec-paper .painboard p { color: var(--paper); }
.home-dark .sec-paper .painboard blockquote::before { color: var(--acc); }
.home-dark .sec-paper .painboard footer { color: var(--gray); }
.home-dark .sec-paper .painboard blockquote:hover { border-color: var(--acc); }

/* generic white cards on dark -> dark translucent + cyan */
.home-dark .post-card,
.home-dark .model-card,
.home-dark .qcard,
.home-dark .out-card,
.home-dark .calc-card,
.home-dark .tmarquee .tquote {
  background: rgba(255,255,255,0.04); border-color: var(--line-w); color: var(--paper);
}
.home-dark .post-card strong { color: var(--paper); }
.home-dark .post-card time, .home-dark .post-card span { color: var(--gray); }
.home-dark .post-card:hover { box-shadow: 0 14px 34px rgba(0,0,0,0.35); border-color: var(--acc); }
.home-dark .model-card h3 { color: var(--paper); }
.home-dark .model-card p, .home-dark .model-card li, .home-dark .qcard p, .home-dark .qcard li { color: var(--gray); }
.home-dark .out-card dt { color: var(--gray); }
.home-dark .out-card dd { color: var(--acc); }
.home-dark .out-card.save dd { color: var(--acc-hot); }
.home-dark .calc-note { color: var(--gray); }
.home-dark .calc-in { border-bottom-color: var(--acc); }
.home-dark .calc-in span, .home-dark .calc-in input { color: var(--paper); }
.home-dark .sec-paper .model-tabs { background: rgba(255,255,255,0.05); border-color: var(--line-w); }
.home-dark .mtab { color: var(--gray); }
.home-dark .mtab.active { background: var(--acc); color: var(--ink); }

/* red-flag callout must read as red (was gray) */
.qbad { background: rgba(192,57,43,0.09); border: 1px solid rgba(192,57,43,0.42); }
.qbad strong { color: #C0392B; }
.qgood strong { color: #0F7A63; }

/* team bio: reveal OVER the photo square (not over the person below) */
.team-grid figcaption .bio {
  top: 0; bottom: auto; left: 0; right: 0; margin: 0;
  aspect-ratio: 1 / 1; height: auto; display: flex; align-items: center;
  background: var(--ink-2); border: 1px solid var(--acc); border-radius: 12px; box-shadow: none;
}
@media (hover: none), (max-width: 720px) {
  .team-grid figcaption .bio { position: static; aspect-ratio: auto; display: block; border: none; background: transparent; }
}

/* ============================================================
   v35 - dark conversion for the remaining pages: blog posts (.article
   prose), ROI calculator, FAQs, for-job-seekers, privacy, 404. The
   shared dark layer handles sections/cards; these are the leftovers.
   ============================================================ */

/* long-form article / legal prose */
.home-dark .article a, .home-dark .article-related a, .home-dark .legal a { color: var(--acc); }
.home-dark .article blockquote { border-left-color: var(--acc); color: var(--gray); }
.home-dark .article-meta, .home-dark .article-related { color: var(--gray); }
.home-dark .article-related { border-top-color: var(--line-w); }
.home-dark .article th, .home-dark .article td, .home-dark .article tbody tr:last-child td { border-color: var(--line-w); }

/* ROI / cost calculator */
.home-dark .calc { border-color: var(--line-w); }
.home-dark .calc-out { border-top-color: var(--line-w); }
.home-dark .calc-out > div { border-bottom-color: var(--line-w); }
.home-dark .calc input[type="range"] { accent-color: var(--acc); }
.home-dark .role-pill { background: rgba(255,255,255,0.05); border-color: var(--line-w); color: var(--gray); }
.home-dark .role-pill:hover { border-color: var(--acc); color: var(--paper); }
.home-dark .role-pill[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: var(--ink); }

/* lead-capture card -> distinct translucent card on dark (was solid navy that blends in) */
.home-dark .assess { background: rgba(255,255,255,0.04); border: 1px solid var(--line-w); }

/* ============================================================
   v36 - only TEAM photos stay black & white; every other image is
   full color. Team cards flip on hover: B&W photo (colorizes) rotates
   to reveal the bio on the back.
   ============================================================ */

/* all non-team images: full color (drop the muted/grayscale treatment) */
.hero-bg img, .candids img, .founder-fig img, .post-card img,
.split img, .band img, .bench-strip img { filter: none; }
.candids figure:hover img, .founder-fig:hover img, .post-card:hover img { filter: none; }

/* team flip cards */
.team-grid-flip .tflip { perspective: 900px; }
.team-grid-flip .tflip-in { position: relative; width: 100%; aspect-ratio: 1 / 1; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.team-grid-flip figure:hover .tflip-in { transform: rotateY(180deg); }
.team-grid-flip .tface { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12px; overflow: hidden; }
.team-grid-flip img.tfront { object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.5s ease; }
.team-grid-flip figure:hover img.tfront { filter: none; }
.team-grid-flip .tback { transform: rotateY(180deg); background: var(--ink-2); border: 1px solid var(--acc); display: flex; align-items: center; padding: 1.1rem 1.2rem; }
.team-grid-flip .tback p { color: var(--gray); font-size: 0.92rem; line-height: 1.45; margin: 0; }
/* touch devices: no hover, so show photo then bio stacked (no flip) */
@media (hover: none) {
  .team-grid-flip .tflip-in { aspect-ratio: auto; transform: none !important; transform-style: flat; }
  .team-grid-flip .tface { position: relative; inset: auto; backface-visibility: visible; }
  .team-grid-flip img.tfront { aspect-ratio: 1 / 1; }
  .team-grid-flip .tback { transform: none; background: transparent; border: none; padding: 0.5rem 0 0; }
}

/* ============================================================
   v37 - text-left + image-right feature block (Global Talent + verticals)
   ============================================================ */
.fsplit { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.fs-eyebrow { font-family: var(--d); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc); margin-bottom: 0.7rem; }
.fsplit-copy .sec-h { margin-top: 0; }
.fsplit-copy > p { color: var(--gray); margin-top: 1rem; max-width: 46ch; font-size: 1.08rem; line-height: 1.6; }
.fsplit-copy .checks { margin-top: 1.4rem; }
.fsplit-img img { width: 100%; border-radius: 18px; display: block; object-fit: cover; aspect-ratio: 3 / 2; }
@media (max-width: 820px) { .fsplit { grid-template-columns: 1fr; gap: 1.8rem; } }

.fsplit-copy p.fs-eyebrow { color: var(--acc); }

/* ============================================================
   v39 - Who We Are photo behavior: founder + candids B&W, color on hover.
   Team flip colorizes FIRST, then rotates (delayed rotation).
   ============================================================ */
.founder-fig img { filter: grayscale(1) contrast(1.05); transition: filter 0.4s ease; }
.founder-fig:hover img { filter: none; }
.candids img { filter: grayscale(1) contrast(1.05); transition: filter 0.4s ease; }
.candids figure:hover img { filter: none; }

/* team flip: photo colorizes (0.35s, no delay) THEN the card rotates (delayed 0.35s) */
.team-grid-flip img.tfront { transition: filter 0.35s ease; }
.team-grid-flip .tflip-in { transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.35s; }

/* v40: two stacked feature-splits ("Why companies work with us" on Who We Are) */
.fsplit-h { font-family: var(--d); font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.06; color: var(--paper); margin: 0; }
.feature-stack .fsplit { margin-top: clamp(2.6rem, 6vh, 4.5rem); }

/* v41: feature-swap - two cards swap in place on scroll (desktop); stacked fallback */
.feature-swap .fswap-panel + .fswap-panel { margin-top: clamp(2.6rem, 6vh, 4.5rem); }
.feature-swap.swap-active .fswap { height: 220vh; }
.feature-swap.swap-active .fswap-stage { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.feature-swap.swap-active .fswap-panel { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin-top: 0; opacity: 0; transition: opacity 0.55s ease; pointer-events: none; }
.feature-swap.swap-active .fswap-panel.on { opacity: 1; pointer-events: auto; }

/* v45: case-study link inside the results (bet) card */
.bet-link { margin-top: 1.1rem; }
.bet-link a { font-family: var(--d); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--acc-hot); text-decoration: none; }
.bet-link a:hover { text-decoration: underline; }

/* ============================================================
   v46 - design polish pass (all CSS; each block reverts cleanly)
   ============================================================ */

/* (1) alternating sections: every other CONTENT section gets a whisper of brand
   cyan (option B). The .band class is assigned positionally in main.js so the
   rhythm is a clean tint -> dark -> tint regardless of how sections were tagged. */
.home-dark .band { background: rgba(51, 204, 204, 0.04); }

/* (6) bolder hero stat bar */
.mini-score dd { font-size: clamp(2.3rem, 3.3vw, 3.1rem); letter-spacing: -0.01em; }

/* (5) roles / sectors as chips instead of a bulleted 2-col list */
.home-dark .cols { columns: initial; column-gap: normal; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.home-dark .cols li { break-inside: auto; padding: 0.55rem 1.1rem; border: 1px solid var(--line-w); border-radius: 100px; background: rgba(255,255,255,0.03); color: var(--paper); font-weight: 500; transition: border-color 0.2s ease, background 0.2s ease; }
.home-dark .cols li::before { content: none; }
.home-dark .cols li:hover { border-color: var(--acc); background: rgba(51,204,204,0.07); }

/* (8) cyan underline that draws under section headings on reveal */
.js .sec-h::after { content: ""; display: block; width: 2.6rem; height: 3px; margin-top: 0.8rem; background: var(--acc); transform: scaleX(1); transform-origin: left; border-radius: 2px; }
.js .sec-h.rv::after { transform: scaleX(0); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; }
.js .sec-h.rv.in::after { transform: scaleX(1); }

/* (2) subtle cyan depth-glow behind the final CTA */
.cta { position: relative; overflow: hidden; }
.cta > * { position: relative; z-index: 1; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(55% 75% at 50% 0%, rgba(51, 204, 204, 0.10), transparent 70%); }

/* v47: keep the pinned SELLER panel inside the viewport so its title never clips
   (was ~750px tall on desktop; compact the letters + heading so it fits short screens) */
.js .mfunnel.pin .mf-panel-seller h3 { font-size: clamp(2.2rem, 3.4vw, 3rem); }
.js .mfunnel.pin .mf-panel-seller > p { font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.4; margin-top: 0.5rem; max-width: 46ch; }
.js .mfunnel.pin .mf-panel-seller .seller-letters { margin-top: 0.6rem; }
.js .mfunnel.pin .mf-panel-seller .sl-row { padding-block: 0.2rem; gap: 0.9rem; }
.js .mfunnel.pin .mf-panel-seller .sl-row b { font-size: clamp(1.3rem, 1.9vw, 1.7rem); border-radius: 8px; }
.js .mfunnel.pin .mf-panel-seller .sl-row span { font-size: clamp(0.95rem, 1.3vw, 1.2rem); }

/* v48: consistent scale across all funnel panels (SELLER matched to the others) */
.js .mfunnel.pin .mf-panel h3,
.js .mfunnel.pin .mf-panel-seller h3 { font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; }
.js .mfunnel.pin .mf-panel > p,
.js .mfunnel.pin .mf-panel-seller > p { font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.45; }

/* v51: signature "candidate dot field" behind flagged sections (prototype) */
.has-dots { position: relative; overflow: hidden; }
.has-dots > .wrap { position: relative; z-index: 1; }
.dotfield { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.55; }

/* v52: connective bridge line between a vertical's pain and the solution */
.vert-bridge { font-family: var(--d); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.15; color: var(--paper); max-width: 34ch; margin-top: clamp(2.4rem, 5vh, 3.6rem); }
.vert-bridge .hl-c { color: var(--acc); }

/* ============================================================
   v53 - HARD RULE: no muddy gray text anywhere.
   Dark pages -> all secondary text near-white. Light pages -> dark charcoal.
   Done at the token level so no component can drift back to low-contrast gray.
   ============================================================ */
:root { --gray-ink: #3a3b42; }              /* secondary text on LIGHT pages: dark charcoal, not gray */
.home-dark { --gray: #e9eaef; --gray-ink: #e9eaef; }  /* secondary text on DARK pages: near-white */

/* v54: contact detail links were dark-on-dark; force readable on dark pages */
.home-dark .contact-ways a { color: var(--paper); }
.home-dark .contact-main p a { color: var(--acc); }

/* v57: Global Talent hero = animated global-connection map (talent worldwide, linked) */
.gts-hero .hero-bg { background: var(--ink); }
#global-net { width: 100%; height: 100%; display: block; }

/* v59: US hero photo framed so the faces (right side) sit clear of the left text */
.us-hero .hero-bg img { object-position: 74% 40%; }

/* ============================================================
   v62: Website-review-call batch (Virginia + Brett, 14-Jul)
   ============================================================ */

/* Homepage hero photo: faces in the clear (right) zone, off the left text. Color photo
   (like every other hero), veiled by the SAME heavy uniform navy scrim the interior
   heroes use (manufacturing etc.) so the color reads muted/consistent, not bright. */
.hero .hero-bg img { object-position: 56% 34%; }

/* Post-engagement intro block above the funnel: names the search process, explains it,
   and points a down-arrow into the process so it clearly connects. */
.method-intro { margin-top: 2rem; max-width: 46ch; }
.method-intro-eyebrow {
  font-family: var(--d); font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--acc); margin: 0 0 0.5rem;
}
.method-intro-lead {
  color: var(--paper);
  font-family: var(--d); font-weight: 600;
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  line-height: 1.25; margin: 0;
}
.method-arrow {
  display: block; width: 34px; height: 34px; margin: 1.3rem 0 0;
  border-right: 3px solid var(--acc); border-bottom: 3px solid var(--acc);
  transform: rotate(45deg);
  animation: methodArrow 1.8s ease-in-out infinite;
}
@keyframes methodArrow { 0%,100% { transform: rotate(45deg) translate(0,0); } 50% { transform: rotate(45deg) translate(5px,5px); } }
@media (prefers-reduced-motion: reduce) { .method-arrow { animation: none; } }

/* Results box (the ways we work): bright cyan card with dark-navy text so it stands out
   (Virginia: "it gets lost, make it brighter"). Divider dropped since quotes were removed. */
.home-dark .sec-paper .p-proof { background: var(--acc); border: none; box-shadow: none; }
.p-proof .proof-label { color: var(--acc-deep); }
.sec-paper .p-proof .p-nums { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.sec-paper .p-proof .p-nums b { color: var(--acc-deep); }
.sec-paper .p-proof .p-nums span { color: rgba(15, 26, 43, 0.82); }

/* "Results" eyebrow above the stat block (separates numbers from testimonials) */
.proof-label {
  font-family: var(--d);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acc);
  margin-bottom: 0.9rem;
}

/* Shortlist: 4 candidate cards, each anchored to one of the funnel dots. They pop in
   one after another as you scroll scene 4, then the selected one is highlighted. */
.sl-cluster { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.sl-c {
  position: absolute; transform: translate(-50%, -50%) scale(0.3);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  width: 8.5rem; padding: 0.8rem 0.7rem;
  background: rgba(16, 26, 43, 0.94);
  border: 1px solid rgba(51, 204, 204, 0.35);
  border-radius: 14px; text-align: center;
  opacity: 0; transition: opacity 0.5s ease-out, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.sl-c .sl-av { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(51, 204, 204, 0.55); }
.sl-c .sl-av img { width: 100%; height: 100%; object-fit: cover; filter: none !important; }
.sl-c b { font-family: var(--d); font-weight: 600; font-size: 0.98rem; color: var(--paper); line-height: 1.1; }
.sl-c .sl-pick {
  display: none; font-family: var(--d); font-weight: 600; font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc-deep);
  background: var(--acc); border-radius: 999px; padding: 0.15rem 0.55rem;
}
/* dot anchor positions (match the ring the canvas draws) */
.sl-c0 { left: 76%; top: 66%; }
.sl-c1 { left: 26%; top: 72%; }
.sl-c2 { left: 20%; top: 34%; }
.sl-c3 { left: 68%; top: 26%; }
/* revealed, one at a time (JS adds .on in sequence) */
.sl-c.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* the pick: highlighted; the rest dim */
.sl-c.chosen { transform: translate(-50%, -50%) scale(1.12); border-color: var(--acc); box-shadow: 0 0 0 5px rgba(51,204,204,0.14), 0 18px 44px rgba(0,0,0,0.5); z-index: 4; }
.sl-c.chosen .sl-pick { display: inline-block; }
.sl-c.dim { opacity: 0.32; }
/* desktop, pinned-funnel effect only */
@media (max-width: 860px) { .sl-cluster { display: none; } }

/* ============================================================
   v75: Who We Are rebuild (human-forward, credibility woven in)
   ============================================================ */

.sec-eyebrow {
  font-family: var(--d); font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--acc); margin: 0 0 0.6rem;
}

/* Core values */
.values-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem; margin-top: 2.4rem;
}
.value-card {
  background: rgba(51, 204, 204, 0.05);
  border: 1px solid rgba(51, 204, 204, 0.2);
  border-radius: 16px; padding: 1.6rem 1.5rem;
}
.value-card h3 {
  font-family: var(--d); font-weight: 600; font-size: 1.35rem;
  color: var(--paper); margin: 0 0 0.6rem;
}
.value-card p { color: var(--gray); font-size: 1rem; line-height: 1.55; margin: 0; }

/* Team: bigger cards, visible bio, color photos */
.team-people {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem); margin-top: 2.6rem;
}
.team-people .person { margin: 0; }
.team-people .person img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 16px; filter: none;
}
.team-people .person figcaption { display: block; margin-top: 1rem; }
.team-people .person b {
  display: block; font-family: var(--d); font-weight: 600;
  font-size: 1.25rem; color: var(--paper); line-height: 1.1;
}
.team-people .person .role {
  display: block; color: var(--acc); font-size: 0.9rem;
  font-weight: 600; margin-top: 0.2rem;
}
.team-people .person .bio {
  color: var(--gray); font-size: 0.95rem; line-height: 1.55; margin: 0.7rem 0 0;
}

/* Thin credibility band */
.cred-band { background: var(--ink); padding: clamp(2.2rem, 5vw, 3.4rem) 0; }
.cred-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; text-align: center;
}
.cred-row > div { display: flex; flex-direction: column; gap: 0.35rem; }
.cred-row b {
  font-family: var(--d); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--acc); line-height: 1;
}
.cred-row span { color: var(--gray); font-size: 0.98rem; }
@media (max-width: 720px) { .cred-row { grid-template-columns: 1fr; gap: 1.8rem; } }

/* Candid carousel: horizontal scroll-snap */
/* Auto-scrolling candid marquee (track duplicated for a seamless loop) */
.candid-marquee {
  overflow: hidden; margin-top: 2rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.candid-track {
  display: flex; gap: 1.2rem; width: max-content;
  animation: candidScroll 55s linear infinite;
}
.candid-marquee:hover .candid-track { animation-play-state: paused; }
.candid-track figure { flex: 0 0 clamp(280px, 42vw, 440px); margin: 0; }
.candid-track img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 16px; filter: none;
}
.candid-track figcaption { margin-top: 0.7rem; color: var(--gray); font-size: 0.95rem; }
@keyframes candidScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .candid-marquee { overflow-x: auto; }
  .candid-track { animation: none; }
}

/* Founder story at the bottom, de-emphasized, photo in color */
.founder-bottom .founder-fig img { filter: none; }

/* v76: "We live the SELLER framework" (replaces the carried-a-quota band) */
.seller-us-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4.5rem); margin-top: 3rem;
}
@media (max-width: 720px) { .seller-us-grid { grid-template-columns: 1fr; } }
.su-item { display: flex; gap: 1.5rem; align-items: flex-start; }
.su-item > b {
  flex: none; width: 4.4rem; height: 4.4rem; border-radius: 16px;
  display: grid; place-items: center;
  font-family: var(--d); font-weight: 700; font-size: 2.4rem; color: var(--acc);
  background: rgba(51, 204, 204, 0.08); border: 1px solid rgba(51, 204, 204, 0.28);
}
.su-item h3 { font-family: var(--d); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 1.9rem); color: var(--paper); margin: 0.2rem 0 0.5rem; }
.su-item p { color: var(--gray); font-size: clamp(1.08rem, 1.6vw, 1.25rem); line-height: 1.6; margin: 0; max-width: 42ch; }

/* v82: Success stories on dark - case-block text was ink-on-ink (invisible). */
.home-dark .case-kick { color: var(--acc); }
.home-dark .case-block h2 { color: var(--paper); }
.home-dark .case-block p { color: var(--gray); }
.home-dark .case-block + .case-block { border-top-color: var(--line-w); }
.home-dark .case-facts { border-top-color: var(--line-w); }
.home-dark .case-facts dd { color: var(--acc); }

/* v82: hero framing for the new vertical photos */
.gts-hero .hero-bg img { object-position: 72% 45%; }   /* Zoom grid on the laptop screen */
.page-head.has-photo .hero-bg img { object-position: 60% 35%; }
.gts-hero .hero-bg img, .us-hero .hero-bg img { object-position: 72% 42%; }

/* v87: pull-quote band (copy-test variant) - the client-voiced time-back proof */
.pullquote-band { padding: clamp(3rem, 7vw, 5rem) 0; background: rgba(51, 204, 204, 0.04); }
.pullquote-band blockquote { margin: 0; max-width: 54rem; }
.pullquote-band p {
  font-family: var(--d); font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.15;
  color: var(--paper); margin: 0;
}
.pullquote-band footer { margin-top: 1rem; color: var(--acc); font-size: 1rem; font-weight: 600; }