/* ============================================
   Earned Media — pitch-deck-aligned design system
   ============================================ */

:root {
  /* Brand colors — Earned Media palette
     Teal #20A89E · Orange #F0582D · Sky blue #1DAAE0 · Amber #FBAF42 */
  --navy: #0A2733;          /* deep teal-navy (grounding dark, brand-aligned) */
  --navy-2: #133844;
  --navy-3: #1D4A57;
  --cream: #F8F7F4;
  --cream-2: #EFEDE7;
  --white: #FFFFFF;
  --cyan: #1DAAE0;          /* sky blue — bright accent on dark */
  --cyan-deep: #20A89E;     /* teal — primary brand, accent on light */
  --coral: #F0582D;         /* orange — energy / CTA */
  --coral-soft: #FBD9CB;
  --sun: #FBAF42;           /* amber — tertiary */
  --ink: #0A2733;
  --ink-soft: #3E5762;
  --ink-mute: #7A8B92;
  --line: rgba(10, 39, 51, 0.10);
  --line-strong: rgba(10, 39, 51, 0.22);
  --on-dark: #FFFFFF;
  --on-dark-mute: rgba(255, 255, 255, 0.70);

  /* Type */
  --display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --gutter: clamp(20px, 4vw, 56px);
  --max: 1280px;
  --section: clamp(80px, 10vw, 140px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; }

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(48px, 6.5vw, 88px); letter-spacing: -0.03em; }
h2 { font-size: clamp(36px, 4.4vw, 60px); }
h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; }
h4 { font-size: 18px; line-height: 1.25; font-weight: 700; }
p { margin: 0 0 1em 0; text-wrap: pretty; }
.lede { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.5; color: var(--ink-soft); }
a { color: inherit; text-decoration: none; }
.cyan { color: var(--cyan); }
.coral { color: var(--coral); }
.sun { color: var(--sun); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 28px 0;
  display: inline-block;
  font-weight: 500;
}
.eyebrow.on-light { color: var(--cyan-deep); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream);
  transition: background 0.3s, box-shadow 0.3s;
}
.site-header.is-scrolled {
  background: rgba(241, 236, 227, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 96px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo img { height: 44px; width: auto; display: block; }
.nav-links {
  display: flex; gap: 36px; align-items: center; list-style: none; margin: 0; padding: 0; font-size: 15px; font-weight: 500;
}
.nav-links a { color: var(--ink); transition: color 0.2s; }
.nav-links a:hover, .nav-links a.is-active { color: var(--cyan-deep); }

/* Nav dropdown */
.nav-links li.has-sub { position: relative; }
.nav-links li.has-sub > a::after {
  content: ""; display: inline-block; margin-left: 6px;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.nav-links li.has-sub:hover > a::after,
.nav-links li.has-sub.is-open > a::after { transform: translateY(0) rotate(225deg); }
.nav-sub {
  position: absolute; top: calc(100% + 8px); left: -16px;
  min-width: 240px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  list-style: none; margin: 0;
  box-shadow: 0 12px 32px rgba(10, 22, 40, 0.08), 0 2px 8px rgba(10, 22, 40, 0.04);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  display: flex; flex-direction: column; gap: 2px;
  z-index: 60;
}
.nav-links li.has-sub:hover .nav-sub,
.nav-links li.has-sub:focus-within .nav-sub,
.nav-links li.has-sub.is-open .nav-sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-sub li { padding: 0; }
.nav-sub a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: 8px;
  font-size: 14px; font-weight: 600;
  color: var(--ink);
}
.nav-sub a:hover { background: var(--cream-2); color: var(--cyan-deep); }
.nav-sub a .sub-desc {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 400;
}
.nav-sub a:hover .sub-desc { color: var(--ink-mute); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  background: var(--navy); color: var(--white) !important;
  font-size: 14px; font-weight: 600;
  transition: background 0.2s, transform 0.2s;
}
.nav-cta:hover { background: var(--coral); transform: translateY(-1px); }
.nav-toggle { display: none; background: none; border: none; font-family: var(--mono); font-size: 13px; cursor: pointer; color: var(--ink); }
@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-links.is-open {
    display: flex; position: absolute; top: 80px; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--cream); padding: 8px 0 16px;
    box-shadow: 0 1px 0 var(--line);
  }
  .nav-links.is-open li { padding: 14px var(--gutter); border-top: 1px solid var(--line); width: 100%; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px; border-radius: 999px;
  font-size: 15px; font-weight: 600; cursor: pointer; border: none;
  transition: transform 0.2s, background 0.2s, color 0.2s;
  font-family: var(--sans);
}
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--coral); transform: translateY(-1px); }
.btn-cyan { background: var(--cyan); color: var(--navy); }
.btn-cyan:hover { background: var(--cyan-deep); color: var(--white); transform: translateY(-1px); }
.btn-coral { background: var(--coral); color: var(--white); }
.btn-coral:hover { background: var(--navy); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--white); }
.btn-ghost-light { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.5); }
.btn-ghost-light:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn .arrow { transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Hero — DARK NAVY (matches deck cover) ---------- */
.hero {
  background: var(--navy);
  color: var(--white);
  padding: clamp(80px, 10vw, 140px) 0 clamp(100px, 12vw, 160px);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -20%; right: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--cyan) 0%, transparent 60%);
  opacity: 0.18;
  filter: blur(40px);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: var(--white); max-width: 18ch; margin-bottom: 32px; }
.hero h1 .accent { color: var(--cyan); }
.hero .lede { color: var(--on-dark-mute); max-width: 56ch; margin-bottom: 40px; font-size: clamp(18px, 1.4vw, 22px); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .pitch-tag {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em;
  color: var(--cyan); text-transform: uppercase; margin-bottom: 24px; display: block;
}
.hero-foot {
  margin-top: clamp(80px, 10vw, 120px);
  display: flex; justify-content: space-between; align-items: end;
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.15);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--on-dark-mute);
}

/* ---------- Page header (inner pages) ---------- */
.page-head {
  background: var(--navy); color: var(--white);
  padding: clamp(80px, 10vw, 130px) 0 clamp(70px, 9vw, 110px);
  position: relative; overflow: hidden;
}
.page-head::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px; pointer-events: none;
}
.page-head .wrap { position: relative; z-index: 1; }
.page-head h1 { color: var(--white); max-width: 28ch; margin-bottom: 24px; text-wrap: balance; }
.page-head h1 .accent { color: var(--cyan); }
.page-head .lede { color: var(--on-dark-mute); max-width: 60ch; }
.page-head .eyebrow { color: var(--cyan); }

/* ---------- Sections ---------- */
section { padding: var(--section) 0; }
.section-head {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px;
  margin-bottom: clamp(48px, 6vw, 80px); align-items: end;
}
.section-head h2 { max-width: 16ch; }
.section-head .meta { color: var(--ink-soft); max-width: 52ch; }
@media (max-width: 880px) { .section-head { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Stats strip (cyan + coral nums on cream) ---------- */
.stats-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stats-strip .stat {
  padding: 36px 32px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.stats-strip .stat:last-child { border-right: none; }
.stats-strip .num {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(36px, 4vw, 56px); letter-spacing: -0.03em; line-height: 1;
}
.stats-strip .num.cyan { color: var(--cyan-deep); }
.stats-strip .num.coral { color: var(--coral); }
.stats-strip .label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
}
@media (max-width: 720px) {
  .stats-strip { grid-template-columns: 1fr; }
  .stats-strip .stat { border-right: none; border-bottom: 1px solid var(--line); }
  .stats-strip .stat:last-child { border-bottom: none; }
}

/* ---------- Pillars (5-card row matches deck slide 8) ---------- */
.pillars {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.pillar {
  background: var(--navy); color: var(--white);
  border-radius: 8px; padding: 24px 20px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; transition: transform 0.2s, background 0.2s;
}
.pillar:hover { transform: translateY(-4px); }
.pillar.active { background: var(--cyan); color: var(--navy); }
.pillar .num-badge {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--cyan); color: var(--navy);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 13px; font-weight: 800;
}
.pillar.active .num-badge { background: var(--navy); color: var(--cyan); }
.pillar h4 { color: inherit; font-size: 18px; margin: 0; }
.pillar .pct {
  font-family: var(--display); font-size: 22px; font-weight: 800;
  color: var(--cyan); letter-spacing: -0.02em;
}
.pillar.active .pct { color: var(--navy); }
.pillar .role {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--on-dark-mute);
}
.pillar.active .role { color: var(--navy); opacity: 0.7; }
.pillar p { font-size: 13px; line-height: 1.45; color: var(--on-dark-mute); margin: 0; }
.pillar.active p { color: var(--navy); opacity: 0.85; }
@media (max-width: 980px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; } }

/* ---------- Two-card split (matches deck slide 7) ---------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.split .card {
  background: var(--white); border-radius: 12px; padding: 36px 32px;
  border: 1px solid var(--line);
}
.split .card.dark { background: var(--navy); color: var(--white); border-color: transparent; }
.split .card.dark .micro { color: var(--cyan); }
.split .card.dark h3 { color: var(--white); }
.split .card.dark .footer-quote { color: var(--cyan); font-style: italic; font-size: 14px; }
.split .micro {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cyan-deep); margin-bottom: 14px; display: block;
}
.split .card h3 { margin-bottom: 18px; max-width: 20ch; }
.split .card .big-stat {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(56px, 8vw, 96px); letter-spacing: -0.03em; line-height: 1;
  color: var(--cyan); display: inline-block; vertical-align: middle; margin-right: 16px;
}
.split .data-row {
  display: grid; grid-template-columns: 100px 1fr auto; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; align-items: center;
}
.split .card.dark .data-row { border-bottom-color: rgba(255,255,255,0.12); }
.split .data-row strong { font-weight: 700; }
.split .data-row .pill {
  font-family: var(--mono); font-size: 11px; padding: 4px 10px; border-radius: 999px;
  background: rgba(232,80,31,0.1); color: var(--coral);
}
.split ol { padding: 0; margin: 16px 0 0; list-style: none; counter-reset: dr; }
.split ol li {
  counter-increment: dr; padding: 12px 0 12px 32px; position: relative;
  font-size: 14px; line-height: 1.5;
}
.split ol li::before {
  content: counter(dr, decimal-leading-zero);
  position: absolute; left: 0; top: 12px;
  font-family: var(--mono); font-size: 11px; color: var(--coral); font-weight: 600;
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

/* ---------- Team list (matches deck slide 4) ---------- */
.team-block {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: center;
}
.team-block .big {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.04em;
  font-size: clamp(80px, 12vw, 160px); line-height: 1; color: var(--navy);
}
.team-block .big .plus { color: var(--cyan); }
.team-block .desc { max-width: 32ch; color: var(--ink-soft); margin-top: 16px; }
.team-list { display: flex; flex-direction: column; }
.team-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--line); align-items: center;
}
.team-row:last-child { border-bottom: none; }
.team-avatar {
  width: 48px; height: 48px; border-radius: 6px;
  background: var(--navy); color: var(--white);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0;
}
.team-avatar.cyan { background: var(--cyan); color: var(--navy); }
.team-avatar.coral { background: var(--coral); color: var(--white); }
.team-row .name { font-weight: 700; font-size: 15px; }
.team-row .role { color: var(--ink-mute); font-size: 14px; }
.team-row .tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cyan-deep); font-weight: 500;
}
@media (max-width: 880px) {
  .team-block { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Logo grid (matches deck slide 3) ---------- */
.logo-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--white);
}
.logo-cell {
  padding: 28px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px; min-height: 140px; justify-content: space-between;
}
.logo-cell:nth-child(4n) { border-right: none; }
.logo-cell:nth-last-child(-n+4) { border-bottom: none; }
.logo-cell .logo-mark {
  font-family: var(--display); font-weight: 700; font-size: 22px;
  color: var(--ink); letter-spacing: -0.02em;
}
.logo-cell .client-logo {
  height: 48px;
  width: auto;
  max-width: 225px;
  object-fit: contain;
  object-position: left center;
  align-self: flex-start;
  filter: grayscale(1) contrast(1.1);
  opacity: 0.78;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.logo-cell:hover .client-logo {
  filter: grayscale(0);
  opacity: 1;
}
.logo-cell .meta {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
@media (max-width: 880px) {
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-cell { min-width: 0; border-right: 1px solid var(--line); }
  .logo-cell:nth-child(2n) { border-right: none; }
}

/* Mobile: switch to horizontal scroll so logos don't clip and the
   reader gets a clear "swipe" affordance with ~1.5 cards visible. */
@media (max-width: 720px) {
  .logo-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .logo-grid::-webkit-scrollbar { display: none; }
  .logo-cell {
    flex: 0 0 62%;
    min-width: 0;
    scroll-snap-align: start;
    border-right: 1px solid var(--line);
    border-bottom: none;
  }
  .logo-cell:nth-child(4n) { border-right: 1px solid var(--line); }
  .logo-cell:last-child { border-right: none; }
  .logo-cell .client-logo { max-width: 100%; }
}

/* ---------- Content service · client proof strip ---------- */
.content-proof-head {
  display: flex; align-items: end; justify-content: space-between; gap: 32px;
  margin-bottom: 28px; flex-wrap: wrap;
}
.content-proof-title {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; max-width: 22ch;
  margin: 8px 0 0; color: var(--ink);
}
.content-proof-cta { white-space: nowrap; }
.content-proof-strip {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--white);
}
.content-proof-strip .cps-cell {
  padding: 28px 22px; border-right: 1px solid var(--line);
  display: grid; place-items: center; min-height: 110px;
}
.content-proof-strip .cps-cell:last-child { border-right: none; }
.content-proof-strip .cps-cell img {
  height: 40px; width: auto; max-width: 100%; object-fit: contain;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.72;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.content-proof-strip .cps-cell:hover img {
  filter: grayscale(0); opacity: 1;
}
@media (max-width: 980px) {
  .content-proof-strip { grid-template-columns: repeat(3, 1fr); }
  .content-proof-strip .cps-cell { border-bottom: 1px solid var(--line); }
  .content-proof-strip .cps-cell:nth-child(3n) { border-right: none; }
  .content-proof-strip .cps-cell:nth-last-child(-n+3) { border-bottom: none; }
}
@media (max-width: 560px) {
  .content-proof-strip { grid-template-columns: repeat(2, 1fr); }
  .content-proof-strip .cps-cell { border-right: 1px solid var(--line); }
  .content-proof-strip .cps-cell:nth-child(2n) { border-right: none; }
  .content-proof-strip .cps-cell:nth-last-child(-n+2) { border-bottom: none; }
  .content-proof-cta { width: 100%; text-align: center; }
}

/* ---------- Bar chart (matches deck slide 5) ---------- */
.bars { display: flex; flex-direction: column; gap: 18px; }
.bar-row .bar-label {
  display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px;
}
.bar-row .bar-label strong { font-weight: 700; }
.bar-row .bar-label .vol { font-family: var(--mono); color: var(--ink-mute); font-size: 11px; }
.bar { display: flex; height: 24px; border-radius: 4px; overflow: hidden; background: var(--cream-2); }
.bar .seg { display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--white); }
.bar .seg.cyan { background: var(--cyan); color: var(--navy); }
.bar .seg.navy { background: var(--navy); }
.bar .seg.coral { background: var(--coral); }

/* ---------- CTA banner ---------- */
.cta {
  background: var(--navy); color: var(--white);
  border-radius: 16px; padding: clamp(60px, 8vw, 100px) clamp(32px, 5vw, 80px);
  text-align: center; position: relative; overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: var(--white); max-width: 18ch; margin: 0 auto 20px; }
.cta h2 .accent { color: var(--cyan); }
.cta p { color: var(--on-dark-mute); max-width: 50ch; margin: 0 auto 32px; font-size: 18px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy); color: var(--white);
  padding: clamp(80px, 10vw, 120px) 0 32px;
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px; }
.footer-grid h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cyan); margin: 0 0 20px; font-weight: 500;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid ul li { margin-bottom: 12px; }
.footer-grid a { color: var(--white); transition: color 0.2s; opacity: 0.85; }
.footer-grid a:hover { color: var(--cyan); opacity: 1; }
.footer-brand { max-width: 32ch; }
.footer-brand img { height: 32px; filter: brightness(0) invert(1); margin-bottom: 20px; }
.footer-brand .footer-tag { font-size: 16px; line-height: 1.5; opacity: 0.85; margin-bottom: 16px; }
.footer-brand .small { font-size: 13px; opacity: 0.6; }
.footer-bottom {
  display: flex; justify-content: space-between; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--on-dark-mute);
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 8px; max-width: 820px; margin: 0 auto; }
.faq details {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 8px; padding: 22px 28px; cursor: pointer;
}
.faq summary {
  list-style: none; font-weight: 600; font-size: 17px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--cyan-deep); width: 24px; text-align: center; transition: transform 0.2s; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 16px 0 0; color: var(--ink-soft); font-size: 15px; }

/* ---------- Form ---------- */
.form { display: grid; gap: 16px; }
.form label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--ink-mute);
}
.form input, .form textarea, .form select {
  padding: 14px 16px; border: 1px solid var(--line-strong);
  background: var(--white); font-family: var(--sans);
  font-size: 16px; color: var(--ink); border-radius: 6px;
  transition: border-color 0.2s;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none; border-color: var(--navy);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .form-row { grid-template-columns: 1fr; } }
.form-success {
  padding: 22px; background: var(--white); border-left: 3px solid var(--cyan);
  border-radius: 6px; display: none;
}
.form-success.is-visible { display: block; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s, transform 0.7s; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Service rows (alternating) ---------- */
.service-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: start; padding: 80px 0; border-bottom: 1px solid var(--line);
}
.service-row:last-of-type { border-bottom: none; }
.service-row.reverse > div:first-child { order: 2; }
/* Sticky media column — photo/scorecard sticks while text scrolls past */
.service-row > .photo,
.service-row > .scorecard {
  position: sticky;
  top: calc(96px + 32px); /* header height + breathing room */
}
.service-row .img {
  aspect-ratio: 4 / 3; background: var(--navy); border-radius: 12px;
  position: relative; overflow: hidden;
  display: grid; place-items: center;
}
.service-row .img::before {
  content: attr(data-placeholder);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.35); text-transform: uppercase;
}
.service-row .img.cyan { background: var(--cyan); }
.service-row .img.coral { background: var(--coral); }
.service-row h2 { margin-bottom: 20px; max-width: 16ch; }
.service-row .lede { margin-bottom: 18px; }
@media (max-width: 880px) {
  .service-row { grid-template-columns: 1fr; gap: 32px; padding: 56px 0; }
  .service-row.reverse > div:first-child { order: 0; }
  .service-row > .photo,
  .service-row > .scorecard { position: static; top: auto; }
}

/* ---------- Two-column layout ---------- */
.two-col {
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: start;
}
.two-col h2 { margin-bottom: 24px; }
.two-col .prose p { margin-bottom: 18px; color: var(--ink-soft); font-size: 16px; line-height: 1.65; }
.two-col .prose p:last-child { margin-bottom: 0; }
@media (max-width: 880px) { .two-col { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Case grid (deck slide 3 styled) ---------- */
.cases {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px;
}
.case {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px; background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; transition: transform 0.2s, border-color 0.2s;
  text-decoration: none; color: inherit;
}
.case:hover { transform: translateY(-4px); border-color: var(--cyan); }
.case-1 { grid-column: span 7; }
.case-2 { grid-column: span 5; }
.case-3 { grid-column: span 6; }
.case-4 { grid-column: span 6; }
.case-img {
  aspect-ratio: 16 / 9; background: var(--navy); border-radius: 8px;
  display: grid; place-items: center; overflow: hidden;
}
.case-img::before {
  content: attr(data-placeholder);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.4); text-transform: uppercase;
}
.case-3 .case-img, .case-4 .case-img { aspect-ratio: 4 / 3; }
.case-3 .case-img { background: var(--cyan); }
.case-3 .case-img::before { color: rgba(10,39,51,0.5); }
.case-4 .case-img { background: var(--coral); }
.case-meta {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.case-meta .tags { display: flex; gap: 6px; }
.case-meta .tags span {
  padding: 3px 10px; border-radius: 999px;
  background: var(--cream); color: var(--cyan-deep);
  letter-spacing: 0.1em; font-size: 10px;
}
.case h3 { font-size: 22px; line-height: 1.25; margin: 0; max-width: 28ch; }
@media (max-width: 880px) {
  .cases { grid-template-columns: 1fr; }
  .case-1, .case-2, .case-3, .case-4 { grid-column: span 1; }
}

/* ---------- Approach / steps ---------- */
.approach {
  background: var(--cream-2); padding: var(--section) 0;
}
.steps {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  background: var(--white); border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
}
.step {
  padding: 32px 28px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
}
.step:last-child { border-right: none; }
.step-num {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
  color: var(--cyan-deep); font-weight: 500;
}
.step h4 { font-size: 17px; margin: 0; }
.step p { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
@media (max-width: 980px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .step:nth-child(2n) { border-right: none; }
  .step:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
  .step { border-right: none; }
}

/* ---------- Article list ---------- */
.article-list {
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-top: 1px solid var(--line);
}
.article-row {
  display: grid; grid-template-columns: 100px 1fr auto;
  gap: 32px; align-items: baseline; padding: 28px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: padding-left 0.2s;
}
.article-row:hover { padding-left: 12px; }
.article-row .date {
  font-family: var(--mono); font-size: 12px; color: var(--cyan-deep);
  letter-spacing: 0.12em; font-weight: 500;
}
.article-row h3 { font-size: clamp(20px, 2vw, 26px); margin: 0; }
.article-row p { color: var(--ink-soft); margin: 6px 0 0; font-size: 14px; }
.article-row .read {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); white-space: nowrap;
}
.article-row:hover .read { color: var(--coral); }
@media (max-width: 720px) {
  .article-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
}

/* ---------- Marquee ---------- */
.marquee {
  background: var(--navy); color: var(--white); overflow: hidden;
  padding: 18px 0; border-block: 1px solid rgba(255,255,255,0.1);
}
.marquee-track {
  display: flex; gap: 48px; white-space: nowrap;
  animation: marquee 28s linear infinite;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--on-dark-mute);
}
.marquee-track .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); margin: 0 24px; vertical-align: middle;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- CTA strip ---------- */
.cta-strip {
  background: var(--navy); color: var(--white); text-align: center;
  padding: clamp(80px, 10vw, 120px) 0;
}
.cta-strip h2 { color: var(--white); margin-bottom: 20px; max-width: 22ch; margin-inline: auto; }
.cta-strip .lede { color: var(--on-dark-mute); margin-bottom: 32px; max-width: 50ch; margin-inline: auto; }

/* ---------- Photo placeholders ---------- */
.photo {
  position: relative; overflow: hidden; border-radius: 12px;
  background: var(--navy); display: grid; place-items: center;
  aspect-ratio: 4 / 3;
}
.photo::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.photo::after {
  content: attr(data-caption);
  position: relative;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.45); text-transform: uppercase;
  text-align: center; padding: 0 24px;
}
.photo > img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.photo:has(> img)::before,
.photo:has(> img)::after { display: none; }
.photo.cyan { background: var(--cyan); }
.photo.cyan::after { color: rgba(10,22,40,0.55); }
.photo.cream { background: var(--cream-2); }
.photo.cream::after { color: rgba(10,22,40,0.45); }
.photo.tall { aspect-ratio: 3 / 4; }
.photo.wide { aspect-ratio: 16 / 9; }
.photo.square { aspect-ratio: 1; }

/* ---------- Testimonial ---------- */
.testimonial {
  background: var(--white); border-radius: 16px;
  padding: clamp(40px, 5vw, 72px); border: 1px solid var(--line);
}
.testimonial blockquote {
  margin: 0 0 32px; font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 32px); line-height: 1.35;
  font-weight: 600; letter-spacing: -0.02em; max-width: 28ch;
  text-wrap: balance;
}
.testimonial blockquote::before {
  content: '"'; font-size: 1.2em; color: var(--cyan); margin-right: 4px;
}
.testimonial .attrib {
  display: flex; gap: 16px; align-items: center;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.testimonial .attrib-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--cyan); color: var(--navy);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 14px;
}
.testimonial .attrib-text strong { display: block; font-size: 15px; }
.testimonial .attrib-text span {
  display: block; font-size: 13px; color: var(--ink-mute);
}

.subquotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.subquote {
  background: var(--cream-2); border-left: 2px solid var(--cyan);
  padding: 24px; border-radius: 4px; font-size: 14px; line-height: 1.5;
  color: var(--ink-soft); font-style: italic;
}
.subquote::before { content: '"'; color: var(--cyan); font-weight: 700; font-style: normal; margin-right: 2px; }
@media (max-width: 880px) { .subquotes { grid-template-columns: 1fr; } }

/* ---------- Dual Engine cards ---------- */
.dual {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.dual .engine {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; padding: 36px 32px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative; overflow: hidden;
}
.dual .engine.dark { background: var(--navy); color: var(--white); border-color: transparent; }
.dual .engine .badge {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cyan-deep);
}
.dual .engine.dark .badge { color: var(--cyan); }
.dual .engine h3 { font-size: 26px; max-width: 18ch; }
.dual .engine.dark h3 { color: var(--white); }
.dual .engine p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; margin: 0; }
.dual .engine.dark p { color: rgba(255,255,255,0.78); }
.dual .engine a {
  margin-top: auto; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cyan-deep); font-weight: 600;
  display: inline-flex; gap: 8px; align-items: center;
}
.dual .engine.dark a { color: var(--cyan); }
@media (max-width: 880px) { .dual { grid-template-columns: 1fr; } }

/* ---------- Service grid (6-card) ---------- */
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.svc-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
  text-decoration: none; color: inherit;
  transition: transform 0.2s, border-color 0.2s;
  position: relative;
}
.svc-card:hover { transform: translateY(-4px); border-color: var(--cyan); }
.svc-card .num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--cyan); color: var(--navy);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 13px;
  margin-bottom: 4px;
}
.svc-card h3 { font-size: 22px; line-height: 1.2; margin: 0; }
.svc-card p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.svc-card .more {
  margin-top: auto; padding-top: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cyan-deep); font-weight: 600;
}
.svc-card .arrow { transition: transform 0.2s; display: inline-block; }
.svc-card:hover .arrow { transform: translateX(4px); }
@media (max-width: 980px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---------- Citation chain diagram ---------- */
.chain {
  display: flex; align-items: stretch; gap: 12px;
  background: var(--cream-2); padding: 32px; border-radius: 12px;
  flex-wrap: wrap;
}
.chain .node {
  flex: 1; min-width: 180px;
  background: var(--white); border-radius: 8px; padding: 20px 22px;
  border: 1px solid var(--line);
}
.chain .node .label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--cyan-deep); text-transform: uppercase; font-weight: 600; margin-bottom: 8px;
}
.chain .node strong { display: block; font-size: 17px; line-height: 1.25; }
.chain .arrow-node {
  flex: 0 0 auto; align-self: center; padding: 0 4px;
  font-family: var(--mono); font-size: 22px; color: var(--cyan-deep);
}
@media (max-width: 720px) {
  .chain { flex-direction: column; }
  .chain .arrow-node { transform: rotate(90deg); padding: 4px 0; }
}

/* ---------- EMintel Autonomous Workspace diagram ---------- */
.aw {
  position: relative;
  background: radial-gradient(ellipse at 50% 30%, #16384a 0%, var(--navy) 55%, #061821 100%);
  padding: clamp(36px, 6vw, 72px) clamp(24px, 4vw, 56px);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.5);
  border: 1px solid rgba(29,170,224,0.18);
}
.aw::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(29,170,224,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,170,224,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}
.aw-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
.aw-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: stretch;
}
.aw-col { display: flex; flex-direction: column; gap: 14px; }
.aw-col-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--cyan);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 10px;
}
.aw-col-label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(29,170,224,0.4), transparent);
}
.aw-node {
  background: rgba(11, 32, 44, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(29,170,224,0.22);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex; gap: 14px; align-items: flex-start;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.aw-node:hover {
  border-color: rgba(29,170,224,0.6);
  box-shadow: 0 0 32px -8px rgba(29,170,224,0.5);
  transform: translateX(2px);
}
.aw-col.aw-out .aw-node:hover { transform: translateX(-2px); }
.aw-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(29,170,224,0.18), rgba(32,168,158,0.12));
  border: 1px solid rgba(29,170,224,0.3);
  display: grid; place-items: center;
  color: var(--cyan);
}
.aw-icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.aw-node-title {
  font-size: 13px; font-weight: 600; color: var(--white);
  letter-spacing: -0.005em; line-height: 1.3;
}
.aw-node-desc {
  font-size: 12px; color: var(--on-dark-mute);
  line-height: 1.5; margin-top: 4px;
}

/* Center engine */
.aw-engine {
  align-self: center;
  position: relative;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(29,170,224,0.10), rgba(32,168,158,0.04));
  border: 1px solid rgba(29,170,224,0.35);
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow:
    0 0 0 1px rgba(29,170,224,0.1) inset,
    0 0 60px -10px rgba(29,170,224,0.35),
    0 24px 60px -20px rgba(0,0,0,0.55);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s ease;
}
.aw-engine:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(29,170,224,0.25) inset,
    0 0 80px -8px rgba(29,170,224,0.55),
    0 30px 70px -20px rgba(0,0,0,0.6);
}
.aw-engine-head {
  text-align: center;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(29,170,224,0.25);
  margin-bottom: 4px;
}
.aw-engine-head .brand {
  font-family: var(--display); font-weight: 800; font-size: 22px;
  letter-spacing: -0.02em; color: var(--white);
}
.aw-engine-head .brand .dot { color: var(--cyan); }
.aw-engine-head .tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--cyan);
  margin-top: 6px; opacity: 0.85;
}
.aw-layer {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(29,170,224,0.18);
  border-radius: 8px;
  padding: 12px 14px;
  position: relative;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.aw-layer::before {
  content: attr(data-layer);
  position: absolute; top: -8px; left: 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cyan);
  background: var(--navy);
  padding: 1px 8px; border-radius: 4px;
  border: 1px solid rgba(29,170,224,0.3);
}
.aw-engine:hover .aw-layer {
  background: rgba(29,170,224,0.08);
  border-color: rgba(29,170,224,0.4);
}
.aw-layer-title {
  font-size: 13px; font-weight: 600; color: var(--white);
  line-height: 1.3;
}
.aw-layer-desc {
  font-size: 11.5px; color: var(--on-dark-mute);
  line-height: 1.5; margin-top: 4px;
  max-height: 0; opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
}
.aw-engine:hover .aw-layer-desc {
  max-height: 80px; opacity: 1; margin-top: 6px;
}
.aw-engine-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px; padding-top: 12px;
  border-top: 1px dashed rgba(29,170,224,0.25);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark-mute);
}
.aw-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(29,170,224,0.6);
  animation: awPulse 1.8s ease-in-out infinite;
}
@keyframes awPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(29,170,224,0.6); }
  50% { box-shadow: 0 0 0 6px rgba(29,170,224,0); }
}
.aw-flow {
  fill: none;
  stroke: url(#awGrad);
  stroke-width: 1.5;
  opacity: 0.55;
}
.aw-flow-anim {
  fill: var(--cyan);
}

@media (max-width: 880px) {
  .aw-grid { grid-template-columns: 1fr; gap: 28px; }
  .aw-engine { order: 2; }
  .aw-col.aw-out { order: 3; }
  .aw-svg { display: none; }
  .aw-engine .aw-layer-desc { max-height: 80px; opacity: 1; margin-top: 6px; }
}

/* ---------- Scorecard / data table ---------- */
.scorecard {
  background: var(--white); border-radius: 12px; padding: 32px;
  border: 1px solid var(--line);
}
.scorecard h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cyan-deep); margin-bottom: 20px; font-weight: 500;
}
.scorecard .sc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.sc-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.sc-row:nth-last-child(-n+2) { border-bottom: none; }
.sc-row .name { font-size: 14px; }
.sc-row .val {
  font-family: var(--mono); font-size: 16px; font-weight: 600;
  color: var(--cyan-deep);
}
.sc-row .val.high { color: var(--cyan-deep); }
.scorecard .avg {
  margin-top: 20px; padding: 16px; background: var(--navy); color: var(--white);
  border-radius: 8px; display: flex; justify-content: space-between; align-items: baseline;
}
.scorecard .avg .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.scorecard .avg .num {
  font-family: var(--display); font-weight: 800; font-size: 28px; color: var(--cyan);
}
@media (max-width: 600px) { .scorecard .sc-grid { grid-template-columns: 1fr; } }

/* ---------- Mega stat (page hero stat) ---------- */
.mega-stat {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.mega-stat .block {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: clamp(40px, 5vw, 64px); position: relative;
}
.mega-stat .block.dark { background: var(--navy); color: var(--white); border-color: transparent; }
.mega-stat .label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cyan-deep); margin-bottom: 16px; display: block;
}
.mega-stat .block.dark .label { color: var(--cyan); }
.mega-stat .num {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(64px, 9vw, 120px); letter-spacing: -0.04em; line-height: 1;
  color: var(--cyan-deep); display: block; margin-bottom: 16px;
}
.mega-stat .block.dark .num { color: var(--cyan); }
.mega-stat .block p { font-size: 16px; line-height: 1.5; color: var(--ink-soft); margin: 0; max-width: 32ch; }
.mega-stat .block.dark p { color: rgba(255,255,255,0.8); }
@media (max-width: 880px) { .mega-stat { grid-template-columns: 1fr; } }

/* ---------- SoM bars ---------- */
.som-bars { display: flex; flex-direction: column; gap: 16px; }
.som-bars .row { display: grid; grid-template-columns: 200px 1fr 60px; gap: 16px; align-items: center; font-size: 14px; }
.som-bars .name { font-weight: 600; }
.som-bars .track { background: var(--navy-3); height: 28px; border-radius: 4px; overflow: hidden; }
.som-bars .fill {
  height: 100%; background: var(--cyan); display: flex; align-items: center;
  padding-left: 12px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--navy);
  transition: width 1s ease-out;
}
.som-bars .fill.muted { background: rgba(255,255,255,0.25); color: var(--white); }
.som-bars .pct { font-family: var(--mono); font-weight: 600; color: var(--cyan); text-align: right; }
@media (max-width: 600px) { .som-bars .row { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Killed metric ---------- */
.killed {
  display: inline-block; padding: 6px 12px; background: rgba(232,80,31,0.1);
  color: var(--coral); text-decoration: line-through; text-decoration-thickness: 2px;
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.05em; border-radius: 4px;
}

/* ---------- Pitch tag (eyebrow on dark, used outside hero) ---------- */
.pitch-tag {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em;
  color: var(--cyan); text-transform: uppercase; margin-bottom: 24px; display: block;
}

/* ---------- Case grid (Results page) ---------- */
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.case-tile {
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
}
.case-img {
  aspect-ratio: 16 / 9; background: var(--navy); position: relative;
  display: grid; place-items: center;
}
.case-img::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.case-img::after {
  content: attr(data-caption); position: relative; z-index: 1;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.5); text-transform: uppercase;
}
.case-img.cyan { background: var(--cyan); }
.case-img.cyan::after { color: rgba(10,22,40,0.55); }
.case-img.coral { background: var(--coral); }
.case-img.coral::after { color: rgba(255,255,255,0.7); }
.case-img > img {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.case-img:has(> img)::before,
.case-img:has(> img)::after { display: none; }
.case-body { padding: 36px 32px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.case-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cyan-deep);
}
.case-tile h3 { font-size: 24px; line-height: 1.2; max-width: 24ch; }
.case-tile p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; margin: 0; }
.case-stats {
  list-style: none; padding: 0; margin: auto 0 0; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 12px;
  border-top: 1px solid var(--line); padding-top: 20px;
}
.case-stats li { display: flex; flex-direction: column; gap: 4px; }
.case-stats .num { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--cyan-deep); letter-spacing: -0.02em; }
.case-stats .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); line-height: 1.4; }
@media (max-width: 980px) { .case-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .case-stats { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- Proof strip (4-up stat row on dark) ---------- */
.proof-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 48px;
}
.proof-stat { display: flex; flex-direction: column; gap: 10px; }
.proof-stat .num {
  font-family: var(--display); font-weight: 800; font-size: clamp(36px, 4.5vw, 56px);
  letter-spacing: -0.03em; color: var(--cyan); line-height: 1;
}
.proof-stat .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-dark-mute); line-height: 1.5;
}
@media (max-width: 880px) { .proof-strip { grid-template-columns: repeat(2, 1fr); gap: 32px; } }

/* ---------- Service page sub-template helpers ---------- */
.feature-list { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-direction: column; gap: 14px; }
.feature-list li {
  display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start;
  padding: 16px 20px; background: var(--white); border: 1px solid var(--line); border-radius: 10px;
}
.feature-list .ix {
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--cyan-deep);
  letter-spacing: 0.1em;
}
.feature-list strong { display: block; font-size: 16px; margin-bottom: 4px; }
.feature-list span { color: var(--ink-soft); font-size: 14px; line-height: 1.55; }

.svc-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc-pillar {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 32px 28px; display: flex; flex-direction: column; gap: 14px;
}
.svc-pillar .num {
  font-family: var(--display); font-weight: 800; font-size: 36px;
  color: var(--cyan-deep); letter-spacing: -0.03em; line-height: 1;
}
.svc-pillar h4 { font-size: 18px; line-height: 1.25; }
.svc-pillar p { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0; }
@media (max-width: 880px) { .svc-pillars { grid-template-columns: 1fr; } }

.svc-stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  padding: 48px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.svc-stat-row .item { display: flex; flex-direction: column; gap: 8px; }
.svc-stat-row .num {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(40px, 5vw, 64px); letter-spacing: -0.03em; color: var(--ink); line-height: 1;
}
.svc-stat-row .num.cyan { color: var(--cyan-deep); }
.svc-stat-row .num.coral { color: var(--coral); }
.svc-stat-row .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute); max-width: 32ch;
}
@media (max-width: 880px) { .svc-stat-row { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================
   Link Building — QA process visualisation
   ============================================ */

/* QA categories grid (6 cards, each = category + checks) */
.qa-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.qa-cat {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 28px 24px; display: flex; flex-direction: column; gap: 16px;
  transition: border-color 0.2s, transform 0.2s;
}
.qa-cat:hover { border-color: var(--cyan-deep); transform: translateY(-2px); }
.qa-cat .qa-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.qa-cat .qa-num {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--cyan-deep); text-transform: uppercase;
}
.qa-cat .qa-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute);
  padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px;
}
.qa-cat .qa-tag.kill { color: var(--coral); border-color: var(--coral); }
.qa-cat h4 { font-size: 19px; line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
.qa-cat ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.qa-cat ul li {
  font-size: 13.5px; line-height: 1.5; color: var(--ink-soft);
  padding-left: 20px; position: relative;
}
.qa-cat ul li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--cyan-deep); font-weight: 700; font-size: 12px;
}
.qa-cat.kill ul li::before { content: '✕'; color: var(--coral); }
.qa-cat .qa-more {
  margin: 4px 0 0; padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute);
}
@media (max-width: 880px) { .qa-cats { grid-template-columns: 1fr; } }

/* Niche-tiers table */
.niche-tiers {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--white);
}
.niche-tiers > div {
  padding: 20px 24px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  display: flex; align-items: center;
}
.niche-tiers > div:nth-child(3n) { border-right: none; }
.niche-tiers > div:nth-last-child(-n+3) { border-bottom: none; }
.niche-tiers .nt-head {
  background: var(--cream-2);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute);
}
.niche-tiers .nt-niche { font-weight: 600; color: var(--ink); font-size: 15px; }
.niche-tiers .nt-val {
  font-family: var(--display); font-weight: 700; color: var(--cyan-deep); font-size: 20px;
  letter-spacing: -0.01em;
}
@media (max-width: 700px) {
  .niche-tiers { grid-template-columns: 1fr; }
  .niche-tiers > div { border-right: none; }
  .niche-tiers > div:nth-child(3n) { border-right: none; }
  .niche-tiers > div { border-bottom: 1px solid var(--line); }
}
.nt-footnote {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mute);
}
.nt-footnote em { font-style: italic; }

/* Rubric (scoring grid: 5 criteria × /10) */
.rubric {
  background: var(--navy); color: var(--white); border-radius: 16px;
  padding: 48px; display: flex; flex-direction: column; gap: 24px;
}
.rubric-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rubric-head h3 { color: var(--white); font-size: 28px; letter-spacing: -0.02em; margin: 0; }
.rubric-head .max { font-family: var(--mono); color: var(--cyan); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.rubric-rows { display: flex; flex-direction: column; gap: 14px; }
.rubric-row {
  display: grid; grid-template-columns: 1fr 200px 60px; gap: 24px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.rubric-row:last-child { border-bottom: none; }
.rubric-row .rr-name { font-size: 16px; font-weight: 500; color: var(--white); }
.rubric-row .rr-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.rubric-row .rr-bar > span { display: block; height: 100%; background: var(--cyan); border-radius: 3px; }
.rubric-row .rr-score {
  font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--cyan);
  text-align: right; letter-spacing: -0.01em;
}
.rubric-thresholds {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
  border-top: 1px solid rgba(255,255,255,0.12); padding-top: 24px; margin-top: 8px;
}
.rubric-thresholds > div { padding: 0 24px; border-right: 1px solid rgba(255,255,255,0.08); }
.rubric-thresholds > div:first-child { padding-left: 0; }
.rubric-thresholds > div:last-child { padding-right: 0; border-right: none; }
.rubric-thresholds .th-lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; margin-bottom: 8px;
}
.rubric-thresholds .reject .th-lbl { color: var(--coral); }
.rubric-thresholds .pass .th-lbl { color: rgba(255,255,255,0.7); }
.rubric-thresholds .premium .th-lbl { color: var(--cyan); }
.rubric-thresholds .th-val {
  font-family: var(--display); font-weight: 800; font-size: 24px;
  color: var(--white); letter-spacing: -0.02em;
}
.rubric-thresholds .th-desc {
  font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 4px; line-height: 1.4;
}
@media (max-width: 700px) {
  .rubric { padding: 32px 24px; }
  .rubric-row { grid-template-columns: 1fr 80px; }
  .rubric-row .rr-bar { display: none; }
  .rubric-thresholds { grid-template-columns: 1fr; gap: 16px; }
  .rubric-thresholds > div { padding: 16px 0; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .rubric-thresholds > div:last-child { border-bottom: none; }
}

/* Kill cards (rejected site examples) */
.kill-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kill-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 28px 24px; display: flex; flex-direction: column; gap: 16px;
  position: relative; overflow: hidden;
}
.kill-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--coral);
}
.kill-card .kc-head {
  display: flex; align-items: center; gap: 12px;
}
.kill-card .kc-stamp {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--coral); font-weight: 600;
  border: 1px solid var(--coral); padding: 4px 8px; border-radius: 3px;
}
.kill-card .kc-domain {
  font-family: var(--mono); font-size: 14px; color: var(--ink);
  text-decoration: line-through; text-decoration-color: var(--coral); text-decoration-thickness: 2px;
}
.kill-card h5 {
  font-size: 18px; line-height: 1.3; margin: 0; letter-spacing: -0.01em;
}
.kill-card p { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0; }
.kill-card .kc-meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--line);
}
@media (max-width: 880px) { .kill-cards { grid-template-columns: 1fr; } }

/* QA visual display (replaces photo on spotlight) */
.qa-display {
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 32px; display: flex; flex-direction: column; gap: 8px;
  font-family: var(--mono); font-size: 13px;
}
.qa-display .qd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
}
.qa-display .qd-title { color: var(--ink); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.qa-display .qd-domain {
  font-size: 11px; color: var(--ink-mute); padding: 4px 8px;
  background: var(--cream-2); border-radius: 3px;
}
.qa-display .qd-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px dashed var(--line);
}
.qa-display .qd-row:last-of-type { border-bottom: none; }
.qa-display .qd-check { color: var(--ink-soft); font-size: 12.5px; }
.qa-display .qd-status {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
}
.qa-display .qd-status.pass { color: var(--cyan-deep); }
.qa-display .qd-status.fail { color: var(--coral); }
.qa-display .qd-status .dot {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block;
}
.qa-display .qd-foot {
  margin-top: 16px; padding: 16px; background: var(--navy); color: var(--white);
  border-radius: 8px; display: flex; justify-content: space-between; align-items: baseline;
}
.qa-display .qd-foot .lbl {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.7);
}
.qa-display .qd-foot .val {
  font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--cyan);
}

/* Lead magnet panel (send us 10 links) */
.lead-magnet {
  background: var(--cream-2); border-radius: 16px; padding: 56px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center;
  border: 1px solid var(--line);
}
.lead-magnet h3 { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 16px; }
.lead-magnet p { color: var(--ink-soft); font-size: 16px; line-height: 1.55; margin: 0 0 24px; max-width: 50ch; }
.lead-magnet .lm-meta {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute);
}
.lead-magnet .lm-meta span::before { content: '· '; color: var(--cyan-deep); }
.lead-magnet .lm-cta { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.lead-magnet .lm-cta .btn { justify-content: center; text-align: center; }
.lead-magnet .lm-note { font-size: 12px; color: var(--ink-mute); text-align: center; }
@media (max-width: 880px) {
  .lead-magnet { grid-template-columns: 1fr; padding: 40px 28px; gap: 24px; }
}

/* Brand logos row — recent placements (4-up) */
.brand-logos {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--white);
  overflow: hidden;
}
.bl-cell {
  display: flex; align-items: center; justify-content: center;
  padding: 36px 28px;
  min-height: 120px;
  border-right: 1px solid var(--rule);
}
.bl-cell:last-child { border-right: none; }
.bl-cell img {
  height: 44px; width: auto; max-width: 180px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.78;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.bl-cell:hover img { filter: grayscale(0%); opacity: 1; }
@media (max-width: 720px) {
  .brand-logos { grid-template-columns: repeat(2, 1fr); }
  .bl-cell:nth-child(2) { border-right: none; }
  .bl-cell:nth-child(1), .bl-cell:nth-child(2) { border-bottom: 1px solid var(--rule); }
  .bl-cell { padding: 28px 16px; min-height: 100px; }
}

/* LLM citation callout (single highlighted check) */
.llm-callout {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--white); border-radius: 16px; padding: 48px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center;
}
.llm-callout .lc-icon {
  width: 64px; height: 64px; border-radius: 50%; background: rgba(0,212,234,0.12);
  display: flex; align-items: center; justify-content: center; color: var(--cyan);
  flex-shrink: 0;
}
.llm-callout h4 { color: var(--white); font-size: 22px; line-height: 1.2; margin: 0 0 8px; letter-spacing: -0.01em; }
.llm-callout p { color: rgba(255,255,255,0.75); font-size: 15px; line-height: 1.55; margin: 0; max-width: 60ch; }
.llm-callout .lc-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--cyan); padding: 8px 14px;
  border: 1px solid var(--cyan); border-radius: 4px; white-space: nowrap;
}
@media (max-width: 880px) {
  .llm-callout { grid-template-columns: 1fr; padding: 32px 24px; gap: 16px; }
  .llm-callout .lc-tag { justify-self: start; }
}

/* ---------- Placement Variance Index (PVI) — coined framework card ---------- */
.pvi-card {
  background: var(--white);
  border: 1px solid rgba(10,22,40,0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(10,22,40,0.04), 0 24px 48px -28px rgba(10,22,40,0.18);
}
.pvi-head {
  padding: 36px 44px 28px;
  border-bottom: 1px solid rgba(10,22,40,0.06);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: end;
}
.pvi-term {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan-deep);
  margin: 0 0 10px;
}
.pvi-name {
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  font-weight: 700;
}
.pvi-name .pvi-abbr {
  color: var(--ink-mute);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.pvi-coined {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid rgba(10,22,40,0.1);
  padding: 6px 12px;
  border-radius: 100px;
  white-space: nowrap;
  align-self: start;
}
.pvi-body {
  padding: 32px 44px 40px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: start;
}
.pvi-def {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 24px;
}
.pvi-formula {
  background: var(--cream-2);
  border-radius: 12px;
  padding: 22px 24px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pvi-formula .pvi-op {
  color: var(--ink-mute);
  font-size: 18px;
}
.pvi-formula .pvi-pill {
  background: var(--white);
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(10,22,40,0.08);
}
.pvi-formula .pvi-pill-cyan {
  background: var(--navy);
  color: var(--cyan);
  border-color: var(--navy);
}
.pvi-table {
  border-top: 1px solid rgba(10,22,40,0.08);
}
.pvi-table .pvi-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(10,22,40,0.06);
  align-items: baseline;
}
.pvi-table .pvi-row:last-child { border-bottom: none; }
.pvi-table .pvi-mult {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cyan-deep);
  font-feature-settings: "tnum";
}
.pvi-table .pvi-scenario {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.pvi-table .pvi-scenario .pvi-why {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.pvi-table .pvi-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}

/* PVI principles strip below the card */
.pvi-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}
.pvi-principle {
  border-top: 2px solid var(--ink);
  padding-top: 18px;
}
.pvi-principle .pvi-p-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 10px;
}
.pvi-principle h5 {
  font-size: 16px;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pvi-principle p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0;
}

.pvi-attribution {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(10,22,40,0.08);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  text-align: center;
}

@media (max-width: 880px) {
  .pvi-head { grid-template-columns: 1fr; padding: 28px 24px 20px; gap: 14px; }
  .pvi-name { font-size: 26px; }
  .pvi-body { grid-template-columns: 1fr; gap: 28px; padding: 24px 24px 32px; }
  .pvi-table .pvi-row { grid-template-columns: 60px 1fr; }
  .pvi-table .pvi-tag { grid-column: 2; }
  .pvi-principles { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Service nav (related services strip) ---------- */
.svc-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.svc-nav a {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 20px 18px; display: flex; flex-direction: column; gap: 8px;
  transition: background 0.2s, border-color 0.2s;
}
.svc-nav a:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.svc-nav a:hover .lbl { color: var(--cyan); }
.svc-nav .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan-deep); }
.svc-nav strong { font-size: 15px; line-height: 1.3; }
@media (max-width: 880px) { .svc-nav { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Featured testimonial — single navy panel (reference layout) ---------- */
.ft {
  background: var(--navy);
  color: var(--white);
  border-radius: 4px;
  padding: clamp(40px, 5vw, 64px) clamp(36px, 5vw, 72px) clamp(36px, 4vw, 56px);
  margin: 0;
  max-width: 1180px;
  position: relative;
  box-shadow: 0 30px 80px -40px rgba(10,39,51,0.4);
}

.ft-top {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.ft-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 500;
}
.ft-tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}
.ft-eyebrow .dot,
.ft-tag .dot { margin: 0 6px; opacity: 0.6; }

.ft-mark {
  color: var(--cyan);
  margin-bottom: 20px;
  line-height: 0;
}
.ft-mark svg {
  width: 56px; height: auto; display: block;
}

.ft-quote {
  margin: 0 0 clamp(36px, 4.5vw, 56px) 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.38;
  letter-spacing: -0.018em;
  color: var(--white);
  text-wrap: pretty;
  max-width: 56ch;
}

.ft-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.ft-col-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 500;
  margin-bottom: 12px;
}
.ft-col p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  text-wrap: pretty;
}

.ft-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.ft-person { display: flex; align-items: center; gap: 16px; }
.ft-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy-2);
  flex-shrink: 0;
  display: block;
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.2s, border-color 0.2s;
}
.ft-avatar:hover { transform: scale(1.05); border-color: var(--cyan); }
.ft-avatar img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block;
}
.ft-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.ft-role {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}
.ft-role .sep { color: rgba(255,255,255,0.35); margin: 0 6px; }

.ft-brand { display: flex; align-items: center; gap: 16px; }
.ft-brand-card {
  background: var(--white);
  border-radius: 6px;
  padding: 10px 16px;
  display: flex; align-items: center;
  height: 48px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.ft-brand-card img {
  height: 22px; width: auto; max-width: 100px;
  display: block;
  object-fit: contain;
}
.ft-prev {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}

@media (max-width: 760px) {
  .ft-cols { grid-template-columns: 1fr; gap: 24px; }
  .ft-foot { flex-direction: column; align-items: flex-start; }
  .ft-quote { font-size: 20px; }
}

/* ---------- Page footer marker (deck-style) ---------- */
.deck-foot {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute); padding: 24px 0;
  border-top: 1px solid var(--line);
}


/* ============================================
   Article / Blog post template
   ============================================ */

.article-hero {
  background: var(--navy);
  color: var(--white);
  padding: clamp(80px, 10vw, 120px) 0 clamp(40px, 6vw, 60px);
}
.article-crumbs {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--on-dark-mute); margin-bottom: 32px;
}
.article-crumbs a { color: var(--on-dark-mute); text-decoration: none; }
.article-crumbs a:hover { color: var(--cyan); }
.article-crumbs .sep { margin: 0 10px; color: rgba(255,255,255,0.3); }

.article-hero-grid {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.article-title {
  font-size: clamp(36px, 4.4vw, 56px); font-weight: 800; line-height: 1.1;
  letter-spacing: -0.025em; margin: 0 0 28px; text-wrap: balance;
}
.article-bylines {
  display: flex; flex-wrap: wrap; gap: 28px 32px;
  margin-bottom: 24px;
}
.byline {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--on-dark-mute);
}
.byline-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--navy-2);
  border: 1.5px solid rgba(29,170,224,0.3);
  background-size: cover; background-position: center;
  flex-shrink: 0;
}
.byline-role { font-weight: 400; color: var(--on-dark-mute); }
.byline-name { color: var(--white); font-weight: 600; }
.byline-name a { color: var(--white); text-decoration: none; }
.byline-name a:hover { color: var(--cyan); }
.article-meta-pills {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 20px;
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(29,170,224,0.12);
  border: 1px solid rgba(29,170,224,0.25);
  color: var(--cyan);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  padding: 6px 12px; border-radius: 40px;
}
.pill.solid { background: var(--cyan); color: var(--navy); border-color: var(--cyan); }
.pill .check { font-size: 12px; }
.article-dates {
  font-size: 12.5px; color: var(--on-dark-mute);
  font-family: var(--mono); letter-spacing: 0.04em;
}
.article-dates strong { color: var(--white); font-weight: 500; }

.article-feature-img {
  width: 100%; aspect-ratio: 4/3;
  border-radius: 12px;
  background: var(--navy-2) center/cover no-repeat;
  border: 1px solid rgba(29,170,224,0.2);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4);
}

@media (max-width: 880px) {
  .article-hero-grid { grid-template-columns: 1fr; }
  .article-bylines { gap: 16px 20px; }
}

/* Article body */
.article-body {
  background: var(--white);
  padding: clamp(48px, 7vw, 80px) 0 clamp(60px, 9vw, 100px);
}
.article-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.article-toc {
  position: sticky; top: 100px;
  font-family: var(--mono); font-size: 12px;
  border-left: 1px solid var(--line);
  padding-left: 20px;
}
.article-toc .toc-label {
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 14px;
  font-size: 10px;
}
.article-toc ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.article-toc a {
  color: var(--ink-soft); text-decoration: none;
  font-size: 12.5px; line-height: 1.4;
  display: block; padding: 4px 0;
  font-family: var(--sans);
  transition: color 0.2s;
}
.article-toc a:hover { color: var(--cyan-deep); }
.article-toc a.is-active { color: var(--ink); font-weight: 600; }

.article-prose {
  max-width: 760px;
  font-size: 17px; line-height: 1.7; color: var(--ink-soft);
}
.article-prose .lede {
  font-size: 20px; line-height: 1.55; color: var(--ink);
  margin: 0 0 36px; font-weight: 400;
}
.article-prose h2 {
  font-size: clamp(24px, 2.2vw, 30px); font-weight: 700;
  color: var(--ink); margin: 56px 0 18px;
  letter-spacing: -0.015em; line-height: 1.25;
  scroll-margin-top: 100px;
}
.article-prose h3 {
  font-size: clamp(19px, 1.6vw, 22px); font-weight: 700;
  color: var(--ink); margin: 36px 0 14px;
  scroll-margin-top: 100px;
}
.article-prose p { margin: 0 0 18px; }
.article-prose a { color: var(--cyan-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.article-prose a:hover { color: var(--coral); }
.article-prose ul, .article-prose ol {
  padding-left: 24px; margin: 0 0 22px;
}
.article-prose li { margin-bottom: 8px; }
.article-prose strong { color: var(--ink); font-weight: 700; }
.article-prose blockquote {
  border-left: 3px solid var(--cyan-deep);
  padding: 6px 0 6px 24px; margin: 28px 0;
  font-size: 19px; line-height: 1.5; color: var(--ink); font-style: normal;
}
.article-prose img {
  max-width: 100%; height: auto; border-radius: 8px;
  margin: 28px 0; display: block;
}
.article-prose figure { margin: 28px 0; }
.article-prose figure img { margin: 0; }
.article-prose figcaption {
  font-size: 13px; color: var(--ink-mute); margin-top: 8px;
  text-align: center;
}
.article-prose table {
  width: 100%; border-collapse: collapse; margin: 24px 0;
  font-size: 15px;
}
.article-prose th, .article-prose td {
  text-align: left; padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.article-prose th { background: var(--cream); font-weight: 600; color: var(--ink); }
.article-prose code {
  background: var(--cream); padding: 2px 6px; border-radius: 4px;
  font-family: var(--mono); font-size: 14px;
}
.article-prose .more-callout {
  background: var(--cream); border-radius: 12px;
  padding: 28px 32px; margin: 48px 0;
  border-left: 3px solid var(--cyan-deep);
}
.article-prose .more-callout h3 {
  margin-top: 0; font-size: 18px; color: var(--ink);
}

@media (max-width: 880px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-toc { position: static; border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 24px; margin-bottom: 32px; }
}

/* Related + CTA */
.article-related {
  background: var(--cream);
  padding: clamp(60px, 8vw, 90px) 0;
}
.related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 32px;
}
@media (max-width: 880px) {
  .related-grid { grid-template-columns: 1fr; }
}
.related-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.related-card:hover {
  transform: translateY(-2px); border-color: var(--cyan-deep);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.15);
}
.related-card .img {
  aspect-ratio: 16/10; background: var(--cream-2) center/cover no-repeat;
}
.related-card .body { padding: 20px 22px; }
.related-card .cat {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cyan-deep); margin-bottom: 8px;
}
.related-card h3 {
  font-size: 17px; font-weight: 700; line-height: 1.3;
  color: var(--ink); margin: 0 0 8px;
}
.related-card .meta {
  font-family: var(--mono); font-size: 11px; color: var(--ink-mute);
  letter-spacing: 0.04em;
}

/* Articles index page */
.articles-hero {
  background: var(--navy); color: var(--white);
  padding: clamp(100px, 12vw, 140px) 0 clamp(48px, 7vw, 72px);
}
.articles-hero h1 {
  font-size: clamp(40px, 5vw, 64px); font-weight: 800;
  line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 20px;
  max-width: 900px;
}
.articles-hero .lede {
  font-size: 19px; line-height: 1.55; color: var(--on-dark-mute);
  max-width: 680px; margin: 0;
}
.articles-filter {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 36px;
}
.articles-filter button {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--white);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 16px; border-radius: 40px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.articles-filter button:hover { border-color: var(--cyan); color: var(--cyan); }
.articles-filter button.is-active { background: var(--cyan); color: var(--navy); border-color: var(--cyan); }

.articles-grid {
  background: var(--cream);
  padding: clamp(60px, 8vw, 90px) 0;
}
.articles-grid-inner {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
@media (max-width: 980px) { .articles-grid-inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .articles-grid-inner { grid-template-columns: 1fr; } }

/* Author bio page */
.author-hero {
  background: var(--navy); color: var(--white);
  padding: clamp(100px, 12vw, 140px) 0 clamp(48px, 7vw, 72px);
}
.author-hero-grid {
  display: grid; grid-template-columns: 220px 1fr; gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
.author-photo {
  width: 220px; height: 220px; border-radius: 50%;
  background: var(--navy-2) center/cover no-repeat;
  border: 3px solid rgba(29,170,224,0.3);
  box-shadow: 0 0 0 6px rgba(29,170,224,0.08);
}
.author-name { font-size: clamp(36px, 4vw, 52px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.05; }
.author-role {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 24px;
}
.author-links {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 0;
}
.author-links a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 40px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
  color: var(--white); text-decoration: none;
  font-size: 13px; font-weight: 500;
  transition: border-color 0.2s, background 0.2s;
}
.author-links a:hover { border-color: var(--cyan); background: rgba(29,170,224,0.1); }

@media (max-width: 720px) {
  .author-hero-grid { grid-template-columns: 1fr; }
  .author-photo { width: 160px; height: 160px; }
}

.author-body {
  background: var(--white);
  padding: clamp(60px, 8vw, 100px) 0;
}
.author-body-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(32px, 5vw, 72px);
}
.author-prose { max-width: 760px; font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.author-prose h2 { font-size: 26px; color: var(--ink); margin: 48px 0 16px; font-weight: 700; letter-spacing: -0.015em; }
.author-prose h2:first-child { margin-top: 0; }
.author-prose p { margin: 0 0 18px; }
.author-prose a { color: var(--cyan-deep); text-decoration: underline; text-underline-offset: 3px; }
.author-prose ul { padding-left: 22px; }
.author-prose li { margin-bottom: 8px; }
.author-side {
  position: sticky; top: 100px;
}
.author-side h3 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute);
  margin: 0 0 18px;
}
.author-side .expertise-list {
  list-style: none; padding: 0; margin: 0 0 36px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.author-side .expertise-list li {
  background: var(--cream); border: 1px solid var(--line);
  padding: 6px 12px; border-radius: 40px;
  font-size: 12.5px; color: var(--ink);
}
@media (max-width: 880px) {
  .author-body-layout { grid-template-columns: 1fr; }
  .author-side { position: static; }
}


/* ---- Articles index: featured + grid ---- */
.featured-section { background: var(--cream); padding: clamp(48px, 6vw, 72px) 0 0; }
.article-featured {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.article-featured:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -20px rgba(10,22,40,0.18); border-color: var(--cyan-deep); }
.article-featured-img { aspect-ratio: 16/11; background: var(--cream-2) center/cover no-repeat; }
.article-featured-body { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.article-featured-body h2 {
  font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; line-height: 1.15;
  letter-spacing: -0.02em; color: var(--ink); margin: 14px 0 16px;
}
.article-featured-body p { font-size: 16px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 24px; }
.article-featured-foot {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-mute); text-transform: uppercase;
}
.article-featured-foot .dot { color: var(--ink-mute); }
.article-featured-foot .link-cta { color: var(--cyan-deep); font-weight: 600; }
.article-featured-foot .byline-name { color: var(--ink); }
@media (max-width: 880px) { .article-featured { grid-template-columns: 1fr; } }

.article-grid-section { background: var(--cream); padding: clamp(48px, 6vw, 80px) 0 clamp(60px, 8vw, 90px); }
.article-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 24px;
}
@media (max-width: 980px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .article-grid { grid-template-columns: 1fr; } }

.article-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; text-decoration: none;
  color: inherit; display: flex; flex-direction: column;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.article-card:hover {
  transform: translateY(-3px); border-color: var(--cyan-deep);
  box-shadow: 0 18px 38px -16px rgba(10,22,40,0.2);
}
.article-card-img {
  aspect-ratio: 16/10;
  background: var(--cream-2) center/cover no-repeat;
}
.article-card-body { padding: 22px 24px; display: flex; flex-direction: column; flex: 1; }
.article-card-cat {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cyan-deep);
  margin-bottom: 12px;
}
.article-card-body h3 {
  font-size: 18px; font-weight: 700; line-height: 1.3;
  color: var(--ink); margin: 0 0 10px; letter-spacing: -0.01em;
}
.article-card-body p {
  font-size: 14px; line-height: 1.55; color: var(--ink-soft);
  margin: 0 0 18px; flex: 1;
}
.article-card-foot {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-mute); text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
}
.article-card-foot .arrow { color: var(--cyan-deep); transition: transform 0.2s; display: inline-block; }
.article-card:hover .article-card-foot .arrow { transform: translateX(4px); }


/* ============================================
   Case Studies — results page + per-case template
   ============================================ */

/* Index — case study cards grid */
.cs-index { background: var(--cream); padding: clamp(48px, 6vw, 80px) 0; }
.cs-index-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 28px; margin-top: 40px;
}
@media (max-width: 880px) { .cs-index-grid { grid-template-columns: 1fr; } }

.cs-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.cs-card:hover {
  transform: translateY(-3px); border-color: var(--cyan-deep);
  box-shadow: 0 22px 50px -22px rgba(10,39,51,0.22);
}
.cs-card-img {
  aspect-ratio: 16/9;
  background: var(--cream-2) center/cover no-repeat;
}
.cs-card-body { padding: 28px 32px 32px; display: flex; flex-direction: column; flex: 1; }
.cs-card-eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cyan-deep);
  margin-bottom: 14px;
}
.cs-card-title {
  font-size: clamp(22px, 1.8vw, 28px); font-weight: 800;
  line-height: 1.2; letter-spacing: -0.015em;
  color: var(--ink); margin: 0 0 12px;
}
.cs-card-brief {
  font-size: 15px; line-height: 1.55; color: var(--ink-soft);
  margin: 0 0 20px; flex: 1;
}
.cs-card-stats {
  display: flex; gap: 28px; flex-wrap: wrap;
  padding-top: 20px; border-top: 1px solid var(--line);
}
.cs-card-stat .num {
  font-family: var(--display); font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 800; letter-spacing: -0.02em;
  color: var(--cyan-deep); line-height: 1;
}
.cs-card-stat .num.coral { color: var(--coral); }
.cs-card-stat .label {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: 6px;
}

/* Status — for placeholder cards */
.cs-card.is-coming .cs-card-img {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  display: grid; place-items: center;
}
.cs-card.is-coming .cs-card-img::after {
  content: 'Coming soon';
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cyan);
  padding: 8px 18px; border: 1px solid rgba(29,170,224,0.3);
  border-radius: 40px;
}

/* ============================================
   Per-case-study page layout
   ============================================ */

.cs-hero {
  background: var(--navy); color: var(--white);
  padding: clamp(80px, 10vw, 130px) 0 clamp(60px, 8vw, 100px);
  position: relative; overflow: hidden;
}
.cs-hero::after {
  content: ''; position: absolute; bottom: -20%; right: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--cyan) 0%, transparent 60%);
  opacity: 0.15; filter: blur(40px); pointer-events: none;
}
.cs-hero .wrap { position: relative; z-index: 1; }
.cs-hero-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--cyan); margin: 0 0 18px;
}
.cs-hero h1 {
  font-size: clamp(42px, 5.5vw, 72px); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.05;
  color: var(--white); margin: 0 0 24px;
  max-width: 18ch; text-wrap: balance;
}
.cs-hero h1 .accent { color: var(--cyan); }
.cs-hero .lede {
  color: var(--on-dark-mute);
  max-width: 60ch; font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55; margin: 0 0 32px;
}
.cs-hero-meta {
  display: flex; flex-wrap: wrap; gap: 32px;
  padding-top: 24px; margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.cs-hero-meta .cell {
  font-family: var(--mono); font-size: 12px;
  color: var(--on-dark-mute); letter-spacing: 0.04em;
}
.cs-hero-meta .cell strong {
  display: block; color: var(--white); font-weight: 600;
  font-size: 14px; letter-spacing: 0; margin-top: 4px;
  font-family: var(--sans);
}

/* Big hero stats band */
.cs-hero-stats {
  background: var(--navy-2); color: var(--white);
  padding: clamp(40px, 5vw, 64px) 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cs-hero-stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 4vw, 56px);
}
@media (max-width: 720px) { .cs-hero-stats-grid { grid-template-columns: 1fr; } }
.cs-stat-big {
  display: grid; grid-template-columns: auto 1fr;
  gap: 20px; align-items: start;
}
.cs-stat-big .num {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.95; letter-spacing: -0.04em;
  color: var(--cyan);
}
.cs-stat-big .num.coral { color: var(--coral); }
.cs-stat-big .num.sun { color: var(--sun); }
.cs-stat-big .desc {
  padding-top: 8px;
}
.cs-stat-big .desc strong {
  display: block; color: var(--white); font-weight: 700;
  font-size: 16px; margin-bottom: 6px; letter-spacing: -0.005em;
}
.cs-stat-big .desc span {
  color: var(--on-dark-mute); font-size: 14px; line-height: 1.5;
}

/* Body — image left + 3-column read right */
.cs-body { background: var(--cream); padding: clamp(60px, 8vw, 100px) 0; }
.cs-body-grid {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 980px) { .cs-body-grid { grid-template-columns: 1fr; } }

.cs-body-img {
  aspect-ratio: 4/5;
  background: var(--cream-2) center/cover no-repeat;
  border-radius: 16px;
  position: sticky; top: 100px;
}
@media (max-width: 980px) {
  .cs-body-img { position: static; aspect-ratio: 16/10; }
}

.cs-body-content {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: clamp(24px, 4vw, 56px);
}
@media (max-width: 720px) { .cs-body-content { grid-template-columns: 1fr; } }

.cs-block { margin-bottom: 32px; }
.cs-block:last-child { margin-bottom: 0; }
.cs-block-h {
  font-size: 22px; font-weight: 700;
  color: var(--cyan-deep); letter-spacing: -0.015em;
  margin: 0 0 12px;
}
.cs-block p {
  font-size: 16px; line-height: 1.65; color: var(--ink-soft);
  margin: 0 0 14px;
}
.cs-block p strong { color: var(--ink); font-weight: 700; }
.cs-block ul {
  list-style: none; padding: 0; margin: 14px 0 0;
}
.cs-block ul li {
  position: relative; padding-left: 22px;
  margin-bottom: 10px;
  font-size: 15.5px; line-height: 1.55; color: var(--ink-soft);
}
.cs-block ul li::before {
  content: ''; position: absolute; left: 4px; top: 10px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan-deep);
}
.cs-block ul li strong { color: var(--ink); font-weight: 700; }

/* Pull quote (right column) */
.cs-quote {
  position: relative;
  padding: 28px 0 0 28px;
  border-left: 2px solid var(--cyan-deep);
  font-family: var(--display);
  font-size: 17px; line-height: 1.55;
  color: var(--ink); font-style: italic;
}
.cs-quote::before {
  content: '"'; position: absolute;
  top: -8px; left: 12px;
  font-family: var(--display); font-size: 36px;
  color: var(--cyan-deep); line-height: 1;
  font-style: normal;
}
.cs-quote .cs-quote-attr {
  display: block; margin-top: 18px;
  font-family: var(--sans); font-style: normal;
  font-size: 13px; line-height: 1.4;
  color: var(--ink); font-weight: 700;
}
.cs-quote .cs-quote-attr span {
  display: block; color: var(--ink-mute); font-weight: 400; margin-top: 2px;
}

/* Logo lockup at top of page (Salesforce x EM style) */
.cs-logos {
  display: flex; align-items: center; gap: 18px;
  margin: 32px 0 0;
}
.cs-logos img { max-height: 32px; width: auto; }
.cs-logos .x {
  font-family: var(--mono); font-size: 12px;
  color: rgba(255,255,255,0.4); letter-spacing: 0.1em;
}


/* ============================================
   EMINTEL FLOW DIAGRAM (homepage)
   Inputs → Core → Outputs, on the navy callout band
   ============================================ */

.emintel-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: stretch;
  margin-top: 8px;
}

.emintel-col {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.emintel-col-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.emintel-col-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--cyan);
}

.emintel-col-label {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.emintel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.emintel-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 18px;
  position: relative;
}

.emintel-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(29, 170, 224, 0.15);
}

.emintel-list li strong {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  letter-spacing: -0.005em;
}

.emintel-list li span {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

/* Core column */
.emintel-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 8px;
  min-width: 180px;
}

.emintel-core-arrow {
  font-family: var(--mono);
  font-size: 28px;
  color: rgba(29, 170, 224, 0.55);
  line-height: 1;
}

.emintel-core-disc {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(29, 170, 224, 0.4), rgba(29, 170, 224, 0) 70%),
    linear-gradient(140deg, #1DAAE0 0%, #0F89B8 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 18px;
  box-shadow:
    0 0 0 1px rgba(29, 170, 224, 0.4),
    0 0 0 12px rgba(29, 170, 224, 0.08),
    0 0 0 28px rgba(29, 170, 224, 0.04),
    0 30px 60px -20px rgba(0, 0, 0, 0.6);
  color: #fff;
}

.emintel-core-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 6px;
}

.emintel-core-name {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1;
}

.emintel-core-tag {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.78);
}

/* Tablet — stack core between columns vertically */
@media (max-width: 1024px) {
  .emintel-flow {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .emintel-core {
    flex-direction: row;
    padding: 8px 0;
    min-width: 0;
  }
  .emintel-core-arrow { font-size: 22px; transform: rotate(90deg); }
  .emintel-core-disc {
    width: 160px;
    height: 160px;
  }
  .emintel-core-name { font-size: 26px; }
}

@media (max-width: 600px) {
  .emintel-col { padding: 22px 20px 20px; border-radius: 14px; }
  .emintel-core-disc { width: 140px; height: 140px; }
  .emintel-core-name { font-size: 22px; }
  .emintel-list li strong { font-size: 15px; }
  .emintel-list li span { font-size: 13.5px; }
}


/* EMintel engine image (homepage callout) */
.emintel-engine {
  margin: 8px 0 0;
  padding: 0;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.55);
}
.emintel-engine img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 600px) {
  .emintel-engine { border-radius: 14px; }
}


/* ============================================
   Link-building rebuild — placement types, brand wall,
   "what good looks like", audit CTA
   ============================================ */

/* ---------- Stat band: positive proof (relationship-led, team scale) ---------- */
.lb-stat-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(10,22,40,0.1);
  border-bottom: 1px solid rgba(10,22,40,0.1);
  margin: 48px 0 0;
}
.lb-stat-band > div {
  padding: 36px 32px;
  border-right: 1px solid rgba(10,22,40,0.1);
}
.lb-stat-band > div:last-child { border-right: none; }
.lb-stat-band .lb-stat-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(44px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0 0 10px;
}
.lb-stat-band .lb-stat-num em {
  font-style: normal;
  color: var(--cyan-deep);
}
.lb-stat-band .lb-stat-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 6px;
}
.lb-stat-band .lb-stat-desc {
  font-size: 14.5px;
  color: var(--ink);
  margin: 0;
  line-height: 1.45;
}
@media (max-width: 880px) {
  .lb-stat-band { grid-template-columns: 1fr; }
  .lb-stat-band > div { border-right: none; border-bottom: 1px solid rgba(10,22,40,0.1); padding: 28px 24px; }
  .lb-stat-band > div:last-child { border-bottom: none; }
}

/* ---------- Placement type taxonomy (7 link kinds) ---------- */
.placement-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(10,22,40,0.1);
  border: 1px solid rgba(10,22,40,0.1);
  border-radius: 14px;
  overflow: hidden;
}
.placement {
  background: var(--white);
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.placement.is-feature {
  grid-column: 1 / -1;
  padding: 36px 40px;
  background: linear-gradient(180deg, #fbfaf6 0%, var(--white) 100%);
  position: relative;
}
.placement.is-feature .placement-name { font-size: 26px; }
.placement.is-feature .placement-desc { font-size: 16px; max-width: 68ch; }
.placement-cta {
  position: absolute;
  top: 50%;
  right: 110px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  max-width: 240px;
  text-align: center;
}
.placement-cta-lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-deep);
}
.placement-cta strong {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.placement-cta .arrow { transition: transform 0.2s ease; display: inline-block; }
.placement-cta:hover {
  background: var(--navy);
  border-color: var(--navy);
}
.placement-cta:hover .placement-cta-lbl { color: var(--cyan); }
.placement-cta:hover strong { color: var(--white); }
.placement-cta:hover .arrow { transform: translateX(3px); }
@media (max-width: 720px) {
  .placement-cta { position: static; margin-top: 12px; align-self: flex-start; max-width: none; }
}
.placement-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.placement-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}
.placement-name .placement-tag {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}
.placement-tag.tag-primary { background: rgba(32,168,158,0.12); color: var(--cyan-deep); }
.placement-tag.tag-secondary { background: rgba(29,170,224,0.12); color: var(--blue-deep); }
.placement-tag.tag-strategic { background: rgba(240,88,45,0.12); color: var(--orange); }
.placement-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.placement-meta {
  display: flex;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  padding-top: 12px;
  border-top: 1px solid rgba(10,22,40,0.08);
}
.placement-meta strong { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) {
  .placement-grid { grid-template-columns: 1fr; }
  .placement { padding: 26px 24px; }
}

/* ---------- Brand wall (places links have appeared / clients we've earned for) ---------- */
.brand-wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid rgba(10,22,40,0.12);
  border-radius: 14px;
  overflow: hidden;
}
.brand-wall .bw-cell {
  padding: 28px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(10,22,40,0.08);
  border-bottom: 1px solid rgba(10,22,40,0.08);
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--white);
  min-height: 88px;
  text-align: center;
}
.brand-wall .bw-cell:nth-child(6n) { border-right: none; }
.brand-wall .bw-cell:nth-last-child(-n+6) { border-bottom: none; }
@media (max-width: 880px) {
  .brand-wall { grid-template-columns: repeat(3, 1fr); }
  .brand-wall .bw-cell { border-right: 1px solid rgba(10,22,40,0.08); border-bottom: 1px solid rgba(10,22,40,0.08); }
  .brand-wall .bw-cell:nth-child(6n) { border-right: 1px solid rgba(10,22,40,0.08); }
  .brand-wall .bw-cell:nth-child(3n) { border-right: none; }
  .brand-wall .bw-cell:nth-last-child(-n+6) { border-bottom: 1px solid rgba(10,22,40,0.08); }
  .brand-wall .bw-cell:nth-last-child(-n+3) { border-bottom: none; }
}
@media (max-width: 540px) {
  .brand-wall { grid-template-columns: repeat(2, 1fr); }
  .brand-wall .bw-cell:nth-child(3n) { border-right: 1px solid rgba(10,22,40,0.08); }
  .brand-wall .bw-cell:nth-child(2n) { border-right: none; }
}

/* ---------- "What good looks like" — anonymised exemplar cards ---------- */
.exemplar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.exemplar {
  background: var(--white);
  border: 1px solid rgba(10,22,40,0.1);
  border-radius: 18px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.exemplar-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-deep);
  align-self: flex-start;
}
.exemplar-tag::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--cyan-deep);
  border-radius: 50%;
}
.exemplar h4 {
  font-size: 19px;
  line-height: 1.3;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.exemplar-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(10,22,40,0.08);
}
.exemplar-meta div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.exemplar-meta .em-lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.exemplar-meta .em-val {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.exemplar-score {
  margin-top: 4px;
  padding: 14px 16px;
  background: var(--cream-2);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.exemplar-score .es-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  color: var(--cyan-deep);
  letter-spacing: -0.02em;
}
.exemplar-score .es-num em { font-style: normal; color: var(--ink-mute); font-size: 17px; font-weight: 500; }
.exemplar-score .es-lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
@media (max-width: 880px) { .exemplar-grid { grid-template-columns: 1fr; } }

/* ---------- Audit CTA block (replaces lead magnet) ---------- */
.audit-cta {
  background: var(--cream-2);
  color: var(--navy);
  border: 1px solid rgba(11,26,61,0.08);
  border-radius: 22px;
  padding: 56px 64px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.audit-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 90% 10%, rgba(32,168,158,0.10), transparent 60%);
  pointer-events: none;
}
.audit-cta-body { position: relative; z-index: 1; }
.audit-cta .audit-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan-deep);
  margin: 0 0 14px;
}
.audit-cta h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--navy);
}
.audit-cta p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.audit-cta .audit-action {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.audit-cta .audit-action a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 28px;
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  border-radius: 100px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.audit-cta .audit-action a:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(11,26,61,0.35);
}
.audit-cta .audit-action small {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  text-align: center;
}
@media (max-width: 880px) {
  .audit-cta { grid-template-columns: 1fr; padding: 40px 32px; gap: 28px; }
}

/* ---------- Programme pillar v2 (3-team structure) ---------- */
.team-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.team-pillar {
  background: var(--white);
  border: 1px solid rgba(10,22,40,0.1);
  border-radius: 18px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.team-pillar.is-primary {
  border-color: var(--cyan-deep);
  box-shadow: 0 20px 40px -25px rgba(32,168,158,0.4);
}
.team-pillar .tp-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  align-self: flex-start;
}
.team-pillar.is-primary .tp-tag { color: var(--cyan-deep); }
.team-pillar h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
  line-height: 1.2;
}
.team-pillar > p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.team-pillar ul {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(10,22,40,0.08);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.team-pillar ul li {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}
.team-pillar ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--cyan-deep);
}
@media (max-width: 880px) { .team-pillars { grid-template-columns: 1fr; } }


/* ============================================
   TESTIMONIALS PAGE
   ============================================ */

/* Compact testimonial card — variant of .ft for grid layouts */
.ft.ft--compact {
  padding: 36px 36px 28px;
  margin-bottom: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ft.ft--compact .ft-mark { margin-bottom: 18px; }
.ft.ft--compact .ft-mark svg { width: 38px; }
.ft.ft--compact .ft-quote {
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  margin-bottom: 24px;
  flex: 1;
}
.ft.ft--compact .ft-foot {
  margin-top: 16px;
  padding-top: 24px;
}
.ft.ft--compact .ft-avatar { width: 44px; height: 44px; }
.ft.ft--compact .ft-name { font-size: 15px; margin-bottom: 2px; }
.ft.ft--compact .ft-role { font-size: 12px; }

/* Cream variant — for variety on the page */
.ft.ft--cream {
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(10,39,51,0.08);
  box-shadow: 0 20px 50px -30px rgba(10,39,51,0.18);
}
.ft.ft--cream .ft-eyebrow,
.ft.ft--cream .ft-tag { color: rgba(10,39,51,0.55); }
.ft.ft--cream .ft-mark { color: var(--coral); }
.ft.ft--cream .ft-quote { color: var(--ink); }
.ft.ft--cream .ft-quote strong { color: var(--ink); font-weight: 700; }
.ft.ft--cream .ft-foot { border-top-color: rgba(10,39,51,0.10); }
.ft.ft--cream .ft-name { color: var(--ink); }
.ft.ft--cream .ft-role { color: rgba(10,39,51,0.6); }
.ft.ft--cream .ft-role .sep { color: rgba(10,39,51,0.3); }
.ft.ft--cream .ft-cols { border-top-color: rgba(10,39,51,0.10); }
.ft.ft--cream .ft-col-label { color: rgba(10,39,51,0.55); }
.ft.ft--cream .ft-col p { color: rgba(10,39,51,0.78); }

/* Initial avatars (when no photo) */
.ft-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(135deg, #1DAAE0 0%, #0F89B8 100%);
  letter-spacing: -0.01em;
}
.ft.ft--cream .ft-initial { color: #fff; }
.ft-initial.coral { background: linear-gradient(135deg, #F0582D 0%, #C8421C 100%); }
.ft-initial.sun { background: linear-gradient(135deg, #FBAF42 0%, #E08F1E 100%); color: var(--ink); }
.ft-initial.teal { background: linear-gradient(135deg, #20A89E 0%, #167A73 100%); }

/* Two-up grid for secondary featured testimonials */
.ts-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 64px;
}
@media (max-width: 900px) {
  .ts-grid-2 { grid-template-columns: 1fr; }
}

/* Compact reviews grid */
.ts-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}
@media (max-width: 1100px) {
  .ts-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .ts-grid-3 { grid-template-columns: 1fr; }
}

/* Star rating row */
.ft-stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--coral);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}
.ft-stars .num { color: var(--ink); font-weight: 600; margin-left: 6px; }
.ft.ft--compact:not(.ft--cream) .ft-stars .num { color: #fff; }
.ft.ft--compact:not(.ft--cream) .ft-stars { color: #FBAF42; }

/* Section header for the testimonials page */
.ts-section-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(10,39,51,0.10);
}
.ts-section-h h2 { margin: 0; font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -0.02em; }
.ts-section-h p {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

/* ============================================
   Provenance Score — internal tool mockup
   ============================================ */
.pt-bridge {
  text-align: center;
  margin: 56px auto 0;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.pt-bridge-arrow {
  color: var(--cyan-deep);
  opacity: 0.55;
  margin-bottom: 4px;
}
.pt-bridge h3 {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.pt-bridge p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
  max-width: 44ch;
}
.provenance-tool {
  margin-top: 32px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(10, 39, 51, 0.04),
    0 24px 60px -28px rgba(10, 39, 51, 0.28),
    0 8px 24px -12px rgba(10, 39, 51, 0.18);
  font-family: var(--sans);
  position: relative;
}

/* Window chrome */
.pt-chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(to bottom, #F4F2EE, #ECE9E2);
  border-bottom: 1px solid var(--line);
}
.pt-traffic {
  display: flex;
  gap: 7px;
}
.pt-light {
  width: 12px; height: 12px; border-radius: 50%;
  display: inline-block;
}
.pt-light-red { background: #FF5F57; }
.pt-light-amber { background: #FEBC2E; }
.pt-light-green { background: #28C840; }
.pt-titlebar {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  text-transform: none;
}

/* Body */
.pt-body {
  padding: 28px 32px 24px;
  background: var(--white);
}

/* Top: domain + verdict */
.pt-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.pt-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.pt-domain h4 {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.2;
}
.pt-meta {
  display: flex;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.pt-dot { opacity: 0.5; }
.pt-verdict {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: rgba(32, 168, 158, 0.08);
  border: 1px solid rgba(32, 168, 158, 0.25);
  border-radius: 10px;
}
.pt-grade {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--cyan-deep);
  line-height: 1;
}
.pt-verdict-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pt-status {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pt-status-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Hero score row */
.pt-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.pt-score-block {}
.pt-score-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.pt-score-num {
  font-family: var(--display);
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 14px;
}
.pt-score-max {
  font-size: 28px;
  color: var(--ink-mute);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.pt-score-bar {
  height: 6px;
  background: var(--cream-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.pt-score-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan));
  border-radius: 999px;
}
.pt-score-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}

/* Category mini-bars */
.pt-cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 32px;
  align-content: center;
}
.pt-cat-mini {}
.pt-cat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.pt-cat-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pt-cat-pass {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--cyan-deep);
  letter-spacing: -0.01em;
}
.pt-cat-pass.warn { color: #C97B1A; }
.pt-cat-bar {
  height: 4px;
  background: var(--cream-2);
  border-radius: 999px;
  overflow: hidden;
}
.pt-cat-fill {
  height: 100%;
  border-radius: 999px;
}
.pt-cat-fill.pass { background: var(--cyan-deep); }
.pt-cat-fill.warn { background: #E9A23B; }
.pt-cat-fill.fail { background: var(--coral); }

/* Check log */
.pt-checks {
  padding-top: 24px;
}
.pt-checks-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pt-checks-count {
  color: var(--ink-mute);
  letter-spacing: 0.08em;
}
.pt-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-radius: 6px;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.pt-row:last-child { border-bottom: none; }
.pt-row-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.pt-row.pass .pt-row-icon {
  background: rgba(32, 168, 158, 0.15);
  color: var(--cyan-deep);
}
.pt-row.warn .pt-row-icon {
  background: rgba(233, 162, 59, 0.18);
  color: #C97B1A;
}
.pt-row.fail .pt-row-icon {
  background: rgba(240, 88, 45, 0.15);
  color: var(--coral);
}
.pt-row-label {
  color: var(--ink-soft);
  font-weight: 500;
}
.pt-row-val {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

/* Redacted zone — blurred + lock overlay */
.pt-redact-zone {
  position: relative;
  margin-top: 8px;
  border-top: 1px dashed var(--line-strong);
  padding-top: 8px;
}
.pt-redact-zone .pt-row {
  filter: blur(5px);
  opacity: 0.55;
  user-select: none;
  pointer-events: none;
}
.pt-redact-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--navy);
  color: var(--white);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px -8px rgba(10, 39, 51, 0.35);
  white-space: nowrap;
}
.pt-redact-badge svg {
  flex-shrink: 0;
  opacity: 0.9;
}

/* Footer */
.pt-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
  padding: 14px 18px;
  background: var(--cream);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pt-footer-brand { color: var(--ink-soft); font-weight: 600; }
.pt-footer-rec { color: var(--cyan-deep); font-weight: 600; }

/* Caption below mockup */
.pt-caption {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-mute);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive */
@media (max-width: 880px) {
  .pt-body { padding: 22px 20px 18px; }
  .pt-top { flex-direction: column; gap: 16px; }
  .pt-hero { grid-template-columns: 1fr; gap: 20px; }
  .pt-cats { grid-template-columns: 1fr; gap: 12px; }
  .pt-score-num { font-size: 56px; }
  .pt-redact-badge {
    font-size: 10px;
    padding: 10px 14px;
    letter-spacing: 0.1em;
  }
  .pt-row { grid-template-columns: 22px 1fr; }
  .pt-row-val { grid-column: 2; justify-self: start; }
}


/* ---------- Story block (post-hero · state of link building) ---------- */
.story-block {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
.story-block .eyebrow { grid-column: 1 / -1; }
.story-h {
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 14ch;
  margin: 0;
  text-wrap: balance;
}
.story-body { color: var(--ink-soft); max-width: 56ch; }
.story-body p { margin: 0 0 18px 0; }
.story-body p:last-child { margin-bottom: 0; }
.story-body .story-lede {
  font-size: clamp(19px, 1.35vw, 22px);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 24px;
}
.story-body strong { color: var(--ink); }

.story-pillars {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(56px, 7vw, 88px);
  border-top: 1px solid var(--line-strong);
}
.story-pillar {
  padding: 32px 28px 0 0;
  border-right: 1px solid var(--line);
  position: relative;
}
.story-pillar:last-child { border-right: none; padding-right: 0; }
.story-pillar + .story-pillar { padding-left: 28px; }
.story-pillar-num {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-deep);
  display: block;
  margin-bottom: 14px;
}
.story-pillar h4 {
  font-size: 19px;
  line-height: 1.25;
  margin: 0 0 10px 0;
  color: var(--ink);
}
.story-pillar p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.story-pillar em { font-style: italic; color: var(--ink); }

@media (max-width: 880px) {
  .story-block { grid-template-columns: 1fr; gap: 28px; }
  .story-h { max-width: none; }
  .story-pillars { grid-template-columns: 1fr; gap: 0; }
  .story-pillar {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 24px 0;
  }
  .story-pillar:last-child { border-bottom: none; }
  .story-pillar + .story-pillar { padding-left: 0; }
}


/* ---------- Mock report (Reporting & Transparency section) ---------- */
.report-mock {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(10, 39, 51, 0.08), 0 1px 0 rgba(10, 39, 51, 0.04);
  position: relative;
}
.report-mock-chrome {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}
.report-dots { display: flex; gap: 6px; }
.report-dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--line);
}
.report-url {
  flex: 1;
  text-align: center;
  letter-spacing: 0.02em;
}
.report-url strong { color: var(--ink); font-weight: 600; }
.report-status {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.report-status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(32, 168, 158, 0.18);
}
.report-body { padding: 32px 28px 0; position: relative; }
.report-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.report-summary { display: flex; gap: 48px; }
.report-summary-block { display: flex; flex-direction: column; gap: 4px; }
.report-summary-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.report-summary-num.is-pending { color: var(--coral); }
.report-summary-sub {
  font-size: 18px;
  color: var(--ink-3);
  font-weight: 500;
  margin-left: 2px;
}
.report-summary-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.report-filters { display: flex; gap: 8px; }
.report-filter {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-3);
  background: var(--white);
}
.report-filter.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}
.report-table {
  display: flex;
  flex-direction: column;
}
.report-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 0.8fr 0.8fr 0.7fr;
  gap: 16px;
  padding: 16px 0;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.report-row-head {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 14px 0 12px;
}
.report-domain {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.report-domain small {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 400;
}
.report-score {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
}
.report-date {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  width: max-content;
}
.status-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
}
.status-pill.is-live {
  background: rgba(32, 168, 158, 0.12);
  color: var(--teal-deep, #0d6962);
}
.status-pill.is-live::before { background: var(--teal); }
.status-pill.is-pending {
  background: rgba(240, 88, 45, 0.10);
  color: var(--coral);
}
.status-pill.is-pending::before { background: var(--coral); }
.report-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white));
  pointer-events: none;
}
.report-caption {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 16px;
}

/* ---------- Cadence cards ---------- */
.cadence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
}
.cadence-card {
  padding: 32px 28px 36px;
  border-right: 1px solid var(--line);
  background: var(--white);
}
.cadence-card:last-child { border-right: none; }
.cadence-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--teal);
}
.cadence-card h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  margin: 12px 0 12px;
  letter-spacing: -0.01em;
}
.cadence-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 20px;
}
.cadence-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

@media (max-width: 880px) {
  .report-row {
    grid-template-columns: 1fr 0.8fr;
    gap: 8px;
    padding: 12px 0;
  }
  .report-row-head { display: none; }
  .report-row > .report-score,
  .report-row > .report-date { display: none; }
  .report-summary { gap: 24px; }
  .report-summary-num { font-size: 32px; }
  .cadence-grid {
    grid-template-columns: 1fr;
  }
  .cadence-card {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .cadence-card:last-child { border-bottom: none; }
}


/* ---------- Google Sheets style mock ---------- */
.sheet-mock {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(10, 39, 51, 0.10), 0 1px 0 rgba(10, 39, 51, 0.04);
  font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  color: #222;
}
.sheet-chrome {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: #F1F3F4;
  border-bottom: 1px solid #DADCE0;
}
.sheet-dots { display: flex; gap: 6px; }
.sheet-dots span {
  width: 11px; height: 11px; border-radius: 50%;
  background: #DADCE0;
}
.sheet-dots span:nth-child(1) { background: #FF5F57; }
.sheet-dots span:nth-child(2) { background: #FEBC2E; }
.sheet-dots span:nth-child(3) { background: #28C840; }
.sheet-tab {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--white);
  border-radius: 6px 6px 0 0;
  font-size: 12px;
  color: #444;
  max-width: 380px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-tab-icon {
  width: 16px; height: 16px;
  background: #0F9D58;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font-size: 10px;
  flex-shrink: 0;
}
.sheet-actions { display: flex; gap: 8px; align-items: center; }
.sheet-share-btn {
  background: #1A73E8;
  color: white;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}
.sheet-logos {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--white);
  border-bottom: 1px solid #DADCE0;
}
.sheet-logo-em {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.sheet-logo-divider {
  width: 1px;
  height: 18px;
  background: #DADCE0;
}
.sheet-logo-client {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border: 1px dashed #DADCE0;
  border-radius: 4px;
}
.sheet-colrow {
  display: grid;
  grid-template-columns: 36px 80px 1.2fr 1.6fr 1.4fr 0.5fr 0.7fr 0.5fr 1.1fr 1.1fr;
  background: #F8F9FA;
  border-bottom: 1px solid #DADCE0;
  font-size: 11px;
  color: #5F6368;
  font-weight: 500;
}
.sheet-colrow span {
  padding: 5px 8px;
  text-align: center;
  border-right: 1px solid #E8EAED;
}
.sheet-colrow span:last-child { border-right: none; }
.sheet-corner { background: #F1F3F4; }
.sheet-row {
  display: grid;
  grid-template-columns: 36px 80px 1.2fr 1.6fr 1.4fr 0.5fr 0.7fr 0.5fr 1.1fr 1.1fr;
  border-bottom: 1px solid #E8EAED;
  background: var(--white);
}
.sheet-row > span {
  padding: 8px 10px;
  font-size: 11.5px;
  border-right: 1px solid #E8EAED;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}
.sheet-row > span:last-child { border-right: none; }
.sheet-rownum {
  background: #F8F9FA;
  color: #5F6368;
  text-align: center;
  font-size: 10px;
  justify-content: center;
}
.sheet-row-head {
  background: #B7472A !important;
  color: white;
  font-weight: 600;
  font-size: 11px;
}
.sheet-row-head > span {
  border-right: 1px solid rgba(255,255,255,0.2);
  background: #B7472A;
  color: white;
}
.sheet-row-head > .sheet-rownum {
  background: #F8F9FA;
  color: #5F6368;
}
.sheet-link {
  color: #1A73E8 !important;
  text-decoration: underline;
  font-size: 11px;
}
.sheet-link-target { color: #1A73E8 !important; }
.sheet-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  padding: 3px 8px !important;
  border-radius: 3px;
  font-weight: 500;
  white-space: nowrap;
}
.sheet-row > .sheet-tag {
  border-right: 1px solid #E8EAED;
  margin: 4px;
  padding: 3px 8px !important;
}
.tag-branded { background: #FFF2CC; color: #6B5400; }
.tag-client { background: #D9EAD3; color: #2E5E1F; }
.tag-geo { background: #FCE5CD; color: #8E4F1A; }
.tag-hpv { background: #F4CCCC; color: #7F2A2A; }
.tag-unlinked { background: #EAD1DC; color: #6F2752; }
.tag-listicle { background: #C9E5C0; color: #2F5C26; }
.tag-pr { background: #CFE2F3; color: #1F4E79; }
.sheet-fade {
  height: 32px;
  background: linear-gradient(to bottom, transparent, rgba(248, 249, 250, 0.6));
  pointer-events: none;
}
.sheet-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 8px;
  background: #F8F9FA;
  border-top: 1px solid #DADCE0;
  font-size: 11px;
}
.sheet-tabs-add {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5F6368;
  font-size: 16px;
}
.sheet-tabs-tab {
  padding: 5px 14px;
  border-radius: 3px 3px 0 0;
  color: #5F6368;
  font-size: 11px;
}
.sheet-tabs-tab.is-active {
  background: var(--white);
  color: #1A73E8;
  font-weight: 600;
  box-shadow: 0 -1px 0 #1A73E8 inset;
}
@media (max-width: 980px) {
  .sheet-mock { font-size: 10px; }
  .sheet-colrow,
  .sheet-row {
    grid-template-columns: 28px 80px 1fr 0.7fr 1fr;
  }
  .sheet-colrow span:nth-child(n+7),
  .sheet-row > span:nth-child(n+7),
  .sheet-row > .sheet-link-target,
  .sheet-row-head > span:nth-child(n+7),
  .sheet-row-head > .sheet-link-target {
    display: none;
  }
  .sheet-colrow span:nth-child(5),
  .sheet-row > span:nth-child(5) { display: none; }
  .sheet-tab { font-size: 10px; max-width: 200px; }
  .sheet-share-btn { display: none; }
  .sheet-tabs { overflow-x: auto; }
  .sheet-tabs-tab { white-space: nowrap; }
}


/* ---------- R&D Lab credibility band ---------- */
.rd-band {
  margin-top: 72px;
  background: var(--ink);
  color: var(--white);
  border-radius: 16px;
  padding: 56px 64px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(10, 39, 51, 0.18);
}
.rd-band::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 40%;
  background:
    radial-gradient(circle at 70% 30%, rgba(29, 170, 224, 0.18), transparent 60%),
    radial-gradient(circle at 90% 80%, rgba(32, 168, 158, 0.14), transparent 55%);
  pointer-events: none;
}
.rd-band > * { position: relative; z-index: 1; }
.rd-eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 14px;
}
.rd-band h3 {
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  color: var(--white);
}
.rd-band p {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 52ch;
  margin: 0 0 20px;
}
.rd-band p strong { color: var(--white); }
.rd-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan);
  padding-bottom: 3px;
}
.rd-link:hover { color: var(--white); border-color: var(--white); }
.rd-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 36px;
  padding: 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}
.rd-stat-num {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  color: var(--cyan);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.rd-stat-lbl {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 880px) {
  .rd-band {
    grid-template-columns: 1fr;
    padding: 40px 28px;
    gap: 32px;
  }
  .rd-stats { grid-template-columns: 1fr 1fr; gap: 22px 24px; padding: 24px; }
  .rd-stat-num { font-size: 30px; }
}

/* ---------- Audit CTA — secondary option ---------- */
.audit-alt {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(10, 39, 51, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--ink-3);
}
.audit-alt strong { color: var(--ink); font-weight: 600; }
.audit-alt a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid var(--teal);
  padding-bottom: 2px;
  font-weight: 500;
}
.audit-alt a:hover { color: var(--cyan-deep); border-color: var(--cyan-deep); }

/* ---------- PVI Band — Placement Variance Index ---------- */
.pvi-section {
  background: var(--cream, #f5f1e8);
  padding: 96px 0;
  border-top: 1px solid rgba(10, 39, 51, 0.06);
  border-bottom: 1px solid rgba(10, 39, 51, 0.06);
}
.pvi-band {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: start;
}
.pvi-eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-deep);
  margin: 0 0 16px;
}
.pvi-copy h2 {
  font-family: var(--display);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: var(--ink);
}
.pvi-lede {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 52ch;
}
.pvi-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2, #28424f);
  margin: 0 0 28px;
  max-width: 52ch;
}
.pvi-lede strong, .pvi-text strong { color: var(--ink); font-weight: 600; }
.pvi-bullets {
  list-style: none;
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(10, 39, 51, 0.12);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pvi-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.pvi-bullets li strong { font-weight: 600; }
.pvi-bullet-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan-deep);
  margin-top: 8px;
}

/* PVI chart chrome */
.pvi-chart-chrome {
  background: var(--white);
  border: 1px solid rgba(10, 39, 51, 0.12);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(10, 39, 51, 0.08);
}
.pvi-chart-header {
  padding: 18px 22px 16px;
  border-bottom: 1px solid rgba(10, 39, 51, 0.08);
  background: linear-gradient(to bottom, rgba(10, 39, 51, 0.02), transparent);
}
.pvi-chart-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pvi-chart-titlebar {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
  font-weight: 600;
}
.pvi-chart-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a8e6f;
  font-weight: 600;
}
.pvi-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2cb98a;
  box-shadow: 0 0 0 3px rgba(44, 185, 138, 0.18);
  animation: pvi-pulse 2.4s ease-in-out infinite;
}
@keyframes pvi-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(44, 185, 138, 0.18); }
  50% { box-shadow: 0 0 0 6px rgba(44, 185, 138, 0.04); }
}
.pvi-chart-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(10, 39, 51, 0.08);
  border: 1px solid rgba(10, 39, 51, 0.08);
  border-radius: 6px;
  overflow: hidden;
}
.pvi-meta-item {
  background: var(--white);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pvi-meta-lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute, #6b7d85);
}
.pvi-meta-val {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pvi-meta-val-good { color: #1a8e6f; }

.pvi-chart-body {
  padding: 18px 14px 8px;
}
.pvi-svg {
  width: 100%;
  height: 280px;
  display: block;
  overflow: visible;
}
.pvi-grid line {
  stroke: rgba(10, 39, 51, 0.06);
  stroke-width: 1;
}
.pvi-axis-y text, .pvi-axis-x text {
  font-family: var(--mono, ui-monospace);
  font-size: 9.5px;
  fill: var(--ink-mute, #6b7d85);
  letter-spacing: 0.04em;
}
.pvi-axis-y text { text-anchor: end; }
.pvi-axis-x text { text-anchor: middle; }

.pvi-target-line {
  stroke: rgba(10, 39, 51, 0.35);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.pvi-target-lbl {
  font-family: var(--mono, ui-monospace);
  font-size: 8.5px;
  fill: var(--ink);
  letter-spacing: 0.12em;
  text-anchor: end;
  font-weight: 600;
}

.pvi-forecast-band {
  fill: rgba(29, 170, 224, 0.06);
}
.pvi-forecast-line {
  fill: none;
  stroke: rgba(29, 170, 224, 0.55);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.pvi-actual-line {
  fill: none;
  stroke: var(--cyan-deep, #0e8eb8);
  stroke-width: 2.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.pvi-actual-dots circle {
  fill: var(--cyan-deep, #0e8eb8);
}
.pvi-actual-end {
  fill: #2cb98a !important;
  stroke: var(--white);
  stroke-width: 1.5;
}

.pvi-pivot-line {
  stroke: rgba(217, 78, 50, 0.4);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.pvi-pivot-dot {
  fill: #d94e32;
  stroke: var(--white);
  stroke-width: 1.5;
}
.pvi-pivot-ring {
  fill: none;
  stroke: rgba(217, 78, 50, 0.35);
  stroke-width: 1;
  animation: pvi-ring 2.6s ease-out infinite;
  transform-origin: 230px 205px;
}
@keyframes pvi-ring {
  0% { r: 8; opacity: 0.7; }
  100% { r: 18; opacity: 0; }
}
.pvi-pivot-annot rect {
  fill: rgba(217, 78, 50, 0.08);
  stroke: rgba(217, 78, 50, 0.35);
  stroke-width: 1;
}
.pvi-pivot-annot-tag {
  font-family: var(--mono, ui-monospace);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  fill: #b8401e;
  font-weight: 700;
}
.pvi-pivot-annot-text {
  font-family: var(--mono, ui-monospace);
  font-size: 9px;
  fill: var(--ink);
  letter-spacing: 0.02em;
}

.pvi-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 12px 22px 18px;
  border-top: 1px solid rgba(10, 39, 51, 0.06);
  margin-top: 4px;
}
.pvi-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-2, #28424f);
}
.pvi-legend-swatch {
  width: 14px;
  height: 2px;
  border-radius: 1px;
}
.pvi-legend-forecast {
  background: repeating-linear-gradient(to right, rgba(29, 170, 224, 0.55) 0 4px, transparent 4px 7px);
  height: 2px;
}
.pvi-legend-actual { background: var(--cyan-deep, #0e8eb8); height: 2.5px; }
.pvi-legend-pivot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d94e32;
}

.pvi-caption {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute, #6b7d85);
  text-align: center;
}

@media (max-width: 980px) {
  .pvi-band { grid-template-columns: 1fr; gap: 40px; }
  .pvi-section { padding: 64px 0; }
  .pvi-svg { height: 240px; }
}
@media (max-width: 600px) {
  .pvi-chart-meta { grid-template-columns: 1fr 1fr; }
  .pvi-meta-item:last-child { grid-column: span 2; }
}


/* ---------- Link Building hero — split with Provenance radar ---------- */
.page-head-lb { padding-top: clamp(72px, 8vw, 110px); padding-bottom: clamp(72px, 8vw, 110px); }
.lb-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
}
.lb-hero-copy h1 { margin-bottom: 28px; }
.lb-hero-copy .lede { max-width: 56ch; }

.lb-hero-viz { position: relative; }

/* Radar card */
.ps-radar {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  border: 1px solid rgba(70, 208, 255, 0.18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 50%, rgba(29, 170, 224, 0.12) 0%, rgba(10, 39, 51, 0) 65%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
  padding: 44px 14px 38px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 80px rgba(0,0,0,0.25);
}

.ps-radar-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ps-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.10);
  stroke-width: 1;
}
.ps-spoke {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.ps-data {
  fill: url(#psFill);
  stroke: var(--cyan);
  stroke-width: 1.75;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 14px rgba(29, 170, 224, 0.35));
  animation: psDraw 1.2s cubic-bezier(.2,.7,.2,1) both;
  transform-origin: center;
}
.ps-pt {
  fill: var(--cyan);
  stroke: #0A2733;
  stroke-width: 2;
  animation: psPop 0.6s 0.6s cubic-bezier(.2,.9,.2,1) both;
  transform-origin: center;
}

@keyframes psDraw {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes psPop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

.ps-score {
  font-family: var(--display);
  font-weight: 800;
  font-size: 38px;
  letter-spacing: -0.02em;
  fill: var(--white);
}
.ps-score-max {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--cyan);
}
.ps-labels text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}
.ps-chips text {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  fill: var(--cyan);
  font-weight: 600;
}

/* Top header bar */
.ps-radar-head {
  position: absolute;
  top: 18px; left: 22px; right: 22px;
  display: flex; justify-content: space-between; align-items: flex-start;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ps-head-l, .ps-head-r {
  display: flex; flex-direction: column; gap: 3px;
}
.ps-head-r { align-items: flex-end; }
.ps-meta-k { color: rgba(255, 255, 255, 0.45); font-weight: 500; }
.ps-meta-v {
  color: var(--white);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: none;
  font-weight: 600;
}
.ps-meta-pass {
  color: #5fe0a0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ps-radar-foot {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.ps-foot-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(29, 170, 224, 0.8);
  animation: psPulse 2s ease-in-out infinite;
}
@keyframes psPulse {
  0%, 100% { opacity: 0.6; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.15); }
}

@media (max-width: 980px) {
  .lb-hero { grid-template-columns: 1fr; gap: 56px; }
  .ps-radar { margin: 0 auto; max-width: 440px; }
}
@media (max-width: 600px) {
  .ps-radar { padding: 14px; }
  .ps-radar-meta { font-size: 9px; }
  .ps-radar-meta-tl, .ps-radar-meta-tr { top: 10px; }
  .ps-radar-meta-tl { left: 12px; }
  .ps-radar-meta-tr { right: 12px; }
  .ps-radar-meta-bl, .ps-radar-meta-br { bottom: 38px; }
  .ps-radar-meta-bl { left: 12px; }
  .ps-radar-meta-br { right: 12px; }
  .ps-radar-foot { font-size: 9.5px; bottom: 12px; }
}


/* ============================================================
   V3 — Origin / Human-in-the-loop / Editorial
   ============================================================ */

/* ---------- ORIGIN TIMELINE (homepage) ---------- */
.origin {
  background: var(--cream-2);
  position: relative;
  overflow: hidden;
}
.origin::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(10,39,51,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,39,51,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 100%);
}
.origin .wrap { position: relative; z-index: 1; }

.origin-tl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 56px;
  position: relative;
}
.origin-tl::before {
  content: "";
  position: absolute;
  top: 64px; left: 4%; right: 4%;
  height: 2px;
  background: linear-gradient(90deg,
    var(--cyan-deep) 0%,
    var(--cyan-deep) 25%,
    var(--cyan) 50%,
    var(--coral) 75%,
    var(--cyan-deep) 100%
  );
  opacity: 0.35;
  z-index: 0;
}
.origin-step {
  position: relative; z-index: 1;
  padding: 0 22px;
  display: flex; flex-direction: column; gap: 16px;
  border-left: 1px dashed var(--line-strong);
}
.origin-step:first-child { border-left: none; padding-left: 0; }
.origin-step:last-child { padding-right: 0; }
.origin-step .ord {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.origin-step .dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--cream-2);
  border: 2px solid var(--cyan-deep);
  display: grid; place-items: center;
  position: relative;
  margin-top: 16px;
}
.origin-step .dot::after {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan-deep);
}
.origin-step.is-coral .dot { border-color: var(--coral); }
.origin-step.is-coral .dot::after { background: var(--coral); }
.origin-step.is-navy .dot { border-color: var(--navy); }
.origin-step.is-navy .dot::after { background: var(--navy); }
.origin-step .role {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cyan-deep);
}
.origin-step.is-coral .role { color: var(--coral); }
.origin-step.is-navy .role { color: var(--navy); }
.origin-step h3 {
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
.origin-step p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.origin-step .marker {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 4px;
}
@media (max-width: 980px) {
  .origin-tl { grid-template-columns: 1fr 1fr; }
  .origin-tl::before { display: none; }
  .origin-step { border-left: none; padding: 24px 0; border-top: 1px solid var(--line); }
  .origin-step:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--line); }
  .origin-step:nth-child(-n+2) { border-top: none; padding-top: 0; }
}
@media (max-width: 580px) {
  .origin-tl { grid-template-columns: 1fr; }
  .origin-step:nth-child(n) { padding: 24px 0; border-left: none; border-top: 1px solid var(--line); }
  .origin-step:first-child { border-top: none; padding-top: 0; }
}

/* ---------- DOUBLE ACT (human-in-the-loop spine) ---------- */
.double-act {
  background: var(--navy);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.double-act::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 25% 50%, rgba(29,170,224,0.12), transparent 60%),
    radial-gradient(ellipse 60% 50% at 75% 50%, rgba(240,88,45,0.10), transparent 60%);
  pointer-events: none;
}
.double-act .wrap { position: relative; z-index: 1; }
.double-act h2 { color: var(--white); }
.double-act h2 .accent { color: var(--cyan); }
.double-act .lede { color: var(--on-dark-mute); max-width: 64ch; }

.da-grid {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 0;
  align-items: stretch;
  margin-top: 48px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
}
.da-side {
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 18px;
}
.da-side .da-tag {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}
.da-side.is-human .da-tag { color: var(--coral); }
.da-side h3 {
  color: var(--white);
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.2;
  margin: 0;
}
.da-side p { color: var(--on-dark-mute); font-size: 15px; line-height: 1.6; margin: 0; }
.da-side ul {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
.da-side li {
  font-size: 14px;
  color: var(--on-dark-mute);
  padding-left: 22px;
  position: relative;
}
.da-side li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 12px; height: 1px;
  background: var(--cyan);
}
.da-side.is-human li::before { background: var(--coral); }
.da-side .da-stat {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex; align-items: baseline; gap: 10px;
}
.da-side .da-stat .num {
  font-family: var(--display);
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cyan);
}
.da-side.is-human .da-stat .num { color: var(--coral); }
.da-side .da-stat .lbl {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.da-loop {
  position: relative;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.18);
  border-left: 1px solid rgba(255,255,255,0.10);
  border-right: 1px solid rgba(255,255,255,0.10);
}
.da-loop svg { width: 56px; height: 56px; }
.da-loop .da-loop-label {
  position: absolute;
  top: 24px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  white-space: nowrap;
}
.da-loop .da-loop-foot {
  position: absolute;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  white-space: nowrap;
}
@keyframes daSpin { to { transform: rotate(360deg); } }
.da-loop svg .da-arc {
  animation: daSpin 18s linear infinite;
  transform-origin: center;
}
@media (max-width: 880px) {
  .da-grid { grid-template-columns: 1fr; }
  .da-loop { padding: 24px; border-left: none; border-right: none; border-top: 1px solid rgba(255,255,255,0.10); border-bottom: 1px solid rgba(255,255,255,0.10); }
  .da-loop .da-loop-label, .da-loop .da-loop-foot { position: static; transform: none; margin: 6px 0; }
}

/* ---------- HUMAN-IN-LOOP MICRO-CHIP (used inline across pages) ---------- */
.hitl-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(29,170,224,0.08);
  border: 1px solid rgba(29,170,224,0.25);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan-deep);
  font-weight: 600;
}
.hitl-chip::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 3px rgba(240,88,45,0.18);
}
.hitl-chip.on-dark {
  background: rgba(29,170,224,0.10);
  border-color: rgba(29,170,224,0.35);
  color: var(--cyan);
}

/* ---------- EDITORIAL CHAPTERS (EMintel / About long-form) ---------- */
.editorial {
  background: var(--cream);
}
.editorial-head {
  max-width: 760px;
  margin-bottom: 64px;
}
.editorial-head .kicker {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 16px;
}
.chapter {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 64px;
  padding: 56px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.chapter:last-child { border-bottom: 1px solid var(--line); }
.chapter-meta {
  position: sticky; top: 120px;
}
.chapter-meta .num {
  font-family: var(--display);
  font-size: 56px; font-weight: 200;
  letter-spacing: -0.04em;
  color: var(--cyan-deep);
  line-height: 1;
  margin-bottom: 12px;
}
.chapter-meta .role {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}
.chapter-meta .when {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.10em;
  color: var(--ink-mute);
}
.chapter-body h3 {
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.15;
  margin: 0 0 20px;
  text-wrap: balance;
  letter-spacing: -0.01em;
}
.chapter-body p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 16px;
  max-width: 64ch;
}
.chapter-body p:last-child { margin-bottom: 0; }
.chapter-body .pull {
  display: block;
  margin: 28px 0 4px;
  padding-left: 20px;
  border-left: 3px solid var(--coral);
  font-family: var(--display);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.chapter-body .pull cite {
  display: block;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-style: normal;
  font-weight: 500;
  margin-top: 10px;
}
.chapter.is-coral .chapter-meta .num { color: var(--coral); }
.chapter.is-navy .chapter-meta .num { color: var(--navy); }
@media (max-width: 880px) {
  .chapter { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .chapter-meta { position: static; }
  .chapter-meta .num { font-size: 44px; }
}

/* ---------- OUTCOME LEAD STAT (homepage hero accent + footer CTA) ---------- */
.outcome-lead {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(29,170,224,0.10);
  border: 1px solid rgba(29,170,224,0.30);
  margin-top: 32px;
}
.outcome-lead .num {
  font-family: var(--display);
  font-size: 22px; font-weight: 800;
  color: var(--cyan);
  letter-spacing: -0.02em;
}
.outcome-lead .lbl {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.outcome-lead .who {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.10em;
  color: var(--cyan);
  font-weight: 600;
}

/* ---- Breadcrumbs (added for sitewide navigation + BreadcrumbList schema) ---- */
.breadcrumbs {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.breadcrumbs .wrap {
  padding: 14px var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: var(--ink-mute);
}
.breadcrumbs li:not(:last-child)::after {
  content: '/';
  margin-left: 10px;
  opacity: 0.45;
}
.breadcrumbs a {
  color: var(--ink-mute);
  text-decoration: none;
  transition: color .15s;
}
.breadcrumbs a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.breadcrumbs [aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
}

/* ---- Footer address block ---- */
.footer-addr {
  font-style: normal;
  font-size: 13px;
  line-height: 1.7;
  color: var(--on-dark-mute);
  margin-top: 12px;
}
.footer-addr strong {
  color: var(--on-dark);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 11px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 4px;
}
.footer-addr a {
  color: var(--on-dark-mute);
  text-decoration: none;
}
.footer-addr a:hover {
  color: var(--on-dark);
  text-decoration: underline;
}

/* ---- Testimonial block (used in author bios) ---- */
.testimonial-block {
  margin: 28px 0;
  padding: 22px 26px;
  background: var(--cream);
  border-left: 3px solid var(--cyan-deep);
  border-radius: 0 8px 8px 0;
}
.testimonial-block blockquote {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  quotes: """ """;
}
.testimonial-block figcaption {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

/* ---- Static (non-collapsible) FAQ list — h3 + p pairs ---- */
.faq-static {
  max-width: 820px;
  margin: 0 auto;
}
.faq-static h3 {
  font-family: var(--display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 12px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.faq-static h3:first-child {
  padding-top: 0;
  border-top: none;
}
.faq-static p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 28px;
}
.faq-static p:last-child {
  margin-bottom: 0;
}

/* ---- Checkbox group (used on contact form for "What kind of help?") ---- */
.check-group {
  border: none;
  padding: 0;
  margin: 0;
}
.check-group legend {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 0;
  margin-bottom: 4px;
}
.check-hint {
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0 0 12px;
}
.check-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-soft);
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.check:hover { border-color: var(--ink-soft); }
.check input[type="checkbox"] {
  margin: 0;
  accent-color: var(--cyan-deep);
  flex-shrink: 0;
}
.check:has(input:checked) {
  border-color: var(--cyan-deep);
  background: rgba(32,168,158,0.06);
  color: var(--ink);
}
@media (max-width: 600px) {
  .check-grid { grid-template-columns: 1fr; }
}