/* /lakimies staff index — every value MEASURED on live 2026-07-19
 * @1440 (scratch recon w2c-r3; the stylesheet lies, the render is
 * truth): hero split 50/50, radial tile gradient ivory->beige, band
 * renders BEIGE (#e1dbd4) despite live's "bckg-green-2" class name,
 * pills 999px beige/green, grid 3-up gap 0 tiles touching, kulmakivet
 * 2x2 ivory cards radius 14 on beige + element.svg. Heading weight:
 * live 300 Sentient -> our 400 Playfair (round-2 convention). */

.section-lakimies main { max-width: none; padding: 0; }

/* hero geometry RE-MEASURED on live 2026-07-22 at 1280/1440/1536/1920
   (s9-widths.js — screenshots, not stylesheet reading): the img box is
   640x798 from the nav bottom @1280, full-viewport 720x900 from y=0
   @1440-1536 (NO 5vw inset — the earlier inset reading was wrong and
   shrank the figure 8%), and a left-aligned 756x900 box in the 960
   pane @1920. Our header is in-flow opaque 118px, so "from y=0" means
   the box extends 118px above the tile and the tile clips the slice
   the live nav hides. */
.staff-hero { display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ll-bg);
  min-height: calc(100vh - 118px); }
.staff-hero-photo { position: relative; overflow: hidden;
  background: radial-gradient(circle, var(--ll-bg), var(--ll-beige)); }
.staff-hero-photo img { position: absolute; left: 0; right: 0;
  bottom: 0; width: 100%; height: 100%;
  object-fit: cover; }
/* live img box = height H, width H - 5vw (7.5vw >=1920), pane-clamped.
   r6 (computed-style trace on live 2026-07-22): H is the VIEWPORT
   height (img spans 100vh), so the width term must be vh-based — the
   r5 "900px" constant was H at one test viewport and broke every
   other: at 2560x1440 live renders 1248 (=100vh-7.5vw), ours made 708. */
@media (min-width: 90rem) {
  .staff-hero-photo img { right: auto;
    width: min(100%, calc(100vh - 5vw));
    height: calc(100% + 118px); } }
@media (min-width: 120rem) {
  .staff-hero-photo img { width: min(100%, calc(100vh - 7.5vw)); } }
.staff-hero-details { display: flex; flex-direction: column;
  justify-content: center; padding: 2.5rem 0.625rem 2.5rem 4.2rem;
  max-width: 42rem; }
.staff-hero-details h1 { font-size: var(--ll-fs-h2); margin: 0 0 1rem; }
.staff-role { font-size: var(--ll-fs-base); }
.contact-pills { display: flex; gap: 0.625rem; flex-wrap: wrap;
  margin-top: 1.25rem; }
.pill-contact { background: var(--ll-beige);
  border: 1px solid var(--ll-green); border-radius: 999px;
  color: var(--ll-green); font-weight: 600; font-size: var(--ll-fs-base);
  line-height: 1.4;
  padding: 0.74rem 1.97rem; text-decoration: none; text-align: center; }
.staff-quote { margin-top: 3.75rem; font-family: var(--ll-font-heading);
  color: var(--ll-green); font-size: 1.625rem; line-height: 1.2; }
.staff-quote p { margin: 0.5rem 0; }  /* live p-large 8px margins */
.button-tutustu { display: block; margin-top: 5rem;
  border: 1px solid var(--ll-green); border-radius: 999px;
  line-height: 1.4;
  padding: 0.74rem 3.94rem; text-align: center; color: var(--ll-green);
  background: var(--ll-bg); font-size: var(--ll-fs-base); text-decoration: none; }

.staff-band { background: var(--ll-beige); text-align: center;
  padding: calc(1rem + 1vw) var(--ll-sp-6); }  /* r6: live band 103
  @1440 -> 149 @3440 = padding-1 (1vw) + 16 (fit <=1px both ends) */
.staff-band h2 { margin: 0; font-size: var(--ll-fs-h2); }

/* live: grid rides the band with NO section padding, tiles touch */
.staff-listing { background: var(--ll-bg); padding: 0; }
.staff-grid { list-style: none; margin: 0; padding: 0;
  display: grid;  /* r4: live tiles are full-bleed 480px, x=0/480/960 */
  grid-template-columns: repeat(3, 1fr); }
.staff-tile { display: block;
  background: radial-gradient(circle, var(--ll-bg), var(--ll-beige));
  /* r6: live tile side padding is vw-based — 2.34375vw fits census
     34/45/60/80px at 1440/1920/2560/3440 (and 18 at 768) <=1px;
     the r4 fixed 33.6/45 pins zoomed faces at every other width */
  padding: 3rem 2.34375vw 0; }
.staff-tile img, .staff-tile picture { display: block; width: 100%; }
/* live card boxes keep ratio 1.084 at EVERY width (367x338 @1280,
   413x381 @1440, 550x507 @1920) — a fixed height zooms faces at 1920 */
.staff-tile img { aspect-ratio: 413 / 381; height: auto;
  object-fit: cover; }
.staff-card-details { text-align: center; padding: 1.25rem 0 2rem; }
.staff-card-details h3 { font-size: 1.625rem; font-weight: 400;
  margin: 0.5rem 0; }  /* r4: live photo->name gap 28 */
.staff-card-role { font-size: var(--ll-fs-base); font-weight: 300; }
.staff-card-contacts { margin-top: 10%; }  /* r6: live gap is
  width-relative (48 @1440 -> 115 @3440), a fixed 40 starved it */
.contact-link { display: block; color: var(--ll-green); font-weight: 500;
  font-size: var(--ll-fs-small); line-height: 1.28;  /* live rows 28px;
  r6: live size = body default (14/16/12), not text-block */
  text-decoration: none; padding-bottom: 0.5rem; }
.staff-card-details .button-tutustu { display: inline-block;
  margin-top: 1.25rem;
  font-size: var(--ll-fs-small); }  /* r6: card buttons = body default
  (12 @390 census) while the hero button keeps text-block size */
/* (r6: the former >=1920 45px tile pin is the 2.34375vw law above) */

.staff-kulmakivet { background: var(--ll-beige)
    url("/assets/element-f1a0cc.svg") center / cover no-repeat;
  padding: var(--ll-pad5) var(--ll-sp-6); }  /* r6: live = padding-5
  container (72/172 at 1440/3440) */
.staff-kulmakivet h2 { text-align: center; font-size: var(--ll-fs-h2);
  margin: 0 0 3.5rem; }
.kulma-grid { max-width: 83.125rem; margin: 0 auto; display: grid;
  grid-template-columns: 1fr 1fr; gap: 0.625rem; }
/* r6: live kulma cards ride the 1600 shell at >=1920 */
@media (min-width: 120rem) {
  .kulma-grid { max-width: 98.75rem; }
}
.kulma-card { background: var(--ll-bg); border-radius: 14px;
  padding: 4.375rem; }
.kulma-card h3 { font-size: 1.625rem; font-weight: 400;
  text-align: left; margin: 0 0 1.75rem; }  /* round 4: live headings
  sit flush left at card padding; r6 verify: FIXED 26 at every width
  (1920/2560/3440 measured 26 — not the em-scaled header-m) */
.kulma-card p { font-size: var(--ll-fs-base); margin: 0; }

/* r6: live stacks the heroes for the WHOLE <=991 tablet band (768
   renders a full-width 728x728 SQUARE photo) — the r4 767 cutoff left
   768-991 on the desktop split with a half-column portrait */
@media (max-width: 61.9375rem) {
  .staff-hero, .person-hero { grid-template-columns: 1fr;
    min-height: 0; }
  /* D5: live mobile kulmakivet card headings are centered */
  .kulma-card h3 { text-align: center; }
  .kulma-grid { grid-template-columns: 1fr; }  /* r6: live stacks the
    kulma cards for the whole tablet band */
  /* square at the viewport width: 390x390 @390, 728x728 @768 */
  .staff-hero-photo { aspect-ratio: 1 / 1; height: auto;
    min-height: 0; }
  .staff-hero-photo img,
  .person-hero .staff-hero-photo img { width: 100%; height: 100%; }
}

@media (max-width: 767px) {
  .staff-hero { grid-template-columns: 1fr; min-height: 0; }
  .staff-hero-details { padding: 2rem 1.5rem; }
  .person-hero { min-height: 0; }
  .person-split { grid-template-columns: 1fr; padding: 2rem 1.5rem; }
  .button-tutustu { margin-top: 2.5rem; }
  .staff-grid { grid-template-columns: 1fr; }
  .kulma-grid { grid-template-columns: 1fr; }
  .kulma-card { padding: 2rem 1.5rem; }
  .staff-kulmakivet { padding: 3rem var(--ll-sp-6); }
  /* r4 mobile (live probed @390): tile portraits 335x309 = the same
     413/381 ratio — the aspect-ratio rule covers mobile; live tile
     side padding 27.5 (not the desktop 33.6) */
  .staff-band { padding: 0.5rem 1.5rem; }
  .staff-tile { padding: 3rem 1.71875rem 0; }
  .person-quote-inner, .staff-quote { font-size: 1.53rem; }
  /* r5 (s9-mob2/4 live @390): hero h1 26.4, band h2 22.5, card
     names 24, buttons 32 tall (person-prose pins trail — cascade) */
  .staff-hero-details h1 { font-size: 1.65rem; }
  .staff-band h2, .staff-kulmakivet h2 { font-size: 1.406rem; }
  .staff-card-details h3 { font-size: 1.5rem; }
  .button-tutustu, .pill-contact { padding: 0.42rem 2.2rem; }
}

/* person detail (round-3 re-review): hero shares the /lakimies staff
   hero anatomy; sections as bands; laptop-photo split; quote band */
/* live person hero RE-MEASURED 2026-07-22 at 5 widths (s9): row = 88vh
   from y=0; img bottom-flush, box height 88vh-42 (>=1440; -48 >=1920;
   -102 below), width = height - 5vw (7.5vw >=1920). Our row starts
   under the 118px header, so heights become 100% + (118-42) etc. */
.person-hero { min-height: calc(88vh - 118px); }
.person-hero .staff-hero-photo {
  background: radial-gradient(circle at 50% 25%, var(--ll-surface),
    var(--ll-beige)); }
.person-hero .staff-hero-photo img { width: 100%;
  height: calc(100% + 16px); }
/* r6: the width term's constant is the IMG HEIGHT (88vh - 42/48), not
   a fixed px — live @2560x1440 renders 1027 = 88vh - 48 - 7.5vw
   (trace 2026-07-22); the r5 744px pin shrank it to 552 there */
@media (min-width: 90rem) {
  .person-hero .staff-hero-photo img {
    width: min(100%, calc(88vh - 42px - 5vw));
    height: calc(100% + 76px); } }
@media (min-width: 120rem) {
  .person-hero .staff-hero-photo img {
    width: min(100%, calc(88vh - 48px - 7.5vw));
    height: calc(100% + 70px); } }
/* r4: live text block starts ~56px below the nav (not bottom-hung) */
.person-hero .staff-hero-details { justify-content: flex-start;
  padding-top: 2.5rem; }
.person-bio { margin-top: 2rem; font-size: var(--ll-fs-base); }
.person-prose { background: var(--ll-bg);
  padding: var(--ll-pad5) var(--ll-sp-6); }  /* r4: live pad 72
  = the padding-5 utility -> 5vw at >=1440 (r6) */
.person-prose-inner { max-width: var(--ll-shell); margin: 0 auto; }
.person-prose-inner p { max-width: 34rem; }  /* r4: live col 543,
  right half = reserved (blank) embed slot */
.person-prose-inner h2, .person-prose-inner h3,
.person-split-text h2, .person-split-text h3 { font-size: var(--ll-fs-h2); }
/* r4 measured: live split is CONTAINED — 1350 container with 72px
   vertical padding, img 655x437 in-flow, text col 543 */
.person-split { display: grid; grid-template-columns: 41rem 1fr;
  gap: 2rem; background: var(--ll-beige);
  padding: var(--ll-pad5) max(calc((100% - var(--ll-shell)) / 2), 1.5rem); }
/* r6 census: live split photo grows 655x437 -> 780x520 at >=1920 */
@media (min-width: 120rem) {
  .person-split { grid-template-columns: 48.75rem 1fr; }
}
.person-split-img { position: relative; min-height: 0; }
.person-split-img img { display: block; width: 100%; height: auto; }
.person-split-text { padding: 0; max-width: 34rem;
  align-self: center; }
/* r6: live text columns widen 543 -> 647 at >=1920 (probe @2560) —
   the narrow pin made every paragraph run ~15% taller */
@media (min-width: 120rem) {
  .person-prose-inner p, .person-split-text,
  .person-split-text p { max-width: 40.4375rem; }
  .person-split-text { justify-self: end; }  /* live text col ends at
    the shell right edge (x=1413..2060 @2560) */
}
.person-quote { background: var(--ll-beige); text-align: center;
  padding: var(--ll-pad5) var(--ll-sp-6); }  /* r6: padding-5 -> 5vw */
.person-quote-inner { max-width: var(--ll-shell); margin: 0 auto;
  /* r6 note "full shell row" measured the band, not the text: live's
     quote TEXT sits in a desk-5 column = row*5/12 - 20 (D4 2026-07-24,
     measured 352/460/543/543/647/647) — regime overrides below */
  font-family: var(--ll-font-heading); color: var(--ll-green);
  font-size: 1.625rem; line-height: 1.2; }
.person-quote blockquote { margin: 0; }
.person-quote blockquote p { margin: 0.5rem 0; }  /* live p-large 8px */
.person-quote p:last-child { font-family: var(--ll-font);
  font-size: var(--ll-fs-base); color: var(--ll-text); margin-top: 1.5rem; }
@media (max-width: 991px) {
  .person-split { grid-template-columns: 1fr; }
  .person-split-text { padding: 2rem 1.5rem; }
}
/* C32 person video band (live probed 2026-07-25 @1920): first bio band
   pairs text (34rem col, the person-prose cap) with the consent facade
   in the RIGHT HALF of the shell — video x = 50vw exactly (inner 1600,
   facade at +800), 780x438 = 48.75rem at 16:9. The band itself is the
   normal person-prose beige-1. */
.person-video-inner { display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; }  /* gap 0: live facade x == 50vw exactly */
.person-video-text { max-width: 34rem; }
.person-video-embed { max-width: 48.75rem; }
.person-video-embed .video-embed { margin: 0; }
@media (min-width: 120rem) {
  .person-video-text { max-width: 40.4375rem; }  /* live col widening,
  same rule as the prose/split text cols */
}
@media (max-width: 991px) {
  .person-video-inner { grid-template-columns: 1fr; }
}
/* mobile person overrides: square unzoomed portrait + live's 26.4px
   section headings (trails the desktop person rules — cascade order
   matters, scar 39dd9bc) */
@media (max-width: 767px) {
  .person-hero .staff-hero-photo img { width: 100%; height: 100%; }
  .person-prose-inner h2, .person-prose-inner h3,
  .person-split-text h2, .person-split-text h3 { font-size: 1.65rem; }
}

/* D4 (2026-07-24): person-quote text column law (row*5/12 - 20px) */
@media (min-width: 62rem) {
  .person-quote-inner { max-width: calc(37.5vw - 20px); }
}
@media (min-width: 90rem) {
  .person-quote-inner { max-width: 33.9375rem; }  /* 543 */
}
@media (min-width: 120rem) {
  .person-quote-inner { max-width: 40.4375rem; }  /* 647 */
}