/* PPCHelping — motion layer styles. Loaded only together with motion.js; every rule that changes the
   page is scoped to .has-motion (head flag / motion.js), so without JS the site renders as before. */

/* ---- pre-states: above-the-fold pieces wait for motion.js (.m-ready) instead of flashing ---- */
.has-motion:not(.m-ready) .hero__sub,
.has-motion:not(.m-ready) .hero__punch,
.has-motion:not(.m-ready) .hero .btn,
.has-motion:not(.m-ready) .hero__chips .chip,
.has-motion:not(.m-ready) .mock__win,
.has-motion:not(.m-ready) .mock__float,
.has-motion:not(.m-ready) .stats__n{opacity:0}
.has-motion:not(.m-ready) .hero__title mark,
.has-motion:not(.m-ready) .cat-chip{--mk:0%}

/* ---- marker highlights (motion.js tweens --mk 0% -> 100%) ---- */
.has-motion .hero__title mark,
.has-motion .cat-chip{background:linear-gradient(var(--acc),var(--acc)) no-repeat 0 0/var(--mk,100%) 100%}

/* ---- headings split into masked lines ---- */
.m-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.m-line__in{display:block}

/* ---- header ---- */
.has-motion .site-header{transition:box-shadow .25s ease,background-color .25s ease}
.has-motion .site-header.is-scrolled{background-color:rgba(246,245,239,.97);box-shadow:0 10px 30px rgba(19,20,16,.07)}
.has-motion .brand{transition:transform .25s ease,opacity .15s;transform-origin:0 50%}
.has-motion .header-right .btn{transition:transform .25s ease,color .3s ease;transform-origin:100% 50%}
.has-motion .site-header.is-scrolled .brand,
.has-motion .site-header.is-scrolled .header-right .btn{transform:scale(.92)}

/* ---- desktop nav underline ---- */
@media (min-width:821px){
  .has-motion .main-nav.m-ind{position:relative}
  .has-motion .main-nav.m-ind a.is-active{border-bottom-color:transparent}
  .m-nav-ind{position:absolute;left:0;bottom:0;width:100px;height:2px;background:var(--ink);transform-origin:0 50%;opacity:0;pointer-events:none}
}

/* ---- buttons: colour fills up from the bottom ---- (flex-shrink:0: overflow:hidden would drop the flex min-content width and let the label get clipped) */
.has-motion .btn--ink,.has-motion .btn--acc,.has-motion .band__cta{position:relative;isolation:isolate;overflow:hidden;flex-shrink:0;vertical-align:top;transition:color .3s ease}
.has-motion .btn--ink::before,.has-motion .btn--acc::before,.has-motion .band__cta::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:scaleY(0);transform-origin:50% 100%;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.has-motion .btn--ink::before{background:var(--acc)}
.has-motion .btn--acc::before{background:var(--ink)}
.has-motion .band__cta::before,
.has-motion .pricing__main .btn--acc::before,
.has-motion .svc-box--ink .btn--acc::before,
.has-motion .article__cta .btn--acc::before{background:var(--card)}
.has-motion .btn--ink:hover,.has-motion .btn--acc:hover,.has-motion .band__cta:hover{opacity:1}
.has-motion .btn--ink:hover{color:var(--onacc)}
.has-motion .btn--acc:hover{color:var(--bg)}
.has-motion .band__cta:hover,
.has-motion .pricing__main .btn--acc:hover,
.has-motion .svc-box--ink .btn--acc:hover,
.has-motion .article__cta .btn--acc:hover{color:var(--ink)}
.has-motion .btn--ink:hover::before,.has-motion .btn--acc:hover::before,.has-motion .band__cta:hover::before{transform:scaleY(1)}

/* ---- service cards: the arrow nudges right ---- */
.has-motion .svc-card__arrow{transition:background .2s,color .2s,transform .25s cubic-bezier(.2,.7,.2,1)}
.has-motion .svc-card:hover .svc-card__arrow{transform:translateX(4px)}

/* ---- FAQ: height is animated by motion.js; the CSS end states keep it working if the module fails ---- */
.has-motion .faq__a,
.has-motion .faq__item.is-open .faq__a{max-height:none;padding:0 26px;transition:none}
.has-motion .faq__a{height:0}
.has-motion .faq__item.is-open .faq__a{height:auto}
.has-motion .faq__a>div{padding-bottom:24px!important}
.has-motion .faq__sign{display:inline-block;transition:none}

/* ---- print: content that never scrolled into view must still be printed ---- */
@media print{
  .has-motion [style*="opacity: 0"]{opacity:1!important;transform:none!important}
  .has-motion .cert__ic,.has-motion .who__x{transform:none!important}
  .has-motion .adv__ic path{stroke-dashoffset:0!important}
  .has-motion .m-count>[aria-hidden]{display:none}
  .has-motion .m-count__keep{color:inherit!important}
  .has-motion .svc-visual [data-a][style*="opacity: 0"]{opacity:0!important} /* scene parts that end hidden (motion.js prints the final frame) */
  .has-motion .post-card__media{clip-path:none!important}
  .has-motion .checklist__i .box path,.has-motion .form-success__ic path{stroke-dashoffset:0!important}
}

/* ---- home hero mock ---- */
.m-caret{display:inline-block;width:1px;height:12px;margin-left:-6px;background:var(--ink);animation:m-blink 1s steps(1) infinite}
@keyframes m-blink{50%{opacity:0}}
.has-motion .mock__tab{position:relative;overflow:hidden}
.m-tabbar{position:absolute;left:12%;right:12%;bottom:4px;height:2px;border-radius:2px;background:var(--acc);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* ---- mock panes share one grid cell, so the window keeps the tallest pane's height and autoplay never shifts the page ---- */
.has-motion .mock__body{display:grid;padding-bottom:26px}
@media (min-width:1081px){ .has-motion .mock__body{padding-bottom:40px} }
.has-motion .mock__pane{display:block;grid-area:1/1;visibility:hidden}
.has-motion .mock__pane.is-active{visibility:visible}
.has-motion .an__chart{height:72px}
.has-motion .an__chart rect{vector-effect:non-scaling-stroke}
.has-motion .re__banner{height:72px}
.has-motion .mock__pane[data-pane="ad"]{align-self:center}

/* ---- home stats ---- */
.has-motion .stats__n{font-variant-numeric:tabular-nums}
.has-motion .m-count{display:grid}
.has-motion .m-count>span{grid-area:1/1}
.has-motion .m-count__keep{color:transparent}
.has-motion .proc__k{font-variant-numeric:tabular-nums}

/* ---- home services: lime fill rises from the bottom ---- */
.has-motion .svc{position:relative;isolation:isolate}
.has-motion .svc::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--acc);transform:scaleY(0);transform-origin:50% 100%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){
  .has-motion .svc:hover{background:var(--card)}
  .has-motion .svc:hover::before{transform:scaleY(1)}
}

/* ---- service page scenes (the markup exists only when motion is enabled for the request) ---- */
/* the scene is the first item of .svc-layout: top of the right column, with the sidebar under it (header and lead stay as without motion) */
.svc-layout--visual{grid-template-rows:auto 1fr;row-gap:16px}
.svc-layout--visual>.svc-visual{grid-column:2;grid-row:1}
.svc-layout--visual>.svc-main{grid-column:1;grid-row:1/span 2}
.svc-layout--visual>.svc-side{grid-column:2;grid-row:2} /* sticky within its own area: the rest of the main column's height */
.svc-visual{
  --sv-sand:#e6e4dc;      /* window dots, neutral photo placeholders (same as the hero mock dots) */
  --sv-bar:#e2e0d6;       /* text placeholder bars, progress tracks */
  --sv-track:#ecebe4;     /* funnel top step, ring and step-line tracks */
  --sv-ring:#d6d4ca;      /* outline of pending steps */
  --sv-lime-soft:#e9ffab; /* light lime fills (end colour of the hero banner gradient) */
  --sv-lime-mid:#dcf57f;  /* between --sv-lime-soft and --acc */
  --sv-ok:#3f9a2e;        /* success green, as .an__delta in theme.css */
  --sv-ok-soft:rgba(63,154,46,.12);
  --sv-err:#c8442e;       /* error red, as .lead-form__err in theme.css */
  --sv-err-soft:rgba(200,68,46,.1);
  margin:0;width:100%;aspect-ratio:380/260;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 18px 40px rgba(19,20,16,.08)}
.svc-visual__svg{display:block;width:100%;height:100%}
/* type scale for every scene: .sv-m and .sv-t 13px, .sv-h 13-30px (set with font-size on the element) */
.svc-visual .sv-t{font-family:Manrope,system-ui,sans-serif;font-weight:600}
.svc-visual .sv-m{font-family:"IBM Plex Mono","Courier New",monospace} /* Courier New has the same 0.6em advance: marks and carets stay in place before Plex Mono loads */
.svc-visual .sv-h{font-family:Unbounded,sans-serif;font-weight:700}
.svc-visual .sv-cap{text-transform:uppercase;letter-spacing:.06em}
.svc-visual .c-ink{fill:var(--ink)}
.svc-visual .c-mu{fill:var(--muted)}
.svc-visual .c-acc{fill:var(--acc)}
.svc-visual .c-bg{fill:var(--bg)}
.svc-visual .c-card{fill:var(--card)}
.svc-visual .c-dot,.svc-visual .c-sand{fill:var(--sv-sand)}
.svc-visual .c-ph{fill:var(--sv-bar)}
.svc-visual .c-ph2{fill:var(--sv-track)}
.svc-visual .c-pale{fill:var(--sv-lime-soft)}
.svc-visual .c-acc2{fill:var(--sv-lime-mid)}
.svc-visual .c-scan{fill:var(--acc);fill-opacity:.32}
.svc-visual .c-ok{fill:var(--sv-ok)}
.svc-visual .c-okt{fill:var(--sv-ok-soft)}
.svc-visual .c-err{fill:var(--sv-err)}
.svc-visual .c-errt{fill:var(--sv-err-soft)}
.svc-visual .ring{stroke:var(--card);stroke-width:2.5}
.svc-visual .ring-m{stroke:var(--sv-ring);stroke-width:1.5}
.svc-visual [class^="k-"],.svc-visual [class*=" k-"]{fill:none;stroke-linecap:round;stroke-linejoin:round}
.svc-visual .k-ink{stroke:var(--ink)}
.svc-visual .k-line{stroke:var(--line)}
.svc-visual .k-w{stroke:var(--card)}
.svc-visual .k-acc{stroke:var(--acc)}
.svc-visual .k-ph{stroke:var(--sv-track)}
.svc-visual .k-ok{stroke:var(--sv-ok)}
.svc-visual .k-err{stroke:var(--sv-err)}
.has-motion:not(.m-ready) .svc-visual [data-a]{visibility:hidden}
@media (max-width:1080px){ /* one column as in theme.css: scene, main, side */
  .svc-layout--visual{grid-template-rows:none;row-gap:40px}
  .svc-layout--visual>.svc-visual,.svc-layout--visual>.svc-main,.svc-layout--visual>.svc-side{grid-column:auto;grid-row:auto}
  .svc-visual{max-width:460px}
}

/* ---- articles: smoother progress bar and contents marker; checklist ticks are drawn by motion.js ---- */
.has-motion .read-progress__bar{transition:width .15s linear}
.has-motion .article-toc a{transition:color .2s,border-color .2s}
.has-motion .checklist__i .box svg{width:14px;height:14px}
.m-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* text kept for screen readers next to a drawn SVG */

/* ---- contacts: lime line under the focused field (the form itself is shown at once); the success tick waits for motion.js ---- */
.has-motion .lead-form input:not(.hp),.has-motion .lead-form textarea{background-image:linear-gradient(var(--acc),var(--acc));background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;transition:background-size .3s ease}
.has-motion .lead-form input:not(.hp):focus,.has-motion .lead-form textarea:focus{background-size:100% 2px}
.has-motion:not(.m-ready) .form-success__ic{color:transparent}
.has-motion .form-success__ic svg{width:28px;height:28px}