/* clx-fnl-funnel — "Growth Across the Full Funnel" section for
 * /digital-marketing/. Source: Claude Design handoff.
 * Pure CSS animations, prefers-reduced-motion handled, all classes
 * prefixed .clx-fnl- so they don't collide with anything else.
 *
 * Enqueued via functions.php on /digital-marketing/ only. The
 * markup lives in clx-fnl-funnel.php and renders inside the
 * [clx_service_timeline variant=dm] shortcode handler.
 */

/* Tighten the gap between the heading-section (de93c3d, "Growth Across
   the Full Funnel" + intro) and the visual-section (6fdd655, the
   funnel diagram + cards). Both Elementor sections inherit the default
   .clx-tp-section padding (56px top+bottom) from site-wide.css; on DM
   we want them flush against each other AND flush against whatever
   follows. The funnel section's own .clx-fnl-section already provides
   96px bottom breathing room, so the Elementor wrapper's bottom
   padding is redundant. */
body.page-digital-marketing .elementor-element[data-id="de93c3d"] {
  padding-bottom: 0 !important;
}
body.page-digital-marketing .elementor-element[data-id="6fdd655"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Tokens scoped to this section */
.clx-fnl-section {
  --clx-fnl-ember: #FA4900;
  --clx-fnl-ink: #142533;
  --clx-fnl-body: #3D5266;
  --clx-fnl-muted: #7A8B9A;
  --clx-fnl-line: #E1E6EB;
  --clx-fnl-paper: #F4F6F8;
  --clx-fnl-mist: #FFF6F1;
  --clx-fnl-bg: #FFFFFF;
  --clx-fnl-loop: 18s;

  width: 100%;
  background: var(--clx-fnl-bg);
  font-family: 'DM Sans', sans-serif;
  color: var(--clx-fnl-ink);
  -webkit-font-smoothing: antialiased;
  /* Top padding zeroed so the diagram sits flush against the heading +
     intro section above. Bottom kept tight — the next section's own
     top padding (56px) carries the inter-section breathing room. */
  padding: 0 20px 0;
  box-sizing: border-box;
}
.clx-fnl-section *,
.clx-fnl-section *::before,
.clx-fnl-section *::after { box-sizing: border-box; }

.clx-fnl-inner { max-width: 1140px; margin: 0 auto; }

/* ---------- Header ---------- */
.clx-fnl-head { max-width: 820px; margin: 0 0 36px; }
.clx-fnl-kicker {
  font-family: 'Cabin', sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--clx-fnl-ember); margin: 0 0 10px;
}
.clx-fnl-title {
  font-family: 'Cabin', sans-serif; font-weight: 700;
  font-size: 38px; line-height: 1.18; letter-spacing: -.2px;
  color: var(--clx-fnl-ink); margin: 0 0 14px;
}
.clx-fnl-sub {
  font-size: 16px; line-height: 1.6; color: var(--clx-fnl-body);
  margin: 0; max-width: 780px;
}

/* ---------- Belt diagram container ---------- */
.clx-fnl-belt {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  /* paint isolation: the SVG repaints on every animation frame, isolate
     so the rest of the page layout is not invalidated */
  contain: layout paint;
}
.clx-fnl-belt-svg { width: 100%; height: auto; display: block; }

/* Two SVG variants: horizontal (desktop/tablet) + vertical (mobile).
   Default: show horizontal, hide vertical. Mobile rule below swaps. */
.clx-fnl-belt-v { display: none; }

/* Performance: hint compositor about properties that animate. Scoped
   to children of .clx-fnl-belt so we don't promote anything outside
   the diagram. */
.clx-fnl-belt [class*="clx-fnl-pillar-fill"],
.clx-fnl-belt [class*="clx-fnl-num-fill"],
.clx-fnl-belt [class*="clx-fnl-num-on"],
.clx-fnl-belt [class*="clx-fnl-svc-fill"],
.clx-fnl-belt .clx-fnl-belt-active,
.clx-fnl-belt .clx-fnl-cover-band {
  will-change: opacity, fill-opacity, stroke-dashoffset;
}

/* IntersectionObserver gate: when not in viewport, pause every
   animation under the belt. This frees the GPU for the visible
   section the user is actually looking at. */
.clx-fnl-belt[data-active="false"] [class*="clx-fnl-"] {
  animation-play-state: paused !important;
}

/* belt baseline + active */
.clx-fnl-belt-base { stroke: var(--clx-fnl-line); stroke-width: 1.4; }
.clx-fnl-belt-active {
  stroke: var(--clx-fnl-ember); stroke-width: 1.4;
  stroke-dasharray: 880; stroke-dashoffset: 880;
  animation: clxFnlBelt var(--clx-fnl-loop) cubic-bezier(.4, 0, .4, 1) infinite;
}
@keyframes clxFnlBelt {
  0%       { stroke-dashoffset: 880; opacity: 0; }
  3%       { opacity: .85; }
  60%      { stroke-dashoffset: 0; opacity: .85; }
  82%      { stroke-dashoffset: 0; opacity: .85; }
  90%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* arrow guide on top */
.clx-fnl-arr-line { stroke: var(--clx-fnl-muted); stroke-width: 1; fill: none; stroke-dasharray: 2 4; opacity: .6; }
.clx-fnl-arr-head { fill: var(--clx-fnl-muted); opacity: .7; }
.clx-fnl-arr-label {
  font-family: 'Cabin', sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: 1.1px;
  fill: var(--clx-fnl-muted); text-transform: uppercase;
}

/* stage pillars */
.clx-fnl-pillar-bg { fill: #fff; stroke: var(--clx-fnl-line); stroke-width: 1.2; }
.clx-fnl-pillar-fill {
  fill: var(--clx-fnl-ember); fill-opacity: 0;
  animation: clxFnlPillar var(--clx-fnl-loop) ease-in-out infinite;
}
@keyframes clxFnlPillar {
  0%, 8%    { fill-opacity: 0; }
  14%, 22%  { fill-opacity: .10; }
  30%, 100% { fill-opacity: 0; }
}
.clx-fnl-p2 .clx-fnl-pillar-fill { animation-delay: calc(var(--clx-fnl-loop) * .06); }
.clx-fnl-p3 .clx-fnl-pillar-fill { animation-delay: calc(var(--clx-fnl-loop) * .12); }
.clx-fnl-p4 .clx-fnl-pillar-fill { animation-delay: calc(var(--clx-fnl-loop) * .18); }
.clx-fnl-p5 .clx-fnl-pillar-fill { animation-delay: calc(var(--clx-fnl-loop) * .24); }

/* number puck */
.clx-fnl-num-ring { fill: #fff; stroke: var(--clx-fnl-ink); stroke-width: 1.3; }
.clx-fnl-num-fill {
  fill: var(--clx-fnl-ember); fill-opacity: 0;
  animation: clxFnlNum var(--clx-fnl-loop) ease-in-out infinite;
}
@keyframes clxFnlNum {
  0%, 8%    { fill-opacity: 0; }
  14%, 28%  { fill-opacity: 1; }
  34%, 100% { fill-opacity: 0; }
}
.clx-fnl-p2 .clx-fnl-num-fill { animation-delay: calc(var(--clx-fnl-loop) * .06); }
.clx-fnl-p3 .clx-fnl-num-fill { animation-delay: calc(var(--clx-fnl-loop) * .12); }
.clx-fnl-p4 .clx-fnl-num-fill { animation-delay: calc(var(--clx-fnl-loop) * .18); }
.clx-fnl-p5 .clx-fnl-num-fill { animation-delay: calc(var(--clx-fnl-loop) * .24); }

.clx-fnl-num-label {
  font-family: 'Cabin', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .3px;
  fill: var(--clx-fnl-ink); text-anchor: middle;
}
.clx-fnl-num-on {
  fill: #fff; opacity: 0;
  animation: clxFnlNumOn var(--clx-fnl-loop) ease-in-out infinite;
}
@keyframes clxFnlNumOn {
  0%, 8%    { opacity: 0; }
  14%, 28%  { opacity: 1; }
  34%, 100% { opacity: 0; }
}
.clx-fnl-p2 .clx-fnl-num-on { animation-delay: calc(var(--clx-fnl-loop) * .06); }
.clx-fnl-p3 .clx-fnl-num-on { animation-delay: calc(var(--clx-fnl-loop) * .12); }
.clx-fnl-p4 .clx-fnl-num-on { animation-delay: calc(var(--clx-fnl-loop) * .18); }
.clx-fnl-p5 .clx-fnl-num-on { animation-delay: calc(var(--clx-fnl-loop) * .24); }

/* stage name + position chip + outcome */
.clx-fnl-stage-name {
  font-family: 'Cabin', sans-serif; font-weight: 700;
  font-size: 15px; letter-spacing: .3px;
  fill: var(--clx-fnl-ink); text-anchor: middle;
}
.clx-fnl-pos-rect { fill: var(--clx-fnl-paper); stroke: var(--clx-fnl-line); stroke-width: 1; }
.clx-fnl-pos-label {
  font-family: 'Cabin', sans-serif; font-weight: 700;
  font-size: 10px; letter-spacing: 1px;
  fill: var(--clx-fnl-muted); text-anchor: middle; text-transform: uppercase;
}
.clx-fnl-outcome-label {
  font-family: 'Cabin', sans-serif; font-weight: 700;
  font-size: 10.5px; letter-spacing: 1px;
  fill: var(--clx-fnl-muted); text-anchor: middle; text-transform: uppercase;
}
.clx-fnl-outcome-val {
  font-family: 'DM Sans', sans-serif; font-size: 12px;
  fill: var(--clx-fnl-ink); text-anchor: middle;
}
.clx-fnl-blurb { font-family: 'DM Sans', sans-serif; font-size: 11px; fill: var(--clx-fnl-body); text-anchor: middle; }

/* service chips inside pillars */
.clx-fnl-svc-rect { fill: var(--clx-fnl-paper); stroke: var(--clx-fnl-line); stroke-width: .8; }
.clx-fnl-svc-fill {
  fill: var(--clx-fnl-ember); fill-opacity: 0;
  animation: clxFnlSvc var(--clx-fnl-loop) ease-out infinite;
}
@keyframes clxFnlSvc {
  0%, 10%   { fill-opacity: 0; }
  16%, 24%  { fill-opacity: .20; }
  32%, 100% { fill-opacity: 0; }
}
.clx-fnl-svc-label { font-family: 'DM Sans', sans-serif; font-size: 11px; fill: var(--clx-fnl-ink); text-anchor: middle; }
.clx-fnl-p2 .clx-fnl-svc-fill { animation-delay: calc(var(--clx-fnl-loop) * .06); }
.clx-fnl-p3 .clx-fnl-svc-fill { animation-delay: calc(var(--clx-fnl-loop) * .12); }
.clx-fnl-p4 .clx-fnl-svc-fill { animation-delay: calc(var(--clx-fnl-loop) * .18); }
.clx-fnl-p5 .clx-fnl-svc-fill { animation-delay: calc(var(--clx-fnl-loop) * .24); }
.clx-fnl-svc-2 { animation-delay: calc(var(--clx-fnl-loop) * .005); }
.clx-fnl-svc-3 { animation-delay: calc(var(--clx-fnl-loop) * .010); }
.clx-fnl-p2 .clx-fnl-svc-2 { animation-delay: calc(var(--clx-fnl-loop) * .065); }
.clx-fnl-p2 .clx-fnl-svc-3 { animation-delay: calc(var(--clx-fnl-loop) * .070); }
.clx-fnl-p3 .clx-fnl-svc-2 { animation-delay: calc(var(--clx-fnl-loop) * .125); }
.clx-fnl-p3 .clx-fnl-svc-3 { animation-delay: calc(var(--clx-fnl-loop) * .130); }
.clx-fnl-p4 .clx-fnl-svc-2 { animation-delay: calc(var(--clx-fnl-loop) * .185); }
.clx-fnl-p4 .clx-fnl-svc-3 { animation-delay: calc(var(--clx-fnl-loop) * .190); }
.clx-fnl-p5 .clx-fnl-svc-2 { animation-delay: calc(var(--clx-fnl-loop) * .245); }
.clx-fnl-p5 .clx-fnl-svc-3 { animation-delay: calc(var(--clx-fnl-loop) * .250); }

/* coverage band — continuous ember underline beneath all 5 pillars.
   Line length is x2-x1 = 1035-65 = 970; dasharray matches so the
   wipe-in completes in sync with the box highlight sequence. */
.clx-fnl-cover-band {
  stroke: var(--clx-fnl-ember); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 970; stroke-dashoffset: 970;
  animation: clxFnlCover var(--clx-fnl-loop) cubic-bezier(.45, 0, .4, 1) infinite;
}
@keyframes clxFnlCover {
  0%       { stroke-dashoffset: 970; opacity: 0; }
  3%       { opacity: 1; }
  62%      { stroke-dashoffset: 0; opacity: 1; }
  86%      { stroke-dashoffset: 0; opacity: 1; }
  92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.clx-fnl-cover-label {
  font-family: 'Cabin', sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: 1.1px;
  fill: var(--clx-fnl-ember); text-transform: uppercase;
}

/* loop badge — small ember pill saying advocacy feeds awareness */
.clx-fnl-loop-badge-rect { fill: #fff; stroke: var(--clx-fnl-ember); stroke-width: 1.4; }
.clx-fnl-loop-badge-label {
  font-family: 'Cabin', sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: 1px;
  fill: var(--clx-fnl-ember); text-transform: uppercase; text-anchor: middle;
}
.clx-fnl-loop-badge-icon { fill: var(--clx-fnl-ember); }
.clx-fnl-loop-sub { font-family: 'DM Sans', sans-serif; font-size: 11px; fill: var(--clx-fnl-muted); text-anchor: middle; }

/* ---------- Stage cards grid (below belt) ----------
   Reuses .clx-process-step from homepage.css (the Kaizen "Secure The
   Success Of Your Project" 8-card grid). Override the parent grid
   only — the cards themselves inherit homepage chrome (number
   watermark, // ember prefix, white card with 20px radius). The
   homepage default is 4-col for 8 cards; the funnel needs 5-col for
   5 cards. Mobile + tablet break to 2-col / 1-col same as homepage. */
/* Anonymous case-study testimonials — mirrors the partnership page's
   "Technology Partnership Impact Delivered" pattern (gray panel, 3
   stacked cards, quote + role on left, big ember stat + impact line
   on right) but no photo column since these are anonymized. */
.clx-fnl-impact-stack {
  margin-top: 36px;
  background: #F8F8F8;
  border-radius: 20px;
  overflow: hidden;
}
.clx-fnl-impact-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 48px;
  border-bottom: 1px solid #E1E6EB;
  /* Center the quote column and result column on their shared
     vertical midline so quote text and stat number sit aligned. */
  align-items: center;
}
.clx-fnl-impact-card:last-child { border-bottom: 0; }

/* Quote column — mirrors partnership testimonial typography exactly.
   Two <p> children both forced display:inline so the SVG quote graphic
   and italic body text flow as one continuous line (same trick used
   by site-wide.css line 3968 for partnership/our-team/culture-and-
   diversity). Font-family is INHERITED from the page default so it
   matches partnership exactly — no font-family override here. */
.clx-fnl-impact-quote { display: block; }
.clx-fnl-impact-quote > p:has(img.inv-comma),
.clx-fnl-impact-quote > p.clx-fnl-impact-text {
  display: inline;
  margin: 0;
}
.clx-fnl-impact-quote img.inv-comma {
  display: inline-block;
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin: 0 6px 0 0;
}
.clx-fnl-impact-text,
.clx-fnl-impact-text em,
.clx-fnl-impact-text i {
  font-size: 18px;
  line-height: 1.6;
  color: #7A7A7A;
}
.clx-fnl-impact-meta {
  display: block !important;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  color: #7A7A7A;
  margin: 36px 0 0 !important;
  font-family: 'DM Sans', sans-serif;
}
.clx-fnl-impact-meta strong {
  color: #1C1E21;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}
.clx-fnl-impact-at { color: #ff6a1c; font-weight: 700; padding: 0 2px; }

/* Stat + impact column. Drop cap on the impact paragraph mirrors the
   partnership pattern (.clx-impact-stat-N first letter). */
.clx-fnl-impact-result { display: flex; flex-direction: column; justify-content: center; }
.clx-fnl-impact-num {
  font-family: 'Cabin', sans-serif;
  line-height: 1;
  margin: 0 0 22px;
  display: flex;
  align-items: baseline;
}
.clx-fnl-impact-num-val {
  font-weight: 700;
  font-size: 5em;
  color: var(--clx-fnl-ember);
  letter-spacing: -2px;
}
.clx-fnl-impact-num-unit {
  font-weight: 700;
  font-size: 3em;
  color: var(--clx-fnl-ink);
  margin-left: 4px;
  letter-spacing: -1px;
}
.clx-fnl-impact-line {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--clx-fnl-body);
  margin: 0;
}
.clx-fnl-impact-line::first-letter {
  font-size: 2.5rem;
  color: var(--clx-fnl-ember);
  font-weight: 700;
  line-height: 1;
  padding-right: 2px;
  vertical-align: -2px;
}

/* Mobile collapse */
@media (max-width: 720px) {
  .clx-fnl-impact-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 24px;
  }
  .clx-fnl-impact-text { font-size: 15px; line-height: 1.6; }
  .clx-fnl-impact-num-val { font-size: 4em; }
  .clx-fnl-impact-num-unit { font-size: 2.4em; }
  .clx-fnl-impact-line { font-size: 14.5px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
  .clx-fnl-section { padding: 0 20px 0; }
  .clx-fnl-title { font-size: 32px; }
}
@media (max-width: 720px) {
  .clx-fnl-section { padding: 0 20px 0; }
  .clx-fnl-title { font-size: 26px; }
  .clx-fnl-sub { font-size: 14.5px; }
  .clx-fnl-belt { padding: 14px; }
}

/* Mobile breakpoint: swap horizontal SVG out for the vertical variant.
   Vertical viewBox is 360×1100, so at a 360 CSS-px wide phone the SVG
   renders at native scale and all source font-sizes (10–15px) render
   legibly without any per-text size bumps.
   Animations play on the vertical variant too — the IntersectionObserver
   gate (data-active toggle) handles off-screen perf, so we don't need
   to additionally freeze on mobile. */
@media (max-width: 640px) {
  .clx-fnl-belt-h { display: none; }
  .clx-fnl-belt-v { display: block; }
}

/* ---------- Reduced motion / data ----------
   Both queries pin the diagram to the rest state (all 5 lit at low
   opacity, belt + coverage band drawn). Reduced-data is honored too
   so we don't burn battery on tab/save-data devices. */
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  .clx-fnl-section [class*="clx-fnl-"] {
    animation: none !important;
    transform: none !important;
  }
  .clx-fnl-belt-active,
  .clx-fnl-cover-band {
    stroke-dashoffset: 0 !important; opacity: 1 !important;
  }
  .clx-fnl-pillar-fill,
  .clx-fnl-svc-fill { fill-opacity: .10 !important; }
  .clx-fnl-num-fill { fill-opacity: 1 !important; }
  .clx-fnl-num-on { opacity: 1 !important; }
}