/* The homepage's own rules, linked after style.css (template2-fotos, 2026-10-02). His photos as the operator picked
   them (whatsapp/plaatsen/home.md): each place shows its picks, a row of thumbnails ending in the "+N" tile, and the
   photos behind the tile open only in the viewer. style.css is linked by every service page and stays as it is; the
   tile, the viewer's strip and its counter are already there, script.js fills the rows and focus.js crops every
   img[data-focus] around the part that must stay in view. */

/* ---- a main photo that opens the viewer: the whole frame is the link, the place label stays on top of it ---- */
.foto-open { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.foto-open img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.foto-open:hover img { transform: scale(1.02); }
.foto-open:focus-visible { outline-offset: -3px; }
.foto-open ~ .label { pointer-events: none; }

/* ---- thumbnails shaped for their pictures, as on the service pages (diensten/diensten.css is not loaded here):
   3:4 for an upright one, 4:3 for a landscape one, square for a square one; each place sets its own height ---- */
.duim.duim--34 { width: 48px; height: 64px; }
.duim.duim--43 { width: 85px; height: 64px; }
.duim.duim--11 { width: 64px; height: 64px; }

/* ---- the window in the phone's fold: n=100's focus (wastafel and bad, 0.38 of its height) needs a frame no wider
   than 2:1; the fixed 92px height made it up to 2.9:1 on wider phones, so the photo keeps 2:1 at every width ---- */
@media (max-width: 560px) {
  .mb--photo img { height: auto; aspect-ratio: 2 / 1; }
}

/* ---- every row the script fills is a whole number of pixels wide: script.js reads the row's clientWidth, which
   rounds, and where the thumbnails fit to within half a pixel the last one wrapped onto a second line ---- */
.duimen--lead, .duimen--door, .ba__duimen, .tegels__rij { width: round(down, 100%, 1px); }

/* ---- loodgieter: n=62 is upright and its focus is the band with the taps and bowls (0.5–0.8 of its height). The
   white card rose 132px onto the photo and covered the lower half of that band. Now the photo is as tall as the band
   needs at the card's width (0.3 × 4/3 = 40% of it) plus room above and below, and the card rises 64px: the band
   stays clear of the card at every width, with a little more of the mirror above it. The seam row holds as many
   thumbnails as fit in its width (40% of the card from 1061px, up to 420px below), the "+N" last. ---- */
.lead-card { container-type: inline-size; }
@media (min-width: 561px) {
  .lead-card__photo { height: max(300px, calc(40cqw + 160px)); }
  .lead-card__body { margin-top: -64px; }
}
@media (max-width: 560px) {
  .lead-card__photo { height: max(280px, calc(40cqw + 128px)); }   /* the card rises 56px here */
}
@media (min-width: 1061px) {
  .duimen--lead { width: round(down, 40%, 1px); justify-content: flex-end; }
  .duimen--lead .duim.duim--34 { width: 57px; height: 76px; }
  .duimen--lead .duim.duim--43 { width: 101px; height: 76px; }
  .duimen--lead .duim.duim--11 { width: 76px; height: 76px; }
}
@media (min-width: 561px) and (max-width: 1060px) {
  .duimen--lead { width: min(round(down, 100%, 1px), 420px); margin-left: auto; }
}
@media (max-width: 560px) {
  .duimen--lead .duim.duim--34 { width: 42px; height: 56px; }
  .duimen--lead .duim.duim--43 { width: 75px; height: 56px; }
  .duimen--lead .duim.duim--11 { width: 56px; height: 56px; }
}

/* ---- loodgieter, achter de tegels: the three picks as tiles, then the "+20" as a tile. The row takes the space
   beside the words (under it below 1001px, where four tiles no longer fit beside them), so the script can put more
   tiles in it where they fit; under 721px four to a row, the tile last. ---- */
.tegels { grid-template-columns: minmax(0, 18em) minmax(0, 1fr); }
.tegels__rij { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 12px; }
.tegels__rij > li { flex: none; width: clamp(104px, 11vw, 150px); }
.tegels__b { position: relative; }
@media (max-width: 1000px) {
  .tegels { grid-template-columns: minmax(0, 1fr); }
  .tegels__rij { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .tegels__rij { gap: 10px; }
  .tegels__rij > li { width: calc((100% - 30px) / 4); }
}

/* ---- the doors: a 16:9 photo at every width (it was a 2.6:1 band from 961px up, and already 16:9 below). Three of
   the four door photos stand upright; 16:9 shows the whole of n=293 and about 42% of the height of the upright ones
   (the ketel itself, the mirrors, the wall), and the two doors of a row stay the same height. Under it the thumbnails
   in their own shapes, as many as fit, the "+N" last. ---- */
.door__photo { height: auto; aspect-ratio: 16 / 9; }
.duimen--door .duim.duim--34 { width: 42px; height: 56px; }
.duimen--door .duim.duim--43 { width: 75px; height: 56px; }
.duimen--door .duim.duim--11 { width: 56px; height: 56px; }
@media (max-width: 560px) {
  .duimen--door .duim.duim--34 { width: 39px; height: 52px; }
  .duimen--door .duim.duim--43 { width: 69px; height: 52px; }
  .duimen--door .duim.duim--11 { width: 52px; height: 52px; }
}

/* ---- badkamer: under the slider the Almere pair (Voor/Na), then the row with the rest of that job and the "+18" ---- */
.ba__duimen { margin-top: 12px; }
.ba__duimen .duim { box-shadow: 0 0 0 2px var(--kalk), 0 2px 8px rgba(38, 51, 58, .2); }

/* ---- projecten: the last card is the "+18", in the carousel's own shape; the count a little larger on a card ---- */
.werk__open.meer .meer__n b { font-size: clamp(30px, 16cqmin, 56px); }
.werk__open.meer .meer__w { font-size: 14px; }

/* ============ ECHT 2026-10-06 — the photos read as his own jobs, said three ways at once (the operator: "all 3"):
   "Eigen werk" in every label, a line at every photo block, his seal on every main photo and project card ============ */

/* in the label: since template2-label, LABEL below */

/* in the text: "Projecten die wij gedaan hebben · N foto's" at every photo block, opening its series */
.echt-regel {
  display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; background: none;
  font-family: var(--f-tech); font-weight: 600; font-size: 13.5px; letter-spacing: .03em; line-height: 1.35;
  color: var(--lood-zacht); text-align: left; cursor: pointer;
}
.echt-regel .ico { flex: none; width: 17px; height: 17px; fill: var(--dakpan); }
.echt-regel b { font-weight: 700; color: var(--lood); }
.echt-regel u { text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.echt-regel:hover u { text-decoration-thickness: 2px; }
.doors .echt-regel { color: var(--lood-grijs); margin-top: -8px; }
.doors .echt-regel b { color: var(--kalk-wit); }
.doors .echt-regel .ico { fill: var(--dakpan-licht); }
.tegels .echt-regel { margin: 12px 0 0; }
.ba .echt-regel { margin: 14px 0 0; }
.werk__echt { margin: 10px 0 0; max-width: 40em; color: var(--lood-zacht); font-size: 16px; line-height: 1.5; }

/* his stamp: a round seal on every main photo and project card, tilted as if pressed on */
.zegel {
  display: block; position: absolute; z-index: 2; width: 92px; height: 92px; pointer-events: none;
  transform: rotate(-12deg); filter: drop-shadow(0 2px 5px rgba(26, 36, 41, .38)); font-family: var(--f-tech);
}
.lead-card__photo .zegel { left: 18px; top: 18px; }
.door__photo .zegel { right: 12px; top: 12px; width: 76px; height: 76px; }
.ba__stage .zegel { right: 14px; bottom: 14px; }
.werk__open .zegel { right: 12px; top: 12px; width: 72px; height: 72px; }
.area__photo .zegel { right: 12px; bottom: 12px; width: 76px; height: 76px; }
@media (max-width: 560px) {
  .zegel { width: 72px; height: 72px; }
  .door__photo .zegel, .werk__open .zegel, .area__photo .zegel { width: 64px; height: 64px; }
  .area__photo .zegel { top: 30%; bottom: auto; }   /* clear of the label, below the gable's slope */
}

/* ============ LABEL 2026-10-06 — "Onze projecten" far more prominent, the place and date of the picture beside
   it. Of three answers his pick: the band on every photo; on the project cards the shade, the place and date
   alone and large. ============ */
.label { pointer-events: none; }
.label__wie { display: block; text-transform: uppercase; }
.label__waar { display: block; }
.ba__cap { justify-content: flex-end; }
.label--ba { z-index: 3; }

/* the band across the photo's edge: the words left, the place and date right */
.label:not(.label--plain) {
  left: 0; right: 0; bottom: 0; top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: 6px 14px; flex-wrap: wrap; padding: 13px 18px 12px; border-radius: 0;
  background: rgba(26, 36, 41, .84); border-top: 3px solid var(--dakpan);
}
.lead-card__photo .label:not(.label--plain) { top: 0; bottom: auto; border-top: 0; border-bottom: 3px solid var(--dakpan); }
.label__wie { color: #fff; font: 700 19px/1 var(--f-tech); letter-spacing: .14em; }
.label__waar { color: var(--gips); font: 600 13px/1.2 var(--f-tech); letter-spacing: .06em; }
.lead-card__photo .zegel { top: 70px; }
.area__photo .zegel, .ba__stage .zegel { bottom: 66px; }

/* the project cards: a shade from the foot, the place and date large on it with a pin */
.werk__open .label:not(.label--plain) {
  flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 80px 20px 18px; border-top: 0;
  background: linear-gradient(to top, rgba(26, 36, 41, .86) 0%, rgba(26, 36, 41, .55) 50%, rgba(26, 36, 41, 0) 100%);
}
.werk__open .label__waar { display: flex; align-items: center; gap: 8px; color: #fff; font: 700 22px/1.15 var(--f-tech); letter-spacing: .02em; text-shadow: 0 1px 10px rgba(0, 0, 0, .3); }

/* under the first tile of "achter de tegels": the words above the place */
.tegels__cap::before {
  content: 'Bekijk onze projecten'; display: block; margin-bottom: 3px; padding-top: 5px; border-top: 3px solid var(--dakpan);
  color: var(--lood); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}

/* the photo viewer: the place and date alone, large, with the cards' pin (no caption where a photo has no place) */
.lb__cap { display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; font-size: 21px; font-weight: 700; letter-spacing: .02em; }
.lb__cap[hidden] { display: none; }
.lb__cap::before, .werk__open .label__waar::before, .door__photo .label__waar::before {
  content: ''; flex: none; width: 19px; height: 19px; background: var(--dakpan-licht);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 00-7-7zm0 9.6a2.6 2.6 0 110-5.2 2.6 2.6 0 010 5.2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 00-7-7zm0 9.6a2.6 2.6 0 110-5.2 2.6 2.6 0 010 5.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* the line at the end of the description: one piece after the paragraph's last word, on a line of its own where
   it does not fit; inside it breaks only when it is wider than the whole column */
/* not nowrap: wider than the column (a phone, before the fonts arrive) it would widen the section, and the
   thumbnail rows count their slots once, at load (found 2026-10-06: every door row wrapped to two lines at 390) */
p > .echt-regel, .doors p > .echt-regel, .tegels p > .echt-regel { display: inline-block; max-width: 100%; margin: 0; vertical-align: baseline; }
p > .echt-regel .ico { display: inline-block; vertical-align: -3px; margin-right: 7px; }

@media (max-width: 560px) {
  .label:not(.label--plain) { padding: 10px 14px 9px; }
  .label__wie { font-size: 16px; }
  .label__waar { font-size: 12px; }
  .lead-card__photo .zegel { top: 56px; }
  .area__photo .zegel { top: 30%; bottom: auto; }
  .ba__stage .zegel { bottom: 60px; }
  .werk__open .label:not(.label--plain) { padding: 64px 16px 15px; }
  .werk__open .label__waar { font-size: 19px; }
  .werk__open .label__waar::before, .lb__cap::before, .door__photo .label__waar::before { width: 17px; height: 17px; }
  .lb__cap { font-size: 18px; }
}

/* ============ KNOP 2026-10-06 — a call and a WhatsApp button in the photo viewer. Of three ways his pick: on a
   computer "Ook zo'n klus?" and the two buttons right under the photo and its place; on a phone two small
   buttons in the top row beside the ×. ============ */
.lb__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin-top: 4px; }
.lb__vraag { margin: 0; color: var(--kalk-wit); font: 700 15px/1.2 var(--f-tech); letter-spacing: .12em; text-transform: uppercase; }
.lb__knoppen { display: flex; gap: 10px; }
.lb__knoppen .btn { min-height: 50px; padding: 0 22px; white-space: nowrap; }
.lb__kort { display: none; }   /* wide: the number (a computer cannot tap to call); a phone: one word each */
.lb__img { max-height: calc(100vh - 300px); max-height: calc(100svh - 300px); }

@media (max-width: 560px) {
  .lb__vraag, .lb__lang { display: none; }
  .lb__kort { display: inline; }
  .lb__cta { position: fixed; top: 12px; right: 66px; margin: 0; flex-wrap: nowrap; }
  .lb__knoppen { gap: 6px; }
  .lb__knoppen .btn { min-height: 48px; padding: 0 14px; border-radius: 24px; font-size: 15px; gap: 7px; }
  .lb__img { max-height: calc(100svh - 270px); }   /* as it was: the buttons take no height on a phone */
  .lb__tel { padding: 0 12px; font-size: 14px; }   /* the counter narrower, so the row fits at 360 */
}

/* ============ KORT 2026-10-06 — the customer's question gone from the six service blocks; the description one
   larger sentence. ============ */
.dienst-zin { font-size: 21px; line-height: 1.5; }
.lead-card__copy > p.dienst-zin:not(.appje):not(.laatst) { font-size: 21px; }   /* over style.css's 17.5px for the lead card */
@media (max-width: 560px) {
  .dienst-zin, .lead-card__copy > p.dienst-zin:not(.appje):not(.laatst) { font-size: 19px; }
}

/* ============ PLEK 2026-10-06 — the four doors: the place and date prominent as on the project cards; "Bekijk onze
   projecten" off the band. Of three answers his pick: a terracotta pill top left on the photo. ============ */
.door__photo .label:not(.label--plain) {
  flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 80px 20px 18px; border-top: 0;
  background: linear-gradient(to top, rgba(26, 36, 41, .86) 0%, rgba(26, 36, 41, .55) 50%, rgba(26, 36, 41, 0) 100%);
}
.door__photo .label__waar { display: flex; align-items: center; gap: 8px; color: #fff; font: 700 22px/1.15 var(--f-tech); letter-spacing: .02em; text-shadow: 0 1px 10px rgba(0, 0, 0, .3); }

/* the pill, top left on the photo; the photo under it is the link */
.bekijk-foto {
  position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 9px; pointer-events: none;
  padding: 11px 15px 10px; border-radius: 4px; background: var(--dakpan); color: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .28);
  font: 700 15px/1 var(--f-tech); letter-spacing: .12em; text-transform: uppercase;
}
.bekijk-foto .ico { width: 16px; height: 16px; }

@media (max-width: 560px) {
  .door__photo .label:not(.label--plain) { padding: 64px 16px 15px; }
  .door__photo .label__waar { font-size: 19px; }
  .bekijk-foto { left: 10px; top: 10px; padding: 9px 12px 8px; font-size: 13px; gap: 7px; }
  .bekijk-foto .ico { width: 14px; height: 14px; }
}

/* ============ KOP 2026-10-06 — on a phone the four doors show no description: photo, thumbnails, heading,
   buttons. ============ */
@media (max-width: 560px) {
  .door > p.dienst-zin { display: none; }
}

/* ============ ROND 2026-10-06 — the project row goes round; the bar follows the scroll directly, so at the end of a
   round it does not sweep back across. ============ */
.werk__balk span { transition: none; }

/* ============ SICIL 2026-10-07 — meet the owner between the band and Loodgieter: "Hoi! Ik ben Sicil.", three lines in
   his own words each with a photo, signed by hand; his photo on the right. Of three answers his pick: 1, the note
   (brief), without the list of services. ============ */
.sicil { background: var(--kalk-wit); padding: clamp(64px, 8vw, 112px) 0; }
.sicil__grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(36px, 6vw, 96px);
  grid-template-areas: "kop beeld" "brief beeld"; grid-template-rows: auto 1fr; align-items: start;
}
.sicil__kop { grid-area: kop; margin-bottom: clamp(14px, 1.6vw, 22px); }
.sicil__h {
  font-weight: 800; font-size: clamp(44px, 5.6vw, 84px); line-height: 1; letter-spacing: -.035em;
  margin: 0; text-wrap: balance;
}
.sicil__lead { margin: 12px 0 0; font-size: clamp(19px, 1.7vw, 23px); font-weight: 500; color: var(--lood-zacht); }
.sicil a[data-lb] { cursor: zoom-in; }
.sicil a[data-lb] img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.sicil a[data-lb]:hover img { transform: scale(1.03); }
.sicil__beeld { grid-area: beeld; margin: 0; }
.sicil__hij { display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-1); }
.sicil__brief { grid-area: brief; }
.sicil__punten li {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 20px; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--kalk-rand);
}
.sicil__punten h3 { font-weight: 800; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; font-size: clamp(23px, 2.2vw, 30px); }
.sicil__punten p { margin: 5px 0 0; font-size: 17.5px; line-height: 1.45; color: var(--lood-zacht); }
.sicil__duim { display: block; aspect-ratio: 3 / 4; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 2px rgba(38, 51, 58, .12); }
.sicil__a { display: block; width: 100%; height: 100%; }
.sicil__duim--blad { background: var(--kalk-diep); padding: 6px; }
.sicil__duim--blad img { object-fit: contain; }
.sicil__hand { font-family: 'Caveat', 'Segoe Print', cursive; font-weight: 600; }
.sicil__sig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; padding-top: 14px; border-top: 1px solid var(--kalk-rand); }
.sicil__sig .sicil__hand { font-size: clamp(50px, 4.6vw, 64px); line-height: 1; color: var(--dakpan); display: inline-block; rotate: -5deg; }
.sicil__rol { font: 600 13px/1.3 var(--f-tech); letter-spacing: .12em; text-transform: uppercase; color: var(--lood-zacht); }
@media (max-width: 900px) {
  .sicil__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kop" "beeld" "brief"; grid-template-rows: none; }
  .sicil__beeld { margin-bottom: 14px; max-width: 520px; }
}
@media (max-width: 560px) {
  .sicil__punten li { grid-template-columns: 70px minmax(0, 1fr); gap: 16px; }
  .sicil__punten h3 { font-size: 21px; }
  .sicil__punten p { font-size: 16px; }
}

/* ============ SICIL-LABEL 2026-10-07 — his photo gets a label and the greeting goes onto it. Of three answers his
   pick: 2, gesigneerd — the project cards' shade from the foot, "Hoi! Ik ben" and his name by hand. ============ */
.sicil__hoi { margin: 0; font-weight: 800; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.sicil__label-rol { display: block; margin-top: 8px; font: 600 13px/1.25 var(--f-tech); letter-spacing: .14em; text-transform: uppercase; }
.sicil__beeld--sig { position: relative; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-1); }
.sicil__beeld--sig .sicil__hij { border-radius: 0; box-shadow: none; }
.sicil__schaduw {
  position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; padding: 150px 26px 22px;
  background: linear-gradient(to top, rgba(26, 36, 41, .9) 0%, rgba(26, 36, 41, .62) 42%, rgba(26, 36, 41, 0) 100%);
}
.sicil__schaduw .sicil__hoi { color: #fff; font-size: clamp(28px, 2.6vw, 36px); text-shadow: 0 1px 10px rgba(0, 0, 0, .3); }
.sicil__schaduw .sicil__hand {
  display: block; margin: 10px 0 4px -4px; font-size: clamp(80px, 7.4vw, 110px); line-height: .82; font-weight: 600;
  letter-spacing: 0; color: var(--dakpan-licht); rotate: -5deg; transform-origin: left center;
}
.sicil__schaduw .sicil__label-rol { color: var(--gips); }
/* with the greeting gone from it, the column stands in the middle of the photo's height, not at its top */
@media (min-width: 901px) {
  .sicil__grid { grid-template-areas: ". beeld" "kop beeld" "brief beeld" ". beeld"; grid-template-rows: 1fr auto auto 1fr; }
}
@media (max-width: 560px) {
  .sicil__schaduw { padding: 110px 18px 16px; }
  .sicil__schaduw .sicil__hoi { font-size: 26px; }
  .sicil__schaduw .sicil__hand { font-size: 78px; margin-top: 6px; }
  .sicil__label-rol { font-size: 12px; }
}

/* ============ WIE 2026-10-07 — "Wie zijn wij?" over Even voorstellen, the signed photo the main thing, the three lines
   tied to it. Of three answers his pick: 1, kaart — photo and lines one card, the header above. ============ */
.wie__kop { margin-bottom: clamp(24px, 3vw, 40px); }
.wie__kop .sec-h { margin: 0; }
.wie__beeld { margin: 0; }
.wie__kaart {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  background: var(--gips-licht); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-1);
}
.wie__kaart .wie__beeld { border-radius: 0; box-shadow: none; }
.wie__kaart .sicil__hij { aspect-ratio: 9 / 10; height: 100%; border-radius: 0; box-shadow: none; }
.wie__kaart .wie__paneel { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 56px); }
.wie__kaart .sicil__punten li { border-top-color: var(--gips-diep); }
.wie__kaart .sicil__punten li:first-child { border-top: 0; }
@media (max-width: 860px) {
  .wie__kaart { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .wie__kaart .sicil__hij { aspect-ratio: 4 / 5; }
  .wie__kaart .wie__paneel { padding: 6px 20px 10px; }
}

/* ============ PANEEL 2026-10-07 — the three lines fill the card's height instead of floating in its middle; same
   words and photos. Of three answers his pick: 1, verdeeld — each line a third, the photo grown to fill it. ============ */
/* the magazine whole, never cut (the photos' cover rule outranked its contain: "ALLES" lost its A) */
.sicil .wie__kaart--verdeeld .sicil__duim--blad img { object-fit: contain; }

/* the card is two columns: the photo's height (60.6cqw: 6/11 of the width at 9/10) sets it, the lines split it in
   three; each photo is placed in its line, so it never pushes the card taller */
@media (min-width: 861px) {
  .wie__kaart--verdeeld { container-type: inline-size; }
  .wie__kaart--verdeeld .wie__paneel { padding: 0 clamp(28px, 4.2cqw, 52px); }
  .wie__kaart--verdeeld .sicil__punten { flex: 1 1 auto; display: grid; grid-auto-rows: 1fr; }
  .wie__kaart--verdeeld .sicil__punten li {
    position: relative; display: flex; flex-direction: column; justify-content: center;
    padding: 2.2cqw 0 2.2cqw calc(12.6cqw + clamp(18px, 2.2cqw, 28px));
  }
  .wie__kaart--verdeeld .sicil__duim { position: absolute; aspect-ratio: auto; left: 0; top: 2.2cqw; bottom: 2.2cqw; width: 12.6cqw; }
}

/* ============ FEITEN 2026-10-16 — Wie zijn wij? without his portrait: the card carries only the three lines, each
   with its photo as before, side by side from 861px up and under each other below; the operator: "collapse the
   element where meet the owner is to just the 3 facts", "only the meet the owner photo". The fold's "Maak kennis met
   de eigenaar" is gone with it (the KENNIS block of 10-07). ============ */
.wie__kaart--feiten { grid-template-columns: minmax(0, 1fr); }
.wie__kaart--feiten .sicil__punten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; }
.wie__kaart--feiten .sicil__punten li {
  grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: start;
  padding: clamp(26px, 3vw, 40px) clamp(20px, 2.4vw, 34px);
  border-top: 0; border-left: 1px solid var(--gips-diep);
}
.wie__kaart--feiten .sicil__punten li:first-child { border-left: 0; }
.wie__kaart--feiten .sicil__punten h3 { font-size: clamp(21px, 1.9vw, 26px); }
.sicil .wie__kaart--feiten .sicil__duim--blad img { object-fit: contain; }   /* the magazine whole, as on the card before */
@media (max-width: 860px) {
  .wie__kaart--feiten .sicil__punten { grid-template-columns: minmax(0, 1fr); }
  .wie__kaart--feiten .sicil__punten li { align-items: center; padding: 16px 20px; border-left: 0; border-top: 1px solid var(--gips-diep); }
  .wie__kaart--feiten .sicil__punten li:first-child { border-top: 0; }
}
@media (max-width: 560px) {
  .wie__kaart--feiten .sicil__punten li { grid-template-columns: 70px minmax(0, 1fr); gap: 16px; }
}

/* ============ VERDER 2026-10-07 — on the seam between Wie zijn wij? and Loodgieter, the six services on a card that
   send the visitor on. Of three answers his pick: 3, index. ============ */
/* the two sections give up some of their padding to it, so the gap stays about what it was */
.sicil { padding-bottom: clamp(40px, 5vw, 72px); }
.svc-lead { padding-top: clamp(40px, 5vw, 72px); }

.naar { position: relative; z-index: 2; text-align: center; background: var(--kalk-wit); }
.naar__label { margin-bottom: 12px; }
.naar__naad { background: linear-gradient(var(--kalk-wit) 50%, var(--kalk-diep) 50%); }   /* the seam through the card's middle */
.naar__kaart {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none;
  background: var(--kalk-wit); border-radius: var(--r); box-shadow: var(--shadow-1); overflow: hidden;
}
.naar__kaart li + li { border-left: 1px solid var(--kalk-diep); }
.naar__kaart a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%;
  padding: 18px 10px 14px; color: var(--lood); text-decoration: none; font: 700 16px/1.2 var(--f-sans); text-wrap: balance;
  transition: background-color .15s;
}
.naar__kaart a:hover { background: var(--gips-licht); }
.naar__kaart .ico { width: 18px; height: 18px; color: var(--dakpan); transition: transform .15s; }
.naar__kaart a:hover .ico { transform: translateY(3px); }
@media (max-width: 900px) {
  .naar__kaart { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .naar__kaart li:nth-child(3n + 1) { border-left: 0; }
  .naar__kaart li:nth-child(n + 4) { border-top: 1px solid var(--kalk-diep); }
}
@media (max-width: 560px) {
  .naar__kaart { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .naar__kaart li:nth-child(n) { border-left: 0; border-top: 0; }
  .naar__kaart li:nth-child(even) { border-left: 1px solid var(--kalk-diep); }
  .naar__kaart li:nth-child(n + 3) { border-top: 1px solid var(--kalk-diep); }
  .naar__kaart a { font-size: 15px; padding: 14px 8px 12px; }
}
@media (prefers-reduced-motion: reduce) { .naar__kaart .ico { transition: none; } }

/* ============ INDEX 2026-10-07 — "ONZE DIENSTEN" above the services card bigger and more prominent. Of three answers
   his pick: 2, tab — light capitals on a dark tab standing on the card. ============ */
.naar__label {
  width: fit-content; margin: 0 auto; padding: 13px calc(32px - .24em) 11px 32px;   /* less on the right: the last letter-space */
  background: var(--lood); color: var(--kalk-wit); font-size: clamp(15px, 1.3vw, 17px); letter-spacing: .24em;
  border-radius: 8px 8px 0 0;
}
.naar__kaart { border-top: 4px solid var(--lood); }

/* ============ ACHTER 2026-10-07 — the shape behind the chat: the gable came from an earlier logo, SAL's emblem is
   round. Of three answers his pick: 2, embleem — the emblem itself, large and faint. From 561px up; the phone has no
   chat in the fold. ============ */
@media (min-width: 561px) {
  /* where the chat is, for the emblem to sit on it: its width, its middle, how far right of it the emblem leans */
  .fold__house { --cw: min(100%, 420px); --mx: calc(var(--cw) / 2); --dx: 40px; }
  .fold__house::before {
    --d: calc(var(--cw) + 150px);
    top: 0; right: auto; bottom: auto; left: calc(var(--mx) + var(--dx) - var(--d) / 2);
    width: var(--d); height: var(--d); clip-path: none;
    background: url(embleem.svg) center / contain no-repeat; opacity: .14;
  }
}
@media (min-width: 561px) and (max-width: 1060px) {
  .fold__house { --cw: min(100%, 380px); }   /* as the chat */
}
@media (min-width: 561px) and (max-width: 960px) {
  .fold__house { --mx: 50%; --dx: 0px; }   /* the house stacks: the chat in its middle, the emblem on it */
}

/* ============ KLIK 2026-10-07 — every review mention links to its profile (Klantenoordelen.nl, Werkspot). The name
   is the link; its ::after lies over the whole tile, so nothing moves; the look changes only on hover. ============ */
.band__rate, .proof, .plat { position: relative; }
.oordeel { color: inherit; text-decoration: none; }
.oordeel::after { content: ""; position: absolute; inset: 0; }
.oordeel:focus-visible { outline: none; }
.oordeel:focus-visible::after { outline: 3px solid var(--dakpan); outline-offset: 3px; border-radius: 4px; }
.band__rate:hover .oordeel, .proof:hover .oordeel, .plat:hover .oordeel { text-decoration: underline; text-underline-offset: 3px; }
.band__rate:hover .oordeel b, .proof:hover .oordeel b, .plat:hover .oordeel { color: var(--dakpan); }
a.rv__via { text-decoration: none; transition: color .15s, border-color .15s; }
a.rv__via:hover { color: var(--dakpan); border-color: var(--dakpan); }

/* ============ LIJST 2026-10-07 — on a phone the task lists under loodgieter and badkamerrenovatie are hidden (still
   in the HTML, shown from 561px up). The loodgieter side panel keeps only the reviews row. ============ */
@media (max-width: 560px) {
  .scope, .lead-card__side > .caps { display: none; }
  .lead-card__side .proof { margin-top: 0; padding-top: 0; border-top: 0; }
}

/* ============ MINDER 2026-10-07 — the offerte band without its small text: the headline beside the buttons on their
   middle, above them below 1061px, stacked below 561px. On a phone the tegels block under the loodgieter card is
   hidden (still in the HTML). Under the brand marks the band carries as much space as above their label, now that the
   white Wie zijn wij? follows it. ============ */
.band { padding-bottom: clamp(26px, 3vw, 36px); }   /* = .merken's margin-top */
.breath__row { grid-template-areas: "big wa afspraak"; }
.breath__big { align-self: center; }
@media (max-width: 1060px) { .breath__row { grid-template-areas: "big big big" "wa afspraak ."; } }
@media (max-width: 560px) {
  .breath__row { grid-template-areas: "big" "wa" "afspraak"; }
  .tegels { display: none; }
  .band { padding-bottom: 22px; }
}

/* 10-16 (subpagina/samenvoegen.py): the six go to their service pages, no arrow under the name */
.naar__kaart a { padding-bottom: 18px; }
@media (max-width: 560px) { .naar__kaart a { padding-bottom: 14px; } }