/* service-steps.css — the numbered-steps band family, split out of
   service.css at the 500-line hard cap (discipline 10, 2026-07-25 —
   hinnasto.css precedent). Loaded AFTER service.css (head.html).
   Laws live-measured in the W5.3 owner-catch batch 2026-07-25:
   docs/reviews/2026-07-25-w53-data/. */

/* r4 measured: live steps band pad 80, icons 80x80, card text 15.75,
   heading size-m 26.25 (asunto/remontti probed), row fits 3 OR 4 */
.svc-steps { background: var(--ll-gray); text-align: center;
  padding: 5rem var(--ll-sp-6); }  /* r6: live steps band pt/pb 80
  FIXED at every width (census 1440-3440) */
/* r4 verify: live band bg varies per page — beige on asunto/remontti,
   white on matka, warm gray only on kulu (class set by template map) */
.svc-steps--beige { background: var(--ll-beige); }
.svc-steps--white { background: var(--ll-surface); }
.svc-steps-inner { max-width: var(--ll-shell); margin: 0 auto; }
/* W5.3 2026-07-25 re-measure: band heading rhythm is relY 96 / gap 50
   on the default (42px) pages and relY 96 / gap 76 on the small (30px)
   variant — and the small-heading set IS the wide layout family (all 7
   pages probed rel 206-207 vs 194/243). hsmall retired into --wide. */
.svc-steps-inner > h2, .svc-steps-inner > h3 {
  font-size: var(--ll-fs-h2); margin: 1rem auto 3.125rem;
  max-width: 56rem; }  /* live heading column is the 940 group; 896
  is a font-metric compensation (W5.3 2026-07-25): Inter renders vene
  917 / moottoripyora 939 naturally, squeezing onto one line where
  the live font wraps at 940 — 896 reproduces live's line count for
  every band heading at every width regime (verified vene/moottori/
  matka/auto/valittajana @1440+1920) */
.svc-steps--wide .svc-steps-inner > h2,
.svc-steps--wide .svc-steps-inner > h3 {
  font-size: var(--ll-fs-h3); margin: 0 auto 3.5rem;
  max-width: none; }  /* wide band: rel 96+35+56+20(card pad) = 207 */
/* W5.3 owner catch 2026-07-25 (steps-probe2, live @1440+1920): THREE
   grid families, all centered flex-wrap rows —
   narrow (default): 271px cards, pitch 335, 940 group, SAME at 1440
   and 1920 (fixed px, not R-scaled); kulu family + article blocks.
   wide: card = row/3 (450 @1440 / 533.33 @1920 — the 28.125rem flex
   pin was the 1440 value again); 5-step pages wrap 3+2 with the pair
   centered, which flex gives for free; content sits 10px left of the
   cell center on live (pad-right 1.25rem).
   four (matka): 220px cards, pitch 240, one row of 4 in the 940 group. */
.svc-steps-row { display: flex; flex-wrap: wrap;
  justify-content: center; gap: 3rem 3.96875rem; margin: 0 auto;
  text-align: center; }
.svc-step { flex: 0 0 16.9375rem; max-width: 100%; }
/* W5.3 2026-07-25 card-anatomy probe: live wide cards are quad grids —
   icon 80 / FIXED heading band 8R (content centered, 1- and 2-line
   heads share the band) / text, cell gaps 1.25R, card pads 1.25R
   top+bottom and 0.625R/1.875R left/right (content 493 @1920, icons
   10px left of cell center), flex row gap 2.5R; heading line box
   2.4375R unifies both title variants (30/1.3 and pl 26/1.5). */
.svc-steps--wide .svc-steps-row { gap: calc(2.5 * var(--ll-r)) 0;
  max-width: var(--ll-row); }
.svc-steps--wide .svc-step { flex: 0 0 calc(var(--ll-row) / 3);
  padding: calc(1.25 * var(--ll-r)) calc(1.875 * var(--ll-r))
    calc(1.25 * var(--ll-r)) calc(0.625 * var(--ll-r)); }
.svc-steps--wide .svc-step p:has(> img) {
  margin: 0 0 calc(1.25 * var(--ll-r)); }
.svc-steps--wide .svc-step h3, .svc-steps--wide .svc-step h4,
.svc-steps--wide .svc-step h5 {
  min-height: calc(8 * var(--ll-r)); display: flex;
  align-items: center; justify-content: center;
  line-height: calc(2.4375 * var(--ll-r));
  margin: 0 0 calc(1.25 * var(--ll-r)); }
/* asuntokaupan-purku is the wide family's odd card: live builds it as
   a FLOW vflex (icon / spacer-20 / heading mt10 mb10 / spacer-20 /
   text — no fixed heading band), not the quad grid (child-walked
   2026-07-25); heights are content-driven per card. */
.service-asuntokaupan-purku .svc-step h3,
.service-asuntokaupan-purku .svc-step h4,
.service-asuntokaupan-purku .svc-step h5 {
  min-height: 0; display: block;
  margin: calc(0.625 * var(--ll-r)) 0 calc(1.875 * var(--ll-r)); }
.svc-steps--four .svc-steps-row { gap: 3rem 1.25rem; }
.svc-steps--four .svc-step { flex: 0 0 13.75rem; }
.svc-step img { width: 80px; height: 80px; margin: 0 auto;
  display: block; }  /* block kills the inline baseline slack under
  the icon (W5.3 2026-07-25) */
.svc-step h3, .svc-step h4, .svc-step h5 {
  font-family: var(--ll-font-heading); font-size: var(--ll-fs-h3);
  font-weight: 400; margin: 1rem 0 1rem; line-height: 1.15;
  color: var(--ll-green); }  /* W5.3 2026-07-25: live 30/34.5 mt16
  mb16 @1920 (matka+kulu probed; was lh 1.3 / mb 12) */
/* W5.3: the old --hsmall band padding rides the wide family now —
   hsmall retired, its pages == the wide set; card heading rhythm
   comes from the quad-grid block above. */
.svc-steps--wide { padding: 6rem var(--ll-sp-6) 3.75rem; }

/* page variants (round 4, live-measured): tyooikeus step titles are
   paragraph-l (22.75/26); kulu's FAQ column is 940 (asunto 880).
   r6: the tyooikeus hero min-height:0 override removed — live renders
   the standard 50vw x 100vh hero photo there too (probed 1440+2560) */
.service-tyooikeus-ja-tyoriidat .svc-step h3,
.service-tyooikeus-ja-tyoriidat .svc-step h4,
.service-tyooikeus-ja-tyoriidat .svc-step h5,
.service-vakuutusriidat .svc-step h3,
.service-vakuutusriidat .svc-step h4,
.service-vakuutusriidat .svc-step h5 {
  font-size: var(--ll-fs-pl); }  /* W5.3 2026-07-25: vakuutus titles
  are paragraph-l on live too (22.75 @1440 probed) */
.svc-step h3 a, .svc-step h5 a { color: var(--ll-green); }
.svc-step p { font-size: var(--ll-fs-base); line-height: 1.44;
  margin: 0 0 0.75rem; }  /* W5.3 2026-07-25: live card text is the
  1.125R body law (18/25.92 @1920 probed) — the r3 "14/20" was a
  band-width reading; fs-small was the pin */
/* W5.3 2026-07-25: the "Ota yhteyttä" pill lives INSIDE the last step
   cell on live and centers on that column (CTA center == last icon
   center at 1440 AND 1920, every family incl. the 5-step second row);
   pill metrics = the standard live button (same spec as the hero
   pill, 250x49 @1920). Only matka's white band runs a band-row CTA
   (.svc-steps-cta, centered). */
.svc-step .pill-row > a { display: inline-block; margin-top: 1rem;
  border: 1px solid var(--ll-green); border-radius: 999px;
  color: var(--ll-green); background: var(--ll-bg);
  line-height: var(--ll-lh-ui);
  padding: calc(0.84375 * var(--ll-r)) calc(4.5 * var(--ll-r));
  text-decoration: none; }
.svc-steps-cta { margin-top: 2.5rem; text-align: center; }
.svc-steps-cta a { display: inline-block;
  border: 1px solid var(--ll-green); border-radius: 999px;
  color: var(--ll-green); background: var(--ll-bg);
  line-height: var(--ll-lh-ui);
  padding: calc(0.84375 * var(--ll-r)) calc(4.5 * var(--ll-r));
  text-decoration: none; }


@media (max-width: 991px) {
  .svc-steps, .svc-steps--wide { padding: 3rem 1.5rem; }
  /* r6: live mobile steps run ~70px roomier per item; base row is
     flex since W5.3 2026-07-25 — same stacked geometry as the old
     grid-1fr (D5-verified): full-width cards, 2.5rem gap */
  .svc-steps-row { flex-direction: column; align-items: stretch;
    gap: 2.5rem; }
  .svc-step, .svc-steps--wide .svc-step, .svc-steps--four .svc-step {
    flex: 0 0 auto; padding: 0; }
  .svc-step img { margin-bottom: 1rem; }
  .svc-step h3, .svc-step h4, .svc-step h5 { margin-top: 1.5rem; }
}

/* live mobile small-width type (matches service.css tail block) */
@media (max-width: 47.9rem) {
  .svc-step h3, .svc-step h4, .svc-step h5 { font-size: 1.406rem;
    margin-top: 1rem; }
  .svc-steps-cta { text-align: center; }
}