/* ==========================================================================
   /industries/seo-for-professional-services: this page's own pictures
   (industries/seo/professional-services/*.blade.php). Loaded after ind-seox.css.
   Every rule is scoped to the page. Everything rests in its finished state
   without JS and under reduced motion; loops pause off screen (ind-wdp).
   ========================================================================== */

/* ---- the trade-off: a year of new briefs, stacked month by month ---- */
main[data-seo-page="professional-services"] .sxvp{--th:17px;--tg:4px;height:276px}
main[data-seo-page="professional-services"] .sxvp .sx-vs__tag{display:inline-flex;align-items:center;gap:9px;top:18px}
main[data-seo-page="professional-services"] .sxvp .sx-vs__tag--rent{left:24px}
main[data-seo-page="professional-services"] .sxvp .sx-vs__tag--own{right:24px}
main[data-seo-page="professional-services"] .sxvp-key{flex:0 0 auto;width:12px;height:14px;border-radius:2px;clip-path:polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,0 100%)}
main[data-seo-page="professional-services"] .sx-vs__tag--rent .sxvp-key{background:var(--coral)}
main[data-seo-page="professional-services"] .sx-vs__tag--own .sxvp-key{background:rgba(17,17,17,.78)}
main[data-seo-page="professional-services"] .sxvp-plot{position:absolute;left:28px;right:28px;top:68px;bottom:34px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;align-items:end;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:repeating-linear-gradient(0deg,transparent 0 calc(var(--th) + var(--tg) - 1px),rgba(255,255,255,.04) calc(var(--th) + var(--tg) - 1px) calc(var(--th) + var(--tg)))}
main[data-seo-page="professional-services"] .sxvp-col{position:relative;display:flex;flex-direction:column-reverse;gap:var(--tg);padding-bottom:var(--tg)}
main[data-seo-page="professional-services"] .sxvp-brief{position:relative;display:block;height:var(--th);border-radius:3px;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%);
  background:linear-gradient(currentColor,currentColor) 14% 32% / 50% 2px no-repeat,linear-gradient(currentColor,currentColor) 14% 70% / 30% 2px no-repeat,var(--tile)}
main[data-seo-page="professional-services"] .sxvp-brief::before{content:"";position:absolute;right:0;top:0;width:6px;height:6px;background:linear-gradient(45deg,rgba(0,0,0,.32) 50%,transparent 50%)}
main[data-seo-page="professional-services"] .sxvp-brief.is-ref{--tile:rgba(255,122,107,.2);color:rgba(255,122,107,.85);box-shadow:inset 0 0 0 1px var(--coral-line)}
main[data-seo-page="professional-services"] .sxvp-brief.is-seo{--tile:var(--gold);color:rgba(17,17,17,.42)}
main[data-seo-page="professional-services"] .sxvp-brief.is-gap{background:none;clip-path:none;border:1px dashed rgba(255,122,107,.5)}
main[data-seo-page="professional-services"] .sxvp-brief.is-gap::before{display:none}
main[data-seo-page="professional-services"] .sxvp-m{position:absolute;left:0;right:0;top:calc(100% + 10px);text-align:center;font:600 11px/1 var(--font-head);letter-spacing:.06em;color:var(--text-dim)}
/* the briefs land month by month, then the newest keeps arriving */
main[data-seo-page="professional-services"] .sxvp .sxvp-brief{transition:opacity .4s ease,transform .7s var(--ease);transition-delay:calc(var(--m) * .07s + var(--k) * .05s + .25s)}
html.el8-js main[data-seo-page="professional-services"] .sxvp:not(.is-in) .sxvp-brief{opacity:0;transform:translateY(-18px)}
main[data-seo-page="professional-services"] .sxvp.is-in .sxvp-brief.is-new{animation:sxvpNew 5s var(--ease) 2.4s infinite backwards}
@keyframes sxvpNew{0%{opacity:0;transform:translateY(-26px)}14%,100%{opacity:1;transform:none}}
main[data-seo-page="professional-services"] .sxvp.is-in .sxvp-brief.is-seo:not(.is-new){animation:sxvpSheen 5s ease infinite;animation-delay:calc(var(--m) * .09s + 2.2s)}
@keyframes sxvpSheen{0%,70%,100%{filter:none}80%{filter:brightness(1.22)}}

/* ---- approach pillar 3: a draft under compliance review ---- */
main[data-seo-page="professional-services"] .sxvp-desk{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;padding:16px 18px 18px;border-bottom:1px solid var(--edge);background:#0E1115}
main[data-seo-page="professional-services"] .sxvp-doc{position:relative;display:grid;gap:7px;align-content:start;padding:14px 16px 16px;border-radius:10px;background:#171B22;border:1px solid var(--edge-2);box-shadow:0 14px 26px -16px rgba(0,0,0,.9)}
main[data-seo-page="professional-services"] .sxvp-doc__t{display:block;width:58%;height:8px;margin-bottom:4px;border-radius:3px;background:rgba(255,255,255,.6)}
main[data-seo-page="professional-services"] .sxvp-doc__ln{position:relative;display:block;width:var(--w);height:6px;border-radius:3px;background:rgba(255,255,255,.16)}
main[data-seo-page="professional-services"] .sxvp-doc__ln.is-flag{background:rgba(79,191,160,.6);box-shadow:0 0 0 3px rgba(79,191,160,.13)}
main[data-seo-page="professional-services"] .sxvp-flag{position:absolute;left:calc(100% + 7px);top:50%;display:grid;place-items:center;width:18px;height:18px;margin-top:-9px;border-radius:5px;background:var(--teal-soft);color:var(--teal)}
main[data-seo-page="professional-services"] .sxvp-flag svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
main[data-seo-page="professional-services"] .sxvp-doc__scan{position:absolute;left:0;right:0;top:0;height:26px;border-radius:10px;background:linear-gradient(180deg,transparent,rgba(79,191,160,.18),transparent);opacity:0;pointer-events:none}
main[data-seo-page="professional-services"] .sxvp-seal{position:absolute;right:-12px;bottom:-14px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#0E1115;color:var(--teal);
  transform:rotate(-12deg);box-shadow:0 0 0 1px var(--teal-line),0 0 18px rgba(79,191,160,.32)}
main[data-seo-page="professional-services"] .sxvp-seal svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
main[data-seo-page="professional-services"] .sxvp-notes{display:grid;gap:9px;align-content:start;padding-top:34px}
main[data-seo-page="professional-services"] .sxvp-note{position:relative;display:flex;align-items:center;gap:8px;height:30px;padding:0 7px 0 6px;border-radius:9px;background:#171B22;border:1px solid var(--teal-line)}
main[data-seo-page="professional-services"] .sxvp-note::before{content:"";position:absolute;right:calc(100% + 1px);top:50%;width:16px;border-top:1px dashed var(--teal-line)}
main[data-seo-page="professional-services"] .sxvp-note__av{flex:0 0 auto;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:rgba(255,255,255,.09);color:var(--text-soft)}
main[data-seo-page="professional-services"] .sxvp-note__av svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
main[data-seo-page="professional-services"] .sxvp-note__txt{flex:1;display:grid;gap:4px;min-width:0}
main[data-seo-page="professional-services"] .sxvp-note__txt b{display:block;width:var(--w);height:4px;border-radius:2px;background:rgba(255,255,255,.22)}
main[data-seo-page="professional-services"] .sxvp-note__ok{flex:0 0 auto;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--teal);color:#0A1512}
main[data-seo-page="professional-services"] .sxvp-note__ok svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* the approval trail: draft, review, publish, joined by a dashed line */
main[data-seo-page="professional-services"] .sxvp-step{display:inline-flex;align-items:center;gap:11px}
main[data-seo-page="professional-services"] .sxvp-step > i{position:relative;flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--teal-line);background:var(--teal-soft);color:var(--teal)}
main[data-seo-page="professional-services"] .sxvp-step svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
main[data-seo-page="professional-services"] .sxvp-trail .wdp-panel__row:nth-child(2) .sxvp-step > i{border-color:var(--gold-line);background:var(--gold-soft);color:var(--gold)}
main[data-seo-page="professional-services"] .sxvp-trail .wdp-panel__row + .wdp-panel__row .sxvp-step > i::before{content:"";position:absolute;left:50%;bottom:calc(100% + 2px);height:20px;margin-left:-.75px;border-left:1.5px dashed rgba(255,255,255,.2)}
/* one pass of review every eight seconds: flags raised, notes clear them, the seal lands */
main[data-seo-page="professional-services"] :is(.wdp-vis.is-on,.wdp-chap__vis) .sxvp-doc__ln.is-flag{animation:sxvpFlagLn 8s ease infinite;animation-delay:calc(var(--f) * .5s - .5s)}
@keyframes sxvpFlagLn{0%,38%{background:rgba(255,122,107,.7);box-shadow:0 0 0 3px rgba(255,122,107,.15)}48%,100%{background:rgba(79,191,160,.6);box-shadow:0 0 0 3px rgba(79,191,160,.13)}}
main[data-seo-page="professional-services"] :is(.wdp-vis.is-on,.wdp-chap__vis) .sxvp-flag{animation:sxvpFlag 8s ease infinite;animation-delay:inherit}
@keyframes sxvpFlag{0%{background:var(--coral-soft);color:var(--coral);transform:scale(.4)}6%,38%{background:var(--coral-soft);color:var(--coral);transform:none}48%,100%{background:var(--teal-soft);color:var(--teal);transform:none}}
main[data-seo-page="professional-services"] :is(.wdp-vis.is-on,.wdp-chap__vis) .sxvp-doc__scan{animation:sxvpScan 8s ease infinite}
@keyframes sxvpScan{0%,14%{opacity:0;transform:translateY(0)}18%{opacity:1}44%{opacity:1;transform:translateY(110px)}50%,100%{opacity:0;transform:translateY(110px)}}
main[data-seo-page="professional-services"] :is(.wdp-vis.is-on,.wdp-chap__vis) .sxvp-note{animation:sxvpNote 8s ease infinite;animation-delay:calc(var(--n) * .5s - .5s)}
@keyframes sxvpNote{0%,14%{opacity:0;transform:translateX(10px);border-color:var(--coral-line)}22%,38%{opacity:1;transform:none;border-color:var(--coral-line)}48%,100%{opacity:1;transform:none;border-color:var(--teal-line)}}
main[data-seo-page="professional-services"] :is(.wdp-vis.is-on,.wdp-chap__vis) .sxvp-note__ok{animation:sxvpOk 8s var(--ease) infinite;animation-delay:inherit}
@keyframes sxvpOk{0%,40%{transform:scale(0)}48%,100%{transform:none}}
main[data-seo-page="professional-services"] :is(.wdp-vis.is-on,.wdp-chap__vis) .sxvp-seal{animation:sxvpSeal 8s var(--ease) infinite}
@keyframes sxvpSeal{0%,56%{opacity:0;transform:rotate(-12deg) scale(1.7)}62%{opacity:1;transform:rotate(-12deg) scale(.92)}66%,93%{opacity:1;transform:rotate(-12deg)}100%{opacity:0;transform:rotate(-12deg)}}
main[data-seo-page="professional-services"] :is(.wdp-vis.is-on,.wdp-chap__vis) .sxvp-step > i{animation:sxvpPing 8s ease infinite}
main[data-seo-page="professional-services"] :is(.wdp-vis.is-on,.wdp-chap__vis) .wdp-panel__row:nth-child(2) .sxvp-step > i{animation-delay:1.8s}
main[data-seo-page="professional-services"] :is(.wdp-vis.is-on,.wdp-chap__vis) .wdp-panel__row:nth-child(3) .sxvp-step > i{animation-delay:4.9s}
@keyframes sxvpPing{0%{box-shadow:0 0 0 0 rgba(79,191,160,.55)}12%,100%{box-shadow:0 0 0 9px rgba(79,191,160,0)}}

@media (max-width:700px){
  main[data-seo-page="professional-services"] .sxvp{--th:12px;--tg:3px;height:226px}
  main[data-seo-page="professional-services"] .sxvp .sx-vs__tag{top:12px;gap:7px}
  main[data-seo-page="professional-services"] .sxvp .sx-vs__tag--rent{left:12px}
  main[data-seo-page="professional-services"] .sxvp .sx-vs__tag--own{right:12px}
  main[data-seo-page="professional-services"] .sxvp-key{width:9px;height:11px}
  main[data-seo-page="professional-services"] .sxvp-plot{left:14px;right:14px;top:52px;bottom:28px;gap:5px}
  main[data-seo-page="professional-services"] .sxvp-brief{clip-path:polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,0 100%);
    background:linear-gradient(currentColor,currentColor) 18% 30% / 52% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 18% 72% / 30% 1.5px no-repeat,var(--tile)}
  main[data-seo-page="professional-services"] .sxvp-brief::before{width:4px;height:4px}
  main[data-seo-page="professional-services"] .sxvp-brief.is-gap{background:none}
  main[data-seo-page="professional-services"] .sxvp-m{top:calc(100% + 8px);font-size:10px}
  /* the phone stage is short: like the other pillars it drops the picture above the panel and keeps the trail */
  main[data-seo-page="professional-services"] .sx-appr .wdp-story__stage .sxvp-desk{display:none}
  main[data-seo-page="professional-services"] .sxvp-desk{gap:12px;padding:12px 12px 14px}
  main[data-seo-page="professional-services"] .sxvp-doc{gap:6px;padding:11px 12px 12px}
}