/* ============================================================
   DIENSTENPAGINA'S
   Eén opmaak voor alle twaalf dienstpagina's en het overzicht.
   Bouwt voort op de kleuren en componenten uit style.css.
   ============================================================ */

/* ---------- Hero ---------- */
.dienst-hero .wrap { padding-top: 34px; padding-bottom: 88px; }
.kruimel ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 46px; padding: 0; font-size: .84rem; color: #9a9a9a; }
.kruimel li + li::before { content: "/"; margin-right: 6px; color: #555; }
.kruimel a { color: #c9c9c9; text-decoration: none; }
.kruimel a:hover { color: var(--yellow); }
.kruimel [aria-current] { color: #fff; }

.dienst-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 60px; align-items: center; }
.dienst-hero h1 { max-width: 16em; font-size: clamp(2rem, 4.4vw, 3.3rem); }
.dienst-hero h1 .yellow { color: var(--yellow); }
.dienst-hero p.lead { color: #d9d9d9; margin: 24px 0 34px; max-width: 38em; }
.dienst-hero .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.dienst-byline { margin-top: 26px; font-size: .86rem; color: #8f8f8f; }
.dienst-byline strong { color: #d9d9d9; font-weight: 600; }

/* Funnelkaart: waar het kanaal zijn werk doet */
.funnelkaart {
  background: #151515; border: 1px solid #2a2a2a; border-radius: var(--radius);
  padding: 28px 26px 24px; color: #fff; position: relative; z-index: 2;
}
.funnelkaart-kop { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); }
.funnelkaart-titel { font-family: var(--font-head); font-size: 1.15rem; line-height: 1.25; margin: 10px 0 20px; }
.funnelrij { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid #262626; }
.funnelrij:first-of-type { border-top: 0; }
.funnelrij .fl { font-weight: 700; font-size: .92rem; }
.funnelrij .fw { font-size: .76rem; color: #8f8f8f; text-align: right; min-width: 64px; }
.funnelbalk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.funnelbalk i { display: block; height: 10px; border-radius: 5px; background: #2b2b2b; }
.funnelbalk i.aan { background: var(--yellow); }
.funnelkaart-noot { font-size: .78rem; color: #7d7d7d; margin-top: 16px; line-height: 1.5; }

/* ---------- In het kort ---------- */
.kort-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 60px; align-items: start; }
.kort-tekst h2 { margin: 6px 0 22px; }
.kort-tekst p { font-size: 1.07rem; color: var(--ink); }
.kort-tekst p + p { margin-top: 16px; }
.wanneer { display: grid; gap: 18px; }
.wanneer-blok { border-radius: var(--radius); padding: 26px 28px; }
.wanneer-blok--ja { background: var(--yellow); }
.wanneer-blok--nee { background: var(--off); border: 1px solid var(--line); }
.wanneer-blok h3 { font-size: 1.05rem; text-transform: uppercase; margin-bottom: 14px; }
.wanneer-blok ul { list-style: none; margin: 0; padding: 0; }
.wanneer-blok li { position: relative; padding-left: 30px; margin-bottom: 10px; font-size: .97rem; line-height: 1.45; }
.wanneer-blok li:last-child { margin-bottom: 0; }
.wanneer-blok--ja li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 9px;
  border-left: 3px solid var(--black); border-bottom: 3px solid var(--black); transform: rotate(-45deg);
}
.wanneer-blok--nee li { color: var(--grey); }
.wanneer-blok--nee li::before {
  content: ""; position: absolute; left: 2px; top: 10px; width: 14px; height: 3px; background: #b9b3a5; border-radius: 2px;
}

/* ---------- Aanpak ---------- */
.stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: stap; }
.stap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px 30px; position: relative; }
.stap-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; background: var(--black); color: var(--yellow);
  font-family: var(--font-head); font-size: .95rem;
}
.stap h3 { margin: 18px 0 8px; font-size: 1.12rem; }
.stap p { color: var(--grey); font-size: .95rem; }

/* ---------- Wat je krijgt ---------- */
.levert-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #2a2a2a; border: 1px solid #2a2a2a; border-radius: var(--radius); overflow: hidden; }
.levert-item { background: var(--black); padding: 30px 28px 32px; }
.levert-item h3 { font-size: 1.05rem; color: #fff; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 12px; }
.levert-item h3::before {
  content: ""; flex: none; width: 22px; height: 12px; margin-top: 5px;
  background:
    radial-gradient(circle 6px at 6px 6px, #fff 5.5px, transparent 6px),
    radial-gradient(circle 6px at 16px 6px, var(--yellow) 5.5px, transparent 6px);
}
.levert-item p { color: #a8a8a8; font-size: .95rem; padding-left: 34px; }

/* ---------- Team of agents ---------- */
.teamrij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.teamkaart { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px 28px; background: #fff; }
.teamkaart--lead { background: var(--yellow); border-color: var(--yellow); }
.teamkaart .rol { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.teamkaart--lead .rol { color: #6b5a15; }
.teamkaart h3 { font-size: 1.08rem; margin: 10px 0 8px; }
.teamkaart p { font-size: .94rem; color: var(--grey); }
.teamkaart--lead p { color: var(--ink); }
.agentpuls { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(255,222,89,.28); margin-right: 8px; vertical-align: middle; }
.mensnoot { margin-top: 26px; display: flex; gap: 16px; align-items: center; background: var(--off); border-radius: var(--radius); padding: 18px 22px; font-size: .95rem; }
.mensnoot img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }

/* ---------- Meten + FAQ ---------- */
.kpi-rij { display: flex; flex-wrap: wrap; gap: 10px; }
.kpi { background: #fff; border: 1.5px solid var(--black); border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: .92rem; }
.kpi:first-child { background: var(--yellow); border-color: var(--yellow); }
.dienst-faq-kop { margin: 70px 0 18px; }
.dienstpagina .faq { max-width: none; margin: 0; }
.dienstpagina .faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.dienstpagina .faq summary {
  cursor: pointer; list-style: none; padding: 22px 46px 22px 0; position: relative;
  font-family: var(--font-head); font-size: 1.05rem; line-height: 1.35;
}
.dienstpagina .faq summary::-webkit-details-marker { display: none; }
.dienstpagina .faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background:
    linear-gradient(var(--black), var(--black)) center/14px 2.5px no-repeat,
    linear-gradient(var(--black), var(--black)) center/2.5px 14px no-repeat;
  transition: transform .2s ease;
}
.dienstpagina .faq details[open] summary::after { transform: rotate(45deg); }
.dienstpagina .faq details p { color: var(--grey); padding-bottom: 24px; max-width: 62em; }

/* ---------- Verwante diensten en overzicht ---------- */
.dienstkaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dienstkaart {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--black);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 24px 22px; background: #fff;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dienstkaart:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.08); border-color: var(--black); }
.dienstkaart strong { font-family: var(--font-head); font-weight: 400; font-size: 1.08rem; line-height: 1.3; }
.dienstkaart span { color: var(--grey); font-size: .92rem; }
.dienstkaart em { font-style: normal; font-weight: 700; font-size: .88rem; margin-top: 10px; }
.dienstkaart em::after { content: " \2192"; }
.dienstgroep + .dienstgroep { margin-top: 54px; }
.dienstgroep h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.dienstgroep h2::before {
  content: ""; width: 30px; height: 16px; flex: none;
  background:
    radial-gradient(circle 8px at 8px 8px, var(--black) 7.5px, transparent 8px),
    radial-gradient(circle 8px at 22px 8px, var(--yellow) 7.5px, transparent 8px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .dienst-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .funnelkaart { max-width: 460px; }
  .stappen, .teamrij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .kort-grid { grid-template-columns: 1fr; gap: 36px; }
  .levert-grid, .dienstkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .dienst-hero .wrap { padding-top: 22px; padding-bottom: 64px; }
  .kruimel ol { margin-bottom: 30px; }
  .stappen, .teamrij, .levert-grid, .dienstkaarten { grid-template-columns: 1fr; }
  .wanneer-blok { padding: 22px 22px; }
  .funnelrij { grid-template-columns: 80px 1fr; }
  .funnelrij .fw { display: none; }
  .dienst-hero .hero-cta .btn { width: 100%; text-align: center; }
}