/* contact (8 okt, verbeterronde A): alleen wat deze pagina extra nodig heeft. Komt na basis.css. */

/* stap 1: de indicatie staat al onder elke keuze, vóór je gegevens (A2) */
.g-stap[data-nr="1"] .g-keuzes span{line-height:1.15}
.g-stap[data-nr="1"] .g-keuzes small{display:block;margin-top:5px;font:400 14px/1.25 var(--sans);color:var(--steen);transition:color .3s var(--ease-energie)}
.g-stap[data-nr="1"] .g-keuzes input:checked + span small{color:rgba(244,244,241,.66)}


/* klanten: per logo één regel over wat we bouwden, elk een link naar de projecten (A3) */
.klant-logos--uitleg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:0 var(--kol);padding:0}
.klant-logos--uitleg li{display:flex}
.klant-logos--uitleg a{flex:1;display:grid;grid-template-rows:64px auto;align-content:start;gap:14px;padding:22px 0 20px;color:inherit;text-decoration:none;background:linear-gradient(var(--vonk),var(--vonk)) 0 100%/0 2px no-repeat;transition:background-size .55s var(--ease-wissel)}
.klant-logos--uitleg a:hover,.klant-logos--uitleg a:focus-visible{background-size:100% 2px}
.klant-logos--uitleg{--logo-h:34px}
.klant-logos--uitleg img{align-self:center;max-width:100%;object-fit:contain;object-position:left center}
.klant-logos--uitleg span{max-width:26em;font-size:16px;line-height:1.45;color:rgba(244,244,241,.78);text-wrap:pretty}
.klant-verhaal{margin:18px 0 0;max-width:46em;font-size:16px;line-height:1.5;color:rgba(244,244,241,.78)}
.klant-verhaal .lnk{margin-left:6px}

@media (max-width:900px){
  /* eerste scherm op een telefoon: kop, korte regel en meteen het formulier; wie je spreekt, de review en de directe lijnen erna */
  .ph .ph-links > .wie{order:4;margin-top:36px}
  .ph .g-form{margin-top:24px}
  .ph .g-stap[data-nr="1"] .g-keuzes span{padding:11px 14px}
  .ph .g-stap[data-nr="1"] .g-keuzes small{margin-top:4px}
  .klant-logos--uitleg{grid-template-columns:1fr}
  .klant-logos--uitleg li + li{border-top:1px solid rgba(244,244,241,.2)}
  .klant-logos--uitleg a{grid-template-rows:none;grid-template-columns:136px minmax(0,1fr);align-items:center;gap:18px;padding:16px 0}
  .klant-logos--uitleg img{justify-self:start}
  .klant-verhaal .lnk{margin-left:0}
}

.g-ondertussen .lnk,.v-anders .lnk{color:var(--inkt)}