/* ============================================================
   Irreductible Leads — landing page
   Tokens, header, footer and shared components live in styles.css;
   this file only adds what the landing needs on top.
   ============================================================ */

.leads-page {
  --acq:  #ee5b39;   /* 01 — Acquisition  */
  --int:  #2f6bed;   /* 02 — Interaction  */
  --conv: #33d991;   /* 03 — Conversion   */
}

/* ---------- Header: product badge next to the wordmark ---------- */
.logo--product { gap: 12px; }
.logo__badge {
  font-family: 'Work Sans', var(--font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  border: 1.5px solid rgba(var(--green-rgb), 0.55);
  border-radius: 6px;
  padding: 3px 9px 2px;
  line-height: 1;
  white-space: nowrap;
}

/* ---------- Shared bits ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}
.eyebrow__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  animation: dot-live 2s ease-in-out infinite;
  --dot-glow: rgba(var(--green-rgb), 0.65);
}

/* Section head + rule with a dot on its left end (house style) */
.section-head {
  max-width: 1185px;
  margin-bottom: clamp(40px, 5.5vw, 76px);
}
.section-head__title {
  margin: 0;
  font-family: 'Work Sans', var(--font);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
}
.rule {
  position: relative;
  margin-top: 26px;
  height: 0;
  border-top: 1.5px solid currentColor;
  opacity: 0.9;
}
.rule::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-1px, -50%);
}

/* CTA button — the bracketed call to action from the brand copy */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 30px;
  border: 1.5px solid var(--green);
  border-radius: 12px;
  font-family: 'Work Sans', var(--font);
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  background: transparent;
  transition: background-color 0.28s var(--ease), color 0.28s var(--ease),
              box-shadow 0.28s var(--ease), transform 0.2s var(--ease);
}
.cta__bracket {
  color: var(--green);
  transition: transform 0.28s var(--ease), color 0.28s var(--ease);
}
.cta:hover {
  background: var(--green);
  color: var(--dark);
  box-shadow: 0 10px 34px rgba(var(--green-rgb), 0.28);
  transform: translateY(-2px);
}
.cta:hover .cta__bracket { color: var(--dark); }
.cta:hover .cta__bracket:first-child  { transform: translateX(-4px); }
.cta:hover .cta__bracket:last-child   { transform: translateX(4px); }
.cta--solid { background: rgba(var(--green-rgb), 0.08); }
.cta--lg { padding: 21px 38px; }

/* Pill tag list (same treatment as the home Services cards) */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.tags li {
  background: rgba(255, 255, 255, 0.09);
  color: var(--white);
  font-size: clamp(13px, 1.05vw, 15px);
  padding: 9px 18px;
  border-radius: 40px;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

/* ============================================================
   HERO
   ============================================================ */
.lead-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(56px, 7vw, 104px) clamp(72px, 9vw, 132px);
  background:
    radial-gradient(circle at 78% 24%, rgba(var(--green-rgb), 0.14), transparent 46%),
    radial-gradient(circle at 8% 84%, rgba(22, 106, 255, 0.10), transparent 48%),
    #181818;
}
.lead-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: clamp(36px, 4.5vw, 64px);
  min-height: calc(100svh - var(--header-h) - clamp(128px, 16vw, 236px));
}

.lead-hero__title {
  margin: 0;
  font-family: 'Work Sans', var(--font);
  font-weight: 700;
  /* Capped at 78px: "IRREDUCTIBLE" must stay on one line inside the copy
     column, otherwise it breaks mid-word. */
  font-size: clamp(42px, 5.4vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.lead-hero__stack {
  margin: clamp(22px, 2.6vw, 32px) 0 0;
  max-width: 640px;
  font-family: 'Work Sans', var(--font);
  font-weight: 600;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.35;
  color: var(--white);
}
.lead-hero__stack .plus {
  color: var(--green);
  padding-inline: 4px;
}
/* Break the line at the "+" separators, never inside a phrase */
.stack__item { white-space: nowrap; }
.lead-hero__text {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  max-width: 620px;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.lead-hero .cta { margin-top: clamp(30px, 3.4vw, 44px); }

/* ---------- Product vignette: AI Sales Agent conversation ---------- */
.chat {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  padding: 22px 22px 26px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, #232323, #1c1c1c);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.chat__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.chat__status {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  animation: dot-live 2s ease-in-out infinite;
  --dot-glow: rgba(var(--green-rgb), 0.65);
}
.chat__who {
  font-family: 'Work Sans', var(--font);
  font-weight: 700;
  font-size: 15px;
}
.chat__channel {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
}

/* The thread is bottom-anchored so bubbles stack upward the way a real one
   fills: JS locks its height to the finished conversation first, so replaying
   it never resizes the card. */
.chat__thread {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Date pill, as at the top of any thread. It rides with the messages, so it
   gets pushed up as the conversation fills. */
.chat__day {
  align-self: center;
  margin-bottom: 2px;
  padding: 5px 12px;
  border-radius: 8px;
  background: #1e262a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* WhatsApp-style bubbles: small radius, a tail on the top corner (every line
   here starts a new group, so every bubble gets one) and the timestamp
   floated so it settles on the last line of text when it fits. */
.chat__msg {
  position: relative;
  display: flow-root;              /* contains the floated timestamp */
  max-width: 84%;
  padding: 8px 12px 8px 13px;
  font-size: 15px;
  line-height: 1.4;
  border-radius: 12px;
}
.chat__msg::after {                /* tail */
  content: '';
  position: absolute;
  top: 0;
  width: 9px;
  height: 13px;
  background: inherit;
}
.chat__msg--in {
  align-self: flex-start;
  background: #262d31;
  color: rgba(255, 255, 255, 0.92);
  border-top-left-radius: 3px;
}
.chat__msg--in::after {
  left: -8px;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.chat__msg--out {
  align-self: flex-end;
  background: #0d5b46;             /* deep green, the brand hue at chat weight */
  color: var(--white);
  border-top-right-radius: 3px;
}
.chat__msg--out::after {
  right: -8px;
  clip-path: polygon(0 0, 0 100%, 100% 0);
}

.chat__meta {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 6px 0 -2px 10px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.45);
}
.chat__msg--out .chat__meta { color: rgba(255, 255, 255, 0.55); }

.chat__ticks {
  width: 16px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Settled state — the one a visitor without JS sees — is read: both ticks, blue. */
.chat__tick { transition: opacity 0.2s linear; }
.chat__ticks { color: #53bdeb; }                      /* the WhatsApp read blue */

/* During the replay the ticks catch up a state at a time: sent, delivered, read. */
.chat.is-armed .chat__tick { opacity: 0; }
.chat.is-armed .chat__ticks { color: inherit; }
.chat.is-armed .chat__msg.is-sent .chat__tick--1,
.chat.is-armed .chat__msg.is-delivered .chat__tick--1,
.chat.is-armed .chat__msg.is-delivered .chat__tick--2,
.chat.is-armed .chat__msg.is-read .chat__tick--1,
.chat.is-armed .chat__msg.is-read .chat__tick--2 { opacity: 1; }
.chat.is-armed .chat__msg.is-read .chat__ticks { color: #53bdeb; }

.chat__typing {
  display: flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 13px 14px;
  border-radius: 12px;
  background: #262d31;
}
.chat__typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grey);
  animation: typing 1.3s ease-in-out infinite;
}
.chat__typing span:nth-child(2) { animation-delay: 0.18s; }
.chat__typing span:nth-child(3) { animation-delay: 0.36s; }

.chat__chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 22px 0 0;
  padding: 9px 16px;
  border: 1px dashed rgba(var(--green-rgb), 0.5);
  border-radius: 40px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green);
}
.chat__chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

/* ----- Replay states -----
   `is-armed` is only ever set by leads.js, so a page without JS (or with
   reduced motion) shows the finished conversation and no typing bubble. */
.chat__typing { display: none; }
.chat.is-armed .chat__msg { display: none; }
.chat.is-armed .chat__msg.is-shown {
  display: flow-root;
  animation: bubble-in 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}
.chat.is-armed.is-typing-in  .chat__typing { display: flex; align-self: flex-start; border-top-left-radius: 3px; }
.chat.is-armed.is-typing-out .chat__typing { display: flex; align-self: flex-end; border-top-right-radius: 3px; background: #0d5b46; }
.chat.is-armed.is-typing-in  .chat__typing,
.chat.is-armed.is-typing-out .chat__typing { animation: bubble-in 0.2s var(--ease) both; }
.chat.is-armed .chat__chip { opacity: 0; }   /* stays in flow: the card never jumps */
.chat.is-armed .chat__chip.is-shown { animation: chip-in 0.45s var(--ease) both; }

@keyframes bubble-in {
  from { opacity: 0; transform: scale(0.88) translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes chip-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes typing {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-3px); }
}

/* ============================================================
   STATEMENT  (reuses .statement from styles.css)
   ============================================================ */
.leads-page .statement { padding-block: clamp(72px, 9vw, 132px); }
.leads-page .statement__title {
  font-size: clamp(30px, 5.2vw, 74px);
  line-height: 1.14;
}

.statement__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 80px);
  margin-top: clamp(44px, 5vw, 72px);
  padding-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--line);
}
.statement__lead {
  margin: 0 0 26px;
  font-family: 'Work Sans', var(--font);
  font-weight: 700;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.25;
}
.disciplines { display: grid; gap: 14px; }
.disciplines__item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}
.disciplines__item strong { color: var(--white); font-weight: 600; }
.disciplines__dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translateY(1px);
}
.disciplines__item--comm .disciplines__dot { background: var(--acq); }
.disciplines__item--mkt  .disciplines__dot { background: var(--int); }
.disciplines__item--tech .disciplines__dot { background: var(--conv); }

.statement__note {
  margin: 0 0 28px;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}
.always {
  display: grid;
  gap: 6px;
  margin: 0 0 28px;
  padding-left: 20px;
  border-left: 2px solid rgba(var(--green-rgb), 0.5);
  font-family: 'Work Sans', var(--font);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.3;
}
.statement__closer {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 20px);
  color: rgba(255, 255, 255, 0.78);
}
.statement__closer strong { color: var(--green); font-weight: 600; }

/* ============================================================
   PILLARS  (sticky stacking cards, house mechanic)

   The stack is shaped as a funnel: 01 spans the full width and each
   following card is narrower, so the pinned pile tapers toward
   Conversion instead of growing into a pyramid.
   ============================================================ */
.pillars {
  background: var(--white);
  color: var(--dark);
  padding-top: clamp(64px, 9vw, 120px);
  padding-bottom: 0;
}
.pillars__wrap {
  max-width: 1352px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 32px);
}
.pillars__stack { position: relative; }
/* Runway so the finished pile is readable for a beat before the next section */
.pillars__stack::after {
  content: '';
  display: block;
  height: clamp(120px, 16vw, 200px);
}

.pillar {
  position: sticky;
  /* 84px step: exactly the padding + the "01 — ACQUISITION" title line, so each
     card behind the pile shows its whole title instead of half-cut letters. */
  top: calc(var(--header-h) + 14px + var(--i) * 84px);
  z-index: calc(var(--i) + 1);
  margin-inline: auto;
  margin-bottom: 40px;
  padding: 32px var(--pad-x) clamp(28px, 2.8vw, 38px);
  border-radius: 28px;
  color: var(--white);
  /* The upward shadow falls on the wider card behind, so each step of the
     taper reads as a wall rather than a flat colour change. */
  box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.3), 0 12px 30px rgba(0, 0, 0, 0.1);
}
.pillar--acq  { background: #1a1a1a; width: 100%; --pad-x: clamp(34px, 4.2vw, 60px); --accent: var(--acq);  --glow: rgba(238, 91, 57, 0.65); }
.pillar--int  { background: #2b2b2b; width: 92%;  --pad-x: clamp(30px, 3.6vw, 52px); --accent: var(--int);  --glow: rgba(47, 107, 237, 0.65); }
.pillar--conv { background: #3d3d3d; width: 84%;  --pad-x: clamp(26px, 3vw, 44px);   --accent: var(--conv); --glow: rgba(var(--green-rgb), 0.65); }

.pillar__title {
  margin: 0;
  font-family: 'Work Sans', var(--font);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--accent);
}
.pillar__title span { color: var(--white); }

.pillar__sub {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  font-family: 'Work Sans', var(--font);
  font-weight: 700;
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.18;
  color: var(--white);
}

.pillar__lead {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  max-width: 1040px;
  margin-top: clamp(18px, 2vw, 26px);
}
.pillar__dot {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.4em;
  border-radius: 50%;
  background: var(--accent);
  --dot-glow: var(--glow);
  animation: dot-live 2s ease-in-out infinite;
}
.pillar__lead p {
  margin: 0;
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.42;
  color: rgba(255, 255, 255, 0.92);
}

.pillar__pull {
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  font-family: 'Work Sans', var(--font);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.2;
}
.pillar__pull em { font-style: normal; color: var(--accent); }

.pillar__label {
  margin: clamp(20px, 2.2vw, 30px) 0 0;
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.pillar--acq  .tags li:hover { background: var(--acq);  color: #1a1a1a; transform: translateY(-2px); }
.pillar--int  .tags li:hover { background: var(--int);  color: var(--white); transform: translateY(-2px); }
.pillar--conv .tags li:hover { background: var(--conv); color: #1a1a1a; transform: translateY(-2px); }

.pillar__closer {
  margin: clamp(20px, 2.2vw, 28px) 0 0;
  padding-top: clamp(16px, 1.7vw, 22px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}
.pillar__closer strong { color: var(--white); font-weight: 600; }

/* ------------------------------------------------------------
   Toolkit strip — the platforms behind each pillar

   Marks are painted as a mask, not an <img>, so every logo can be
   recoloured from CSS: neutral at rest, brand colour when the light
   passes over it or on hover. That colour pass is the only place the
   page carries a palette wider than its three accents.

   Timing: each item lights up `--i * --step` into a `--n * --step`
   cycle, so one light travels the row and loops. Both come from
   inline custom properties on the markup (--i per item, --n per list).
   ------------------------------------------------------------ */
.toolkit {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.toolkit__label {
  margin: 0;
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.toolkit__list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

/* Pillar 03 is the tallest card and still has to finish above the fold once
   pinned, so on desktop the strip costs one row, not two: the label sits
   beside the logos instead of above them. */
@media (min-width: 901px) {
  .toolkit {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.3vw, 18px);
  }
  .toolkit__label { flex: 0 0 auto; }
  .toolkit__list { margin-top: 0; }
}

.toolkit__item {
  --step: 0.5s;
  --dur: calc(var(--n) * var(--step));
  --delay: calc(var(--i) * var(--step));

  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 15px 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.05);
  transition: opacity 0.5s var(--ease), transform 0.4s var(--ease),
              border-color 0.3s var(--ease), background-color 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}
/* The hidden entry state is opt-in: leads.js adds .is-armed only once it knows
   it can undo it. Without JS the logos are simply there, never stuck at zero. */
.toolkit.is-armed .toolkit__item {
  opacity: 0;
  transform: translateY(12px);
}
.toolkit.is-armed.is-in .toolkit__item {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 0.06s);
}

.toolkit__mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-color: rgba(255, 255, 255, 0.55);
  -webkit-mask: var(--mark) center / contain no-repeat;
          mask: var(--mark) center / contain no-repeat;
  transition: background-color 0.3s var(--ease);
}
.toolkit__name {
  font-family: 'Work Sans', var(--font);
  font-weight: 600;
  font-size: clamp(12.5px, 1.05vw, 14.5px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}

/* ----- The travelling light (only runs while the strip is on screen) ----- */
.toolkit.is-live .toolkit__item {
  animation: toolkit-tile var(--dur) linear var(--delay) infinite;
}
.toolkit.is-live .toolkit__mark {
  animation: toolkit-mark var(--dur) linear var(--delay) infinite;
}
/* Snap on, fade off: the light reads as a head with a short tail rather
   than a bulb blinking in place. */
@keyframes toolkit-mark {
  0%, 8%     { background-color: var(--brand); }
  30%, 100%  { background-color: rgba(255, 255, 255, 0.55); }
}
@keyframes toolkit-tile {
  0%, 8% {
    border-color: var(--brand);
    box-shadow: 0 6px 22px -8px var(--brand);
  }
  30%, 100% {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 6px 22px -8px transparent;
  }
}

/* ----- Hover / focus wins over the sweep and holds the colour ----- */
.toolkit__item:hover,
.toolkit__item:focus-within,
.toolkit.is-live .toolkit__item:hover,
.toolkit.is-live .toolkit__item:focus-within {
  animation: none;
  transform: translateY(-3px);
  transition-delay: 0s;
  border-color: var(--brand);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 26px -10px var(--brand);
}
.toolkit.is-live .toolkit__item:hover .toolkit__mark,
.toolkit.is-live .toolkit__item:focus-within .toolkit__mark,
.toolkit__item:hover .toolkit__mark,
.toolkit__item:focus-within .toolkit__mark {
  animation: none;
  background-color: var(--brand);
}
.toolkit__item:hover .toolkit__name,
.toolkit__item:focus-within .toolkit__name { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  /* No travelling light — the marks simply sit in their brand colour. */
  .toolkit__item,
  .toolkit.is-armed .toolkit__item { opacity: 1; transform: none; transition: none; }
  .toolkit.is-live .toolkit__item,
  .toolkit.is-live .toolkit__mark { animation: none; }
  .toolkit__mark { background-color: var(--brand); }
  .toolkit__item:hover, .toolkit__item:focus-within { transform: none; }
}

/* ============================================================
   WE ARE EXPERTS IN — the platform belt

   Same white ground as the pillars above, so the belt reads as the
   closing line of the card stack rather than a new chapter.

   The loop is CSS-only: the track holds two identical rows and slides
   exactly half its width, so the second row lands where the first
   started and the seam never shows. Each row carries half the item gap
   as horizontal padding, which makes the join spacing match the rest.

   Marks are masks, like the toolkit strips — neutral graphite at rest,
   brand colour on hover. Hover also holds the belt still so a logo can
   actually be read.
   ============================================================ */
.experts {
  --logo-gap: clamp(34px, 4.4vw, 66px);
  --marquee-dur: 70s;
  --fade: clamp(28px, 7vw, 130px);

  background: var(--white);
  color: var(--dark);
  /* The pillar stack already ends on a runway, so the top only needs air. */
  padding-block: clamp(16px, 2.5vw, 40px) clamp(64px, 9vw, 120px);
  overflow: hidden;
}
.experts__head { margin-bottom: clamp(30px, 4vw, 54px); }

.marquee {
  position: relative;
  overflow: hidden;
  /* Both ends dissolve into the page instead of being cut by an edge */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade),
                                      #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade),
                                      #000 calc(100% - var(--fade)), transparent 100%);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-slide var(--marquee-dur) linear infinite;
}
/* Pause to read: on hover, on keyboard focus, and — via leads.js — whenever
   the belt is off screen. The class is only ever added by JS, so a page
   without it still slides. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee.is-idle .marquee__track { animation-play-state: paused; }

@keyframes marquee-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.marquee__row {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--logo-gap);
  margin: 0;
  /* Half a gap each side: the two halves meet at the seam and add up to one */
  padding: 0 calc(var(--logo-gap) / 2);
  list-style: none;
}

.techlogo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 11px;
}
.techlogo__mark {
  flex: 0 0 auto;
  width: clamp(23px, 2.2vw, 30px);
  height: clamp(23px, 2.2vw, 30px);
  background-color: rgba(30, 30, 30, 0.5);
  -webkit-mask: var(--mark) center / contain no-repeat;
          mask: var(--mark) center / contain no-repeat;
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.techlogo__name {
  font-family: 'Work Sans', var(--font);
  font-weight: 600;
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: rgba(30, 30, 30, 0.6);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.techlogo:hover .techlogo__mark {
  background-color: var(--brand);
  transform: translateY(-2px);
}
.techlogo:hover .techlogo__name { color: var(--dark); }

@media (max-width: 900px) {
  /* Shorter row, so it needs a shorter cycle to travel at the same speed */
  .experts { --marquee-dur: 48s; }
  .techlogo { gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  /* No belt: one static row the reader can swipe through, in full colour. */
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
  .marquee__row + .marquee__row { display: none; }
  .techlogo__mark { background-color: var(--brand); }
  .techlogo:hover .techlogo__mark { transform: none; }
}

/* ============================================================
   ONE CONNECTED SYSTEM
   ============================================================ */
.system {
  background: var(--white);
  color: var(--dark);
  padding-block: clamp(64px, 9vw, 120px);
}

.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  margin: 0 0 clamp(44px, 6vw, 76px);
  padding: 0;
  list-style: none;
}
.chain__node {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  border: 1.5px solid var(--dark);
  border-radius: 40px;
  font-family: 'Work Sans', var(--font);
  font-weight: 700;
  font-size: clamp(16px, 1.9vw, 26px);
}
/* The arrow lives in the gap between pills, not inside the pill's border */
.chain__node:not(:last-child)::after {
  content: '→';
  position: absolute;
  left: calc(100% + clamp(12px, 2vw, 26px) / 2);
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--green);
  font-weight: 700;
}
.chain__node:nth-child(1) { border-color: var(--acq); }
.chain__node:nth-child(2) { border-color: var(--int); }
.chain__node:nth-child(3) { border-color: var(--conv); }

/* ----- Vertical flow with a green trail that fills on scroll ----- */
.flow {
  position: relative;
  padding-left: clamp(34px, 4vw, 52px);
  --fill: 0;
}
.flow__rail {
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: rgba(30, 30, 30, 0.18);
}
.flow__fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(var(--fill) * 100%);
  background: var(--green);
  transition: height 0.15s linear;
}
.flow__list {
  display: grid;
  gap: clamp(26px, 3.4vw, 46px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.flow__step {
  position: relative;
  opacity: 0.34;
  transition: opacity 0.45s var(--ease);
}
.flow__step.is-active { opacity: 1; }
.flow__dot {
  position: absolute;
  left: calc(-1 * clamp(34px, 4vw, 52px));
  top: 0.45em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid rgba(30, 30, 30, 0.35);
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.flow__step.is-active .flow__dot {
  background: var(--green);
  border-color: var(--green);
}
.flow__step p {
  margin: 0;
  font-size: clamp(18px, 2.1vw, 28px);
  line-height: 1.35;
  color: var(--dark);
}
.flow__step strong { font-weight: 700; }

.loop {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: clamp(48px, 6vw, 84px);
  padding: clamp(28px, 3.4vw, 44px) clamp(20px, 3vw, 40px);
  border: 1.5px solid rgba(30, 30, 30, 0.16);
  border-radius: 20px;
  text-align: center;
}
.loop__line {
  margin: 0;
  font-family: 'Work Sans', var(--font);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.2;
}
.loop__arrows { display: block; width: clamp(120px, 16vw, 180px); }
.loop__arrows svg {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  fill: none;
  stroke: var(--green);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ============================================================
   LEAD INFRASTRUCTURE
   ============================================================ */
.infra {
  background: var(--dark);
  color: var(--white);
  padding-block: clamp(72px, 9vw, 130px);
  text-align: center;
}
.infra__kicker {
  margin: 0;
  font-family: 'Work Sans', var(--font);
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 40px);
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.42);
}
.infra__title {
  margin: 6px 0 0;
  font-family: 'Work Sans', var(--font);
  font-weight: 700;
  font-size: clamp(38px, 6vw, 86px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--green);
}
.infra__text {
  max-width: 720px;
  margin: clamp(26px, 3vw, 38px) auto 0;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.equation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 20px);
  margin-top: clamp(34px, 4vw, 54px);
}
.equation__chip {
  padding: 13px 26px;
  border-radius: 40px;
  border: 1.5px solid;
  font-family: 'Work Sans', var(--font);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 21px);
}
.equation__chip--comm { color: var(--acq);  border-color: rgba(238, 91, 57, 0.6); }
.equation__chip--mkt  { color: var(--int);  border-color: rgba(47, 107, 237, 0.6); }
.equation__chip--tech { color: var(--conv); border-color: rgba(var(--green-rgb), 0.6); }
.equation__op {
  font-family: 'Work Sans', var(--font);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 26px);
  color: rgba(255, 255, 255, 0.45);
}

.infra__objective {
  margin: clamp(34px, 4vw, 54px) 0 0;
  font-size: clamp(17px, 1.8vw, 24px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}
.infra__objective strong {
  display: inline-block;
  margin-top: 6px;
  font-family: 'Work Sans', var(--font);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 36px);
  color: var(--white);
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 118%, rgba(var(--green-rgb), 0.16), transparent 55%),
    var(--dark);
  padding-block: clamp(72px, 9vw, 130px) clamp(56px, 7vw, 100px);
  border-top: 1px solid var(--line);
  text-align: center;
}
.final__title {
  margin: 0;
  font-family: 'Work Sans', var(--font);
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 76px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.final__title-accent { color: var(--green); }

.final__benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 34px);
  margin: clamp(32px, 4vw, 50px) 0 0;
  padding: 0;
  list-style: none;
}
.final__benefits li {
  position: relative;
  font-family: 'Work Sans', var(--font);
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 24px);
  color: rgba(255, 255, 255, 0.9);
}
.final__benefits li:not(:last-child)::after {
  content: '';
  position: absolute;
  right: calc(-1 * clamp(7px, 1.2vw, 17px));
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--green);
}
.final__text {
  max-width: 760px;
  margin: clamp(26px, 3vw, 38px) auto 0;
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.final .cta { margin-top: clamp(34px, 4vw, 52px); }

.lockup {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(34px, 4vw, 52px);
  border-top: 1px solid var(--line);
}
.lockup__plane {
  width: 42px;
  height: auto;
  margin: 0 auto 22px;
  opacity: 0.9;
}
.lockup__name {
  margin: 0;
  font-family: 'Work Sans', var(--font);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lockup__formula {
  margin: 10px 0 0;
  font-size: clamp(14px, 1.4vw, 18px);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.62);
}
.lockup__formula span { color: var(--green); padding-inline: 4px; }
.lockup__tagline {
  margin: 18px 0 0;
  font-family: 'Work Sans', var(--font);
  font-weight: 600;
  font-size: clamp(15px, 1.5vw, 20px);
  color: var(--cream);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .lead-hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .chat { margin-inline: 0; max-width: 520px; }
}

@media (max-width: 900px) {
  .statement__body { grid-template-columns: 1fr; }

  /* The hero CTA duplicates the floating WhatsApp button on a phone and pushes
     the conversation below the fold — the closing CTA still carries the page. */
  .lead-hero .cta { display: none; }

  .pillar {
    top: calc(var(--header-h) + 10px + var(--i) * 70px);
    border-radius: 22px;
    padding-top: 28px;
  }
  /* Gentler taper on narrow screens — the copy needs the width more than
     the funnel needs the angle. */
  .pillar--acq { width: 100%; }
  .pillar--int { width: 95%; }
  .pillar--conv { width: 90%; }
  .pillar__lead { max-width: 100%; }
}

@media (max-width: 600px) {
  .leads-page .statement { padding-block: clamp(56px, 14vw, 90px); }
  .lead-hero { padding-block: 44px 64px; }
  .lead-hero__title { letter-spacing: -0.01em; }
  .cta { width: 100%; justify-content: center; padding-inline: 20px; }
  /* On a phone the hero button costs a whole screen before the chat vignette
     appears, and the same action is already one thumb away three times over —
     the floating WhatsApp button, the menu's "Contact us" and the closing CTA.
     So the hero drops its button here and gets to the product sooner. */
  .lead-hero .cta { display: none; }

  .chat { padding: 18px 16px 20px; border-radius: 18px; }
  .chat__msg { max-width: 92%; font-size: 14.5px; }

  .pillar {
    top: calc(var(--header-h) + 8px + var(--i) * 62px);
    padding: 24px 20px 28px;
    margin-bottom: 24px;
    border-radius: 20px;
    box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.1);
  }
  .pillar--acq { width: 100%; }
  .pillar--int { width: 96.5%; }
  .pillar--conv { width: 93%; }
  .pillar__title { font-size: 24px; }
  .pillar__sub { font-size: 19px; margin-top: 12px; }
  .pillar__lead { gap: 12px; }
  .pillar__dot { width: 13px; height: 13px; }
  .tags { gap: 7px; }
  .tags li { font-size: 12.5px; padding: 7px 13px; }

  .toolkit__list { gap: 7px; }
  .toolkit__item { gap: 8px; padding: 6px 13px 6px 10px; }
  .toolkit__mark { width: 17px; height: 17px; }
  .toolkit__name { font-size: 12.5px; }

  /* Stack the chain: a wrapped horizontal row leaves an arrow pointing at
     nothing at the end of the first line. */
  .chain {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 44px;
  }
  .chain__node { padding: 10px 20px; }
  .chain__node:not(:last-child)::after {
    content: '↓';
    left: 50%;
    top: calc(100% + 15px);
  }

  .final__benefits { flex-direction: column; gap: 8px; }
  .final__benefits li:not(:last-child)::after { display: none; }
}

/* Short laptops: the tallest card (03) has to stay under the header once
   pinned, so trim the step and the card's own metrics. The ceiling is 1040px
   rather than 900px because the toolkit strip made card 03 taller — below that
   height the untrimmed card runs past the fold while it is pinned. */
@media (min-width: 901px) and (max-height: 1040px) {
  .pillar {
    top: calc(var(--header-h) + 10px + var(--i) * 72px);
    padding-top: 26px;
    padding-bottom: 26px;
  }
  .pillar__title { font-size: clamp(26px, 2.6vw, 36px); }
  .pillar__sub { font-size: clamp(19px, 1.9vw, 25px); margin-top: 14px; }
  .pillar__lead { margin-top: 16px; }
  .pillar__lead p { font-size: clamp(15px, 1.35vw, 18px); }
  .pillar__pull { font-size: clamp(17px, 1.6vw, 21px); margin-top: 16px; }
  .pillar__label { margin-top: 18px; }
  .pillar__closer { margin-top: 18px; padding-top: 14px; }
  /* Already one row here (see the min-width:901px block) — just tighter. */
  .toolkit { gap: 14px; margin-top: 13px; padding-top: 11px; }
  .toolkit__label { font-size: 11.5px; }
  .toolkit__list { gap: 7px; }
  .toolkit__item { padding: 4px 12px 4px 9px; gap: 7px; }
  .toolkit__mark { width: 16px; height: 16px; }
  .toolkit__name { font-size: 12px; }
}

/* Short viewports: keep the pinned pillar card under the header */
@media (max-width: 900px) and (max-height: 700px) {
  .pillar {
    top: calc(var(--header-h) + 6px + var(--i) * 50px);
    padding: 20px 18px 22px;
  }
  .pillar__title { font-size: 24px; }
  .pillar__lead p { font-size: 15px; }
}