/* Klantenservice-hub (template-service-hub.php) — designer-export 2026-09-02.
   Hero + tegelgrid + keuzehulp-banner + contact-CTA; daaronder rendert het
   template de bestaande pagina-inhoud in de kp-article-typografie
   (tekstpagina.css wordt naast dit bestand ge-enqueued). */
.ks-hero,.ks-section{--c-navy:#10293d;--c-ink:#16242f;--c-muted:#6f7a83;--c-blue:#1c9bd7;--c-orange:#ef7e1d;--c-line:#e2e0dc;--c-gray:#e9e7e3;--c-wrap:1280px;}
.ks-wrap{max-width:var(--c-wrap);margin:0 auto;padding:0 40px}
.ks-hero{position:relative;background:var(--c-gray);border-bottom-left-radius:42px;border-bottom-right-radius:42px;padding:38px 0 66px}
.ks-crumb{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--c-muted);margin-bottom:28px;flex-wrap:wrap}
.ks-crumb a{color:var(--c-muted);text-decoration:none;transition:color .15s}
.ks-crumb a:hover{color:var(--c-navy)}
.ks-crumb .sep{color:#b6bcc0}
.ks-crumb .cur{color:var(--c-navy);font-weight:500}
.ks-title{font-size:68px;line-height:1.03;font-weight:600;color:var(--c-navy);letter-spacing:-.028em;margin:0 0 22px}
.ks-lead{max-width:760px;color:var(--c-muted);font-size:18px;line-height:1.65;margin:0}
.ks-lead strong{color:var(--c-navy);font-weight:600}
.ks-lead a{color:var(--c-blue);font-weight:500;text-decoration:none}
.ks-lead a:hover{text-decoration:underline;color:var(--c-blue)}
.ks-section{padding:72px 0 240px}
.ks-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:64px}
.ks-card{display:flex;align-items:center;gap:22px;background:#fff;border:1px solid var(--c-line);border-radius:20px;padding:24px 30px;box-shadow:0 1px 2px rgba(16,41,61,.04);text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s,border-color .15s}
.ks-card:hover{transform:translateY(-3px);box-shadow:0 20px 44px -30px rgba(16,41,61,.45);border-color:#d3d0ca;color:inherit}
.ks-card .ic{flex:none;width:58px;height:58px;border-radius:16px;background:radial-gradient(125% 120% at 0% 0%,#16456b 0%,rgba(22,69,107,0) 55%),#01273f;display:grid;place-items:center;color:#fff}
.ks-card .ic svg{display:block}
.ks-card .t{min-width:0;flex:1}
.ks-card .t h2{margin:0;font-size:19px;font-weight:600;color:var(--c-navy);letter-spacing:-.015em}
.ks-card .t p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--c-muted)}
.ks-card .arr{flex:none;width:40px;height:40px;border-radius:999px;background:var(--c-gray);display:grid;place-items:center;color:var(--c-navy);transition:background .15s,color .15s,transform .15s}
.ks-card:hover .arr{background:var(--c-orange);color:#fff;transform:translateX(3px)}
.ks-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;background:var(--c-gray);border-radius:24px;padding:38px 44px;margin:56px 0 0}
.ks-cta h2{margin:0 0 8px;font-size:26px;font-weight:600;color:var(--c-navy);letter-spacing:-.02em}
.ks-cta p{margin:0;font-size:15.5px;line-height:1.6;color:var(--c-muted);max-width:56ch}
.ks-cta a{flex:none;display:inline-flex;align-items:center;gap:10px;background:linear-gradient(90deg,#f0974a,#e87f1e);color:#fff;font-weight:600;font-size:15.5px;padding:15px 28px;border-radius:999px;box-shadow:0 10px 24px -12px rgba(232,127,30,.7);text-decoration:none;transition:filter .15s;white-space:nowrap}
.ks-cta a:hover{filter:brightness(1.05);color:#fff}
/* Beleid-linkrooster (tegel "Voorwaarden & beleid" springt hierheen). */
.ks-beleid{margin:56px 0 0;scroll-margin-top:24px}
.ks-beleid h2{font-size:26px;font-weight:600;color:var(--c-navy);letter-spacing:-.02em;margin:0 0 20px}
.ks-beleid ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 32px;max-width:760px}
.ks-beleid a{display:inline-flex;align-items:center;gap:9px;font-size:15.5px;color:var(--c-ink);text-decoration:none;padding:6px 0;transition:color .15s}
.ks-beleid a:hover{color:var(--c-orange)}
.ks-beleid a svg{flex:none;color:var(--c-orange)}
/* Bestaande pagina-inhoud onder de hub (kp-article-typografie), plus ruimte
   voor de omhooggeschoven footerband. */
.ks-content{padding:64px 0 240px}
.ks-content .kp-article{max-width:820px}
.ks-content h2[id]{scroll-margin-top:24px}
/* De WhatsApp-knop uit de contactsectie is breder dan een klein scherm; kappen en laten wrappen. */
.ks-content .kp-wa__btn{max-width:100%;flex-wrap:wrap;box-sizing:border-box}
/* Keuzehulp-banner (zelfde blok als op de homepage; home.css laadt hier niet). */
.lokb{background:#0d2334;border-radius:26px;padding:30px 34px;display:flex;align-items:center;gap:24px;color:#fff}
.lokb-photo{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.lokb-text{flex:1;min-width:0}
.lokb-title{margin:0 0 6px;font-size:22px;font-weight:600;color:#fff;letter-spacing:-.015em}
.lokb-sub{margin:0;font-size:15.5px;line-height:1.5;color:#c4ccd3;font-weight:300}
.lokb-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:12px;height:60px;padding:4px 32px 4px 4px;background:#e77935;color:#fff;border-radius:999px;font-size:15px;font-weight:500;letter-spacing:.005em;box-shadow:0 8px 18px -8px rgba(231,121,53,.55);transition:background .15s;white-space:nowrap;text-decoration:none}
.lokb-btn:hover{background:#d96b27;color:#fff}
.lokb-arrow{width:52px;height:52px;border-radius:999px;background:#fff;display:grid;place-items:center;color:#16242f;flex:0 0 auto}
.lokb-arrow svg{display:block}
@media (max-width:980px){
.ks-hero{border-bottom-left-radius:28px;border-bottom-right-radius:28px}
.ks-title{font-size:46px}
.ks-wrap{padding:0 22px}
.ks-grid{grid-template-columns:1fr}
.ks-section{padding:54px 0 220px}
.ks-content{padding:54px 0 220px}
.ks-cta{flex-direction:column;align-items:flex-start;padding:30px 28px}
.ks-beleid ul{grid-template-columns:1fr}
}
@media (max-width:640px){
.lokb{flex-direction:column;align-items:flex-start;gap:18px;padding:26px 24px;border-radius:22px}
.lokb-photo{width:60px;height:60px}
}
@media (max-width:560px){
.ks-title{font-size:38px}
.ks-lead{font-size:16px}
.ks-card{padding:18px 20px;gap:16px}
.ks-card .ic{width:48px;height:48px}
}