/* Allroundmarketeer — dienstpagina's. Laag bovenop v3.css (homepage): gebruikt uitsluitend de tokens,
   typografie, knoppen, accordeon (.acc), werkwijze (.steps), CTA-kaart (.cta) en footer van de homepage.
   Hier staan alleen de componenten die de homepage niet heeft. Geen eigen kleuren of fonts toevoegen. */

/* ---------- Kruimelpad ---------- */
.crumbs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; font: 600 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.crumbs a { color: var(--dim); transition: color .2s; }
.crumbs a:hover { color: var(--cream); }
.crumbs li + li::before { content: "✦"; margin-right: 8px; color: var(--tan); opacity: .6; }

/* ---------- Pagina-hero (homepage-hero, kleiner) ---------- */
.phero { padding: 160px var(--pad) 40px; text-align: center; }
.phero .crumbs { margin-bottom: 36px; }
.phero__h { max-width: 1100px; margin: 0 auto; font: 900 clamp(44px, 7.4vw, 112px)/.88 var(--display); letter-spacing: -.03em; text-transform: uppercase; color: var(--cream); }
.phero__h > span { display: block; }
.phero__sub { max-width: 620px; margin: 28px auto 0; font-size: 17px; line-height: 1.6; color: var(--sub); }
.phero .hero__ctas { margin-top: 34px; }
.phero__chips { margin-top: 44px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.phero__chips li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; border: 1px solid var(--line); background: #121110; font-size: 14px; font-weight: 600; color: var(--cream); }

/* ---------- Sectiekop (zoals .tools__head / .social__head) ---------- */
.sec { max-width: 1240px; margin: 0 auto; padding: 100px var(--pad) 40px; }
.sec__head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 48px; }
.sec__head .h2, .sec__head .h3 { color: var(--cream); }
.sec__head p { max-width: 560px; font-size: 15px; line-height: 1.6; color: var(--dim-2); }

/* ---------- Twee kolommen tekst (intro / uitleg) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 64px; align-items: start; }
.split__lead { font-size: 22px; line-height: 1.45; color: #efefef; }
.prose p + p { margin-top: 16px; }
.prose p { font-size: 16px; line-height: 1.7; color: var(--sub); }
.prose strong { color: var(--cream); font-weight: 600; }

/* ---------- Kaarten (stijl .tools__cat) ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.card { padding: 28px; border-radius: 18px; background: #121110; border: 1px solid var(--line); transition: border-color .35s var(--e-ui), transform .45s var(--e-ui); }
.card:hover { border-color: rgba(255, 255, 255, .22); transform: translateY(-3px); }
.card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.card__n { font: 600 12px/1 var(--body); letter-spacing: .12em; color: var(--dim); }
.card h3 { font: 800 20px/1.1 var(--display); text-transform: uppercase; letter-spacing: -.01em; color: var(--cream); margin-bottom: 10px; }
.card p { font-size: 15px; color: var(--dim-2); }

/* ---------- Checklist op crème (stijl .work) ---------- */
.band { margin-top: 90px; background: var(--cream); color: var(--ink); }
.band__in { max-width: 1240px; margin: 0 auto; padding: 100px var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; }
.band .h2 { color: var(--ink); font-size: clamp(36px, 4.6vw, 72px); overflow-wrap: anywhere; }
.band__note { margin-top: 24px; max-width: 380px; font-size: 15px; color: #5b5750; }
.check { display: grid; gap: 0; }
.check li { display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid rgba(19, 19, 19, .14); }
.check li:last-child { border-bottom: 1px solid rgba(19, 19, 19, .14); }
.check li::before { content: "✦"; font-size: 16px; line-height: 1.5; color: var(--ink); }
.check b { display: block; font: 800 17px/1.25 var(--display); text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 4px; }
.check span { font-size: 15px; color: #4a4741; }

/* ---------- Eerlijk-blok (wat je wel / niet krijgt) ---------- */
.honest { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.honest .card ul { display: grid; gap: 12px; margin-top: 8px; }
.honest .card li { position: relative; padding-left: 22px; font-size: 15px; color: var(--sub); }
.honest .card li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--cream); }
.honest .card--no li::before { background: transparent; border: 1.5px solid var(--dim); }

/* ---------- Bewijs (beeld + bijschrift, zoals .tile) ---------- */
.proof { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.proof__media { border-radius: 22px; overflow: hidden; background: #1b1a18; aspect-ratio: 4 / 3; }
.proof__media img { width: 100%; height: 100%; object-fit: cover; }
.proof__tag { display: inline-block; margin-bottom: 18px; padding: 8px 16px; font-size: 13px; }
.proof h3 { margin-bottom: 14px; }
.proof dl { margin-top: 20px; display: grid; gap: 14px; }
.proof dt { font: 600 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.proof dd { margin: 6px 0 0; font-size: 15px; color: var(--sub); }

/* ---------- FAQ: hergebruikt .acc, eenvoudiger raster ---------- */
.faq .acc summary { grid-template-columns: minmax(0, 1fr) 44px; }
.faq .acc__t { grid-column: 1; font: 700 clamp(18px, 1.8vw, 22px)/1.3 var(--body); letter-spacing: -.01em; text-transform: none; }
.faq .acc__i { grid-column: 2; grid-row: 1; }
.faq .acc__b { grid-template-columns: minmax(0, 1fr) 44px; }
.faq .acc__b p { grid-column: 1; max-width: 760px; }

/* ---------- Gerelateerde diensten ---------- */
.rel a { display: flex; flex-direction: column; justify-content: space-between; min-height: 190px; }
.rel a:hover h3 { transform: translateX(6px); }
.rel h3 { transition: transform .45s var(--e-ui); }
.rel__go { margin-top: 24px; font-size: 14px; font-weight: 600; color: var(--cream); }

/* ---------- Formulier in CTA-kaart ---------- */
.cta--form { height: auto; min-height: 666px; padding: 72px 0; align-items: stretch; }
.cta--form .cta__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: center; width: 100%; }
.form { display: grid; gap: 14px; padding: 28px; border-radius: 18px; }
.form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--sub); }
.form input, .form textarea, .form select { width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); color: var(--text); font: 500 16px/1.4 var(--body); }
.form textarea { min-height: 120px; resize: vertical; }
.form select option { color: #111; }
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible { outline: 2px solid var(--cream); outline-offset: 1px; }
.form .pill { justify-self: start; margin-top: 6px; }
.form__hp { position: absolute; left: -9999px; }
.form__msg { min-height: 1.4em; font-size: 14px; color: var(--cream); }
.form__fine { font-size: 12px; color: var(--dim); }

/* ---------- Tablet / mobiel ---------- */
@media (max-width: 1100px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .split, .band__in, .proof { grid-template-columns: 1fr; gap: 40px; }
  .cta--form .cta__in { grid-template-columns: 1fr; max-width: none; }
  .cta--form .cta__bg { display: none; }
  .cta--form .cta__scrim { background: var(--bg-card); }
}
@media (max-width: 760px) {
  .phero { padding-top: 130px; }
  .phero__h { font-size: 11vw; line-height: .9; }
  .phero__sub { font-size: 16px; }
  .sec { padding-top: 72px; }
  .sec__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cards, .cards--2, .honest { grid-template-columns: 1fr; }
  .split__lead { font-size: 19px; }
  .band { margin-top: 60px; }
  .band__in { padding: 72px var(--pad); }
  .cta--form { padding: 48px 0; min-height: 0; }
  .cta--form .cta__in { padding: 0 24px; }
  .form { padding: 20px; }
}

/* ---------- Google-voorbeelden (mockups) ---------- */
.gx__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gx__item{margin:0;display:flex;flex-direction:column;gap:16px}
.gx__item figcaption{color:var(--sub);font-size:15px;line-height:1.55}
.gx__item figcaption b{display:block;color:var(--cream);font-weight:800;margin-bottom:4px}
.gx__card{background:#fff;color:#202124;border-radius:18px;padding:18px;font-family:Arial,Helvetica,sans-serif;min-height:270px;box-shadow:0 0 0 1px var(--line)}
.gx__q{border:1px solid #dfe1e5;border-radius:999px;padding:9px 16px;font-size:14px;margin-bottom:16px;color:#3c4043;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gx__q::before{content:"⌕ ";color:#9aa0a6}
.gx__sp{display:block;font-weight:700;font-size:13px;margin-bottom:8px}
.gx__site{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.gx__site span{display:flex;flex-direction:column;font-size:13px;line-height:1.3}
.gx__site small{color:#4d5156;font-size:12px}
.gx__fav{width:26px;height:26px;border-radius:50%;background:#e8f0fe;color:#1a73e8;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:12px;flex:none}
.gx__t{color:#1a0dab;font-size:18px;line-height:1.3;margin-bottom:6px}
.gx__d{color:#4d5156;font-size:13.5px;line-height:1.5}
.gx__links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.gx__links span{font-size:12.5px;color:#1a0dab;border:1px solid #dadce0;border-radius:999px;padding:4px 10px}
.gx__shop{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gx__shop div{display:flex;flex-direction:column;font-size:12.5px;line-height:1.35;min-width:0}
.gx__shop i{display:block;aspect-ratio:1;border-radius:10px;margin-bottom:8px;background-image:radial-gradient(circle at 50% 40%,rgba(255,255,255,.35) 0 18%,transparent 19%)!important}
.gx__shop b{font-weight:400;color:#1a0dab;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gx__shop em{font-style:normal;font-weight:700}
.gx__shop small{color:#4d5156}
.gx__map{height:92px;border-radius:12px;margin-bottom:12px;position:relative;background:linear-gradient(115deg,transparent 46%,#fff 46% 50%,transparent 50%),linear-gradient(28deg,transparent 22%,#fff 22% 25%,transparent 25%),linear-gradient(160deg,#c8e6c9 0 30%,transparent 30%),#e8eaed}
.gx__pin{position:absolute;left:52%;top:28%;width:18px;height:18px;background:#ea4335;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.gx__loc{display:flex;flex-direction:column;gap:3px;font-size:14px}
.gx__loc b{color:#1a0dab;font-weight:400;font-size:16px}
.gx__loc small{color:#4d5156;font-size:12.5px}
@media (max-width:1100px){.gx__grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.gx__grid{grid-template-columns:1fr}}

/* vier kaarten op één rij */
@media (min-width:1101px){.cards--4{grid-template-columns:repeat(4,1fr)}}

/* ---------- beeldvlak onder de paginakop (editorial object op crème) ---------- */
.pmedia{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.pmedia img{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;border-radius:22px;background:var(--cream)}
@media (min-width:761px){.pmedia img{aspect-ratio:16/9;object-position:50% 60%}}

/* Merklogo's rechtsboven in een dienstkaart (zelfde chips als de homepage) */
.card__logos { display: flex; gap: 6px; }
.card__logos .chip { transition: transform .45s var(--e-ui); }
.card:hover .card__logos .chip { transform: translateY(-3px) rotate(-3deg); }

/* 2026-11-10 Over-pagina: portret naast tekst */
.split--portrait{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}
.portrait{margin:0}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:22px;background:#1c1a18}
@media (max-width:760px){.portrait img{aspect-ratio:1/1;object-position:50% 25%}}

/* 2026-11-10 Blog: overzicht + artikel. Leestekst op crème "papier", kop en rest in de donkere v3-stijl */
.blist{max-width:1240px;margin:0 auto;padding:0 var(--pad);list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.bcard a{display:grid;align-content:start;gap:12px;height:100%;padding:28px;border-radius:18px;background:#121110;border:1px solid var(--line);color:inherit;transition:border-color .35s var(--e-ui),transform .45s var(--e-ui)}
.bcard a:hover{border-color:var(--tan);transform:translateY(-3px)}
.bcard__cat{font:600 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--tan)}
.bcard__t{font:800 22px/1.12 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--cream)}
.bcard__d{font-size:15px;line-height:1.55;color:var(--dim-2)}
.bcard__m{margin-top:6px;font:600 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
@media (max-width:1100px){.blist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.blist{grid-template-columns:1fr}}

.post{padding:150px var(--pad) 0}
.post__head{max-width:760px;margin:0 auto 48px}
.post__head .crumbs{justify-content:flex-start;margin-bottom:28px}
.post__h{font:900 clamp(34px,5vw,64px)/.95 var(--display);letter-spacing:-.025em;text-transform:uppercase;color:var(--cream)}
.post__intro{margin-top:24px;font-size:19px;line-height:1.6;color:var(--sub)}
.post__meta{display:flex;align-items:center;gap:14px;margin-top:28px;font-size:14px;line-height:1.5;color:var(--dim-2)}
.post__meta img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.post__meta a{color:var(--cream);font-weight:600}
.post__body{max-width:820px;margin:0 auto;padding:clamp(28px,5vw,64px);border-radius:24px;background:var(--cream);color:var(--ink)}
.post__body.prose p,.post__body li{font-size:17px;line-height:1.75;color:#3a3732}
.post__body h2{margin:48px 0 14px;font:900 clamp(24px,2.6vw,32px)/1.05 var(--display);text-transform:uppercase;letter-spacing:-.015em;color:var(--ink)}
.post__body h2:first-child{margin-top:0}
.post__body h3{margin:30px 0 8px;font:800 19px/1.25 var(--display);text-transform:uppercase;color:var(--ink)}
.post__body ul{margin:14px 0;padding-left:22px;display:grid;gap:8px}
.post__body li::marker{color:#a0784a}
.post__body a{color:var(--ink);text-decoration:underline;text-decoration-color:#a0784a;text-underline-offset:3px;text-decoration-thickness:2px}
.post__body strong{color:var(--ink)}
.post__body code{padding:2px 6px;border-radius:6px;background:rgba(0,0,0,.07);font-size:.92em}
.post__author{display:flex;gap:18px;align-items:center;max-width:820px;margin:28px auto 0;padding:22px 24px;border-radius:18px;border:1px solid var(--line);background:#121110}
.post__author img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.post__author p{font-size:15px;line-height:1.6;color:var(--dim-2)}
.post__author b{color:var(--cream)}
.post__author a{color:var(--cream);text-decoration:underline;text-underline-offset:3px}