/* ============================================================
   KEEP PACE PAGE (services/keep-pace/ only, after site.css and
   service-page.css). Prefixes kpx- (shared pieces) and kpv- (the hero).
   Compare, chosen by James 2026-10-19 from the Keep pace lab (Current,
   Flagship, Everything in one, The year and Inside a month were deleted
   with the lab and svc-keeppace.js):
   1 hero - the template's Even split: the breadcrumb + h1, the headline
     "Your digital operations, managed for you.", a plain definition of the
     service and the call button | an illustrative "Your operations" board
     (.kpo); then the comparison table - the homepage / about
     page table (site.css "comparison table"): Keep pace as the highlighted
     column against hiring in-house, a one-off project and an agency; it
     scrolls sideways inside its wrapper on phones, as on the homepage
   2 "Every month includes" - one ruled white box of five cells
   Then the Two ways band (Fork 1, site.css "two ways to work", made light
   here - see 3 at the end), the FAQ,
   "Case studies worth a look" (site.css) and the CTA.
   Motions hook onto [data-svt-in] (service-page.js): the finished state is
   the plain rule, the "before" state sits under html.svt-on inside a
   no-preference query, so with reduced motion or no script everything
   shows its finished state.
   ============================================================ */
#site main { --kpx-ink: #0B1B33; --kpx-mu: #4A5A72; --kpx-mu2: #607086; --kpx-ln: rgba(11,27,51,.14); --kpx-ln2: rgba(11,27,51,.08);
  --kpx-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; }

/* ============ shared pieces ============ */
#site .kpx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
#site .kpx-page ul { list-style: none; margin: 0; padding: 0; }
#site .kpx-ic { display: block; flex: none; width: 24px; height: 24px; color: var(--cb); }
#site .kpx-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(28px, 3vw, 40px); }
/* a section head: the heading on the left, its line on the right */
#site .kpx-sh { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 48px; margin-bottom: clamp(24px, 3vw, 40px); }
#site .kpx-sh h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -.042em; color: var(--kpx-ink); text-wrap: pretty; }
#site .kpx-sh p { margin: 0; max-width: 42ch; font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.6; color: var(--kpx-mu); }

/* ============ 1 HERO: what the service is, then the comparison table ============ */
/* the template's Even split (service-page.css .svt-hin): the copy on the
   left - breadcrumb + h1, the headline (sized to stay on two lines in its
   half), the plain definition and the call button - and the board on the right */
#site .kpv-head.svt-hin { padding-top: clamp(64px, 6.6vw, 104px); }
@media (max-width: 760px) { #site .kpv-head.svt-hin { padding-top: 28px; } }
#site .kpv-head .svt-big { font-size: clamp(2.2rem, 3.6vw, 3.25rem); text-wrap: balance; }
#site .kpv-head .svt-sub { max-width: 52ch; }

/* the board: "your digital operations, managed for you" at a glance - six
   systems running (green dots), one thing being built (a cobalt bar), three
   jobs ticking off your plate, and one expert looking after it all */
#site .kpo { width: min(100%, 440px); margin: 0; padding: 22px 24px 18px; border: 1px solid var(--kpx-ln2); border-radius: 14px; background: #fff;
  box-shadow: 0 1px 1px rgba(11,27,51,.04), 0 2px 6px -2px rgba(11,27,51,.08), 0 40px 80px -36px rgba(11,27,51,.45); }
#site .kpo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--kpx-ink); }
#site .kpo-t { font-size: 19px; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; color: var(--kpx-ink); }
#site .kpo-tag { padding: 6px 10px; border: 1px solid var(--kpx-ln); border-radius: 100px; font-family: var(--kpx-mono); font-size: 12.5px; line-height: 1;
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; color: var(--kpx-mu2); }
#site .kpo-k { margin: 15px 0 8px; font-family: var(--kpx-mono); font-size: 12.5px; line-height: 1.2; text-transform: uppercase; letter-spacing: .03em; color: var(--kpx-mu2); }
#site .kpo-sys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#site .kpo-sys li { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 8px; background: #F4F6FA; font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--kpx-ink); }
#site .kpo-sys i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #47A045; box-shadow: 0 0 0 3px rgba(71,160,69,.16); }
#site .kpo-build { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 12px 13px; border: 1px solid rgba(44,95,216,.22); border-radius: 8px; background: rgba(44,95,216,.04); }
#site .kpo-build span { font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--kpx-ink); }
#site .kpo-build em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--cb); white-space: nowrap; }
#site .kpo-bar { grid-column: 1 / -1; display: block; height: 6px; border-radius: 6px; background: rgba(44,95,216,.12); overflow: hidden; }
#site .kpo-bar i { display: block; width: 62%; height: 100%; border-radius: 6px; background: var(--cb); }
#site .kpo-off li { display: flex; align-items: center; gap: 11px; padding: 7px 0; border-bottom: 1px solid var(--kpx-ln2); font-size: 14.5px; line-height: 1.3; color: var(--kpx-ink); }
#site .kpo-off li:last-child { border-bottom: 0; }
#site .kpo-off svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--cb);
  fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#site .kpo-who { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--kpx-ln); font-size: 14px; font-weight: 600; color: var(--kpx-ink); }
/* the brand's staircase as the expert's mark */
#site .kpo-mk { position: relative; flex: none; width: 22px; height: 18px; }
#site .kpo-mk i { position: absolute; width: 7px; height: 7px; border-radius: 1px; background: var(--cb); }
#site .kpo-mk i:nth-child(1) { left: 0; top: 0; }
#site .kpo-mk i:nth-child(2) { left: 7.5px; top: 5.5px; opacity: .74; }
#site .kpo-mk i:nth-child(3) { left: 15px; top: 11px; opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  /* before: the systems wait grey, the bar has barely started, nothing is ticked off yet */
  html.svt-on #site .kpo .kpo-sys i { background: #C5CEDC; box-shadow: 0 0 0 3px rgba(11,27,51,0); }
  html.svt-on #site .kpo .kpo-bar i { width: 6%; }
  html.svt-on #site .kpo .kpo-off li { opacity: 0; transform: translateY(6px); }
  html.svt-on #site .kpo .kpo-off path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  /* in view, once: each system comes up green, the build moves on, then the jobs tick off one by one */
  html.svt-on #site .kpo.svt-in .kpo-sys i { background: #47A045; box-shadow: 0 0 0 3px rgba(71,160,69,.16); transition: background .4s ease calc(.3s + var(--i) * .14s), box-shadow .6s ease calc(.3s + var(--i) * .14s); }
  html.svt-on #site .kpo.svt-in .kpo-bar i { width: 62%; transition: width 1.8s cubic-bezier(.4,0,.2,1) 1s; }
  html.svt-on #site .kpo.svt-in .kpo-off li { opacity: 1; transform: none; transition: opacity .45s ease calc(1.6s + var(--i) * .45s), transform .55s cubic-bezier(.16,.6,.18,1) calc(1.6s + var(--i) * .45s); }
  html.svt-on #site .kpo.svt-in .kpo-off path { stroke-dashoffset: 0; transition: stroke-dashoffset .35s ease calc(1.85s + var(--i) * .45s); }
}
@media (max-width: 900px) {
  #site .kpo { padding: 22px 20px 18px; }
}
@media (max-width: 420px) {
  #site .kpo-sys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the table is the shared one from the homepage and about page (site.css
   "comparison table": .cmp > .cmpwrap > table, .hi column, .tick, .mut);
   here it sits inside the hero, so no section padding, and its row labels
   are longer, so they wrap and keep to the 12.5px floor */
#site .kpv-cmp.cmp { padding: 0; margin-top: clamp(16px, 2vw, 32px); }
#site .kpv-cmp tbody th { width: 24%; min-width: 190px; line-height: 1.45; white-space: normal; }
#site .kpv-incl { padding: clamp(64px, 6.5vw, 96px) 0 clamp(88px, 9vw, 136px); }

/* ============ 2 EVERY MONTH INCLUDES: one ruled white box of five cells ============ */
#site .kpx-inc5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--kpx-ln); border-radius: 12px; background: #fff;
  box-shadow: 0 1px 2px rgba(11,27,51,.04), 0 24px 48px -36px rgba(11,27,51,.35); }
#site .kpx-inc5 li { padding: clamp(22px, 2.2vw, 30px); border-left: 1px solid var(--kpx-ln2); }
#site .kpx-inc5 li:first-child { border-left: 0; }
#site .kpx-inc5 .kpx-ic { width: 26px; height: 26px; margin-bottom: 22px; }
#site .kpx-inc5 h3 { font-size: 17.5px; line-height: 1.3; letter-spacing: -.02em; }
#site .kpx-inc5 p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--kpx-mu); }

@media (prefers-reduced-motion: no-preference) {
  html.svt-on #site .kpx-inc5 li { opacity: 0; transform: translateY(10px); }
  html.svt-on #site .kpx-inc5.svt-in li { opacity: 1; transform: none;
    transition: opacity .5s ease calc(var(--i) * .1s), transform .6s cubic-bezier(.16,.6,.18,1) calc(var(--i) * .1s); }
}
@media (max-width: 900px) {
  #site .kpx-inc5 { grid-template-columns: minmax(0, 1fr); }
  #site .kpx-inc5 li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 16px; padding: 18px 20px; border-left: 0; border-top: 1px solid var(--kpx-ln2); }
  #site .kpx-inc5 li:first-child { border-top: 0; }
  #site .kpx-inc5 .kpx-ic { grid-row: span 2; margin: 0; }
  #site .kpx-inc5 p { margin-top: 4px; }
}

/* the long definition under the headline: no one-word last line */
#site .kpx-cur .svt-sub, #site .svt-sub { text-wrap: pretty; }

/* ============ 3 TWO WAYS (Fork 1) on a light ground ============
   James 2026-10-19: make it light, with the same background as "What
   changed" on the about page (site.css .cmp.tint). Fork 1's own rules are
   in site.css "two ways to work" (dark, navy); these recolour this page's
   band only (.kpways.kpw-light) - the homepage's Fork 2 band is untouched.
   Blue is still the project, green (darker, for contrast on the light
   ground) is Keep pace. The pill spacing fix stays in site.css. */
#site .kpways.kpw-light { color: var(--kpx-mu); background: var(--grain), #E7EEFB; }
#site .kpw-light h2 { color: var(--kpx-ink); }
#site .kpw-light .bhead p { color: var(--kpx-mu); }
#site .kpw-light .pv .tg, #site .kpw-light .pv .k, #site .kpw-light .f1-cap { color: var(--cb); }
#site .kpw-light .pv .kp .tg { color: #2E7A2B; }
#site .kpw-light .pv .bfy { border-top-color: var(--kpx-ln); }
#site .kpw-light .pv .bfy dt { color: var(--kpx-mu); }
#site .kpw-light .pv .bfy dd { color: var(--kpx-ink); }
#site .kpw-light .f1-start { background: rgba(255,255,255,.6); border-color: rgba(44,95,216,.2); }
#site .kpw-light .f1-start::after, #site .kpw-light .f1-c::before { background: var(--cb); box-shadow: 0 0 0 5px rgba(44,95,216,.14); }
#site .kpw-light .f1-c.kp::before { background: #47A045; box-shadow: 0 0 0 5px rgba(71,160,69,.18); }
#site .kpw-light .f1-step > i { background: #fff; border-color: var(--cb); }
#site .kpw-light .f1-step:first-of-type::after { background: rgba(44,95,216,.3); }
#site .kpw-light .f1-step b, #site .kpw-light .f1-top b { color: var(--kpx-ink); }
#site .kpw-light .f1-step span, #site .kpw-light .f1-d { color: var(--kpx-mu); }
#site .kpw-light .f1-y .a { stroke: rgba(44,95,216,.7); }
#site .kpw-light .f1-y .b { stroke: rgba(71,160,69,.85); }
#site .kpw-light .f1-y .ra { stroke: var(--cb); }
#site .kpw-light .f1-y .rb { stroke: #2E7A2B; }
#site .kpw-light .f1-c { background: #fff; border-color: rgba(44,95,216,.22); box-shadow: 0 1px 2px rgba(11,27,51,.04), 0 24px 48px -36px rgba(11,27,51,.35); }
#site .kpw-light .f1-c.kp { border-color: rgba(71,160,69,.55); background: linear-gradient(150deg, rgba(71,160,69,.09), #fff 60%);
  box-shadow: 0 1px 2px rgba(11,27,51,.04), 0 26px 60px -34px rgba(71,160,69,.45); }
#site .kpw-light .spark .sl { stroke: var(--cb); }
#site .kpw-light .kp .spark .sl { stroke: #47A045; }
#site .kpw-light .f1-br { background: #fff; border-color: rgba(71,160,69,.6); color: #2E7A2B; }
html.js-anim #site .kpw-light .pv-a1.go .f1-c.kp { animation-name: kpwhit; }
@keyframes kpwhit { 0%, 36%, 100% { border-color: rgba(71,160,69,.55); } 44% { border-color: #47A045; } }

/* "Your operations" board, made more minimal (James 2026-10-19): only the
   systems running and the jobs taken off your plate - no build bar, no
   footer; hairline rule under the title, plain rows instead of grey chips */
#site .kpo { padding: 24px 26px 20px; }
#site .kpo-top { border-bottom-color: var(--kpx-ln); }
#site .kpo-sys { gap: 0 18px; }
#site .kpo-sys li { padding: 9px 0; border-radius: 0; background: none; border-bottom: 1px solid var(--kpx-ln2); font-weight: 400; }
#site .kpo-off li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Two ways heading on this page: let it run on one line (James 2026-10-19) */
#site .kpways.kpw-light .bhead { max-width: none; }
#site .kpways.kpw-light .bhead p { max-width: 96ch; text-wrap: pretty; }