/* Creative Leads - styling dienstenpagina's
   Versie 2.0
   Elke pagina heeft een eigen scope (.cl-diensten.cl-<slug>) zodat pagina's
   met dezelfde classnamen elkaar niet kunnen overschrijven.
   Nav en footer worden door het thema geleverd en staan hier niet in. */

/* ==================== PAGINA: diensten ==================== */
:root{
  --navy:#0A1128;
  --blauw:#074078;
  --teal:#1E82A2;
  --teal-diep:#166A85;
  --papier:#FBFAF7;
  --wit:#FFFFFF;
  --lijn:#E3E1DA;
  --grijs:#5A6072;
  --grijs-licht:#7B8194;

  --r-card:16px;
  --r-pill:999px;

  --f-display:"Bricolage Grotesque",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --f-body:"Inter",system-ui,sans-serif;

  --schaduw:0 1px 2px rgba(10,17,40,.04), 0 12px 32px rgba(10,17,40,.07);
  --schaduw-op:0 2px 4px rgba(10,17,40,.05), 0 20px 44px rgba(10,17,40,.11);
  --ease:cubic-bezier(.16,1,.3,1);
}
.cl-diensten.cl-diensten *, .cl-diensten.cl-diensten *::before, .cl-diensten.cl-diensten *::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
.cl-diensten.cl-diensten{
  margin:0;
  background:var(--papier);
  color:var(--navy);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.cl-diensten.cl-diensten img{display:block;max-width:100%;}
.cl-diensten.cl-diensten a{color:inherit;}
.cl-diensten.cl-diensten h1, .cl-diensten.cl-diensten h2, .cl-diensten.cl-diensten h3{font-family:var(--f-display);letter-spacing:-.022em;margin:0;}
.cl-diensten.cl-diensten .wrap{
  width:min(92vw, 1600px);
  margin:0 auto;
  padding:0 clamp(20px, 2.5vw, 40px);
}
@media (min-width:1240px) and (max-width:1439px){
.cl-diensten.cl-diensten .wrap{width:min(94vw,1400px);}
}
.cl-diensten.cl-diensten .knop{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:var(--r-pill);
  font-family:var(--f-body);font-weight:600;font-size:15px;
  text-decoration:none;white-space:nowrap;border:1.5px solid transparent;
  transition:transform .18s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);
}
.cl-diensten.cl-diensten .knop:active{transform:translateY(1px) scale(.985);}
.cl-diensten.cl-diensten .knop-primair{background:var(--teal);color:#fff;box-shadow:0 6px 18px rgba(30,130,162,.28);}
.cl-diensten.cl-diensten .knop-primair:hover{background:var(--teal-diep);box-shadow:0 10px 26px rgba(30,130,162,.34);}
.cl-diensten.cl-diensten .knop-rand{border-color:var(--navy);color:var(--navy);background:transparent;}
.cl-diensten.cl-diensten .knop-rand:hover{background:var(--navy);color:#fff;}
.cl-diensten.cl-diensten .knop-klein{padding:10px 18px;font-size:14px;}
.cl-diensten.cl-diensten .hero{padding:64px 0 76px;}
.cl-diensten.cl-diensten .hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(48px,5vw,88px);align-items:center;}
.cl-diensten.cl-diensten .eyebrow{
  font-family:var(--f-mono);font-size:12px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--teal);margin:0 0 20px;
}
.cl-diensten.cl-diensten .hero h1{font-size:clamp(2.5rem,4.6vw,4.4rem);line-height:1.03;font-weight:800;}
.cl-diensten.cl-diensten .hero p{font-size:clamp(18px,1.15vw,21px);color:var(--grijs);max-width:52ch;margin:24px 0 36px;}
.cl-diensten.cl-diensten .hero-acties{display:flex;gap:14px;flex-wrap:wrap;}
.cl-diensten.cl-diensten .hero-media{position:relative;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--schaduw-op);aspect-ratio:4/5;}
.cl-diensten.cl-diensten .hero-media img{width:100%;height:100%;object-fit:cover;}
.cl-diensten.cl-diensten .diensten{padding:20px 0 96px;}
.cl-diensten.cl-diensten .sectiekop{max-width:64ch;margin:0 0 clamp(36px,3.2vw,52px);}
.cl-diensten.cl-diensten .sectiekop h2{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.12;font-weight:700;}
.cl-diensten.cl-diensten .sectiekop p{color:var(--grijs);margin:16px 0 0;}
.cl-diensten.cl-diensten .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(18px,1.6vw,28px);}
.cl-diensten.cl-diensten .tegel{
  position:relative;display:flex;flex-direction:column;
  border-radius:var(--r-card);border:1px solid var(--lijn);
  background:var(--wit);text-decoration:none;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.cl-diensten.cl-diensten .tegel:hover{transform:translateY(-4px);box-shadow:var(--schaduw-op);border-color:#CFD6DC;}
.cl-diensten.cl-diensten .tegel-body{padding:clamp(26px,2.1vw,38px) clamp(26px,2.1vw,38px) clamp(28px,2.2vw,40px);display:flex;flex-direction:column;flex:1;}
.cl-diensten.cl-diensten .tegel h3{font-size:1.55rem;font-weight:700;line-height:1.15;}
.cl-diensten.cl-diensten .tegel .belofte{color:var(--grijs);font-size:15.5px;margin:12px 0 0;flex:1;}
.cl-diensten.cl-diensten .tegel-voet{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:26px;padding-top:20px;border-top:1px solid var(--lijn);}
.cl-diensten.cl-diensten .prijs{font-family:var(--f-mono);font-size:14px;color:var(--navy);font-weight:500;}
.cl-diensten.cl-diensten .prijs em{font-style:normal;color:var(--grijs-licht);}
.cl-diensten.cl-diensten .pijl{font-size:15px;font-weight:600;color:var(--teal);white-space:nowrap;}
.cl-diensten.cl-diensten .tegel-media{aspect-ratio:16/10;overflow:hidden;background:var(--lijn);}
.cl-diensten.cl-diensten .tegel-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.cl-diensten.cl-diensten .tegel:hover .tegel-media img{transform:scale(1.04);}
.cl-diensten.cl-diensten .t-webdesign{grid-column:span 3;}
.cl-diensten.cl-diensten .t-marketing{grid-column:span 3;}
.cl-diensten.cl-diensten .t-seo{grid-column:span 2;}
.cl-diensten.cl-diensten .t-branding{grid-column:span 2;}
.cl-diensten.cl-diensten .t-fotografie{grid-column:span 2;}
.cl-diensten.cl-diensten .t-grafisch{grid-column:span 3;}
.cl-diensten.cl-diensten .t-webdesign{grid-column:span 4;}
.cl-diensten.cl-diensten .t-marketing{grid-column:span 2;}
.cl-diensten.cl-diensten .t-grafisch{grid-column:span 2;}
.cl-diensten.cl-diensten .tegel-donker{background:var(--navy);border-color:var(--navy);}
.cl-diensten.cl-diensten .tegel-donker h3{color:#fff;}
.cl-diensten.cl-diensten .tegel-donker .belofte{color:rgba(255,255,255,.68);}
.cl-diensten.cl-diensten .tegel-donker .tegel-voet{border-top-color:rgba(255,255,255,.14);}
.cl-diensten.cl-diensten .tegel-donker .prijs{color:#fff;}
.cl-diensten.cl-diensten .tegel-donker .prijs em{color:rgba(255,255,255,.55);}
.cl-diensten.cl-diensten .tegel-donker .pijl{color:#5FC4E0;}
.cl-diensten.cl-diensten .ncnp-vlag{
  align-self:flex-start;font-family:var(--f-mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.12em;color:#0A1128;
  background:#5FC4E0;padding:6px 11px;border-radius:var(--r-pill);margin-bottom:18px;
}
.cl-diensten.cl-diensten .tegel-getint{background:linear-gradient(160deg,#EAF4F8 0%,#F6F1E9 100%);}
.cl-diensten.cl-diensten .werkwijze{background:var(--wit);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);padding:88px 0;}
.cl-diensten.cl-diensten .werkwijze-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;}
.cl-diensten.cl-diensten .stap{padding:0 clamp(26px,2.4vw,44px);border-left:1px solid var(--lijn);}
.cl-diensten.cl-diensten .stap:first-child{padding-left:0;border-left:none;}
.cl-diensten.cl-diensten .stap h3{font-size:1.15rem;font-weight:700;margin-bottom:10px;}
.cl-diensten.cl-diensten .stap p{color:var(--grijs);font-size:15.5px;margin:0;}
.cl-diensten.cl-diensten .ncnp{padding:90px 0;background:var(--navy);color:#fff;}
.cl-diensten.cl-diensten .ncnp .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(44px,5vw,84px);align-items:center;}
.cl-diensten.cl-diensten .ncnp h2{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.12;color:#fff;font-weight:700;}
.cl-diensten.cl-diensten .ncnp p{color:rgba(255,255,255,.72);margin:20px 0 30px;max-width:48ch;}
.cl-diensten.cl-diensten .ncnp .knop-rand{border-color:rgba(255,255,255,.4);color:#fff;}
.cl-diensten.cl-diensten .ncnp .knop-rand:hover{background:#fff;color:var(--navy);}
.cl-diensten.cl-diensten .ncnp-media{border-radius:var(--r-card);overflow:hidden;aspect-ratio:5/4;}
.cl-diensten.cl-diensten .ncnp-media img{width:100%;height:100%;object-fit:cover;}
.cl-diensten.cl-diensten .slot{padding:92px 0;text-align:center;}
.cl-diensten.cl-diensten .slot h2{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.12;font-weight:700;}
.cl-diensten.cl-diensten .slot p{color:var(--grijs);max-width:52ch;margin:20px auto 32px;}
.cl-diensten.cl-diensten .btw{
  font-family:var(--f-mono);font-size:13px;color:var(--grijs-licht);
  max-width:70ch;margin:56px auto 0;padding-top:26px;border-top:1px solid var(--lijn);line-height:1.7;
}
@media (prefers-reduced-motion:no-preference){
.cl-diensten.cl-diensten .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.cl-diensten.cl-diensten .reveal.zichtbaar{opacity:1;transform:none;}
}
@media (max-width:1024px){
.cl-diensten.cl-diensten .hero .wrap{grid-template-columns:1fr;gap:40px;}
.cl-diensten.cl-diensten .hero-media{aspect-ratio:16/10;max-height:340px;}
.cl-diensten.cl-diensten .bento{grid-template-columns:repeat(2,1fr);}
.cl-diensten.cl-diensten .t-webdesign, .cl-diensten.cl-diensten .t-marketing, .cl-diensten.cl-diensten .t-seo, .cl-diensten.cl-diensten .t-branding, .cl-diensten.cl-diensten .t-fotografie, .cl-diensten.cl-diensten .t-grafisch{grid-column:span 1;}
.cl-diensten.cl-diensten .t-webdesign{grid-column:span 2;}
.cl-diensten.cl-diensten .werkwijze-grid{grid-template-columns:repeat(2,1fr);gap:32px 0;}
.cl-diensten.cl-diensten .stap:nth-child(3){padding-left:0;border-left:none;}
.cl-diensten.cl-diensten .ncnp .wrap{grid-template-columns:1fr;gap:36px;}
}
@media (max-width:768px){
.cl-diensten.cl-diensten{font-size:16px;}
.cl-diensten.cl-diensten .wrap{padding:0 20px;}
.cl-diensten.cl-diensten .hero{padding:44px 0 56px;}
.cl-diensten.cl-diensten .bento{grid-template-columns:1fr;}
.cl-diensten.cl-diensten .t-webdesign{grid-column:span 1;}
.cl-diensten.cl-diensten .werkwijze-grid{grid-template-columns:1fr;gap:28px;}
.cl-diensten.cl-diensten .stap{padding:0;border-left:none;}
}

/* ==================== PAGINA: webdesign ==================== */
.cl-diensten.cl-webdesign *, .cl-diensten.cl-webdesign *::before, .cl-diensten.cl-webdesign *::after{box-sizing:border-box;}
.cl-diensten.cl-webdesign{margin:0;background:var(--papier);color:var(--navy);font-family:var(--f-body);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;}
.cl-diensten.cl-webdesign img{display:block;max-width:100%;}
.cl-diensten.cl-webdesign a{color:inherit;}
.cl-diensten.cl-webdesign h1, .cl-diensten.cl-webdesign h2, .cl-diensten.cl-webdesign h3{font-family:var(--f-display);letter-spacing:-.022em;margin:0;}
.cl-diensten.cl-webdesign .wrap{width:min(92vw,1600px);margin:0 auto;padding:0 clamp(20px,2.5vw,40px);}
@media (min-width:1240px) and (max-width:1439px){
.cl-diensten.cl-webdesign .wrap{width:min(94vw,1400px);}
}
.cl-diensten.cl-webdesign .knop{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:var(--r-pill);
      font-family:var(--f-body);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;
      border:1.5px solid transparent;transition:transform .18s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);}
.cl-diensten.cl-webdesign .knop:active{transform:translateY(1px) scale(.985);}
.cl-diensten.cl-webdesign .knop-primair{background:var(--teal);color:#fff;box-shadow:0 6px 18px rgba(30,130,162,.28);}
.cl-diensten.cl-webdesign .knop-primair:hover{background:var(--teal-diep);box-shadow:0 10px 26px rgba(30,130,162,.34);}
.cl-diensten.cl-webdesign .knop-rand{border-color:var(--navy);color:var(--navy);background:transparent;}
.cl-diensten.cl-webdesign .knop-rand:hover{background:var(--navy);color:#fff;}
.cl-diensten.cl-webdesign .knop-klein{padding:10px 18px;font-size:14px;}
.cl-diensten.cl-webdesign .knop-vol{width:100%;justify-content:center;}
.cl-diensten.cl-webdesign .kruimel{font-family:var(--f-mono);font-size:12.5px;color:var(--grijs-licht);padding:22px 0 0;}
.cl-diensten.cl-webdesign .kruimel a{text-decoration:none;}
.cl-diensten.cl-webdesign .kruimel a:hover{color:var(--navy);}
.cl-diensten.cl-webdesign .hero{padding:34px 0 0;}
.cl-diensten.cl-webdesign .eyebrow{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--teal);margin:0 0 20px;}
.cl-diensten.cl-webdesign .hero-kop{max-width:100%;}
.cl-diensten.cl-webdesign .hero h1{font-size:clamp(2.6rem,5.2vw,4.6rem);line-height:1.02;font-weight:800;max-width:15ch;text-wrap:balance;}
.cl-diensten.cl-webdesign .hero-onder{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,4vw,72px);align-items:end;margin-top:28px;}
.cl-diensten.cl-webdesign .hero-onder p{font-size:clamp(18px,1.15vw,21px);color:var(--grijs);max-width:52ch;margin:0;}
.cl-diensten.cl-webdesign .hero-acties{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-start;}
.cl-diensten.cl-webdesign .hero-beeld{margin-top:52px;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--schaduw-op);aspect-ratio:21/9;}
.cl-diensten.cl-webdesign .hero-beeld img{width:100%;height:100%;object-fit:cover;}
.cl-diensten.cl-webdesign .probleem{padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-webdesign .probleem .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,5vw,84px);align-items:center;}
.cl-diensten.cl-webdesign .probleem-beeld{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--schaduw);}
.cl-diensten.cl-webdesign .probleem-beeld img{width:100%;height:100%;object-fit:cover;}
.cl-diensten.cl-webdesign .probleem h2{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.1;font-weight:700;max-width:20ch;}
.cl-diensten.cl-webdesign .probleem p{color:var(--grijs);max-width:58ch;margin:22px 0 0;font-size:18px;}
.cl-diensten.cl-webdesign .inbegrepen{background:var(--wit);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);padding:clamp(64px,6vw,96px) 0;}
.cl-diensten.cl-webdesign .sectiekop{max-width:64ch;margin:0 0 clamp(32px,3vw,46px);}
.cl-diensten.cl-webdesign .sectiekop h2{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.12;font-weight:700;}
.cl-diensten.cl-webdesign .sectiekop p{color:var(--grijs);margin:14px 0 0;}
.cl-diensten.cl-webdesign .rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:thin;}
.cl-diensten.cl-webdesign .rail::-webkit-scrollbar{height:6px;}
.cl-diensten.cl-webdesign .rail::-webkit-scrollbar-thumb{background:var(--lijn);border-radius:var(--r-pill);}
.cl-diensten.cl-webdesign .rail-item{scroll-snap-align:start;flex:0 0 clamp(230px,21vw,300px);
           border:1px solid var(--lijn);border-radius:var(--r-card);padding:26px 26px 28px;background:var(--papier);}
.cl-diensten.cl-webdesign .rail-item h3{font-size:1.08rem;font-weight:700;margin-bottom:9px;}
.cl-diensten.cl-webdesign .rail-item p{margin:0;color:var(--grijs);font-size:15px;}
.cl-diensten.cl-webdesign .pakketten{padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-webdesign .prijsgrid{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:clamp(18px,1.8vw,28px);align-items:stretch;}
.cl-diensten.cl-webdesign .kaart{display:flex;flex-direction:column;background:var(--wit);border:1px solid var(--lijn);
       border-radius:var(--r-card);padding:clamp(28px,2.3vw,40px);transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.cl-diensten.cl-webdesign .kaart:hover{transform:translateY(-4px);box-shadow:var(--schaduw-op);}
.cl-diensten.cl-webdesign .kaart-top{border:2px solid var(--teal);box-shadow:var(--schaduw-op);position:relative;}
.cl-diensten.cl-webdesign .vlag{position:absolute;top:-13px;left:clamp(28px,2.3vw,40px);background:var(--teal);color:#fff;
      font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
      padding:6px 13px;border-radius:var(--r-pill);}
.cl-diensten.cl-webdesign .kaart h3{font-size:1.3rem;font-weight:700;}
.cl-diensten.cl-webdesign .bedrag{font-family:var(--f-display);font-weight:800;font-size:clamp(2.2rem,3vw,2.9rem);line-height:1.05;margin:14px 0 4px;letter-spacing:-.03em;}
.cl-diensten.cl-webdesign .bedrag-sub{font-family:var(--f-mono);font-size:13px;color:var(--grijs-licht);margin:0 0 24px;}
.cl-diensten.cl-webdesign .kaart ul{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:13px;flex:1;}
.cl-diensten.cl-webdesign .kaart li{position:relative;padding-left:28px;font-size:15.5px;color:var(--grijs);}
.cl-diensten.cl-webdesign .extra{margin-top:clamp(20px,1.8vw,28px);display:grid;grid-template-columns:auto 1fr auto;
        gap:clamp(20px,2.4vw,44px);align-items:center;
        background:linear-gradient(150deg,#EAF4F8 0%,#F6F1E9 100%);
        border:1px solid var(--lijn);border-radius:var(--r-card);
        padding:clamp(24px,2.2vw,36px) clamp(26px,2.4vw,42px);}
.cl-diensten.cl-webdesign .extra-prijs{font-family:var(--f-display);font-weight:800;font-size:clamp(1.9rem,2.6vw,2.5rem);
             letter-spacing:-.03em;line-height:1;white-space:nowrap;}
.cl-diensten.cl-webdesign .extra-prijs small{display:block;font-family:var(--f-mono);font-size:12px;font-weight:400;
                   letter-spacing:0;color:var(--grijs-licht);margin-top:7px;}
.cl-diensten.cl-webdesign .extra h3{font-size:1.22rem;font-weight:700;margin-bottom:7px;}
.cl-diensten.cl-webdesign .extra p{margin:0;color:var(--grijs);font-size:15.5px;max-width:62ch;}
@media (max-width:900px){
.cl-diensten.cl-webdesign .extra{grid-template-columns:1fr;gap:20px;text-align:left;}
.cl-diensten.cl-webdesign .extra .knop{width:100%;justify-content:center;}
}
.cl-diensten.cl-webdesign .kaart li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:8px;
                  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);}
.cl-diensten.cl-webdesign .traject{background:var(--wit);border-top:1px solid var(--lijn);padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-webdesign .tijdlijn{position:relative;max-width:820px;margin:clamp(32px,3vw,46px) 0 0;}
.cl-diensten.cl-webdesign .tijdlijn::before{content:"";position:absolute;left:9px;top:10px;bottom:10px;width:2px;background:var(--lijn);}
.cl-diensten.cl-webdesign .tl-item{position:relative;padding:0 0 34px 46px;}
.cl-diensten.cl-webdesign .tl-item:last-child{padding-bottom:0;}
.cl-diensten.cl-webdesign .tl-item::before{content:"";position:absolute;left:0;top:8px;width:20px;height:20px;border-radius:50%;
                 background:var(--wit);border:2px solid var(--teal);}
.cl-diensten.cl-webdesign .tl-item h3{font-size:1.18rem;font-weight:700;margin-bottom:8px;}
.cl-diensten.cl-webdesign .tl-item p{margin:0;color:var(--grijs);max-width:62ch;}
.cl-diensten.cl-webdesign .faq{padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-webdesign .faq-lijst{max-width:880px;border-top:1px solid var(--lijn);}
.cl-diensten.cl-webdesign .faq details{border-bottom:1px solid var(--lijn);}
.cl-diensten.cl-webdesign .faq summary{cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
             font-family:var(--f-display);font-weight:700;font-size:1.15rem;}
.cl-diensten.cl-webdesign .faq summary::-webkit-details-marker{display:none;}
.cl-diensten.cl-webdesign .faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
                    border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
                    transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease);}
.cl-diensten.cl-webdesign .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.cl-diensten.cl-webdesign .faq details p{margin:0 0 26px;color:var(--grijs);max-width:70ch;}
.cl-diensten.cl-webdesign .faq summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px;}
.cl-diensten.cl-webdesign .slot{background:var(--navy);color:#fff;padding:clamp(72px,7vw,104px) 0;}
.cl-diensten.cl-webdesign .slot .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,4vw,72px);align-items:center;}
.cl-diensten.cl-webdesign .slot h2{font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.1;color:#fff;font-weight:700;max-width:18ch;}
.cl-diensten.cl-webdesign .slot p{color:rgba(255,255,255,.72);margin:20px 0 0;max-width:50ch;}
.cl-diensten.cl-webdesign .slot-acties{display:flex;gap:14px;flex-wrap:wrap;}
.cl-diensten.cl-webdesign .slot .knop-rand{border-color:rgba(255,255,255,.4);color:#fff;}
.cl-diensten.cl-webdesign .slot .knop-rand:hover{background:#fff;color:var(--navy);}
.cl-diensten.cl-webdesign .btw{font-family:var(--f-mono);font-size:13px;color:var(--grijs-licht);padding:30px 0 0;line-height:1.7;max-width:78ch;}
@media (prefers-reduced-motion:no-preference){
.cl-diensten.cl-webdesign .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.cl-diensten.cl-webdesign .reveal.zichtbaar{opacity:1;transform:none;}
}
@media (max-width:1024px){
.cl-diensten.cl-webdesign .hero-onder{grid-template-columns:1fr;gap:28px;align-items:start;}
.cl-diensten.cl-webdesign .hero-beeld{aspect-ratio:16/9;margin-top:40px;}
.cl-diensten.cl-webdesign .probleem .wrap{grid-template-columns:1fr;gap:36px;}
.cl-diensten.cl-webdesign .probleem-beeld{aspect-ratio:16/10;max-height:360px;}
.cl-diensten.cl-webdesign .prijsgrid{grid-template-columns:1fr;max-width:620px;}
.cl-diensten.cl-webdesign .kaart-top{order:-1;}
.cl-diensten.cl-webdesign .slot .wrap{grid-template-columns:1fr;gap:32px;}
}
@media (max-width:768px){
.cl-diensten.cl-webdesign{font-size:16px;}
.cl-diensten.cl-webdesign .hero-kop{max-width:100%;}
.cl-diensten.cl-webdesign .hero-beeld{aspect-ratio:4/3;}
.cl-diensten.cl-webdesign .rail-item{flex:0 0 78vw;}
}

/* ==================== PAGINA: online-marketing ==================== */
.cl-diensten.cl-online-marketing *, .cl-diensten.cl-online-marketing *::before, .cl-diensten.cl-online-marketing *::after{box-sizing:border-box;}
.cl-diensten.cl-online-marketing{margin:0;background:var(--papier);color:var(--navy);font-family:var(--f-body);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;}
.cl-diensten.cl-online-marketing img{display:block;max-width:100%;}
.cl-diensten.cl-online-marketing a{color:inherit;}
.cl-diensten.cl-online-marketing h1, .cl-diensten.cl-online-marketing h2, .cl-diensten.cl-online-marketing h3{font-family:var(--f-display);letter-spacing:-.022em;margin:0;}
.cl-diensten.cl-online-marketing .wrap{width:min(92vw,1600px);margin:0 auto;padding:0 clamp(20px,2.5vw,40px);}
@media (min-width:1240px) and (max-width:1439px){
.cl-diensten.cl-online-marketing .wrap{width:min(94vw,1400px);}
}
.cl-diensten.cl-online-marketing .knop{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:var(--r-pill);
      font-family:var(--f-body);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;
      border:1.5px solid transparent;transition:transform .18s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);}
.cl-diensten.cl-online-marketing .knop:active{transform:translateY(1px) scale(.985);}
.cl-diensten.cl-online-marketing .knop-primair{background:var(--teal);color:#fff;box-shadow:0 6px 18px rgba(30,130,162,.28);}
.cl-diensten.cl-online-marketing .knop-primair:hover{background:var(--teal-diep);box-shadow:0 10px 26px rgba(30,130,162,.34);}
.cl-diensten.cl-online-marketing .knop-rand{border-color:var(--navy);color:var(--navy);background:transparent;}
.cl-diensten.cl-online-marketing .knop-rand:hover{background:var(--navy);color:#fff;}
.cl-diensten.cl-online-marketing .knop-klein{padding:10px 18px;font-size:14px;}
.cl-diensten.cl-online-marketing .kruimel{font-family:var(--f-mono);font-size:12.5px;color:var(--grijs-licht);padding:22px 0 0;}
.cl-diensten.cl-online-marketing .kruimel a{text-decoration:none;}
.cl-diensten.cl-online-marketing .kruimel a:hover{color:var(--navy);}
.cl-diensten.cl-online-marketing .eyebrow{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--teal);margin:0 0 20px;}
.cl-diensten.cl-online-marketing .sectiekop{max-width:64ch;margin:0 0 clamp(32px,3vw,48px);}
.cl-diensten.cl-online-marketing .sectiekop h2{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.12;font-weight:700;}
.cl-diensten.cl-online-marketing .sectiekop p{color:var(--grijs);margin:14px 0 0;}
.cl-diensten.cl-online-marketing .hero{padding:34px 0 clamp(64px,6vw,96px);}
.cl-diensten.cl-online-marketing .hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(44px,5vw,88px);align-items:center;}
.cl-diensten.cl-online-marketing .hero h1{font-size:clamp(2.5rem,4.4vw,4.1rem);line-height:1.03;font-weight:800;max-width:16ch;text-wrap:balance;}
.cl-diensten.cl-online-marketing .hero p{font-size:clamp(18px,1.15vw,21px);color:var(--grijs);max-width:52ch;margin:24px 0 34px;}
.cl-diensten.cl-online-marketing .hero-acties{display:flex;gap:14px;flex-wrap:wrap;}
.cl-diensten.cl-online-marketing .garantie{background:var(--navy);color:#fff;border-radius:var(--r-card);
          padding:clamp(32px,2.8vw,46px);box-shadow:var(--schaduw-op);}
.cl-diensten.cl-online-marketing .garantie-vlag{display:inline-block;background:var(--teal-licht);color:var(--navy);
               font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
               padding:6px 12px;border-radius:var(--r-pill);margin-bottom:22px;}
.cl-diensten.cl-online-marketing .garantie h2{font-size:clamp(1.5rem,2vw,1.95rem);line-height:1.15;color:#fff;font-weight:700;}
.cl-diensten.cl-online-marketing .garantie p{color:rgba(255,255,255,.72);margin:16px 0 0;font-size:16px;}
.cl-diensten.cl-online-marketing .garantie a{color:var(--teal-licht);font-weight:600;text-decoration:none;display:inline-block;margin-top:22px;}
.cl-diensten.cl-online-marketing .garantie a:hover{text-decoration:underline;}
.cl-diensten.cl-online-marketing .uitkomsten{background:var(--wit);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
            padding:clamp(64px,6vw,100px) 0;}
.cl-diensten.cl-online-marketing .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2vw,32px);}
.cl-diensten.cl-online-marketing .uitkomst{border-radius:var(--r-card);padding:clamp(30px,2.6vw,44px);border:1px solid var(--lijn);background:var(--papier);}
.cl-diensten.cl-online-marketing .uitkomst-goed{border-color:var(--teal);background:linear-gradient(155deg,#EAF4F8 0%,#F6F1E9 100%);}
.cl-diensten.cl-online-marketing .uitkomst h3{font-size:1.35rem;font-weight:700;margin-bottom:12px;}
.cl-diensten.cl-online-marketing .uitkomst p{margin:0;color:var(--grijs);}
.cl-diensten.cl-online-marketing .uitkomst .bedragregel{font-family:var(--f-mono);font-size:14px;color:var(--navy);margin-top:20px;
                       padding-top:18px;border-top:1px solid var(--lijn);}
.cl-diensten.cl-online-marketing .kanalen{padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-online-marketing .kanalen .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,5vw,84px);align-items:center;}
.cl-diensten.cl-online-marketing .kanaal-beeld{border-radius:var(--r-card);overflow:hidden;aspect-ratio:5/6;box-shadow:var(--schaduw);}
.cl-diensten.cl-online-marketing .kanaal-beeld img{width:100%;height:100%;object-fit:cover;}
.cl-diensten.cl-online-marketing .kanaal-lijst{display:grid;gap:0;}
.cl-diensten.cl-online-marketing .kanaal{padding:26px 0;border-top:1px solid var(--lijn);}
.cl-diensten.cl-online-marketing .kanaal:last-child{border-bottom:1px solid var(--lijn);}
.cl-diensten.cl-online-marketing .kanaal h3{font-size:1.25rem;font-weight:700;margin-bottom:8px;}
.cl-diensten.cl-online-marketing .kanaal p{margin:0;color:var(--grijs);max-width:60ch;}
.cl-diensten.cl-online-marketing .pakketten{background:var(--wit);border-top:1px solid var(--lijn);padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-online-marketing .rij{display:grid;grid-template-columns:minmax(200px,.9fr) 1.5fr auto;gap:clamp(24px,3vw,56px);
     align-items:center;padding:clamp(28px,2.6vw,40px);border:1px solid var(--lijn);
     border-radius:var(--r-card);background:var(--papier);margin-bottom:18px;
     transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.cl-diensten.cl-online-marketing .rij:hover{transform:translateY(-3px);box-shadow:var(--schaduw-op);}
.cl-diensten.cl-online-marketing .rij-top{border:2px solid var(--teal);background:var(--wit);box-shadow:var(--schaduw-op);position:relative;}
.cl-diensten.cl-online-marketing .rij-vlag{position:absolute;top:-13px;left:clamp(28px,2.6vw,40px);background:var(--teal);color:#fff;
          font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
          padding:6px 13px;border-radius:var(--r-pill);}
.cl-diensten.cl-online-marketing .rij h3{font-size:1.28rem;font-weight:700;}
.cl-diensten.cl-online-marketing .rij .bedrag{font-family:var(--f-display);font-weight:800;font-size:clamp(1.9rem,2.4vw,2.4rem);
             line-height:1.05;letter-spacing:-.03em;margin:10px 0 6px;}
.cl-diensten.cl-online-marketing .rij .opstart{font-family:var(--f-mono);font-size:12.5px;color:var(--grijs-licht);margin:0;line-height:1.55;}
.cl-diensten.cl-online-marketing .rij ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
.cl-diensten.cl-online-marketing .rij li{position:relative;padding-left:28px;font-size:15.5px;color:var(--grijs);}
.cl-diensten.cl-online-marketing .rij li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:8px;
                border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);}
.cl-diensten.cl-online-marketing .budgetnoot{display:flex;gap:16px;align-items:flex-start;margin-top:26px;
            background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r-card);
            padding:clamp(22px,2vw,30px) clamp(24px,2.2vw,34px);}
.cl-diensten.cl-online-marketing .budgetnoot p{margin:0;color:var(--grijs);font-size:15.5px;max-width:76ch;}
.cl-diensten.cl-online-marketing .budgetnoot strong{color:var(--navy);}
.cl-diensten.cl-online-marketing .aanpak{padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-online-marketing .aanpak-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(40px,5vw,80px);}
.cl-diensten.cl-online-marketing .aanpak-item{padding:26px 0;border-top:1px solid var(--lijn);}
.cl-diensten.cl-online-marketing .aanpak-item h3{font-size:1.12rem;font-weight:700;margin-bottom:8px;}
.cl-diensten.cl-online-marketing .aanpak-item p{margin:0;color:var(--grijs);font-size:15.5px;}
.cl-diensten.cl-online-marketing .faq{background:var(--wit);border-top:1px solid var(--lijn);padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-online-marketing .faq-lijst{max-width:880px;border-top:1px solid var(--lijn);}
.cl-diensten.cl-online-marketing .faq details{border-bottom:1px solid var(--lijn);}
.cl-diensten.cl-online-marketing .faq summary{cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
             font-family:var(--f-display);font-weight:700;font-size:1.15rem;}
.cl-diensten.cl-online-marketing .faq summary::-webkit-details-marker{display:none;}
.cl-diensten.cl-online-marketing .faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
                    border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
                    transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease);}
.cl-diensten.cl-online-marketing .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.cl-diensten.cl-online-marketing .faq details p{margin:0 0 26px;color:var(--grijs);max-width:70ch;}
.cl-diensten.cl-online-marketing .faq summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px;}
.cl-diensten.cl-online-marketing .slot{background:var(--navy);color:#fff;padding:clamp(72px,7vw,104px) 0;}
.cl-diensten.cl-online-marketing .slot .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,4vw,72px);align-items:center;}
.cl-diensten.cl-online-marketing .slot h2{font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.1;color:#fff;font-weight:700;max-width:19ch;}
.cl-diensten.cl-online-marketing .slot p{color:rgba(255,255,255,.72);margin:20px 0 0;max-width:50ch;}
.cl-diensten.cl-online-marketing .slot-acties{display:flex;gap:14px;flex-wrap:wrap;}
.cl-diensten.cl-online-marketing .slot .knop-rand{border-color:rgba(255,255,255,.4);color:#fff;}
.cl-diensten.cl-online-marketing .slot .knop-rand:hover{background:#fff;color:var(--navy);}
.cl-diensten.cl-online-marketing .btw{font-family:var(--f-mono);font-size:13px;color:var(--grijs-licht);padding:30px 0 0;line-height:1.7;max-width:80ch;}
@media (prefers-reduced-motion:no-preference){
.cl-diensten.cl-online-marketing .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.cl-diensten.cl-online-marketing .reveal.zichtbaar{opacity:1;transform:none;}
}
@media (max-width:1024px){
.cl-diensten.cl-online-marketing .hero .wrap{grid-template-columns:1fr;gap:40px;}
.cl-diensten.cl-online-marketing .duo{grid-template-columns:1fr;}
.cl-diensten.cl-online-marketing .kanalen .wrap{grid-template-columns:1fr;gap:36px;}
.cl-diensten.cl-online-marketing .kanaal-beeld{aspect-ratio:16/10;max-height:340px;}
.cl-diensten.cl-online-marketing .rij{grid-template-columns:1fr;gap:24px;}
.cl-diensten.cl-online-marketing .rij .knop{width:100%;justify-content:center;}
.cl-diensten.cl-online-marketing .aanpak-grid{grid-template-columns:1fr;}
.cl-diensten.cl-online-marketing .slot .wrap{grid-template-columns:1fr;gap:32px;}
}
@media (max-width:768px){
.cl-diensten.cl-online-marketing{font-size:16px;}
.cl-diensten.cl-online-marketing .budgetnoot{flex-direction:column;gap:12px;}
}

/* ==================== PAGINA: seo ==================== */
.cl-diensten.cl-seo *, .cl-diensten.cl-seo *::before, .cl-diensten.cl-seo *::after{box-sizing:border-box;}
.cl-diensten.cl-seo{margin:0;background:var(--papier);color:var(--navy);font-family:var(--f-body);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
.cl-diensten.cl-seo img{display:block;max-width:100%;}
.cl-diensten.cl-seo a{color:inherit;}
.cl-diensten.cl-seo h1, .cl-diensten.cl-seo h2, .cl-diensten.cl-seo h3{font-family:var(--f-display);letter-spacing:-.022em;margin:0;}
.cl-diensten.cl-seo .wrap{width:min(92vw,1600px);margin:0 auto;padding:0 clamp(20px,2.5vw,40px);}
@media (min-width:1240px) and (max-width:1439px){
.cl-diensten.cl-seo .wrap{width:min(94vw,1400px);}
}
.cl-diensten.cl-seo .knop{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:var(--r-pill);
      font-family:var(--f-body);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;
      border:1.5px solid transparent;transition:transform .18s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);}
.cl-diensten.cl-seo .knop:active{transform:translateY(1px) scale(.985);}
.cl-diensten.cl-seo .knop-primair{background:var(--teal);color:#fff;box-shadow:0 6px 18px rgba(30,130,162,.28);}
.cl-diensten.cl-seo .knop-primair:hover{background:var(--teal-diep);box-shadow:0 10px 26px rgba(30,130,162,.34);}
.cl-diensten.cl-seo .knop-rand{border-color:var(--navy);color:var(--navy);background:transparent;}
.cl-diensten.cl-seo .knop-rand:hover{background:var(--navy);color:#fff;}
.cl-diensten.cl-seo .knop-klein{padding:10px 18px;font-size:14px;}
.cl-diensten.cl-seo .knop-vol{width:100%;justify-content:center;}
.cl-diensten.cl-seo .kruimel{font-family:var(--f-mono);font-size:12.5px;color:var(--grijs-licht);padding:22px 0 0;}
.cl-diensten.cl-seo .kruimel a{text-decoration:none;}
.cl-diensten.cl-seo .kruimel a:hover{color:var(--navy);}
.cl-diensten.cl-seo .eyebrow{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--teal);margin:0 0 20px;}
.cl-diensten.cl-seo .sectiekop{max-width:64ch;margin:0 0 clamp(32px,3vw,48px);}
.cl-diensten.cl-seo .sectiekop h2{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.12;font-weight:700;}
.cl-diensten.cl-seo .sectiekop p{color:var(--grijs);margin:14px 0 0;}
.cl-diensten.cl-seo .hero{padding:34px 0 0;}
.cl-diensten.cl-seo .hero-tekst{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(40px,5vw,88px);align-items:end;}
.cl-diensten.cl-seo .hero h1{font-size:clamp(2.5rem,4.6vw,4.2rem);line-height:1.03;font-weight:800;max-width:15ch;text-wrap:balance;}
.cl-diensten.cl-seo .hero p{font-size:clamp(18px,1.15vw,21px);color:var(--grijs);max-width:50ch;margin:0;}
.cl-diensten.cl-seo .hero-acties{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.cl-diensten.cl-seo .hero-band{margin-top:clamp(44px,4.5vw,70px);width:100vw;position:relative;left:50%;transform:translateX(-50%);
           height:clamp(260px,32vw,460px);overflow:hidden;}
.cl-diensten.cl-seo .hero-band img{width:100%;height:100%;object-fit:cover;}
.cl-diensten.cl-seo .vergelijk{padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-seo .tabel{width:100%;border-collapse:collapse;max-width:1000px;}
.cl-diensten.cl-seo .tabel caption{text-align:left;font-family:var(--f-mono);font-size:12.5px;color:var(--grijs-licht);padding-bottom:16px;}
.cl-diensten.cl-seo .tabel th, .cl-diensten.cl-seo .tabel td{text-align:left;padding:20px 22px;vertical-align:top;font-size:15.5px;}
.cl-diensten.cl-seo .tabel thead th{font-family:var(--f-display);font-size:1.1rem;font-weight:700;border-bottom:2px solid var(--navy);}
.cl-diensten.cl-seo .tabel thead th:first-child{width:26%;font-family:var(--f-mono);font-size:12px;text-transform:uppercase;
                            letter-spacing:.12em;color:var(--grijs-licht);font-weight:400;border-bottom-color:var(--lijn);}
.cl-diensten.cl-seo .tabel tbody tr{border-bottom:1px solid var(--lijn);}
.cl-diensten.cl-seo .tabel tbody th{font-weight:600;color:var(--navy);font-size:15px;}
.cl-diensten.cl-seo .tabel td{color:var(--grijs);}
.cl-diensten.cl-seo .tabel .kolom-seo{background:linear-gradient(180deg,#EAF4F8 0%,rgba(234,244,248,.35) 100%);}
.cl-diensten.cl-seo .aanpak{background:var(--wit);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
        padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-seo .aanpak .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,5vw,90px);align-items:start;}
.cl-diensten.cl-seo .aanpak-kop{position:sticky;top:110px;}
.cl-diensten.cl-seo .aanpak-kop h2{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.12;font-weight:700;max-width:16ch;}
.cl-diensten.cl-seo .aanpak-kop p{color:var(--grijs);margin:18px 0 0;max-width:44ch;}
.cl-diensten.cl-seo .aanpak-kop .beeld{margin-top:32px;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--schaduw);}
.cl-diensten.cl-seo .aanpak-kop .beeld img{width:100%;height:100%;object-fit:cover;}
.cl-diensten.cl-seo .pijler{padding:30px 0;border-top:1px solid var(--lijn);}
.cl-diensten.cl-seo .pijler:first-child{border-top:none;padding-top:0;}
.cl-diensten.cl-seo .pijler h3{font-size:1.32rem;font-weight:700;margin-bottom:10px;}
.cl-diensten.cl-seo .pijler p{margin:0;color:var(--grijs);max-width:62ch;}
.cl-diensten.cl-seo .audit{padding:clamp(72px,7vw,96px) 0 0;}
.cl-diensten.cl-seo .auditband{display:grid;grid-template-columns:minmax(220px,.8fr) 1.4fr auto;gap:clamp(28px,3vw,60px);
           align-items:center;background:var(--navy);color:#fff;border-radius:var(--r-card);
           padding:clamp(32px,3vw,52px);box-shadow:var(--schaduw-op);}
.cl-diensten.cl-seo .auditband h2{font-size:clamp(1.5rem,2.1vw,2rem);color:#fff;font-weight:700;line-height:1.14;}
.cl-diensten.cl-seo .auditband .bedrag{font-family:var(--f-display);font-weight:800;font-size:clamp(2.2rem,3vw,3rem);
                   line-height:1;letter-spacing:-.03em;margin:16px 0 5px;}
.cl-diensten.cl-seo .auditband .sub{font-family:var(--f-mono);font-size:12.5px;color:rgba(255,255,255,.6);margin:0;}
.cl-diensten.cl-seo .auditband ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.cl-diensten.cl-seo .auditband li{position:relative;padding-left:28px;color:rgba(255,255,255,.78);font-size:15.5px;}
.cl-diensten.cl-seo .auditband li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:8px;
                      border-left:2px solid var(--teal-licht);border-bottom:2px solid var(--teal-licht);transform:rotate(-45deg);}
.cl-diensten.cl-seo .auditband .knop-primair{background:var(--teal-licht);color:var(--navy);box-shadow:none;}
.cl-diensten.cl-seo .auditband .knop-primair:hover{background:#fff;}
.cl-diensten.cl-seo .maand{padding:clamp(48px,5vw,72px) 0 clamp(72px,7vw,110px);}
.cl-diensten.cl-seo .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2vw,32px);}
.cl-diensten.cl-seo .kaart{display:flex;flex-direction:column;background:var(--wit);border:1px solid var(--lijn);
       border-radius:var(--r-card);padding:clamp(30px,2.5vw,44px);
       transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.cl-diensten.cl-seo .kaart:hover{transform:translateY(-4px);box-shadow:var(--schaduw-op);}
.cl-diensten.cl-seo .kaart-top{border:2px solid var(--teal);box-shadow:var(--schaduw-op);position:relative;}
.cl-diensten.cl-seo .vlag{position:absolute;top:-13px;left:clamp(30px,2.5vw,44px);background:var(--teal);color:#fff;
      font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
      padding:6px 13px;border-radius:var(--r-pill);}
.cl-diensten.cl-seo .kaart h3{font-size:1.32rem;font-weight:700;}
.cl-diensten.cl-seo .bedrag{font-family:var(--f-display);font-weight:800;font-size:clamp(2.1rem,2.8vw,2.7rem);
        line-height:1.05;letter-spacing:-.03em;margin:14px 0 5px;}
.cl-diensten.cl-seo .bedrag span{font-size:.4em;font-weight:600;letter-spacing:0;}
.cl-diensten.cl-seo .opstart{font-family:var(--f-mono);font-size:12.5px;color:var(--grijs-licht);margin:0 0 26px;line-height:1.6;}
.cl-diensten.cl-seo .kaart ul{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:13px;flex:1;}
.cl-diensten.cl-seo .kaart li{position:relative;padding-left:28px;font-size:15.5px;color:var(--grijs);}
.cl-diensten.cl-seo .kaart li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:8px;
                  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);}
.cl-diensten.cl-seo .btw{font-family:var(--f-mono);font-size:13px;color:var(--grijs-licht);padding:30px 0 0;line-height:1.7;max-width:80ch;}
.cl-diensten.cl-seo .faq{background:var(--wit);border-top:1px solid var(--lijn);padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-seo .faq-lijst{max-width:880px;border-top:1px solid var(--lijn);}
.cl-diensten.cl-seo .faq details{border-bottom:1px solid var(--lijn);}
.cl-diensten.cl-seo .faq summary{cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
             font-family:var(--f-display);font-weight:700;font-size:1.15rem;}
.cl-diensten.cl-seo .faq summary::-webkit-details-marker{display:none;}
.cl-diensten.cl-seo .faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
                    border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
                    transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease);}
.cl-diensten.cl-seo .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.cl-diensten.cl-seo .faq details p{margin:0 0 26px;color:var(--grijs);max-width:70ch;}
.cl-diensten.cl-seo .faq summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px;}
.cl-diensten.cl-seo .slot{background:var(--navy);color:#fff;padding:clamp(72px,7vw,104px) 0;}
.cl-diensten.cl-seo .slot .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,4vw,72px);align-items:center;}
.cl-diensten.cl-seo .slot h2{font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.1;color:#fff;font-weight:700;max-width:19ch;}
.cl-diensten.cl-seo .slot p{color:rgba(255,255,255,.72);margin:20px 0 0;max-width:50ch;}
.cl-diensten.cl-seo .slot-acties{display:flex;gap:14px;flex-wrap:wrap;}
.cl-diensten.cl-seo .slot .knop-rand{border-color:rgba(255,255,255,.4);color:#fff;}
.cl-diensten.cl-seo .slot .knop-rand:hover{background:#fff;color:var(--navy);}
@media (prefers-reduced-motion:no-preference){
.cl-diensten.cl-seo .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.cl-diensten.cl-seo .reveal.zichtbaar{opacity:1;transform:none;}
}
@media (max-width:1024px){
.cl-diensten.cl-seo .hero-tekst{grid-template-columns:1fr;gap:26px;align-items:start;}
.cl-diensten.cl-seo .aanpak .wrap{grid-template-columns:1fr;gap:38px;}
.cl-diensten.cl-seo .aanpak-kop{position:static;}
.cl-diensten.cl-seo .aanpak-kop .beeld{aspect-ratio:16/9;max-height:300px;}
.cl-diensten.cl-seo .auditband{grid-template-columns:1fr;gap:26px;}
.cl-diensten.cl-seo .auditband .knop{width:100%;justify-content:center;}
.cl-diensten.cl-seo .duo{grid-template-columns:1fr;max-width:620px;}
.cl-diensten.cl-seo .kaart-top{order:-1;}
.cl-diensten.cl-seo .slot .wrap{grid-template-columns:1fr;gap:32px;}
}
@media (max-width:768px){
.cl-diensten.cl-seo{font-size:16px;}
.cl-diensten.cl-seo .tabel thead{display:none;}
.cl-diensten.cl-seo .tabel, .cl-diensten.cl-seo .tabel tbody, .cl-diensten.cl-seo .tabel tr, .cl-diensten.cl-seo .tabel th, .cl-diensten.cl-seo .tabel td{display:block;width:100%;}
.cl-diensten.cl-seo .tabel tbody tr{padding:20px 0;}
.cl-diensten.cl-seo .tabel tbody th{padding:0 0 12px;font-family:var(--f-mono);font-size:12px;
                  text-transform:uppercase;letter-spacing:.1em;color:var(--grijs-licht);}
.cl-diensten.cl-seo .tabel td{padding:0 0 12px;}
.cl-diensten.cl-seo .tabel td::before{content:attr(data-label);display:block;font-weight:600;color:var(--navy);margin-bottom:4px;}
.cl-diensten.cl-seo .tabel .kolom-seo{background:none;}
}

/* ==================== PAGINA: branding ==================== */
.cl-diensten.cl-branding *, .cl-diensten.cl-branding *::before, .cl-diensten.cl-branding *::after{box-sizing:border-box;}
.cl-diensten.cl-branding{margin:0;background:var(--papier);color:var(--navy);font-family:var(--f-body);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;}
.cl-diensten.cl-branding img{display:block;max-width:100%;}
.cl-diensten.cl-branding a{color:inherit;}
.cl-diensten.cl-branding h1, .cl-diensten.cl-branding h2, .cl-diensten.cl-branding h3{font-family:var(--f-display);letter-spacing:-.022em;margin:0;}
.cl-diensten.cl-branding .wrap{width:min(92vw,1600px);margin:0 auto;padding:0 clamp(20px,2.5vw,40px);}
@media (min-width:1240px) and (max-width:1439px){
.cl-diensten.cl-branding .wrap{width:min(94vw,1400px);}
}
.cl-diensten.cl-branding .knop{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:var(--r-pill);
      font-family:var(--f-body);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;
      border:1.5px solid transparent;transition:transform .18s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);}
.cl-diensten.cl-branding .knop:active{transform:translateY(1px) scale(.985);}
.cl-diensten.cl-branding .knop-primair{background:var(--teal);color:#fff;box-shadow:0 6px 18px rgba(30,130,162,.28);}
.cl-diensten.cl-branding .knop-primair:hover{background:var(--teal-diep);box-shadow:0 10px 26px rgba(30,130,162,.34);}
.cl-diensten.cl-branding .knop-rand{border-color:var(--navy);color:var(--navy);background:transparent;}
.cl-diensten.cl-branding .knop-rand:hover{background:var(--navy);color:#fff;}
.cl-diensten.cl-branding .knop-klein{padding:10px 18px;font-size:14px;}
.cl-diensten.cl-branding .kruimel{font-family:var(--f-mono);font-size:12.5px;color:var(--grijs-licht);padding:22px 0 0;}
.cl-diensten.cl-branding .kruimel a{text-decoration:none;}
.cl-diensten.cl-branding .kruimel a:hover{color:var(--navy);}
.cl-diensten.cl-branding .eyebrow{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--teal);margin:0 0 20px;}
.cl-diensten.cl-branding .sectiekop{max-width:64ch;margin:0 0 clamp(32px,3vw,48px);}
.cl-diensten.cl-branding .sectiekop h2{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.12;font-weight:700;}
.cl-diensten.cl-branding .sectiekop p{color:var(--grijs);margin:14px 0 0;}
.cl-diensten.cl-branding .hero{padding:34px 0 clamp(64px,6vw,96px);}
.cl-diensten.cl-branding .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(44px,5vw,88px);align-items:center;}
.cl-diensten.cl-branding .hero h1{font-size:clamp(2.5rem,4.4vw,4.1rem);line-height:1.03;font-weight:800;max-width:14ch;text-wrap:balance;}
.cl-diensten.cl-branding .hero p{font-size:clamp(18px,1.15vw,21px);color:var(--grijs);max-width:50ch;margin:24px 0 34px;}
.cl-diensten.cl-branding .hero-acties{display:flex;gap:14px;flex-wrap:wrap;}
.cl-diensten.cl-branding .merkkit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.4vw,20px);}
.cl-diensten.cl-branding .kit-vak{border:1px solid var(--lijn);border-radius:var(--r-card);background:var(--wit);
         padding:clamp(20px,1.8vw,28px);overflow:hidden;}
.cl-diensten.cl-branding .kit-label{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.13em;
           color:var(--grijs-licht);margin:0 0 16px;}
.cl-diensten.cl-branding .kit-breed{grid-column:span 2;}
.cl-diensten.cl-branding .stalen{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.cl-diensten.cl-branding .staal{aspect-ratio:1;border-radius:10px;display:flex;align-items:flex-end;padding:9px;
       font-family:var(--f-mono);font-size:9.5px;color:rgba(255,255,255,.85);}
.cl-diensten.cl-branding .staal-1{background:var(--navy);}
.cl-diensten.cl-branding .staal-2{background:var(--blauw);}
.cl-diensten.cl-branding .staal-3{background:var(--teal);}
.cl-diensten.cl-branding .staal-4{background:var(--papier);border:1px solid var(--lijn);color:var(--grijs-licht);}
.cl-diensten.cl-branding .type-regel{margin:0 0 14px;line-height:1.15;}
.cl-diensten.cl-branding .type-regel:last-child{margin-bottom:0;}
.cl-diensten.cl-branding .type-display{font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,2.2vw,2.1rem);letter-spacing:-.03em;}
.cl-diensten.cl-branding .type-mono{font-family:var(--f-mono);font-size:14px;color:var(--teal);}
.cl-diensten.cl-branding .type-body{font-family:var(--f-body);font-size:15px;color:var(--grijs);}
.cl-diensten.cl-branding .kit-foto{padding:0;border:none;aspect-ratio:3/2;}
.cl-diensten.cl-branding .kit-foto img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-card);}
.cl-diensten.cl-branding .statement{background:var(--navy);color:#fff;padding:clamp(80px,8vw,130px) 0;}
.cl-diensten.cl-branding .statement p{font-family:var(--f-display);font-weight:700;letter-spacing:-.025em;
             font-size:clamp(1.7rem,3.6vw,3.1rem);line-height:1.15;max-width:20ch;margin:0;}
.cl-diensten.cl-branding .statement p em{font-style:normal;color:var(--teal-licht);}
.cl-diensten.cl-branding .statement .toelichting{font-family:var(--f-body);font-weight:400;font-size:clamp(17px,1.1vw,19px);
                        line-height:1.65;color:rgba(255,255,255,.72);max-width:56ch;
                        margin:clamp(28px,3vw,42px) 0 0;letter-spacing:0;}
.cl-diensten.cl-branding .leveringen{padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-branding .lever-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(14px,1.4vw,20px);}
.cl-diensten.cl-branding .lever{border:1px solid var(--lijn);border-radius:var(--r-card);background:var(--wit);
       padding:22px 24px;transition:border-color .25s var(--ease),transform .25s var(--ease);}
.cl-diensten.cl-branding .lever:hover{border-color:var(--teal);transform:translateY(-3px);}
.cl-diensten.cl-branding .lever h3{font-size:1.02rem;font-weight:700;margin-bottom:6px;}
.cl-diensten.cl-branding .lever p{margin:0;color:var(--grijs);font-size:14.5px;}
.cl-diensten.cl-branding .lever-foto{grid-column:span 2;grid-row:span 2;border-radius:var(--r-card);overflow:hidden;min-height:220px;}
.cl-diensten.cl-branding .lever-foto img{width:100%;height:100%;object-fit:cover;}
.cl-diensten.cl-branding .pakketten{background:var(--wit);border-top:1px solid var(--lijn);padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-branding .trap{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,1.8vw,28px);align-items:start;}
.cl-diensten.cl-branding .trede{border:1px solid var(--lijn);border-radius:var(--r-card);background:var(--papier);
       padding:clamp(28px,2.4vw,40px);display:flex;flex-direction:column;
       transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.cl-diensten.cl-branding .trede:hover{transform:translateY(-4px);box-shadow:var(--schaduw-op);}
.cl-diensten.cl-branding .trede-2{margin-top:clamp(20px,2.2vw,34px);border:2px solid var(--teal);background:var(--wit);
         box-shadow:var(--schaduw-op);position:relative;}
.cl-diensten.cl-branding .trede-3{margin-top:clamp(40px,4.4vw,68px);}
.cl-diensten.cl-branding .vlag{position:absolute;top:-13px;left:clamp(28px,2.4vw,40px);background:var(--teal);color:#fff;
      font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
      padding:6px 13px;border-radius:var(--r-pill);}
.cl-diensten.cl-branding .trede h3{font-size:1.3rem;font-weight:700;}
.cl-diensten.cl-branding .bedrag{font-family:var(--f-display);font-weight:800;font-size:clamp(2.1rem,2.8vw,2.7rem);
        line-height:1.05;letter-spacing:-.03em;margin:14px 0 4px;}
.cl-diensten.cl-branding .bedrag-sub{font-family:var(--f-mono);font-size:12.5px;color:var(--grijs-licht);margin:0 0 24px;}
.cl-diensten.cl-branding .trede ul{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:13px;flex:1;}
.cl-diensten.cl-branding .trede li{position:relative;padding-left:28px;font-size:15.5px;color:var(--grijs);}
.cl-diensten.cl-branding .trede li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:8px;
                  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);}
.cl-diensten.cl-branding .trede li.bouwt{font-weight:600;color:var(--navy);}
.cl-diensten.cl-branding .trede .knop{width:100%;justify-content:center;}
.cl-diensten.cl-branding .btw{font-family:var(--f-mono);font-size:13px;color:var(--grijs-licht);padding:34px 0 0;line-height:1.7;max-width:80ch;}
.cl-diensten.cl-branding .faq{padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-branding .faq-lijst{max-width:880px;border-top:1px solid var(--lijn);}
.cl-diensten.cl-branding .faq details{border-bottom:1px solid var(--lijn);}
.cl-diensten.cl-branding .faq summary{cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
             font-family:var(--f-display);font-weight:700;font-size:1.15rem;}
.cl-diensten.cl-branding .faq summary::-webkit-details-marker{display:none;}
.cl-diensten.cl-branding .faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
                    border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
                    transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease);}
.cl-diensten.cl-branding .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.cl-diensten.cl-branding .faq details p{margin:0 0 26px;color:var(--grijs);max-width:70ch;}
.cl-diensten.cl-branding .faq summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px;}
.cl-diensten.cl-branding .slot{background:var(--navy);color:#fff;padding:clamp(72px,7vw,104px) 0;
      border-top:1px solid rgba(255,255,255,.12);}
.cl-diensten.cl-branding .slot .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,4vw,72px);align-items:center;}
.cl-diensten.cl-branding .slot h2{font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.1;color:#fff;font-weight:700;max-width:19ch;}
.cl-diensten.cl-branding .slot p{color:rgba(255,255,255,.72);margin:20px 0 0;max-width:50ch;}
.cl-diensten.cl-branding .slot-acties{display:flex;gap:14px;flex-wrap:wrap;}
.cl-diensten.cl-branding .slot .knop-rand{border-color:rgba(255,255,255,.4);color:#fff;}
.cl-diensten.cl-branding .slot .knop-rand:hover{background:#fff;color:var(--navy);}
@media (prefers-reduced-motion:no-preference){
.cl-diensten.cl-branding .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.cl-diensten.cl-branding .reveal.zichtbaar{opacity:1;transform:none;}
}
@media (max-width:1024px){
.cl-diensten.cl-branding .hero .wrap{grid-template-columns:1fr;gap:40px;}
.cl-diensten.cl-branding .trap{grid-template-columns:1fr;max-width:620px;}
.cl-diensten.cl-branding .trede-2, .cl-diensten.cl-branding .trede-3{margin-top:0;}
.cl-diensten.cl-branding .trede-2{order:-1;}
.cl-diensten.cl-branding .lever-foto{grid-column:span 2;grid-row:auto;min-height:240px;}
.cl-diensten.cl-branding .slot .wrap{grid-template-columns:1fr;gap:32px;}
}
@media (max-width:768px){
.cl-diensten.cl-branding{font-size:16px;}
.cl-diensten.cl-branding .merkkit{grid-template-columns:1fr;}
.cl-diensten.cl-branding .kit-breed{grid-column:span 1;}
.cl-diensten.cl-branding .lever-grid{grid-template-columns:1fr;}
.cl-diensten.cl-branding .lever-foto{grid-column:span 1;}
}

/* ==================== PAGINA: fotografie ==================== */
.cl-diensten.cl-fotografie *, .cl-diensten.cl-fotografie *::before, .cl-diensten.cl-fotografie *::after{box-sizing:border-box;}
.cl-diensten.cl-fotografie{margin:0;background:var(--papier);color:var(--navy);font-family:var(--f-body);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;}
.cl-diensten.cl-fotografie img{display:block;max-width:100%;}
.cl-diensten.cl-fotografie a{color:inherit;}
.cl-diensten.cl-fotografie h1, .cl-diensten.cl-fotografie h2, .cl-diensten.cl-fotografie h3{font-family:var(--f-display);letter-spacing:-.022em;margin:0;}
.cl-diensten.cl-fotografie .wrap{width:min(92vw,1600px);margin:0 auto;padding:0 clamp(20px,2.5vw,40px);}
@media (min-width:1240px) and (max-width:1439px){
.cl-diensten.cl-fotografie .wrap{width:min(94vw,1400px);}
}
.cl-diensten.cl-fotografie .knop{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:var(--r-pill);
      font-family:var(--f-body);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;
      border:1.5px solid transparent;transition:transform .18s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);}
.cl-diensten.cl-fotografie .knop:active{transform:translateY(1px) scale(.985);}
.cl-diensten.cl-fotografie .knop-primair{background:var(--teal);color:#fff;box-shadow:0 6px 18px rgba(30,130,162,.28);}
.cl-diensten.cl-fotografie .knop-primair:hover{background:var(--teal-diep);box-shadow:0 10px 26px rgba(30,130,162,.34);}
.cl-diensten.cl-fotografie .knop-rand{border-color:var(--navy);color:var(--navy);background:transparent;}
.cl-diensten.cl-fotografie .knop-rand:hover{background:var(--navy);color:#fff;}
.cl-diensten.cl-fotografie .knop-klein{padding:10px 18px;font-size:14px;}
.cl-diensten.cl-fotografie .kruimel{font-family:var(--f-mono);font-size:12.5px;color:var(--grijs-licht);padding:22px 0 0;}
.cl-diensten.cl-fotografie .kruimel a{text-decoration:none;}
.cl-diensten.cl-fotografie .kruimel a:hover{color:var(--navy);}
.cl-diensten.cl-fotografie .eyebrow{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--teal);margin:0 0 20px;}
.cl-diensten.cl-fotografie .sectiekop{max-width:64ch;margin:0 0 clamp(32px,3vw,48px);}
.cl-diensten.cl-fotografie .sectiekop h2{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.12;font-weight:700;}
.cl-diensten.cl-fotografie .sectiekop p{color:var(--grijs);margin:14px 0 0;}
.cl-diensten.cl-fotografie .hero{padding:34px 0 clamp(56px,5vw,84px);}
.cl-diensten.cl-fotografie .hero .wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(40px,4.5vw,80px);align-items:center;}
.cl-diensten.cl-fotografie .hero h1{font-size:clamp(2.5rem,4.4vw,4rem);line-height:1.03;font-weight:800;max-width:13ch;text-wrap:balance;}
.cl-diensten.cl-fotografie .hero p{font-size:clamp(18px,1.15vw,21px);color:var(--grijs);max-width:48ch;margin:24px 0 34px;}
.cl-diensten.cl-fotografie .hero-acties{display:flex;gap:14px;flex-wrap:wrap;}
.cl-diensten.cl-fotografie .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.2vw,18px);align-items:start;}
.cl-diensten.cl-fotografie .trio figure{margin:0;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--schaduw);}
.cl-diensten.cl-fotografie .trio img{width:100%;height:100%;object-fit:cover;}
.cl-diensten.cl-fotografie .trio-1{aspect-ratio:3/4;margin-top:clamp(24px,3vw,48px);}
.cl-diensten.cl-fotografie .trio-2{aspect-ratio:3/4.6;}
.cl-diensten.cl-fotografie .trio-3{aspect-ratio:3/4;margin-top:clamp(40px,5vw,80px);}
.cl-diensten.cl-fotografie .waarom{background:var(--navy);color:#fff;padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-fotografie .waarom .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,84px);align-items:center;}
.cl-diensten.cl-fotografie .waarom h2{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.12;color:#fff;font-weight:700;max-width:17ch;}
.cl-diensten.cl-fotografie .waarom p{color:rgba(255,255,255,.72);margin:22px 0 0;max-width:52ch;}
.cl-diensten.cl-fotografie .waarom-beeld{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3;}
.cl-diensten.cl-fotografie .waarom-beeld img{width:100%;height:100%;object-fit:cover;}
.cl-diensten.cl-fotografie .soorten{padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-fotografie .metsel{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.4vw,20px);}
.cl-diensten.cl-fotografie .tegel{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--lijn);}
.cl-diensten.cl-fotografie .tegel img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease);}
.cl-diensten.cl-fotografie .tegel:hover img{transform:scale(1.04);}
.cl-diensten.cl-fotografie .tegel figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 24px 22px;
                  background:linear-gradient(to top,rgba(10,17,40,.88) 0%,rgba(10,17,40,0) 100%);color:#fff;}
.cl-diensten.cl-fotografie .tegel figcaption strong{display:block;font-family:var(--f-display);font-size:1.15rem;font-weight:700;margin-bottom:4px;}
.cl-diensten.cl-fotografie .tegel figcaption span{font-size:14px;color:rgba(255,255,255,.75);}
.cl-diensten.cl-fotografie .m-groot{grid-column:span 2;grid-row:span 2;aspect-ratio:1;}
.cl-diensten.cl-fotografie .m-breed{grid-column:span 2;aspect-ratio:2/1;}
.cl-diensten.cl-fotografie .m-staand{aspect-ratio:3/4;}
.cl-diensten.cl-fotografie .pakketten{background:var(--wit);border-top:1px solid var(--lijn);padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-fotografie .band{display:grid;grid-template-columns:.85fr 1.3fr auto;gap:clamp(24px,3vw,52px);align-items:center;
      border:1px solid var(--lijn);border-radius:var(--r-card);overflow:hidden;background:var(--papier);
      margin-bottom:20px;transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.cl-diensten.cl-fotografie .band:hover{transform:translateY(-3px);box-shadow:var(--schaduw-op);}
.cl-diensten.cl-fotografie .band-top{border:2px solid var(--teal);background:var(--wit);box-shadow:var(--schaduw-op);position:relative;}
.cl-diensten.cl-fotografie .band-vlag{position:absolute;top:16px;right:16px;background:var(--teal);color:#fff;
           font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
           padding:6px 13px;border-radius:var(--r-pill);z-index:2;}
.cl-diensten.cl-fotografie .band-beeld{aspect-ratio:4/3;height:100%;min-height:200px;background:var(--lijn);}
.cl-diensten.cl-fotografie .band-beeld img{width:100%;height:100%;object-fit:cover;}
.cl-diensten.cl-fotografie .band-tekst{padding:clamp(26px,2.4vw,38px) 0;}
.cl-diensten.cl-fotografie .band h3{font-size:1.3rem;font-weight:700;}
.cl-diensten.cl-fotografie .band .bedrag{font-family:var(--f-display);font-weight:800;font-size:clamp(1.9rem,2.4vw,2.4rem);
              line-height:1.05;letter-spacing:-.03em;margin:10px 0 18px;}
.cl-diensten.cl-fotografie .band ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
.cl-diensten.cl-fotografie .band li{position:relative;padding-left:28px;font-size:15.5px;color:var(--grijs);}
.cl-diensten.cl-fotografie .band li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:8px;
                 border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);}
.cl-diensten.cl-fotografie .band .knop{margin-right:clamp(26px,2.4vw,38px);}
.cl-diensten.cl-fotografie .reiskosten{margin-top:clamp(20px,2vw,30px);border-left:3px solid var(--teal);
            background:linear-gradient(150deg,#EAF4F8 0%,#F6F1E9 100%);
            border-radius:0 var(--r-card) var(--r-card) 0;
            padding:clamp(22px,2vw,30px) clamp(24px,2.2vw,34px);}
.cl-diensten.cl-fotografie .reiskosten p{margin:0;color:var(--grijs);font-size:15.5px;max-width:74ch;}
.cl-diensten.cl-fotografie .reiskosten strong{color:var(--navy);}
.cl-diensten.cl-fotografie .btw{font-family:var(--f-mono);font-size:13px;color:var(--grijs-licht);padding:30px 0 0;line-height:1.7;max-width:80ch;}
.cl-diensten.cl-fotografie .voorbereiding{padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-fotografie .hints{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(40px,5vw,80px);}
.cl-diensten.cl-fotografie .hint{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:24px 0;border-top:1px solid var(--lijn);}
.cl-diensten.cl-fotografie .hint-nr{font-family:var(--f-mono);font-size:12.5px;color:var(--teal);padding-top:4px;}
.cl-diensten.cl-fotografie .hint h3{font-size:1.08rem;font-weight:700;margin-bottom:6px;}
.cl-diensten.cl-fotografie .hint p{margin:0;color:var(--grijs);font-size:15.5px;}
.cl-diensten.cl-fotografie .faq{background:var(--wit);border-top:1px solid var(--lijn);padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-fotografie .faq-lijst{max-width:880px;border-top:1px solid var(--lijn);}
.cl-diensten.cl-fotografie .faq details{border-bottom:1px solid var(--lijn);}
.cl-diensten.cl-fotografie .faq summary{cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
             font-family:var(--f-display);font-weight:700;font-size:1.15rem;}
.cl-diensten.cl-fotografie .faq summary::-webkit-details-marker{display:none;}
.cl-diensten.cl-fotografie .faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
                    border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
                    transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease);}
.cl-diensten.cl-fotografie .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.cl-diensten.cl-fotografie .faq details p{margin:0 0 26px;color:var(--grijs);max-width:70ch;}
.cl-diensten.cl-fotografie .faq summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px;}
.cl-diensten.cl-fotografie .slot{background:var(--navy);color:#fff;padding:clamp(72px,7vw,104px) 0;}
.cl-diensten.cl-fotografie .slot .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,4vw,72px);align-items:center;}
.cl-diensten.cl-fotografie .slot h2{font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.1;color:#fff;font-weight:700;max-width:19ch;}
.cl-diensten.cl-fotografie .slot p{color:rgba(255,255,255,.72);margin:20px 0 0;max-width:50ch;}
.cl-diensten.cl-fotografie .slot-acties{display:flex;gap:14px;flex-wrap:wrap;}
.cl-diensten.cl-fotografie .slot .knop-rand{border-color:rgba(255,255,255,.4);color:#fff;}
.cl-diensten.cl-fotografie .slot .knop-rand:hover{background:#fff;color:var(--navy);}
@media (prefers-reduced-motion:no-preference){
.cl-diensten.cl-fotografie .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.cl-diensten.cl-fotografie .reveal.zichtbaar{opacity:1;transform:none;}
}
@media (max-width:1024px){
.cl-diensten.cl-fotografie .hero .wrap{grid-template-columns:1fr;gap:40px;}
.cl-diensten.cl-fotografie .trio-1, .cl-diensten.cl-fotografie .trio-3{margin-top:0;}
.cl-diensten.cl-fotografie .trio-1, .cl-diensten.cl-fotografie .trio-2, .cl-diensten.cl-fotografie .trio-3{aspect-ratio:3/4;}
.cl-diensten.cl-fotografie .waarom .wrap{grid-template-columns:1fr;gap:36px;}
.cl-diensten.cl-fotografie .metsel{grid-template-columns:repeat(2,1fr);}
.cl-diensten.cl-fotografie .m-groot{grid-column:span 2;grid-row:auto;aspect-ratio:3/2;}
.cl-diensten.cl-fotografie .m-breed{grid-column:span 2;}
.cl-diensten.cl-fotografie .band{grid-template-columns:1fr;gap:0;}
.cl-diensten.cl-fotografie .band-beeld{aspect-ratio:16/9;min-height:0;}
.cl-diensten.cl-fotografie .band-tekst{padding:clamp(26px,2.4vw,38px);}
.cl-diensten.cl-fotografie .band .knop{margin:0 clamp(26px,2.4vw,38px) clamp(26px,2.4vw,38px);width:calc(100% - 2*clamp(26px,2.4vw,38px));justify-content:center;}
.cl-diensten.cl-fotografie .hints{grid-template-columns:1fr;}
.cl-diensten.cl-fotografie .slot .wrap{grid-template-columns:1fr;gap:32px;}
}
@media (max-width:768px){
.cl-diensten.cl-fotografie{font-size:16px;}
.cl-diensten.cl-fotografie .metsel{grid-template-columns:1fr;}
.cl-diensten.cl-fotografie .m-groot, .cl-diensten.cl-fotografie .m-breed{grid-column:span 1;aspect-ratio:4/3;}
}

/* ==================== PAGINA: grafisch-ontwerp ==================== */
.cl-diensten.cl-grafisch-ontwerp *, .cl-diensten.cl-grafisch-ontwerp *::before, .cl-diensten.cl-grafisch-ontwerp *::after{box-sizing:border-box;}
.cl-diensten.cl-grafisch-ontwerp{margin:0;background:var(--papier);color:var(--navy);font-family:var(--f-body);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;}
.cl-diensten.cl-grafisch-ontwerp img{display:block;max-width:100%;}
.cl-diensten.cl-grafisch-ontwerp a{color:inherit;}
.cl-diensten.cl-grafisch-ontwerp h1, .cl-diensten.cl-grafisch-ontwerp h2, .cl-diensten.cl-grafisch-ontwerp h3{font-family:var(--f-display);letter-spacing:-.022em;margin:0;}
.cl-diensten.cl-grafisch-ontwerp .wrap{width:min(92vw,1600px);margin:0 auto;padding:0 clamp(20px,2.5vw,40px);}
@media (min-width:1240px) and (max-width:1439px){
.cl-diensten.cl-grafisch-ontwerp .wrap{width:min(94vw,1400px);}
}
.cl-diensten.cl-grafisch-ontwerp .knop{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:var(--r-pill);
      font-family:var(--f-body);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;
      border:1.5px solid transparent;transition:transform .18s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);}
.cl-diensten.cl-grafisch-ontwerp .knop:active{transform:translateY(1px) scale(.985);}
.cl-diensten.cl-grafisch-ontwerp .knop-primair{background:var(--teal);color:#fff;box-shadow:0 6px 18px rgba(30,130,162,.28);}
.cl-diensten.cl-grafisch-ontwerp .knop-primair:hover{background:var(--teal-diep);box-shadow:0 10px 26px rgba(30,130,162,.34);}
.cl-diensten.cl-grafisch-ontwerp .knop-rand{border-color:var(--navy);color:var(--navy);background:transparent;}
.cl-diensten.cl-grafisch-ontwerp .knop-rand:hover{background:var(--navy);color:#fff;}
.cl-diensten.cl-grafisch-ontwerp .knop-klein{padding:10px 18px;font-size:14px;}
.cl-diensten.cl-grafisch-ontwerp .knop-vol{width:100%;justify-content:center;}
.cl-diensten.cl-grafisch-ontwerp .kruimel{font-family:var(--f-mono);font-size:12.5px;color:var(--grijs-licht);padding:22px 0 0;}
.cl-diensten.cl-grafisch-ontwerp .kruimel a{text-decoration:none;}
.cl-diensten.cl-grafisch-ontwerp .kruimel a:hover{color:var(--navy);}
.cl-diensten.cl-grafisch-ontwerp .eyebrow{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--teal);margin:0 0 20px;}
.cl-diensten.cl-grafisch-ontwerp .sectiekop{max-width:64ch;margin:0 0 clamp(32px,3vw,48px);}
.cl-diensten.cl-grafisch-ontwerp .sectiekop h2{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.12;font-weight:700;}
.cl-diensten.cl-grafisch-ontwerp .sectiekop p{color:var(--grijs);margin:14px 0 0;}
.cl-diensten.cl-grafisch-ontwerp .hero{padding:34px 0 clamp(64px,6vw,96px);}
.cl-diensten.cl-grafisch-ontwerp .hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,5vw,88px);align-items:center;}
.cl-diensten.cl-grafisch-ontwerp .hero h1{font-size:clamp(2.5rem,4.4vw,4.1rem);line-height:1.03;font-weight:800;max-width:14ch;text-wrap:balance;}
.cl-diensten.cl-grafisch-ontwerp .hero p{font-size:clamp(18px,1.15vw,21px);color:var(--grijs);max-width:50ch;margin:24px 0 34px;}
.cl-diensten.cl-grafisch-ontwerp .hero-acties{display:flex;gap:14px;flex-wrap:wrap;}
.cl-diensten.cl-grafisch-ontwerp .formaten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.2vw,18px);}
.cl-diensten.cl-grafisch-ontwerp .formaat{border:1px solid var(--lijn);border-radius:12px;background:var(--wit);
         display:flex;flex-direction:column;justify-content:flex-end;padding:16px;
         transition:border-color .25s var(--ease),transform .25s var(--ease);}
.cl-diensten.cl-grafisch-ontwerp .formaat:hover{border-color:var(--teal);transform:translateY(-3px);}
.cl-diensten.cl-grafisch-ontwerp .formaat b{font-family:var(--f-display);font-size:.98rem;font-weight:700;display:block;}
.cl-diensten.cl-grafisch-ontwerp .formaat span{font-family:var(--f-mono);font-size:10.5px;color:var(--grijs-licht);}
.cl-diensten.cl-grafisch-ontwerp .f-vierkant{aspect-ratio:1;}
.cl-diensten.cl-grafisch-ontwerp .f-story{aspect-ratio:9/16;}
.cl-diensten.cl-grafisch-ontwerp .f-a4{aspect-ratio:210/297;}
.cl-diensten.cl-grafisch-ontwerp .f-kaart{aspect-ratio:85/55;}
.cl-diensten.cl-grafisch-ontwerp .f-banner{aspect-ratio:16/9;grid-column:span 2;}
.cl-diensten.cl-grafisch-ontwerp .formaat-foto{padding:0;overflow:hidden;border:none;}
.cl-diensten.cl-grafisch-ontwerp .formaat-foto img{width:100%;height:100%;object-fit:cover;border-radius:12px;}
.cl-diensten.cl-grafisch-ontwerp .splitsing{background:var(--navy);color:#fff;padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-grafisch-ontwerp .splitsing h2{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.12;color:#fff;font-weight:700;max-width:20ch;}
.cl-diensten.cl-grafisch-ontwerp .splitsing .intro{color:rgba(255,255,255,.72);margin:18px 0 clamp(38px,4vw,56px);max-width:56ch;}
.cl-diensten.cl-grafisch-ontwerp .keuze{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(24px,3vw,52px);align-items:stretch;}
.cl-diensten.cl-grafisch-ontwerp .optie{border:1px solid rgba(255,255,255,.18);border-radius:var(--r-card);padding:clamp(28px,2.6vw,42px);}
.cl-diensten.cl-grafisch-ontwerp .optie h3{font-size:1.4rem;color:#fff;font-weight:700;margin-bottom:12px;}
.cl-diensten.cl-grafisch-ontwerp .optie p{color:rgba(255,255,255,.72);margin:0 0 22px;}
.cl-diensten.cl-grafisch-ontwerp .optie ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
.cl-diensten.cl-grafisch-ontwerp .optie li{position:relative;padding-left:26px;color:rgba(255,255,255,.78);font-size:15.5px;}
.cl-diensten.cl-grafisch-ontwerp .optie li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:7px;
                  border-left:2px solid var(--teal-licht);border-bottom:2px solid var(--teal-licht);transform:rotate(-45deg);}
.cl-diensten.cl-grafisch-ontwerp .scheiding{display:flex;align-items:center;justify-content:center;
           font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.16em;
           color:rgba(255,255,255,.4);position:relative;}
.cl-diensten.cl-grafisch-ontwerp .scheiding::before, .cl-diensten.cl-grafisch-ontwerp .scheiding::after{content:"";position:absolute;left:50%;width:1px;
                                     background:rgba(255,255,255,.18);}
.cl-diensten.cl-grafisch-ontwerp .scheiding::before{top:0;height:calc(50% - 26px);}
.cl-diensten.cl-grafisch-ontwerp .scheiding::after{bottom:0;height:calc(50% - 26px);}
.cl-diensten.cl-grafisch-ontwerp .los{padding:clamp(72px,7vw,96px) 0 clamp(40px,4vw,56px);}
.cl-diensten.cl-grafisch-ontwerp .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2vw,32px);}
.cl-diensten.cl-grafisch-ontwerp .kaart{display:flex;flex-direction:column;background:var(--wit);border:1px solid var(--lijn);
       border-radius:var(--r-card);overflow:hidden;
       transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.cl-diensten.cl-grafisch-ontwerp .kaart:hover{transform:translateY(-4px);box-shadow:var(--schaduw-op);}
.cl-diensten.cl-grafisch-ontwerp .kaart-beeld{aspect-ratio:16/9;background:var(--lijn);}
.cl-diensten.cl-grafisch-ontwerp .kaart-beeld img{width:100%;height:100%;object-fit:cover;}
.cl-diensten.cl-grafisch-ontwerp .kaart-body{padding:clamp(28px,2.4vw,40px);display:flex;flex-direction:column;flex:1;}
.cl-diensten.cl-grafisch-ontwerp .kaart h3{font-size:1.3rem;font-weight:700;}
.cl-diensten.cl-grafisch-ontwerp .bedrag{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,2.6vw,2.6rem);
        line-height:1.05;letter-spacing:-.03em;margin:12px 0 4px;}
.cl-diensten.cl-grafisch-ontwerp .bedrag-sub{font-family:var(--f-mono);font-size:12.5px;color:var(--grijs-licht);margin:0 0 24px;}
.cl-diensten.cl-grafisch-ontwerp .kaart ul{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px;flex:1;}
.cl-diensten.cl-grafisch-ontwerp .kaart li{position:relative;padding-left:28px;font-size:15.5px;color:var(--grijs);}
.cl-diensten.cl-grafisch-ontwerp .kaart li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:8px;
                  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);}
.cl-diensten.cl-grafisch-ontwerp .retainer{padding:0 0 clamp(72px,7vw,110px);}
.cl-diensten.cl-grafisch-ontwerp .retainerband{display:grid;grid-template-columns:minmax(220px,.75fr) 1.4fr auto;gap:clamp(28px,3vw,56px);
              align-items:center;border:2px solid var(--teal);border-radius:var(--r-card);
              background:linear-gradient(150deg,#EAF4F8 0%,#F6F1E9 100%);
              padding:clamp(32px,2.8vw,48px);box-shadow:var(--schaduw-op);position:relative;}
.cl-diensten.cl-grafisch-ontwerp .retainer-vlag{position:absolute;top:-13px;left:clamp(32px,2.8vw,48px);background:var(--teal);color:#fff;
               font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
               padding:6px 13px;border-radius:var(--r-pill);}
.cl-diensten.cl-grafisch-ontwerp .retainerband h3{font-size:1.4rem;font-weight:700;}
.cl-diensten.cl-grafisch-ontwerp .retainerband .bedrag{margin:12px 0 4px;}
.cl-diensten.cl-grafisch-ontwerp .retainerband .opstart{font-family:var(--f-mono);font-size:12.5px;color:var(--grijs-licht);margin:0;line-height:1.6;}
.cl-diensten.cl-grafisch-ontwerp .retainerband ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.cl-diensten.cl-grafisch-ontwerp .retainerband li{position:relative;padding-left:28px;font-size:15.5px;color:var(--grijs);}
.cl-diensten.cl-grafisch-ontwerp .retainerband li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:8px;
                         border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);}
.cl-diensten.cl-grafisch-ontwerp .btw{font-family:var(--f-mono);font-size:13px;color:var(--grijs-licht);padding:32px 0 0;line-height:1.7;max-width:80ch;}
.cl-diensten.cl-grafisch-ontwerp .traject{background:var(--wit);border-top:1px solid var(--lijn);padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-grafisch-ontwerp .spoor{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,40px);position:relative;}
.cl-diensten.cl-grafisch-ontwerp .spoor::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--lijn);}
.cl-diensten.cl-grafisch-ontwerp .halte{position:relative;padding-top:36px;}
.cl-diensten.cl-grafisch-ontwerp .halte::before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;
               background:var(--wit);border:2px solid var(--teal);}
.cl-diensten.cl-grafisch-ontwerp .halte h3{font-size:1.1rem;font-weight:700;margin-bottom:8px;}
.cl-diensten.cl-grafisch-ontwerp .halte p{margin:0;color:var(--grijs);font-size:15.5px;}
.cl-diensten.cl-grafisch-ontwerp .faq{padding:clamp(72px,7vw,110px) 0;}
.cl-diensten.cl-grafisch-ontwerp .faq-lijst{max-width:880px;border-top:1px solid var(--lijn);}
.cl-diensten.cl-grafisch-ontwerp .faq details{border-bottom:1px solid var(--lijn);}
.cl-diensten.cl-grafisch-ontwerp .faq summary{cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
             font-family:var(--f-display);font-weight:700;font-size:1.15rem;}
.cl-diensten.cl-grafisch-ontwerp .faq summary::-webkit-details-marker{display:none;}
.cl-diensten.cl-grafisch-ontwerp .faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
                    border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
                    transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease);}
.cl-diensten.cl-grafisch-ontwerp .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.cl-diensten.cl-grafisch-ontwerp .faq details p{margin:0 0 26px;color:var(--grijs);max-width:70ch;}
.cl-diensten.cl-grafisch-ontwerp .faq summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px;}
.cl-diensten.cl-grafisch-ontwerp .slot{background:var(--navy);color:#fff;padding:clamp(72px,7vw,104px) 0;}
.cl-diensten.cl-grafisch-ontwerp .slot .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,4vw,72px);align-items:center;}
.cl-diensten.cl-grafisch-ontwerp .slot h2{font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.1;color:#fff;font-weight:700;max-width:19ch;}
.cl-diensten.cl-grafisch-ontwerp .slot p{color:rgba(255,255,255,.72);margin:20px 0 0;max-width:50ch;}
.cl-diensten.cl-grafisch-ontwerp .slot-acties{display:flex;gap:14px;flex-wrap:wrap;}
.cl-diensten.cl-grafisch-ontwerp .slot .knop-rand{border-color:rgba(255,255,255,.4);color:#fff;}
.cl-diensten.cl-grafisch-ontwerp .slot .knop-rand:hover{background:#fff;color:var(--navy);}
@media (prefers-reduced-motion:no-preference){
.cl-diensten.cl-grafisch-ontwerp .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.cl-diensten.cl-grafisch-ontwerp .reveal.zichtbaar{opacity:1;transform:none;}
}
@media (max-width:1024px){
.cl-diensten.cl-grafisch-ontwerp .hero .wrap{grid-template-columns:1fr;gap:40px;}
.cl-diensten.cl-grafisch-ontwerp .keuze{grid-template-columns:1fr;gap:20px;}
.cl-diensten.cl-grafisch-ontwerp .scheiding{padding:6px 0;}
.cl-diensten.cl-grafisch-ontwerp .scheiding::before, .cl-diensten.cl-grafisch-ontwerp .scheiding::after{display:none;}
.cl-diensten.cl-grafisch-ontwerp .duo{grid-template-columns:1fr;max-width:620px;}
.cl-diensten.cl-grafisch-ontwerp .retainerband{grid-template-columns:1fr;gap:26px;}
.cl-diensten.cl-grafisch-ontwerp .retainerband .knop{width:100%;justify-content:center;}
.cl-diensten.cl-grafisch-ontwerp .spoor{grid-template-columns:1fr 1fr;gap:32px;}
.cl-diensten.cl-grafisch-ontwerp .spoor::before{display:none;}
.cl-diensten.cl-grafisch-ontwerp .slot .wrap{grid-template-columns:1fr;gap:32px;}
}
@media (max-width:768px){
.cl-diensten.cl-grafisch-ontwerp{font-size:16px;}
.cl-diensten.cl-grafisch-ontwerp .formaten{grid-template-columns:repeat(2,1fr);}
.cl-diensten.cl-grafisch-ontwerp .f-banner{grid-column:span 2;}
.cl-diensten.cl-grafisch-ontwerp .spoor{grid-template-columns:1fr;gap:26px;}
}