/* BannerBazen · experts.css
   Digital advertising experts (/digital-advertising-experts/, v12). Alleen wat deze pagina nodig heeft;
   koppen, knoppen, kruimelpad, casekaarten, stappen en vragen komen uit site.css. */

/* ---------- de kop: de tekst links, een bestaand werkvoorbeeld rechts, op ware grootte ---------- */
.dae-kop{padding-top:calc(var(--kop-h) + var(--tl-h) + clamp(40px,7vw,110px))!important;padding-bottom:clamp(60px,8vw,120px)!important;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,6vw,120px);align-items:end}
.dae-kop .kruimel{margin-bottom:18px}
.dae-kop__h1{max-width:15ch}
.dae-kop__lead{margin-top:clamp(20px,2.4vw,34px);max-width:50ch;display:grid;gap:14px}
.dae-kop__lead p{font-size:clamp(19px,1.45vw,25px);line-height:1.38;letter-spacing:calc(-.012em * var(--krap) + var(--lucht));color:var(--fg-2)}
.dae-kop .knoppen{margin-top:clamp(24px,2.8vw,40px)}
.dae-kop__werk{display:flex;justify-content:flex-end}

/* ---------- de secties ---------- */
.dae-sectie{border-top:1px solid var(--lijn)}
.pagina-dae .sk>.titel{font-size:clamp(34px,4.4vw,86px);line-height:.96;letter-spacing:calc(-.04em * var(--krap) + var(--lucht))}

/* voor wie: naast elkaar, op een telefoon onder elkaar */
.dae-wie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,72px);max-width:1180px}
.dae-wie__groep{display:grid;gap:12px;align-content:start;padding-top:18px;border-top:2px solid var(--inkt)}
.dae-wie__groep h3{font-size:clamp(24px,2vw,34px);line-height:1.08;letter-spacing:calc(-.03em * var(--krap) + var(--lucht))}
.dae-wie__groep p{font-size:18px;line-height:1.5;color:var(--fg-2);max-width:52ch}

/* het aanbod: compact, één regel per vak, met de link naar zijn pagina */
/* één raster voor alle rijen (subgrid), zodat naam, tekst en link per kolom op één lijn staan */
.dae-diensten{list-style:none;display:grid;grid-template-columns:minmax(170px,.55fr) minmax(0,1.45fr) auto;column-gap:clamp(24px,4vw,60px);max-width:1180px}
.dae-dienst{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:8px;align-items:baseline;padding:22px 0;border-top:1px solid var(--lijn)}
.dae-dienst:last-child{border-bottom:1px solid var(--lijn)}
.dae-dienst__naam{font-size:clamp(21px,1.7vw,30px);line-height:1.1;letter-spacing:calc(-.025em * var(--krap) + var(--lucht))}
.dae-dienst p{font-size:17px;line-height:1.45;color:var(--fg-2);max-width:58ch}
.dae-dienst .pijl-link{white-space:nowrap;justify-self:start}

/* het werk: de drie cases naast elkaar, daaronder al het werk */
.dae-cases .sk{margin-bottom:clamp(28px,3.4vw,52px)}
/* oogje en intro op oranje in volle inkt: de gedempte inkt haalt op oranje geen 4,5 : 1 */
.dae-cases .sk :is(.sk__oog,.sk__intro){color:var(--inkt)}
.dae-cases__meer{margin-top:clamp(28px,3.4vw,52px)}
@media (min-width:1101px){
  .dae-cases .cases__lijst{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dae-stappen{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* vragen: de vraag is een h3, in de maat van de vraag op de andere pagina's */
.dae-vragen .vr__v{font:inherit;letter-spacing:inherit}

/* afsluiting: het contactblok van de site (v13, basis.contactblok) */

@media (max-width:900px){
  .dae-kop{grid-template-columns:minmax(0,1fr)}
  .dae-kop__werk{justify-content:flex-start}
}
@media (max-width:760px){
  .dae-wie{grid-template-columns:minmax(0,1fr)}
  .dae-diensten,.dae-dienst{grid-template-columns:minmax(0,1fr)}
}