/* ============================================================================
   Pioneer Digital Solutions — motion layer v2.17.1.1
   "The Pioneer Trail": one gold path (the arrow from the logo) that connects
   Found -> Trusted -> Enquiry across the site.

   HOW THIS FILE WORKS
   1. Everything above the "ANIMATION" marker is static layout. The default,
      un-animated styling of every part is the FINISHED composition, so visitors
      with reduced motion, a user pause, or no JavaScript see a complete design.
   2. Everything below the marker is wrapped for you at build time in
      @media (prefers-reduced-motion:no-preference) and prefixed with
      html[data-motion="on"]:root.
   3. pds-motion.js only toggles state (is-in / is-off / data-motion). No library.
   Timing language: ease-out-expo for arrivals (.55-.9s), spring for small pops,
   ~0.12-0.15s stagger. Idle loops are desktop-only and pause off-screen.
   ========================================================================== */

:root {
  --pm-ease: cubic-bezier(.22, 1, .36, 1);
  --pm-spring: cubic-bezier(.34, 1.56, .64, 1);
  --pm-soft: cubic-bezier(.45, 0, .2, 1);
}

/* ---- Shared parts: the default state is the finished state ---------------- */
.pm-svg { display: block; width: 100%; height: auto; }
.pm-svg text { font-family: var(--font-sans, system-ui, sans-serif); }
.m { transform-box: fill-box; transform-origin: 50% 50%; }
.m-gx { transform-origin: 0 50%; }
.m-gy { transform-origin: 50% 100%; }
.m-draw { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.m-ring, .m-flow, .m-typing, .wb-cursor { opacity: 0; }

.visual-panel svg.pm-svg { background: var(--cloud); }
.visual-panel--wide svg.pm-svg { height: 100%; }
.service-hero-art { position: relative; }
.service-hero-art svg.pm-svg { height: auto; }

/* ---- Pause / play control ------------------------------------------------- */
.pm-toggle {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: .3rem .85rem;
  border: 1px solid var(--fog); border-radius: var(--r-full, 999px); background: rgba(255,255,255,.94);
  color: var(--navy); font: 700 .74rem/1.1 var(--font-sans, system-ui); cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.pm-toggle[hidden] { display: none; }
.pm-toggle:hover { border-color: var(--blue); background: #fff; }
.pm-toggle:focus-visible { outline: 3px solid var(--blue-lt, #2A5FA8); outline-offset: 3px; }
.pm-toggle svg { width: 12px; height: 12px; flex: 0 0 12px; }
.pm-toggle .i-play, .pm-toggle .t-play { display: none; }
html[data-motion="paused"] .pm-toggle .i-play, html[data-motion="paused"] .pm-toggle .t-play { display: inline-block; }
html[data-motion="paused"] .pm-toggle .i-pause, html[data-motion="paused"] .pm-toggle .t-pause { display: none; }
.pm-toggle--foot { min-height: 32px; padding: .2rem .35rem; border: 0; border-radius: 4px; background: transparent;
  color: #a9b8cd; font-weight: 600; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pm-toggle--foot:hover { background: transparent; color: #fff; }
.pm-toggle--foot:focus-visible { outline-color: #7FDDB7; }
.service-hero-art .pm-toggle:not([hidden]) { display: flex; margin: .65rem 0 0 auto; }
.pm-tools { display: flex; justify-content: center; margin-top: 1.25rem; }

/* ---- Home hero: the journey stage ---------------------------------------- */
.hero-visual { flex-direction: column; align-items: center; }
.hero-mockup .mockup-browser { position: relative; z-index: 1; }
.hero-mockup .fcard { z-index: 2; }
.hero-trail { position: absolute; z-index: 0; pointer-events: none; overflow: visible;
  left: -46px; top: -44px; width: calc(100% + 92px); max-width: none; height: calc(100% + 88px); }
.hero-trail .ht-line { fill: none; stroke: url(#htg); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; opacity: .9; }
.hero-trail .ht-head { fill: none; stroke: var(--gold); stroke-width: 11; stroke-linecap: round; opacity: 0; }
.hero-trail .ht-flag { fill: var(--gold); }
.hero-search { position: absolute; z-index: 3; left: 7%; bottom: -27px; display: flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem .55rem .8rem; background: #fff; border: 1px solid var(--fog); border-radius: var(--r-full, 999px);
  box-shadow: var(--sh-lg); font-size: .78rem; font-weight: 600; color: var(--navy); white-space: nowrap; }
.hero-search svg { width: 15px; height: 15px; color: var(--blue); flex: 0 0 15px; }
.hs-text { display: inline-block; }
.hs-caret { display: inline-block; width: 2px; height: 1em; margin-left: -.35rem; background: var(--blue); opacity: 0; }
@media (max-width: 640px) {
  .hero-trail, .hero-search { display: none; }
}

/* v2.17.4: put the homepage illustration in view before the supporting copy
   and CTAs on stacked layouts. Desktop keeps its existing two-column layout. */
@media (max-width: 1024px) {
  .hero .hero-inner { padding-block: 1.25rem 2rem; }
  .hero .hero-content > .hero-sub { order: 2; margin-bottom: 1.25rem; }
  .hero .hero-content > .hero-actions { order: 3; }
  .hero .hero-content > .hero-trust { order: 4; margin-top: 1.25rem; }
  .hero .hero-visual { order: 1; padding-top: 2.5rem; padding-bottom: 3.5rem; }
  .hero .hero-sticker { top: .25rem; }
}
@media (max-width: 640px) {
  .hero .hero-inner { padding-top: 1rem; }
  .hero .hero-h1 { margin-bottom: .75rem; }
  .hero .hero-visual { padding-top: 1.5rem; padding-bottom: 1.75rem; }
  .hero .hero-sticker { top: 0; }
}

/* ---- Trail mark (page heroes + final call to action) --------------------- */
.trail-mark { display: block; width: 188px; height: auto; margin: 0 auto 1.1rem; overflow: visible; }
.trail-mark .tm-line { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.trail-mark .tm-n1 { fill: var(--blue); } .trail-mark .tm-n2 { fill: var(--green); } .trail-mark .tm-n3 { fill: var(--gold); }
.trail-mark .tm-flag { fill: var(--gold); }
.trail-mark--light .tm-n1 { fill: #fff; } .trail-mark--light .tm-n2 { fill: #7FDDB7; } .trail-mark--light .tm-n3 { fill: #F6C77A; }
.trail-mark--light .tm-flag { fill: #F6C77A; }

/* ---- "How we work": scroll-linked trail ---------------------------------- */
.process-track::before { left: 10%; right: 10%; }
.process-bubble { position: relative; }
.process-conn { display: block; position: absolute; top: 27px; left: calc(50% + 34px); width: calc(100% - 68px); height: 2px; pointer-events: none; }
.process-conn::before { content: ''; position: absolute; inset: 0; border-radius: 2px; background: var(--fog); }
.process-conn::after { content: ''; position: absolute; inset: 0; border-radius: 2px; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue), var(--green)); transform: scaleX(var(--seg, 1)); }
@media (max-width: 1024px) {
  .process-conn { top: 62px; left: 27px; width: 2px; height: calc(100% - 68px + 1.25rem); }
  .process-conn::after { transform-origin: 50% 0; background: linear-gradient(180deg, var(--blue), var(--green)); transform: scaleY(var(--seg, 1)); }
}
/* Only when the controller is running does the bubble show a "not reached yet" state. */
.process-track.is-armed .process-bubble { transition: background-color .35s, box-shadow .35s, transform .35s var(--pm-spring); }
.process-track.is-armed .process-step:not(.is-reached) .process-bubble { background: #fff; box-shadow: inset 0 0 0 2px var(--fog); }
.process-track.is-armed .process-step:not(.is-reached) .process-n { color: var(--blue); }
.process-track.is-armed .process-step:not(.is-reached) .process-label { opacity: .72; }
.process-track.is-armed .process-label { transition: opacity .35s; }

/* ---- Service pages: steps share the same trail --------------------------- */
.service-step { position: relative; overflow: hidden; }
.service-step::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue), var(--green) 65%, var(--gold)); }

/* ---- Footer / print ------------------------------------------------------- */
.footer-bottom-links .pm-toggle--foot { vertical-align: baseline; }
@media print { .pm-toggle, .hero-trail, .hero-search, .trail-mark { display: none !important; } }

/* ---- Pausing rules (apply to any scene while it is not visible / in use) --- */
html[data-pm="js"] .pm-scene:not(.is-in) *, html[data-pm="js"] .pm-scene:not(.is-in) *::before, html[data-pm="js"] .pm-scene:not(.is-in) *::after,
html[data-pm="js"] .pm-scene:not(.is-in)::before, html[data-pm="js"] .pm-scene:not(.is-in)::after,
.pm-scene.is-off *, .pm-scene.is-off *::before, .pm-scene.is-off *::after, .pm-scene.is-off::before, .pm-scene.is-off::after,
html.menu-open .pm-scene *, html.menu-open .pm-scene::before, html.pds-chat-open .pm-scene *, html.pds-chat-open .pm-scene::before,
html[data-pm-hidden] .pm-scene *, html[data-pm-hidden] .pm-scene::before { animation-play-state: paused !important; }
@media (min-width: 1025px) {
  /* Side-by-side hero scenes sit above the fold: start them straight from CSS (no flash). */
  html[data-pm="js"] .pm-hero:not(.is-in) *, html[data-pm="js"] .pm-hero:not(.is-in) *::before, html[data-pm="js"] .pm-hero:not(.is-in) *::after { animation-play-state: running !important; }
}

/* A user pause (or reduced motion) also stops the v2.16 continuous animations. */
html[data-motion="paused"] .hero-mockup, html[data-motion="paused"] .hero-mockup .fcard,
html[data-motion="paused"] .mk-sun, html[data-motion="paused"] .hero-sticker,
html[data-motion="paused"] .hero::before, html[data-motion="paused"] .hero::after { animation: none !important; }
html[data-motion="paused"] .hero-h1-accent { animation: none; background-size: 100% 100%; }

/* Reduced motion: also stop the v2.16 idle loops outright (their start delays otherwise linger). */
@media (prefers-reduced-motion: reduce) {
  .hero-mockup, .hero-mockup .fcard, .mk-sun, .hero-sticker, .hero::before, .hero::after { animation: none !important; }
  .hero-h1-accent { animation: none; background-size: 100% 100%; }
}

/* ---- v2.17.1 progressive enhancement ------------------------------------------
   Static by default. pds-motion.js sets html[data-motion="on"] only after it has
   initialised, and every animation rule below the ANIMATION marker requires it, so a
   blocked or failed script (or no JavaScript) leaves complete, motionless graphics.
   The same applies to the v2.16 hero animations that live in style.css.            */
html:not([data-motion="on"]) .hero-mockup,
html:not([data-motion="on"]) .hero-mockup .fcard,
html:not([data-motion="on"]) .mk-sun,
html:not([data-motion="on"]) .hero::before,
html:not([data-motion="on"]) .hero::after,
html:not([data-motion="on"]) .hero-sticker { animation: none; }
html:not([data-motion="on"]) .hero-h1-accent { animation: none; background-size: 100% 100%; }
html:not([data-motion="on"]) .confetti { display: none; }

/* Tablet and phone (1024px and below): decorative background loops stay still.
   Entrance effects still play once. */
@media (max-width: 1024px) { .hero::before, .hero::after, .mk-sun { animation: none; } }

/* While the controller starts, graphics wait invisibly so they never flash complete and
   then restart. A short script in <head> adds .pm-wait; the controller removes it, and a
   1.5 s timer removes it if the controller never runs. Text and links are never hidden. */
html.pm-wait .hero-visual, html.pm-wait .pm-svg, html.pm-wait .trail-mark { opacity: 0; }

/* =================================== ANIMATION =================================== */
@media (prefers-reduced-motion: no-preference) {
@keyframes pmRise { from { opacity: 0; translate: 0 22px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes pmRiseS { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes pmRiseTilt { from { opacity: 0; translate: 0 46px; rotate: -5deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes pmPop { from { opacity: 0; scale: .45; } to { opacity: 1; scale: 1; } }
@keyframes pmGx { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes pmGy { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes pmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pmDraw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes pmShift { from { translate: 0 var(--sy, 0px); } to { translate: 0 0; } }
@keyframes pmDrop { 0% { opacity: 0; translate: 0 -46px; } 55% { opacity: 1; translate: 0 4px; } 78% { translate: 0 -3px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes pmRingOnce { 0% { opacity: 0; scale: .7; } 2% { opacity: .65; } 100% { opacity: 0; scale: 2.2; } }
@keyframes pmRingIdle { 0% { opacity: 0; scale: .8; } 12% { opacity: .5; } 70%, 100% { opacity: 0; scale: 2.1; } }
@keyframes pmDrift { 0%, 100% { translate: 0 0; } 50% { translate: 10px -12px; } }
@keyframes pmFlow { from { opacity: 1; stroke-dashoffset: .1; } to { opacity: 1; stroke-dashoffset: -.9; } }
@keyframes pmTyping { 0% { opacity: 0; scale: .9; } 12% { opacity: 1; scale: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pmDot { 0%, 100% { translate: 0 0; opacity: .45; } 35% { translate: 0 -4px; opacity: 1; } }
@keyframes wbCursor { 0% { opacity: 0; translate: 650px 380px; } 14% { opacity: 1; }
  62% { opacity: 1; translate: 178px 298px; } 72% { opacity: 1; translate: 178px 298px; scale: .86; }
  80% { opacity: 1; translate: 178px 298px; scale: 1; } 100% { opacity: 0; translate: 178px 298px; } }

/* Generic scene parts */
html[data-motion="on"]:root .m-rise { animation: pmRise var(--dur, .8s) var(--pm-ease) var(--d, 0s) both; }
html[data-motion="on"]:root .m-rise--s { animation-name: pmRiseS; }
html[data-motion="on"]:root .m-rise--tilt { animation-name: pmRiseTilt; }
html[data-motion="on"]:root .m-pop { animation: pmPop var(--dur, .55s) var(--pm-spring) var(--d, 0s) both; }
html[data-motion="on"]:root .m-gx { animation: pmGx var(--dur, .55s) var(--pm-ease) var(--d, 0s) both; }
html[data-motion="on"]:root .m-gx.m-gx--linear { animation-timing-function: linear; }
html[data-motion="on"]:root .m-gy { animation: pmGy var(--dur, .55s) var(--pm-ease) var(--d, 0s) both; }
html[data-motion="on"]:root .m-fade { animation: pmFade var(--dur, .6s) ease var(--d, 0s) both; }
html[data-motion="on"]:root .m-draw { animation: pmDraw var(--dur, 1s) var(--pm-ease) var(--d, 0s) both; }
html[data-motion="on"]:root .m-shift { animation: pmShift var(--dur, .9s) var(--pm-ease) var(--d, 0s) both; }
html[data-motion="on"]:root .m-drop { animation: pmDrop var(--dur, .7s) var(--pm-ease) var(--d, 0s) both; }
html[data-motion="on"]:root .m-ring--once { animation: pmRingOnce 1.1s ease-out var(--d, 0s) both; }
html[data-motion="on"]:root .m-typing { animation: pmTyping var(--dur, 1s) linear var(--d, 0s) both; }
html[data-motion="on"]:root .m-dot { animation: pmDot .5s ease-in-out calc(var(--d, 0s) + var(--dd, 0s)) 2 both; }
html[data-motion="on"]:root .wb-cursor { animation: wbCursor 1.7s var(--pm-soft) 1.9s both; }

/* Idle details: desktop only, and paused whenever the scene is off-screen */
@media (min-width: 1025px) {
  html[data-motion="on"]:root .m-ring--idle { animation: pmRingIdle 3.2s ease-out var(--d, 0s) infinite; }
  html[data-motion="on"]:root .m-drift { animation: pmDrift 11s ease-in-out infinite; }
  html[data-motion="on"]:root .m-drift--b { animation-duration: 14s; animation-direction: reverse; }
  html[data-motion="on"]:root .m-flow { stroke-dasharray: .045 .955; animation: pmFlow 2.8s linear var(--d, 0s) infinite; }
}

/* ---- Hero: Found -> Trusted -> Enquiry ------------------------------------ */
@keyframes pmCardIn { from { opacity: 0; translate: 0 16px; scale: .86; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes pmChipIn { from { opacity: 0; translate: 0 14px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes pmType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pmCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pmHill { from { translate: 0 100%; } to { translate: 0 0; } }
@keyframes pmSunUp { from { opacity: 0; translate: 0 34px; scale: .6; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes pmHead { 0% { opacity: 1; stroke-dashoffset: 0; } 97% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1; } }
@keyframes pmBadge { from { opacity: 0; scale: 0; } 60% { scale: 1.35; } to { opacity: 1; scale: 1; } }
@keyframes pmIconPing { 0% { opacity: .7; scale: 1; } 100% { opacity: 0; scale: 2.3; } }

html[data-motion="on"]:root .hero-search { animation: pmChipIn .7s var(--pm-ease) .3s both; }
html[data-motion="on"]:root .hs-text { animation: pmType 1.25s steps(17, end) .8s both; }
html[data-motion="on"]:root .hs-caret { animation: pmCaret .6s steps(1, end) .8s 3 both; }
html[data-motion="on"]:root .hero-mockup .mockup-browser { animation: pmRise .9s var(--pm-ease) .2s both; }
html[data-motion="on"]:root .hero-mockup .mk-copy > :nth-child(1) { transform-origin: 0 50%; animation: pmGx .5s var(--pm-ease) 1.55s both; }
html[data-motion="on"]:root .hero-mockup .mk-copy > :nth-child(2) { transform-origin: 0 50%; animation: pmGx .55s var(--pm-ease) 1.65s both; }
html[data-motion="on"]:root .hero-mockup .mk-copy > :nth-child(3) { transform-origin: 0 50%; animation: pmGx .55s var(--pm-ease) 1.75s both; }
html[data-motion="on"]:root .hero-mockup .mk-copy > :nth-child(4) { transform-origin: 0 50%; animation: pmGx .55s var(--pm-ease) 1.85s both; }
html[data-motion="on"]:root .hero-mockup .mk-copy > :nth-child(5) { transform-origin: 0 50%; animation: pmGx .55s var(--pm-ease) 1.95s both; }
html[data-motion="on"]:root .hero-mockup .mk-copy > :nth-child(6) { animation: pmPop .5s var(--pm-spring) 2.1s both; }
html[data-motion="on"]:root .hero-mockup .mk-nav > .mk-pill { transform-origin: 0 50%; animation: pmGx .45s var(--pm-ease) 1.5s both; }
html[data-motion="on"]:root .hero-mockup .mk-nav > .mk-nav-cta { animation: pmPop .5s var(--pm-spring) 1.9s both; }
html[data-motion="on"]:root .hero-mockup .mk-art { animation: pmFade .6s ease 1.7s both; }
html[data-motion="on"]:root .hero-mockup .mk-hill-a { animation: pmHill .9s var(--pm-ease) 1.8s both; }
html[data-motion="on"]:root .hero-mockup .mk-hill-b { animation: pmHill .9s var(--pm-ease) 2.0s both; }
html[data-motion="on"]:root .hero-mockup .mk-sun { animation: pmSunUp .8s var(--pm-spring) 2.3s both; }
html[data-motion="on"]:root .hero-mockup .mk-tile { animation: pmPop .45s var(--pm-spring) 2.5s both; }
html[data-motion="on"]:root .hero-mockup .mk-tile:nth-child(2) { animation-delay: 2.62s; }
html[data-motion="on"]:root .hero-mockup .mk-tile:nth-child(3) { animation-delay: 2.74s; }
html[data-motion="on"]:root .hero-mockup .mk-tile:nth-child(4) { animation-delay: 2.86s; }
/* 1. Found: search + local visibility is tracked */
html[data-motion="on"]:root .hero-mockup .fcard-c { animation: pmCardIn .8s var(--pm-spring) 2.1s both; }
/* 2. Trusted: the business profile is in good order */
html[data-motion="on"]:root .hero-mockup .fcard-a { animation: pmCardIn .8s var(--pm-spring) 3.0s both; }
html[data-motion="on"]:root .hero-mockup .fcard-a .fcard-icon { position: relative; }
html[data-motion="on"]:root .hero-mockup .fcard-a .fcard-icon::after { content: ''; position: absolute; inset: 0; border-radius: 6px; border: 2px solid var(--blue); opacity: 0; animation: pmIconPing 1.1s ease-out 3.6s 2; }
/* 3. Enquiry: a message arrives */
html[data-motion="on"]:root .hero-mockup .fcard-b { animation: pmCardIn .8s var(--pm-spring) 4.5s both; }
html[data-motion="on"]:root .hero-mockup .fcard-b .fcard-badge { animation: pmBadge .6s var(--pm-spring) 5.0s both; }
/* the trail itself */
html[data-motion="on"]:root .hero-trail .ht-line { animation: pmDraw 3.6s var(--pm-soft) 1s both; }
html[data-motion="on"]:root .hero-trail .ht-head { stroke-dasharray: .002 1.2; animation: pmHead 3.6s var(--pm-soft) 1s both; }
html[data-motion="on"]:root .hero-trail .ht-flag { animation: pmPop .5s var(--pm-spring) 4.5s both; }
@media (min-width: 1025px) {
  /* v2.16's floating idle motion is kept on desktop, layered over the entrance. */
  html[data-motion="on"]:root .hero-mockup .mk-sun { animation: pmSunUp .8s var(--pm-spring) 2.3s both, mkSun 6s ease-in-out 3.2s infinite; }
  html[data-motion="on"]:root .hero-mockup .fcard-c { animation: pmCardIn .8s var(--pm-spring) 2.1s both, fc-c 4.5s ease-in-out 3s infinite; }
  html[data-motion="on"]:root .hero-mockup .fcard-a { animation: pmCardIn .8s var(--pm-spring) 3.0s both, fc-a 4s ease-in-out 3.9s infinite; }
  html[data-motion="on"]:root .hero-mockup .fcard-b { animation: pmCardIn .8s var(--pm-spring) 4.5s both, fc-b 5s ease-in-out 5.4s infinite; }
}

/* ---- Trail mark ------------------------------------------------------------ */
html[data-motion="on"]:root .trail-mark .tm-line { stroke-dasharray: 1 1; animation: pmDraw 1.3s var(--pm-soft) .2s both; }
html[data-motion="on"]:root .trail-mark .tm-n1 { animation: pmPop .5s var(--pm-spring) .15s both; }
html[data-motion="on"]:root .trail-mark .tm-n2 { animation: pmPop .5s var(--pm-spring) .6s both; }
html[data-motion="on"]:root .trail-mark .tm-n3 { animation: pmPop .5s var(--pm-spring) 1.05s both; }
html[data-motion="on"]:root .trail-mark .tm-flag { animation: pmPop .5s var(--pm-spring) 1.45s both; }

/* ---- Home: why / services ---------------------------------------------------- */
html[data-motion="on"]:root .why-grid.pm-scene .why-icon :is(path, circle) { stroke-dasharray: 1 1; animation: pmDraw 1s var(--pm-ease) .25s both; }
html[data-motion="on"]:root .why-grid.pm-scene .why-card:nth-child(2) .why-icon :is(path, circle) { animation-delay: .4s; }
html[data-motion="on"]:root .why-grid.pm-scene .why-card:nth-child(3) .why-icon :is(path, circle) { animation-delay: .55s; }
html[data-motion="on"]:root .svc-grid.pm-scene .svc-icon { animation: pmPop .6s var(--pm-spring) .2s both; }
html[data-motion="on"]:root .svc-grid.pm-scene .svc-card:nth-child(2) .svc-icon { animation-delay: .34s; }
html[data-motion="on"]:root .svc-grid.pm-scene .svc-card:nth-child(3) .svc-icon { animation-delay: .48s; }
html[data-motion="on"]:root .svc-grid.pm-scene .svc-card:nth-child(4) .svc-icon { animation-delay: .62s; }

/* ---- Service steps share the trail -------------------------------------------- */
@keyframes pmStepBar { from { scale: 0 1; } to { scale: 1 1; } }
html[data-motion="on"]:root .service-step.pm-scene::before { animation: pmStepBar .9s var(--pm-ease) .15s both; }
html[data-motion="on"]:root .service-step.pm-scene:nth-child(2)::before { animation-delay: .4s; }
html[data-motion="on"]:root .service-step.pm-scene:nth-child(3)::before { animation-delay: .65s; }
html[data-motion="on"]:root .service-step.pm-scene:nth-child(4)::before { animation-delay: .9s; }
@media (max-width: 1024px) { html[data-motion="on"]:root .service-step.pm-scene::before { animation-delay: .1s !important; } }

/* ---- Process: bubble ping when the trail reaches it -------------------------- */
@keyframes pmBubble { 0% { opacity: .9; scale: 1; } 100% { opacity: 0; scale: 1.75; } }
html[data-motion="on"]:root .process-track.is-armed .process-step.is-reached .process-bubble::after { content: ''; position: absolute; inset: -2px;
  border-radius: 50%; border: 2px solid var(--gold); opacity: 0; animation: pmBubble .9s var(--pm-ease) both; pointer-events: none; }

/* ---- Final call to action: the trail arrives --------------------------------- */
@keyframes pmBtnPing { 0% { box-shadow: 0 0 0 0 rgba(212, 130, 10, .55); } 100% { box-shadow: 0 0 0 18px rgba(212, 130, 10, 0); } }
html[data-motion="on"]:root .final-cta.pm-scene.is-in .final-actions .btn-gold { animation: pmBtnPing 1.4s ease-out 1.7s 2; }

/* ---- Assistant: refined presentation, behaviour untouched -------------------- */
@keyframes pmChatIn { from { opacity: 0; translate: 0 14px; scale: .985; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes pmMsgIn { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes pmTwinkle { 0%, 100% { rotate: 0deg; scale: 1; } 40% { rotate: 24deg; scale: 1.2; } 70% { rotate: -8deg; scale: 1.05; } }
html[data-motion="on"]:root .pds-chat[open] { animation: pmChatIn .26s var(--pm-ease) backwards; }
html[data-motion="on"]:root .pds-chat-message { animation: pmMsgIn .3s var(--pm-ease) backwards; }
html[data-motion="on"]:root .pds-chat-starter { animation: pmMsgIn .35s var(--pm-ease) backwards; }
html[data-motion="on"]:root .pds-chat-starter:nth-child(2) { animation-delay: .06s; }
html[data-motion="on"]:root .pds-chat-starter:nth-child(3) { animation-delay: .12s; }
html[data-motion="on"]:root .pds-chat-launch svg { animation: pmTwinkle 1.4s ease-in-out 2.2s 1 backwards; }
}

/* v2.17.6: clearer stacked service introductions; desktop is unchanged. */
@media (max-width: 1024px) {
  .hero .hero-sticker { display: none; }
  .service-hero { padding-top: calc(var(--nav-h) + 1.25rem); padding-bottom: 2.5rem; }
  .service-hero .service-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .service-hero .service-hero-copy { display: contents; }
  .service-hero .service-hero-copy > * { min-width: 0; }
  .service-hero .breadcrumb { order: 0; margin-bottom: 1rem; }
  .service-hero .eyebrow { order: 1; }
  .service-hero .service-hero-copy > h1 { order: 2; margin: .5rem 0 1.25rem; font-size: clamp(2rem, 4.8vw, 3rem); line-height: 1.1; }
  .service-hero .service-hero-art { order: 3; width: 100%; max-width: 560px; justify-self: center; margin: 0 0 1.25rem; }
  .service-hero .service-hero-copy > p { order: 4; margin: 0 0 1.25rem; }
  .service-hero .hero-actions { order: 5; margin: 0; width: 100%; }
  .service-hero .service-fit { order: 6; margin-top: 1.25rem; }
}
@media (max-width: 640px) {
  .service-hero .service-hero-copy > h1 { font-size: clamp(1.8rem, 7.5vw, 2.2rem); }
}