/* lakilehtonen.fi base styles (W2.1; W2c visual-parity pass 2026-07-19,
 * owner ruling "100% same as live" pre-cutover) — tokens only, no
 * per-component colors. Visual reference: live site (Webflow CSS is
 * reference only, never copied). Iterated under the screenshot harness. */
* { box-sizing: border-box; }
/* text-size-adjust: without it Chrome mobile font-boosts long text
   blocks ~1.08x (measured 13.5 -> 14.624 @390) — live's Webflow CSS
   pins it, so boosted local text broke every mobile height (s9 r5) */
html { font-size: 100%; -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ll-bg);
  color: var(--ll-text);
  font-family: var(--ll-font);
  font-size: var(--ll-fs-base);
  line-height: 1.44;  /* live measured */
}
h1, h2, h3, h4 {
  font-family: var(--ll-font-heading);
  color: var(--ll-green);
  line-height: 1.25;
  font-weight: 400;  /* live headings render weight 300; 400 = nearest bundled */
}
/* live heading leading measured 1.15 (W2c review item 11);
   margins measured 16px both sides (r4 probe 2026-07-20) */
h1, h2, h3 { line-height: 1.15; margin: 1rem 0; }
h1 { font-size: var(--ll-fs-h1); }
h2 { font-size: var(--ll-fs-h2); }
h3 { font-size: var(--ll-fs-h3); }
a { color: var(--ll-green); }
a:focus-visible { outline: 3px solid var(--ll-focus-ring); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
main { max-width: var(--ll-maxw); margin: 0 auto; padding: var(--ll-sp-6); }
.is-home main { max-width: none; padding: 0; }
.section-inner { max-width: var(--ll-shell);
  margin: 0 auto;
  padding: 6rem var(--ll-sp-6); }  /* live rhythm; content == 72rem */

/* header: green contact ribbon + ivory nav bar (live navbar-top/navbar) */
.site-header { background: var(--ll-bg); position: sticky; top: 0;
  z-index: 100; }
/* live .header-underline: 1296x1 green rule under the nav bar */
.site-header::after { content: ""; display: block;
  /* D4 2026-07-24: live underline == header row law min(90vw, 1600) at
     all 6 measured widths — the 81rem pin was the 1440 value alone */
  max-width: min(90vw, 100rem);
  margin: 0 auto; border-bottom: 1px solid var(--ll-green); }
.contact-strip {
  display: flex; gap: 2rem; justify-content: flex-end;
  /* D4p2: live strip height = 2.625R exactly (26/34/37/37/42/42
     measured; navbar total = strip + 80 bar + 1 underline). The old
     0.4375rem pad was the fixed-height approximation at 1440. */
  align-items: center; height: calc(2.625 * var(--ll-r));
  padding: 0 4.5rem;
  background: var(--ll-green); color: var(--ll-accent-text);
  font-size: var(--ll-fs-base);  /* r6 verify: the label span is
  text-block sized (15.75/18), the links body default */
}
.contact-strip a { font-size: var(--ll-fs-small); }
.contact-strip a { color: var(--ll-accent-text); text-decoration: none; }
.contact-strip a:hover { text-decoration: underline; }
.header-main {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ll-sp-4);
  /* live nav content is padding-bound (logo x=72 at 1440 AND 1920),
     not shell-capped — a 1350 cap would center-squeeze at 1920 */
  max-width: none;
  margin: 0 auto;
  /* r4: live main row is exactly 80 (10px gaps + 60 logo); 12px pads
     + the inline-img descender made ours 91 and shifted every
     below-header anchor by +10 */
  padding: 0.625rem 4.5rem; position: relative;
  /* D4 2026-07-24: the r4 "padding-bound" note was the 1440
     coincidence (90vw == 100vw-144 there). Live nav row measured at 6
     widths = min(90vw, 1600) centered — desktop overrides below. */
}
.site-logo img { width: 236px; height: auto; display: block; }
.nav-list {
  display: flex; align-items: center; gap: 2.5rem;
  list-style: none; margin: 0; padding: 0; font-size: var(--ll-fs-base);
}
/* live header button: 155x38, pad 7.875/31.5 */
.nav-list .button-outline { padding: 0.49rem 1.97rem; }
/* D4p2: live nav links carry 20px vertical padding at the live UI
   line-height (link box h=60, bottom 107 @1440 == dropdown panel top
   — the panel anchors flush to the link box, not the bare text line).
   Desktop-scoped; the mobile overlay keeps its own metrics (D5). */
@media (min-width: 62rem) {
  .nav-list > li > a:not(.button-outline),
  .dropdown-toggle { padding: 20px 0; display: inline-block;
    line-height: var(--ll-lh-ui); }
  .nav-list .button-outline { line-height: var(--ll-lh-ui); }
}
.nav-list a { text-decoration: none; }
.nav-list > li > a:not(.button):hover { text-decoration: underline; }
.nav-toggle { display: none; }
.nav-burger { display: none; }

/* Palvelut dropdown — CSS only. W2c r3 (review item 16): live opens on
   CLICK, not hover — focus-within only (the toggle is tabindex=0, a
   click/tap focuses it); panel sits flush under the bar (no gap, no
   centering transform, squared top). */
.nav-dropdown { position: relative; }
.dropdown-toggle { cursor: pointer; }
/* D8: live caret = a 16x16 chevron icon (webflow-icons font glyph —
   reference only, never copied); drawn with borders instead of the
   old text triangle */
.dropdown-caret { display: inline-block; width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  margin-left: 4px; }
/* D4p2 (live measured at 6 widths): panel bg = Ivory (NOT white), no
   radius/shadow/outer padding, width shrink-to-fit (137-188px), top
   flush to the trigger box bottom; items pad 10/20 at body-default
   size (1R). */
.dropdown-list {
  display: none; position: absolute; top: 100%; left: 0;
  z-index: 50; min-width: 0; width: max-content;
  background: var(--ll-bg);
  list-style: none; margin: 0; padding: 0;
}
.nav-dropdown:focus-within .dropdown-list { display: block; }
.dropdown-list a { display: block; padding: 10px 20px;
  font-size: var(--ll-fs-small); line-height: var(--ll-lh-ui); }
.dropdown-list a:hover { background: var(--ll-gray); }

@media (max-width: 61.9375rem) {
  /* D8: live burger = TWO thin 34px lines, 16px apart (a 34x20 img
     in a 54x40 button) — not three thick bars */
  .nav-burger { display: flex; flex-direction: column; gap: 16px;
    justify-content: center;
    cursor: pointer; padding: 10px; position: relative;
    z-index: 110; }
  .nav-burger span { width: 34px; height: 2px;
    background: var(--ll-green); border-radius: 0; }
  .nav-burger span:nth-child(2) { display: none; }
  /* D5 (live probed @390): the open menu sits BELOW the header (logo
     + burger stay visible; live keeps the hamburger lines, no X
     morph); items 1.21875R centered full-width with the 20px link
     pad (pitch 58); Palvelut sub-list is a full-bleed BEIGE band. */
  .site-nav { display: none; }
  .nav-toggle:checked ~ nav.site-nav {
    display: block; position: fixed; top: 63px; left: 0; right: 0;
    bottom: 0; z-index: 100;
    background: var(--ll-bg); overflow-y: auto;
    padding: 4rem 0 3rem; }  /* live first item top 126 */
  .nav-list { flex-direction: column; align-items: stretch;
    gap: 0; padding: 0;
    font-size: calc(1.21875 * var(--ll-r));
    text-align: center; }
  .nav-list > li > a, .dropdown-toggle { display: block;
    padding: 20px; }
  .nav-list > li.nav-cta { padding: 20px; }
  .dropdown-list { position: static; box-shadow: none;
    background: var(--ll-beige); min-width: 0; width: 100%;
    text-align: center; font-size: calc(1.21875 * var(--ll-r));
    padding: 0.5rem 0; }
  .dropdown-list a { padding: 10px 20px; line-height: 1.2; }
  /* live menu CTA: wide pill (312x34 @390, pad 7.3/29.25) */
  .nav-list .button-outline { display: inline-block; width: 80%;
    padding: 0.609375rem 0; font-size: calc(1.21875 * var(--ll-r));
    line-height: 1.2; }
}

/* r6: live tablet header keeps the Ota yhteyttä button beside the
   burger (768-991) — show only the CTA item outside the overlay */
@media (min-width: 48rem) and (max-width: 61.9375rem) {
  .site-nav { display: block; }
  .nav-list > li { display: none; }
  .nav-list > li.nav-cta { display: block; }
  .nav-toggle:checked ~ nav.site-nav .nav-list > li { display: block; }
}

/* hinnasto header photo (live: laki-lehtonen-4 left column) */
.static-page.page-hinnasto { max-width: none; }
main:has(> .page-hinnasto) { max-width: none; padding: 0; }
/* r5 (owner catch + s9-hin probe): live photo column is 50% of the
   viewport at EVERY width (640/720/960/1280 measured) — the r4 45rem
   pin was 50% only at 1440. Row grows to 993 and text inset 112->133
   at >=1920. */
.hinnasto-header { display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ll-beige); }
.hinnasto-photo { background-image: url("/assets/laki-lehtonen-4-d32924.jpg");
  background-size: cover; background-position: 50% 50%;
  min-height: 53rem; }  /* live 720x855, centered crop (round 4:
  35% cut the right-hand person out of frame) */
/* r4: live text block vertically centered, heading 390 wide,
   112px column inset */
.hinnasto-intro { padding: var(--ll-sp-12) var(--ll-sp-8)
    var(--ll-sp-12) 7rem;
  max-width: 43rem; align-self: center; }
.hinnasto-intro h1 { font-size: var(--ll-fs-h3);
  max-width: 24.4rem; }  /* live 26px @1440, em-scaled (r6) */
/* live >=1920 (s9-hin): row grows to 993, text inset 112 -> 133 */
@media (min-width: 120rem) {
  .hinnasto-photo { min-height: 62.06rem; }
  .hinnasto-intro { padding-left: 8.3125rem; max-width: 50rem; }
}
.hinnasto-intro .pill-row > a { display: inline-block;
  border: 1px solid var(--ll-green); border-radius: 999px;
  color: var(--ll-green); background: var(--ll-bg);
  padding: 0.74rem 3.94rem;
  text-decoration: none; }
.hinnasto-band { background: var(--ll-gray);
  padding: 6.25rem var(--ll-sp-6) 4rem; }  /* r4: live top pad 100 */
/* .hinnasto-body layout lives in service.css (r4) */

/* lakimies listing: subtle brand element background (live bckg-svg) */
.lakimies-section { background-image: url("/assets/element-f1a0cc.svg");
  background-repeat: no-repeat; background-position: right -10rem top;
  background-size: 38rem; }

/* breadcrumb (W2b-d) */
.breadcrumb { font-size: var(--ll-fs-small); margin-bottom: var(--ll-sp-3); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--ll-sp-2);
  list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: var(--ll-sp-2);
  color: var(--ll-text-muted); }
.breadcrumb [aria-current] { color: var(--ll-text-muted); }

/* article anatomy */
.article, .lakimies { max-width: var(--ll-maxw-prose); margin: 0 auto; }
/* live static-page prose column measured 655px (r4);
   r6: widens to 780 at >=1920 like the article column */
.static-page { max-width: 41rem; margin: 0 auto; }
@media (min-width: 120rem) {
  .static-page { max-width: 48.75rem; }
}
.byline {
  display: flex; flex-wrap: wrap; gap: var(--ll-sp-3);
  color: var(--ll-text-muted); font-size: var(--ll-fs-small);
  margin: var(--ll-sp-3) 0;
}
.answer-first {
  background: var(--ll-gray); border-left: 4px solid var(--ll-green);
  border-radius: var(--ll-radius); padding: var(--ll-sp-4) var(--ll-sp-6);
  font-size: var(--ll-fs-lead); margin: var(--ll-sp-6) 0;
}
.article-hero { border-radius: var(--ll-radius-lg); margin: var(--ll-sp-6) 0; }
.legal-sources { margin-top: var(--ll-sp-12); }
.legal-sources a { overflow-wrap: anywhere; }
/* FAQ accordion styles live in artikkeli.css (W2c r3 live parity) */

/* listings */
.card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--ll-sp-6); list-style: none; margin: var(--ll-sp-8) 0; padding: 0;
}
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--ll-surface); border-radius: var(--ll-radius-lg);
  box-shadow: var(--ll-shadow); overflow: hidden; }
.card a { text-decoration: none; display: block; }
.card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.card-title, .card-excerpt { padding: 0 var(--ll-sp-4); }
.card-excerpt { color: var(--ll-text-muted); font-size: var(--ll-fs-small);
  padding-bottom: var(--ll-sp-4); }

/* pagination */
.pagination ul { display: flex; flex-wrap: wrap; gap: var(--ll-sp-2);
  list-style: none; padding: 0; justify-content: center; }
.pagination a, .pagination span {
  display: inline-block; min-width: 2.25rem; text-align: center;
  padding: var(--ll-sp-2); border-radius: var(--ll-radius);
  background: var(--ll-surface); text-decoration: none;
}
.pagination .current span { background: var(--ll-green); color: var(--ll-accent-text); }

/* pre-footer CTA (live section bckg-beige-1: centered, constrained;
   r4 rhythm measured: pad 43.2 = the padding-3 utility -> 3vw at
   >=1440 (r6: fixed 43.2 was 1440-only; live 58/77/103 at wider) */
.cta { background: var(--ll-bg); }
.cta-inner { max-width: var(--ll-shell); margin: 0 auto; text-align: center;
  padding: var(--ll-pad3) var(--ll-sp-6); }
.cta-inner h2 { font-size: var(--ll-fs-h1); margin: 3.5rem 0 1rem; }
.cta-inner p { max-width: 32.75rem; margin: 3.5rem auto 2.5rem; }
.cta-inner p:last-child { margin: 0 auto 2.5rem; }

.button {
  display: inline-block; background: var(--ll-green); color: var(--ll-accent-text);
  padding: var(--ll-sp-3) var(--ll-sp-6); border-radius: var(--ll-radius);
  text-decoration: none; font-weight: 400; font-size: var(--ll-fs-base);
}
/* live base button: ivory FILL + green border, pad 11.8/63, fs 15.75,
   total height 46 (lh 1.3 — round-3 measure) */
.button-outline { background: var(--ll-bg); border: 1px solid var(--ll-green);
  color: var(--ll-green); border-radius: 999px;
  line-height: 1.3;
  padding: 0.74rem 3.94rem; }

/* r6 tablet: live keeps the Webflow container's 5vw side margins
   below 1440 — shell containers ran edge-to-edge at 768 */
@media (min-width: 48rem) and (max-width: 61.9375rem) {
  .cta-inner, .faq-inner, .svc-articles-inner {
    margin-left: 5vw; margin-right: 5vw; }
}
/* r6: live stacks the hinnasto header (full-width photo band over
   the intro) for the whole <=991 band, not just <=767 */
@media (max-width: 61.9375rem) {
  .hinnasto-header { grid-template-columns: 1fr; }
  .hinnasto-photo { min-height: 38rem; }
}

/* responsive collapses for the two-column bands */
@media (max-width: 47.9375rem) {
  .contact-strip { display: none; }  /* live hides the bar on mobile */
  /* D5: live mobile logo is centered (service/hub/article navbars;
     live home keeps it left = live inconsistency, majority wins) */
  .site-logo { margin: 0 auto; }
  .hinnasto-header { grid-template-columns: 1fr; }
  .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cta-inner h2 { margin: 1.5rem 0 1rem; }
  .cta-inner p { margin: 2rem auto 1.5rem; }
}

@media (max-width: 47.9375rem) {
  .hinnasto-photo { min-height: 26.4rem; }
  .hinnasto-intro { padding: 2.5rem 1.5rem; max-width: none; }
  /* D5: live mobile band renders MOSS (rgb 195,198,185 probed @390;
     desktop stays warm gray), tier icons 110 */
  .hinnasto-band { padding: 3rem 1.5rem; background: var(--ll-moss); }
}


/* consent-by-action embeds (W2b) */
.video-embed, .map-embed { margin: var(--ll-sp-6) 0; }
.video-embed p, .map-embed figcaption { margin: var(--ll-sp-2) 0 0; }
.embed-consent { position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: var(--ll-radius-lg); overflow: hidden; }
.embed-consent img { display: block; width: 100%; height: auto; }
.embed-play { position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 4.5rem; height: 3.25rem;
  background: var(--ll-green); border-radius: var(--ll-radius-lg);
  opacity: .92; }
.embed-play::after { content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-40%, -50%); border: 0.8rem solid transparent;
  border-left: 1.3rem solid var(--ll-accent-text); border-right-width: 0; }
.video-embed .embed-consent::before { content: ""; position: absolute;
  inset: 0; }
.embed-note { position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--ll-green); color: var(--ll-accent-text);
  padding: var(--ll-sp-2) var(--ll-sp-4); font-size: var(--ll-fs-small); }
.embed-frame iframe { width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--ll-radius-lg); }
.map-frame iframe { aspect-ratio: 2 / 1; min-height: 400px; }
.map-embed figcaption { font-size: var(--ll-fs-small);
  color: var(--ll-text-muted); }

/* intake form (W2.7) */
.contact-form form { display: grid; gap: var(--ll-sp-2); max-width: 34rem; }
.contact-form label { font-weight: 500; }
.contact-form input, .contact-form textarea {
  font: inherit; padding: var(--ll-sp-3);
  border: 1px solid var(--ll-moss); border-radius: var(--ll-radius);
  background: var(--ll-surface); color: var(--ll-text);
}
.contact-form .hp-field { position: absolute; left: -9999px; height: 0;
  overflow: hidden; }
.form-notice, .form-fallback { font-size: var(--ll-fs-small);
  color: var(--ll-text-muted); }
.contact-form .button { border: 0; cursor: pointer; font-size: inherit;
  justify-self: start; }

/* round-3 re-review mobile-scale fixes: live mobile header 66px /
   logo 177px / h1 ~24.4px — ours ran ~38% oversized */
@media (max-width: 47.9rem) {
  .site-logo img { width: 177px; }
  h1, .hp-hero-band h1, .svc-hero-text h1, .staff-hero-details h1,
  .article-band-text h1, .listing-main h1, .contact-hero-text h1 {
    font-size: 1.53rem; }
  h2, .staff-band h2, .staff-kulmakivet h2, .faq h2 {
    font-size: 1.53rem; }
  /* r5 correction (s9-mob3): live mobile text is per-page — 13.5px on
     content pages, 14.625px only on the home page (pinned in
     home.css). r4's global 0.914rem pin came from measuring home. */
  h3, .service-card h3 { font-size: 1.219rem; }
  .cta-inner h2 { font-size: 1.53rem; }
  body { font-size: 0.84375rem; }
  .footer-inner { gap: 1rem; padding: 2rem 5vw; }  /* D5: live cols x=20 */
  .header-main { padding: var(--ll-sp-2) var(--ll-sp-4); }
  /* live puts the all-articles link beside the heading without overlap */
  .svc-articles .all-link {
    position: static; display: inline-block; margin-bottom: 0.75rem; }
}

/* r5 mobile type scale (s9-mob2/3 live @390): content-page section
   headings 26.4, CTA h2 22.5, buttons 13.5px/32 tall. Trails all base
   rules (cascade scar 39dd9bc); compound selectors get per-file pins. */
@media (max-width: 47.9rem) {
  h1, h2, h3 { font-size: 1.65rem; }
  .cta-inner h2 { font-size: 1.406rem; }
  .button-outline { padding: 0.42rem 2.2rem; }
}

/* D4 (2026-07-24): header content row law — live min(90vw, 1600px),
   measured 893/1152/1296/1512/1600/1600 at 992-2560. Mobile (<992)
   keeps the padding-bound layout (D5 scope). */
@media (min-width: 62rem) {
  .header-main { max-width: min(90vw, 100rem);
    padding-left: 0; padding-right: 0; }
}