.fd-page{background:#fff;font-family:Poppins,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.fd-page a{color:#1E2A63;text-decoration:none}
.fd-page a:hover{color:#F6A821}
.fd-page *{box-sizing:border-box}
@keyframes fd-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fd-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* client logo carousel */
.fd-marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fd-track{display:flex;gap:16px;flex:none;will-change:transform}
/* Speed: 5/7 of the previous setting. A logo is on screen ~3.5-4.2s.
   A logo travels (container width + 190px) before it is gone, so the required
   speed grows with the container -- hence the steps below. Row A is 43 logos
   x 206px = 8858px per half, row B is 42 x 206px = 8652px.
   To retime after adding/removing logos, hold seconds-per-pixel constant:
   seconds = (logos-per-half x 206) / (8858 / current-duration). */
.fd-track--left{animation:fd-left 46s linear infinite}
.fd-track--right{animation:fd-right 45s linear infinite}
@container (min-width:600px){.fd-track--left{animation-duration:34s}.fd-track--right{animation-duration:32s}}
@container (min-width:900px){.fd-track--left{animation-duration:27s}.fd-track--right{animation-duration:25s}}
@container (min-width:1200px){.fd-track--left{animation-duration:20s}.fd-track--right{animation-duration:20s}}
@container (min-width:1600px){.fd-track--left{animation-duration:17s}.fd-track--right{animation-duration:15s}}
@container (min-width:2000px){.fd-track--left{animation-duration:13s}.fd-track--right{animation-duration:13s}}
@container (min-width:2600px){.fd-track--left{animation-duration:10s}.fd-track--right{animation-duration:10s}}
.fd-logo{flex:none;display:flex;align-items:center;justify-content:center;width:190px;height:80px;padding:0 14px;border-radius:12px}
.fd-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
a.fd-logo{transition:background .2s}
a.fd-logo:hover{background:#F7F8FC}
a.fd-logo:hover img{opacity:.75}
@media (prefers-reduced-motion:reduce){.fd-track{animation:none}.fd-marquee{overflow-x:auto}}
/* case rows + logo hover */
.fd-case{transition:transform .25s}
.fd-case:hover{transform:translateY(-4px)}
/* sticky step list states */
.fd-page [data-fd="step"] .fd-bar{background:#D5DCEE;transition:background .3s}
.fd-page [data-fd="step"].is-on .fd-bar{background:#1E2A63}
.fd-page [data-fd="step"] .fd-step-t{color:#8B94AE;transition:color .3s}
.fd-page [data-fd="step"].is-on .fd-step-t{color:#1E2A63}
.fd-page [data-fd="step"] .fd-step-d{overflow:hidden;max-height:0;opacity:0;transition:max-height .45s ease,opacity .35s ease}
.fd-page [data-fd="step"].is-on .fd-step-d{max-height:clamp(90px,16vh,150px);opacity:1}
/* the six mini-diagrams that crossfade in the right-hand column */
.fd-page [data-fd="stepimg"]{opacity:0;transform:translateY(10px) scale(.985);transform-origin:50% 50%;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.fd-page [data-fd="stepimg"].is-on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fd-page [data-fd="stepimg"]{transform:none!important}}
@container (max-width:880px){
  .fd-page [data-fd="frame"]{padding-bottom:clamp(22px,2.6cqw,34px)!important}
  .fd-page [data-fd="stage"]{grid-template-columns:minmax(0,1fr)!important;gap:clamp(16px,3.4cqw,26px)!important}
  .fd-page [data-fd="arrow"]{transform:rotate(90deg);margin:2px auto!important;justify-self:center!important}
  .fd-page [data-fd="tri"]{aspect-ratio:1 / 1!important;min-height:0!important;width:100%!important;max-width:280px!important;margin:0 auto!important;align-items:center!important}
  .fd-page [data-fd="trisvg"]{display:none!important}
  .fd-page [data-fd="tricircle"]{display:block!important}
  .fd-page [data-fd="tritext"]{width:min(74%,220px)!important;padding-bottom:0!important}
  .fd-page [data-fd="loop"]{height:auto!important;margin:22px 0 0!important;border:0!important}
  .fd-page [data-fd="loopline"],.fd-page [data-fd="loophead"]{display:none!important}
  .fd-page [data-fd="fb"]{position:static!important;transform:none!important;width:100%!important;max-width:none!important}
  .fd-page [data-fd="loopnote"]{display:flex!important}
  .fd-page [data-fd="stepwrap"]{display:none!important}
  .fd-page [data-fd="workcards"]{display:block!important}
}
@container (max-width:760px){
  .fd-page [data-fd="cmp-table"]{display:none!important}
  .fd-page [data-fd="cmp-cards"]{display:grid!important}
}
@container (max-width:640px){
  .fd-page [data-fd="citedwrap"]{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);justify-content:stretch!important}
  .fd-page [data-fd="citedwrap"] > div:last-child:nth-child(odd){grid-column:1 / -1;width:calc(50% - 7px);margin:0 auto}
}


/* ============================================================
   SEO Services — Hero video frame (Vidalytics embed)
   Page: /new-homepage-aug-2026/
   Paste into: Elementor › Site Settings › Custom CSS
               (or WPCode › Add Snippet › CSS)
   No change needed to the existing embed code.
   ============================================================ */

#vidalytics_embed_qpevmQpzT4GA9jwU {

  /* 1. LAYOUT FIX ------------------------------------------------
     The embed was rendering 588x441 instead of 588x331 — about
     110px of empty space sat under the player inside its own box,
     which pushed the hero taller and threw off the vertical
     alignment against the headline. The inline padding-top:56.25%
     already defines the 16:9 box, so zeroing the height stops the
     player's own markup from adding anything on top of it.        */
  height: 0 !important;

  /* 2. FRAME ---------------------------------------------------- */
  border-radius: 18px;
  overflow: hidden;
  background: #0D1436;            /* navy behind the player while it loads */
  isolation: isolate;

  /* 3. DEPTH + GOLD GLOW ---------------------------------------- */
  box-shadow:
    0 24px 60px -16px rgba(0, 0, 0, .65),      /* grounding shadow */
    0 0 90px -14px rgba(246, 168, 33, .45);    /* ambient gold glow */

  /* 4. BRAND THE PLAYER'S OWN UI --------------------------------
     Vidalytics exposes these as CSS variables on the embed div.
     Overriding them here recolours the play button, the autoplay
     overlay, the resume prompt and the end-screen CTA.            */
  --vid-colors-primary: #F6A821 !important;
  --vid-colors-primary-transparent: rgba(246, 168, 33, .85) !important;
  --vid-colors-play-button-primary-transparent: rgba(246, 168, 33, 1) !important;
  --vid-colors-play-button-secondary: #1E2A63 !important;
  --vid-colors-auto-play-primary-transparent: rgba(246, 168, 33, .8) !important;
  --vid-colors-auto-play-secondary: #1E2A63 !important;
  --vid-colors-resume-primary: #F6A821 !important;
  --vid-colors-redirect-primary: #F6A821 !important;
  --vid-colors-expire-primary: #F6A821 !important;
}

/* Gold gradient ring (mask trick — gradient borders aren't a thing
   in plain CSS, so this paints a 2px gradient and knocks the
   middle out). pointer-events:none so it never eats a click.      */
#vidalytics_embed_qpevmQpzT4GA9jwU::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(140deg, #FFDC96 0%, #F6A821 42%, #B8770F 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 6;
}

/* ------------------------------------------------------------------
   CONTROL BAR
   Vidalytics writes these colours as INLINE styles from JS, so
   !important is required — a normal rule loses to the inline value.
   The attribute selectors ([class*="…"]) are deliberate: the class
   names carry build hashes that change when Vidalytics updates.
   ------------------------------------------------------------------ */

/* Bar background: navy instead of the default #3974FF blue */
#vidalytics_embed_qpevmQpzT4GA9jwU [class*="ControlBarBlockClassic__wrapper"] {
  background-color: rgba(13, 20, 54, .8) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

/* Played portion of the scrubber → brand gold */
#vidalytics_embed_qpevmQpzT4GA9jwU [class*="ProgressLine__track"] {
  background-color: #F6A821 !important;
}

/* Remaining portion → soft white */
#vidalytics_embed_qpevmQpzT4GA9jwU [class*="ProgressLine__rail"] {
  background-color: rgba(255, 255, 255, .25) !important;
}

/* ------------------------------------------------------------------
   RESPONSIVE — dial the frame back so it doesn't dominate on phones
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  #vidalytics_embed_qpevmQpzT4GA9jwU {
    border-radius: 12px;
    box-shadow:
      0 14px 34px -14px rgba(0, 0, 0, .6),
      0 0 50px -14px rgba(246, 168, 33, .40);
  }
}

/* ------------------------------------------------------------------
   FULLSCREEN — drop the frame when the player takes over the screen.
   Kept as separate rules on purpose: browsers discard an entire
   selector list if they don't recognise one selector in it.
   ------------------------------------------------------------------ */
#vidalytics_embed_qpevmQpzT4GA9jwU:fullscreen {
  border-radius: 0 !important;
  box-shadow: none !important;
}
#vidalytics_embed_qpevmQpzT4GA9jwU:fullscreen::after { display: none !important; }

#vidalytics_embed_qpevmQpzT4GA9jwU:-webkit-full-screen {
  border-radius: 0 !important;
  box-shadow: none !important;
}
#vidalytics_embed_qpevmQpzT4GA9jwU:-webkit-full-screen::after { display: none !important; }


/* ==================================================================
   OPTIONAL — subtle lift on hover. Uncomment to enable.
   ==================================================================
#vidalytics_embed_qpevmQpzT4GA9jwU {
  transition: box-shadow .35s ease, transform .35s ease;
}
#vidalytics_embed_qpevmQpzT4GA9jwU:hover {
  transform: translateY(-3px);
  box-shadow:
    0 30px 70px -16px rgba(0, 0, 0, .70),
    0 0 110px -12px rgba(246, 168, 33, .60);
}
@media (prefers-reduced-motion: reduce) {
  #vidalytics_embed_qpevmQpzT4GA9jwU { transition: none; }
  #vidalytics_embed_qpevmQpzT4GA9jwU:hover { transform: none; }
}
*/

.fdc-clients{
  --fdc-gap:16px;        /* space between logos */
  --fdc-logo-w:190px;    /* logo slot width     */
  --fdc-logo-h:80px;     /* logo slot height    */
  --fdc-seconds:8;     /* seconds a logo stays on screen */
  container-type:inline-size;
  width:100%;
  background:#fff;
  overflow-x:clip;
  font-family:Poppins,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.fdc-clients *{box-sizing:border-box}
.fdc-sec{padding:clamp(44px,5cqw,64px) 0 clamp(40px,4.5cqw,56px);border-bottom:1px solid #EDF0F8}
.fdc-head{text-align:center;padding:0 max(20px,calc((100% - 1240px) / 2));margin-bottom:40px}
.fdc-title{font-family:Poppins,system-ui,sans-serif;font-weight:700;font-size:clamp(22px,2.6cqw,32px);line-height:1.3;color:#1E2A63;margin:0;letter-spacing:-.5px}
.fdc-title em{font-style:normal;color:#F6A821}
.fdc-rows{display:flex;flex-direction:column;gap:var(--fdc-gap)}

.fdc-marquee{
  display:flex;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.fdc-track{display:flex;gap:var(--fdc-gap);flex:none;will-change:transform}
.fdc-logo{flex:none;display:flex;align-items:center;justify-content:center;width:var(--fdc-logo-w);height:var(--fdc-logo-h);padding:0 14px;border-radius:12px}
.fdc-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
a.fdc-logo{transition:background .2s}
a.fdc-logo:hover{background:#F7F8FC}
a.fdc-logo:hover img{opacity:.75}

/* The animation only runs once the JS has cloned the row. Before that
   (and with JS off, or reduced motion) the row is a plain scrollable strip. */
.fdc-marquee:not(.is-ready){overflow-x:auto;scrollbar-width:none}
.fdc-marquee:not(.is-ready)::-webkit-scrollbar{display:none}
.fdc-marquee.is-ready .fdc-track{
  animation-name:fdc-left;animation-timing-function:linear;
  animation-iteration-count:infinite;animation-duration:40s;
}
.fdc-marquee.is-ready[data-fdc-dir="right"] .fdc-track{animation-name:fdc-right}

/* -50% minus half a gap = exactly one copy of the row, so the loop
   point is seamless rather than 8px off. */
@keyframes fdc-left{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - (var(--fdc-gap) / 2)))}
}
@keyframes fdc-right{
  from{transform:translateX(calc(-50% - (var(--fdc-gap) / 2)))}
  to{transform:translateX(0)}
}

/* Optional: uncomment to pause both rows while the cursor is over them.
.fdc-marquee:hover .fdc-track{animation-play-state:paused}
*/

@media (prefers-reduced-motion:reduce){
  .fdc-marquee.is-ready .fdc-track{animation:none}
  .fdc-marquee{overflow-x:auto}
}

.fd-rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:20px}
.fd-rcard{display:flex;flex-direction:column;background:#fff;border:1px dashed #C4CCE2;border-radius:18px;padding:clamp(20px,2.4cqw,24px);text-decoration:none;color:inherit;transition:border-color .25s,transform .25s,box-shadow .25s}
.fd-rcard:hover,.fd-rcard:focus-visible{border-color:#58CFF3;transform:translateY(-3px);box-shadow:0 10px 26px rgba(27,38,99,.07)}
.fd-rcard__media{border-radius:12px;overflow:hidden;background:repeating-linear-gradient(45deg,#F2F4FA 0 10px,#F7F8FC 10px 20px);margin-bottom:clamp(16px,1.8cqw,20px)}
.fd-rcard__media img{display:block;width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover}
.fd-rcard__media--empty{aspect-ratio:16 / 10}
.fd-rcard__title{font:700 clamp(17px,1.7cqw,19.5px)/1.35 Poppins,system-ui,sans-serif;color:#1E2A63;letter-spacing:-.3px;margin:0 0 10px}
.fd-rcard:hover .fd-rcard__title{color:#1E2A63}
.fd-rcard__excerpt{font:500 14.5px/1.55 Poppins,system-ui,sans-serif;color:#8B94AE;margin:0 0 16px}
.fd-rcard__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font:500 11.5px ui-monospace,Menlo,monospace;color:#A8B0C6;margin-top:auto;padding-top:14px;border-top:1px solid #EDF0F8}
.fd-rcard__more{flex:none;color:#8B94AE;transition:color .25s}
.fd-rcard:hover .fd-rcard__more{color:#1E2A63}
@media (prefers-reduced-motion:reduce){.fd-rcard{transition:none}.fd-rcard:hover{transform:none}}