/* svc-proof — Wat klanten zeggen (gedeeld contract ws5/rpo5/ti5, cream,
   strak middenrif-ritme). V3 = Timo-keuze "navy duo-paneel" (260721): kop-rij +
   één navy set-piece-paneel met twee helften; per helft de quote + de grote
   portret-cutout die BOVEN de paneelrand uitsteekt (poppetjes-DNA, s6/s7).

   POP-ZONDER-BOX (Timo-iteraties): de figuur bestaat uit twee gelijk-geplaatste
   lagen — .svc-proof-figbg (cutout op SOLIDE navy = paneelkleur) áchter
   .svc-proof-fig (transparante cutout). De navy rug wordt via een css-masker
   ondoorzichtig gehouden tot de paneelrand (dekt daar de kaderrand af waar het
   hoofd erboven uitkomt) en vervaagt daarboven naar transparant (geen hard
   box-randje tegen de cream). De pop is vast op 44px via calc(100% + 44px),
   zodat de masker-overgang altijd exact op de paneelrand valt, ongeacht de
   paneelhoogte. Leesbaarheids-scrim (::after) + text-shadow houden de
   persoonsrij leesbaar. Mobiel ≤620: figuren uit, ronde avatar in de rij.
   Reveals via base.css. */

.svc-proof {
  padding-block: var(--space-section-s);
}

/* — Kop-rij — */

.svc-proof-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.svc-proof-kop {
  font-size: clamp(2rem, 2.7vw, 2.7rem);
  text-wrap: balance;
}

/* — Duo-paneel; margin-top = ruimte voor de koppen boven de rand — */

.svc-proof-paneel {
  position: relative;
  background: var(--surface-card-dark);
  border-radius: var(--r-lg);
  margin-top: 72px;   /* ruimte voor de uitstekende hoofden onder de kop */
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* — Boog-decor rechtsonder (o10-recept: eigen overflow-hidden laag) — */

.svc-proof-arcs {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.svc-proof-arc {
  position: absolute;
  right: -60px;
  top: 110%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #fff 9%, transparent);
  transform: translate(50%, -50%);
}

.svc-proof-arc--1 { width: 260px; }
.svc-proof-arc--2 { width: 460px; }
.svc-proof-arc--3 { width: 660px; }
.svc-proof-arc--4 { width: 860px; }

/* dots staan IN de eerste helft (markup), ná de figuur → boven de scrim, onder de tekst */
.svc-proof-dots {
  top: 26px;
  left: 30px;
  z-index: 1;
}

/* — Helft: quote links, figuur rechts (buiten elkaar; geen overlap) — */

.svc-proof-half {
  margin: 0;
  position: relative;
  z-index: 1;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.75rem, 3vw, 2.25rem) clamp(1.75rem, 3vw, 2.75rem);
  padding-right: clamp(228px, 20.5vw, 292px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
}

.svc-proof-half + .svc-proof-half {
  border-left: 1px solid var(--line-inv);
}

/* — De figuur: transparante cutout, hoofd steekt ~48px boven de paneelrand
   (Timo: die randplaatsing op voorhoofdhoogte is goed). GEEN navy rug/masker
   meer — dat was de oorzaak van de gradient én het lijntje dwars over het
   voorhoofd. De cutout is volledig ondoorzichtig op de persoon, dus de
   paneelrand loopt áchter het hoofd langs (onzichtbaar op het gezicht); de
   rand is alleen een schone lijn in de lege ruimte ernaast. */
.svc-proof-fig {
  position: absolute;
  right: clamp(2px, .8vw, 14px);
  bottom: 0;
  height: calc(100% + 48px);
  width: auto;
  z-index: 0;
  pointer-events: none;
}

/* CORRECTIE Timo 2026-07-31: de rechter helft loopt tegen de BUITENrand van het
   paneel aan, niet tegen de scheidingslijn. Daar viel de inset van 14px op: je zag
   de verticale snijrand van de cutout, dan een streepje navy, en dan pas de
   afgeronde paneelhoek. Bij de linker helft is diezelfde inset juist goed, want
   die houdt de figuur van de scheidingslijn af.
   Deze figuur staat nu vlak tegen de rand en volgt de hoekradius van het paneel,
   zodat de snijrand samenvalt met de kaderrand en leest als "hij loopt door buiten
   beeld" in plaats van als een halve foto. Het paneel zelf krijgt bewust GEEN
   overflow:hidden: de hoofden steken 48px boven de paneelrand uit en dat is een
   ontwerpkeuze (zie de margin-top van 72px op .svc-proof-paneel). */
.svc-proof-half:last-child .svc-proof-fig {
  right: 0;
  border-bottom-right-radius: var(--r-lg);
}

.svc-proof-mark,
.svc-proof-quote,
.svc-proof-person {
  position: relative;
  z-index: 1;
}

.svc-proof-mark {
  display: block;
  width: 30px;
  color: var(--blue-200);
  margin-bottom: 14px;
}

.svc-proof-mark svg {
  display: block;
  width: 100%;
  height: auto;
}

.svc-proof-quote {
  margin: 0;
}

.svc-proof-quote p {
  color: #fff;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 500;
  text-wrap: pretty;
  text-shadow: 0 1px 14px rgba(2, 14, 44, .55);
}

/* — Persoonsrij: naam boven, functie · bedrijf eronder — */

.svc-proof-person {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-shadow: 0 1px 10px rgba(2, 14, 44, .65);
}

.svc-proof-wie {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.svc-proof-naam {
  font-weight: 700;
  font-size: .9375rem;
  color: #fff;
  line-height: 1.4;
}

.svc-proof-rol {
  font-size: .8125rem;
  color: var(--text-body-inv);
  line-height: 1.4;
}

/* bedrijfsnaam achter de functie; " · "-scheider zit in de markup */
.svc-proof-bij {
  color: #fff;
  font-weight: 600;
}

.svc-proof-avatar {
  display: none;   /* desktop draagt de grote figuur; avatar = mobiele stand */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue-100);
  flex: none;
}

/* — Responsief — */

/* ≤900 (tablet + mobiel): gestapeld, geen uitstekende foto's (de pop werkt niet
   in één kolom — de onderste zou door de bovenste tekst steken). In plaats
   daarvan de ronde avatar in de persoonsrij, net als mobiel. De grote
   uitstekende portretten zijn een desktop-feature. */
@media (max-width: 900px) {
  .svc-proof-paneel {
    grid-template-columns: 1fr;
    margin-top: 56px;
  }
  .svc-proof-half + .svc-proof-half {
    border-left: 0;
    border-top: 1px solid var(--line-inv);
  }
  .svc-proof-half {
    padding-right: clamp(1.5rem, 5vw, 2.5rem);
    min-height: 0;
  }
  .svc-proof-fig {
    display: none;
  }
  .svc-proof-avatar {
    display: block;
  }
}