/* =====================================================================
   SERVICES PAGE - everything between the hero and the CTA on services/
   Loaded only by services/, after site.css. "Bento", picked by James
   2026-10-18 from the Services layout lab (the lab, Baseline and the other
   four designs were deleted the same day): a 4-column grid of tiles, a big
   navy Keep pace tile (the core service) with a staircase of blocks one
   cobalt block climbs, the five services as tiles each with one small
   navy/cobalt graphic, and a dashed "Where it starts" tile with the call
   link. services-page.js reveals the tiles as they scroll in.
   ===================================================================== */
#site .svx { padding: clamp(36px, 4.4vw, 60px) 0 clamp(64px, 7vw, 104px); }

#site .svx-k { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 500; line-height: 1.4;
  letter-spacing: .04em; text-transform: uppercase; color: var(--k-mu); }
/* square-marker tags */
#site .svx-tags { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; padding: 0; list-style: none; }
#site .svx-tags li { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
  letter-spacing: .03em; text-transform: uppercase; color: var(--k-mu); }
#site .svx-tags li::before { content: ""; width: 5px; height: 5px; background: currentColor; }
#site .svx-more { display: inline-flex; align-items: center; gap: var(--arr-gap); margin-top: 22px; font-size: 14.5px; font-weight: 600; color: var(--cb); }
#site .svx-arr { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* reveal: services-page.js adds .svr only when it can bring them back */
html.svr #site .svx [data-r] { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.16,.6,.18,1), transform .8s cubic-bezier(.16,.6,.18,1); }
html.svr #site .svx [data-r].is-in { opacity: 1; transform: none; }

/* =====================================================================
   BENTO - tiles of different sizes, each with one small graphic that
   says what the service does. Keep pace is the big navy tile
   ===================================================================== */
#site .svb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(292px, auto); gap: 16px; }
#site .svb-t { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 24px 24px 26px; background: #fff;
  border: 1px solid var(--k-line); border-radius: 6px; color: var(--k-ink); text-decoration: none;
  transition: border-color .25s, transform .25s, box-shadow .25s, opacity .8s cubic-bezier(.16,.6,.18,1); }
#site a.svb-t:hover { border-color: rgba(11,27,51,.3); box-shadow: var(--k-sh); }
#site .svb-kp { grid-column: span 2; grid-row: span 2; padding: clamp(28px, 3vw, 40px); background: var(--nvy); border-color: var(--nvy); color: #fff; }
#site .svb-seo, #site .svb-start { grid-column: span 2; }
#site .svb-txt { margin-top: auto; padding-right: 48px; }
#site .svb-kp .svb-txt { margin-top: 0; }
#site .svb-start .svb-txt { margin-top: 0; padding-right: 0; }
#site .svb-txt h3 { font-size: 1.22rem; line-height: 1.2; letter-spacing: -.02em; color: inherit; }
#site .svb-txt > p:not(.svx-k) { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--k-mu); }
#site .svb-kp .svx-k { color: #A9B8D0; }
#site .svb-kp h3 { margin: 12px 0 14px; font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -.04em; }
#site .svb-kp .svb-txt > p:not(.svx-k) { margin: 0; max-width: 44ch; font-size: 16px; line-height: 1.6; color: #C9D6E9; }
#site .svb-kp .svx-tags li { color: #A9B8D0; }
#site .svb-go { position: absolute; bottom: 22px; right: 22px; display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--k-line); border-radius: 50%; color: var(--k-ink); transition: background .25s, border-color .25s, color .25s; }
#site .svb-kp .svb-go { bottom: auto; top: clamp(24px, 2.6vw, 34px); right: clamp(24px, 2.6vw, 34px); border-color: rgba(255,255,255,.25); color: #fff; }
#site a.svb-t:hover .svb-go, #site a.svb-t:focus-visible .svb-go { background: var(--cb); border-color: var(--cb); color: #fff; }
#site .svb-start { background: none; border-style: dashed; border-color: rgba(11,27,51,.22); }
#site .svb-steps { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: s; }
#site .svb-steps li { display: flex; align-items: flex-start; gap: 14px; padding: 9px 0; font-size: 15px; color: var(--k-ink); counter-increment: s; }
#site .svb-steps li + li { border-top: 1px solid var(--k-line); }
#site .svb-steps li::before { content: "0" counter(s); flex: none; width: 22px; padding-top: 2px; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--k-mu); }
#site .svb-steps li i { display: none; }
#site .svb-start .svx-more { margin-top: auto; padding-top: 18px; align-self: flex-start; }

/* the small graphics: navy, cobalt and hairlines only */
#site .svb-g { position: relative; height: 128px; margin-bottom: 22px; }
#site .svb-g i, #site .svb-g b, #site .svb-g span { display: block; }
/* Keep pace: a staircase of five blocks climbing, one lit block stepping up it */
#site .g-kp { --c: 58px; --rise: 40px; flex: none; height: calc(var(--c) + 4 * var(--rise)); margin: auto 0 0; }
#site .g-kp i { position: absolute; left: calc(var(--i) * (100% - var(--c)) / 4); bottom: calc(var(--i) * var(--rise)); width: var(--c); height: var(--c);
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,calc(.03 + var(--i) * .03)); }
#site .g-kp b { position: absolute; left: 0; bottom: 0; width: var(--c); height: var(--c); background: #2C5FD8; box-shadow: 0 0 0 6px rgba(44,95,216,.22); }
#site .svx [data-r].is-in .g-kp b { animation: svbclimb 7s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes svbclimb {
  0%, 12% { left: 0; bottom: 0; opacity: 1; }
  20%, 32% { left: calc((100% - var(--c)) / 4); bottom: var(--rise); }
  40%, 52% { left: calc((100% - var(--c)) / 2); bottom: calc(2 * var(--rise)); }
  60%, 72% { left: calc(3 * (100% - var(--c)) / 4); bottom: calc(3 * var(--rise)); }
  80%, 94% { left: calc(100% - var(--c)); bottom: calc(4 * var(--rise)); opacity: 1; }
  97% { left: calc(100% - var(--c)); bottom: calc(4 * var(--rise)); opacity: 0; }
  100% { left: 0; bottom: 0; opacity: 0; } }
/* strategy: a two by two, one quick win pulsing top left */
#site .g-s .q { position: absolute; inset: 0; border: 1px solid var(--k-line);
  background: linear-gradient(var(--k-line), var(--k-line)) center / 1px 100% no-repeat, linear-gradient(var(--k-line), var(--k-line)) center / 100% 1px no-repeat,
    linear-gradient(rgba(44,95,216,.07), rgba(44,95,216,.07)) 0 0 / 50% 50% no-repeat; }
#site .g-s i { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 8px; margin: -4px; background: rgba(11,27,51,.3); }
#site .g-s i.on { width: 12px; height: 12px; margin: -6px; background: var(--cb); }
#site .g-s i.on::after { content: ""; position: absolute; inset: -6px; border: 1.5px solid var(--cb); opacity: 0; }
#site .svx [data-r].is-in .g-s i.on::after { animation: svbping 2.4s ease-out infinite; }
@keyframes svbping { 0% { opacity: .7; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(1.5); } }
/* workflows: three steps joined, one item travelling through them */
#site .g-w .ln { position: absolute; left: 10%; right: 10%; top: 50%; border-top: 1.5px dashed rgba(11,27,51,.28); }
#site .g-w i { position: absolute; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; background: #fff; border: 1.5px solid var(--nvy); }
#site .g-w i:nth-of-type(1) { left: 10%; } #site .g-w i:nth-of-type(2) { left: 50%; } #site .g-w i:nth-of-type(3) { left: 90%; background: var(--nvy); }
#site .g-w b { position: absolute; top: 50%; left: 10%; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--cb); z-index: 1; }
#site .svx [data-r].is-in .g-w b { animation: svbflow 3.2s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes svbflow { 0% { left: 10%; opacity: 0; } 8% { opacity: 1; } 40%, 52% { left: 50%; } 88% { left: 90%; opacity: 1; } 100% { left: 90%; opacity: 0; } }
/* agents: a question, an answer, typing */
#site .g-a { display: flex; flex-direction: column; justify-content: center; gap: 9px; }
#site .g-a .u { align-self: flex-end; width: 56%; padding: 10px 12px; background: var(--nvy); border-radius: 10px 10px 2px 10px; }
#site .g-a .u i { height: 6px; width: 80%; background: rgba(255,255,255,.5); border-radius: 3px; }
#site .g-a .b { width: 70%; padding: 10px 12px; display: grid; gap: 6px; background: #fff; border: 1px solid var(--k-line); border-radius: 10px 10px 10px 2px; }
#site .g-a .b i { height: 6px; background: rgba(11,27,51,.18); border-radius: 3px; } #site .g-a .b i + i { width: 62%; background: rgba(44,95,216,.45); }
#site .g-a .t { display: flex; gap: 5px; padding-left: 4px; }
#site .g-a .t i { width: 6px; height: 6px; background: var(--k-mu); opacity: .3; }
#site .svx [data-r].is-in .g-a .t i { animation: svbtype 1.2s infinite; }
#site .g-a .t i:nth-child(2) { animation-delay: .15s !important; } #site .g-a .t i:nth-child(3) { animation-delay: .3s !important; }
@keyframes svbtype { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
/* apps: a page being laid out */
#site .g-ap { border: 1px solid var(--k-line); border-radius: 5px; background: #fff; overflow: hidden; }
#site .g-ap .bar { display: flex; gap: 5px; padding: 7px 9px; border-bottom: 1px solid var(--k-line); background: #EEF2F9; }
#site .g-ap .bar i { width: 7px; height: 7px; background: rgba(11,27,51,.2); }
#site .g-ap .pg { display: grid; gap: 7px; padding: 12px; }
#site .g-ap .h { height: 8px; width: 58%; background: var(--nvy); }
#site .g-ap .h2 { height: 8px; width: 36%; background: var(--cb); }
#site .g-ap .cs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 4px; }
#site .g-ap .cs i { height: 38px; background: #EEF2F9; border: 1px solid var(--k-line); }
#site .svx [data-r].is-in .g-ap .cs i { animation: svbcell 4.8s ease-in-out infinite; }
#site .g-ap .cs i:nth-child(2) { animation-delay: .4s !important; } #site .g-ap .cs i:nth-child(3) { animation-delay: .8s !important; }
@keyframes svbcell { 0%, 30%, 100% { background: #EEF2F9; } 12% { background: rgba(44,95,216,.16); } }
/* seo and geo: a search, the top answer growing */
#site .g-seo { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
#site .g-seo .sq { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; border: 1px solid var(--k-line); border-radius: 100px; background: #fff; }
#site .g-seo .sq svg { width: 16px; height: 16px; fill: none; stroke: var(--k-mu); stroke-width: 2; stroke-linecap: round; }
#site .g-seo .sq i { height: 6px; width: 40%; background: rgba(11,27,51,.18); border-radius: 3px; }
#site .g-seo .svb-res { display: grid; gap: 9px; }
#site .g-seo .svb-res i { height: 9px; width: 64%; background: rgba(11,27,51,.12); }
#site .g-seo .svb-res i + i { width: 52%; } #site .g-seo .svb-res i + i + i { width: 40%; }
#site .g-seo .svb-res i.on { width: 88%; background: var(--cb); transform-origin: left; }
#site .svx [data-r].is-in .g-seo .svb-res i.on { animation: svbgrow 4s cubic-bezier(.3,1,.4,1) infinite; }
@keyframes svbgrow { 0% { transform: scaleX(.3); } 40%, 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { #site .svx .svb-g * { animation: none !important; } }
@media (max-width: 1100px) {
  #site .svb { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  #site .svb-kp { grid-row: auto; }
  #site .svb-kp .g-kp { margin-top: 36px; }
}
@media (max-width: 640px) {
  #site .svb { grid-template-columns: 1fr; }
  #site .svb-t, #site .svb-kp, #site .svb-seo, #site .svb-start { grid-column: auto; }
  #site .g-kp { --c: 44px; --rise: 30px; }
}