/* ===========================================================
   B4 Redesign — Base (typography + utilities)
   =========================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans) !important;
  color: hsl(var(--ink));
  background: hsl(var(--bg));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
}

::selection { background: hsl(var(--b4-blue) / .25); color: hsl(var(--b4-blue-ink)); }

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: hsl(var(--b4-blue-ink)) !important;
}

.b4-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 96px);
  line-height: .98;
  letter-spacing: -0.03em;
  color: hsl(var(--b4-blue-ink));
}
.b4-display em { font-style: italic; font-weight: 300; color: hsl(var(--b4-blue)); }

/* ---------- Eyebrow ---------- */
.b4-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: hsl(var(--b4-blue));
  display: inline-flex; align-items: center; gap: 10px;
}
.b4-eyebrow::before {
  content: ""; width: 22px; height: 1px;
  background: hsl(var(--b4-blue));
}

/* ---------- Lead / muted ---------- */
.b4-lead { font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45; color: hsl(var(--ink-2)); }
.b4-muted { color: hsl(var(--muted)); }

/* ---------- Tag / pill ---------- */
.b4-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500;
  background: hsl(var(--b4-blue-tint));
  color: hsl(var(--b4-blue-ink));
  border: 1px solid hsl(var(--b4-blue-mist));
}

/* ---------- Arrow link ---------- */
.b4-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 15px;
  color: hsl(var(--b4-blue-ink));
  padding-bottom: 3px;
  border-bottom: 1px solid hsl(var(--b4-blue-ink));
  transition: gap var(--dur-2) var(--ease);
}
.b4-arrow:hover { gap: 14px; }

/* ---------- Marquee (clients) ---------- */
@keyframes b4-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.b4-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.b4-marquee__row { display: flex; gap: 56px; width: max-content; animation: b4-marquee 40s linear infinite; }
.b4-marquee__item {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 400; letter-spacing: -.01em;
  color: hsl(var(--b4-blue-ink) / .55); white-space: nowrap;
}

/* ---------- Reveal on scroll ---------- */
.b4-rise { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.b4-rise.is-in { opacity: 1; transform: translateY(0); }