/* ==========================================================================
   Wexler Funnel Kit — blocks.css
   The block library. Consumes tokens from theme.css and defines no colours.

   CHANGED after design review:
     - Monospace removed from every label, eyebrow, badge, kicker and stat
       figure. Mono now appears ONLY inside the mocks, where it is genuinely
       data UI. Monospace on marketing copy was the biggest "AI" tell.
     - Glow added to icon wells, buttons and stat figures. Its absence was
       most of why the page read flat next to the reference.
     - Headings use a wider measure so they span the page instead of being
       squeezed into the prose column.
     - Sticky CTA is a centred floating pill, not a full-width band.
     - Added: wx-modal (any CTA opens the form), wx-statband, wx-services.

   BLOCK INDEX
     Layout      wx-container, wx-bleed, wx-stack, wx-gridbg, wx-rule, wx-glowfield
     Reveal      wx-reveal
     01 Logo bar         wx-logobar, wx-logomark
     02 Hero             wx-hero, wx-badge
     03 Buttons          wx-btn, wx-btn-primary, wx-btn-ghost
     04 CTA + chips      wx-cta, wx-chips
     05 Stat grid        wx-stats, wx-statband
     06 Chained cards    wx-chain
     07 Process steps    wx-steps
     08 Proof cards      wx-proof
     09 Sticky split     wx-sticksplit
     10 About split      wx-split
     11 Logo marquee     wx-marquee
     12 Sticky CTA pill  wx-stickybar
     13 Consent banner   wx-consent
     14 Form + funnel    wx-form, wx-funnel, wx-options
     15 Modal            wx-modal
     16 Services grid    wx-services
   ========================================================================== */

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

.wx-container {
  width: 100%;
  max-width: var(--wx-w-main);
  margin-inline: auto;
  padding-inline: var(--wx-gutter);
}
.wx-container--wide   { max-width: var(--wx-w-wide); }
.wx-container--text   { max-width: var(--wx-w-text); }
.wx-container--narrow { max-width: var(--wx-w-narrow); }

.wx-bleed {
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--wx-gutter);
}

.wx-stack > * + * { margin-top: var(--wx-block-gap); }

/* Graph-paper ground, plus a warm accent bloom behind the hero so the top of
   the page is bright rather than uniformly dark. */
.wx-gridbg {
  position: relative;
  background-color: var(--wx-bg);
  background-image:
    linear-gradient(to right,  var(--wx-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--wx-border) 1px, transparent 1px);
  background-size: 68px 68px;
}
/* The grid runs the FULL height of the page, softening only in the last few
   percent. This used to be a radial fade anchored at 50% 0%, which meant the
   squares died out just below the hero and every section after it sat on flat
   dark, so the page looked like two different backgrounds stitched together. */
.wx-gridbg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 93%,
    var(--wx-bg) 100%
  );
}
/* The bloom. Sits above the grid fade, below content. */
.wx-gridbg::after {
  content: "";
  position: absolute;
  top: -12%;
  left: 50%;
  width: min(1100px, 130vw);
  height: 560px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    color-mix(in oklch, var(--wx-primary) 13%, transparent) 0%,
    transparent 68%
  );
  filter: blur(18px);
}
.wx-gridbg > * { position: relative; z-index: 1; }

/* Drop a localised glow behind any section that needs lifting. */
.wx-glowfield { position: relative; }
.wx-glowfield::before {
  content: "";
  position: absolute;
  inset: -18% -10%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    color-mix(in oklch, var(--wx-primary) 9%, transparent) 0%,
    transparent 70%
  );
}
.wx-glowfield > * { position: relative; z-index: 1; }

.wx-rule {
  height: 1px;
  border: 0;
  background: linear-gradient(to right, transparent,
    var(--wx-tint-50) 20%, var(--wx-tint-50) 80%, transparent);
}
.wx-rule--short {
  width: 60px; height: 3px;
  background: var(--wx-primary);
  border-radius: var(--wx-r-pill);
  margin-inline: auto;
  box-shadow: var(--wx-glow-sm);
}

/* Section eyebrow. Inter, heavy, uppercase, wide tracking. NOT monospace. */
/* Wayfinding, not action. Neutral. */
.wx-eyebrow {
  display: block;
  font-family: var(--wx-font-body);
  font-size: var(--wx-t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--wx-track-eyebrow);
  text-transform: uppercase;
  color: var(--wx-marker);
  margin-bottom: var(--wx-s-4);
}

.wx-lead {
  font-size: var(--wx-t-lead);
  line-height: 1.6;
  color: var(--wx-fg-2);
  max-width: 64ch;
}

.wx-muted { color: var(--wx-muted); }

/* Headings get the wider heading measure; the lead stays at prose width. */
.wx-section-head {
  max-width: var(--wx-w-heading);
  margin-inline: auto;
  margin-bottom: var(--wx-s-16);
  text-align: center;
}
.wx-section-head .wx-lead {
  margin-inline: auto;
  margin-top: var(--wx-s-5);
  max-width: 62ch;
}

/* ==========================================================================
   REVEAL
   ========================================================================== */

.wx-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   var(--wx-dur-slow) var(--wx-ease-out),
    transform var(--wx-dur-slow) var(--wx-ease-out);
  transition-delay: var(--wx-delay, 0s);
}
.wx-reveal.is-visible { opacity: 1; transform: none; }
.no-js .wx-reveal { opacity: 1; transform: none; }

/* ==========================================================================
   01 — LOGO BAR
   ========================================================================== */

.wx-logobar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--wx-s-3);
  /* Kept deliberately tight. Every pixel here pushes the hero CTA toward the
     fold, and a logo bar is the least valuable thing on the page. */
  padding-block: var(--wx-s-5) var(--wx-s-6);
}

/* The real Wexler mark. Inlined as SVG with fill=currentColor so it inherits
   the accent: change data-primary and the logo follows. */
/* `inline-flex` is load-bearing. As a bare <span> this is inline, so width and
   height are ignored, and the child SVG's width:100% then resolves against
   nothing and blows up to fill the page. That is exactly what happened in the
   footer, where the mark is not a flex item of .wx-logobar. */
.wx-logomark {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--wx-primary);
  filter: drop-shadow(0 0 12px color-mix(in oklch, var(--wx-primary) 40%, transparent));
}
.wx-logomark svg { width: 100%; height: 100%; }
.wx-logomark--sm { width: 22px; height: 22px; filter: none; }

.wx-logotype {
  font-family: var(--wx-font-display);
  font-size: 1.32rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1;
}
.wx-logotype span { color: var(--wx-primary); }

/* ==========================================================================
   02 — HERO
   ========================================================================== */

.wx-hero { text-align: center; }
.wx-hero h1 { margin-bottom: var(--wx-s-5); }

.wx-hero h1 em,
.wx-hero h1 strong {
  font-style: normal;
  font-weight: inherit;
  color: var(--wx-primary);
  text-shadow: 0 0 42px color-mix(in oklch, var(--wx-primary) 34%, transparent);
}

.wx-hero .wx-lead { margin-inline: auto; max-width: 58ch; }

.wx-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--wx-s-2);
  padding: var(--wx-s-2) var(--wx-s-5);
  border: 1px solid var(--wx-border-strong);
  border-radius: var(--wx-r-pill);
  background: color-mix(in oklch, var(--wx-fg) 6%, transparent);
  color: var(--wx-fg-2);
  font-size: var(--wx-t-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: var(--wx-s-5);
}
.wx-badge svg { color: var(--wx-marker); flex-shrink: 0; }

.wx-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--wx-green);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--wx-green) 24%, transparent),
              0 0 12px var(--wx-green);
  flex-shrink: 0;
  animation: wx-dot-pulse 2.4s var(--wx-ease) infinite;
}
@keyframes wx-dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Short-viewport hero compaction.
   The hero has to fit a logo bar, a badge, a large h1, a lead, a product mock
   AND the CTA. On a 1440x900 laptop, which is the common case, generous
   spacing puts the CTA below the fold and the visitor arrives at a page with
   no visible ask. Tall screens keep the full-size treatment.
   ========================================================================== */

@media (max-height: 980px) {
  .wx-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); }
  .wx-hero h1 { margin-bottom: var(--wx-s-4); }
  .wx-hero .wx-badge { margin-bottom: var(--wx-s-3); }
  .wx-logobar { padding-block: var(--wx-s-3) var(--wx-s-3); }
  .wx-hero .wx-chips { margin-top: var(--wx-s-4); }
  /* The mock's share of this compaction lives in heroes.css, NOT here.
     heroes.css loads after blocks.css and re-declares .wx-llm at the same
     specificity, so a rule here loses on source order and silently does
     nothing. Cost 48px of fold before I spotted it. */
}

/* Second tier for short laptops (1440x800 and similar). One breakpoint was not
   enough: at 800px the CTA still landed 53px under. */
@media (max-height: 860px) {
  .wx-hero h1 { font-size: clamp(1.95rem, 3.9vw, 2.6rem); margin-bottom: var(--wx-s-3); }
  .wx-hero .wx-lead { font-size: 1rem; }
  .wx-hero .wx-badge { margin-bottom: var(--wx-s-2); font-size: 0.75rem; }
  .wx-logobar { padding-block: var(--wx-s-2) var(--wx-s-3); }
  .wx-logomark { width: 28px; height: 28px; }
  .wx-logotype { font-size: 1.15rem; }
}

/* Third tier: viewports that cannot fit a big visual AND the CTA.
   Two ways to qualify:
     max-height 760px  a 1366x768 laptop once browser chrome is taken out
     max-width  700px  a phone, where the narrow column pushes the headline and
                       lead onto more lines and costs the same vertical budget
   Rather than shrink the mock until it is useless, swap the order so the CTA is
   always above the fold with the visual immediately under it. Wherever both fit,
   the visual stays first as intended.
   Children without an explicit order default to 0, so badge, h1 and lead stay
   put and only these three reorder. */
@media (max-height: 760px), (max-width: 700px) {
  .wx-hero { display: flex; flex-direction: column; }
  .wx-hero__cta    { order: 1; margin-top: var(--wx-s-6) !important; }
  .wx-hero__visual { order: 2; }
  .wx-hero .wx-chips { order: 3; }
}

/* ==========================================================================
   03 — BUTTONS
   ========================================================================== */

.wx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wx-s-2);
  padding: 1rem 2rem;
  border-radius: var(--wx-r-pill);
  font-family: var(--wx-font-body);
  font-size: var(--wx-t-sm);
  font-weight: 700;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform    var(--wx-dur-fast) var(--wx-ease),
    background   var(--wx-dur-fast) var(--wx-ease),
    box-shadow   var(--wx-dur-fast) var(--wx-ease),
    border-color var(--wx-dur-fast) var(--wx-ease);
}
.wx-btn svg { flex-shrink: 0; transition: transform var(--wx-dur) var(--wx-ease); }
.wx-btn:hover svg { transform: translateX(3px); }
.wx-btn:active { transform: translateY(1px); }

.wx-btn-primary {
  background: var(--wx-primary);
  color: var(--wx-on-primary);
  border: 1px solid var(--wx-primary);
  box-shadow: var(--wx-glow);
}
.wx-btn-primary:hover {
  background: color-mix(in oklch, var(--wx-primary) 88%, #fff);
  box-shadow: var(--wx-glow-lg);
}

.wx-btn-ghost {
  background: color-mix(in oklch, var(--wx-fg) 4%, transparent);
  color: var(--wx-fg);
  border: 1px solid var(--wx-border-strong);
}
.wx-btn-ghost:hover {
  border-color: var(--wx-primary);
  background: var(--wx-tint-10);
}

.wx-btn--lg    { padding: 1.2rem 2.6rem; font-size: 1.0625rem; }
.wx-btn--block { width: 100%; }

/* ==========================================================================
   04 — CTA + TRUST CHIPS
   ========================================================================== */

.wx-cta { text-align: center; }
.wx-cta__note { margin-top: var(--wx-s-4); font-size: var(--wx-t-xs); color: var(--wx-muted); }

.wx-chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--wx-s-3);
  margin-top: var(--wx-s-8);
}
.wx-chip {
  display: inline-flex; align-items: center; gap: var(--wx-s-2);
  padding: var(--wx-s-2) var(--wx-s-4);
  border: 1px solid var(--wx-border);
  border-radius: var(--wx-r-pill);
  background: color-mix(in oklch, var(--wx-fg) 4%, transparent);
  font-size: var(--wx-t-xs);
  font-weight: 500;
  color: var(--wx-fg-2);
}
/* Green tick, not gold: it reads as "confirmed" without competing with the CTA. */
.wx-chip svg { color: var(--wx-green); flex-shrink: 0; }

/* ==========================================================================
   05 — STATS
   Figures use the display face at heavy weight, not monospace. A monospace
   "888+" reads as a terminal readout, not an achievement.
   ========================================================================== */

.wx-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1px;
  background: var(--wx-border);
  border: 1px solid var(--wx-border);
  border-radius: var(--wx-r-lg);
  overflow: hidden;
}
.wx-stat {
  background: var(--wx-card);
  padding: var(--wx-s-8) var(--wx-s-5);
  text-align: center;
  transition: background var(--wx-dur) var(--wx-ease);
}
.wx-stat:hover { background: var(--wx-card-2); }

.wx-stat__figure {
  font-family: var(--wx-font-display);
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
  /* White, not gold. These are the largest coloured mass on the page and eight
     of them in accent left the gold CTA with nothing to contrast against. At
     900 weight and 40px they carry perfectly well in plain white. */
  color: var(--wx-fg);
  /* A figure must never wrap: "$184 -> $7k" breaking over two lines while
     "30 -> 230" stays on one makes the row look broken. */
  white-space: nowrap;
  text-shadow: none;
}
.wx-stat__label {
  margin-top: var(--wx-s-4);
  font-size: var(--wx-t-xs);
  line-height: 1.45;
  color: var(--wx-muted);
}
.wx-stat--good .wx-stat__figure {
  color: var(--wx-green);
  text-shadow:
    0 0 14px color-mix(in oklch, var(--wx-green) 55%, transparent),
    0 0 40px color-mix(in oklch, var(--wx-green) 38%, transparent);
}
.wx-stat--gap .wx-stat__figure {
  color: var(--wx-red);
  text-shadow:
    0 0 14px color-mix(in oklch, var(--wx-red) 55%, transparent),
    0 0 40px color-mix(in oklch, var(--wx-red) 38%, transparent);
}

/* Borderless variant for a hero-adjacent credibility band. */
.wx-statband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: var(--wx-s-8) var(--wx-s-4);
  text-align: center;
}
.wx-statband .wx-stat { background: none; padding: 0; }

/* ==========================================================================
   06 — CHAINED CARDS
   ========================================================================== */

.wx-chain { max-width: var(--wx-w-narrow); margin-inline: auto; }

.wx-card {
  position: relative;
  border: 1px solid var(--wx-border);
  border-radius: var(--wx-r-lg);
  background: var(--wx-card);
  padding: var(--wx-s-8) var(--wx-s-6) var(--wx-s-8);
  transition: border-color var(--wx-dur) var(--wx-ease),
              background   var(--wx-dur) var(--wx-ease),
              box-shadow   var(--wx-dur) var(--wx-ease);
}
.wx-card::after {
  content: "";
  position: absolute;
  inset: -1px auto auto -1px;
  width: calc(100% + 2px);
  height: 1px;
  border-radius: var(--wx-r-lg) var(--wx-r-lg) 0 0;
  background: linear-gradient(to right, transparent, var(--wx-primary), transparent);
  opacity: 0;
  transition: opacity var(--wx-dur) var(--wx-ease);
}
.wx-card:hover {
  border-color: var(--wx-border-strong);
  background: var(--wx-card-2);
  box-shadow: 0 0 40px color-mix(in oklch, var(--wx-primary) 8%, transparent);
}
.wx-card:hover::after { opacity: 1; }

.wx-card__head {
  display: flex; align-items: center; gap: var(--wx-s-4);
  margin-bottom: var(--wx-s-4);
}

/* Icon well. Still lit, but in neutral: there are dozens of these and in gold
   they were the main thing competing with the CTA. */
.wx-icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  flex-shrink: 0;
  border: 1px solid var(--wx-border-strong);
  border-radius: var(--wx-r-md);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in oklch, var(--wx-fg) 9%, transparent), transparent 72%),
    var(--wx-card-2);
  color: var(--wx-marker);
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--wx-fg) 10%, transparent);
}
.wx-icon svg { width: 22px; height: 22px; }
.wx-icon--lg { width: 60px; height: 60px; border-radius: var(--wx-r-lg); }
.wx-icon--lg svg { width: 27px; height: 27px; }

.wx-card p {
  font-size: var(--wx-t-sm);
  line-height: 1.66;
  color: var(--wx-fg-2);
}

.wx-chain__link {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--wx-s-1);
  padding-block: var(--wx-s-4);
}
.wx-chain__link span {
  width: 1px; height: 20px;
  background: linear-gradient(to bottom, var(--wx-border), var(--wx-tint-50));
}
.wx-chain__link span + span {
  background: linear-gradient(to bottom, var(--wx-tint-50), var(--wx-border));
}
.wx-chain__link svg { color: var(--wx-tint-50); margin-top: -5px; }

/* ==========================================================================
   07 — PROCESS STEPS
   ========================================================================== */

.wx-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
  gap: var(--wx-s-5);
  counter-reset: wx-step;
}

.wx-step {
  position: relative;
  counter-increment: wx-step;
  border: 1px solid var(--wx-border);
  border-radius: var(--wx-r-lg);
  background: var(--wx-card);
  padding: var(--wx-s-8) var(--wx-s-6);
  transition: border-color var(--wx-dur) var(--wx-ease),
              box-shadow   var(--wx-dur) var(--wx-ease);
}
.wx-step:hover {
  border-color: var(--wx-border-strong);
  box-shadow: 0 0 40px color-mix(in oklch, var(--wx-primary) 8%, transparent);
}

.wx-step__icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: var(--wx-s-5);
  border: 1px solid var(--wx-border-strong);
  border-radius: var(--wx-r-md);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in oklch, var(--wx-fg) 9%, transparent), transparent 72%),
    var(--wx-card-2);
  color: var(--wx-marker);
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--wx-fg) 10%, transparent);
}

/* Ghosted numeral from the counter, so markup carries no numbers. */
.wx-step::before {
  content: counter(wx-step, decimal-leading-zero);
  position: absolute;
  top: var(--wx-s-5);
  right: var(--wx-s-6);
  font-family: var(--wx-font-display);
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--wx-fg);
  opacity: 0.12;
}

.wx-step__meta {
  display: inline-flex; align-items: center; gap: var(--wx-s-2);
  font-size: var(--wx-t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wx-marker);
  margin-bottom: var(--wx-s-3);
}
.wx-step h3 { margin-bottom: var(--wx-s-3); }
.wx-step p { font-size: var(--wx-t-sm); line-height: 1.64; color: var(--wx-fg-2); }

.wx-steps--vertical {
  grid-template-columns: 1fr;
  max-width: var(--wx-w-narrow);
  margin-inline: auto;
  gap: var(--wx-s-4);
}

/* ==========================================================================
   08 — PROOF CARDS
   ========================================================================== */

.wx-proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--wx-s-5);
}
.wx-proof__well {
  display: flex; align-items: center; justify-content: flex-start;
  width: 152px; height: 84px;
  padding: var(--wx-s-3);
  margin-bottom: var(--wx-s-5);
  border-radius: var(--wx-r-md);
  background: rgba(255, 255, 255, 0.94);
}
.wx-proof__well img { max-height: 100%; width: auto; object-fit: contain; }
.wx-proof__kicker {
  font-size: var(--wx-t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wx-marker);
  margin-bottom: var(--wx-s-2);
}

/* ==========================================================================
   09 — STICKY SPLIT
   ========================================================================== */

.wx-sticksplit { display: grid; gap: var(--wx-s-10); }
.wx-sticksplit__copy > * + * { margin-top: var(--wx-s-4); }
.wx-sticksplit__media { display: flex; flex-direction: column; gap: var(--wx-s-5); }

@media (min-width: 900px) {
  .wx-sticksplit { grid-template-columns: 0.85fr 1fr; gap: var(--wx-s-16); align-items: start; }
  .wx-sticksplit__copy { position: sticky; top: var(--wx-s-16); }
}

.wx-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--wx-border);
  border-radius: var(--wx-r-lg);
  background: var(--wx-well);
}
.wx-tile__img { position: relative; aspect-ratio: 16 / 9; }
.wx-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.wx-tile__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(5,7,11,0) 42%, rgba(5,7,11,0.94) 100%);
}
.wx-tile__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--wx-s-5); }
.wx-tile__cap strong { display: block; font-size: var(--wx-t-body); }
.wx-tile__cap span   { font-size: var(--wx-t-xs); color: var(--wx-muted); }

/* ==========================================================================
   10 — ABOUT SPLIT
   ========================================================================== */

.wx-split { display: grid; gap: var(--wx-s-10); align-items: center; }
@media (min-width: 900px) {
  .wx-split { grid-template-columns: 1fr 1fr; gap: var(--wx-s-16); }
  .wx-split--flip .wx-split__media { order: 2; }
}
.wx-split__copy > * + * { margin-top: var(--wx-s-4); }

.wx-ticks { display: flex; flex-direction: column; gap: var(--wx-s-4); }
.wx-ticks li { display: flex; align-items: flex-start; gap: var(--wx-s-3); }
.wx-ticks__mark {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  flex-shrink: 0; margin-top: 1px;
  border-radius: var(--wx-r-sm);
  background: color-mix(in oklch, var(--wx-fg) 8%, transparent);
  color: var(--wx-marker);
  box-shadow: none;
}
.wx-ticks__mark svg { width: 15px; height: 15px; }
.wx-ticks li span:last-child { font-size: var(--wx-t-sm); line-height: 1.58; color: var(--wx-fg-2); }

/* ==========================================================================
   11 — LOGO MARQUEE
   Duplicate the track in markup; the animation translates exactly -50%.
   ========================================================================== */

/* Do NOT put loading="lazy" on marquee images. The track is far wider than the
   clipped container, so the lazy loader never registers an intersection and the
   browser never starts the request: currentSrc stays empty and every logo
   silently fails to appear. Use decoding="async" instead. These files are small
   and are part of the block's identity, so eager is correct anyway. */
.wx-marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.wx-marquee__track {
  display: flex;
  width: max-content;
  animation: wx-marquee 32s linear infinite;
}
.wx-marquee:hover .wx-marquee__track { animation-play-state: paused; }

.wx-marquee__item {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding-inline: var(--wx-s-10);
  min-width: 190px;
}
.wx-marquee__item img {
  height: 40px; width: auto;
  object-fit: contain;
  opacity: 0.72;
  /* Monochrome variant: for single-colour marks that read fine as white. */
  filter: grayscale(1) brightness(0) invert(1);
  transition: opacity var(--wx-dur) var(--wx-ease);
}
.wx-marquee:hover .wx-marquee__item img { opacity: 1; }

/* --wells: keep every logo in its real brand colour on a light plate.
   Required whenever the set mixes multi-colour marks (Google, Microsoft) with
   solid dark ones (Apple). Inverting that mix to white destroys the colourful
   ones and inverting nothing loses the dark ones, so the plate is the only
   option that serves both. */
.wx-marquee--wells .wx-marquee__item { padding-inline: var(--wx-s-3); min-width: 0; }
.wx-marquee--wells .wx-marquee__item img {
  filter: none;
  opacity: 1;
  height: 38px;
}
.wx-marquee--wells .wx-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  padding: var(--wx-s-4) var(--wx-s-6);
  border-radius: var(--wx-r-md);
  background: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform var(--wx-dur) var(--wx-ease),
              box-shadow var(--wx-dur) var(--wx-ease);
}
.wx-marquee--wells .wx-plate:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 34px color-mix(in oklch, var(--wx-primary) 22%, transparent);
}

/* ==========================================================================
   17 — TWO-TRACK DIAGRAM
   Literally two tracks sitting on one shared foundation. A three-card grid
   under a heading that says "two tracks" reads as a contradiction, which is
   exactly what it looked like before.
   ========================================================================== */

.wx-tracks {
  max-width: var(--wx-w-wide);
  margin-inline: auto;
}

.wx-tracks__pair {
  display: grid;
  gap: var(--wx-s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .wx-tracks__pair { grid-template-columns: 1fr 1fr; gap: var(--wx-s-8); }
}

.wx-track {
  position: relative;
  padding: var(--wx-s-8) var(--wx-s-6);
  border: 1px solid var(--wx-border);
  border-radius: var(--wx-r-lg);
  background:
    radial-gradient(ellipse 120% 70% at 50% -20%,
      color-mix(in oklch, var(--wx-primary) 9%, transparent), transparent 70%),
    var(--wx-card);
  transition: border-color var(--wx-dur) var(--wx-ease),
              box-shadow var(--wx-dur) var(--wx-ease);
}
.wx-track:hover {
  border-color: var(--wx-tint-50);
  box-shadow: 0 0 50px color-mix(in oklch, var(--wx-primary) 12%, transparent);
}

.wx-track__label {
  display: inline-flex;
  align-items: center;
  gap: var(--wx-s-2);
  padding: 4px 12px;
  margin-bottom: var(--wx-s-5);
  border: 1px solid var(--wx-border-strong);
  border-radius: var(--wx-r-pill);
  background: color-mix(in oklch, var(--wx-fg) 7%, transparent);
  font-size: var(--wx-t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wx-marker);
}
.wx-track h3 { font-size: 1.45rem; margin-bottom: var(--wx-s-3); }
.wx-track > p { font-size: var(--wx-t-sm); line-height: 1.64; color: var(--wx-fg-2); }
.wx-track .wx-ticks { margin-top: var(--wx-s-5); }

/* Connector: two stems rising out of the foundation into each track. */
.wx-tracks__join {
  display: none;
  height: 46px;
  position: relative;
}
@media (min-width: 820px) {
  .wx-tracks__join { display: block; }
  .wx-tracks__join::before,
  .wx-tracks__join::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(to top, var(--wx-tint-50), var(--wx-border));
  }
  .wx-tracks__join::before { left: 25%; }
  .wx-tracks__join::after  { left: 75%; }
}

.wx-tracks__base {
  position: relative;
  padding: var(--wx-s-6) var(--wx-s-8);
  border: 1px solid var(--wx-tint-28);
  border-radius: var(--wx-r-lg);
  background:
    linear-gradient(to bottom, var(--wx-tint-10), transparent),
    var(--wx-well);
  text-align: center;
}
.wx-tracks__base .wx-eyebrow { margin-bottom: var(--wx-s-2); }
.wx-tracks__base p {
  font-size: var(--wx-t-sm);
  color: var(--wx-fg-2);
  max-width: 68ch;
  margin-inline: auto;
}

/* ==========================================================================
   18 — TIMELINE
   The process, rendered as nodes on a rail rather than a third identical row
   of cards. Horizontal above 820px, vertical rail below.
   ========================================================================== */

.wx-timeline {
  position: relative;
  max-width: var(--wx-w-wide);
  margin-inline: auto;
  counter-reset: wx-tl;
}

.wx-timeline__step {
  position: relative;
  counter-increment: wx-tl;
  padding-left: 4.25rem;
  padding-bottom: var(--wx-s-10);
}
/* Vertical rail */
.wx-timeline__step::before {
  content: "";
  position: absolute;
  left: 1.4rem;
  top: 3rem;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--wx-tint-50), var(--wx-border));
}
.wx-timeline__step:last-child { padding-bottom: 0; }
.wx-timeline__step:last-child::before { display: none; }

/* Numbered node */
.wx-timeline__step::after {
  content: counter(wx-tl);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--wx-border-strong);
  background: radial-gradient(circle at 50% 0%, color-mix(in oklch, var(--wx-fg) 10%, transparent), transparent 72%), var(--wx-card-2);
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--wx-fg) 10%, transparent);
  color: var(--wx-fg);
  font-family: var(--wx-font-display);
  font-size: 1.1rem;
  font-weight: 900;
}

.wx-timeline__meta {
  font-size: var(--wx-t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wx-marker);
  margin-bottom: var(--wx-s-2);
}
.wx-timeline__step h3 { margin-bottom: var(--wx-s-3); font-size: 1.3rem; }
.wx-timeline__step p {
  font-size: var(--wx-t-sm);
  line-height: 1.66;
  color: var(--wx-fg-2);
  max-width: 58ch;
}

@media (min-width: 820px) {
  .wx-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wx-s-8); }

  /* Node centred over its own column, and the copy centred under it. Leaving
     the node at left:0 while the text spans the full column reads as
     misaligned, because the two have different centres. */
  .wx-timeline__step {
    padding-left: 0;
    padding-top: 4.25rem;
    padding-bottom: 0;
    text-align: center;
  }
  .wx-timeline__step::after {
    left: 50%;
    margin-left: -1.4rem;   /* half the 2.8rem node */
  }
  .wx-timeline__step p { margin-inline: auto; }

  /* Rail runs from this node's right edge to the next node's left edge. */
  .wx-timeline__step::before {
    left: calc(50% + 1.4rem);
    right: calc(-50% - var(--wx-s-8) + 1.4rem);
    top: 1.4rem; bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(to right, var(--wx-tint-50), var(--wx-border));
  }
  .wx-timeline__step:last-child::before { display: none; }
}

/* ==========================================================================
   19 — CASE ROWS
   Compact engagement summaries. Every row must carry a source line saying
   whether it is a documented result or an illustration of the work: a case
   card with invented numbers is a fabricated result, which is a hard no.
   ========================================================================== */

.wx-cases { display: grid; gap: var(--wx-s-4); max-width: var(--wx-w-main); margin-inline: auto; }

.wx-case {
  display: grid;
  gap: var(--wx-s-4);
  align-items: start;
  padding: var(--wx-s-6);
  border: 1px solid var(--wx-border);
  border-radius: var(--wx-r-lg);
  background: var(--wx-card);
  transition: border-color var(--wx-dur) var(--wx-ease);
}
.wx-case:hover { border-color: var(--wx-border-strong); }
@media (min-width: 780px) {
  /* Fixed third column, not `auto`. With `auto` the metric column sizes to each
     row's own content, so every row starts at a different x and the numbers
     stagger down the page. A fixed track puts them on one vertical line, the
     same way the fixed first track aligns the niche labels. */
  .wx-case { grid-template-columns: 12rem 1fr 12rem; gap: var(--wx-s-6); align-items: center; }
}

.wx-case__niche {
  font-size: var(--wx-t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wx-marker);
}
.wx-case__what { font-size: var(--wx-t-sm); line-height: 1.6; color: var(--wx-fg-2); }
.wx-case__metric {
  font-family: var(--wx-font-display);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--wx-fg);
  white-space: nowrap;
}
.wx-case__metric small {
  display: block;
  font-family: var(--wx-font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--wx-muted);
  margin-top: 4px;
  /* The figure above stays on one line; the label under it may wrap. */
  white-space: normal;
}
/* Illustration rather than a recorded result. Visually distinct on purpose. */
.wx-case--illustrative .wx-case__metric { color: var(--wx-muted); font-size: 1.05rem; }

@keyframes wx-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   12 — STICKY CTA PILL
   A centred floating pill, not a full-width band with a border line across
   the page.
   ========================================================================== */

.wx-stickybar {
  position: fixed;
  left: 50%;
  bottom: var(--wx-s-5);
  z-index: 90;
  transform: translate(-50%, calc(100% + var(--wx-s-8)));
  transition: transform var(--wx-dur-slow) var(--wx-ease-out);
  max-width: calc(100vw - 2 * var(--wx-gutter));
}
.wx-stickybar.is-shown { transform: translate(-50%, 0); }

.wx-stickybar__inner {
  display: flex; align-items: center; gap: var(--wx-s-4);
  padding: var(--wx-s-3) var(--wx-s-3) var(--wx-s-3) var(--wx-s-6);
  border: 1px solid var(--wx-border-strong);
  border-radius: var(--wx-r-pill);
  background: color-mix(in oklch, var(--wx-well) 88%, transparent);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55),
              0 0 30px color-mix(in oklch, var(--wx-primary) 12%, transparent);
}
.wx-stickybar__label {
  font-size: var(--wx-t-sm);
  font-weight: 500;
  color: var(--wx-fg-2);
  white-space: nowrap;
}
@media (max-width: 680px) {
  .wx-stickybar__label { display: none; }
  .wx-stickybar__inner { padding-left: var(--wx-s-3); }
}

/* ==========================================================================
   13 — CONSENT BANNER
   ========================================================================== */

.wx-consent {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 120;
  padding: var(--wx-s-4) var(--wx-gutter);
  background: color-mix(in oklch, var(--wx-well) 97%, transparent);
  border-top: 1px solid var(--wx-border);
  backdrop-filter: blur(14px);
}
.wx-consent[hidden] { display: none; }
.wx-consent__inner {
  max-width: var(--wx-w-main);
  margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--wx-s-4);
}
.wx-consent p {
  flex: 1 1 320px;
  font-size: var(--wx-t-xs);
  line-height: 1.5;
  color: var(--wx-fg-2);
  margin: 0;
}
.wx-consent a { color: var(--wx-primary); text-decoration: underline; }
.wx-consent__actions { display: flex; flex-wrap: wrap; gap: var(--wx-s-3); }
.wx-consent .wx-btn { padding: 0.62rem 1.3rem; font-size: var(--wx-t-xs); }

/* ==========================================================================
   14 — FORM + FUNNEL
   ========================================================================== */

.wx-form {
  border: 1px solid var(--wx-border);
  border-radius: var(--wx-r-lg);
  background: var(--wx-card);
  padding: var(--wx-s-8);
}
.wx-form > * + * { margin-top: var(--wx-s-5); }

.wx-field label {
  display: block;
  font-size: var(--wx-t-xs);
  font-weight: 600;
  color: var(--wx-fg-2);
  margin-bottom: var(--wx-s-2);
}
.wx-field input,
.wx-field select,
.wx-field textarea {
  width: 100%;
  padding: 0.86rem var(--wx-s-4);
  border: 1px solid var(--wx-border-strong);
  border-radius: var(--wx-r-md);
  background: var(--wx-well);
  color: var(--wx-fg);
  font-size: var(--wx-t-sm);
  transition: border-color var(--wx-dur-fast) var(--wx-ease),
              box-shadow   var(--wx-dur-fast) var(--wx-ease);
}
.wx-field input::placeholder { color: var(--wx-muted); }
.wx-field input:focus,
.wx-field select:focus,
.wx-field textarea:focus {
  border-color: var(--wx-primary);
  box-shadow: 0 0 0 3px var(--wx-tint-16);
  outline: none;
}
.wx-field__error {
  display: none;
  margin-top: var(--wx-s-2);
  font-size: var(--wx-t-xs);
  color: var(--wx-red);
}
.wx-field.is-invalid input,
.wx-field.is-invalid select { border-color: var(--wx-red); }
.wx-field.is-invalid .wx-field__error { display: block; }

/* Honeypot. Off-screen, not display:none, which some bots detect. */
.wx-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.wx-funnel { max-width: var(--wx-w-text); margin-inline: auto; }

.wx-progress {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wx-s-4);
  font-size: var(--wx-t-xs);
  font-weight: 600;
  color: var(--wx-muted);
  margin-bottom: var(--wx-s-3);
}
.wx-progress__bar {
  height: 4px;
  border-radius: var(--wx-r-pill);
  background: var(--wx-border);
  overflow: hidden;
  margin-bottom: var(--wx-s-12);
}
.wx-progress__fill {
  height: 100%; width: 0;
  background: var(--wx-primary);
  border-radius: var(--wx-r-pill);
  box-shadow: 0 0 14px var(--wx-primary);
  transition: width var(--wx-dur-slow) var(--wx-ease-out);
}

.wx-q__count {
  font-size: var(--wx-t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--wx-track-eyebrow);
  text-transform: uppercase;
  color: var(--wx-primary);
  margin-bottom: var(--wx-s-4);
}
.wx-q h2 { margin-bottom: var(--wx-s-4); }
.wx-q__help { font-size: var(--wx-t-sm); color: var(--wx-muted); margin-bottom: var(--wx-s-8); }

.wx-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 1fr));
  gap: var(--wx-s-4);
}
.wx-option {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--wx-s-4);
  min-height: 112px;
  padding: var(--wx-s-5);
  text-align: left;
  border: 1px solid var(--wx-border);
  border-radius: var(--wx-r-lg);
  background: var(--wx-card);
  color: var(--wx-fg);
  font-size: var(--wx-t-sm);
  font-weight: 600;
  transition:
    border-color var(--wx-dur-fast) var(--wx-ease),
    background   var(--wx-dur-fast) var(--wx-ease),
    box-shadow   var(--wx-dur-fast) var(--wx-ease),
    transform    var(--wx-dur-fast) var(--wx-ease);
}
.wx-option:hover {
  border-color: var(--wx-border-strong);
  background: var(--wx-card-2);
  transform: translateY(-2px);
}
.wx-option__icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--wx-r-sm);
  background: var(--wx-tint-16);
  color: var(--wx-primary);
  flex-shrink: 0;
}
.wx-option__icon svg { width: 17px; height: 17px; }

.wx-option[aria-pressed="true"] {
  border-color: var(--wx-primary);
  background: var(--wx-tint-10);
  box-shadow: var(--wx-glow-sm);
}
.wx-option[aria-pressed="true"] .wx-option__icon {
  background: var(--wx-primary);
  color: var(--wx-on-primary);
}
.wx-option__check {
  position: absolute; top: var(--wx-s-4); right: var(--wx-s-4);
  opacity: 0;
  color: var(--wx-primary);
  transition: opacity var(--wx-dur-fast) var(--wx-ease);
}
.wx-option[aria-pressed="true"] .wx-option__check { opacity: 1; }

.wx-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wx-s-4);
  margin-top: var(--wx-s-12);
}

.wx-outcome { text-align: center; }
.wx-outcome__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px;
  margin-bottom: var(--wx-s-6);
  border-radius: 50%;
  background: var(--wx-tint-16);
  border: 1px solid var(--wx-tint-28);
  color: var(--wx-primary);
  box-shadow: var(--wx-glow);
}

/* ==========================================================================
   15 — MODAL
   Any CTA with data-wx-open opens this, so a page can have the form once and
   still ask for the conversion a dozen times down the page.
   ========================================================================== */

.wx-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: var(--wx-gutter);
  background: color-mix(in oklch, #000 72%, transparent);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--wx-dur) var(--wx-ease);
}
.wx-modal.is-open { opacity: 1; pointer-events: auto; }
.wx-modal[hidden] { display: none; }

.wx-modal__panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: min(88vh, 900px);
  overflow-y: auto;
  padding: var(--wx-s-10) var(--wx-s-8) var(--wx-s-8);
  border: 1px solid var(--wx-border-strong);
  border-radius: var(--wx-r-lg);
  background: var(--wx-card);
  box-shadow: 0 30px 90px rgba(0,0,0,0.7),
              0 0 60px color-mix(in oklch, var(--wx-primary) 10%, transparent);
  transform: translateY(14px) scale(0.985);
  transition: transform var(--wx-dur) var(--wx-ease-out);
}
.wx-modal.is-open .wx-modal__panel { transform: none; }

.wx-modal__close {
  position: absolute;
  top: var(--wx-s-4);
  right: var(--wx-s-4);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--wx-border);
  border-radius: 50%;
  background: var(--wx-well);
  color: var(--wx-fg-2);
  transition: color var(--wx-dur-fast) var(--wx-ease),
              border-color var(--wx-dur-fast) var(--wx-ease);
}
.wx-modal__close:hover { color: var(--wx-primary); border-color: var(--wx-primary); }

/* Inside the modal the funnel needs no extra chrome. */
.wx-modal .wx-funnel { max-width: none; }
.wx-modal .wx-progress__bar { margin-bottom: var(--wx-s-8); }
.wx-modal .wx-nav { margin-top: var(--wx-s-8); }

body.wx-modal-open { overflow: hidden; }

/* ==========================================================================
   16 — SERVICES GRID
   Bigger, glowier cards for a "what we do" row. Distinct from wx-chain, which
   is a narrative sequence rather than a menu.
   ========================================================================== */

.wx-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: var(--wx-s-5);
}
.wx-service {
  position: relative;
  padding: var(--wx-s-8) var(--wx-s-6);
  border: 1px solid var(--wx-border);
  border-radius: var(--wx-r-lg);
  background:
    radial-gradient(ellipse 120% 70% at 50% -20%,
      color-mix(in oklch, var(--wx-primary) 7%, transparent), transparent 70%),
    var(--wx-card);
  transition: border-color var(--wx-dur) var(--wx-ease),
              box-shadow   var(--wx-dur) var(--wx-ease),
              transform    var(--wx-dur) var(--wx-ease);
}
.wx-service:hover {
  border-color: var(--wx-tint-50);
  box-shadow: 0 0 50px color-mix(in oklch, var(--wx-primary) 11%, transparent);
  transform: translateY(-3px);
}
.wx-service h3 { margin-block: var(--wx-s-5) var(--wx-s-3); }
.wx-service p { font-size: var(--wx-t-sm); line-height: 1.64; color: var(--wx-fg-2); }
.wx-service__tags {
  display: flex; flex-wrap: wrap; gap: var(--wx-s-2);
  margin-top: var(--wx-s-5);
}
.wx-service__tags span {
  padding: 3px 10px;
  border: 1px solid var(--wx-border-strong);
  border-radius: var(--wx-r-pill);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--wx-muted);
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.wx-center      { text-align: center; }
.wx-flex-center { display: flex; justify-content: center; }
.wx-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}