/* ---------- Homepage "Whatever your situation" cards: motion ---------- */
/* Parallax: each card's picture sits slightly oversized inside its frame and drifts
   a little slower than the page as you scroll (js/service-motion.js sets --py).
   No hover zoom: the picture holds still under the pointer. */
.service-img { position: relative; }
.service-img > *, .service-img > .live-shot {
  translate: 0 var(--py, 0px);
  scale: 1.3;
  will-change: translate;
}
.service-card:hover .service-img img { transform: none; }
/* The live website preview stays at its true size: zooming it crops the page it shows. */
.service-img > .live-shot { translate: none; scale: 1; }

/* Real Estate card: walk through the gate into the courtyard, rest, then fade back and repeat. */
.service-img video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; background: var(--bg-alt);
}

@media (prefers-reduced-motion: reduce) {
  .service-img > * { translate: none; scale: 1; }
}

/* ---------- Homepage calculators: faint figures quietly calculating ---------- */
/* Replaces the moving curves. Soft numbers count up, hold, fade and reappear
   elsewhere on the grid paper (js/service-motion.js fills .calc-ticker). */
.calc-ticker { position: absolute; inset: 0; overflow: hidden; }
.calc-ticker .tick {
  position: absolute; white-space: nowrap;
  font-family: var(--serif); font-weight: 600; font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(1.2rem, 1.55vw, 1.9rem); letter-spacing: 0.02em;
  color: var(--navy); opacity: 0; transition: opacity 1.6s ease;
}
.calc-ticker .tick.gold { color: var(--brass); }
.calc-ticker .tick.on { opacity: 0.2; }
/* Below this width the side margins are too narrow for figures; the grid paper stays. */
@media (max-width: 1180px) { .calc-ticker { display: none; } }