/* Homepage sections (split from main.css at the 500-line cap, r4
 * 2026-07-20 — discipline 10). Loads AFTER main.css: every .hp-*
 * rule, including its mobile overrides, lives HERE so the cascade
 * stays inside one file. Values live-measured (see main.css header
 * + docs/reviews/2026-07-19-w2c-visual-review.md r4 record). */

/* homepage sections (live section map, colors probed 2026-07-19) */
/* hero anatomy re-probed from live CSS 2026-07-20: the section spans
   100vh measured from the nav TOP (live's fixed nav overlays its first
   80px; our header is in-flow, so height = 100vh - 80px and the image
   anchors at -80px to render the identical slice — top-anchored, heads
   never crop). The beige band is TRANSLUCENT (live #f5f2f0f2) and
   rides the bottom edge INSIDE the section. */
.hp-hero { position: relative; height: calc(100vh - 80px);
  display: flex; flex-direction: column; justify-content: flex-end; }
.hp-hero-photo { position: absolute; inset: 0;
  background-image: url("/assets/laki-lehtonen-1-3e310a.jpg");
  background-repeat: no-repeat;
  background-size: cover; background-position: 50% -80px;
}
.hp-hero-band { position: relative;
  background: color-mix(in srgb, var(--ll-bg) 95%, transparent);
  text-align: center;
  padding: 2rem var(--ll-sp-6); }
.hp-hero-band p { margin: 0; }  /* round 3: p margin grew the band 204->222 */
/* live sizes the hero image 110% below 1440 and cover from 1440 up */
@media (min-width: 62.0625rem) and (max-width: 89.9375rem) {
  .hp-hero-photo { background-size: 110%; }
}
.hp-hero-band h1 { font-size: var(--ll-fs-h2);
  margin: 1rem 0 2.25rem; }  /* live: 16 margin + spacer-20 */
.hero-intro .button, .hero-intro a {
  display: inline-block; border: 1px solid var(--ll-green);
  color: var(--ll-green); background: var(--ll-bg);
  font-size: var(--ll-fs-base); font-weight: 400; line-height: 1.3;
  padding: 0.74rem 3.94rem; border-radius: 999px;
  text-decoration: none;
}
.hp-about { display: grid; grid-template-columns: 45% 1fr;
  background: var(--ll-beige); }  /* r4 re-probe: live photo 648=45%,
  text content at x=720 via column padding */
.hp-about-photo { background-image: url("/assets/laki-lehtonen-2-816a8b.jpg");
  background-size: cover; background-position: 30% 50%;
  min-height: 32rem; }
/* live >=1920 row grows to 746 (their type scales up); pin the photo */
@media (min-width: 120rem) { .hp-about-photo { min-height: 46.6rem; } }
/* D4p2 (live probed at 6 widths): text content starts at 50vw exactly
   (the centered 12-col row's second desk-6 column) and is row/2 - 20
   wide (655/780) — the old 4.5rem pad + 45.5rem cap were the 1440
   values. Photo column stays 45% (live). */
.hp-about-text { padding: var(--ll-pad3) 0 1.5rem 5vw;
  max-width: calc(5vw + var(--ll-row) / 2 - 20px); }
/* live h2 caps at 31.5R (441/441/504 measured — "448" was our pin
   wrapping it to 3 lines @1920), top margin 16 fixed */
.hp-about-text h2 { margin: 1rem 0 3.5rem;
  max-width: calc(31.5 * var(--ll-r)); }
/* live signature: white-bg JPG multiply-blended into beige; width =
   the text column's inner desk-5 minus pads: (col*5/12 - 20) =
   253/253/305 measured @1440/1680/1920 */
.hp-about-text .img-signature, .hp-about-text img {
  width: calc((var(--ll-row) / 2 - 20px) * 5 / 12 - 20px);
  max-width: 100%; mix-blend-mode: multiply; margin: 1.25rem 0 0;
  display: block; }
.hp-about-text p:last-of-type { margin-bottom: 0; }
.hp-about-text { padding-bottom: 1.5rem; }

.hp-services { background: var(--ll-green); color: var(--ll-accent-text); }
/* live: container pad 72/0 (content flush at 1350), h2 wraps 2 lines,
   40px spacer to grid; r6: the 72 is padding-5 -> 5vw at >=1440
   (96/128/172 measured at 1920/2560/3440) */
.hp-services .section-inner { padding: var(--ll-pad5) 0; }
.hp-services h2 { color: var(--ll-accent-text); max-width: 30rem; }
.service-grid { display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 0.625rem;
  list-style: none; margin: 3.5rem 0 0; padding: 0; }  /* live gap 55 */
/* live card: pad 21/14(right), radius 7 square-bottom, text lh 1.2 */
.service-card { background: var(--ll-beige);
  border-radius: 7px 7px 0 0;
  padding: 1.3125rem 0.875rem 1.3125rem 1.3125rem;
  font-size: var(--ll-fs-base);
  color: var(--ll-text); }
.service-card a { color: var(--ll-green); }
/* live: card color darkens per ROW (beige -> warm gray -> moss) */
.service-card:nth-child(n+5) { background: var(--ll-gray); }
.service-card:nth-child(n+9) { background: var(--ll-moss); }
.service-card h3 { margin: 0.4rem 0 0.82rem;  /* round 3: live h3 top
  +27 from card top (margin collapses inside a wrapper) */
  font-size: var(--ll-fs-h3); }
.service-card p { margin: 0; line-height: 1.2; }
/* r6 verify: live card text drops to 16 (body default) at >=1920
   while staying 15.75 at 1440 */
@media (min-width: 120rem) {
  .service-card p { font-size: var(--ll-fs-small); }
}

.hp-testimonials { background: var(--ll-beige);
  background-image: url("/assets/element-f1a0cc.svg");
  background-repeat: no-repeat; background-position: 0 0;
  background-size: 100% auto; }  /* live: width-fit, top-left */
/* live frame: container pad 43.2/0 + 720px min-height row with the
   content vertically centered */
.hp-testimonials .section-inner {
  /* r6: live row is 80vh at EVERY viewport (1152 @x1440) + padding-3
     (3vw) each side — the 50.4rem pin was this law at 1440x900 */
  min-height: calc(80vh + 2 * var(--ll-pad3));
  /* round 3: live stack top-anchors at dy=172 (centering our shorter
     3-card substitute sank the content ~60px low) */
  padding: 9.75rem 0 2.7rem;
  display: flex; flex-direction: column; justify-content: flex-start; }
.hp-testimonials h3, .testimonial-lead { text-align: center; }
.hp-testimonials h3 { font-size: var(--ll-fs-h2); }
.testimonial-lead { font-size: var(--ll-fs-small); }
.testimonial-row { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--ll-sp-6); margin-top: 2.5rem; }
.testimonial-card { background: var(--ll-surface);
  border-radius: var(--ll-radius); box-shadow: var(--ll-shadow);
  padding: var(--ll-sp-6); font-size: var(--ll-fs-small); }
.testimonial-card ul { list-style: none; margin: var(--ll-sp-3) 0 0;
  padding: 0; }

.hp-promo { display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ll-gray);  /* re-review: live 226,226,220 */
  min-height: 80vh; }  /* r6: live promo section = 80vh at every
  viewport (864 @1080, 1152 @1440) — the photo's 45rem pin was
  80vh at the r4 900px-tall test window only */
/* mobile collapse lives in the end-of-file 48rem block — an early
   media rule here loses the cascade to the base rules below (r4) */
/* r6: live promo text rides the shell edge + 10 (x = 55/170/490/930
   at 1440/1920/2560/3440) with a 471-wide col (565 at >=1920) — the
   3.44rem pin hugged the viewport at wide screens */
.hp-promo-text { padding: var(--ll-sp-12) var(--ll-sp-8)
    var(--ll-sp-12)
    calc(max(2.8125rem, (100vw - var(--ll-shell)) / 2) + 0.625rem);
  align-self: center;
  max-width: calc(max(2.8125rem, (100vw - var(--ll-shell)) / 2)
    + 32.0625rem);
  justify-self: start; }
@media (min-width: 120rem) {
  .hp-promo-text { max-width:
    calc(max(2.8125rem, (100vw - var(--ll-shell)) / 2)
      + 37.9375rem); }
}
.hp-promo-text h3 { font-size: var(--ll-fs-h2);
  margin-bottom: 3.5rem; }  /* live: 16 + spacer-40 */
.hp-promo-text a { display: inline-block; border: 1px solid var(--ll-green);
  color: var(--ll-green); background: none;  /* round 3: live promo
  button is transparent on the gray band */
  font-size: var(--ll-fs-base); line-height: 1.3;
  padding: 0.74rem 3.94rem;
  border-radius: 999px; text-decoration: none; }
.hp-promo-photo { background-image: url("/assets/laki-lehtonen-3-a711df.jpg");
  background-size: cover; background-position: 55% 50%; }

.hp-articles { background: var(--ll-beige); }
/* live hp-blog-list: flat (no card boxes), muted duotone images,
   title-only, all-link on the heading row; container pad 43.2/0
   (= padding-3 -> 3vw, r6), image 323x220 r5, 20px image-title gap */
.hp-articles .section-inner { padding: var(--ll-pad3) 0; }
.hp-articles .latest-articles { position: relative; }
.hp-articles .all-link { position: absolute; top: 1.7rem; right: 0;
  font-size: var(--ll-fs-small); }
.hp-articles .card-grid { margin: 0; gap: 1.25rem; }
.hp-articles .card { background: none; box-shadow: none; border-radius: 0; }
.hp-articles .card-img { height: 13.75rem; border-radius: 5px;
  filter: grayscale(1) sepia(.15); }  /* r6: live strip images keep
  HEIGHT 220 at every width (323/385/150 wide at 1440/1920/768) —
  the aspect-ratio rule grew them to 262 tall at >=1920 */
.hp-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; }
.hp-articles .card-excerpt { display: none; }


/* live ≤991: hero image bottom-anchors, no nav offset (header is
   shorter without the contact strip), band tightens.
   D4p2: 62rem = 992 INCLUSIVE — live is desktop at 992 (4-col grid
   measured); same off-by-one as the main.css burger block. */
@media (max-width: 61.9375rem) {
  .hp-hero { height: calc(100vh - 64px); }
  .hp-hero-photo { background-size: cover;
    background-position: 42% 100%; }
  .hp-hero-band { padding-top: 1rem; }
  /* r6 tablet: live services grid is 2-col for the whole <=991 band
     (Webflow grid rule) and the promo drops its 80vh floor */
  .service-grid { grid-template-columns: 1fr 1fr; }
  .hp-promo { min-height: 0; }
  .hp-promo-photo { min-height: 28rem; }
}

/* r6: live keeps the Webflow container's 5vw side margins below
   1440 — our shell sections ran edge-to-edge at 768. D4p2: the rule
   was trapped in the ≤991 block; live holds 90vw containers through
   the whole 992-1439 band. */
@media (max-width: 89.9375rem) {
  .hp-services .section-inner, .hp-articles .section-inner,
  .hp-testimonials .section-inner { margin-left: 5vw;
    margin-right: 5vw; }
}

/* responsive collapses + r4 mobile pass (live probed @390) */
@media (max-width: 47.9375rem) {
  .hp-articles .card-grid.cols-4 { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns:
    repeat(auto-fit, minmax(14rem, 1fr)); }
  .service-card h3 { overflow-wrap: anywhere; }
  .hp-about, .hp-promo { grid-template-columns: 1fr; }
  .testimonial-row { grid-template-columns: 1fr; }
  .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  /* live ≤767: hero image re-centers. D5: live mobile hero is
     CONTENT-driven — photo pane 90vw tall (350 @390 probed), band
     follows; not the 100vh desktop hero */
  .hp-hero { height: auto; min-height: 0;
    justify-content: flex-start; }
  .hp-hero-photo { position: static; height: 90vw;
    background-position: 50% 50%; }
  .hp-about-photo { min-height: 26.4rem; }  /* live 390x422 */
  .hp-about-text { padding: 2rem 1.5rem; max-width: none; }
  .hp-about-text .img-signature, .hp-about-text img {
    width: 7.875rem; }  /* live 126x29 */
  .hp-testimonials .section-inner { min-height: 0;
    padding: 2.7rem 1rem; margin: 0; }
  .hp-articles .section-inner { padding: 0.75rem 1.875rem;
    margin: 0; }  /* r6: live mobile strip imgs 331 wide at x=30 */
  .hp-services .section-inner { margin: 0 5vw; }  /* D5: live
    cards x=20 w=351 @390 */
  .hp-promo-photo { order: -1; min-height: 22rem; }  /* live: image first */
  .hp-promo-text { padding: 3.5rem 1.5rem; max-width: none; }
  .hp-promo-text h3 { margin-bottom: 2.5rem; }
  .hp-articles .card-title { margin: 0 0 1rem; }
}

/* live ≤479: hero drops to 75vh, image bottom-anchors, band opaque */
@media (max-width: 30rem) {
  .hp-hero { height: 75vh; }
  .hp-hero-photo { background-position: 42% 100%; }
  .hp-hero-band { background: var(--ll-bg); }
}

/* r4 mobile type scale (must trail the base rules above) */
@media (max-width: 47.9rem) {
  .hp-promo-text h3, .hp-testimonials h3, .hp-hero-band h1,
  .hp-about-text h2, .hp-services h2 { font-size: 1.53rem; }
  .service-card h3 { font-size: 1.219rem; }  /* live 19.5 @390 */
  body.is-home { font-size: 0.914rem; }  /* live home text 14.625 */
  .hero-intro a { font-size: 0.914rem; }
  .hp-articles .card-title { font-size: 0.914rem;
    padding-top: 0.5rem; margin-bottom: 0.75rem; }
  .hp-articles .latest-articles .all-link {
    position: static; display: inline-block; margin-bottom: 0.75rem; }
}