/* ============================================================
   HOMEPAGE SERVICES — three cards (AI Agents, AI Jumpstart, AI Deployment Studio)
   Replaced the two puzzle pieces and the slim agents callout on 2026-09-22.
   Lives inside the second scaled .stage, so it is drawn at the 1440 design
   width; below 900px the stage is unscaled and the cards stack.
   Each card is a drawing first, then a name, one sentence, four icon bullets
   and a button. Colour follows the nav's service chips: agents purple,
   Jumpstart blue, Studio green.
   Motion: one quiet loop per drawing, started once the grid is seen
   (.svc3.is-seen). Every element's base style is its finished frame, so
   reduced motion and no-JS show a complete picture.
   ============================================================ */
.svc3 { list-style: none; margin: 72px auto 0; padding: 0; max-width: 1240px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.svc3__card { --tint: #f3f0ff; --chip: #ddd4ff; display: flex; flex-direction: column; padding: 16px 16px 24px; background: #fff; border: 1.5px solid #000; border-radius: 20px; box-shadow: 6px 6px 0 rgba(0, 0, 0, .07); }
.svc3__card--jumpstart { --tint: #eef4ff; --chip: #c6dbff; }
.svc3__card--studio { --tint: #f1fbec; --chip: #caf0be; }
.svc3__art { margin: 0 0 20px; height: 200px; border: 1.5px solid #000; border-radius: 14px; background: var(--tint); overflow: hidden; }
.svc3__art svg { display: block; width: 100%; height: 100%; }
.svc3__body { display: flex; flex-direction: column; flex: 1; padding: 0 8px; }
.svc3__badge { align-self: flex-start; display: inline-flex; align-items: center; padding: 6px 12px; border: 1.5px solid #000; border-radius: 99px; background: var(--chip); font: 500 12px/1 "Neue Montreal", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.svc3__card h3 { margin: 14px 0 0; font: 500 28px/1.15 "Neue Montreal", system-ui, sans-serif; letter-spacing: -.01em; }
.svc3__line { margin: 10px 0 0; font: 400 16.5px/1.5 "Neue Montreal", system-ui, sans-serif; color: #333; }
.svc3__list { list-style: none; margin: 20px 0 24px; padding: 18px 0 0; border-top: 1px dashed rgba(0, 0, 0, .28); display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 12px 10px; }
.svc3__list li { display: flex; align-items: center; gap: 8px; font: 500 14px/1.25 "Neue Montreal", system-ui, sans-serif; }
.svc3__icon { flex: none; width: 30px; height: 30px; border: 1.2px solid #000; border-radius: 9px; background: var(--tint); display: grid; place-items: center; }
.svc3__icon img { width: 18px; height: 18px; display: block; }
.svc3__cta { margin-top: auto; align-self: flex-start; }
.svc3__arrow { white-space: nowrap; margin-left: .25em; }
/* Each button is an outline and fills with its card's colour on hover (overrides .btn--secondary's black hover). */
.svc3__card { --cta: #ddd4ff; }
.svc3__card--jumpstart { --cta: #c6dbff; }
.svc3__card--studio { --cta: #caf0be; }
.svc3__card .svc3__cta { background: transparent; color: #000; border-color: #000; transition: background .2s ease; }
.svc3__card .svc3__cta:hover, .svc3__card .svc3__cta:focus-visible { background: var(--cta); color: #000; border-color: #000; }

/* ---- motion ---- */
.svc3 .sv-ring, .svc3 .sv-ai, .svc3 .sv-row, .svc3 .sv-bar, .svc3 .sv-live, .svc3 .sv-pulse { transform-box: fill-box; transform-origin: center; }
.svc3 .sv-row, .svc3 .sv-bar { transform-origin: 0 50%; }
.svc3 .sv-ride { offset-rotate: 0deg; }
/* Agents: a selection moves across the catalog, one team's agent at a time; the agent breathes. */
.svc3.is-seen .sv-ring { animation: sv-ring 9s cubic-bezier(.65, 0, .35, 1) infinite; }
.svc3.is-seen .sv-ai { animation: sv-breathe 4.5s ease-in-out infinite; }
@keyframes sv-ring {
  0%, 13% { transform: none; }
  16.7%, 30% { transform: translate(76px, 0); }
  33.3%, 46% { transform: translate(152px, 0); }
  50%, 63% { transform: translate(0, 64px); }
  66.7%, 80% { transform: translate(76px, 64px); }
  83.3%, 96% { transform: translate(152px, 64px); }
  100% { transform: none; }
}
@keyframes sv-breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.07); } }
/* Jumpstart: a mark walks the mapped process, the AI step pulses, the prototype fills in. */
.svc3.is-seen .sv-ride { animation: sv-ride 6.5s ease-in-out infinite; }
.svc3.is-seen .sv-pulse { animation: sv-pulse 3.2s ease-out infinite; }
.svc3.is-seen .sv-row { animation: sv-grow 6.5s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) infinite backwards; }
@keyframes sv-ride { 0% { offset-distance: 0%; opacity: 0; } 8%, 78% { opacity: 1; } 86%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes sv-pulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes sv-grow { 0%, 58% { transform: scaleX(.2); } 72%, 94% { transform: none; } 100% { transform: scaleX(.2); } }
/* Studio: sprints fill in one after another, then it goes live. */
.svc3.is-seen .sv-bar { animation: sv-build 8s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) infinite backwards; }
.svc3.is-seen .sv-live { animation: sv-live 8s ease-in-out infinite; }
@keyframes sv-build { 0% { transform: scaleX(.12); } 16%, 88% { transform: none; } 100% { transform: scaleX(.12); } }
@keyframes sv-live { 0%, 44%, 60%, 100% { transform: none; } 50% { transform: scale(1.12); } }
/* The AI agent playbook callout under the three cards: the three-lane drawing, one line, one button.
   The mark rides the drawing once when the grid is seen, then rests on the outcome. */
.svc3-more { max-width: 1240px; margin: 64px auto 0; display: flex; align-items: center; gap: 28px; padding: 14px 24px 14px 14px; background: #fff; border: 1.5px solid #000; border-radius: 20px; color: #000; text-decoration: none; }
.svc3-more__art { flex: none; width: 220px; height: 96px; border: 1.5px solid #000; border-radius: 14px; background: #fff; overflow: hidden; }
.svc3-more__art svg { display: block; width: 100%; height: 100%; }
.svc3-more__copy { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.svc3-more__tag { display: inline-flex; padding: 5px 11px; border: 1.5px solid #000; border-radius: 99px; background: #ffeba1; font: 500 12px/1 "Neue Montreal", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.svc3-more__line { font: 500 18px/1.4 "Neue Montreal", system-ui, sans-serif; letter-spacing: -.01em; text-wrap: pretty; }
.svc3-more__btn { flex: none; background: transparent; color: #000; border-color: #000; transition: background .2s ease; }
.svc3-more:hover .svc3-more__btn, .svc3-more:focus-visible .svc3-more__btn { background: #ffeba1; color: #000; border-color: #000; }
.svc3-more__dot { offset-rotate: 0deg; offset-distance: 100%; }
.svc3.is-seen + .svc3-more .svc3-more__dot { animation: sv-play 3.6s cubic-bezier(.45, 0, .25, 1) .6s backwards; }
@keyframes sv-play { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .svc3 * { animation: none !important; }
  .svc3-more__dot { animation: none !important; }
}

@media (max-width: 899px) {
  .svc3 { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 36px; }
  .svc3__art { height: 180px; }
  .svc3__card h3 { font-size: 26px; }
  .svc3__cta { align-self: stretch; text-align: center; }
  .svc3-more { flex-direction: column; align-items: stretch; gap: 16px; padding: 14px 14px 20px; margin-top: 40px; }
  .svc3-more__art { width: 100%; height: auto; aspect-ratio: 220 / 96; }
  .svc3-more__copy { padding: 0 6px; }
  .svc3-more__line { font-size: 18px; }
  .svc3-more__btn { align-self: stretch; text-align: center; margin: 0 6px; }
}