/* ============================================================
   OVER BECO — de vertrouwenspagina

   Drie blokken die nergens anders bestaan:
     .ploeg       de ploeg in beeld, collectief en zonder naamkaartjes
     .klantwoord  de drie klantenuitspraken, alle drie tegelijk
     .feiten      de controleerbare feiten op een rij

   De rest komt uit basis.css, blokken.css en home.css: .hero-smal,
   .sectiekop, .volgorde voor de werkwijze, .rea-kaart voor de
   projecten, .daadstrook voor de oproep.
   ============================================================ */

/* ══ DE PLOEG ══════════════════════════════════════════════
   Kolommen, geen raster. De foto's hebben verschillende
   verhoudingen (een staande selfie op het dak naast een liggend
   beeld van de kledij) en in een raster laat dat gaten vallen.
   Dezelfde oplossing als in de galerij op een realisatiepagina. */
.ploeg{columns:3; column-gap:clamp(20px,2.6vw,34px); margin-top:clamp(28px,4vw,48px)}
@media(max-width:900px){ .ploeg{columns:2} }
.ploeg figure{margin:0 0 clamp(20px,2.6vw,34px);
  break-inside:avoid; -webkit-column-break-inside:avoid}
.ploeg .vlak{display:block; overflow:hidden; background:var(--grijs-100);
  border-radius:var(--rond-m) 0 var(--rond-m) 0}
.ploeg img{width:100%; height:auto; display:block}
/* Ook op een telefoon blijven het er twee. Eén kolom maakte van deze
   sectie een rol van bijna drie schermen hoog, en negen keer dezelfde
   volle breedte leest als negen keer hetzelfde beeld. De tussenruimte
   krimpt mee, want anders houdt elke foto te weinig breedte over.   */
@media(max-width:560px){
  .ploeg{column-gap:14px}
  .ploeg figure{margin-bottom:14px}
}

/* ══ DE PLOEG MET NAAM ═════════════════════════════════════
   De lijst die de klant zelf beheert in het portaal (collectie
   "team", getekend door cms-collections.js in layout "personen").
   Staat onder de ploegfoto's en blijft onzichtbaar zolang er
   niemand in staat: een lege lijst neemt geen ruimte in.

   Dezelfde hoek als de foto's erboven, zodat een portret niet
   als een vreemd kaartje tussen de werffoto's valt.           */
.ploeg-namen{list-style:none; margin:clamp(28px,4vw,48px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(22px,3vw,40px) clamp(20px,2.6vw,34px)}
.ploeg-namen:empty{display:none}
@media(max-width:900px){ .ploeg-namen{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:560px){ .ploeg-namen{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px} }
.ploeg-namen .vlak{display:block; overflow:hidden; background:var(--grijs-100);
  aspect-ratio:4/5; border-radius:var(--rond-m) 0 var(--rond-m) 0}
.ploeg-namen img{width:100%; height:100%; object-fit:cover; display:block}
.ploeg-namen .persoon-leeg{display:grid; place-items:center;
  font-family:var(--disp); font-weight:600; font-size:clamp(1.8rem,3vw,2.6rem);
  letter-spacing:-.03em; color:var(--indigo)}
.ploeg-namen .naam{display:block; margin-top:12px; font-family:var(--disp);
  font-weight:600; font-size:clamp(1rem,1.3vw,1.15rem); letter-spacing:-.02em;
  line-height:1.2; color:var(--inkt); text-decoration:none}
.ploeg-namen a.naam:hover{color:var(--indigo)}
.ploeg-namen .rol{display:block; margin-top:4px; font-size:14px; line-height:1.5;
  color:var(--grijs-600)}
.ploeg-namen p{margin:8px 0 0; font-size:14px; line-height:1.55; color:var(--grijs-600)}

/* ══ TEKST NAAST BEELD ══════════════════════════════════════
   Label, kop en tekst in EEN kolom, met het beeld ernaast en
   verticaal gecentreerd tegenover dat hele blok. Stond de kop in
   een eigen sectiekop over de volle breedte, dan zweefde die los
   boven een rij die er niets mee te maken leek te hebben.

   De kopmaat komt uit dezelfde gedeelde regel als elke andere
   sectiekop, zodat er maar een plek is waar die maat staat.    */
.naast{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(24px,4vw,56px); align-items:center;
  margin-top:clamp(28px,4vw,48px)}
@media(max-width:820px){ .naast{grid-template-columns:1fr} }
.naast-tekst{display:flex; flex-direction:column}
.naast-tekst .mini{display:inline-flex; margin-bottom:clamp(14px,1.8vw,22px)}
.naast p{margin:clamp(20px,2.6vw,32px) 0 0; max-width:52ch}
.naast a:not(.knop):not(.knop-leeg){color:var(--indigo); font-weight:600; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px}
.naast .vlak{display:block; overflow:hidden; background:var(--grijs-100);
  aspect-ratio:4/3; border-radius:var(--rond-l) 0 var(--rond-l) 0}
.naast img{width:100%; height:100%; object-fit:cover; display:block}

/* ══ DE KLANTENUITSPRAKEN ══════════════════════════════════
   Alle drie tegelijk zichtbaar, geen carrousel. Wie bewijs zoekt
   moet niet moeten klikken om het tweede stuk te zien.

   Het aanhalingsteken is een ::before in goud en geen letter in de
   tekst, want een schermlezer hoort anders een losse punt aan het
   begin van elk citaat.                                        */
.klantwoord{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,34px); margin-top:clamp(28px,4vw,48px);
  align-items:start}
@media(max-width:900px){ .klantwoord{grid-template-columns:1fr} }
.klantwoord figure{margin:0; padding:clamp(24px,2.6vw,36px);
  background:#fff; border:1px solid var(--lijn);
  border-radius:var(--rond-l) 0 var(--rond-l) 0}
.klantwoord figure::before{content:""; display:block;
  width:34px; height:5px; margin-bottom:clamp(18px,2vw,26px);
  border-radius:3px 0 3px 0; background:var(--goud)}
.klantwoord blockquote{margin:0; font-size:clamp(1rem,1.25vw,1.08rem);
  line-height:1.66; color:var(--indigo-900)}
.klantwoord figcaption{margin-top:clamp(16px,1.8vw,22px);
  font-family:var(--disp); font-weight:600; font-size:14.5px;
  letter-spacing:-.02em; color:var(--indigo)}
.klantwoord figcaption span{display:block; margin-top:3px;
  font-family:var(--tekst); font-weight:400; font-size:13.5px;
  letter-spacing:0; color:var(--grijs-600)}

/* ══ DE FEITEN ═════════════════════════════════════════════
   Vier feiten die elk ergens op de site na te kijken zijn, dus
   elk met een link naar zijn bewijsplek. Een cijfer zonder weg
   naar het bewijs is een bewering.                             */
.feiten{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.4vw,32px); margin-top:clamp(28px,4vw,48px)}
@media(max-width:860px){ .feiten{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:460px){ .feiten{grid-template-columns:1fr} }
.feiten a,.feiten div{display:block; padding-top:clamp(16px,1.8vw,22px);
  border-top:3px solid var(--goud)}
.feiten b{display:block; font-family:var(--disp); font-weight:600;
  font-size:clamp(1.15rem,1.7vw,1.45rem); letter-spacing:-.03em;
  line-height:1.12; color:var(--indigo-900)}
.feiten span{display:block; margin-top:7px; font-size:14px;
  line-height:1.55; color:var(--grijs-600)}
.feiten a{transition:border-color .25s var(--ease)}
.feiten a:hover{border-color:var(--indigo)}
.feiten a:hover b{color:var(--indigo)}

/* ══ EEN HERO DIE STRAKKER SNIJDT ══════════════════════════
   Bij een groepsfoto staan de mensen klein in het kader zodra het
   volledige beeld in een 3:2-vak past. Deze variant snijdt verder
   in, zodat de gezichten groter komen. Alleen de uitsnede
   verandert: het beeld zelf blijft hetzelfde bestand.          */
.hero-smal .beeld-in img{scale:1.22; transform-origin:center 42%}
@media(max-width:940px){ .hero-smal .beeld-in img{scale:1.12} }