/* Doo Digital - shared styles for inner pages (Home keeps its own hand-built styles). */
:root {
  --red: #c8161f;
  --red-dark: #a50f17;
  --ink-1: #1d1d1f;
  --ink-2: #424245;
  --ink-3: #6e6e73;
  --line: #e3e3e8;
  --bg: #f5f5f7;
  --display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(18px, 5.6vw, 96px);
  --container: min(1220px, calc(100% - 2 * var(--gutter)));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-weight: 600;
}

.skip:focus {
  top: 12px;
}

.wrap {
  width: var(--container);
  margin: 0 auto;
}

/* ---------- Header + mega menu ---------- */
.site-header {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  width: var(--container);
  margin: 0 auto;
  padding: clamp(14px, 2.4vh, 22px) 0;
}

.logo img {
  height: 30px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.8vw, 14px);
}

.nav-item {
  position: static;
}

.nav-item.small {
  position: relative;
}

.nav-link {
  appearance: none;
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 999px;
  font: 500 15px/1 var(--sans);
  letter-spacing: -0.01em;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 200ms, color 200ms;
}

.nav-link:hover,
.nav-link[aria-expanded='true'],
.nav-link[aria-current='page'] {
  color: var(--ink-1);
  background: rgba(29, 29, 31, 0.06);
}

.chev {
  width: 9px;
  height: 6px;
  transition: transform 250ms var(--ease);
}

.nav-link[aria-expanded='true'] .chev {
  transform: rotate(180deg);
}

.ai-dot {
  color: var(--red);
  font-weight: 600;
}

.mega {
  position: absolute;
  top: calc(100% - 6px);
  left: 0;
  right: 0;
  padding: 22px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.04);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s 220ms;
}

.nav-item.small .mega {
  left: 50%;
  right: auto;
  top: calc(100% + 8px);
  width: 300px;
  padding: 10px;
  margin-left: -150px;
}

.nav-item.open .mega {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s;
}

.mega-grid {
  display: grid;
  gap: 4px 18px;
}

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

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

.mega-col {
  display: grid;
  align-content: start;
  gap: 2px;
}

.mega-h {
  margin: 0 0 6px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
}

.mega a {
  display: block;
  padding: 10px 12px;
  border-radius: 14px;
  transition: background 180ms;
}

.mega a:hover {
  background: var(--bg);
}

.mega a b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mega a span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-3);
}

.mega a.mega-card {
  background: var(--bg);
}

.mega a.mega-card span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--red);
  font-weight: 600;
}

.mega svg {
  width: 10px;
  height: 10px;
}

.mega-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 14px 12px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
}

.mega-foot-links {
  display: flex;
  gap: 18px;
}

.mega .mega-foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}

.mega .mega-foot a:hover {
  background: none;
  color: var(--red);
}

.mega .mega-foot a.strong {
  font-weight: 600;
  color: var(--ink-1);
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(29, 29, 31, 0.2);
  font-size: 14px;
  font-weight: 500;
  transition: background 200ms, color 200ms, border-color 200ms;
}

.btn-outline:hover {
  background: var(--red);
  border-color: var(--ink-1);
  color: #fff;
}

.arrow {
  width: 12px;
  height: 12px;
  transition: transform 200ms var(--ease);
}

a:hover .arrow {
  transform: translate(2px, -2px);
}

.menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(29, 29, 31, 0.2);
  background: none;
  color: var(--ink-1);
  cursor: pointer;
  place-items: center;
}

.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  position: relative;
  transition: transform 250ms var(--ease);
}

.menu-btn span::before,
.menu-btn span::after {
  content: '';
  position: absolute;
  left: 0;
}

.menu-btn span::before {
  top: -6px;
}

.menu-btn span::after {
  top: 6px;
}

.menu-btn[aria-expanded='true'] span {
  background: transparent;
}

.menu-btn[aria-expanded='true'] span::before {
  transform: translateY(6px) rotate(45deg);
}

.menu-btn[aria-expanded='true'] span::after {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  padding: 92px var(--gutter) 32px;
  background: #fff;
  overflow-y: auto;
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav details,
.mobile-nav a.top {
  border-bottom: 1px solid var(--line);
}

.mobile-nav summary,
.mobile-nav a.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  list-style: none;
  cursor: pointer;
}

.mobile-nav summary::-webkit-details-marker {
  display: none;
}

.mobile-nav summary::after {
  content: '+';
  font-weight: 400;
  color: var(--ink-3);
}

.mobile-nav details[open] summary::after {
  content: '–';
}

.mobile-nav details > div {
  display: grid;
  padding: 0 0 14px;
}

.mobile-nav details a {
  padding: 9px 0;
  font-size: 16px;
  color: var(--ink-2);
}

.mobile-nav details a.all {
  color: var(--red);
  font-weight: 600;
}

.mobile-nav .book {
  margin-top: 24px;
  justify-content: center;
}

/* ---------- Buttons ---------- */
.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  box-shadow: 0 16px 34px -16px rgba(200, 22, 31, 0.55);
  transition: background 200ms;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

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

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(29, 29, 31, 0.2);
  font-size: 15px;
  font-weight: 500;
  transition: background 250ms, color 250ms, border-color 250ms;
}

.btn-ghost:hover {
  background: var(--red);
  border-color: var(--ink-1);
  color: #fff;
}

.more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
}

.more:hover {
  color: var(--red);
}

/* ---------- Page hero ---------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--ink-3);
}

.crumbs li + li::before {
  content: '/';
  margin-right: 6px;
  color: #c7c7cc;
}

.crumbs a:hover {
  color: var(--red);
}

.page-hero {
  padding: clamp(28px, 4.4vw, 60px) clamp(24px, 4vw, 60px);
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 30px 80px -50px rgba(0, 0, 0, 0.25);
}

.page-hero.split {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

.kicker::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(36px, 5.2vw, 72px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  text-wrap: balance;
}

.answer {
  margin: 20px 0 0;
  max-width: 760px;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero-side {
  border-radius: 22px;
  overflow: hidden;
}

.stat-card {
  display: grid;
  gap: 4px;
  padding: 26px;
  border-radius: 22px;
  background: var(--bg);
}

.stat-card b {
  font-family: var(--display);
  font-size: clamp(44px, 5vw, 72px);
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--red);
}

.stat-card span {
  font-size: 15px;
  color: var(--ink-2);
}

.stat-card + .stat-card {
  margin-top: 10px;
}

.meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 22px;
  font-size: 14px;
  color: var(--ink-3);
}

.meta-line b {
  color: var(--ink-1);
}

/* ---------- Sections ---------- */
.sec {
  padding-top: clamp(32px, 4vw, 56px);
}

.h2 {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-wrap: balance;
}

.h2 em {
  font-style: normal;
  color: var(--red);
}

.blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.block {
  padding: clamp(24px, 3vw, 40px);
  background: #fff;
  border-radius: 24px;
}

.block.wide {
  grid-column: 1 / -1;
}

.block h2 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.block p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}

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

.ticks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.ticks li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-1);
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23c8161f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 16px no-repeat,
    #ffe9ea;
}

.ticks.cols {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 28px;
}

.steps {
  counter-reset: s;
}

.steps li::before {
  counter-increment: s;
  content: counter(s);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  top: 1px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* ---------- Cards (hubs) ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 180px;
  padding: 24px;
  background: #fff;
  border-radius: 24px;
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.3);
}

.card-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
}

.card h3 {
  margin: 10px 0 8px;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

.card .go {
  margin-top: auto;
  padding-top: 18px;
  font-size: 14px;
  font-weight: 600;
}

.card:hover .go {
  color: var(--red);
}

/* case-study cards: one white card, picture on top, text inside the same box (matches Home) */
.cards li:has(> .shot) {
  display: flex;
}

.shot {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  color: var(--ink-1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 40px -28px rgba(0, 0, 0, 0.25);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}

.shot:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 26px 50px -28px rgba(0, 0, 0, 0.32);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1328 / 1625;
  object-fit: cover;
  border-radius: 24px 24px 0 0;
  background: #e8e8ed;
}

.shot-cap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: 18px 20px 20px;
}

.shot-cap b {
  display: block;
  font-family: var(--display);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.shot-cap span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
}

.shot-cap span:not(.case) {
  margin-bottom: 16px;
}

.shot .case {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: #f5f5f7;
  border: 1px solid #f5f5f7;
  color: var(--ink-1);
  font-size: 13px;
  font-weight: 600;
  transition: background 250ms, color 250ms, border-color 250ms;
}

.shot:hover .case {
  background: var(--red);
  border-color: var(--ink-1);
  color: #fff;
}

.result {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink-1);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.4);
}

.result i {
  font-style: normal;
  color: var(--red);
}

/* narrow four-up cards on small laptops: keep the result badge above the client logo */
@media (min-width: 1021px) and (max-width: 1240px) {
  .result {
    top: 8px;
    left: 8px;
    padding: 5px 8px;
    font-size: 11px;
  }
}

/* ---------- Timeline, founder, quote ---------- */
.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.timeline li {
  padding: 18px;
  border-radius: 18px;
  background: var(--bg);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

.timeline b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: -0.03em;
  color: var(--ink-1);
}

.founder {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
}

.monogram {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------- FAQ ---------- */
.faq-list {
  padding: 6px clamp(20px, 3vw, 40px);
  background: #fff;
  border-radius: 24px;
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list details:last-child {
  border-bottom: 0;
}

.faq-list summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 20px 0;
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: '';
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    linear-gradient(var(--ink-1), var(--ink-1)) center / 12px 1.6px no-repeat,
    linear-gradient(var(--ink-1), var(--ink-1)) center / 1.6px 12px no-repeat,
    var(--bg);
  transition: transform 300ms var(--ease), background-color 300ms;
}

.faq-list details[open] summary::after {
  transform: rotate(45deg);
  background-color: #ffe9ea;
}

.faq-list details p {
  margin: -4px 0 20px;
  max-width: 760px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}

.faq-group {
  margin: 28px 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
}

/* ---------- Related + CTA ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips a {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 15px;
  font-weight: 500;
  transition: background 250ms, color 250ms, border-color 250ms;
}

.chips a:hover {
  background: var(--red);
  border-color: var(--ink-1);
  color: #fff;
}

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  padding: clamp(28px, 4vw, 56px);
  /* Doo red, not black: a deep red gradient with a soft highlight */
  background: radial-gradient(120% 140% at 85% 0%, rgba(255, 255, 255, 0.16), transparent 55%), linear-gradient(135deg, #d11f29, #a50f17);
  color: #fff;
  border-radius: 30px;
  box-shadow: 0 30px 60px -30px rgba(165, 15, 23, 0.55);
}

.cta-band h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  max-width: 640px;
}

.cta-band h2 em {
  font-style: normal;
  color: #ffd3d6;
}

.cta-band p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
}

.cta-band .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.cta-band .btn-ghost:hover {
  background: #fff;
  color: var(--red);
}
.cta-band .btn-solid {
  background: #fff;
  color: var(--red);
  box-shadow: 0 10px 24px -10px rgba(80, 0, 6, 0.45);
}
.cta-band .btn-solid:hover {
  background: #fbeced;
  color: var(--red-dark);
}
.cta-band .btn-ghost {
  border-color: rgba(255, 255, 255, 0.55);
}

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

/* ---------- Article (blog, guides) ---------- */
.article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.prose {
  padding: clamp(26px, 4vw, 56px);
  background: #fff;
  border-radius: 30px;
}

.prose h2 {
  margin: 38px 0 12px;
  font-family: var(--display);
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p,
.prose li {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
}

.prose p {
  margin: 0 0 16px;
}

.prose ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.prose li {
  margin-bottom: 8px;
}

.callout {
  margin: 0 0 22px;
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--bg);
}

.callout.red {
  background: #fff1f1;
}

.callout b {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
}

.callout p {
  margin: 0;
  color: var(--ink-1);
}

.callout ul {
  margin: 0;
}

.aside {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 14px;
}

.aside .block {
  padding: 22px;
}

.aside h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: -0.02em;
}

.aside p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

.author {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-3);
}

.author .monogram {
  width: 52px;
  height: 52px;
  font-size: 18px;
}

.author b {
  display: block;
  color: var(--ink-1);
  font-size: 15px;
}

.author a {
  color: var(--ink-1);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Glossary + legal table ---------- */
.terms {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.terms div {
  padding: 24px;
  background: #fff;
  border-radius: 22px;
}

.terms dt {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.terms dd {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.legal-table th,
.legal-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.legal-table th {
  font-size: 13px;
  color: var(--ink-3);
}

/* ---------- Forms ---------- */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.form {
  display: grid;
  gap: 14px;
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-size: 14px;
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #d2d2d7;
  background: #fff;
  font: 16px/1.4 var(--sans);
  color: var(--ink-1);
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink-1);
  box-shadow: 0 0 0 3px rgba(200, 22, 31, 0.15);
}

.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

.check input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--red);
}

.form-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

.form-note a {
  text-decoration: underline;
}

.form-status {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
}

.form-status:empty {
  display: none;
}

.form-status.ok {
  background: #eaf7ee;
  color: #135c2b;
}

.form-status.err {
  background: #fff1f1;
  color: #8e0a12;
}

.hp {
  position: absolute;
  left: -9999px;
}

/* ---------- Footer ---------- */
.foot {
  margin-top: clamp(48px, 6vw, 88px);
  padding: clamp(40px, 5vw, 64px) 0 28px;
  background: #fff;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-2);
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
}

.foot-brand p {
  margin: 16px 0 0;
  max-width: 280px;
  line-height: 1.55;
  color: var(--ink-3);
}

.foot h4 {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-1);
}

.foot ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.foot a:hover,
.foot button:hover {
  color: var(--red);
}

.foot-news {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: 40px;
  padding: 18px 22px;
  border-radius: 20px;
  background: var(--bg);
}

.foot-news p {
  margin: 0;
  color: var(--ink-2);
}

.foot-news p b {
  color: var(--ink-1);
}

.foot-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
}

.foot-bar nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.foot-bar button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ---------- Reveal ---------- */
/* ink video behind the hero (as on Home, lighter); the white hero card stays solid */
.has-ink {
  position: relative;
}

.hero-ink {
  position: absolute;
  z-index: -1;
  top: -160px;
  bottom: -80px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  /* fade out behind the logo (top-left) and towards the content below */
  -webkit-mask-image: radial-gradient(520px 300px at 0 0, transparent 55%, #000 100%), linear-gradient(180deg, #000 60%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(520px 300px at 0 0, transparent 55%, #000 100%), linear-gradient(180deg, #000 60%, transparent);
  mask-composite: intersect;
}

.hero-ink video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% 60%;
  opacity: 0.18;
  mix-blend-mode: multiply;
  filter: brightness(1.25) contrast(1.1) saturate(0.7);
}

/* ---------- Industry showcase: Doo-style cards (lane track, copy + dashboard panel) ---------- */
.sc-head {
  max-width: none;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

.sc-head .h2 {
  margin-bottom: 12px;
}

.sc-lede {
  max-width: 1080px;
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}

.sc-mark {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dx-wrap {
  margin-top: 14px;
}

.dx-card {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: 28px;
  background: #fff;
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease), opacity 800ms var(--ease);
}

.dx-card.has-media {
  grid-template-columns: 0.62fr 1fr 1.08fr;
}

/* alternate sides: odd cards put the diagram panel on the left (side-by-side layouts only) */
@media (min-width: 1021px) {
  .dx-card.flip {
    grid-template-columns: 1.08fr 1fr;
  }
  .dx-card.flip .dx-copy {
    order: 2;
  }
}

.dx-card.in:hover {
  box-shadow: 0 26px 50px -34px rgba(0, 0, 0, 0.28);
}

.dx-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1328 / 1625;
  object-fit: cover;
  border-radius: 20px;
}

/* lane track from Home: a dashed line whose dot runs to the finish on hover */
.dx-track {
  position: relative;
  height: 2px;
  margin-bottom: 22px;
  background: repeating-linear-gradient(90deg, #d9d9de 0 8px, transparent 8px 14px);
}

.dx-track::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--red);
  transition: width 700ms var(--ease);
}

.dx-track::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--red);
  transition: left 700ms var(--ease), background 300ms;
}

.dx-card:hover .dx-track::before {
  width: 100%;
}

.dx-card:hover .dx-track::after {
  left: calc(100% - 10px);
  background: var(--red);
}

.dx-no {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.dx-no span::before {
  content: ' · ';
}

.dx-copy h2 {
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-wrap: balance;
}

.dx-copy h2 em {
  font-style: normal;
  color: var(--red);
}

.dx-copy p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}

.dx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.dx-chips li {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-1);
}

.dx-more {
  display: inline-block;
  margin-top: 22px;
  font-size: 15px;
  font-weight: 600;
}

.dx-more span {
  display: inline-block;
  transition: transform 250ms var(--ease);
}

.dx-more:hover {
  color: var(--red);
}

.dx-more:hover span {
  transform: translateX(3px);
}

/* dashboard-style panel (same feel as the Reportdesk mock on Home) */
.dx-panel {
  --row: #fff;
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 22px;
  background: var(--bg);
}

.dx-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 2px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}

.dx-top b {
  color: var(--ink-1);
}

.dx-status {
  white-space: nowrap;
}

.dx-viz {
  padding: clamp(14px, 2vw, 22px);
  border-radius: 16px;
  background: #fff;
}

.dx-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dx-stats li {
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
}

.dx-stats b {
  display: block;
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink-1);
}

.dx-stats span {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lx-chart {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.lx-row {
  fill: #f5f5f7;
}

.lx-row2 {
  fill: #f5f5f7;
}

.dx-viz .lx-row {
  fill: #f5f5f7;
}

.dash {
  fill: none;
  stroke: #d9d9de;
  stroke-width: 2;
  stroke-dasharray: 8 6;
}

/* case study before/after tubes */
.lx-cols {
  max-width: 420px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 18px;
  padding: 4px 8px 0;
}

.lx-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lx-tube {
  position: relative;
  width: 100%;
  max-width: 110px;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  background: #f5f5f7;
}

.liquid {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
}

.in .liquid {
  animation: dx-fill 5.5s var(--ease) 0.3s infinite;
}

.liquid.low {
  background: #d9d9de;
}

.liquid.hi {
  background: var(--red);
}

.in .liquid.hi {
  animation-delay: 0.8s;
}

.lx-col b {
  margin-top: 10px;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.lx-col b.hot {
  color: var(--red);
}

.lx-col small {
  font-size: 12px;
  color: var(--ink-3);
}

.lx-mult {
  align-self: center;
  margin-bottom: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-1);
}

/* one-time motion: lines draw in and labels appear when the card scrolls into view */
.dx-card .draw {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1.8s var(--ease) 0.2s;
}

.dx-card.in .draw {
  stroke-dashoffset: 0;
}

.dx-card .pop {
  opacity: 0;
  transform: translateY(6px);
  transform-box: fill-box;
  transition: opacity 0.5s ease, transform 0.6s var(--ease);
}

.dx-card.in .pop {
  opacity: 1;
  transform: none;
}

.dx-card.in .pop.p1 {
  transition-delay: 0.4s;
}

.dx-card.in .pop.p2 {
  transition-delay: 0.9s;
}

.dx-card.in .pop.p3 {
  transition-delay: 1.4s;
}

.dx-card .area {
  opacity: 0;
  transition: opacity 1s ease 1.2s;
}

.dx-card.in .area {
  opacity: 1;
}

/* continuous motion (Doo red, no glow): the rank climb loops, dots travel, dashes flow, the finish pulses */
.rk-badge {
  opacity: 0;
}

.dx-card.in .rk-others {
  animation: dx-others 6s var(--ease) 0.4s infinite;
}

.dx-card.in .rk-you {
  animation: dx-you 6s var(--ease) 0.4s infinite;
}

.dx-card.in .rk-badge {
  animation: dx-badge 6s ease 0.4s infinite;
}

.dx-card .mover {
  opacity: 0;
  transition: opacity 0.6s ease 1.2s;
}

.dx-card.in .mover {
  opacity: 1;
}

.flow {
  animation: dx-flow 1.2s linear infinite;
}

.pulse-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: dx-pulse 2.4s ease-out infinite;
}

.ai-hl {
  animation: dx-breathe 2.8s ease-in-out infinite;
}

@keyframes dx-others {
  0%, 12% { transform: none; }
  42%, 86% { transform: translateY(46px); }
  100% { transform: none; }
}

@keyframes dx-you {
  0%, 12% { transform: none; }
  42%, 86% { transform: translateY(-184px); }
  100% { transform: none; }
}

@keyframes dx-badge {
  0%, 40% { opacity: 0; }
  48%, 82% { opacity: 1; }
  90%, 100% { opacity: 0; }
}

@keyframes dx-fill {
  0% { height: 0; }
  35%, 85% { height: var(--lvl); }
  100% { height: 0; }
}

@keyframes dx-flow {
  to { stroke-dashoffset: -28; }
}

@keyframes dx-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes dx-breathe {
  0%, 100% { stroke-width: 1.5; }
  50% { stroke-width: 3.5; }
}

/* why: light card - copy on the left, "two agencies vs one team" table on the right */
.sc-vs {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(24px, 4vw, 56px);
  border-radius: 28px;
  background: #fff;
}

.sc-vs-copy > p:not(.kicker) {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}

.sc-stats {
  display: flex;
  gap: 28px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.sc-stats b {
  display: block;
  font-family: var(--display);
  font-size: 34px;
  letter-spacing: -0.04em;
  line-height: 1;
}

.sc-stats span {
  font-size: 13px;
  color: var(--ink-3);
}

.sc-vs .more {
  font-weight: 600;
}

.sc-vs .more:hover {
  color: var(--red);
}

.sc-table {
  padding: 8px;
  border-radius: 20px;
  background: var(--bg);
}

.sc-tr {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px;
}

.sc-tr + .sc-tr:not(.sc-th) {
  border-top: 1px solid var(--line);
}

.sc-th span {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sc-th .sc-us {
  justify-self: start;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
}

.sc-k {
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}

.sc-them,
.sc-usv {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.3;
}

.sc-them {
  color: var(--ink-3);
}

.sc-usv {
  background: #fff;
  font-weight: 600;
  color: var(--ink-1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.sc-them .sc-mark {
  background: #e8e8ed;
  stroke: var(--ink-3);
}

.sc-usv .sc-mark {
  background: var(--red);
  stroke: #fff;
}

@media (max-width: 1100px) {
  .dx-card.has-media {
    grid-template-columns: 0.8fr 1.2fr;
  }
  .dx-card.has-media .dx-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1020px) {
  .dx-card,
  .sc-vs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .dx-card.has-media {
    grid-template-columns: 1fr;
  }
  .dx-media img {
    max-width: 320px;
    margin: 0 auto;
  }
  .dx-card {
    padding: 20px 16px;
    border-radius: 24px;
  }
  .dx-panel {
    padding: 8px;
  }
  .dx-viz {
    padding: 10px 6px;
  }
  .dx-stats b {
    font-size: 20px;
  }
  .lx-tube {
    height: 170px;
  }
  .sc-tr {
    grid-template-columns: 1fr 1fr;
  }
  .sc-tr .sc-k {
    grid-column: 1 / -1;
    padding: 6px 4px 0;
  }
  .sc-th span:first-child {
    display: none;
  }
  .sc-them,
  .sc-usv {
    font-size: 14px;
    padding: 10px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ink {
    display: none;
  }
  .dx-card .draw {
    stroke-dashoffset: 0;
    transition: none;
  }
  .dx-card .pop,
  .dx-card .area {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .liquid,
  .in .liquid {
    height: var(--lvl);
    animation: none;
  }
  .dx-card.in .rk-others {
    animation: none;
    transform: translateY(46px);
  }
  .dx-card.in .rk-you {
    animation: none;
    transform: translateY(-184px);
  }
  .dx-card.in .rk-badge {
    animation: none;
    opacity: 1;
  }
  .dx-card .mover {
    display: none;
  }
  .flow,
  .pulse-ring,
  .ai-hl,
  .dx-track::before,
  .dx-track::after {
    animation: none;
    transition: none;
  }
}

/* ---------- Reportdesk.ai page: hero screenshot, product diagram loops, access panel ---------- */
.page-hero.split:has(.rd-shot) {
  grid-template-columns: 1fr 1.15fr;
}

.page-hero.split:has(.rd-shot) h1 {
  font-size: clamp(34px, 3.6vw, 52px);
}

.page-hero.split:has(.rd-shot) .answer {
  font-size: 17px;
}

.rd-shot {
  position: relative;
  margin: 0;
}

.rd-screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.35);
}

/* animated Reportdesk logo: the icon is redrawn as SVG (ring draws, bars grow, arrow shoots up, on a loop);
   the wordmark is cropped from the original PNG so the lettering stays exact */
.rd-logo {
  --lh: 32px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--lh) * 0.22);
}

/* large, standalone brand mark above the hero headline */
.rd-logo.rd-brand {
  --lh: clamp(46px, 4.6vw, 64px);
  display: flex;
  width: max-content;
  margin: 6px 0 18px;
}

.rd-mark {
  width: calc(var(--lh) * 0.78);
  height: var(--lh);
  overflow: visible;
}

.rd-word {
  width: calc(var(--lh) * 3.34);
  height: var(--lh);
  background: url(reportdesk/logo.png) right center / auto var(--lh) no-repeat;
}

.rm-ring,
.rm-arrow {
  fill: none;
  stroke: #e84868;
  stroke-linecap: round;
}

.rm-ring {
  stroke-width: 6.2;
  stroke-dasharray: 128;
  animation: rm-ring 5s var(--ease) infinite;
}

.rm-arrow {
  stroke-width: 5.6;
  stroke-dasharray: 60;
  animation: rm-arrow 5s var(--ease) infinite;
}

.rm-head,
.rm-bar {
  fill: #e84868;
}

/* white gap between the arrow and the bars, as in the logo */
.rm-halo {
  fill: none;
  stroke: #fff;
  stroke-width: 9;
  stroke-linecap: butt;
  stroke-dasharray: 60;
  animation: rm-arrow 5s var(--ease) infinite;
}

.rm-head {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: rm-head 5s var(--ease) infinite;
}

.rm-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: rm-bar 5s var(--ease) infinite;
}

.rm-bar.b2 { animation-delay: 0.08s; }
.rm-bar.b3 { animation-delay: 0.16s; }
.rm-bar.b4 { animation-delay: 0.24s; }

@keyframes rm-ring {
  0% { stroke-dashoffset: 128; opacity: 1; }
  24%, 86% { stroke-dashoffset: 0; opacity: 1; }
  95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes rm-bar {
  0%, 14% { transform: scaleY(0); opacity: 1; }
  32%, 86% { transform: scaleY(1); opacity: 1; }
  95%, 100% { transform: scaleY(1); opacity: 0; }
}

@keyframes rm-arrow {
  0%, 30% { stroke-dashoffset: 60; opacity: 1; }
  52%, 86% { stroke-dashoffset: 0; opacity: 1; }
  95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes rm-head {
  0%, 48% { transform: translateY(6px) scale(0.3); opacity: 0; }
  58% { transform: translateY(-2px) scale(1.1); opacity: 1; }
  64%, 86% { transform: none; opacity: 1; }
  95%, 100% { opacity: 0; }
}

.kbar {
  transform-box: fill-box;
  transform-origin: left center;
}

.dx-card.in .kbar {
  animation: rd-kpi 4.8s ease-in-out infinite;
}

.dx-card.in .kbar.k1 { animation-delay: 0.5s; }
.dx-card.in .kbar.k2 { animation-delay: 1s; }
.dx-card.in .kbar.k3 { animation-delay: 1.5s; }

.blink {
  animation: rd-blink 1.6s ease-in-out infinite;
}

.ask-typing,
.ask-answer {
  opacity: 0;
}

.dx-card.in .ask-typing {
  animation: rd-typing 7s ease infinite;
}

.dx-card.in .ask-typing circle {
  animation: rd-blink 0.9s ease-in-out infinite;
}

.dx-card.in .ask-typing circle:nth-child(2) { animation-delay: 0.15s; }
.dx-card.in .ask-typing circle:nth-child(3) { animation-delay: 0.3s; }

.dx-card.in .ask-answer {
  animation: rd-answer 7s ease infinite;
}

.cad {
  transform-box: view-box;
}

.dx-card.in .cad {
  animation: rd-cadence 7.5s var(--ease) infinite;
}

.sent {
  opacity: 0;
}

.dx-card.in .sent.s0 {
  animation: rd-sent 2.2s ease infinite;
}

.dx-card.in .sent.s1 {
  animation: rd-sent 2.2s ease 1.1s infinite;
}

@keyframes rd-kpi {
  0%, 100% { transform: scaleX(0.55); }
  50% { transform: scaleX(1); }
}

@keyframes rd-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes rd-typing {
  0%, 26% { opacity: 1; }
  30%, 100% { opacity: 0; }
}

@keyframes rd-answer {
  0%, 30% { opacity: 0; transform: translateY(6px); }
  36%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}

@keyframes rd-cadence {
  0%, 28% { transform: none; }
  33%, 61% { transform: translateX(82px); }
  66%, 94% { transform: translateX(164px); }
  100% { transform: none; }
}

@keyframes rd-sent {
  0%, 55% { opacity: 0; transform: translateY(4px); }
  70%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

.rd-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: 28px;
  background: #fff;
}

.rd-plans-copy p:not(.kicker) {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}

.rd-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border-radius: 22px;
  background: var(--bg);
}

.rd-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
}

.rd-who {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.rd-tile b {
  font-family: var(--display);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.rd-tile.hot b {
  color: var(--red);
}

.rd-note {
  font-size: 14px;
  color: var(--ink-2);
}

a.rd-note {
  font-weight: 600;
  color: var(--ink-1);
}

a.rd-note:hover {
  color: var(--red);
}

@media (max-width: 1020px) {
  .page-hero.split:has(.rd-shot),
  .rd-plans {
    grid-template-columns: 1fr;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .rm-ring,
  .rm-halo,
  .rm-arrow,
  .rm-head,
  .rm-bar {
    animation: none;
  }
  .dx-card.in .kbar,
  .blink,
  .dx-card.in .ask-typing circle,
  .dx-card.in .cad {
    animation: none;
  }
  .dx-card.in .ask-typing {
    animation: none;
    opacity: 0;
  }
  .dx-card.in .ask-answer,
  .dx-card.in .sent {
    animation: none;
    opacity: 1;
  }
}

/* ================= Design system round 2 (client feedback) ================= */

/* --- links: content links are red with an underline; clear hover and keyboard focus --- */
.prose p a:not(.btn-solid):not(.btn-ghost),
.prose li a,
.block p a:not(.more),
.block li a,
.faq-list p a,
.dx-copy p a,
.sc-lede a,
.answer a,
.callout a,
.rd-plans-copy p a {
  color: var(--red);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(200, 22, 31, 0.35);
  text-underline-offset: 3px;
  transition: color 200ms, text-decoration-color 200ms;
}

.prose p a:not(.btn-solid):not(.btn-ghost):hover,
.prose li a:hover,
.block p a:not(.more):hover,
.block li a:hover,
.faq-list p a:hover,
.dx-copy p a:hover,
.sc-lede a:hover,
.answer a:hover,
.callout a:hover,
.rd-plans-copy p a:hover {
  color: var(--red-dark);
  text-decoration-color: currentColor;
}

/* standalone "more" links: red, with an underline on hover */
.more,
.dx-more,
.sc-link {
  color: var(--red);
  text-underline-offset: 4px;
}

.more:hover,
.dx-more:hover,
.sc-link:hover {
  color: var(--red-dark);
  text-decoration: underline;
}

a:focus-visible,
summary:focus-visible,
button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 6px;
}

.chips a:focus-visible {
  background: var(--red);
  border-color: var(--ink-1);
  color: #fff;
}

/* --- alternating section backgrounds: white bands between the grey ones --- */
.band {
  position: relative;
  margin-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

.band.dx-wrap {
  padding-top: clamp(32px, 4vw, 56px);
}

.band + .dx-wrap {
  margin-top: clamp(32px, 4vw, 56px);
}

.band::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #fff;
}

.band + .sec {
  padding-top: clamp(32px, 4vw, 56px);
}

/* cards on a white band turn grey; their inner panels turn white */
.band .block,
.band .dx-card,
.band .faq-list,
.band .sc-vs,
.band .rd-plans,
.band .prose,
.band .card,
.band .chips a {
  background: var(--bg);
}

.band .dx-panel,
.band .rd-tiles {
  background: #fff;
}

.band .dx-viz,
.band .dx-stats li,
.band .rd-tile {
  background: #fff;
  border: 1px solid var(--line);
}

.band .vs-two {
  background: var(--bg);
}

/* --- content block rows: visual checklist / steps panels --- */
.sb-stack .h2 {
  margin-bottom: 18px;
}

.dx-card.sb-solo {
  display: block;
  padding: clamp(12px, 1.6vw, 18px);
}

.dx-card.sb-solo .dx-panel {
  background: transparent;
  padding: 0;
}

.band .dx-card.sb-solo .dx-panel {
  background: transparent;
}

.sb-list,
.sb-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sb-list.two {
  grid-template-columns: 1fr 1fr;
}

.sb-list li,
.sb-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--bg);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-1);
}

.sb-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fbeced;
}

.sb-ic svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--red);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sb-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
}

.sb-steps li:last-child .sb-num {
  background: var(--red);
}

.sb-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 27px;
  top: 100%;
  width: 2px;
  height: 8px;
  background: var(--line);
}

/* a highlight runs down the list on a loop */
.in .sb-list li,
.in .sb-steps li {
  animation: sb-scan calc(var(--n) * 1.1s) ease-in-out calc(var(--i) * 1.1s) infinite;
}

.in .sb-steps li .sb-num {
  animation: sb-num calc(var(--n) * 1.1s) ease-in-out calc(var(--i) * 1.1s) infinite;
}

@keyframes sb-scan {
  0%, 100% { background: var(--bg); box-shadow: inset 0 0 0 1px transparent; }
  6%, 16% { background: #fff; box-shadow: inset 0 0 0 1.5px var(--red); }
  26% { background: var(--bg); box-shadow: inset 0 0 0 1px transparent; }
}

@keyframes sb-num {
  0%, 100% { transform: none; }
  8% { transform: scale(1.15); }
  18% { transform: none; }
}

.band .sb-list li,
.band .sb-steps li {
  background: var(--bg);
}

/* --- proof cards alternate too --- */
@media (min-width: 1101px) {
  .dx-card.has-media.flip {
    grid-template-columns: 1.08fr 1fr 0.62fr;
  }
  .dx-card.has-media.flip .dx-panel { order: 1; }
  .dx-card.has-media.flip .dx-copy { order: 2; }
  .dx-card.has-media.flip .dx-media { order: 3; }
}

/* --- Why DooDigital: split comparison --- */
.vs {
  display: grid;
  grid-template-columns: 1fr auto 1.15fr;
  align-items: stretch;
  gap: 14px;
}

.vs-side {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 28px;
}

.vs-two {
  background: #fff;
  color: var(--ink-3);
}

.vs-one {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--red);
}

.vs-label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vs-one .vs-label {
  color: var(--red);
}

.vs-side h3 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.03em;
}

.vs-two h3 {
  color: #8a8a8f;
}

.vs-viz {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto 18px;
  overflow: visible;
}

.vs-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vs-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.3;
}

.vs-two .vs-list li {
  background: var(--bg);
  color: #8a8a8f;
}

.vs-two .sc-mark {
  background: #e8e8ed;
  stroke: #8a8a8f;
}

.vs-one .vs-list li {
  background: #fbeced;
  font-weight: 700;
  color: var(--ink-1);
}

.vs-one .sc-mark {
  background: var(--red);
  stroke: #fff;
}

.vs-one .dx-more {
  margin-top: 18px;
}

.vs-mid {
  display: grid;
  place-items: center;
}

.vs-mid span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  animation: vs-nudge 2.4s ease-in-out infinite;
}

.vs-clock {
  transform-box: fill-box;
  transform-origin: center;
  animation: rd-blink 1.8s ease-in-out infinite;
}

@keyframes vs-nudge {
  0%, 100% { transform: none; }
  50% { transform: translateX(5px); }
}

@media (max-width: 1020px) {
  .vs {
    grid-template-columns: 1fr;
  }
  .vs-mid span {
    transform: rotate(90deg);
    animation: none;
  }
}

@media (max-width: 680px) {
  .sb-list.two,
  .vs-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .in .sb-list li,
  .in .sb-steps li,
  .in .sb-steps li .sb-num,
  .vs-mid span,
  .vs-clock {
    animation: none;
  }
}

/* --- About: milestones timeline (horizontal on desktop, vertical on phones) --- */
.tl-wrap {
  padding: clamp(24px, 3.4vw, 48px);
  border-radius: 28px;
  background: #fff;
}

.band .tl-wrap {
  background: var(--bg);
}

.tl {
  position: relative;
  margin-top: clamp(20px, 3vw, 36px);
}

.tl-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* desktop: cards alternate above and below a central line */
.tl-item {
  display: grid;
  grid-template-rows: 1fr 56px 1fr;
  justify-items: center;
}

.tl-dot {
  grid-row: 2;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  align-self: center;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink-1);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.5s ease, transform 0.6s var(--ease);
  transition-delay: calc(0.3s + var(--i) * 0.35s);
}

.tl-dot svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--ink-1);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tl-item.now .tl-dot {
  background: var(--red);
  border-color: var(--red);
}

.tl-item.now .tl-dot svg {
  stroke: #fff;
}

.in .tl-dot {
  opacity: 1;
  transform: none;
}

.in .tl-item.now .tl-dot {
  animation: tl-pulse 2.4s ease-out 2.6s infinite;
}

.tl-card {
  grid-row: 3;
  align-self: start;
  width: 100%;
  margin-top: 4px;
  padding: 16px;
  border-radius: 16px;
  background: var(--bg);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.7s var(--ease);
  transition-delay: calc(0.45s + var(--i) * 0.35s);
}

.band .tl-card {
  background: #fff;
}

.tl-item:nth-child(even) .tl-card {
  grid-row: 1;
  align-self: end;
  margin: 0 0 4px;
  transform: translateY(-8px);
}

.in .tl-card {
  opacity: 1;
  transform: none;
}

.tl-year {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
}

.tl-item.now .tl-year {
  background: var(--red);
}

.tl-card h3 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.tl-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}

.tl-line {
  position: absolute;
  left: calc(100% / var(--n) / 2);
  right: calc(100% / var(--n) / 2);
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, #d9d9de 0 8px, transparent 8px 14px);
}

.tl-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 2px;
  background: var(--red);
  transition: width 2.4s var(--ease) 0.3s;
}

.in .tl-fill {
  width: 100%;
}

.tl-runner {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--red);
  opacity: 0;
}

.in .tl-runner {
  animation: tl-run 6s linear 2.8s infinite;
}

@keyframes tl-run {
  0% { left: 0; opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes tl-pulse {
  0% { box-shadow: 0 0 0 0 rgba(200, 22, 31, 0.45); }
  100% { box-shadow: 0 0 0 18px rgba(200, 22, 31, 0); }
}

/* tablet + phone: vertical timeline */
@media (max-width: 1020px) {
  .tl-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .tl-item,
  .tl-item:nth-child(even) {
    grid-template-rows: auto;
    grid-template-columns: 48px 1fr;
    align-items: start;
    gap: 16px;
    justify-items: stretch;
  }
  .tl-dot {
    grid-row: 1;
    grid-column: 1;
    align-self: start;
    margin-top: 12px;
  }
  .tl-card,
  .tl-item:nth-child(even) .tl-card {
    grid-row: 1;
    grid-column: 2;
    margin: 0;
    text-align: left;
    align-self: start;
    transform: translateY(8px);
  }
  .tl-line {
    left: 22.5px;
    right: auto;
    top: 24px;
    bottom: 24px;
    width: 3px;
    height: auto;
    margin: 0;
    background: repeating-linear-gradient(180deg, #d9d9de 0 8px, transparent 8px 14px);
  }
  .tl-fill {
    inset: 0 0 auto 0;
    width: 100%;
    height: 0;
    transition: height 2.4s var(--ease) 0.3s;
  }
  .in .tl-fill {
    width: 100%;
    height: 100%;
  }
  .tl-runner {
    top: 0;
    left: 50%;
    margin: -6px 0 0 -6px;
  }
  .in .tl-runner {
    animation-name: tl-run-v;
  }
  @keyframes tl-run-v {
    0% { top: 0; opacity: 0; }
    6% { opacity: 1; }
    94% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .tl-dot,
  .tl-card,
  .tl-fill {
    transition: none;
  }
  .in .tl-item.now .tl-dot,
  .in .tl-runner {
    animation: none;
  }
}

/* --- FAQ hub: topic navigation + searchable accordions --- */
.faqx {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

.faqx-nav {
  position: sticky;
  top: 20px;
  padding: 14px;
  border-radius: 24px;
  background: #fff;
}

.faqx-navh {
  margin: 4px 10px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.faqx-nav ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faqx-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background 200ms, color 200ms;
}

.faqx-nav a b {
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--ink-3);
}

.faqx-nav a:hover {
  background: var(--bg);
  color: var(--ink-1);
}

.faqx-nav a.on {
  background: var(--red);
  color: #fff;
}

.faqx-nav a.on b {
  background: var(--red);
  color: #fff;
}

.faqx-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color 200ms, box-shadow 200ms;
}

.faqx-search:focus-within {
  border-color: var(--ink-1);
  box-shadow: 0 0 0 4px rgba(29, 29, 31, 0.06);
}

.faqx-search svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-linecap: round;
}

.faqx-search input {
  flex: 1;
  min-width: 0;
  padding: 16px 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  color: var(--ink-1);
}

.faqx-empty {
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  color: var(--ink-2);
}

.faqx-empty a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faqx-group {
  scroll-margin-top: 20px;
}

.faqx-group + .faqx-group {
  margin-top: clamp(28px, 3.4vw, 44px);
}

.faqx-group h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.03em;
}

.faqx-group h2 span {
  padding: 3px 10px;
  border-radius: 999px;
  background: #fbeced;
  color: var(--red);
  font-size: 13px;
  letter-spacing: 0;
}

/* tablet + phone: topics become horizontal tabs pinned to the top */
@media (max-width: 1020px) {
  .faqx {
    grid-template-columns: minmax(0, 1fr);
  }
  .faqx-nav,
  .faqx-main {
    min-width: 0;
  }
  .faqx-nav {
    top: 0;
    z-index: 5;
    margin: 0 calc(-1 * var(--gutter));
    padding: 10px var(--gutter);
    border-radius: 0;
    background: rgba(245, 245, 247, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .faqx-navh {
    display: none;
  }
  .faqx-nav ul {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .faqx-nav ul::-webkit-scrollbar {
    display: none;
  }
  .faqx-nav a {
    flex: none;
    padding: 9px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    white-space: nowrap;
    font-size: 14px;
  }
  .faqx-nav a b {
    display: none;
  }
  .faqx-group {
    scroll-margin-top: 70px;
  }
}

/* --- showcase diagram kit: generic looping primitives for per-page SVG diagrams (see tools/showcase/README.md) --- */
.vbar,
.seq,
.seq-red,
.seq-stroke,
.float,
.spin,
.swing,
.rise,
.slide-x {
  transform-box: fill-box;
}

.dx-card.in .vbar {
  transform-origin: 50% 100%;
  animation: kit-vbar 3.6s ease-in-out calc(var(--i, 0) * 0.35s) infinite;
}

.dx-card.in .seq {
  animation: kit-seq calc(var(--n, 4) * 0.9s) ease-in-out calc(var(--i, 0) * 0.9s) infinite;
}

.seq {
  opacity: 0.35;
}

/* base colours so shapes never fall back to black before (or without) their animation */
.seq-red {
  fill: #e3e3e8;
}

.seq-stroke {
  stroke: #d9d9de;
}

.dx-card.in .seq-red {
  animation: kit-seq-red calc(var(--n, 4) * 0.9s) ease-in-out calc(var(--i, 0) * 0.9s) infinite;
}

.dx-card.in .seq-stroke {
  animation: kit-seq-stroke calc(var(--n, 4) * 0.9s) ease-in-out calc(var(--i, 0) * 0.9s) infinite;
}

.dx-card.in .float {
  animation: kit-float 3.2s ease-in-out calc(var(--i, 0) * 0.4s) infinite;
}

.dx-card.in .spin {
  transform-origin: center;
  animation: kit-spin 14s linear infinite;
}

.dx-card.in .swing {
  transform-origin: 50% 100%;
  animation: kit-swing 2.8s ease-in-out infinite;
}

.rise {
  opacity: 0;
}

.dx-card.in .rise {
  animation: kit-rise 3s ease-out calc(var(--i, 0) * 1s) infinite;
}

.dx-card.in .slide-x {
  animation: kit-slide 6s var(--ease) infinite;
}

@keyframes kit-vbar {
  0%, 100% { transform: scaleY(0.55); }
  50% { transform: scaleY(1); }
}

@keyframes kit-seq {
  0% { opacity: 0.35; }
  8%, 22% { opacity: 1; }
  32%, 100% { opacity: 0.35; }
}

@keyframes kit-seq-red {
  0% { fill: #e3e3e8; }
  8%, 22% { fill: #c8161f; }
  32%, 100% { fill: #e3e3e8; }
}

@keyframes kit-seq-stroke {
  0% { stroke: #d9d9de; stroke-width: 1.5; }
  8%, 22% { stroke: #c8161f; stroke-width: 2.5; }
  32%, 100% { stroke: #d9d9de; stroke-width: 1.5; }
}

@keyframes kit-float {
  0%, 100% { transform: none; }
  50% { transform: translateY(-5px); }
}

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

@keyframes kit-swing {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}

@keyframes kit-rise {
  0% { opacity: 0; transform: translateY(10px); }
  15%, 60% { opacity: 1; transform: none; }
  85%, 100% { opacity: 0; transform: translateY(-14px); }
}

@keyframes kit-slide {
  0%, 30% { transform: none; }
  45%, 80% { transform: translateX(var(--dx, 80px)); }
  95%, 100% { transform: none; }
}

.flow-red {
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-dasharray: 6 6;
  animation: dx-flow 1.2s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .dx-card.in .vbar,
  .dx-card.in .seq,
  .dx-card.in .seq-red,
  .dx-card.in .seq-stroke,
  .dx-card.in .float,
  .dx-card.in .spin,
  .dx-card.in .swing,
  .dx-card.in .slide-x,
  .flow-red {
    animation: none;
  }
  .seq,
  .dx-card.in .rise {
    opacity: 1;
    animation: none;
  }
}

/* related: client logo row (one colour, brand colour on hover) */
.rel-logos {
  margin-top: 28px;
  padding: clamp(20px, 3vw, 32px);
  border-radius: 24px;
  background: #fff;
}

.rel-label {
  margin: 0 0 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}

.logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 22px clamp(28px, 4vw, 52px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo-row img {
  display: block;
  height: 30px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: url(#logo-ink);
}

.logo-row img.badge {
  height: 32px;
}

.logo-row img.tall {
  height: 40px;
}

.logo-row img:hover {
  filter: none;
}

.rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}

.rv.in {
  opacity: 1;
  transform: none;
}

/* ---------- 404 ---------- */
.nf {
  padding: clamp(60px, 10vw, 140px) 0;
  text-align: center;
}

.nf b {
  display: block;
  font-family: var(--display);
  font-size: clamp(90px, 16vw, 200px);
  letter-spacing: -0.06em;
  line-height: 0.9;
  color: var(--red);
}

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .nav {
    display: none;
  }
  .site-header {
    grid-template-columns: 1fr auto;
  }
  .header-actions .btn-outline {
    display: none;
  }
  .menu-btn {
    display: grid;
  }
}

@media (max-width: 1020px) {
  .cards,
  .cards.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-hero.split,
  .article,
  .contact {
    grid-template-columns: 1fr;
  }
  .aside {
    position: static;
  }
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
  .timeline {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .blocks,
  .cards,
  .cards.cols-4,
  .cards.cols-2,
  .terms,
  .ticks.cols,
  .row-2,
  .timeline {
    grid-template-columns: 1fr;
  }
  .page-hero,
  .block,
  .card,
  .prose,
  .cta-band {
    border-radius: 22px;
  }
  .founder {
    grid-template-columns: 1fr;
  }
  /* footer links: comfortable tap targets */
  .foot ul {
    gap: 2px;
  }
  .foot ul a {
    display: inline-block;
    padding: 7px 0;
  }
  .h2,
  h1,
  h2 {
    overflow-wrap: break-word;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* LinkedIn newsletter button: solid Doo red pill with an "in" badge, dark red on hover */
.btn-li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 20px 0 8px;
  border-radius: 999px;
  background: #c8161f;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 250ms, transform 250ms;
}
.btn-li .li-badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: #c8161f;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.03em;
  transition: color 250ms;
}
.btn-li .li-arrow {
  width: 12px;
  height: 12px;
  transition: transform 250ms;
}
.btn-li:hover,
.btn-li:focus-visible,
.foot .btn-li:hover {
  background: #a50f17;
  color: #fff;
}
.btn-li:hover .li-badge {
  color: #a50f17;
}
.btn-li:hover .li-arrow {
  transform: translate(2px, -2px);
}

/* a section heading and the cards it introduces share one continuous band - no gap between them */
.band.band-join {
  padding-bottom: 0;
}
.band + .band {
  margin-top: 0;
}
.band.band-join + .band.dx-wrap,
.band.band-join + .band {
  padding-top: 8px;
}
.sec.band-join:not(.band) {
  padding-bottom: 0;
}
.band-join {
  display: flow-root;
}

/* free growth audit: scan panel + what-you-get tiles */
.block.au .kicker {
  margin-bottom: 8px;
}
.au-panel {
  display: grid;
  gap: 12px;
  margin: 6px 0 26px;
  padding: 14px;
  border-radius: 20px;
  background: var(--bg);
}
.au-live {
  color: var(--red);
  animation: rd-blink 1.6s ease-in-out infinite;
}
.au-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.au-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px transparent;
}
.in .au-list li {
  animation: au-scan calc(var(--n) * 1.2s) ease-in-out calc(var(--i) * 1.2s) infinite;
}
.au-ic,
.au-gic {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fbeced;
}
.au-ic svg,
.au-gic svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.au-txt {
  flex: 1;
  min-width: 0;
}
.au-txt b {
  display: block;
  font-size: 15px;
  color: var(--ink-1);
}
.au-txt small {
  font-size: 13.5px;
  color: var(--ink-3);
}
.au-tag {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f0f0f3;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-3);
}
.in .au-list li .au-tag {
  animation: au-tag calc(var(--n) * 1.2s) ease-in-out calc(var(--i) * 1.2s) infinite;
}
@keyframes au-scan {
  0%, 100% { box-shadow: inset 0 0 0 1px transparent; }
  6%, 18% { box-shadow: inset 0 0 0 1.5px var(--red); }
  26% { box-shadow: inset 0 0 0 1px transparent; }
}
@keyframes au-tag {
  0%, 100% { background: #f0f0f3; color: var(--ink-3); }
  6%, 18% { background: var(--red); color: #fff; }
  26% { background: #f0f0f3; color: var(--ink-3); }
}
.au-h2 {
  margin-top: 0;
}
.au-get {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.au-get li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 16px;
  background: var(--bg);
}
.au-get li .au-gic {
  margin-bottom: 8px;
}
.au-get li:last-child .au-gic {
  background: var(--red);
}
.au-get li:last-child .au-gic svg {
  stroke: #fff;
}
.au-get b {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: -0.02em;
}
.au-get small {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-3);
}
@media (max-width: 1200px) and (min-width: 1021px) {
  .au-get { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .au-get { grid-template-columns: 1fr; }
  .au-tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .in .au-list li,
  .in .au-list li .au-tag,
  .au-live { animation: none; }
}

/* About milestones, option B: climbing staircase (horizontal on desktop, ladder on phones) */
.st {
  position: relative;
  margin-top: clamp(20px, 3vw, 36px);
}
.st-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  align-items: end;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.st-step {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.st-card {
  position: relative;
  z-index: 1;
  padding: 14px 14px 16px;
  border-radius: 16px 16px 0 0;
  background: #fff;
  border: 1px solid var(--line);
  border-bottom: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.7s var(--ease);
  transition-delay: calc(0.3s + var(--i) * 0.3s);
}
.in .st-card {
  opacity: 1;
  transform: none;
}
.st-ic {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: var(--bg);
}
.st-ic svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ink-1);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.st-year {
  display: block;
  font-family: var(--display);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink-1);
}
.st-card h3 {
  margin: 8px 0 6px;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.st-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
/* the step itself: each one taller than the last */
.st-block {
  display: block;
  height: calc(28px + var(--i) * 34px);
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #e8e8ed, #f0f0f3);
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.9s var(--ease);
  transition-delay: calc(var(--i) * 0.3s);
}
.in .st-block {
  transform: none;
}
.st-step.now .st-card {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.st-step.now .st-year,
.st-step.now .st-card p {
  color: #fff;
}
.st-step.now .st-ic {
  background: rgba(255, 255, 255, 0.2);
}
.st-step.now .st-ic svg {
  stroke: #fff;
}
.st-step.now .st-block {
  background: linear-gradient(180deg, #c8161f, #a50f17);
}
.in .st-step.now .st-card {
  animation: tl-pulse 2.4s ease-out 2.4s infinite;
}
/* red path climbing over the tops of the steps */
.st-path {
  display: none;
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  width: 100%;
  height: calc(28px + (var(--n) - 1) * 34px + 30px);
  overflow: visible;
  pointer-events: none;
}
.st-path path {
  stroke: var(--red);
  stroke-width: 2.5;
  stroke-dasharray: 6 6;
  animation: dx-flow 1.2s linear infinite;
}
@media (max-width: 1020px) {
  .st-path {
    display: none;
  }
  .st-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .st-step {
    flex-direction: row;
    align-items: stretch;
    margin-left: calc(var(--i) * 10px);
  }
  .st-card {
    flex: 1;
    border-radius: 16px 0 0 16px;
    border: 1px solid var(--line);
    border-right: 0;
  }
  .st-block {
    flex: none;
    width: calc(10px + var(--i) * 8px);
    height: auto;
    border-radius: 0 16px 16px 0;
    transform-origin: left;
    transform: scaleX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .st-card,
  .st-block {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .st-path path,
  .in .st-step.now .st-card {
    animation: none;
  }
}

/* option B: a red ledge draws along the top of each step, one after another, on a loop */
.st-block {
  position: relative;
}
.st-block::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: var(--red);
}
.in .st-block::before {
  animation: st-ledge calc(var(--n) * 0.8s + 1.6s) ease-in-out calc(var(--i) * 0.8s + 1s) infinite;
}
@keyframes st-ledge {
  0% { width: 0; }
  12%, 80% { width: 100%; }
  100% { width: 0; }
}
@media (max-width: 1020px) {
  .st-block::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .in .st-block::before { animation: none; width: 100%; }
}

/* About milestones, option C: featured milestone with auto-advancing year tabs */
.fm {
  margin-top: clamp(20px, 3vw, 36px);
}
.fm-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  margin-bottom: 18px;
}
.fm-line {
  position: absolute;
  left: calc(100% / var(--n) / 2);
  right: calc(100% / var(--n) / 2);
  top: 13px;
  height: 3px;
  border-radius: 2px;
  background: #e3e3e8;
}
.fm-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 2px;
  background: var(--red);
  transition: width 0.8s var(--ease);
}
.fm-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.fm-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #d9d9de;
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease);
}
.fm-tab.done .fm-dot {
  border-color: var(--red);
}
.fm-tab.on .fm-dot {
  background: var(--red);
  border-color: var(--red);
  transform: scale(1.15);
  box-shadow: 0 0 0 6px rgba(200, 22, 31, 0.15);
}
.fm-y {
  font-family: var(--display);
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #8a8a8f;
  transition: color 0.3s;
}
.fm-tab.on .fm-y,
.fm-tab:hover .fm-y {
  color: var(--ink-1);
}
.fm-tab.now.on .fm-y {
  color: var(--red);
}
.fm-stage {
  position: relative;
}
.fm-panel {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  min-height: 200px;
  padding: clamp(22px, 3.4vw, 44px);
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  animation: fm-in 0.6s var(--ease);
}
.band .fm-panel {
  background: var(--bg);
}
.fm-panel.now {
  background: var(--red);
  color: #fff;
}
.fm-big {
  position: absolute;
  right: clamp(14px, 3vw, 40px);
  bottom: -0.18em;
  font-family: var(--display);
  font-size: clamp(90px, 13vw, 180px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  color: rgba(29, 29, 31, 0.05);
  pointer-events: none;
}
.fm-panel.now .fm-big {
  color: rgba(255, 255, 255, 0.12);
}
.fm-ic {
  display: grid;
  place-items: center;
  width: clamp(64px, 7vw, 88px);
  height: clamp(64px, 7vw, 88px);
  border-radius: 22px;
  background: #fbeced;
}
.fm-ic svg {
  width: 44%;
  height: 44%;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fm-panel.now .fm-ic {
  background: rgba(255, 255, 255, 0.18);
}
.fm-panel.now .fm-ic svg {
  stroke: #fff;
}
.fm-step {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fm-panel.now .fm-step {
  color: rgba(255, 255, 255, 0.75);
}
.fm-panel h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.fm-panel p:not(.fm-step) {
  position: relative;
  max-width: 560px;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.fm-panel.now p:not(.fm-step) {
  color: #fff;
}
@keyframes fm-in {
  from { opacity: 0; transform: translateY(8px); }
}
@media (max-width: 680px) {
  .fm-rail {
    grid-template-columns: repeat(var(--n), minmax(56px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .fm-panel {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fm-panel { animation: none; }
  .fm-fill { transition: none; }
}
/* labels used only on the options review build */
.ms-opt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 2px dashed #d9d9de;
}
.ms-opt:first-of-type {
  margin-top: 24px;
}
.ms-opt b {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 13px;
}
.ms-opt span {
  font-size: 14px;
  color: var(--ink-3);
}
.fm-panel[hidden] {
  display: none;
}
.tl-wrap .fm-panel:not(.now) {
  background: var(--bg);
}
.band .tl-wrap .fm-panel:not(.now) {
  background: #fff;
}
@media (max-width: 680px) {
  .fm-rail {
    padding: 4px 2px 6px;
  }
  .fm-line {
    top: 17px;
  }
}

/* heroes without an image: text uses the full width of the hero card */
.page-hero:not(.split) h1 {
  max-width: none;
  text-wrap: pretty;
}
.page-hero:not(.split) .answer {
  max-width: 1100px;
}

/* growth audit form: no card, sits on the page background */
.au-form {
  padding: clamp(8px, 2vw, 24px) clamp(4px, 1vw, 12px);
}
.au-form h2 {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.au-form input,
.au-form select,
.au-form textarea {
  background: #fff;
}

/* About: Our story + founder, with photo */
.sf {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) 1.4fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding: clamp(24px, 3.4vw, 48px);
  border-radius: 28px;
  background: #fff;
}
.band .sf {
  background: var(--bg);
}
.sf-photo {
  position: sticky;
  top: 24px;
  margin: 0;
}
.sf-photo img,
.sf-mono {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 22px;
  background: var(--bg);
}
.sf-mono {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #fbeced, #f5f5f7);
  font-family: var(--display);
  font-size: clamp(64px, 8vw, 110px);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--red);
}
.sf-photo figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
}
.sf-photo figcaption b {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: -0.02em;
}
.sf-photo figcaption span {
  font-size: 14px;
  color: var(--ink-3);
}
.sf-copy .h2 {
  margin-bottom: 16px;
}
.sf-copy > p:not(.kicker) {
  margin: 0 0 14px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.sf-about {
  margin-top: 26px;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--bg);
}
.band .sf-about {
  background: #fff;
}
.sf-about h3 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: -0.02em;
}
.sf-about p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.sf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 14px !important;
}
@media (max-width: 900px) {
  .sf {
    grid-template-columns: 1fr;
  }
  .sf-photo {
    position: static;
    max-width: 320px;
  }
}

/* Why option B: the race to a live change */
.wr {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(24px, 3.4vw, 48px);
  border-radius: 28px;
  background: #fff;
}
.band .wr { background: var(--bg); }
.wr-copy > p:not(.kicker) {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}
.wr-wins {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}
.wr-wins li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fbeced;
  font-size: 14.5px;
  font-weight: 700;
}
.wr-wins .sc-mark { background: var(--red); stroke: #fff; }
.wr-track {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 22px;
  background: var(--bg);
}
.band .wr-track { background: #fff; }
.wr-lane {
  position: relative;
  padding: 16px 16px 20px;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.band .wr-lane { background: var(--bg); }
.wr-lane.fast { box-shadow: inset 0 0 0 2px var(--red); }
.wr-who {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.wr-who b { font-family: var(--display); font-size: 17px; letter-spacing: -0.02em; }
.wr-who span { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.wr-lane.slow .wr-who b { color: #8a8a8f; }
.wr-lane.fast .wr-who span { color: var(--red); }
.wr-lane ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wr-lane li {
  padding: 9px 4px;
  border-radius: 10px;
  background: #f0f0f3;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  color: #8a8a8f;
}
.band .wr-lane li { background: #fff; }
.wr-lane li.wait {
  background: repeating-linear-gradient(45deg, #f0f0f3 0 6px, #e6e6ea 6px 12px);
  font-weight: 600;
}
.wr-lane.slow li.end { background: #e3e3e8; color: #6e6e73; }
.wr-lane.fast li { background: #fbeced; color: var(--red); }
.wr-lane.fast li.end { background: var(--red); color: #fff; }
/* runners: a dot moves along each lane; the Doo dot gets there in a third of the time */
.wr-runner {
  position: absolute;
  left: 16px;
  bottom: 8px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: #9c9a95;
}
.wr-lane.fast .wr-runner { background: var(--red); }
.in .wr-lane.slow .wr-runner { animation: wr-run-slow 6s linear infinite; }
.in .wr-lane.fast .wr-runner { animation: wr-run-fast 6s ease-in-out infinite; }
@keyframes wr-run-slow {
  0% { left: 16px; }
  100% { left: calc(100% - 16px); }
}
@keyframes wr-run-fast {
  0% { left: 16px; }
  34%, 100% { left: calc(100% - 16px); }
}
.wr-flag {
  position: absolute;
  right: 16px;
  top: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  opacity: 0;
}
.in .wr-flag { animation: wr-flag 6s ease infinite; }
@keyframes wr-flag {
  0%, 32% { opacity: 0; transform: translateY(4px); }
  38%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
.wr-lane.fast .wr-who { padding-right: 120px; }

/* Why option C: three disciplines feed one team */
.wh {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(24px, 3.4vw, 48px);
  border-radius: 28px;
  background: #fff;
}
.band .wh { background: var(--bg); }
.wh-copy > p:not(.kicker) {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}
.wh-viz {
  padding: 18px;
  border-radius: 22px;
  background: var(--bg);
}
.band .wh-viz { background: #fff; }
.wh-disc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.wh-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
}
.band .wh-card { background: var(--bg); }
.in .wh-card { animation: kit-float 3.2s ease-in-out calc(var(--i) * 0.4s) infinite; }
.wh-ic {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: #fbeced;
}
.wh-ic svg { width: 18px; height: 18px; fill: none; stroke: var(--red); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wh-card b { font-family: var(--display); font-size: 16px; letter-spacing: -0.02em; }
.wh-card small { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.wh-lines {
  display: block;
  width: 100%;
  height: 46px;
}
.wh-lines path {
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-dasharray: 6 6;
  vector-effect: non-scaling-stroke;
  animation: dx-flow 1.2s linear infinite;
}
.wh-core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0 auto 14px;
  padding: 16px 20px;
  max-width: 320px;
  border-radius: 18px;
  background: var(--red);
  color: #fff;
  text-align: center;
}
.wh-core b { font-family: var(--display); font-size: 22px; letter-spacing: -0.03em; }
.wh-core small { font-size: 13px; opacity: 0.9; }
.wh-pulse {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
}
.in .wh-pulse { animation: tl-pulse 2.4s ease-out infinite; }
.wh-wins {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wh-wins li {
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.band .wh-wins li { background: var(--bg); }
.wh-wins b {
  display: block;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--red);
}
@media (max-width: 1020px) {
  .wr, .wh { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wh-disc, .wh-wins { grid-template-columns: 1fr 1fr; }
  .wh-disc .wh-card:last-child { grid-column: 1 / -1; }
  .wr-lane.slow li { font-size: 10.5px; padding: 8px 2px; }
  .wr-wins { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .in .wr-lane .wr-runner, .in .wr-flag, .in .wh-card, .wh-lines path, .in .wh-pulse { animation: none; }
  .wr-flag { opacity: 1; }
}
@media (max-width: 560px) {
  .wr-who { flex-direction: column; gap: 2px; }
  .wr-lane.fast .wr-who { padding-right: 0; }
  .wr-flag { position: static; display: inline-block; margin: 0 0 10px; }
  .in .wr-flag { animation: none; opacity: 1; }
  .wh-card b { overflow-wrap: normal; hyphens: none; word-break: keep-all; font-size: 15px; }
}

/* event page: SupplySide logo card + one-line date */
.stat-card.ev-logo {
  display: grid;
  place-items: center;
  padding: clamp(22px, 3vw, 34px);
}
.stat-card.ev-logo img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
}
.stat-card.ev-date b {
  white-space: nowrap;
  font-size: clamp(40px, 4.4vw, 64px);
}

/* Why option D: quiet two-list comparison */
.wq, .wf {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: clamp(24px, 3.4vw, 48px);
  border-radius: 28px;
  background: #fff;
}
.band .wq, .band .wf { background: var(--bg); }
.wq-copy > p:not(.kicker), .wf-copy > p:not(.kicker) {
  margin: 0 0 18px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.wq-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.wq-col { padding: 18px 0 0; }
.wq-col.us { padding-left: 28px; border-left: 1px solid var(--line); }
.wq-col:not(.us) { padding-right: 28px; }
.wq-h {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.wq-col.us .wq-h { color: var(--red); }
.wq-col ul { margin: 0; padding: 0; list-style: none; }
.wq-col li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  color: #8a8a8f;
}
.wq-col.us li { color: var(--ink-1); font-weight: 600; }
.wq-x { font-size: 13px; color: #b3b0aa; }
.wq-c { font-size: 15px; font-weight: 800; color: var(--red); }

/* Why option E: four benefit figures */
.wf-figs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.wf-figs li {
  padding: 22px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.wf-figs b {
  display: block;
  font-family: var(--display);
  font-size: clamp(36px, 3.6vw, 52px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--red);
}
.wf-figs span {
  display: block;
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink-2);
}
@media (max-width: 1020px) {
  .wq, .wf { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .wq-col.us { padding-left: 16px; }
  .wq-col:not(.us) { padding-right: 16px; }
  .wq-col li { font-size: 14.5px; }
  .wf-figs li { padding: 16px; }
}

/* Proof section on inner pages (same as Home): heading row + four case cards */
.proof-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px 24px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.proof-head .h2 {
  margin: 0;
}
.proof-grid .shot:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 26px 50px -28px rgba(0, 0, 0, 0.32);
}
@media (max-width: 680px) {
  .proof-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 6px;
    scrollbar-width: none;
  }
  .proof-grid::-webkit-scrollbar { display: none; }
  .proof-grid li { flex: 0 0 78%; scroll-snap-align: start; }
}
.band .proof-grid .shot {
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px -28px rgba(0, 0, 0, 0.25);
}

/* every form and booking block sits plain on the page background (no card) */
.form-plain > p {
  margin: -6px 0 18px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.band .form-plain input,
.band .form-plain select,
.band .form-plain textarea {
  background: var(--bg);
}
.form-plain .cc-embed {
  background: #fff;
}
.band .form-plain .cc-embed {
  background: var(--bg);
}

/* thank-you note that replaces a lead form after it is sent */
.form-thanks {
  padding: 8px 0;
  outline: none;
}

.form-thanks h3 {
  margin: 6px 0 10px;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
}

.form-thanks p {
  max-width: 52ch;
}

.form-thanks-alt a {
  text-decoration: underline;
}

/* Careers: text cards (no hover lift) and the apply block */
.card.is-static:hover {
  transform: none;
  box-shadow: none;
}

.band .card.is-static {
  background: var(--bg);
}

.careers-apply {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
}

.careers-apply p {
  margin: 0 0 20px;
  max-width: 52ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}

.careers-apply p a {
  color: var(--red);
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 1020px) {
  .careers-cards.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .careers-apply,
  .careers-cards.cols-4 {
    grid-template-columns: 1fr;
  }
}

/* Selected work: one carousel of client cards - 4 visible, arrows to move, swipe on phones */
.proof-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.pc-nav {
  display: flex;
  gap: 8px;
}
.pc-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink-1);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background 250ms, color 250ms, opacity 250ms;
}
.pc-btn svg {
  width: 16px;
  height: 16px;
}
.pc-btn:hover:not(:disabled),
.pc-btn:focus-visible {
  background: var(--red);
  color: #fff;
}
.pc-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.pc-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 42px) / 4);
  gap: 14px;
  margin: 0;
  padding: 6px 0 28px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pc-track::-webkit-scrollbar {
  display: none;
}
.pc-track li {
  display: flex;
  scroll-snap-align: start;
}
.band .pc-track .shot {
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px -28px rgba(0, 0, 0, 0.25);
}
@media (max-width: 1020px) {
  .pc-track {
    grid-auto-columns: calc((100% - 28px) / 2.4);
  }
}
@media (max-width: 680px) {
  .proof-carousel {
    margin: 0 calc(-1 * var(--gutter));
  }
  .pc-track {
    grid-auto-columns: 78%;
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .pc-nav {
    display: none;
  }
}

/* carousel cards arrive one after another when the section scrolls in: rise + fade, picture settles from a slight zoom */
.proof-carousel.rv,
.proof-carousel.rv.in {
  opacity: 1;
  transform: none;
  transition: none;
}
.proof-carousel .pc-track li {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease), transform 900ms var(--ease);
  transition-delay: calc(min(var(--i, 0), 5) * 90ms);
}
.proof-carousel .pc-track .shot img {
  transform: scale(1.08);
  transition: transform 1400ms var(--ease);
  transition-delay: calc(min(var(--i, 0), 5) * 90ms);
}
.proof-carousel.in .pc-track li {
  opacity: 1;
  transform: none;
}
.proof-carousel.in .pc-track .shot img {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .proof-carousel .pc-track li,
  .proof-carousel .pc-track .shot img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- overview section: points as eyebrow + headline (left), one flow visual (right) ---------- */
.ov {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: 28px;
  background: #fff;
}
.ov-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ov-list li {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.ov-list li:first-child {
  padding-top: 0;
  border-top: 0;
}
.ov-list li:last-child {
  padding-bottom: 0;
}
.ov-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
}
.ov-list h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: -0.025em;
  line-height: 1.25;
  text-wrap: balance;
}
.ov-list h3 em {
  font-style: normal;
  font-weight: 700;
  color: var(--ink-1);
}
.ov-visual {
  padding: clamp(20px, 2.6vw, 32px);
  border-radius: 22px;
  background: linear-gradient(160deg, #f7f7f9, #eeeef2);
}
.band .ov {
  box-shadow: 0 0 0 1px var(--line);
}

/* flow visual: raised nodes -> dashed wires with travelling glow dots -> one glowing hero (left to right) */
.fv {
  --fv-red: #c8161f;
  --fv-line: rgba(200, 22, 31, 0.38);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 142px;
  align-items: center;
}
.fv-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 6px 14px -6px rgba(0, 0, 0, 0.12), 0 18px 36px -18px rgba(0, 0, 0, 0.2);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.fv-node:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 10px 20px -8px rgba(0, 0, 0, 0.16), 0 26px 44px -20px rgba(0, 0, 0, 0.26);
}
.fv-ic {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(145deg, #e8434b, #c8161f 55%, #9c0e16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 14px -6px rgba(200, 22, 31, 0.6);
}
.fv-ic svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fv-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fv-txt b {
  font-size: 14.5px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.fv-txt small {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink-3);
}
/* each wire: a dashed line from its node to a shared bus, which joins the hero */
.fv-wire {
  position: relative;
  align-self: stretch;
}
.fv-wire::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px dashed var(--fv-line);
}
.fv-wire::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-right: 2px dashed var(--fv-line);
}
.fv-wire:nth-of-type(1)::after {
  top: 50%;
}
.fv-wire:last-of-type::after {
  bottom: 50%;
}
.fv-wire i,
.fv-hero::after {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3d47;
  box-shadow: 0 0 0 3px rgba(255, 61, 71, 0.18), 0 0 12px 2px rgba(200, 22, 31, 0.55);
}
.fv-wire i {
  top: calc(50% - 3px);
  left: 0;
  animation: fv-run-x 2.4s var(--ease) infinite;
  animation-delay: calc(var(--i) * 0.45s);
}
@keyframes fv-run-x {
  0% { left: -4px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: calc(100% - 5px); opacity: 0; }
}
.fv-hero {
  position: relative;
  grid-column: 3;
  grid-row: 1 / span var(--n, 4);
  display: grid;
  place-items: center;
  align-content: center;
  width: 128px;
  height: 128px;
  margin-left: 14px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  background: radial-gradient(circle at 34% 28%, #ff6b72, #c8161f 52%, #8e0a12);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 18px 34px -12px rgba(200, 22, 31, 0.55), 0 0 0 8px rgba(200, 22, 31, 0.08);
}
.fv-hero::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  width: 16px;
  border-top: 2px dashed var(--fv-line);
}
.fv-hero::after {
  content: '';
  right: calc(100% + 4px);
  top: calc(50% - 3px);
  animation: fv-pulse 2.4s ease-in-out infinite;
}
.fv-hero b {
  position: relative;
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: -0.03em;
  line-height: 1;
}
.fv-hero small {
  position: relative;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}
.fv-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(200, 22, 31, 0.35);
  animation: fv-ring 2.4s ease-out infinite;
}
@keyframes fv-ring {
  0% { transform: scale(0.92); opacity: 0.9; }
  100% { transform: scale(1.18); opacity: 0; }
}
@keyframes fv-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.band .ov-visual {
  background: linear-gradient(160deg, #f5f5f7, #ececf0);
}

@media (max-width: 1020px) {
  .ov {
    grid-template-columns: 1fr;
  }
  /* stacked: the visual leads, the points follow */
  .ov-visual {
    order: -1;
  }
}
/* phones: the same left-to-right visual, just compact, so every line still meets the shared bus and the hero */
@media (max-width: 560px) {
  .ov-visual {
    padding: 14px 12px;
    border-radius: 18px;
  }
  .fv {
    grid-template-columns: minmax(0, 1fr) 18px 78px;
  }
  .fv-node {
    gap: 8px;
    margin: 4px 0;
    padding: 9px 10px;
    border-radius: 12px;
  }
  .fv-ic {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
  .fv-ic svg {
    width: 17px;
    height: 17px;
  }
  .fv-txt b {
    font-size: 12.5px;
  }
  .fv-txt small {
    display: none;
  }
  .fv-hero {
    width: 70px;
    height: 70px;
    margin-left: 8px;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 12px 24px -10px rgba(200, 22, 31, 0.55), 0 0 0 5px rgba(200, 22, 31, 0.08);
  }
  .fv-hero::before {
    width: 8px;
  }
  .fv-hero::after {
    right: calc(100% + 1px);
  }
  .fv-hero b {
    font-size: 16px;
  }
  .fv-hero small {
    margin-top: 2px;
    font-size: 8px;
    letter-spacing: 0.02em;
  }
  .fv-glow {
    inset: -6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fv-wire i,
  .fv-glow,
  .fv-hero::after {
    animation: none;
  }
  .fv-wire i {
    display: none;
  }
}

/* horizontal step flow: raised step cards -> dashed wires with glow dots -> a glowing weekly loop */
.dx-viz:has(.fh) {
  background: linear-gradient(160deg, #f7f7f9, #eeeef2);
}
.fh {
  --fv-line: rgba(200, 22, 31, 0.38);
  display: flex;
  align-items: center;
  padding: 10px 2px;
}
.fh-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 6px 14px -6px rgba(0, 0, 0, 0.12), 0 18px 36px -18px rgba(0, 0, 0, 0.2);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.fh-node:hover {
  transform: translateY(-2px);
}
.fh-node .fv-ic {
  width: 34px;
  height: 34px;
  margin-bottom: 4px;
  border-radius: 10px;
}
.fh-node .fv-ic svg {
  width: 18px;
  height: 18px;
}
.fh-node b {
  font-size: 14px;
  letter-spacing: -0.01em;
}
.fh-node small {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--ink-3);
}
.fh-wire {
  position: relative;
  flex: 0 0 18px;
  align-self: stretch;
}
.fh-wire::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px dashed var(--fv-line);
}
.fh-wire i {
  position: absolute;
  top: calc(50% - 3px);
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3d47;
  box-shadow: 0 0 0 3px rgba(255, 61, 71, 0.18), 0 0 12px 2px rgba(200, 22, 31, 0.55);
  animation: fv-run-x 1.8s var(--ease) infinite;
  animation-delay: calc(var(--i) * 0.6s);
}
.fh-loop {
  display: flex;
  flex: 0 0 128px;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.fh-hero {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  background: radial-gradient(circle at 34% 28%, #ff6b72, #c8161f 52%, #8e0a12);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 18px 34px -12px rgba(200, 22, 31, 0.55), 0 0 0 8px rgba(200, 22, 31, 0.08);
}
.fh-hero b {
  position: relative;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.fh-hero small {
  position: relative;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.85;
}
/* the weekly loop: a dashed ring that turns, carrying a glow dot */
.fh-ring {
  position: absolute;
  inset: -11px;
  border: 2px dashed var(--fv-line);
  border-radius: 50%;
  animation: fh-spin 6s linear infinite;
}
.fh-ring i {
  position: absolute;
  top: -5px;
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3d47;
  box-shadow: 0 0 0 3px rgba(255, 61, 71, 0.18), 0 0 12px 2px rgba(200, 22, 31, 0.55);
}
@keyframes fh-spin {
  to { transform: rotate(360deg); }
}
.fh-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 6px 14px -8px rgba(0, 0, 0, 0.2);
}
.fh-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  animation: fv-pulse 1.6s ease-in-out infinite;
}
@media (max-width: 560px) {
  .fh {
    padding: 6px 0;
  }
  .fh-node {
    align-items: center;
    padding: 9px 6px;
    border-radius: 11px;
    text-align: center;
  }
  .fh-node .fv-ic {
    width: 28px;
    height: 28px;
    margin-bottom: 2px;
  }
  .fh-node .fv-ic svg {
    width: 15px;
    height: 15px;
  }
  .fh-node b {
    font-size: 11.5px;
  }
  .fh-node small {
    display: none;
  }
  .fh-wire {
    flex-basis: 10px;
  }
  .fh-wire i {
    width: 6px;
    height: 6px;
    top: calc(50% - 2px);
  }
  .fh-loop {
    flex-basis: 84px;
    gap: 10px;
  }
  .fh-hero {
    width: 70px;
    height: 70px;
    margin-top: 6px;
  }
  .fh-ring {
    inset: -7px;
  }
  .fh-hero b {
    font-size: 12px;
  }
  .fh-hero small {
    font-size: 7px;
    letter-spacing: 0.01em;
  }
  .fh-live {
    padding: 4px 7px;
    font-size: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fh-wire i,
  .fh-ring,
  .fh-live i {
    animation: none;
  }
  .fh-wire i {
    display: none;
  }
}

/* every visual, site-wide: sits at the top of its section and stays in view while the text beside it scrolls (desktop) */
@media (min-width: 1021px) {
  .dx-card {
    align-items: start;
  }
  .dx-card .dx-panel {
    position: sticky;
    top: 24px;
  }
  /* overview: the visual panel runs the full height of the text beside it, diagram centred inside */
  .ov {
    align-items: stretch;
  }
  .ov .ov-visual {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .ov .ov-visual > * {
    width: 100%;
  }
}

/* ---------- 3D overview visuals (shared pieces) ---------- */
.rc {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 6px 14px -6px rgba(0, 0, 0, 0.12), 0 18px 36px -18px rgba(0, 0, 0, 0.2);
}
.rc .fv-ic {
  width: 36px;
  height: 36px;
  border-radius: 11px;
}
.rc .fv-ic svg {
  width: 19px;
  height: 19px;
}
.gd {
  position: absolute;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3d47;
  box-shadow: 0 0 0 3px rgba(255, 61, 71, 0.18), 0 0 12px 2px rgba(200, 22, 31, 0.55);
}
.v3-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.v3-lines line,
.v3-lines polyline,
.v3-lines path {
  fill: none;
  stroke: rgba(200, 22, 31, 0.38);
  stroke-width: 2;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
}
.v3-hero {
  --s: 116px;
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  color: #fff;
  text-align: center;
  background: radial-gradient(circle at 34% 28%, #ff6b72, #c8161f 52%, #8e0a12);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 18px 34px -12px rgba(200, 22, 31, 0.55), 0 0 0 8px rgba(200, 22, 31, 0.08);
}
.v3-hero b {
  position: relative;
  padding: 0 8px;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.v3-hero small {
  position: relative;
  margin-top: 3px;
  padding: 0 10px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
  opacity: 0.88;
}
.ov-visual .fh,
.ov-visual .vh,
.ov-visual .vr,
.ov-visual .vs,
.ov-visual .vx,
.ov-visual .vk {
  --fv-line: rgba(200, 22, 31, 0.38);
}

/* HUB */
.vh {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 26px 0;
  align-items: center;
}
.vh-n0 { grid-area: 1 / 1; }
.vh-n1 { grid-area: 1 / 3; }
.vh-n2 { grid-area: 3 / 1; }
.vh-n3 { grid-area: 3 / 3; }
.vh-hero {
  grid-area: 2 / 2;
  justify-self: center;
}
.vh-dot {
  left: 50%;
  top: 50%;
  margin: -4px 0 0 -4px;
  animation: vh-out 2.6s var(--ease) infinite;
  animation-delay: calc(var(--i) * 0.65s);
}
@keyframes vh-out {
  0% { left: 50%; top: 50%; opacity: 0; }
  20% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: var(--x); top: var(--y); opacity: 0; }
}

/* CHAIN (reuses the step-flow pieces) */
.vc .fh-node {
  padding: 11px 10px;
}
.vc .fh-node small {
  font-size: 11px;
}
.vc .fh-loop {
  flex-basis: 112px;
}
.vc-hero {
  --s: 100px;
}
.vc-hero b {
  padding: 0 6px;
  font-size: 13px;
}

/* RING */
.vr {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  margin: 0 auto;
}
.vr-ring,
.vr-orbit,
.vr-sweep {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
}
.vr-ring {
  border: 2px dashed var(--fv-line);
}
.vr-orbit {
  z-index: 1;
  animation: fh-spin 9s linear infinite;
}
.vr-orbit .gd {
  top: -5px;
  left: calc(50% - 4px);
}
.vr-sweep {
  inset: 20%;
  background: conic-gradient(from 0deg, rgba(200, 22, 31, 0.28), rgba(200, 22, 31, 0) 28%);
  animation: fh-spin 4s linear infinite;
}
.vr-hero {
  --s: 33%;
  position: absolute;
  left: 50%;
  top: 50%;
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.vr-n {
  position: absolute;
  width: 46%;
  transform: translate(-50%, -50%);
}
.vr-n0 { left: 25%; top: 21%; }
.vr-n1 { left: 75%; top: 21%; }
.vr-n2 { left: 75%; top: 79%; }
.vr-n3 { left: 25%; top: 79%; }

/* STAIRS */
.vs {
  position: relative;
  height: 280px;
}
.vs-steps {
  position: absolute;
  left: 0;
  right: 18%;
  bottom: 0;
  top: 0;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.vs-step {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  height: var(--h);
  padding: 12px 10px;
  border-radius: 14px 14px 6px 6px;
  background: linear-gradient(180deg, #fff, #f4f4f7);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 6px 14px -6px rgba(0, 0, 0, 0.12), 0 18px 36px -18px rgba(0, 0, 0, 0.2);
}
.vs-step .fv-ic {
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  border-radius: 10px;
}
.vs-step .fv-ic svg {
  width: 17px;
  height: 17px;
}
.vs-step b {
  font-size: 13px;
  line-height: 1.2;
}
.vs-step small {
  font-size: 11px;
  line-height: 1.3;
  color: var(--ink-3);
}
.vs .v3-lines {
  z-index: 1;
}
.vs-hero {
  --s: 96px;
  position: absolute;
  right: 0;
  top: 0;
}
.vs-hero b {
  font-size: 16px;
}
.vs-dot {
  margin: -4px 0 0 -4px;
  animation: vs-climb 3.2s linear infinite;
}
@keyframes vs-climb {
  0% { left: 10%; top: 54%; opacity: 0; }
  8% { opacity: 1; }
  25% { left: 30%; top: 40%; }
  50% { left: 51%; top: 26%; }
  75% { left: 71%; top: 12%; }
  92% { opacity: 1; }
  100% { left: 89%; top: 17%; opacity: 0; }
}

/* SPLIT */
.vx {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) 34px minmax(0, 1.15fr);
  align-items: center;
}
.vx-tag {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.vx-before {
  display: grid;
  gap: 8px;
}
.vx-chip {
  padding: 9px 11px;
  border: 1.5px dashed #c9c9cf;
  border-radius: 11px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink-3);
}
.vx-wire {
  position: relative;
  height: 2px;
  border-top: 2px dashed var(--fv-line);
}
.vx-wire .gd {
  top: -5px;
  left: 0;
  animation: fv-run-x 1.8s var(--ease) infinite;
}
.vx-after {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 9px;
  padding: 16px 14px 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 10px 22px -8px rgba(0, 0, 0, 0.16), 0 28px 48px -22px rgba(0, 0, 0, 0.26);
}
.vx-badge {
  position: relative;
  justify-self: start;
  margin: 0 0 4px;
  padding: 7px 14px;
  border-radius: 999px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  background: linear-gradient(145deg, #e8434b, #c8161f 55%, #9c0e16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 20px -8px rgba(200, 22, 31, 0.6);
}
.vx-badge .fv-glow {
  inset: -5px;
  border-radius: 999px;
}
.vx-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.vx-row .fv-ic {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}
.vx-row .fv-ic svg {
  width: 15px;
  height: 15px;
}

/* STACK */
.vk {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  grid-template-areas: 'plates hero' 'plates labels';
  gap: 12px 14px;
  align-items: center;
}
.vk-plates {
  grid-area: plates;
  position: relative;
  height: 280px;
}
.vk-plates::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 34px;
  bottom: 40px;
  border-left: 2px dashed var(--fv-line);
}
.vk-plates::after {
  content: '';
  position: absolute;
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3d47;
  box-shadow: 0 0 0 3px rgba(255, 61, 71, 0.18), 0 0 12px 2px rgba(200, 22, 31, 0.55);
  animation: vk-rise 2.6s var(--ease) infinite;
}
@keyframes vk-rise {
  0% { top: 230px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 40px; opacity: 0; }
}
.vk-plate {
  position: absolute;
  left: 50%;
  top: calc(176px - var(--i) * 38px);
  width: 118px;
  height: 118px;
  margin-left: -59px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff, #ececf0);
  box-shadow: inset 0 1px 0 #fff, 0 9px 0 -1px #d6d6dc, 0 24px 30px -14px rgba(0, 0, 0, 0.3);
  transform: rotateX(58deg) rotateZ(45deg);
}
.vk-plate.top {
  background: radial-gradient(circle at 34% 28%, #ff6b72, #c8161f 55%, #8e0a12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 9px 0 -1px #8e0a12, 0 0 30px 4px rgba(200, 22, 31, 0.35);
}
.vk-labels {
  grid-area: labels;
  display: grid;
  gap: 8px;
}
.vk-hero {
  grid-area: hero;
  justify-self: start;
  width: auto;
  height: auto;
  padding: 10px 16px;
  border-radius: 999px;
  text-align: left;
}
.vk-hero .fv-glow {
  inset: -6px;
  border-radius: 999px;
}
.vk-hero b {
  padding: 0;
  font-size: 15px;
}
.vk-hero small {
  padding: 0;
}
.vk-n {
  padding: 8px 10px;
}
.vk-n .fv-ic {
  width: 30px;
  height: 30px;
}
.vk-n .fv-ic svg {
  width: 16px;
  height: 16px;
}

/* phones: every visual keeps its desktop shape, just compact */
@media (max-width: 560px) {
  .rc {
    gap: 7px;
    padding: 7px 8px;
    border-radius: 11px;
  }
  .rc .fv-ic,
  .vk-n .fv-ic {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }
  .rc .fv-ic svg,
  .vk-n .fv-ic svg {
    width: 14px;
    height: 14px;
  }
  .rc .fv-txt b {
    font-size: 11px;
  }
  .rc .fv-txt small,
  .vs-step small {
    display: none;
  }
  .v3-hero b {
    font-size: 12.5px;
  }
  .v3-hero small {
    font-size: 7px;
    padding: 0 6px;
  }
  .vh {
    grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr);
    gap: 18px 0;
  }
  .vh-hero,
  .vc-hero {
    --s: 72px;
  }
  .vc-hero b {
    font-size: 11px;
  }
  .vs {
    height: 210px;
  }
  .vs-steps {
    gap: 5px;
  }
  .vs-step {
    padding: 8px 5px;
    border-radius: 10px 10px 5px 5px;
  }
  .vs-step .fv-ic {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }
  .vs-step .fv-ic svg {
    width: 13px;
    height: 13px;
  }
  .vs-step b {
    font-size: 10px;
  }
  .vs-hero {
    --s: 60px;
  }
  .vs-steps {
    right: 25%;
  }
  /* chain: four steps + result still fit one row on a phone */
  .vc .fh-node {
    padding: 7px 2px;
  }
  .vc .fh-node .fv-ic {
    width: 24px;
    height: 24px;
  }
  .vc .fh-node b {
    font-size: 7.5px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-align: center;
  }
  .vc .fh-wire {
    flex-basis: 7px;
  }
  .vc .fh-loop {
    flex-basis: 62px;
  }
  .vc-hero {
    --s: 56px;
  }
  .vc-hero b {
    padding: 0 3px;
    font-size: 8px;
  }
  .vc-hero small {
    font-size: 6px;
  }
  .vx {
    grid-template-columns: minmax(0, 0.85fr) 16px minmax(0, 1.15fr);
  }
  .vx-chip {
    padding: 6px 7px;
    font-size: 10px;
  }
  .vx-after {
    padding: 11px 9px 10px;
    gap: 7px;
  }
  .vx-badge {
    padding: 5px 10px;
    font-size: 10px;
  }
  .vx-row {
    gap: 6px;
    font-size: 10.5px;
  }
  .vx-row .fv-ic {
    width: 22px;
    height: 22px;
    border-radius: 7px;
  }
  .vx-row .fv-ic svg {
    width: 12px;
    height: 12px;
  }
  .vk {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 10px 8px;
  }
  .vk-plates {
    height: 200px;
  }
  .vk-plate {
    top: calc(124px - var(--i) * 26px);
    width: 76px;
    height: 76px;
    margin-left: -38px;
  }
  .vk-plates::before {
    top: 26px;
    bottom: 30px;
  }
  @keyframes vk-rise {
    0% { top: 160px; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { top: 30px; opacity: 0; }
  }
  .vk-hero {
    padding: 7px 11px;
  }
  .vk-hero b {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vh-dot,
  .vr-orbit,
  .vr-sweep,
  .vs-dot,
  .vx-wire .gd,
  .vk-plates::after {
    animation: none;
  }
  .vh-dot,
  .vs-dot,
  .vx-wire .gd,
  .vk-plates::after {
    display: none;
  }
}

/* very small phones (320-380px): let the last pieces wrap instead of pushing the page wider */
@media (max-width: 380px) {
  .fh-live {
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
  .fh-loop {
    flex-basis: 72px;
  }
  .vs-steps {
    right: 29%;
  }
}

/* overview lists: the problem on the first line, the answer (bold) always on its own second line */
.ov-list h3 em {
  display: block;
}

/* chains: card text never runs past the card edge */
.fh-node b,
.fh-node small {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* PATH: 1 -> 2 on the top row, a dashed turn down, 3 -> 4 on the bottom row, then the result */
.vp {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr) 26px 112px;
  grid-template-rows: 1fr 1fr;
  row-gap: 26px;
  align-items: stretch;
  --fv-line: rgba(200, 22, 31, 0.38);
}
.vp-n {
  min-height: 66px;
}
.vp-n0 { grid-area: 1 / 1; }
.vp-w0 { grid-area: 1 / 2; }
.vp-n1 { grid-area: 1 / 3; }
.vp-n2 { grid-area: 2 / 1; }
.vp-w1 { grid-area: 2 / 2; }
.vp-n3 { grid-area: 2 / 3; }
.vp-w2 { grid-area: 2 / 4; }
.vp-hero {
  --s: 108px;
  grid-area: 1 / 5 / 3 / 6;
  align-self: center;
  justify-self: end;
}
.vp-turn {
  position: relative;
  z-index: 0;
  grid-area: 1 / 1 / 3 / 4;
  pointer-events: none;
}
.vp-turn span {
  position: absolute;
}
.vp-turn .t1 {
  left: 76%;
  top: 25%;
  height: 25%;
  border-left: 2px dashed var(--fv-line);
}
.vp-turn .t2 {
  left: 24%;
  top: 50%;
  width: 52%;
  border-top: 2px dashed var(--fv-line);
}
.vp-turn .t3 {
  left: 24%;
  top: 50%;
  height: 25%;
  border-left: 2px dashed var(--fv-line);
}
.vp-turn .gd {
  margin: -3px 0 0 -3px;
  animation: vp-turn 2.6s linear infinite;
}
@keyframes vp-turn {
  0% { left: 76%; top: 30%; opacity: 0; }
  10% { opacity: 1; }
  30% { left: 76%; top: 50%; }
  70% { left: 24%; top: 50%; }
  90% { opacity: 1; }
  100% { left: 24%; top: 70%; opacity: 0; }
}
@media (max-width: 560px) {
  .vp {
    grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr) 10px 64px;
    row-gap: 16px;
  }
  .vp-n {
    min-height: 44px;
  }
  .vp-hero {
    --s: 62px;
  }
  .vp-hero b {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vp-turn .gd {
    display: none;
  }
}

/* overview: optional row of links under the list */
.ov-text {
  min-width: 0;
}
.ov-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.ov-links a {
  font-size: 14px;
  font-weight: 600;
  color: var(--red);
}
.ov-links a:hover {
  text-decoration: underline;
}

/* ---------- more overview visuals: path (roomier), arc, timeline, mosaic, wave, bow-tie, steps table ---------- */
.vp {
  row-gap: 54px;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px 120px;
}
.vp-n {
  min-height: 92px;
  padding: 14px 16px;
}
.vp-hero {
  --s: 120px;
}

/* ARC */
.va {
  position: relative;
  height: 380px;
}
.va-n {
  position: absolute;
  width: 38%;
  transform: translate(-50%, -50%);
}
.va-n0 { left: 19%; top: 58%; }
.va-n1 { left: 27%; top: 16%; }
.va-n2 { left: 73%; top: 16%; }
.va-n3 { left: 81%; top: 58%; }
.va-hero {
  --s: 124px;
  position: absolute;
  left: 50%;
  top: 80%;
  transform: translate(-50%, -50%);
}
.va-dot {
  margin: -4px 0 0 -4px;
  animation: va-in 2.6s var(--ease) infinite;
  animation-delay: calc(var(--i) * 0.65s);
}
@keyframes va-in {
  0% { left: var(--x); top: var(--y); opacity: 0; }
  20% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 50%; top: 80%; opacity: 0; }
}

/* TIMELINE */
.vt {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 6px 0;
}
.vt-line {
  position: absolute;
  left: 21px;
  top: 24px;
  bottom: 30px;
  border-left: 2px dashed var(--fv-line, rgba(200, 22, 31, 0.38));
}
.vt-line .gd {
  left: -5px;
  animation: vt-down 3.2s linear infinite;
}
@keyframes vt-down {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.vt-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.vt-ic .fv-ic {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}
.vt-card {
  padding: 14px 16px;
}
.vt-dot {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 auto;
  border-radius: 50%;
  background: #ff3d47;
  box-shadow: 0 0 0 5px rgba(255, 61, 71, 0.18), 0 0 16px 3px rgba(200, 22, 31, 0.5);
}
.vt-hero {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 20px;
  border-radius: 999px;
  color: #fff;
  background: radial-gradient(circle at 20% 20%, #ff6b72, #c8161f 55%, #8e0a12);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 18px 34px -12px rgba(200, 22, 31, 0.55);
}
.vt-hero .fv-glow {
  inset: -6px;
  border-radius: 999px;
}
.vt-hero b {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -0.02em;
}
.vt-hero small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.88;
}

/* MOSAIC */
.vm {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.vm-tile {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 150px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(160deg, #fff, #f6f6f9);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 8px 18px -8px rgba(0, 0, 0, 0.14), 0 22px 40px -22px rgba(0, 0, 0, 0.22);
}
.vm-t1,
.vm-t3 {
  align-items: flex-end;
  text-align: right;
}
.vm-t2,
.vm-t3 {
  justify-content: flex-end;
}
.vm-tile b {
  font-size: 14.5px;
  line-height: 1.25;
}
.vm-tile small {
  font-size: 12px;
  color: var(--ink-3);
}
.vm-tile .fv-ic {
  width: 38px;
  height: 38px;
  margin-bottom: 4px;
}
.vm-hero {
  --s: 128px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 18px 34px -12px rgba(200, 22, 31, 0.55), 0 0 0 10px #f1f1f4, 0 0 0 11px rgba(200, 22, 31, 0.12);
}
.vm-dot {
  z-index: 2;
}

/* WAVE */
.vw {
  position: relative;
  height: 330px;
}
.vw .v3-lines {
  width: 100%;
}
.vw-pin {
  position: absolute;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #c8161f;
}
.vw-p0 { left: 13%; top: 37%; }
.vw-p1 { left: 34%; top: 63%; }
.vw-p2 { left: 54%; top: 37%; }
.vw-p3 { left: 71%; top: 63%; }
.vw-n {
  position: absolute;
  width: 30%;
  transform: translateX(-50%);
}
.vw-n0 { left: 17%; top: 0; }
.vw-n1 { left: 36%; bottom: 0; }
.vw-n2 { left: 56%; top: 0; }
.vw-n3 { left: 70%; bottom: 0; }
.vw-hero {
  --s: 104px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.vw-dot {
  margin: -4px 0 0 -4px;
  animation: vw-ride 3.6s linear infinite;
}
@keyframes vw-ride {
  0% { left: 2%; top: 50%; opacity: 0; }
  6% { opacity: 1; }
  12% { left: 13%; top: 36%; }
  25% { left: 24%; top: 50%; }
  37% { left: 34%; top: 64%; }
  50% { left: 44%; top: 50%; }
  62% { left: 54%; top: 36%; }
  75% { left: 64%; top: 50%; }
  87% { left: 71%; top: 64%; }
  94% { opacity: 1; }
  100% { left: 78%; top: 50%; opacity: 0; }
}

/* BOW-TIE */
.vb {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 40px 0;
  align-items: center;
}
.vb-in0 { grid-area: 1 / 1; }
.vb-in1 { grid-area: 2 / 1; }
.vb-out0 { grid-area: 1 / 3; }
.vb-out1 { grid-area: 2 / 3; }
.vb-n {
  min-height: 84px;
  padding: 14px;
}
.vb-hero {
  --s: 124px;
  grid-area: 1 / 2 / 3 / 3;
  justify-self: center;
}
.vb-dot {
  margin: -4px 0 0 -4px;
  animation: vb-flow 2.4s var(--ease) infinite;
  animation-delay: calc(var(--i) * 0.6s);
}
@keyframes vb-flow {
  0% { left: var(--x1); top: var(--y1); opacity: 0; }
  20% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: var(--x2); top: var(--y2); opacity: 0; }
}

/* STEPS TABLE (visual-only section) */
.vo {
  padding: clamp(22px, 3.4vw, 44px);
  border-radius: 28px;
  background: #fff;
}
.band .vo {
  box-shadow: 0 0 0 1px var(--line);
}
.vtab {
  --fv-line: rgba(200, 22, 31, 0.38);
  max-width: 960px;
  margin: 0 auto;
}
.vtab-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  padding-top: 38px;
}
.vtab-line {
  position: absolute;
  left: calc(50% / var(--n));
  right: calc(50% / var(--n));
  top: 66px;
  border-top: 2px dashed var(--fv-line);
}
.vtab-line .gd {
  top: -5px;
  animation: vtab-run 4s linear infinite;
}
@keyframes vtab-run {
  0% { left: 0; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.vtab-loop {
  position: absolute;
  top: 0;
  left: calc((var(--a) + 0.5) / var(--n) * 100%);
  right: calc(50% / var(--n));
  height: 34px;
  border: 2px dashed #c8161f;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}
.vtab-loop em {
  position: absolute;
  left: 50%;
  top: -10px;
  padding: 0 8px;
  transform: translateX(-50%);
  background: #fff;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #c8161f;
}
.vtab-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.vtab-num {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  background: radial-gradient(circle at 34% 28%, #ff6b72, #c8161f 55%, #8e0a12);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 12px 22px -10px rgba(200, 22, 31, 0.6);
}
.vtab-step.loop .vtab-num {
  color: #c8161f;
  background: #fff;
  box-shadow: inset 0 0 0 3px #c8161f, 0 12px 22px -12px rgba(200, 22, 31, 0.5);
}
.vtab-step b {
  font-size: 15px;
}
.vtab-rows {
  display: grid;
  gap: 10px;
  margin-top: 30px;
}
.vtab-row {
  display: grid;
  grid-template-columns: 38px 120px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 6px 14px -6px rgba(0, 0, 0, 0.12), 0 14px 30px -18px rgba(0, 0, 0, 0.18);
}
.vtab-row .fv-ic {
  width: 38px;
  height: 38px;
}
.vtab-row b {
  font-size: 15px;
  color: #c8161f;
}
.vtab-row span:last-child {
  font-size: 15px;
  color: var(--ink-2);
}

@media (max-width: 560px) {
  .vp {
    row-gap: 28px;
    grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr) 10px 64px;
  }
  .vp-n {
    min-height: 54px;
    padding: 8px;
  }
  .vp-hero {
    --s: 62px;
  }
  .va {
    height: 250px;
  }
  .va-n {
    width: 40%;
  }
  .va-hero {
    --s: 76px;
  }
  .va-hero b,
  .vm-hero b,
  .vb-hero b,
  .vw-hero b {
    font-size: 11px;
  }
  .vt {
    gap: 12px;
  }
  .vt-line {
    left: 15px;
  }
  .vt-row {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
  }
  .vt-ic .fv-ic {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
  .vt-card .fv-txt small {
    display: block;
    font-size: 10.5px;
  }
  .vt-hero b {
    font-size: 16px;
  }
  .vm {
    gap: 10px;
  }
  .vm-tile {
    min-height: 104px;
    padding: 11px;
    border-radius: 14px;
  }
  .vm-tile b {
    font-size: 11.5px;
  }
  .vm-tile small {
    display: none;
  }
  .vm-tile .fv-ic {
    width: 26px;
    height: 26px;
  }
  .vm-hero {
    --s: 78px;
  }
  .vw {
    height: 250px;
  }
  .vw-n {
    width: 32%;
  }
  .vw-hero {
    --s: 60px;
  }
  .vb {
    grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr);
    gap: 24px 0;
  }
  .vb-n {
    min-height: 56px;
    padding: 8px;
  }
  .vb-hero {
    --s: 64px;
  }
  .vtab-steps {
    padding-top: 30px;
  }
  .vtab-line {
    top: 48px;
  }
  .vtab-num {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }
  .vtab-loop {
    height: 26px;
  }
  .vtab-step b {
    font-size: 11px;
  }
  .vtab-row {
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 10px 12px;
    gap: 4px 10px;
  }
  .vtab-row .fv-ic {
    grid-row: span 2;
    width: 30px;
    height: 30px;
  }
  .vtab-row b,
  .vtab-row span:last-child {
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .va-dot,
  .vt-line .gd,
  .vw-dot,
  .vb-dot,
  .vtab-line .gd {
    display: none;
  }
}

/* long words inside the glowing circles: keep them inside */
.va-hero b {
  font-size: 15px;
}
@media (max-width: 560px) {
  .va-hero {
    --s: 80px;
  }
  .va-hero b {
    padding: 0;
    font-size: 9px;
    letter-spacing: -0.03em;
  }
  .va-hero small {
    font-size: 6px;
    padding: 0 4px;
  }
  .vp {
    grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr) 8px 72px;
  }
  .vp-hero {
    --s: 70px;
  }
  .vp-hero b {
    font-size: 10px;
  }
  .vp-hero small {
    font-size: 6px;
    padding: 0 4px;
  }
}

/* path cards: icon above the text, so titles get the full card width */
.vp {
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px 116px;
}
.vp-n {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
}
.vp-hero {
  --s: 116px;
}
@media (max-width: 560px) {
  .vp {
    grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr) 8px 72px;
  }
  .vp-n {
    gap: 5px;
    padding: 9px;
  }
  .vp-hero {
    --s: 70px;
  }
}

/* platform logos: brand icons on raised tiles (hub cards + logo ring) */
.pl-logo {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 6px 14px -6px rgba(0, 0, 0, 0.16), 0 16px 30px -18px rgba(0, 0, 0, 0.22);
}
.pl-logo svg {
  width: 28px;
  height: 28px;
}
.pl-cards .card .pl-logo {
  margin-bottom: 14px;
}
.vl {
  --fv-line: rgba(200, 22, 31, 0.38);
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1;
  margin: 0 auto;
}
.vl .vr-ring,
.vl .vr-orbit {
  inset: 15%;
}
.vl-tile {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, -32%);
}
.vl-tile small {
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-2);
}
.vl .vr-hero {
  --s: 30%;
}
@media (max-width: 560px) {
  .vl .pl-logo {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }
  .vl .pl-logo svg {
    width: 20px;
    height: 20px;
  }
  .vl-tile small {
    font-size: 9px;
  }
}
/* Walmart's logo is a wide wordmark: give it more room in its tile (as on the Home page) */
.pl-logo[data-name='Walmart'] svg {
  width: 44px;
  height: 44px;
}
@media (max-width: 560px) {
  .vl .pl-logo[data-name='Walmart'] svg {
    width: 32px;
    height: 32px;
  }
}
.vw-hero b {
  padding: 0 4px;
  font-size: 15px;
}
@media (max-width: 560px) {
  .vw-hero {
    --s: 66px;
  }
  .vw-hero b {
    padding: 0;
    font-size: 9px;
    letter-spacing: -0.02em;
  }
  .vw-hero small {
    padding: 0 3px;
    font-size: 5.5px;
  }
}

/* steps table: a little smaller, and each row lights up in turn with its numbered step */
.vtab {
  max-width: 780px;
}
.vtab-steps {
  padding-top: 32px;
}
.vtab-line {
  top: 55px;
}
.vtab-num {
  width: 46px;
  height: 46px;
  font-size: 17px;
}
.vtab-step b {
  font-size: 14px;
}
.vtab-rows {
  gap: 8px;
  margin-top: 24px;
}
.vtab-row {
  grid-template-columns: 32px 100px minmax(0, 1fr);
  padding: 9px 14px;
  border-radius: 12px;
  animation: vtab-hl calc(var(--n) * 1.4s) var(--ease) infinite;
  animation-delay: calc(var(--i) * 1.4s);
}
.vtab-row .fv-ic {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}
.vtab-row .fv-ic svg {
  width: 16px;
  height: 16px;
}
.vtab-row b,
.vtab-row span:last-child {
  font-size: 14px;
}
.vtab-num {
  animation: vtab-pulse calc(var(--n) * 1.4s) var(--ease) infinite;
  animation-delay: calc(var(--i) * 1.4s);
}
@keyframes vtab-hl {
  0%, 22%, 100% {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 6px 14px -6px rgba(0, 0, 0, 0.12), 0 14px 30px -18px rgba(0, 0, 0, 0.18);
    transform: none;
  }
  5%, 16% {
    background: #fff6f6;
    box-shadow: inset 0 0 0 1.5px rgba(200, 22, 31, 0.55), 0 12px 26px -10px rgba(200, 22, 31, 0.28);
    transform: translateX(4px);
  }
}
@keyframes vtab-pulse {
  0%, 22%, 100% { transform: none; }
  5%, 16% { transform: scale(1.12); }
}
@media (max-width: 560px) {
  .vtab-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }
  .vtab-num {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vtab-row,
  .vtab-num {
    animation: none;
  }
}

.vtab-loop em {
  white-space: nowrap;
}

/* Step-by-step build for the diagrams that look alike (hub, ring, arc, mosaic, converge).
   Each one assembles in its own order the first time it scrolls into view (site.js adds .play).
   Uses opacity / translate / scale / clip-path only, so the existing positioning and loops keep working. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .sb.play :is(.rc, .v3-hero, .vm-tile, .fv-node, .fv-hero, .vr-ring) {
    transition: opacity 0.7s var(--ease), translate 0.7s var(--ease), scale 0.7s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
    transition-delay: var(--d, 0s), var(--d, 0s), var(--d, 0s), 0s, 0s;
  }
  .sb.play :is(.v3-lines, .fv-wire) { transition: clip-path 1s var(--ease) var(--d, 0s); }
  .sb.play :is(.gd, .vr-orbit, .vr-sweep, .fv-wire i) { transition: visibility 0s linear var(--dd, 2.2s); }
  .sb:not(.play) :is(.rc, .v3-hero, .vm-tile, .fv-node, .fv-hero, .vr-ring) { opacity: 0; translate: var(--tx, 0) var(--ty, 0); scale: var(--sc, 0.9); }
  .sb:not(.play) :is(.gd, .vr-orbit, .vr-sweep, .fv-wire i) { visibility: hidden; }

  /* HUB: the centre lights first, spokes burst out, then the cards land corner by corner */
  .sb .vh-hero { --d: 0.1s; --sc: 0.5; }
  .sb .vh .v3-lines { --d: 0.5s; }
  .sb:not(.play) .vh .v3-lines { clip-path: circle(0% at 50% 50%); }
  .sb .vh .v3-lines { clip-path: circle(80% at 50% 50%); }
  .sb .vh-n0 { --d: 0.9s; --tx: 30px; --ty: 30px; }
  .sb .vh-n1 { --d: 1.1s; --tx: -30px; --ty: 30px; }
  .sb .vh-n3 { --d: 1.3s; --tx: -30px; --ty: -30px; }
  .sb .vh-n2 { --d: 1.5s; --tx: 30px; --ty: -30px; }
  .sb .vh { --dd: 1.9s; }

  /* RING: the ring draws open, then each card drops in clockwise, the centre lights last */
  .sb .vr-ring { --d: 0.1s; --sc: 0.4; }
  .sb .vr-n0 { --d: 0.5s; --ty: -24px; --sc: 1; }
  .sb .vr-n1 { --d: 0.75s; --tx: 24px; --sc: 1; }
  .sb .vr-n2 { --d: 1s; --ty: 24px; --sc: 1; }
  .sb .vr-n3 { --d: 1.25s; --tx: -24px; --sc: 1; }
  .sb .vr-hero { --d: 1.6s; --sc: 0.5; }
  .sb .vr { --dd: 2s; }

  /* ARC: cards fan out of the result one by one, then the paths sweep down into it */
  .sb .va-hero { --d: 0.1s; --sc: 0.6; }
  .sb .va-n0 { --d: 0.4s; --tx: 60px; --ty: 40px; }
  .sb .va-n1 { --d: 0.6s; --tx: 40px; --ty: 70px; }
  .sb .va-n2 { --d: 0.8s; --tx: -40px; --ty: 70px; }
  .sb .va-n3 { --d: 1s; --tx: -60px; --ty: 40px; }
  .sb .va .v3-lines { --d: 1.3s; }
  .sb:not(.play) .va .v3-lines { clip-path: inset(-10% -10% 100% -10%); }
  .sb .va .v3-lines { clip-path: inset(-10% -10% -10% -10%); }
  .sb .va { --dd: 2.2s; }

  /* MOSAIC: tiles flip up diagonally (top-left to bottom-right), then the idea pops into the middle */
  .sb .vm-tile { --ty: 26px; --sc: 0.85; }
  .sb .vm-t0 { --d: 0.1s; }
  .sb .vm-t1, .sb .vm-t2 { --d: 0.35s; }
  .sb .vm-t3 { --d: 0.6s; }
  .sb .vm-hero { --d: 1s; --sc: 0.3; }
  .sb .vm { --dd: 1.6s; }

  /* CONVERGE: inputs slide in top to bottom, each wire draws to the result, which lights up last */
  .sb .fv-node { --d: calc(0.1s + var(--i) * 0.3s); --tx: -32px; --sc: 1; }
  .sb .fv-wire { --d: calc(0.3s + var(--i) * 0.3s); }
  .sb:not(.play) .fv-wire { clip-path: inset(-20px 100% -20px -20px); }
  .sb .fv-wire { clip-path: inset(-20px -20px -20px -20px); }
  .sb .fv-hero { --d: calc(0.4s + var(--n) * 0.3s); --sc: 0.5; }
  .sb .fv { --dd: calc(0.9s + var(--n) * 0.3s); }
}

/* Careers: why join + what we look for, side by side in one card (no visual) */
.ov.cj { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.cj-tag { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 2px solid var(--ink-1); font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-1); }
@media (max-width: 760px) { .ov.cj { grid-template-columns: 1fr; gap: 36px; } }

/* keep a phrase together on one line (e.g. "North America" in a heading) */
.nw { white-space: nowrap; }
/* Locations hub: a flag beside each country name */
.loc-h { display: flex; align-items: center; gap: 12px; }
.loc-flag { flex: none; display: inline-flex; width: 38px; height: 24px; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 10px -4px rgba(0, 0, 0, 0.25); }
.loc-flag svg { width: 100%; height: 100%; display: block; }
.ev-rd-logo { display: block; width: auto; height: 38px; margin: 0 0 18px; }

/* STAIRS in a narrow panel (desktop two-column, tablets, phones): the steps take the full width and the
   result sits top-left above the short first steps, so labels like "Subscriptions" fit without spilling */
.ov-visual:has(> .vs), .vo:has(> .vs) { container-type: inline-size; }
@container (max-width: 600px) {
  .vs { height: 320px; }
  .vs-steps { right: 0; gap: 8px; }
  .vs-hero { right: auto; left: 0; top: 0; }
  .vs .v3-lines, .vs-dot { display: none; }
  .vs-step b { font-size: 12.5px; }
}
@media (max-width: 560px) {
  .vs { height: 230px; }
  .vs-steps { gap: 4px; }
  .vs-step { padding: 8px 4px; }
  .vs-step b { font-size: 9.5px; letter-spacing: -0.01em; overflow-wrap: anywhere; hyphens: auto; }
}

/* Reportdesk.ai explainer film (light theme) in the "Hours of reporting" overview */
.rd-film {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: #f5f5f7;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 10px 24px -10px rgba(0, 0, 0, 0.16), 0 30px 60px -30px rgba(0, 0, 0, 0.22);
}
.rd-film .stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; transform-origin: 0 0; font-family: var(--display); color: #1d1d1f; }
.rd-film .abs { position: absolute; }
.rd-film .mono { font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; }
.rd-film img { display: block; }
.rd-film-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.rd-film-btn span { width: 10px; height: 10px; border-left: 3px solid var(--red); border-right: 3px solid var(--red); box-sizing: border-box; }
.rd-film.paused .rd-film-btn span { width: 0; height: 0; border: 0; border-left: 9px solid var(--red); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
/* the film gets most of the panel (less padding than a diagram) so its text stays readable */
.ov-visual:has(> .rd-film) { display: flex; align-items: center; padding: 0; background: none; border-radius: 0; }

/* "Every client gets live reporting in Reportdesk.ai": the link stands out in Doo red */
a.rd-link { color: var(--red); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 200ms; }
a.rd-link:hover { color: var(--red-dark); }
.rd-film.r43 { aspect-ratio: 4 / 3; }

/* Platforms hub cards: logo and platform name side by side */
.pl-cards .card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-content: start; }
.pl-cards .card .pl-logo { margin-bottom: 0; align-self: center; }
.pl-cards .card h3 { margin: 0; align-self: center; }
.pl-cards .card > :not(.pl-logo):not(h3) { grid-column: 1 / -1; }
.pl-cards .card > p { margin-top: 14px; }
/* a full-width film (visual-only group): no panel behind it */
.vo:has(> .rd-film) { padding: 0; background: none; box-shadow: none; }

/* full-width films (platform pages + hub): fit the screen width, 500-600px tall; the frame sits centred and the
   film's light background continues to both edges (the film's own background layer is hidden) */
.vo > .rd-film {
  aspect-ratio: auto;
  height: clamp(500px, 42vw, 600px);
  background: radial-gradient(ellipse at 70% 20%, #ffffff 0%, #f5f5f7 55%, #ececf0 100%);
}
.vo > .rd-film .stage > .abs:first-child { display: none; }
@media (max-width: 760px) {
  .vo > .rd-film { height: auto; aspect-ratio: 2 / 1; }
}

/* Work hub: one row per client - name + two-line intro on the left, the film (or product image) on the right */
.work-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.wr-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(22px, 3vw, 40px); border-radius: 28px; background: #fff; }
.wr-text h2 { margin: 0 0 12px; font-family: var(--display); font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; }
.wr-text p { margin: 0; max-width: 46ch; color: var(--ink-2); font-size: 17px; line-height: 1.55; }
.wr-shot { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: linear-gradient(160deg, #f7f7f9, #eeeef2); display: grid; place-items: center; }
.wr-shot img { width: auto; height: 100%; object-fit: contain; }
@media (max-width: 760px) {
  .wr-row { grid-template-columns: 1fr; }
  .wr-media { order: -1; }
}
.wr-text .wr-tag { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); max-width: 40ch; line-height: 1.45; }
.wr-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0 !important; }
.wr-social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #f5f5f7; color: var(--ink-2); transition: background 200ms, color 200ms; }
.wr-social a:hover, .wr-social a:focus-visible { background: var(--red); color: #fff; }
.wr-social svg { width: 19px; height: 19px; fill: currentColor; }
/* Work rows alternate: text left / media right, then media left / text right. Rows without a film yet show the
   product photo at its own portrait shape in a narrower column. */
.wr-logo { display: block; width: auto; height: clamp(44px, 4vw, 58px); }
.wr-row.has-img { grid-template-columns: minmax(0, 1fr) minmax(220px, 360px); }
.wr-shot { aspect-ratio: 1000 / 1224; display: block; background: none; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 10px 24px -10px rgba(0, 0, 0, 0.16), 0 30px 60px -30px rgba(0, 0, 0, 0.22); }
.wr-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 761px) {
  .wr-row:nth-child(even) .wr-media { order: -1; }
  .wr-row.has-film:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .wr-row.has-img:nth-child(even) { grid-template-columns: minmax(220px, 360px) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .wr-shot { max-width: 360px; }
}
.wr-logo { filter: url(#logo-ink); max-width: 100%; object-fit: contain; object-position: left center; }
.wr-logo.tall, .wr-logo.badge { height: clamp(58px, 5vw, 76px); }
.wr-logo.raw { filter: none; }

/* Work rows: link icons as the Home "where our brands win" tiles - white rounded squares, brand-coloured marks,
   lifted with a red ring on hover */
.wr-social { gap: 12px; }
.wr-social a {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 22px -16px rgba(60, 20, 25, 0.35);
  transition: box-shadow 300ms, transform 300ms var(--ease), border-color 300ms;
}
.wr-social a:hover, .wr-social a:focus-visible {
  background: #fff;
  border-color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 0 0 2px var(--red), 0 0 22px 2px rgba(200, 22, 31, 0.25);
}
.wr-social svg { width: 21px; height: 21px; }
.wr-social a[data-k='website'] { color: var(--ink-2); }
.wr-social a[data-k='instagram'] { color: #e1306c; }
.wr-social a[data-k='amazon'] { color: #111; }
.wr-social a[data-k='youtube'] { color: #ff0000; }
.wr-social a[data-k='tiktok'] { color: #111; }
.wr-social a[data-k='x'] { color: #111; }
.wr-social a[data-k='facebook'] { color: #1877f2; }
.wr-social a[data-k='linkedin'] { color: #0a66c2; }