/* ============================================================
   Bebop website — mobile homepage styles
   Built on top of Bebop Design System tokens.
   ============================================================ */

@import url("ds/colors_and_type.css");

/* ----- mood + lime intensity variables (toggled via Tweaks) ----- */
:root {
  --lime-emphasis: 1;  /* 0 minimal → 1 balanced → 2 loud */
  --density: 1;        /* 0 compact → 1 comfortable */
  --mood-radius: 18px; /* changes per mood */
}

/* ============================================================
   THE ARTBOARD CONTAINER — mobile frame
   ============================================================ */
.mob {
  width: 390px;
  background: var(--bb-paper);
  color: var(--bb-fg-1);
  font-family: var(--bb-font-body);
  direction: rtl;
  text-align: right;
  position: relative;
  overflow: hidden;
}

.mob[data-density="compact"]      { --density: 0; }
.mob[data-density="comfortable"]  { --density: 1; }

/* Mood overrides */
.mob[data-mood="editorial"] {
  --mood-radius: 4px;
  --mood-divider: 1px;
}
.mob[data-mood="y2k"] {
  --mood-radius: 22px;
  --mood-divider: 2px;
}
.mob[data-mood="hybrid"] {
  --mood-radius: 14px;
  --mood-divider: 1px;
}

/* ============================================================
   SHARED PRIMITIVES
   ============================================================ */
.eyebrow {
  font-family: var(--bb-font-secondary);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--bb-fg-3);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow .dotmark {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bb-lime);
  display: inline-block;
}

.h-section {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--bb-fg-1);
  text-wrap: balance;
}
.h-section .period { color: var(--bb-lime); }

.h-display {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 46px;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--bb-fg-1);
  text-wrap: balance;
}

.body-lg {
  font-family: var(--bb-font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--bb-fg-2);
  text-wrap: pretty;
}
.body-md {
  font-family: var(--bb-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bb-fg-2);
}
.body-sm {
  font-family: var(--bb-font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  color: var(--bb-fg-3);
}

.kbd, .ltr-tok {
  font-family: var(--bb-font-mono);
  font-weight: 500;
  font-size: 0.92em;
  letter-spacing: 0;
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

/* Latin tokens (GEO / SEO / AI / WordPress) inside bold display contexts
   should match the weight & family around them — not sit thin in mono.
   Body-copy tokens keep the deliberate mono treatment. */
h1 .ltr-tok, h2 .ltr-tok, h3 .ltr-tok,
.h-display .ltr-tok, .h-section .ltr-tok,
.title .ltr-tok, .name .ltr-tok,
.v .ltr-tok, .n .ltr-tok {
  font-family: inherit;
  font-weight: inherit;
  font-size: 0.94em;
  letter-spacing: -0.01em;
}

/* en-dash divider line */
.rule {
  height: 1px; background: var(--bb-rule);
  width: 100%;
}
.rule.strong { background: var(--bb-rule-strong); }

/* ============================================================
   HEADER (sticky top app bar)
   ============================================================ */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--bb-paper);
  border-bottom: 1px solid var(--bb-rule);
  position: sticky;
  top: 0;
  z-index: 30;
}
.app-header .logo {
  font-family: var(--bb-font-wordmark);
  font-size: 22px;
  letter-spacing: -0.04em;
  color: var(--bb-ink);
  direction: ltr;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.app-header .logo .dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--bb-lime);
  border-radius: 50%;
  margin-bottom: 2px;
  margin-right: 1px;
}
.menubtn {
  width: 40px; height: 40px;
  border: 1px solid var(--bb-rule-strong);
  border-radius: 999px;
  background: transparent;
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.menubtn .lines {
  display: block;
  width: 16px;
  position: relative;
}
.menubtn .lines::before,
.menubtn .lines::after {
  content: ''; display: block;
  height: 1.5px; background: var(--bb-ink);
  margin: 3px 0;
  border-radius: 1px;
}

/* ============================================================
   STICKY AUDIT CTA (bottom)
   ============================================================ */
.sticky-cta {
  position: sticky;
  bottom: 12px;
  margin: 0 12px;
  z-index: 25;
  background: var(--bb-ink);
  color: var(--bb-paper);
  padding: 12px 14px 12px 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 12px 28px rgba(10,14,16,0.18), 0 2px 6px rgba(10,14,16,0.10);
  font-family: var(--bb-font-subhead);
  font-weight: 600;
  font-size: 15px;
}
.sticky-cta .arrow {
  background: var(--bb-lime);
  color: var(--bb-ink);
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-weight: 900;
  font-size: 18px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  padding: 14px 18px 14px 22px;
  border-radius: 999px;
  font-family: var(--bb-font-subhead);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: opacity var(--bb-dur-fast) var(--bb-ease-out);
}
.btn-primary {
  background: var(--bb-ink);
  color: var(--bb-paper);
}
.btn-primary .pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bb-lime);
  display: inline-block;
}
.btn-secondary {
  background: transparent;
  color: var(--bb-ink);
  border-color: var(--bb-rule-strong);
}
.btn-secondary::after {
  content: '→';
  font-family: var(--bb-font-mono);
  margin-right: 2px;
  transform: scaleX(-1);
  display: inline-block;
}

/* ============================================================
   SECTION PADDING
   ============================================================ */
.section {
  padding: 56px 20px;
}
.section-sm {
  padding: 36px 20px;
}
.section-tight {
  padding: 28px 20px;
}
.mob[data-density="compact"] .section { padding: 44px 20px; }

/* ============================================================
   1. HERO
   ============================================================ */
.hero {
  padding: 36px 20px 56px;
  position: relative;
}
.hero .eyebrow { margin-bottom: 22px; }

/* Hero A — editorial */
.hero[data-variant="A"] .title {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 44px;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--bb-fg-1);
  margin: 0 0 22px;
  text-wrap: balance;
}
.hero[data-variant="A"] .title .ltr-tok {
  font-family: var(--bb-font-hero);
  font-size: 0.94em;
  margin: 0 2px;
}
.hero[data-variant="A"] .title .lime {
  background: var(--bb-lime);
  padding: 0 8px 2px;
  border-radius: 4px;
  margin: 0 -2px;
}
.hero[data-variant="A"] .lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--bb-fg-2);
  margin: 0 0 28px;
  max-width: 320px;
  text-wrap: pretty;
}
.hero[data-variant="A"] .cta-row {
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
}
.hero[data-variant="A"] .cta-row .btn { justify-content: center; }

.hero[data-variant="A"] .signal {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--bb-rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 14px;
}
.hero[data-variant="A"] .signal .item .k {
  font-family: var(--bb-font-secondary);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--bb-fg-3);
  text-transform: uppercase;
  margin: 0 0 6px;
}
.hero[data-variant="A"] .signal .item .v {
  font-family: var(--bb-font-hero);
  font-weight: 700;
  font-size: 16px;
  color: var(--bb-fg-1);
  line-height: 1.25;
}

/* Hero A — success visual (replaces the signal cubes) */
.hero-visual {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hv-card {
  border-radius: var(--bb-radius-lg);
  border: 1px solid var(--bb-rule);
  padding: 18px;
}
.hv-ai {
  background: var(--bb-ink);
  color: var(--bb-on-dark-1);
  border-color: var(--bb-ink);
}
.hv-ai-top {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--bb-font-secondary);
  font-weight: 700; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bb-on-dark-3);
}
.hv-spark {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bb-lime);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bb-lime) 22%, transparent);
}
.hv-ai-q {
  font-family: var(--bb-font-body); font-weight: 700;
  font-size: 15px; color: var(--bb-paper);
  margin: 14px 0 8px; line-height: 1.4;
}
.hv-ai-a {
  font-family: var(--bb-font-body);
  font-size: 14px; line-height: 1.55; color: var(--bb-on-dark-2);
  margin: 0 0 14px;
}
.hv-ai-a strong { color: var(--bb-lime); font-weight: 800; }
.hv-ai-src {
  font-family: var(--bb-font-mono);
  font-size: 11px; letter-spacing: 0.02em;
  color: var(--bb-on-dark-3);
  padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.12);
}
.hv-chart { background: var(--bb-paper); }
.hv-chart-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.hv-chart-label {
  font-family: var(--bb-font-secondary);
  font-weight: 700; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bb-fg-3);
}
.hv-chart-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--bb-font-body); font-weight: 800; font-size: 12px;
  color: var(--bb-ink);
  background: var(--bb-lime);
  padding: 4px 9px; border-radius: var(--bb-radius-pill);
}
.hv-chart-tag .hv-arrow { font-size: 13px; line-height: 1; }
.hv-graph { width: 100%; }
.hv-graph svg { display: block; width: 100%; height: auto; }
.hv-grid { stroke: var(--bb-rule); stroke-width: 1; }
.hv-area { fill: color-mix(in srgb, var(--bb-lime) 26%, transparent); stroke: none; }
.hv-line { fill: none; stroke: var(--bb-ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.hv-pt { fill: var(--bb-lime); stroke: var(--bb-ink); stroke-width: 2; }
.hv-legend {
  display: flex; gap: 16px; margin-top: 10px;
  font-family: var(--bb-font-mono); font-size: 10.5px; color: var(--bb-fg-3);
}
.hv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hv-legend i { width: 14px; height: 3px; border-radius: 2px; }
.hv-legend i.org { background: var(--bb-ink); }
.hv-legend i.ai { background: var(--bb-lime); }
.hv-serp {
  display: flex; align-items: center; gap: 12px;
  background: var(--bb-paper);
  border: 1px solid var(--bb-rule);
  border-radius: var(--bb-radius-lg);
  padding: 14px 18px;
}
.hv-serp-rank {
  font-family: var(--bb-font-hero); font-weight: 900;
  font-size: 26px; line-height: 1; color: var(--bb-ink);
  background: var(--bb-lime); padding: 6px 11px; border-radius: 10px;
  flex: none;
}
.hv-serp-txt {
  font-family: var(--bb-font-body); font-weight: 700;
  font-size: 13.5px; color: var(--bb-fg-1); line-height: 1.35;
}

/* Hero B — Y2K loud */
.hero[data-variant="B"] {
  background: var(--bb-ink);
  color: var(--bb-on-dark-1);
  padding: 44px 20px 56px;
  margin: 0;
}
.hero[data-variant="B"] .eyebrow { color: rgba(255,255,255,0.55); }
.hero[data-variant="B"] .eyebrow .dotmark { background: var(--bb-magenta); }
.hero[data-variant="B"] .title {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 52px;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--bb-paper);
  margin: 0 0 22px;
}
.hero[data-variant="B"] .title .lime {
  color: var(--bb-lime);
}
.hero[data-variant="B"] .title .end-dot {
  color: var(--bb-magenta);
}
.hero[data-variant="B"] .lede {
  color: var(--bb-on-dark-2);
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0 0 26px;
  max-width: 320px;
}
.hero[data-variant="B"] .btn-primary {
  background: var(--bb-lime);
  color: var(--bb-ink);
}
.hero[data-variant="B"] .btn-primary .pip { background: var(--bb-ink); }
.hero[data-variant="B"] .btn-secondary {
  background: transparent;
  color: var(--bb-on-dark-1);
  border-color: rgba(255,255,255,0.25);
}
.hero[data-variant="B"] .cta-row {
  display: flex; flex-direction: column; gap: 10px;
}
.hero[data-variant="B"] .cta-row .btn { justify-content: center; }
.hero[data-variant="B"] .signal {
  display: flex; gap: 10px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hero[data-variant="B"] .signal .chip {
  border: 1px solid rgba(255,255,255,0.18);
  padding: 6px 10px;
  border-radius: 999px;
  font-family: var(--bb-font-secondary);
  font-size: 11px;
  color: var(--bb-on-dark-2);
}

/* Hero C — wordmark-led */
.hero[data-variant="C"] {
  padding: 28px 20px 48px;
}
.hero[data-variant="C"] .wm {
  font-family: var(--bb-font-wordmark);
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--bb-ink);
  direction: ltr;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin: 16px 0 24px;
}
.hero[data-variant="C"] .wm .dot {
  width: 22px; height: 22px;
  background: var(--bb-lime);
  border-radius: 50%;
  display: inline-block;
  transform: translateY(2px);
  margin-right: 3px;
}
.hero[data-variant="C"] .title {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--bb-fg-1);
  margin: 0 0 18px;
  text-wrap: balance;
}
.hero[data-variant="C"] .lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--bb-fg-2);
  margin: 0 0 26px;
}
.hero[data-variant="C"] .cta-row {
  display: flex; flex-direction: column; gap: 10px;
}
.hero[data-variant="C"] .cta-row .btn { justify-content: center; }
.hero[data-variant="C"] .signal {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin-top: 38px;
  border-top: 1px solid var(--bb-rule);
  border-bottom: 1px solid var(--bb-rule);
}
.hero[data-variant="C"] .signal .item {
  padding: 14px 0;
  text-align: right;
  border-left: 1px solid var(--bb-rule);
}
.hero[data-variant="C"] .signal .item:last-child {
  border-left: 0;
}
.hero[data-variant="C"] .signal .item:first-child { padding-right: 0; }
.hero[data-variant="C"] .signal .item .k {
  font-family: var(--bb-font-secondary);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--bb-fg-3);
  text-transform: uppercase;
  margin: 0 0 4px;
}
.hero[data-variant="C"] .signal .item .v {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 22px;
  color: var(--bb-fg-1);
  line-height: 1;
  letter-spacing: -0.01em;
}
.hero[data-variant="C"] .signal .item .v .small {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--bb-fg-3);
  display: block;
  margin-top: 4px;
  font-family: var(--bb-font-secondary);
}

/* ============================================================
   2. MARKET SHIFT
   ============================================================ */
.shift {
  background: var(--bb-ink);
  color: var(--bb-on-dark-1);
  padding: 56px 20px;
}
.shift .eyebrow { color: rgba(255,255,255,0.55); }
.shift .eyebrow .dotmark { background: var(--bb-magenta); }
.shift h2 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--bb-paper);
  margin: 16px 0 32px;
  text-wrap: balance;
}
.shift h2 .lime-dot::after {
  content: '.';
  color: var(--bb-lime);
}
.shift .cards { display: flex; flex-direction: column; gap: 14px; }
.shift .card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--mood-radius);
  padding: 22px 20px;
}
.shift .card .idx {
  font-family: var(--bb-font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 16px;
  display: block;
}
.shift .card h3 {
  font-family: var(--bb-font-subhead);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  color: var(--bb-paper);
  margin: 0 0 10px;
}
.shift .card p {
  font-family: var(--bb-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bb-on-dark-2);
  margin: 0;
}
.shift .quote-line {
  display: flex; align-items: baseline; gap: 10px;
  margin: 36px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.shift .quote-line .arrow {
  font-family: var(--bb-font-mono);
  color: var(--bb-lime);
  font-size: 16px;
}
.shift .quote-line span {
  font-family: var(--bb-font-subhead);
  font-weight: 500;
  font-size: 14px;
  color: var(--bb-on-dark-1);
}

/* ============================================================
   3. SERVICES
   ============================================================ */
.services { padding: 56px 0 48px; }
.services .head { padding: 0 20px; }
.services .head .eyebrow { margin-bottom: 14px; }
.services .head h2 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--bb-fg-1);
  margin: 0 0 14px;
  text-wrap: balance;
}
.services .head .sub {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--bb-fg-2);
  margin: 0 0 28px;
}

/* Services A — grid */
.services[data-variant="A"] .grid {
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.services[data-variant="A"] .card {
  background: var(--bb-paper);
  border: 1px solid var(--bb-rule);
  border-radius: var(--mood-radius);
  padding: 18px 14px 16px;
  display: flex; flex-direction: column;
  min-height: 168px;
  position: relative;
}
.services[data-variant="A"] .card.featured {
  background: var(--bb-lime);
  border-color: transparent;
  grid-column: 1 / -1;
  min-height: 168px;
}
.services[data-variant="A"] .card .num {
  font-family: var(--bb-font-mono);
  font-size: 10.5px;
  color: var(--bb-fg-3);
  margin: 0 0 18px;
}
.services[data-variant="A"] .card.featured .num { color: rgba(10,14,16,0.55); }
.services[data-variant="A"] .card h3 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--bb-fg-1);
  margin: 0 0 8px;
}
.services[data-variant="A"] .card.featured h3 { font-size: 24px; }
.services[data-variant="A"] .card p {
  font-family: var(--bb-font-body);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bb-fg-2);
  margin: 0;
  flex: 1;
}
.services[data-variant="A"] .card.featured p {
  font-size: 13.5px;
  color: var(--bb-fg-1);
  opacity: 0.78;
}
.services[data-variant="A"] .card .arrow {
  margin-top: 12px;
  font-family: var(--bb-font-mono);
  font-size: 14px;
  color: var(--bb-fg-1);
  align-self: flex-start;
}

/* Services B — list */
.services[data-variant="B"] .list {
  margin: 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--bb-rule);
}
.services[data-variant="B"] .list li {
  padding: 22px 20px;
  border-bottom: 1px solid var(--bb-rule);
  display: grid;
  grid-template-columns: 28px 1fr 16px;
  gap: 14px;
  align-items: start;
}
.services[data-variant="B"] .list .num {
  font-family: var(--bb-font-mono);
  font-size: 11px;
  color: var(--bb-fg-3);
  padding-top: 6px;
}
.services[data-variant="B"] .list h3 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--bb-fg-1);
  margin: 0 0 6px;
}
.services[data-variant="B"] .list h3 .en {
  font-family: var(--bb-font-wordmark);
  font-size: 0.62em;
  font-weight: 400;
  color: var(--bb-fg-3);
  letter-spacing: 0.005em;
  display: block;
  margin-top: 4px;
}
.services[data-variant="B"] .list p {
  font-family: var(--bb-font-body);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bb-fg-2);
  margin: 0;
}
.services[data-variant="B"] .list .arr {
  font-family: var(--bb-font-mono);
  font-size: 16px;
  color: var(--bb-fg-3);
  padding-top: 6px;
  text-align: left;
}
.services[data-variant="B"] .list li.lead {
  background: var(--bb-lime);
}
.services[data-variant="B"] .list li.cta-cell {
  padding: 0;
  background: var(--bb-lime);
}
.services[data-variant="B"] .list li.cta-cell .cta-cell-link {
  display: grid;
  grid-template-columns: 28px 1fr 16px;
  gap: 14px;
  align-items: start;
  padding: 22px 20px;
  height: 100%;
  text-decoration: none;
}
.services[data-variant="B"] .list li.cta-cell .num,
.services[data-variant="B"] .list li.cta-cell p { color: var(--bb-fg-1); }
.services[data-variant="B"] .list li.cta-cell .arr {
  font-family: var(--bb-font-mono);
  font-size: 16px;
  color: var(--bb-fg-1);
  padding-top: 6px;
  text-align: left;
}
.services[data-variant="B"] .list li.lead .num,
.services[data-variant="B"] .list li.lead p {
  color: var(--bb-fg-1);
}

/* Services C — large stacked cards with image-slot/preview */
.services[data-variant="C"] .stack {
  padding: 0 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.services[data-variant="C"] .row {
  border: 1px solid var(--bb-rule);
  border-radius: var(--mood-radius);
  padding: 20px 18px;
  background: var(--bb-paper);
  position: relative;
}
.services[data-variant="C"] .row.dark {
  background: var(--bb-ink);
  border-color: transparent;
}
.services[data-variant="C"] .row .num {
  font-family: var(--bb-font-mono);
  font-size: 11px;
  color: var(--bb-fg-3);
  margin: 0 0 14px;
  display: flex; justify-content: space-between;
}
.services[data-variant="C"] .row.dark .num { color: rgba(255,255,255,0.45); }
.services[data-variant="C"] .row h3 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.014em;
  color: var(--bb-fg-1);
  margin: 0 0 8px;
}
.services[data-variant="C"] .row.dark h3 { color: var(--bb-paper); }
.services[data-variant="C"] .row.dark h3 .lime { color: var(--bb-lime); }
.services[data-variant="C"] .row p {
  font-family: var(--bb-font-body);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bb-fg-2);
  margin: 0 0 16px;
}
.services[data-variant="C"] .row.dark p { color: var(--bb-on-dark-2); }
.services[data-variant="C"] .row .tags {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.services[data-variant="C"] .row .tag {
  font-family: var(--bb-font-secondary);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--bb-fg-3);
  border: 1px solid var(--bb-rule);
  padding: 4px 8px;
  border-radius: 999px;
}
.services[data-variant="C"] .row.dark .tag {
  color: var(--bb-on-dark-2);
  border-color: rgba(255,255,255,0.18);
}

.services .foot-cta {
  margin-top: 28px;
  padding: 0 20px;
  display: flex;
  justify-content: flex-start;
}

/* ============================================================
   4. HOW WE BUILD
   ============================================================ */
.howwe { padding: 56px 20px; background: var(--bb-paper); }
.howwe .eyebrow { margin-bottom: 14px; }
.howwe h2 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--bb-fg-1);
  margin: 0 0 30px;
  text-wrap: balance;
}
.howwe h2 .strike {
  text-decoration: line-through;
  text-decoration-color: var(--bb-magenta);
  text-decoration-thickness: 2.5px;
  color: var(--bb-fg-3);
}

/* Howwe A — numbered timeline */
.howwe[data-variant="A"] .steps {
  position: relative;
  padding-right: 2px;
}
.howwe[data-variant="A"] .steps::before {
  content: '';
  position: absolute;
  right: 14px;
  top: 14px;
  bottom: 14px;
  width: 1.5px;
  background: var(--bb-rule-strong);
}
.howwe[data-variant="A"] .step {
  position: relative;
  padding-right: 44px;
  padding-bottom: 28px;
}
.howwe[data-variant="A"] .step:last-child { padding-bottom: 0; }
.howwe[data-variant="A"] .step .pip {
  position: absolute;
  right: 6px;
  top: 4px;
  width: 18px; height: 18px;
  background: var(--bb-paper);
  border: 2px solid var(--bb-ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--bb-font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--bb-fg-1);
}
.howwe[data-variant="A"] .step.live .pip {
  background: var(--bb-lime);
  border-color: var(--bb-ink);
}
.howwe[data-variant="A"] .step h3 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--bb-fg-1);
  margin: 0 0 6px;
}
.howwe[data-variant="A"] .step p {
  font-family: var(--bb-font-body);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bb-fg-2);
  margin: 0;
}

/* Howwe B — index card */
.howwe[data-variant="B"] .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1.5px solid var(--bb-fg-1);
  border-right: 1.5px solid var(--bb-fg-1);
}
.howwe[data-variant="B"] .cell {
  border-bottom: 1.5px solid var(--bb-fg-1);
  border-left: 1.5px solid var(--bb-fg-1);
  padding: 18px 16px 20px;
  position: relative;
  background: var(--bb-paper);
}
.howwe[data-variant="B"] .cell.lime { background: var(--bb-lime); }
.howwe[data-variant="B"] .cell .step-no {
  font-family: var(--bb-font-mono);
  font-size: 10.5px;
  color: var(--bb-fg-3);
  margin: 0 0 28px;
  display: flex; justify-content: space-between;
}
.howwe[data-variant="B"] .cell.lime .step-no { color: rgba(10,14,16,0.7); }
.howwe[data-variant="B"] .cell h3 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--bb-fg-1);
  margin: 0 0 6px;
}
.howwe[data-variant="B"] .cell p {
  font-family: var(--bb-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  color: var(--bb-fg-2);
  margin: 0;
}
.howwe[data-variant="B"] .cell.lime p { color: var(--bb-fg-1); opacity: 0.8; }

/* Howwe C — flowing one-line stack with hairline rules */
.howwe[data-variant="C"] .rows {
  border-top: 1.5px solid var(--bb-fg-1);
}
.howwe[data-variant="C"] .row {
  border-bottom: 1px solid var(--bb-rule);
  padding: 20px 0;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: baseline;
}
.howwe[data-variant="C"] .row .n {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bb-fg-1);
}
.howwe[data-variant="C"] .row .n.lime { color: var(--bb-lime); -webkit-text-stroke: 1px var(--bb-ink); }
.howwe[data-variant="C"] .row h3 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--bb-fg-1);
  margin: 0 0 6px;
}
.howwe[data-variant="C"] .row p {
  font-family: var(--bb-font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  color: var(--bb-fg-2);
  margin: 0;
}

/* ============================================================
   5. FOR WHOM
   ============================================================ */
.whom { padding: 56px 20px; }
.whom .eyebrow { margin-bottom: 14px; }
.whom h2 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--bb-fg-1);
  margin: 0 0 24px;
  text-wrap: balance;
}
.whom .fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.whom .fit {
  background: var(--bb-paper);
  border: 1px solid var(--bb-rule);
  border-radius: var(--mood-radius);
  padding: 16px 14px;
  min-height: 110px;
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer;
  transition: border-color 220ms var(--bb-ease-out), box-shadow 220ms var(--bb-ease-out);
}
.whom .fit:hover { border-color: var(--bb-rule-strong); }
.whom .fit.wide { grid-column: 1/-1; }
.whom .fit.open { grid-column: 1/-1; box-shadow: var(--bb-shadow-2); cursor: default; }
.whom .fit.lime { background: var(--bb-lime); border-color: transparent; }
.whom .fit .fit-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.whom .fit .ico {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--bb-fg-1);
  font-family: var(--bb-font-mono);
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  color: var(--bb-fg-1);
}
.whom .fit .chev {
  display: inline-flex;
  color: var(--bb-fg-3);
  transition: transform 220ms var(--bb-ease-out);
}
.whom .fit.open .chev { transform: rotate(180deg); }
.whom .fit.lime .chev { color: var(--bb-ink); }
.whom .fit h3 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 15.5px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bb-fg-1);
  margin: 0;
}
.whom .fit h3 .en {
  font-family: var(--bb-font-wordmark);
  font-size: 0.72em;
  font-weight: 400;
  color: var(--bb-fg-3);
  letter-spacing: 0.005em;
  display: block;
  margin-top: 6px;
}
.whom .fit.lime h3 .en { color: rgba(10,14,16,0.55); }
.whom .fit .subs {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--bb-rule);
  cursor: default;
}
.whom .fit.lime .subs { border-top-color: rgba(10,14,16,0.18); }
.whom .fit .subs .sub {
  display: flex; align-items: center; gap: 10px;
  background: var(--bb-paper);
  border: 1px solid var(--bb-rule);
  border-radius: 10px;
  padding: 11px 13px;
}
.whom .fit.lime .subs .sub {
  background: rgba(255,255,255,0.6);
  border-color: rgba(10,14,16,0.12);
}
.whom .fit .subs .sub .sub-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bb-lime);
  flex: none;
}
.whom .fit.lime .subs .sub .sub-dot { background: var(--bb-ink); }
.whom .fit .subs .sub .sub-label {
  font-family: var(--bb-font-body);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--bb-fg-1);
}

/* ============================================================
   6. PROCESS (4-step user journey)
   ============================================================ */
.process {
  padding: 56px 20px;
  background: var(--bb-stone);
  color: var(--bb-on-dark-1);
}
.process .eyebrow { color: rgba(255,255,255,0.55); margin-bottom: 14px; }
.process .eyebrow .dotmark { background: var(--bb-lime); }
.process h2 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--bb-paper);
  margin: 0 0 28px;
  text-wrap: balance;
}
.process h2 .lime { color: var(--bb-lime); }
.process .steps {
  display: flex; flex-direction: column; gap: 0;
}
.process .step {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  align-items: baseline;
}
.process .step:last-child { border-bottom: 0; }
.process .step .n {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bb-lime);
}
.process .step h3 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--bb-paper);
  margin: 0 0 6px;
}
.process .step p {
  font-family: var(--bb-font-body);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bb-on-dark-2);
  margin: 0;
}
.process .foot {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.process .foot p {
  font-family: var(--bb-font-subhead);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.35;
  color: var(--bb-paper);
  margin: 0 0 14px;
}
.process .foot .btn-primary {
  background: var(--bb-lime);
  color: var(--bb-ink);
  width: 100%;
  justify-content: center;
}
.process .foot .btn-primary .pip { background: var(--bb-ink); }

/* ============================================================
   7. KNOWLEDGE HUB
   ============================================================ */
.hub { padding: 56px 0; }
.hub .head { padding: 0 20px; margin-bottom: 24px; }
.hub .head .eyebrow { margin-bottom: 14px; }
.hub .head h2 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--bb-fg-1);
  margin: 0 0 12px;
  text-wrap: balance;
}
.hub .head .sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--bb-fg-2);
  margin: 0;
}

/* Hub A — card grid */
.hub[data-variant="A"] .cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 20px;
}
.hub[data-variant="A"] .card {
  background: var(--bb-paper);
  border: 1px solid var(--bb-rule);
  border-radius: var(--mood-radius);
  padding: 16px 14px;
  display: flex; flex-direction: column;
  min-height: 168px;
}
.hub[data-variant="A"] .card.wide { grid-column: 1/-1; min-height: 110px; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.hub[data-variant="A"] .card.wide h3 { font-size: 18px; }
.hub[data-variant="A"] .card .meta {
  font-family: var(--bb-font-mono);
  font-size: 10px;
  color: var(--bb-fg-3);
  letter-spacing: 0.04em;
  margin: 0 0 16px;
  display: flex; justify-content: space-between;
}
.hub[data-variant="A"] .card h3 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--bb-fg-1);
  margin: 0 0 6px;
}
.hub[data-variant="A"] .card p {
  font-family: var(--bb-font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--bb-fg-2);
  margin: 0;
  flex: 1;
}
.hub[data-variant="A"] .card .links {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--bb-rule);
  font-family: var(--bb-font-mono);
  font-size: 10.5px;
  color: var(--bb-fg-3);
}
.hub[data-variant="A"] .card .links span { color: var(--bb-fg-1); font-weight: 700; }

/* Hub B — directory index */
.hub[data-variant="B"] .index {
  padding: 0;
  border-top: 1.5px solid var(--bb-fg-1);
}
.hub[data-variant="B"] .entry {
  padding: 18px 20px;
  border-bottom: 1px solid var(--bb-rule);
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: baseline;
  gap: 12px;
}
.hub[data-variant="B"] .entry .ix {
  font-family: var(--bb-font-mono);
  font-size: 11px;
  color: var(--bb-fg-3);
}
.hub[data-variant="B"] .entry h3 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--bb-fg-1);
  margin: 0 0 4px;
}
.hub[data-variant="B"] .entry p {
  font-family: var(--bb-font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bb-fg-2);
  margin: 0;
}
.hub[data-variant="B"] .entry .count {
  font-family: var(--bb-font-mono);
  font-size: 11px;
  color: var(--bb-fg-3);
  white-space: nowrap;
  padding-top: 3px;
}

/* Hub C — library shelves */
.hub[data-variant="C"] .shelf {
  padding: 28px 20px 18px;
  border-top: 1px solid var(--bb-rule);
}
.hub[data-variant="C"] .shelf:first-child { border-top: 1.5px solid var(--bb-fg-1); }
.hub[data-variant="C"] .shelf .top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.hub[data-variant="C"] .shelf h3 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--bb-fg-1);
  margin: 0;
}
.hub[data-variant="C"] .shelf .meta {
  font-family: var(--bb-font-mono);
  font-size: 10.5px;
  color: var(--bb-fg-3);
}
.hub[data-variant="C"] .shelf .desc {
  font-family: var(--bb-font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bb-fg-2);
  margin: 0 0 14px;
}
.hub[data-variant="C"] .shelf .articles {
  display: flex; flex-direction: column; gap: 6px;
}
.hub[data-variant="C"] .shelf .art {
  font-family: var(--bb-font-subhead);
  font-weight: 500;
  font-size: 13px;
  color: var(--bb-fg-1);
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
}
.hub[data-variant="C"] .shelf .art::before {
  content: '→';
  font-family: var(--bb-font-mono);
  font-size: 12px;
  color: var(--bb-fg-3);
  transform: scaleX(-1);
  display: inline-block;
}

/* ============================================================
   8. FEATURED ARTICLES
   ============================================================ */
.feat { padding: 56px 20px; background: var(--bb-paper); }
.feat .eyebrow { margin-bottom: 14px; }
.feat h2 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--bb-fg-1);
  margin: 0 0 28px;
  text-wrap: balance;
}
.feat .article {
  padding: 20px 0;
  border-top: 1px solid var(--bb-rule);
}
.feat .article:last-child { border-bottom: 1px solid var(--bb-rule); }
.feat .article .meta {
  display: flex; justify-content: space-between;
  font-family: var(--bb-font-mono);
  font-size: 10.5px;
  color: var(--bb-fg-3);
  margin-bottom: 12px;
}
.feat .article .meta .tag {
  background: var(--bb-fg-1); color: var(--bb-paper);
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--bb-font-secondary);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.feat .article h3 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--bb-fg-1);
  margin: 0 0 8px;
  text-wrap: balance;
}
.feat .article p {
  font-family: var(--bb-font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--bb-fg-2);
  margin: 0 0 10px;
}
.feat .article .read {
  font-family: var(--bb-font-subhead);
  font-weight: 500;
  font-size: 13px;
  color: var(--bb-fg-1);
}
.feat .article .read::after {
  content: '→';
  display: inline-block;
  transform: scaleX(-1);
  margin-right: 6px;
  font-family: var(--bb-font-mono);
  color: var(--bb-fg-3);
}

/* ============================================================
   9. CASES
   ============================================================ */
.cases { padding: 56px 20px; }
.cases .eyebrow { margin-bottom: 14px; }
.cases h2 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--bb-fg-1);
  margin: 0 0 24px;
  text-wrap: balance;
}
.cases .stack { display: flex; flex-direction: column; gap: 10px; }
.cases .card {
  background: var(--bb-paper);
  border: 1px solid var(--bb-rule);
  border-radius: var(--mood-radius);
  padding: 18px 16px;
}
.cases .card .media {
  position: relative;
  aspect-ratio: 16 / 10;
  margin: 14px 0 16px;
  border-radius: calc(var(--mood-radius) - 5px);
  background: var(--bb-ink);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cases .card .media::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 8px, transparent 8px 18px);
}
.cases .card .media .play {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bb-lime);
  color: var(--bb-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.cases .card .media .play svg { margin-right: -2px; }
.cases .card .media .media-label {
  position: absolute;
  bottom: 10px; right: 12px;
  font-family: var(--bb-font-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.62);
}
.cases .card .top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.cases .card .type {
  font-family: var(--bb-font-mono);
  font-size: 11px;
  color: var(--bb-fg-3);
}
.cases .card .pill {
  font-family: var(--bb-font-secondary);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bb-lime);
  color: var(--bb-ink);
  text-transform: uppercase;
}
.cases .card h3 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--bb-fg-1);
  margin: 0 0 14px;
  text-wrap: balance;
}
.cases .card .metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding-top: 12px;
  border-top: 1px solid var(--bb-rule);
}
.cases .card .metric { border-left: 1px solid var(--bb-rule); padding: 0 10px; }
.cases .card .metric:first-child { padding-right: 0; }
.cases .card .metric:last-child { border-left: 0; padding-left: 0; }
.cases .card .metric .v {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--bb-fg-1);
  margin: 0 0 4px;
}
.cases .card .metric .v .up { color: var(--bb-fg-1); font-family: var(--bb-font-mono); font-size: 0.7em; margin-right: 2px; }
.cases .card .metric .k {
  font-family: var(--bb-font-secondary);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--bb-fg-3);
  text-transform: uppercase;
}

/* ============================================================
   10. FINAL CTA
   ============================================================ */
.finalcta {
  background: var(--bb-ink);
  color: var(--bb-on-dark-1);
  padding: 64px 20px 56px;
  position: relative;
  overflow: hidden;
}
.finalcta .eyebrow { color: rgba(255,255,255,0.55); margin-bottom: 16px; }
.finalcta .eyebrow .dotmark { background: var(--bb-magenta); }
.finalcta h2 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 38px;
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--bb-paper);
  margin: 0 0 18px;
  text-wrap: balance;
}
.finalcta h2 .mag { color: var(--bb-magenta); }
.finalcta p {
  font-family: var(--bb-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--bb-on-dark-2);
  margin: 0 0 28px;
}
.finalcta .ctas { display: flex; flex-direction: column; gap: 10px; }
.finalcta .btn-primary { background: var(--bb-lime); color: var(--bb-ink); justify-content: center; }
.finalcta .btn-primary .pip { background: var(--bb-ink); }
.finalcta .btn-secondary { color: var(--bb-on-dark-1); border-color: rgba(255,255,255,0.25); justify-content: center; }
.finalcta .wm-bg {
  position: absolute;
  left: -20px;
  bottom: -42px;
  font-family: var(--bb-font-wordmark);
  font-size: 180px;
  letter-spacing: -0.05em;
  color: rgba(255,255,255,0.04);
  line-height: 1;
  pointer-events: none;
  direction: ltr;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  background: var(--bb-ink);
  color: var(--bb-on-dark-1);
  padding: 32px 20px 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.foot .logoblock {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 28px;
}
.foot .wm {
  font-family: var(--bb-font-wordmark);
  font-size: 30px;
  letter-spacing: -0.045em;
  direction: ltr;
  color: var(--bb-paper);
  line-height: 1;
  display: inline-flex; align-items: baseline; gap: 1px;
}
.foot .wm .dot {
  width: 8px; height: 8px;
  background: var(--bb-lime);
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 2px;
}
.foot .ad {
  font-family: var(--bb-font-secondary);
  font-size: 11px;
  color: var(--bb-on-dark-3);
  text-align: left;
  line-height: 1.4;
}
.foot .cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 12px;
  margin-bottom: 28px;
}
.foot .col h4 {
  font-family: var(--bb-font-secondary);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  margin: 0 0 12px;
}
.foot .col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.foot .col li {
  font-family: var(--bb-font-subhead);
  font-weight: 500;
  font-size: 13px;
  color: var(--bb-on-dark-2);
}
.foot .bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.10);
  font-family: var(--bb-font-mono);
  font-size: 10.5px;
  color: var(--bb-on-dark-3);
}
.foot .bottom .pip {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--bb-success);
  margin-left: 6px;
}

/* ============================================================
   MEGA MENU (mobile drawer)
   ============================================================ */
.mega {
  width: 390px;
  background: var(--bb-paper);
  color: var(--bb-fg-1);
  font-family: var(--bb-font-body);
  direction: rtl;
  text-align: right;
  position: relative;
  overflow: hidden;
}
.mega .topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--bb-rule);
}
.mega .topbar .logo {
  font-family: var(--bb-font-wordmark);
  font-size: 22px;
  letter-spacing: -0.04em;
  direction: ltr;
  display: inline-flex; align-items: baseline; gap: 1px;
  color: var(--bb-ink);
}
.mega .topbar .logo .dot {
  display: inline-block; width: 7px; height: 7px;
  background: var(--bb-lime); border-radius: 50%;
  margin-bottom: 2px;
}
.mega .closebtn {
  width: 40px; height: 40px;
  border: 1px solid var(--bb-rule-strong);
  border-radius: 999px;
  background: transparent;
  font-family: var(--bb-font-mono);
  font-size: 16px;
  color: var(--bb-ink);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.mega .quickrow {
  display: flex; gap: 8px;
  padding: 16px 20px 0;
  flex-wrap: wrap;
}
.mega .quickrow .chip {
  font-family: var(--bb-font-secondary);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--bb-rule-strong);
  color: var(--bb-fg-1);
  text-transform: uppercase;
}
.mega .quickrow .chip.active {
  background: var(--bb-ink); color: var(--bb-paper);
  border-color: var(--bb-ink);
}
.mega .group {
  padding: 24px 20px 8px;
  border-bottom: 1px solid var(--bb-rule);
}
.mega .group:last-of-type { border-bottom: 0; }
.mega .group .head {
  font-family: var(--bb-font-secondary);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--bb-fg-3);
  text-transform: uppercase;
  margin: 0 0 16px;
}
.mega .group .nav {
  display: flex; flex-direction: column;
}
.mega .group .nav .item {
  padding: 14px 0;
  border-bottom: 1px solid var(--bb-rule);
  display: grid;
  grid-template-columns: 1fr 16px;
  align-items: center;
  gap: 12px;
}
.mega .group .nav .item:last-child { border-bottom: 0; }
.mega .group .nav .item .text {
  font-family: var(--bb-font-subhead);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  color: var(--bb-fg-1);
  margin: 0 0 3px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 7px;
}
.mega .group .nav .item .text .en {
  order: 2;
  font-family: var(--bb-font-hero);
  font-size: 0.62em;
  font-weight: 700;
  color: var(--bb-fg-3);
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin: 0;
  position: relative;
  top: -0.5px;
}
.mega .group .nav .item.lime .text .en { color: rgba(10,14,16,0.5); }
.mega .group .nav .item .sub {
  font-family: var(--bb-font-body);
  font-size: 12px;
  color: var(--bb-fg-3);
}
.mega .group .nav .item .arr {
  font-family: var(--bb-font-mono);
  color: var(--bb-fg-3);
  font-size: 13px;
}
.mega .group .nav .item.lime { background: var(--bb-lime); margin: 6px -20px; padding: 14px 20px; border-bottom: 0; border-radius: 0; }
.mega .group .nav .item.lime .sub { color: rgba(10,14,16,0.6); }

.mega .group .nav .subchips {
  padding: 2px 0 14px;
  border-bottom: 1px solid var(--bb-rule);
  font-family: var(--bb-font-body);
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--bb-fg-3);
}
.mega .group .nav .subchips > span { white-space: nowrap; }
.mega .group .nav .subchips > span:not(:last-child)::after {
  content: '\00b7';
  margin: 0 7px;
  opacity: 0.5;
}

.mega .recommended {
  padding: 24px 20px;
  border-bottom: 1px solid var(--bb-rule);
}
.mega .recommended .articles {
  display: flex; flex-direction: column; gap: 12px;
}
.mega .recommended .art {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
}
.mega .recommended .art .ix {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 22px;
  color: var(--bb-fg-3);
  line-height: 1;
  text-align: center;
}
.mega .recommended .art .t {
  font-family: var(--bb-font-subhead);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--bb-fg-1);
}
.mega .recommended .art .l {
  font-family: var(--bb-font-mono);
  font-size: 10px;
  color: var(--bb-fg-3);
  display: block;
  margin-top: 2px;
}

.mega .ctablock {
  margin: 20px;
  background: var(--bb-ink);
  color: var(--bb-paper);
  padding: 20px;
  border-radius: var(--mood-radius);
}
.mega .ctablock h3 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--bb-paper);
  margin: 0 0 8px;
}
.mega .ctablock h3 .lime { color: var(--bb-lime); }
.mega .ctablock p {
  font-family: var(--bb-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--bb-on-dark-2);
  margin: 0 0 16px;
}
.mega .ctablock .btn-primary {
  background: var(--bb-lime);
  color: var(--bb-ink);
  justify-content: center;
  width: 100%;
}
.mega .ctablock .btn-primary .pip { background: var(--bb-ink); }

.mega .megafoot {
  padding: 24px 20px 28px;
  display: flex; justify-content: space-between; align-items: center;
}
.mega .megafoot .contact {
  font-family: var(--bb-font-mono);
  font-size: 11px;
  color: var(--bb-fg-3);
  direction: ltr;
}
.mega .megafoot .lang {
  font-family: var(--bb-font-secondary);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--bb-fg-1);
}

/* ============================================================
   LIME INTENSITY OVERRIDES
   ============================================================ */

/* MINIMAL: strip lime from accents, keep only the logo dot + a single CTA pip */
.mob[data-lime="minimal"] .hero[data-variant="A"] .title .lime {
  background: transparent;
  padding: 0;
  border-bottom: 3px solid var(--bb-ink);
  border-radius: 0;
}
.mob[data-lime="minimal"] .services[data-variant="A"] .card.featured {
  background: var(--bb-paper);
  border: 1.5px solid var(--bb-ink);
}
.mob[data-lime="minimal"] .services[data-variant="B"] .list li.lead {
  background: var(--bb-paper);
  border-right: 3px solid var(--bb-ink);
}
.mob[data-lime="minimal"] .whom .fit.lime {
  background: var(--bb-paper);
  border: 1.5px solid var(--bb-ink);
}
.mob[data-lime="minimal"] .howwe[data-variant="B"] .cell.lime {
  background: var(--bb-paper);
}
.mob[data-lime="minimal"] .h-section .period { color: var(--bb-ink); }
.mob[data-lime="minimal"] .cases .card .pill {
  background: var(--bb-ink); color: var(--bb-paper);
}

/* LOUD: lime in big blocks, more saturation */
.mob[data-lime="loud"] .hero[data-variant="A"] {
  background: var(--bb-lime);
}
.mob[data-lime="loud"] .hero[data-variant="A"] .lede { color: var(--bb-fg-1); opacity: 0.8; }
.mob[data-lime="loud"] .services .head .eyebrow .dotmark { width: 10px; height: 10px; }
.mob[data-lime="loud"] .whom .fit.lime {
  box-shadow: 0 0 0 2px var(--bb-ink) inset;
}
.mob[data-lime="loud"] .feat .article .meta .tag {
  background: var(--bb-lime); color: var(--bb-ink);
}

/* ============================================================
   ABOUT (above Whom)
   ============================================================ */
.about { padding: 56px 20px; }
.about .eyebrow { margin-bottom: 14px; }
.about h2 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--bb-fg-1);
  margin: 0 0 14px;
  text-wrap: balance;
}
.about .lede {
  font-family: var(--bb-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--bb-fg-2);
  margin: 0 0 22px;
  max-width: 344px;
  text-wrap: pretty;
}
.about .about-card {
  display: flex;
  gap: 16px;
  align-items: stretch;
  background: var(--bb-paper);
  border: 1px solid var(--bb-rule);
  border-radius: var(--mood-radius);
  padding: 14px;
  margin-bottom: 20px;
}
.about .portrait { flex: none; width: 108px; }
.about .portrait img {
  display: block;
  width: 108px;
  height: 138px;
  object-fit: cover;
  object-position: 50% 16%;
  border-radius: calc(var(--mood-radius) - 4px);
  filter: grayscale(1);
  background: var(--bb-stone);
}
.about .who {
  display: flex; flex-direction: column; justify-content: center;
  gap: 3px;
  min-width: 0;
}
.about .who .name {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--bb-fg-1);
}
.about .who .role {
  font-family: var(--bb-font-secondary);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-fg-3);
  margin-bottom: 8px;
}
.about .who .note {
  font-family: var(--bb-font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bb-fg-2);
  text-wrap: pretty;
}
.about .about-cta { justify-content: center; }

/* ============================================================
   CLIENTS (logo wall, high in the page)
   ============================================================ */
.clients { padding: 40px 20px 46px; border-top: 1px solid var(--bb-rule); }
.clients .eyebrow { margin-bottom: 12px; }
.clients .lead-line {
  font-family: var(--bb-font-subhead);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--bb-fg-1);
  margin: 0 0 20px;
  text-wrap: balance;
}
.clients .logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--bb-rule);
  border: 1px solid var(--bb-rule);
  border-radius: var(--mood-radius);
  overflow: hidden;
}
.clients .logo {
  background: var(--bb-paper);
  display: flex; align-items: center; justify-content: center;
  padding: 15px 9px;
  min-height: 60px;
}
.clients .logo img {
  max-width: 86%;
  max-height: 30px;
  width: auto; height: auto;
  filter: grayscale(1);
  opacity: 0.58;
  transition: opacity var(--bb-dur-base) var(--bb-ease-out),
              filter var(--bb-dur-base) var(--bb-ease-out);
}
.clients .logo:hover img { opacity: 1; filter: grayscale(0); }

/* Compact density tightens vertical padding */
.mob[data-density="compact"] .hero { padding-top: 24px; padding-bottom: 36px; }
.mob[data-density="compact"] .shift { padding: 40px 20px; }
.mob[data-density="compact"] .services { padding: 40px 0 36px; }
.mob[data-density="compact"] .howwe { padding: 40px 20px; }
.mob[data-density="compact"] .whom { padding: 40px 20px; }
.mob[data-density="compact"] .about { padding: 40px 20px; }
.mob[data-density="compact"] .clients { padding: 30px 20px 34px; }
.mob[data-density="compact"] .process { padding: 40px 20px; }
.mob[data-density="compact"] .hub { padding: 40px 0; }
.mob[data-density="compact"] .feat { padding: 40px 20px; }
.mob[data-density="compact"] .cases { padding: 40px 20px; }
.mob[data-density="compact"] .finalcta { padding: 48px 20px 44px; }

/* ============================================================
   CONTACT CTAs · WhatsApp / phone / about  (dark contexts only)
   ============================================================ */
.contact-row {
  display: flex;
  gap: 10px;
}
.contact-row .btn { flex: 1; }
.btn .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  flex: none;
}
.btn .ic svg { display: block; }

.btn-wa, .btn-call {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.26);
  color: var(--bb-on-dark-1);
  justify-content: center;
  gap: 8px;
}
.btn-wa .ic { color: var(--bb-lime); }
.btn-call .ic { color: var(--bb-on-dark-2); }
.btn-call .ltr-tok { font-family: var(--bb-font-mono); font-size: 13px; letter-spacing: -0.01em; }

.btn-about {
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.28);
  color: var(--bb-on-dark-2);
  justify-content: center;
  gap: 9px;
  font-weight: 500;
}
.btn-about strong { color: var(--bb-paper); font-weight: 700; }
.btn-about .ar { color: var(--bb-lime); font-family: var(--bb-font-mono); }

/* Final CTA spacing for the added rows */
.finalcta .ctas .contact-row { margin-top: 2px; }
.finalcta .ctas .btn-about { margin-top: 6px; }

/* Process foot (dark) — contact row sits under the diagnosis button */
.process .foot .contact-row { margin-top: 12px; }

/* Mega menu CTA block — contact row under the primary button */
.mega .ctablock .contact-row { margin-top: 10px; }
.mega .ctablock .btn-wa,
.mega .ctablock .btn-call { border-color: rgba(242,240,232,0.24); }

/* ============================================================
   GEO spotlight — dark differentiator band
   ============================================================ */
.geospot {
  background: var(--bb-ink);
  color: var(--bb-paper);
  padding: 44px 20px;
}
.geospot .eyebrow { color: var(--bb-on-dark-2); margin-bottom: 16px; }
.geospot .eyebrow .dotmark { background: var(--bb-magenta); }
.geospot h2 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--bb-paper);
  text-wrap: balance;
}
.geospot h2 .lime { color: var(--bb-lime); }
.geospot .lede {
  font-family: var(--bb-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--bb-on-dark-2);
  margin: 0 0 24px;
}
.geospot .engines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  margin-bottom: 26px;
}
.geospot .eng {
  background: var(--bb-ink);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.geospot .eng .en {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 14px;
  color: var(--bb-paper);
  direction: ltr;
}
.geospot .eng .k {
  font-family: var(--bb-font-body);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--bb-on-dark-3);
}
.geospot .geo-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bb-lime);
  color: var(--bb-ink);
  font-family: var(--bb-font-subhead);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: 999px;
  cursor: pointer;
}

/* ============================================================
   Consulting highlight — lime band
   ============================================================ */
.consult {
  background: var(--bb-lime);
  color: var(--bb-ink);
  padding: 44px 20px;
}
.consult .eyebrow { color: rgba(10,14,16,0.6); margin-bottom: 14px; }
.consult .eyebrow .dotmark { background: var(--bb-ink); }
.consult h2 {
  font-family: var(--bb-font-hero);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--bb-ink);
  text-wrap: balance;
}
.consult h2 .lime { color: var(--bb-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.consult p {
  font-family: var(--bb-font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(10,14,16,0.78);
  margin: 0 0 20px;
}
.consult .roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.consult .roles span {
  font-family: var(--bb-font-secondary);
  font-weight: 700;
  font-size: 12px;
  background: rgba(10,14,16,0.08);
  color: var(--bb-ink);
  border-radius: 999px;
  padding: 7px 13px;
}
.consult .consult-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--bb-ink);
  color: var(--bb-paper);
  font-family: var(--bb-font-subhead);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 22px;
  border-radius: 999px;
  cursor: pointer;
}
.consult .consult-cta .pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bb-lime);
}

/* Cases — link to the relevant service / vertical page */
.cases .card .case-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-family: var(--bb-font-subhead);
  font-weight: 600;
  font-size: 13px;
  color: var(--bb-fg-1);
  cursor: pointer;
}
.cases .card .case-link::before {
  content: '\2190';
  font-family: var(--bb-font-mono);
  color: var(--bb-fg-3);
}