/* service pages (designed layout, W2c r3) — live MEASURED 2026-07-19
 * on /kuluttajansuoja-autokaupassa + /asuntokaupan-purku screenshots:
 * split hero (ivory text left w/ pill + chevron TOC rows, photo right
 * full-bleed), 3-step icon band on warm gray, alternating two-column
 * photo sections (beige/ivory), bordered link rows, FAQ + article
 * strip bands. Applies only inside .service-page. */

main:has(> .service-page) { max-width: none; padding: 0; }

/* r4 (measured 2026-07-20): live hero spans to y=900 — photo column
   runs the full viewport height under the fixed nav; our header is
   in-flow 118px, so the row floors at 100vh - 118px and the image box
   extends 118px above the tile (staff-hero pattern) */
.svc-hero { display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ll-bg);
  min-height: calc(100vh - var(--ll-header-h)); }
/* D4p2 (2026-07-24, live probed at 6 widths): the hero text column is
   a 100vh two-row grid — intro stack (h1 + hr + text + spacer + pill)
   bottom-aligned in row 1, TOC stack bottom-aligned in row 2. Live:
   grid pad-top 10R, pad-bottom 32.4, row-gap 2R, rows =
   (100vh - 10R - 32.4)/2; column width = (row/2 - 20) * 0.9
   (384/500/590/590/702/702), left edge at the shell edge. Our header
   is in-flow (live nav is fixed), so the grid spans 100vh with a
   negative header-height top margin to keep viewport-absolute
   geometry identical. */
.svc-hero-text {
  padding-left: max(2.8125rem, calc((100vw - var(--ll-row)) / 2));
  max-width: calc(max(2.8125rem, calc((100vw - var(--ll-row)) / 2))
    + (var(--ll-row) / 2 - 20px) * 0.9);
  justify-self: stretch; align-self: start; }
@media (min-width: 62rem) {
  .svc-hero:not(.svc-hero--sub) .svc-hero-text {
    height: 100vh; margin-top: calc(0px - var(--ll-header-h));
    /* minmax(0,1fr): a longer (open-font-wrapped) intro must overflow
       upward, never grow its row — live's rows are viewport-fixed */
    display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: calc(2 * var(--ll-r));
    padding-top: calc(10 * var(--ll-r));
    padding-bottom: calc(32.4px - 2 * var(--ll-r)); }
  .svc-hero:not(.svc-hero--sub) .svc-hero-text > * { align-self: end; }
}
.svc-hero-intro { display: flex; flex-direction: column;
  align-items: flex-start; }
/* live .hr: real 1px element, full column, margin-bottom 2R */
.svc-hr { align-self: stretch; height: 1px;
  background: var(--ll-green); margin-bottom: calc(2 * var(--ll-r)); }
/* live intro stack rhythm (desktop, TOC heroes): h1 margins 16 fixed,
   text-block margins 0, spacer-40 before the pill button */
@media (min-width: 62rem) {
  .svc-hero:not(.svc-hero--sub) .svc-hero-intro h1 { margin: 16px 0; }
  .svc-hero:not(.svc-hero--sub) .svc-hero-intro p { margin: 0;
    align-self: stretch; }
  .svc-hero:not(.svc-hero--sub) .svc-hero-intro .pill-row {
    margin-top: 40px; }
}
.svc-hero-text h1 { font-size: var(--ll-fs-h2); }
/* sub-service short heroes keep the r6 anatomy (unmeasured by D4p2);
   desktop-scoped so the mobile block below still wins there */
@media (min-width: 62rem) {
  .svc-hero--sub .svc-hero-text { padding: 4.75rem var(--ll-sp-6) 3rem
      max(2.8125rem, calc((100vw - var(--ll-row)) / 2)); }
}
.svc-hero--sub .svc-hero-text h1 { margin: 0 0 1.25rem; }
.svc-hero--sub .svc-hero-text h1::after { content: ""; display: block;
  width: 36.9rem; max-width: 100%;
  border-bottom: 1px solid var(--ll-green); padding-top: 1.5rem; }
.svc-hero-img { position: relative; min-height: 28rem;
  overflow: hidden; }
.svc-hero-img img { position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: calc(100% + var(--ll-header-h));
  object-fit: cover; }
.svc-hero-img:empty { display: none; }
/* r6: TOC-less sub-service pages keep a SHORT content-driven hero on
   live — img at natural size, pane-clamped, top-anchored (940x627
   @2560, 720x480 @1440) — not the 100vh service hero */
.svc-hero--sub { min-height: 0; }
.svc-hero--sub .svc-hero-img { min-height: 0; }
.svc-hero--sub .svc-hero-img img { position: static; width: auto;
  max-width: 100%; height: auto; }
.svc-hero:has(.svc-hero-img:empty) { grid-template-columns: 1fr; }

/* standalone links in the hero intro = pill buttons. D4p2: live
   button pads are R-scaled — vertical 0.84375R at every width,
   horizontal 4.5R >=1440 but 2.25R in the 992-1439 band (Webflow's
   sub-1440 button pad; 22.32/28.8/63/63/72/72 measured) */
.svc-hero-text .pill-row > 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 (min-width: 62rem) and (max-width: 89.9375rem) {
  .svc-hero-text .pill-row > a {
    padding-left: 2.25vw; padding-right: 2.25vw; }
}

.svc-toc { margin-top: 2rem; }
/* in the hero grid the TOC is placed by its row; live's TOC stack
   ends with a spacer-40 above the grid bottom */
@media (min-width: 62rem) {
  .svc-hero:not(.svc-hero--sub) .svc-toc { margin: 0;
    padding-bottom: 40px; }
}
/* round 4: live label is a 26px serif heading, not bold body.
   D4p2: fs 26 FIXED at every width, lh 1.2, margins 8px 0 (measured) */
.svc-toc-label { font-family: var(--ll-font-heading); font-weight: 400;
  font-size: 26px; line-height: 1.2; color: var(--ll-green);
  margin: 8px 0; }
/* D4p2 row law (live measured 992-2560): link at body-default size
   (1R, NOT text-block 1.125R) on the UI line-height, pad-bottom 0.5R,
   wrapper gap 0.5714R -> pitch 24/31/35/35/37/37 */
.svc-toc p { margin: 0 0 calc(0.5714 * var(--ll-r)); }
/* live: the final TOC row (FAQ) sits 1.5R lower (wrapper 39/56/61 vs
   24/35/37 = +1.5R at every width) */
.svc-toc p:last-of-type { margin-top: calc(1.5 * var(--ll-r)); }
.svc-toc p > a { display: flex; align-items: center;
  justify-content: space-between; border: none;
  border-bottom: 1px solid var(--ll-moss);
  padding: 0 1rem calc(0.5 * var(--ll-r)) 0; color: var(--ll-green);
  font-size: var(--ll-fs-small); line-height: var(--ll-lh-ui);
  text-decoration: none; background: none; }
.svc-toc p > a::after { content: "›"; color: var(--ll-green);
  font-size: 1.2rem; margin-left: 1rem; }

/* W5.3 owner catch 2026-07-24: kulu's FAQ is the odd one out — live
   runs it UNCAPPED at 2/3 viewport minus the column pads (940 was
   only the 1440 value), tablet = full row (vw-20) with a 40px card
   inset, <=767 = vw-20 full-bleed, <=479 = 100vw. Other FAQ service
   pages follow the article 12-col law (measured 1047@1920, 748@1280
   on moottoripyora/asuntokaupan-purku/perinnonjako = base rule). */
.service-kuluttajansuoja-autokaupassa .faq-wrapper {
  max-width: calc(66.667vw - 20px); }
@media (min-width: 48rem) and (max-width: 61.9375rem) {
  .service-kuluttajansuoja-autokaupassa .faq {
    padding-left: 10px; padding-right: 10px; }
  .service-kuluttajansuoja-autokaupassa .faq-inner {
    margin-left: 0; margin-right: 0; }
  .service-kuluttajansuoja-autokaupassa .faq-wrapper {
    max-width: calc(100vw - 20px); padding: 0 40px; } }
@media (max-width: 47.9375rem) {
  .service-kuluttajansuoja-autokaupassa .faq {
    padding-left: 0; padding-right: 0; }
  .service-kuluttajansuoja-autokaupassa .faq-wrapper {
    max-width: calc(100vw - 20px); } }
@media (max-width: 29.9375rem) {
  .service-kuluttajansuoja-autokaupassa .faq-wrapper {
    max-width: 100vw; } }
/* link-list text columns: live rows 434-511 wide */
.svc-links .svc-split-text { max-width: calc(33.1875rem
  + max(2.8125rem, calc((100vw - var(--ll-shell)) / 2))); }
.svc-split { display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ll-bg); }
/* r4 round-3: SIDE and BACKGROUND are independent live sequences
   (asunto: media-left panel is BEIGE-1, media-right is gray) —
   svc-split-rev now carries order only, svc-split--gray the color */
.svc-split--gray { background: var(--ll-gray); }
/* round 4: text-left split columns start at the container edge —
   r5: the edge is shell-relative (45 @1440, 160 @1920), not fixed */
.svc-split-text { padding: 4.5rem 1.5rem 4.5rem
    max(2.8125rem, calc((100vw - var(--ll-shell)) / 2));
  max-width: calc(41.1875rem
    + max(2.8125rem, calc((100vw - var(--ll-shell)) / 2)));
  justify-self: start; align-self: center; }
.svc-split-rev .svc-split-text { order: 2; justify-self: start;
  padding-left: 4rem; }
.svc-split-rev .svc-split-img { order: 1; }
.svc-split-text h2, .svc-split-text h3 { font-size: var(--ll-fs-h2);
  margin: 0 0 1.5rem; }
.svc-split-text p { font-size: var(--ll-fs-base); }
/* r4: live has no height floor — the photo's natural height at column
   width drives the section (e.g. 720x506 band); when the text column
   is taller the photo cover-fills. In-flow img with height:100%
   resolves to natural height when the image is the taller side. */
.svc-split-img { position: relative; min-height: 0; }
.svc-split-img > p { margin: 0; height: 100%; }
.svc-split-img > p img { display: block; width: 100%; height: 100%;
  object-fit: cover; }
.svc-split-img .video-embed { margin: 3rem 2rem; }
.svc-split-text .pill-row > a { display: inline-block;
  border: 1px solid var(--ll-green); border-radius: 999px;
  color: var(--ll-green); background: var(--ll-bg); line-height: 1.3;
  padding: 0.74rem 3.94rem;
  text-decoration: none; }
/* link-list sections: standalone links = underline-separator chevron
   rows (r4 verify: live has bottom rules only, on a beige section) */
.svc-links .svc-split-text > p { margin: 0; }
.svc-links .svc-split-text .pill-row > a { display: flex;
  align-items: center; justify-content: space-between; border-radius: 0;
  border: none; border-bottom: 1px solid var(--ll-moss);
  padding: 0 1rem 0.3rem 0; font-size: var(--ll-fs-base); background: none; }
.svc-links .svc-split-text .pill-row > a::after { content: "›";
  color: var(--ll-green); font-size: 1.2rem; margin-left: 1rem; }
.svc-split.svc-links { background: var(--ll-beige); }

.svc-prose { background: var(--ll-bg); text-align: center;
  padding: 6rem var(--ll-sp-6); }  /* r4: live section 414 */
.svc-prose-inner { max-width: 38rem; margin: 0 auto; }
.svc-prose-inner h4 { font-size: var(--ll-fs-h3); }  /* round 4:
  live CTA heading 26.25, was inheriting body 15.75 */
/* round 3: on kulu the live prose band is beige-2, continuous with
   the links+FAQ region (page-specific, template map) */
.svc-prose--beige2 { background: var(--ll-beige); }
.svc-prose-inner h2, .svc-prose-inner h3 { font-size: var(--ll-fs-h2); }
.svc-prose-inner .pill-row > a { display: inline-block;
  border: 1px solid var(--ll-green); border-radius: 999px;
  color: var(--ll-green); padding: 0.74rem 2.5rem;
  text-decoration: none; }

/* r4 measured: live strip pad 43.2/0, cards 323x220 r5, 20px gaps */
.svc-articles { background: var(--ll-beige);
  padding: 2.7rem var(--ll-sp-6); }
.svc-articles-inner { max-width: var(--ll-shell); margin: 0 auto;
  position: relative; }
.svc-articles .all-link { position: absolute; top: 1.7rem; right: 0;
  font-size: var(--ll-fs-small); }
.svc-articles .card-grid { margin: 0; gap: 1.25rem; }
.svc-articles .card { background: none; box-shadow: none;
  border-radius: 0; }
.svc-articles .card-img { height: 13.75rem; border-radius: 5px;
  filter: grayscale(1) sepia(.15); }  /* r6: live keeps strip images
  220 tall at every width (323/385 wide) */
.svc-articles .card-title { padding: 1.25rem 0 0; margin: 0 0 1.7rem;
  font-family: var(--ll-font); font-size: 1.1375rem; font-weight: 600; }
.svc-articles .card-excerpt { display: none; }

@media (max-width: 991px) {
  /* minmax(0,1fr): plain 1fr lets long unbreakable words (Kilpailu-
     kieltosopimuksesta) blow the column past the viewport (r6) */
  .svc-hero, .svc-split { grid-template-columns: minmax(0, 1fr); }
  .svc-split-text h2, .svc-split-text h3,
  .svc-hero-text h1 { overflow-wrap: anywhere; }
  /* r4 mobile: viewport-height floor + extended image box are
     desktop anatomy only */
  .svc-hero { min-height: 0; }
  .svc-hero-img img { height: 100%; }
  .svc-hero-img { order: -1; }
  .svc-split-img { order: 0; }
  .svc-split-text { order: 1; }
  .svc-hero-text, .svc-split-text { padding: 2rem 1.5rem;
    justify-self: stretch; max-width: none; }
  .svc-split-rev .svc-split-text { order: 0; padding-left: 1.5rem; }
  .svc-split-rev .svc-split-img { order: 1; }
  .svc-split-img { min-height: 16rem; }
  /* r6: live tablet/mobile hero photo is a tall square-ish pane inset
     5vw on the left (732x725 @768), not a 256px strip */
  .svc-hero-img { min-height: 0; aspect-ratio: 1 / 1;
    margin-left: 5vw; }
}

/* /ota-yhteytta — live split layout (screenshot-measured 2026-07-19):
   ivory text left, moss form column right, beige map band below */
main:has(> .contact-page) { max-width: none; padding: 0; }
.contact-hero { display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ll-bg);
  min-height: calc(100vh - 118px); }  /* r6: live split = 100vh at
  every width (container h 1440 @x1440 census) */
/* r4: live h1 sits at x=45 (container edge), not indented to center */
.contact-hero-text { padding: 3.5rem var(--ll-sp-6) 3.5rem 2.8125rem;
  max-width: 42rem; }
.contact-hero-text h1 { font-size: var(--ll-fs-h2); margin: 0 0 1.5rem; }
.contact-hero-text .pill-row > a { display: inline-block;
  background: var(--ll-beige); border: 1px solid var(--ll-beige);
  border-radius: 999px; color: var(--ll-text); padding: 0.74rem 2.5rem;
  text-decoration: none; text-align: center; }
.contact-hero-form { background: var(--ll-moss);
  padding: 2rem 4rem 3.5rem; }
.contact-form-lead { max-width: 34rem; margin: 0 0 2rem; }
.contact-hero-form .contact-form h2 { font-size: 1.27rem; }
.contact-hero-form input, .contact-hero-form textarea {
  border: 1px solid var(--ll-green); background: var(--ll-bg);
  max-width: 29.4rem; padding: 0.5rem 0.75rem;
  border-radius: 7px; }  /* live fields 471x38 r7, dark green border */
/* r6: live fields stretch with the sage column at >=1920 */
@media (min-width: 120rem) {
  .contact-hero-form input, .contact-hero-form textarea,
  .contact-form-lead { max-width: 100%; }
}
.contact-hero-form .button { background: var(--ll-green);
  color: var(--ll-bg); border-radius: 999px; line-height: 1.4;
  padding: 0.74rem 3.5rem; }  /* live submit 178x46 */
/* muted gray fails 4.5:1 on moss/beige (axe) — green passes on both */
.contact-hero-form .form-notice, .contact-hero-form .form-fallback,
.contact-map figcaption { color: var(--ll-green); }

/* r4: live map band 827 = 163 head zone + 600 iframe + tail */
.contact-map { background: var(--ll-beige);
  padding: 2rem var(--ll-sp-6) 3rem; }
.contact-map-inner { max-width: var(--ll-shell); margin: 0 auto;
  position: relative; }
.contact-map-inner h3 { font-size: var(--ll-fs-h2); margin: 0 0 1rem; }
/* address paragraph left, Reittiohjeet pill floats right (live) */
.contact-map-inner .pill-row > a { display: inline-block;
  background: var(--ll-bg); border: 1px solid var(--ll-green);
  border-radius: 999px; color: var(--ll-green);
  padding: 0.74rem 2.2rem; text-decoration: none; }
@media (min-width: 992px) {
  .contact-map-inner p > a[href*="google.com/maps/place"] {
    position: absolute; top: 4rem; right: 0; }
}
.contact-map .map-embed { margin: 1.5rem 0 0; }
.contact-map .map-frame iframe, .contact-map .embed-consent img {
  width: 100%; height: 37.5rem; object-fit: cover; }  /* live 600px */

@media (max-width: 991px) {
  .contact-hero { grid-template-columns: 1fr; min-height: 0; }
  .contact-hero-text { padding: 2rem 1.5rem; justify-self: stretch;
    max-width: none; }
  .contact-hero-form { padding: 2rem 1.5rem; }
}

.svc-media-tail { background: var(--ll-bg); text-align: center;
  padding: 2rem var(--ll-sp-6); }
.svc-media-tail img { max-width: 44rem; width: 100%; height: auto; }

/* r4 mobile type scale (must trail every base rule — the component
   selectors outrank the bare tags in main.css's mobile block) */
@media (max-width: 47.9rem) {
  /* r5 re-pin (s9-mob4 live @390): h1/section h2 26.4, step h3 22.5 */
  .contact-hero-text h1 { font-size: 1.65rem; }  /* r6: the fs-h2 pin
     outlived main.css's mobile block (file order) -> 36.75 @390 */
  .contact-map-inner h3 { font-size: 1.65rem; }  /* r6: live 26.4 */
  .svc-split-text h2, .svc-split-text h3, .svc-prose-inner h2,
  .svc-prose-inner h3, .svc-hero-text h1, .hinnasto-row-head h2,
  .svc-steps-inner > h2, .svc-steps-inner > h3 { font-size: 1.65rem; }
  .svc-prose-inner h4 { font-size: 1.219rem; }
  .svc-toc-label { font-size: 1.219rem; }
  .svc-hero-text h1::after { width: 100%; }
}

/* D5 (live probed @390, <=767 only — the 768-991 tablet band keeps
   the r6 square-inset hero): mobile service hero is a FULL-BLEED
   banner at the image's natural aspect, above the text; split-section
   images run full-bleed at natural aspect and lead their sections;
   text gutters are 20px; pill pads drop to 2.25R. */
@media (max-width: 47.9375rem) {
  .svc-hero-img { aspect-ratio: auto; min-height: 0; margin: 0;
    overflow: hidden; }
  /* live's fixed nav hides the banner's top ~63px — same visible
     slice with a negative top margin (block kills the inline-img
     baseline gaps that inflated the row) */
  .svc-hero-img img { position: static; width: 100%; height: auto;
    display: block; margin-top: -63px; }
  .svc-hero-text, .svc-split-text { padding: 2rem 20px; }
  .svc-hero:not(.svc-hero--sub) .svc-hero-text {
    padding-top: 2.5rem; }  /* live img->h1 gap 56 (40 + h1 mt 16) */
  .svc-hero-text .pill-row > a {
    padding: calc(0.84375 * var(--ll-r)) calc(2.25 * var(--ll-r)); }
  /* live @390: EVERY split leads with its image, rev included (the
     tablet-band order:1 rev rule must not reach mobile) */
  .svc-split-img, .svc-split-rev .svc-split-img { order: -1;
    min-height: 0; }
  /* natural-size-capped: 960-wide photos still fill 390 edge-to-edge,
     small logos (sf-caravan 365x103) render natural + centered like
     live's inset body figure */
  .svc-split-img > p img { width: auto; max-width: 100%; height: auto;
    object-fit: unset; display: block; margin: 0 auto; }
  /* sf-caravan logo: live shows it as an inset body figure at natural
     size (360x102 @390); our extraction pane + the width attr blow it
     full-bleed — cap at the asset's natural 365 */
  .svc-split-img > p img[src*="sf-caravan"] { max-width: 365px; }
}

/* D1 (2026-07-24, owner §C rulings): data-driven section backgrounds from
   data/live_section_styles.json — measured live values snapped to the
   brand tokens. Doubled selectors so they outrank every legacy per-kind
   bg rule (.svc-split.svc-links, .faq, …); keep these LAST in the file. */
.svc-bg--b1.svc-bg--b1 { background: var(--ll-bg); }
.svc-bg--b2.svc-bg--b2 { background: var(--ll-beige); }
.svc-bg--g1.svc-bg--g1 { background: var(--ll-gray); }
.svc-bg--white.svc-bg--white { background: var(--ll-surface); }

/* FAQ band lead (kulu "Alkukartoitus" CTA block — lives INSIDE live's
   FAQ section; centered like the svc-prose band it replaced, same pill
   CTA treatment). Exact rhythm re-measure = D7. */
.faq-lead { text-align: center; margin-bottom: 3rem; }
.faq-lead .pill-row > a { display: inline-block;
  border: 1px solid var(--ll-green); border-radius: 999px;
  color: var(--ll-green); padding: 0.74rem 2.5rem;
  text-decoration: none; }